UI AND ANGULAR JS

HTML

• What is HTML?

• What is a Web Browser?
• What are Versions of HTML?
• What can You Do with HTML?
• HTML Development Environments
• Using a WYSIWYG Editor
• Using an HTML Editor
• Writing Code with a Text Editor
• Publishing Documents

   

Review of HTML Elements

• Rules of Syntax

• Making your Code Readable
• Making your Code XHTML Compliant
• Building a Document
• Using Colors
• Adding Color to your Page
• Using Headings
• Using Paragraphs
• Using Block quotes
• Using Entities
• Aligning Block-Level Elements

   

Inserting Spaces and Line Breaks

• Displaying Preformatted Text

• Formatting with Inline Elements
• Controlling Fonts
• Introducing List Elements
• Creating Unordered Lists
• Creating Ordered Lists
• Creating Definition Lists
• Nesting Lists
• Indenting Text with the
  • Tag

     

  What is an HTML Table?

  • Building a Table

  • Using the Border Attribute
  • Cell Padding and Cell Spacing
  • Controlling Table and Cell Width
  • Aligning a Table on the Page
  • Aligning Tables and Text
  • Aligning Table Data
  • Spanning Columns and Rows
  • Nesting Tables
  • Adding Color to Tables
  • Using Tables as a Design Tool

     

  Creating a Hyperlink

  • Understanding and Using URLs

  • Linking to a Web Document
  • Linking to a Local Document
  • Linking to Anchors
  • Opening a New Browser Window
  • iFrame

     

  Graphic File Formats

  • Optimizing Image and File Size

  • Inserting Inline Images, ImageMap, Sprite Image
  • Aligning and Formatting Images
  • Using Images to Anchor Links
  • Creating a Look-and-Feel
  • Sizing and Scaling Images
  • Using Transparent Images
  • Using GIF Animation

     

  Forms and Controls

  • Forms , Form Elements

  • Form Actions, Form Methods , Form Design

     

  CSS 2 and CSS 3

  • Semantic mark up
  • HTML or (x)HTML
  • the DOCTYPE
  • Semantics explained
  • Document structure and flow
  • Removing visual elements from mark up
  • About web standards Validating your mark up

  CSS review and basics

  • CSS syntax

  • CSS selectors
  • Classes and ID's
  • CSS1 vs CSS2 vs CSS3
  • The cascade
  • Inheritance
  • Specificity

     

  • Validating your CSS

  Some basic CSS properties

  • The box model

  • Block vs inline elements
  • Div and span
  • Border properties
  • Width, height and max, min
  • The auto property

     

  Creative artwork and CSS

  • Using images in CSS

  • Applying texture
  • Graduated fills
  • Round corners
  • Transparency and semi-transparency
  • Stretchy boxes
  • Creative typography

     

  Layout principals with CSS

  • Document flow

  • Absolute positioning
  • Relative positioning
  • Static positioning
  • Floating elements

     

  Building layout with CSS

  • A centered container

  • 2 column layout
  • 3 column layout

     

  • Faux columns

  CSS based navigation

  • Mark up structures for navigation

  • Styling links with pseudo classes
  • Building a horizontal navigation bar
  • Building a vertical navigation bar
  • CSS drop down navigation systems

     

  Creating a CSS styled form

  • Form mark up

  • Associating labels with inputs
  • Grouping form elements together
  • Form based selectors
  • Changing properties of form elements
  • Formatting text in forms
  • Formatting inputs
  • Formatting form areas
  • Changing the appearance of buttons
  • Laying out forms

     

  Styling a data table

  • Basic table mark up

  • Adding row and column headers
  • Simplifying table structure
  • Styling row and column headings
  • Adding borders
  • Formatting text in tables
  • Laying out and positioning tables

     

  Creating a print page

  • Switching to a different media for print

  • Showing and hiding elements
  • Altering layout for print
  • Changing font and font size for print
  • Showing or hiding link information
  • Previewing and testing print styles

  Working with other media types

  • Switching to a different media

  • Delivery to other devices
  • Dynamically switching style sheets
  • Accessibility considerations
  • Graceful transformation
  • Audio, Video

     

  JavaScript

  • Introduction to JavaScript

  • Origins of JavaScript
  • JavaScript Characteristics
  • Common Programming Concepts
  • Java and JavaScript
  • Server-side vs. Client-side Applications
  • Annotating Your Code with Comments
  • Working with Variables and Data
  • Communicating with the User
  • Using Data More Than Once: Variables
  • JavaScript Reserved and Keywords
  • Expressions and Operators
  • Inline Scripting, Simple User Events, and the onLoad and onUnload Event Handlers
  • Functions, Methods, and Events
  • Methods as Functions
  • Conditional Operators
  • Defining and Calling a Function
  • The confirm() Method and Forms
  • User Events and JavaScript Event Handlers
  • Developing Interactive Forms
  • Form Controls
  • Referring to form Objects
  • The button, checkbox, text, textarea, radio button, and select Objects
  • Controlling Program Flow
  • The if...else, while, for, break, and continue Statements
  • The Modules Operator
  • Using continue in a while Loop
  • The switch Statement
  • The do...while Statement
  • JavaScript Object Model
  • JavaScript Object Hierarchy Model
  • Commonly Used Objects
  • The window, document, history, and location Objects
  • JavaScript Language Objects
  • The String, Array, Date, and Math Objects
  • Evaluating Strings

     

  • Setting and Extracting Time Information

  JQuery

  • Getting Started with jQuery

  • Selecting Elements
  • Manipulating the Page
  • Traversing the DOM and Chaining
  • jQuery Utility Methods
  • Handling Events and Event Delegation
  • AJAX, JSON and Deferreds
  • Enhancing with Animation Effects
  • Grids , Tables with Ajax , Pagination, JQuery UI

     

  • jQuery Best Practices

  HTML 5

  • Introduction

  • Laying out a page with HTML5
  • Page Structure
  • New HTML5 Structural Tags
  • Page Simplification

     

  HTML5 - How we got here

  • The Problems HTML 4 Addresses

  • The Problems XHTML Addresses
  • The New More Flexible Approach of HTML5 - Paving the Cowpaths
  • New Features of HTML5
  • The HTML5 Spec(s)

     

  • Current State of Browser Support

  SECTIONS AND ARTICLES

  • The section Tag

  • The article Tag
  • Outlining
  • Accessibility

     

  Working with other media types

  • Switching to a different media

  • Delivery to other devices
  • Dynamically switching style sheets
  • Accessibility considerations
  • Graceful transformation
  • Audio, Video

     

  HTML5 AUDIO AND VIDEO

  • Supported Media Types

  • The audio Element
  • The video Element
  • Accessibility
  • Scripting Media Elements
  • Dealing with Non-Supporting Browsers

     

  HTML5 FORMS

  • Modernizr

  • New Input Types

     

  HTML5 NEW FORM ATTRIBUTES

  • autocomplete

  • novalidate

     

  HTML5 NEW FORM FIELD ATTRIBUTES

  • required

  • placeholder
  • autofocus
  • autocomplete
  • form
  • pattern

     

  NEW FORM ELEMENTS

  • datalist

  • progress and meter

     

  HTML5 WEB STORAGE

  • Overview of HTML5 Web Storage

  • Web Storage

     

  • Other Storage Methods

  HTML5 CANVAS

  • Getting Started with Canvas

  • Drawing Lines
  • Color and Transparency
  • Rectangles
  • Circles and Arcs
  • Quadratic and Bezier Curves
  • Images
  • Text

     

  INTEGRATED APIS

  • Offline Application API

  • Drag and Drop API

     

  Bootstrap

  • Introduction to Bootstrap

  • Introduction
  • Quick Styles After Dark
  • Our First Web Page
  • What's Inside?
  • Scripts and Styles
  • Core Concepts

     

  • Summary

  Layout with Bootstrap

  • Introduction

  • Grid Layouts
  • Simple Layout
  • Fixed Grids
  • Fluid Grids
  • Responsive Design
  • Responsive Utilities
  • Inspiration
  • Summary

     

  Everyday Bootstrap

  • Introduction

  • Typography
  • Tables
  • Forms
  • Buttons
  • Images and Icons
  • Summary

     

  Bootstrap Component

  • Introductions

  • Drop down Menu
  • Buttons with Menus
  • Tabs and Pill
  • The Navbars
  • Heros, Badges, Labels, and Media

     

  • Summary

  Bootstrap and JavaScript

  • Introduction

  • More Buttons
  • Modals
  • Tooltips and Popovers
  • Scrollspy
  • Typeahead
  • Carousel
  • Summary

     

  Emmet

  • Overview

  • Setup
  • Tips and Tricks

     

  Angular JS

  • Angular JS Introduction

  • AngularJS is a JavaScript Framework
  • AngularJS Extends HTML
  • Model-View-Controller approach

     

  AngularJS Expressions

  • AngularJS Expressions

  • AngularJS Numbers
  • AngularJS Strings
  • AngularJS Objects
  • AngularJS Arrays

     

  Angular JS Directives

  • Data Binding

  • Repeating HTML Elements
  • The ng-app Directive
  • The ng-init Directive
  • The ng-model Directive
  • The ng-repeat Directive

     

  AngularJS Controllers

  • The ng-controller directive

  • Controller Properties
  • Controller Methods
  • Controllers In External Files

     

  AngularJS Filters

  • Adding Filters to Expressions

  • Filtering Input
  • Order By filter

     

  AngularJS HTML DOM

  • The ng-disabled Directive

  • The ng-show Directive

     

  AngularJS Events

  • The ng-click Directive

  • Hiding HTML Elements

     

  AngularJS Modules

  • Module Definitions

  AngularJS Routing

  • Dependency Injection

  • Angular Services
  • Understanding Angular Services
  • Registering Angular Services
  • Managing Service Dependencies
  • Injecting Services Into Controllers
  • Testing Angular Services