Client's Area

HTML5 Training Course London | HTML5 CSS3 Courses in London

Learn HTML5 & CSS3 in one advanced training course in London from HTML5 website designers


Upcoming HTML5 & CSS3 Classes:


Choose your preferred start date from the list below, and then click on Reserve your place.

Course Session Starting Date Day(s) Price  
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 19 Jun 2017 4 £950.00 Reserve your place
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 21 Aug 2017 4 £950.00 Reserve your place
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 16 Oct 2017 4 £950.00 Reserve your place
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 18 Dec 2017 4 £950.00 Reserve your place
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 19 Feb 2018 4 £950.00 Reserve your place
10:00 - 17:00 Mon, Tue, Wed, Thu Mon, 16 Apr 2018 4 £950.00 Reserve your place
  • Classroom based course
  • eNotes included
  • Hands on training
  • Free online support after course

You can SAVE upto £400 when you book your place for 2 or more certain courses

2040

POUND STERLING

Web Design

PLUS

JavaScript & jQuery

PLUS

HTML5 & CSS3


HTML5 course overview

This course explains how to create modern websites from scratch using different techniques in HTML5 and CSS3. After completing this course you would be able to create HTML5 based websites yourself.
The complete course is hands-on based. A practical HTML5 project at the end of the course will ensure that you go through HMTL5 and CSS3 features like HTML5 Markup HTML5 Offline Applications, HTML5 Audio and Video, Canvas, SVG, Web Sockets, API, CSS3 Selectors, CSS3 Typography, CSS3 Transitions and Transforms, Media Queries

Goal oriented approach

Our HTML5 web design courses are designed to get you started in HTML5 website designing. If you have a project or an idea that you wanted to turn into HTML5 website then present that idea during the course and our trainers will help you to work on your own mobile website.

Learn from HTML5 website designers

We create HTML5 websites and we can show you how to create HTML5 websites. DotPeak’s consultants have been implementing professional HTML5 website design solutions across a range of web sites. Those consultants write and teach our HTML5 and CSS3 training courses, so their experience directly informs course content.

Who is this HTML5 and CSS3 training for?

This course is for you if you are interested in creating HTML5 and CSS3 based website for yourself or for others. This course also helps business owners to get more control and insight into their HTML5 website.
Our training courses are classroom based, instructor-led and help you learn HTML5 & CSS3 website designing while working on industry related projects.

Requirements for HTML5 web design training

  • Delegates should have some knowledge of HTML and CSS. For more details about HTML and CSS requirement please view our web design course.
  • You must have some jQuery and JavaScript experience before attending our HTML5 and CSS3 course. Please check out jQuery training.


Course contents


HTML5

Introduction to HTML5

  • What is HTML5?
  • History of HTML5
  • Current HTML5 support
  • W3C and WHATWG specifications
  • Ensuring browser support
  • Setting your own markup standards
  • The Document Object Model (DOM)
  • When can I use HTML5?
  • HTML5 Showcase
  • Using HTML5 on mobile devices
  • HTML5 or Flash
  • Developer Tools
  • Detecting HTML5 features
  • HTML5 vs. HTML4
  • API overview
  • Reviewing Features and Benefits

HTML5 Markup

  • HTML5 page structure
  • HTML5 DOCTYPE
  • HTML5 markup
  • New structural tags
  • New content tags
  • New application-focused tags
  • Deprecated elements
  • Semantic elements
  • Deprecated elements
  • HTML5 and CSS
  • Marking Up Dates and Times With HTML5
  • Marking Up Captions for Figures in HTML5
  • Understanding the HTML 5 document header
  • Structuring your document with <header>, <footer>, <nav>, <figure> and other new structure tags
  • Tagging microdata
  • The new Doctype
  • Character set
  • Script tag, and style sheet link 

Forms in HTML5

  • HTML5 form elements
  • Building and using HTML5 forms
  • New elements,
  • New attributes
  • New input types
  • Setting form autofocus
  • Using placeholder data
  • Marking required fields
  • Working with number inputs
  • Using date pickers
  • Setting autofocus to a field
  • Using the Placeholder attribute
  • Capturing email addresses
  • Capturing url addresses
  • Capturing a telephone number
  • Capturing numbers (spinner)
  • Capturing numbers (slider)
  • Using the Date, Month, Week, Time inputs
  • Defining a Search Box
  • Choosing a Color
  • Using a DataList
  • Creating Selection Groups
  • Defining Command Buttons
  • Setting field input to be required
  • Styling fields with new pseudo-selectors
  • Creating a WYSIWYG editor
  • Adding right-mouse button support
  • Ensuring Compatibility with Older Browsers 

HTML5 API

  • Canvas overview
  • Adding canvas content
  • Drawing in the canvas environment
  • Drag-and-drop API overview
  • Offline applications overview
  • Video overview
  • Encoding video
  • Adding video

HTML5 Offline Applications

  • HTML5 offline applications
  • Manifest files

HTML5 Audio and Video

  • The audio element
  • The video element
  • Understanding audio and video
  • Audio and video containers
  • Audio and video codec’s
  • Backwards Compatibility
  • Using the HTML5 media tag
  • Creating custom controls
  • Accessible media

HTML5 Canvas

  • Intro to canvas Console
  • Introducing the canvas element & Creating Fallback Content
  • The canvas coordinate system and sizing the canvas
  • Drawing with Canvas
  • Drawing with canvas, including filling, stroking and erasing rectangles
  • Drawing lines and other paths in canvas, including circles
  • Drawing text with canvas
  • Shadows and other Advanced canvas
  • Transformers
  • Animation

SVG

  • How to use SVG
  • JavaScript libraries that help with drawing eg: Raphaël, gRaphaël, Visualize, etc

HTML5 Web Sockets

  • Web Sockets overview
  • Jwebsocket
  • Understanding sockets
  • Understanding messaging
  • Understanding workers

HTML5 Geolocation API

  • Geolocation overview

HTML5 Storage API

  • Overview
  • Storage options
  • Local Storage
  • Session Storage
  • WebSQL
  • Web Storage Offline Caching
  • Offline storage
  • The cache manifest
  • Serving the cache
  • Killing the cache

Drag and Drop API

  • Overview
  • Adding custom drag icons
  • Accessibility

Web Workers - asynchronous scripts

  • Overview
  • Debugging and Testing
  • HTML5 Browser Support
  • How to test HTML5
  • Legacy browser issues and testing
  • HTML5 Validation
  • Reviewing deprecated elements and attributes
  • Coding for optimum browser compatibility

Mobile Development

  • HTML5 support in the major mobile browsers

JavaScript and HTML5

  • Understanding and working with the HTML5 DOM

CSS3

Introducing to CSS3

  • What is CSS3?
  • The current status of CSS3
  • An overview of CSS3 capabilities
  • Can you use CSS3 now?
  • Detecting support for CSS3
  • Understanding vendor prefixes
  • Overview of the CSS3 specification
  • CSS Profiles
  • The document tree

CSS3 Selectors

  • New CSS3 selectors
  • An overview of child and sibling selectors
  • Using child and sibling selectors
  • An overview of attribute selectors
  • Using attribute selectors
  • Pseudo-class UI selectors
  • Negation pseudo-class selectors
  • Target pseudo-class selectors
  • Structural selectors
  • Nth-child selector syntax
  • First, last, and only structural selectors
  • Using structural selectors to write more efficient code

Colours and Opacity in CSS3

  • Color formats in CSS3
  • Transparency in CSS3
  • Setting opacity
  • RGBA and HSL values and alpha channel opacity
  • CSS3 gradients
  • Creating linear gradients
  • Creating radial gradients

CSS3 Typography

  • Working with web fonts
  • How can I use any font in CSS3?
  • @font-face syntax
  • Writing @font-face declarations
  • Using web fonts
  • Adding shadows to text
  • Creating multi-column text

CSS3 and Page Layout

  • An overview of the flexible box model
  • Controlling box orientation
  • Setting element flexibility
  • Distributing boxes
  • Controlling box alignment
  • Working with box-sizing

Borders in CSS3

  • Using border-radius
  • Custom rounded corners
  • Drop shadows
  • Box shadows
  • Gradient borders
  • Using images for borders

The CSS3 Box Model

  • Introduction to CSS3 Box Model
  • Difference between CSS3 and CSS2 box models

Backgrounds in CSS3

  • Resizing backgrounds
  • Controlling background size
  • Creating multiple background images on one element
  • Using background-origin
  • Clipping background content

CSS3 Transitions and Transforms

  • An overview of CSS3 2D transforms
  • Using 2D transforms
  • Setting transform origins
  • An overview of CSS3 transitions
  • Animating CSS properties
  • Using easing in animations
  • An overview of 3D transforms

Multi-column layout

  • Browser support
  • Checking support
  • Providing alternatives
  • Enriching the experience layer

Media Queries

  • Understanding media queries
  • Strategies for targeting multiple devices
  • Writing styles for target screen sizes
  • Deploying styles through media queries
  • Basing media queries on page orientation
  • Targeting media queries for iOS devices
  • Styling according to media capabilities
  • Creating a mobile phone style sheet using media queries
  • Responsive web design: designing for multiple devices

Projects in HTML5 and CSS3

Project 1 – Build a complete website using HTML5 & CSS3:

Create a website using HTML5 and CSS3. In this project we will create a website from scratch – this will provide a good practice to go through the main stages involve in developing a modern website using HTML5 and CSS3. Following are the stages involve in this project.

  • WireFrame: Create a wireframe for the website template
  • Design: Use a graphic design created in our graphic design course using Photoshop and Illustrator
  • HTML5 header: wraps your page header;
  • HTML5 footer: wraps your page footer;
  • HTML5 section: groups content into sections (e.g. main area, sidebar etc);
  • HTML5 nav: contains your navigation menu;
  • CSS3: Create styling using CSS3
  • jQuery: Use jQuery to add a small animation to the website.

Project 2 - Build a game using HTMLC5 and CSS3:

Develop a canvas game using HTML5 and CSS.