HTML5 and CSS3 for Web Designers

HTML5 and CSS3 are emerging standards that are being supported in current and future browsers including those in mobile devices. Also usually included in the discussions are other new standards that include geolocation, data caching and graphics that depend more on JavaScript and less on third-party plugins like Flash

Retail Price: $1,100.00

Next Date: Request Date

Course Days: 2


Request a Date

Request Custom Course


About this Course

HTML5 and CSS3 are emerging standards that are being supported in current and future browsers including those in mobile devices. Also usually included in the discussions are other new standards that include geolocation, data caching and graphics that depend more on JavaScript and less on third-party plugins like Flash

At Course Completion

The student will have learned the breadth of the HTML5 and CSS3 specifications, how to know when to use the various features and seen how the related standards can be used to provide a more enriched web experience for the web user.

Audience Profile

Anyone who is currently developing or maintaining web pages and would like to prepare for future browsers including mobile devices such as smart phones and tablets.

Prerequisites

The student should be familiar with html design and layout including CSS used in the web page development cycle. JavaScript is recommended but not necessary.

 


Course Outline

 

Introducing HTML5 & CSS3

 

  • HTML5
  • How did we get here?
  • Why should I care about HTML5?
  • What is CSS3?
  • Why should I care about CSS3?
  • Real world
  • Compatible browsers
  • The growing mobile market

 

Markup, HTML5 Style

 

  • A basic HTML5 template
  • The doctype
  • Leveling the playing field
  • The rest is history
  • HTML5 FAQ

 

HTML5 Semantics

 

  • Hats & Questions
  • Redefining the page’s structure
  • Structuring a page
  • A new perspective on content
  • The document outline - old HTML
  • The document outline - HTML5
  • Sectioning root type
  • Headlines
  • Breaking news - add headings

 

Programming aids

 

  • Changes to existing features
  • Other New Elements and Features
  • Validating HTML5

 

HTML5 Forms

 

  • Dependable tools
  • HTML5 form attributes
  • REST & Multiple forms
  • HTML5 new form input types
  • Other new form controls
  • Changes to existing form controls & attributes

 

HTML5 Audio and Video

 

  • A bit of history
  • Current state
  • Video containers / codecs
  • Video support in browsers
  • DiveIntoHTML5 recommendation
  • The markup
  • The markup - attributes
  • Adding support for multiple videos
  • Miro VC video encoder
  • Creating custom controls
  • Accessible media
  • Audio

 

Introducing CSS3

 

  • Older browser hacks
  • Getting older browsers on board
  • CSS3 selectors - relational
  • CSS2 selectors - attributes
  • CSS3 selectors - attributes IE8+
  • CSS3 selectors - pseudo-classes
  • CSS2 selectors - pseudo elements
  • Colors
  • Colors - names
  • Opacity
  • Rounded Corners
  • Elliptical corners
  • IE6-8 fix for a CSS3 look
  • Drop shadows
  • Text shadows

 

CSS3 Gradients and Multiple Backgrounds

 

  • Gradients
  • Linear gradients
  • Radial gradients
  • Repeating gradients
  • Multiple background images
  • Background size

 

CSS3 Transforms and Transitions

 

  • Transforms
  • Translate
  • Scale
  • Rotate
  • Skew
  • Changing the origin
  • Tools

 

Embedded Fonts and Multicolumn Layouts

 

  • Web loaded fonts
  • Implementing @font-face
  • @font-face { font-family: …
  • @font-face { src:
  • Tricking IE8 and before
  • Font properties
  • Font flash of unstyled text
  • Font download resources
  • Free font service resources
  • CSS3 Multicolumn Layouts
  • Column properties
  • Media queries
  • Media features
  • Media feature operators
  • Browser support
  • Media queries for mobile

 

Geolocation, Offline Web Apps, andWeb Storage

 

  • Intro - geolocation
  • Geolocation
  • Geolocation support
  • Geolocation methods
  • Geolocation timestamp
  • Mapping latitude & longitude
  • Display on map function
  • jQuery plugins
  • Offline Web Applications
  • HTML5 application cache
  • Setting up caching
  • Fallback section & limits
  • Browser caching
  • Are we online?
  • Web storage
  • Two kinds of web storage
  • Web storage structure
  • Storage concerns
  • The function to remember me
  • The function to retrieve data
  • The function for page load
  • Web Inspector debugging
  • Additional HTML5 APIs

 

Canvas, SVG, and Drag and Drop

 

  • Canvas
  • Canvas speed
  • Drawing on the canvas
  • WebGL - 3D Canvas graphics
  • Game development
  • Show text
  • SVG
  • SVG made easier
  • Canvas easier
  • Drag and drop

 

Modernizr / microdata

 

  • Modernizr
  • Modernizr usage
  • Microdata
  • Microdata - schema.org
  • The Person microformat (dv)
  • Microdata usage
  • calc( )
  • min( ), max( )

 



Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com


Request a Date