Centriq Training Print Logo

Tuesday

July 23 06:18 AM

WD-500

HTML5 and CSS3 for Web Designers

  • Ways to Train:
  • Live Classroom
    Class is delivered at a Centriq location with a live instructor actually in the classroom.
  • Live Virtual Class
    Class is delivered live online via Centriq's Virtual Remote technology. Student may attend class from home or office or other location with internet access.
  • HD Class
    Class is delivered via award winning HD-ILT at Centriq's facility. Students view the live instructor utilizing a 60'' HD monitor.
  • Ways to Buy:
  • Retail
    Class can be purchased directly via check, credit card, or PO.
  • CV Centriq Vouchers
    Class is available for students using Centriq Vouchers.
  • AP AP Eligible
    Class is available to students utilizing Centriq's unique Annual Pass program.
  • SA SATV Eligible
    Class is available for students utilizing Microsoft Software Assurance Training Vouchers.
  • CLC Cisco Learning Credit
    Class is available for students using Cisco Learning Credits.
Start Date End Date Duration Days Start Time End Time Time Zone Location Ways to Train Ways to Buy Price
Request a Date

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.

Audience

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 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.

View 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( )