agenda.md

HTML5, CSS3, JS and jQuery

Agenda of the training

Pre Requisites

• Getting to know about JS Experience of candidates
• Getting to know what candidates expect from the training
• Software Requirements
  • NodeJS (v4 or higher)
  • Sublime Text code editor
  • Proxy setup to ensure that npm install works
  • Yarn

Day 1

Session 1 ^{1h 0m}

• JS History.
  • History
  • ECMA 262, W3C
• JS Basics
  • Building blocks: Data types, literals and variables
  • Operators and expressions
  • Type checking and type conversion
  • null vs undefined
  • Exception Handling: try, catch, throw
  • Functions: Defining and invoking named and anonymous functions
  • Creating Objects

Session 2 ^{2h 15m}

• Javascript Core Objects

  • Array, String, Date, Math
  • JSON parse, stringify
  • Creating User defined objects

• Document Object Model

  • getElementsByTagName
  • getElementById
  • createElement
  • createTextNode
  • setAttribute
  • getAttribute

Session 3 ^{1h 30m}

• Advanced JS Concepts
  • Scope
  • Function execution types
  • apply, call and bind
  • Prototypes

Session 4 ^{1h 45m}

• Advanced JS Concepts (...continued)

  • Closures
  • Promises
  • Regular Expressions
  • XMLHttpRequest

• Lodash

  • each
  • map
  • filter
  • find

Day 2

Session 1 ^{1h 0m}

• Introducing jQuery

  • Unobtrusive JavaScript
  • jQuery fundamentals
  • The jQuery wrapper
  • Utility functions
  • The document ready handler

• Creating the wrapped element set

  • Selecting elements for manipulation
  • Using basic CSS selectors
  • Using child, container, and attribute selectors
  • Selecting by position
  • Generating new HTML
  • Managing the wrapped element set
  • Determining the size of the wrapped set

Session 2 ^{2h 15m}

• Manipulating page contents with jQuery

  • Manipulating element properties and attributes
  • Manipulating element properties
  • Fetching attribute values
  • Setting attribute values
  • Removing attributes
  • Changing element styling
  • Adding and removing class names
  • Getting and setting styles
  • Setting element content
  • Replacing HTML or text content
  • Moving and copying elements
  • Wrapping elements
  • Removing elements
  • Dealing with form element values

• Events

  • The jQuery Event Model
  • Binding event handlers using jQuery
  • Removing event handlers

Session 3 ^{1h 30m}

• Animations and Effects

  • Showing and hiding elements
  • Implementing a collapsible list
  • Toggling the display state of elements
  • Animating the display state of elements
  • Showing and hiding elements gradually
  • Fading elements into and out of existence
  • Sliding elements up and down
  • Custom Animations

• Talk to the server with Ajax

  • Introduction to Ajax
  • Loading content into elements
  • Making GET and POST requests
  • Getting data with jQuery
  • Making POST requests
  • Setting request defaults

Session 4 ^{1h 45m}

• JQuery UI
  • Building rich UI using jQuery UI
  • UI Widgets
  • Accordion
  • AutoComplete
  • DatePicker
  • Dialog
  • ProgressBar
  • Tabs

Day 3

Session 1 ^{1h 0m}

• HTML5 Overview

  • History of HTML5
  • The HTML5 vision
  • WHATWG and W3C specifications
  • What is part of HTML5?

• HTML5 Markup

  • HTML5 page structure
  • HTML5 DOCTYPE
  • HTML5 markup
  • Structural elements
  • Semantic elements
  • Deprecated elements
  • HTML5 and CSS

Session 2 ^{2h 15m}

• HTML5 Forms

  • HTML5 form elements
  • Building and using HTML5 forms

• HTML5 Audio and Video

  • The audio and video elements
  • Understanding audio and video
  • Audio and video containers
  • Audio and video codecs

• Overview of the HTML5 APIs

  • Overview of the HTML5 APIs
  • Common building blocks
  • Programming HTML5

Session 3 ^{1h 30m}

• HTML5 Canvas and SVG
  • Overview
  • Canvas vs. SVG
  • Canvas coordinates
  • Context
  • Pixel data

Session 4 ^{1h 45m}

• CSS3

  • New CSS3 selectors
  • Borders
  • Rounded corners
  • Drop shadows
  • Backgrounds
  • Text effects
  • Adding shadows to text

• Colours and Opacity

  • RGBA and HSL values and alpha channel opacity
  • Setting opacity

Day 4

Session 1 ^{1h 0m}

• Transitions and transforms
  • Using transitions
  • Using transforms
• UI Properties
  • Appearance
  • Box-sizing
  • Resize
  • Outline-offset
• Generated Content Properties
  • Content
  • Counter-increment
• Media Queries

Session 2 ^{2h 15m}

Session 3 ^{1h 30m}

Session 4 ^{1h 45m}