Course Description
This 2 day training course is aimed at those who are looking to learn HTML5 and CSS3, and provide a thorough introduction into the use of HTML5 and CSS3 to develop dynamic, modern, standards compliant websites that target the powerful capabilities of modern browsers.
The course takes you through the all common html tags as well as how to style your website using the latest CSS3 standards.
Target Student
This course is for Delegates looking to learn HTML5 and CSS3 with the aim of creating professional web pages, based on the latest standards and best practices.
Pre-Requisites
A basic understanding of HTML, CSS or creating websites would be beneficial but not essential. Delegates should be comfortable using a computer and the internet.
Performance Based Objectives
By the end of this course delegates will know:
Basics of HTML5 structure, elements and the new HTML5 elements
Style websites using CSS3
HTML forms
Adding video and audio to a website
Extended features of CSS3
Embedding web fonts
Developing multicolumn layouts
Designing responsive pages and using CSS media queries to make your website responsive
Make your site compatible with older browsers
Advanced capabilities of modern browers
The basics of offline web apps
Course Content:
Introduction to HTML5
A Basic HTML5 Template
Defining the Pageâ„¢s Structure with HTML5
New HTML5 Elements
Changes to Existing Features
Introduction to CSS3
Styling the HTML Template
CSS3 Selectors
CSS3 Properties
HTML5 FormsÂ
HTML5 New Form Input Types
Additional New Form Controls in HTML5
HTML5 Video and Audio
Video Formats
Video Element
3rd Party Javacript Libraries
Extended Features of CSS3
New Pseudo-classes
Pseudo-elements and Generated Content
CSS3 Colors and Opacity
Rounded Corners
Shadows
CSS3 Gradients and Multiple Backgrounds
CSS3 Transforms
CSS3 Transitions
CSS3 Animations
Embedding Web Fonts with @font-face
Where to Get Fonts
Declaring Fonts in CSS
Applying Fonts to HTML Elements
Multicolumn Layouts
Controlling Columns with CSS3
Creating Columns with HTML
Designing Responsive Pages
Why Responsive?
When to Use Relative Units of Measurement
Testing Pages on Different Devices
Media Queries
Defining Alternative Presentations for Different Devices
Background Compatibility with Older Browsers
Overview of Browser Capabilities
What About Old IE?
Introduction to Modernizr
Advanced Capabilities of the Modern Browser
SVG Graphics
The Canvas Element
Geoloation
Introduction to Offline Web Apps
Storing Data Within the Browser
Caching Assets for Offline Use