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 <ul> 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
• 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 is 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