HTML5 and CSS3 for Web Designers

Master the cutting-edge web technologies of HTML5 and CSS3 to create dynamic, mobile-ready websites and enhance user experiences for future-proof web development.

Course Thumbnail

Essential Skills Gained

Checkmark

Design responsive and interactive web pages using HTML5 and CSS3.

Checkmark

Implement advanced features like geolocation and offline web apps for modern browsers.

Checkmark

Understand and apply new HTML5 and CSS3 elements and APIs for enriched web content.

Checkmark

Optimize web performance with techniques like canvas drawing and multimedia integration.

Format

  • Instructor-led
  • 2 days with lectures and hands-on labs.

Audience

  • Web Developers
  • Front-End Designers
  • UX/UI Designers
  • Digital Marketers

Description

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.

Calendar icon

Upcoming Course Dates

No upcoming dates. Please check back later.

Course Outline

Download PDF

Introducing HTML5 & CSS3

  1. HTML5

  2. How did we get here?

  3. Why should I care about HTML5?

  4. What is CSS3?

  5. Why should I care about CSS3?

  6. Real world

  7. Compatible browsers

  8. The growing mobile market

Markup, HTML5 Style

  1. A basic HTML5 template

  2. The doctype

  3. Leveling the playing field

  4. The rest is history

  5. HTML5 FAQ

HTML5 Semantics

  1. Hats & Questions

  2. Redefining the page’s structure

  3. Structuring a page

  4. A new perspective on content

  5. The document outline - old HTML

  6. The document outline - HTML5

  7. Sectioning root type

  8. Headlines

  9. Breaking news - add headings

Programming aids

  1. Changes to existing features

  2. Other New Elements and Features

  3. Validating HTML5

HTML5 Forms

  1. Dependable tools

  2. HTML5 form attributes

  3. REST & Multiple forms

  4. HTML5 new form input types

  5. Other new form controls

  6. Changes to existing form controls & attributes

HTML5 Audio and Video

  1. A bit of history

  2. Current state

  3. Video containers / codecs

  4. Video support in browsers

  5. DiveIntoHTML5 recommendation

  6. The markup

  7. The markup - attributes

  8. Adding support for multiple videos

  9. Miro VC video encoder

  10. Creating custom controls

  11. Accessible media

  12. Audio

Introducing CSS3

  1. Older browser hacks

  2. Getting older browsers on board

  3. CSS3 selectors - relational

  4. CSS2 selectors - attributes

  5. CSS3 selectors - attributes IE8+

  6. CSS3 selectors - pseudo-classes

  7. CSS2 selectors - pseudo elements

  8. Colors

  9. Colors - names

  10. Opacity

  11. Rounded Corners

  12. Elliptical corners

  13. IE6-8 fix for a CSS3 look

  14. Drop shadows

  15. Text shadows

CSS3 Gradients and Multiple Backgrounds

  1. Gradients

  2. Linear gradients

  3. Radial gradients

  4. Repeating gradients

  5. Multiple background images

  6. Background size

CSS3 Transforms and Transitions

  1. Transforms

  2. Translate

  3. Scale

  4. Rotate

  5. Skew

  6. Changing the origin

  7. Tools

Embedded Fonts and Multicolumn Layouts

  1. Web loaded fonts

  2. Implementing @font-face

  3. @font-face { font-family: …

  4. @font-face { src:

  5. Tricking IE8 and before

  6. Font properties

  7. Font flash of unstyled text

  8. Font download resources

  9. Free font service resources

  10. CSS3 Multicolumn Layouts

  11. Column properties

  12. Media queries

  13. Media features

  14. Media feature operators

  15. Browser support

  16. Media queries for mobile

Geolocation, Offline Web Apps, and Web Storage

  1. Intro - geolocation

  2. Geolocation

  3. Geolocation support

  4. Geolocation methods

  5. Geolocation timestamp

  6. Mapping latitude & longitude

  7. Display on map function

  8. jQuery plugins

  9. Offline Web Applications

  10. HTML5 application cache

  11. Setting up caching

  12. Fallback section & limits

  13. Browser caching

  14. Are we online?

  15. Web storage

  16. Two kinds of web storage

  17. Web storage structure

  18. Storage concerns

  19. The function to remember me

  20. The function to retrieve data

  21. The function for page load

  22. Web Inspector debugging

  23. Additional HTML5 APIs

Canvas, SVG, and Drag and Drop

  1. Canvas

  2. Canvas speed

  3. Drawing on the canvas

  4. WebGL - 3D Canvas graphics

  5. Game development

  6. Show text

  7. SVG

  8. SVG made easier

  9. Canvas easier

  10. Drag and drop

Modernizr / microdata

  1. Modernizr

  2. Modernizr usage

  3. Microdata

  4. Microdata - schema.org

  5. The Person microformat (dv)

  6. Microdata usage

  7. calc( )

  8. min( ), max( )

Your Team has Unique Training Needs.

Your team deserves training as unique as they are.

Let us tailor the course to your needs at no extra cost.