You are here: Home / Training Courses / Technologies / HTML5 and CSS3 Training

HTML5 and CSS3 Training

HTML5 and CSS3 training shows how to use the latest update to the technology that powers the web.

HTML5

Essentials

Course Information

This two-day interactive training course provides web designers with the knowledge and hands-on practice they need to be able to build and manage professional web sites. The course focuses on understanding web terminology as well as the concepts required to create a web site that can evolve to meet a client’s requirements through HTML5 and CSS3

Duration

2 Days

Cost

£595 (ex VAT)

Schedule

Course Dates

Prerequisites

This course is for students new to web design and development and who want to use HTML5 and CSS3 to build intuitive, attractive and accessible web sites. Before taking this course, students should be familiar with the basic functions of their computer’s operating system

Additional Notes

Courses can be run on Windows and Macintosh platforms and tailored to meet customers’ requirements. Courses run in Edinburgh, Glasgow and at client sites throughout the UK.

Related Courses

  • NA

Exams

  • NA

Course Outline

HTML5 and CSS3 Essentials

Introducing HTML5 and CSS3

  • What is HTML5?
  • What is CSS3?

A Basic HTML5 Template

  • The Doctype
  • The html Element
  • The head Element

Defining the Page’s Structure

  • The header Element
  • The section Element
  • The article Element
  • The nav Element
  • The aside Element
  • The footer Element

New Elements

  • The figure and figcaption Elements
  • The mark Element
  • The progress and meter Elements
  • The time Element

Changes to Existing Features

  • Block Elements Inside Links
  • Bold Text
  • Italicized Text
  • Big and Small Text
  • Description Lists

Additional New Elements and Features

  • The details Element
  • Customized Ordered Lists
  • Scoped Styles
  • The async Attribute for Scripts
  • Validating HTML5 Documents

HTML5 Forms

  • The required Attribute
  • The placeholder Attribute
  • The pattern Attribute
  • The disabled Attribute
  • The readonly Attribute
  • The multiple Attribute
  • The form Attribute
  • The autocomplete Attribute
  • The datalist Element and the list Attribute
  • The autofocus Attribute

HTML5 New Form Input Types

  • Search
  • Email Addresses
  • URLs
  • Telephone Numbers
  • Numbers
  • Ranges
  • Colors
  • Dates and Times

Additional New Form Controls in HTML5

  • The output Element
  • The keygen Element

Changes to Existing Form Controls and Attributes

  • The form Element
  • The optgroup Element
  • The textarea Element

Introducing CSS3

  • CSS3 Selectors
  • Relational Selectors
  • Attribute Selectors
  • Pseudo-classes
  • Structural Pseudo-classes
  • Pseudo-elements and Generated Content

CSS3 Colors

  • RGBA
  • HSL and HSLA
  • Opacity

Rounded Corners and Border-Radius

  • Inset and Multiple Shadows
  • Rounded Corners: border-radius

CSS3 Gradients and Multiple Backgrounds

  • Linear Gradients
  • Radial Gradients
  • Repeating Gradients
  • Multiple Background Images
  • Background Size

CSS3 Transforms

  • Transforms
  • Translation
  • Scaling
  • Rotation
  • Skew
  • Changing the Origin of the Transform

Transitions

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • The transition Shorthand Property
  • Multiple Transitions

Animations

  • Keyframes
  • Animation Properties

Web Fonts with @font-face

  • Implementing @font-face
  • Declaring Font Sources
  • Font Property Descriptors
  • Unicode Range
  • Applying the Font
  • Legal Considerations
  • Creating Various Font File Types: Font Squirrel
  • Other Considerations

CSS3 Multicolumn Layouts

  • The column-count Property
  • The column-gap Property
  • The column-width Property
  • The columns Shorthand Property
  • Columns and the height Property
  • Progressive Enhancement

Media Queries

  • What are Media Queries?
  • Syntax
  • Flexibility of Media Queries
  • Browser Support

 

Advanced

Course Information

This one-day interactive training course provides web designers with the advanced knowledge and hands-on practice they need to be able to build and manage professional web sites. The course focuses on understanding web terminology as well as the concepts required to create a web site that can evolve to meet a client’s requirements with HTML5 and CSS3

Duration

1 Day

Cost

£375 (ex VAT)

Schedule

Course Dates

Prerequisites

This course is for students new to web design and development and who want to use HTML5 and CSS3 to build intuitive, attractive and accessible web sites. Before taking this course, students should be familiar with the basic concepts of HTML and CSS.

Additional Notes

Courses can be run on Windows and Macintosh platforms and tailored to meet customers’ requirements. Courses run in Edinburgh, Glasgow and at client sites throughout the UK.

Related Courses

  • NA

Exams

  • NA

Course Outline

HTML5 and CSS3 Advanced

Geolocation

  • Privacy Concerns
  • Geolocation Methods
  • Checking for Support with Modernizr
  • Retrieving the Current Position
  • Geolocation’s Position Object
  • Grabbing the Latitude and Longitude
  • Loading a Map
  • A Final Word on Older Mobile Devices

Offline Web Applications

  • HTML5 Application Cache
  • Setting Up Your Site to Work Offline
  • Getting Permission to Store the Site Offline
  • Going Offline to Test
  • Limits to Offline Web Application Storage
  • The Fallback Section
  • Refreshing the Cache

Web Storage

  • Two Kinds of Storage
  • What Web Storage Data Looks Like
  • Getting and Setting Data
  • Converting Stored Data
  • Removing Items and Clearing Data
  • Storage Limits
  • Security Considerations

Additional HTML5 APIs

  • Web Workers
  • Web Sockets
  • Web SQL and IndexedDB

Canvas

  • Canvas History
  • Creating a canvas Element
  • Drawing on the Canvas
  • Getting the Context
  • Filling Our Brush with Color
  • Drawing a Rectangle to the Canvas
  • The Canvas Coordinate System
  • Variations on fillStyle
  • Drawing Other Shapes by Creating Paths
  • Saving Canvas Drawings
  • Drawing an Image to the Canvas
  • Manipulating Images
  • Converting an Image from Color to Black and White
  • Security Errors with getImageData
  • Manipulating Video with Canvas
  • Displaying Text on the Canvas
  • Accessibility Concerns

SVG

  • Drawing in SVG
  • Using Inkscape to Create SVG Images
  • SVG Filters
  • Using the Raphaël Library
  • Canvas versus SVG

Drag and Drop

  • Making Elements Draggable
  • The DataTransfer Object
  • Accepting Dropped Elements

HTML5 Audio and Video

  • Video Container Formats
  • Video Codecs
  • Audio Codecs
  • Enabling Native Controls
  • The autoplay Attribute
  • The loop Attribute
  • The preload Attribute
  • The poster Attribute
  • The audio Attribute
  • Adding Support for Multiple Video Formats
  • source Order
  • MIME Types

Encoding Video Files for Use on the Web

  • The Media Elements API
  • Playing and Pausing the Video
  • Muting and Unmuting the Video’s Audio Track
  • Responding When the Video Ends Playback
  • Updating the Time as the Video Plays

Accessible Media