HTML5 Training - CSS3 Course

Introduction

HTML5 is the latest revision of HTML. The new features are designed to allow designers and developers to work with richer, more semantic code needed to address the requirements of the modern web. There are major enhancements to syntax & semantics, and the removal or redefinition of HTML presentational tags and attributes.

Pre-Requisites

This hands-on course is designed current web professionals working with HTML who are looking to benefit from the enhancements offered with HTML5 and CSS3.

Who Should attend?

This course is designed for users already familiar with HTML or XHTML and CSS. A basic understanding of JavaScript will be useful but is not essential. The course is designed to bring you up to speed with the latest developments in HTML5 and CSS3.

What will you learn?

Once you have completed the HTML5 & CSS3 Introduction course you will learn:

• Understand the new features
• Understanding the richer, more semantic code needed to address the requirements of the modern web.

Course Outline

Introduction

• A brief overview of the history and development of HTML
• The importance of standards
• The W3C, WHATWG and HTML5
• Do we need/want HTML5?
• What is and what is not HTML5
• Can we start using it now?
• What features can we begin using?
• Browser , mobile and device support
• Simplified markup
• The new DOCTYPE declaration
• Simplified charset
• Looser coding standards
• Good practice to ensure consistency
• Deprecated tags and attributes

Basic page structure

• Understanding the outline algorithm
• Ensuring cross browser structure
• Structuring top-level and interior level content
• Meeting the new content models

Structural content

• Introducing the new HTML5 semantic tags
• Header
• Footer
• Section
• Aside
• Article
• Hgroup

Interior content

• Figure
• Figcaption
• The role of the DIV Tag
• Ensuring block-level display

Video & audio

• Plug-in free markup
• The new video and audio elements
• Overview of video & audio codecs
• How to convert video to ogg, mp4 and webm
• Including fallback content
• Customising the video & audio players

Canvas

• Introducing the canvas API
• Drawing basic shapes
• Simple animation
• Loading an image
• Drag & drop
• Brief overview

HTML5 forms

• Meeting the new input types
• Setting autofocus
• Using placeholder data
• The new date picker
• Spinners and sliders

CSS3

• A brief overview of the history CSS
• Image borders
• Shadows
• Rounded corners
• @font-face
• Server fonts
• Font licensing issues
• 2D transforms and transitions