HTML5 Bootcamp

0800 156 0777

Master HTML5, CSS and JavaScript with the Bootcamp

The HTML5 Bootcamp is a 7 day hands on training course starting with the basics of HTML5, covering CSS3 and JavaScript and moving on to more advanced level topics.  The course combines the HTML5 Getting Started, JavaScript Getting Started and HTML5 Advanced courses, as well as including over 10 hours of high definition online video tutorials, with exercises covering CSS, JavaScript and HTML5 that our instructors have created.

This course is suited to those who have no previous experience of HTML5, but wish to learn how to make the most of the latest web development technologies.  In addition to using a range of development tools, you will also be learning to write JavaScript code and for those who are new to this we recommend allowing some practice time between each stage.

£1,495.00

Stage 1 of the HTML5 Bootcamp introduces you to HTML5 & CSS3 and covers everything you need to get up and running creating web pages with these modern web technologies. The standard topics cover in this stage of the course are listed below.

Stage 1 - HTML5 & CSS3 Getting Started (2 days)

HTML5 Overview

  • History of HTML5
  • WHATWG and W3C specifications
  • What's can HTML5 & CSS3 do

Using HTML5 today

  • Developer Tools
  • Checking if features can be used
  • Detecting HTML5 features
  • Browser support and polyfills

Wireframing

  • What is wireframing
  • Wireframing tools
  • Wireframing templates

The DOCTYPE

  • What is a DOCTYPE
  • HTML5 DOCTYPE

Page Layout

  • Head, body
  • section, article, aside, and nav
  • header & footer
  • div & span 

Content Markup

  • H1 - H6
  • p & br
  • hr
  • images
  • links
  • lists
  • tables

CSS

  • What is CSS
  • Why use CSS
  • Browser support
  • CSS syntax
  • tag, class, id or compound

How to apply CSS

  • External styles
  • Embedded styles
  • Inline styling
  • The Cascade in CSS

Applying some CSS styles

  • Basic text formatting
  • Basic page formatting
  • Div and Span
  • Positioning with CSS

CSS layout

  • the box model
  • creating columns and rows with divs
  • creating flexible boxes

CSS3 Options

  • Multiple Columns
  • Custom fonts
  • Border-radius
  • Gradients
  • Color
  • Shadows
  • Transitions
  • Transforms
  • CSS3 Filters

Video and Audio

  • Reusing video
  • The HTML5 video and audio elements
  • Understanding video and audio
  • Video and audio containers
  • Video and audio codecs

HTML5 Forms

  • Form elements
  • Building and using forms

Overview of more advanced topics

  • Canvas
  • SVG
  • Offline Applications
  • Geolocation

Hands on Lab

On the second day delegates complete a hands on exercise in which they build a simple website using the features covered in the course.

 

The second stage of the Bootcamp introduces you to JavaScript. You will start out covering the basics of what JavaScript is, and then go on to cover the language itself with plenty of hands on exercises and examples. You should expect to be writing code on this section as you are learning a basic programming language.

Stage 2 - JavaScript Getting Started (2 days)

What is JavaScript

  • What is it used for
  • Where do you place it
  • Your development environment

The JavaScript language

  • Structure
  • Comments
  • Layout
  • Writing conventions

Statements and Loops

  • Ifs
  • Loops (For, While, For-in)
  • Break
  • Continue
  • The new keyword

Functions, Methods and Objects

  • JavaScript Functions
  • Arguments
  • Recursive functions
  • Methods
  • The this keyword
  • JavaScript Alerts

Built-in Functions and Objects

  • Objects and functions
  • JavaScript String objects
  • JavaScript Math objects
  • Date objects
  • Built-in functions
  • The eval function
  • The isNaN function

The Document Object Model

  • What is the DOM?
  • How to use it
  • Accessing objects on the page with the DOM
  • Controlling objects on the page

Events

  • What is an event
  • What type of events are there
  • Creating JavaScript event handlers
  • How to use event handlers

Validating forms

  • Form validation with JavaScript
  • Form control with JavaScript

Catching errors and exceptions

  • Try…Catch
  • handling JavaScript exceptions

JavaScript Variables

  • Creating JavaScript variables
  • Using JavaScript variables
  • Variable scope
  • Integers
  • Floating points
  • Booleans
  • Strings
  • Special characters

JavaScript Expressions and Operators

  • JavaScript Expressions
  • Conditional expressions
  • Assignment operators
  • Arithmetic Operators
  • Increment/Decrement
  • Negation
  • Bitwise operators
  • Logical operators
  • Comparison operators
  • String operators

 

Stage 3 of the HTML5 Bootcamp covers the more advanced aspects JavaScript including areas like working with the Canvas, including animation and using a variety of JavaScript libraries to create high quality effects.

Stage 3 - Advanced HTML5 (3 days)

HTML5 Video

  • Video events
  • Video methods
  • Controlling video
  • Monitoring progress
  • Fullscreen video
  • Styling your video
  • Subtitling

Video Effects

  • Loading video into the Canvas
  • Duplicating video
  • Applying effects to your video

HTML5 Audio

  • Audio events
  • Audio methods
  • Controlling audio
  • Monitoring audio
  • Subtitling
  • Audio visualiser

CSS3 Animation

  • Animating with CSS3
  • Easing
  • Non-linear motion
  • Sliding
  • Rotating
  • Scaling
  • Fading In / Out

SVG

  • Creating SVGs
  • Using Illustrator to create SVGs
  • Exporting SVGs from Illustrator
  • How to load SVGs into a web page
  • Using a JavaScript library to load SVGs
  • Animating SVGs

Three.js (Using WebGL)

  • Using three.js to create 2D shapes
  • Using three.js to control 3D shapes
  • Exporting a 3D shape from a 3D package (Blender)
  • Using three.js to control a 3D shape exported from a 3D package
  • Creating 3D scenes

Using the Canvas

  • Drawing into the Canvas
  • Using the 2D JavaScript API for the Canvas
  • Rectangles and spirals
  • Saving

Sprites and Sprite Sheets

  • Loading images into the Canvas
  • Loading Sprite sheets
  • Scaling and rotating
  • Animating sprite sheets

Animation

  • Creating a ball
  • Bouncing a ball
  • Bouncing off the Canvas edge

requestAnimationFrame()

  • Using requestAnimationFrame()
  • Comparing to setTimeout

Animation Math

  • Formulae for moving things
  • Circular motion

Useful JavaScript Libraries

 

The Creative Design Bootcamp is the most comprehensive begginners course available for people looking to master the design tools found in the Adobe Creative Cloud offering.  With specific sections focusing on Photoshop, InDesign and Illustrator the course covers a wide range of topics and you will quickly develop a wide range of skills such as those below

You will learn to

On Stage 1

  • Markup pages using HTML
  • Apply basic styling and effects using CSS3 such as
    • rounded corners
    • gradients
    • shadows
    • custom fonts
    • transitions
  • Add images to a document
  • Add links
  • Insert video and audio into a page
  • Understand the more advanced skills you might need and their benefit.

On Stage 2

  • The structure of the JavaScript language
  • How to write and use statements and loops
  • How to create your own functions and call them
  • How to use JavaScript’s built-in functions and objects
  • How to access and use the Document Object Model
  • About events and how to use them
  • How to validate forms with JavaScript
  • How to catch errors and exceptions
  • Some simple maths to help you animate page elements

On Stage 3

  • How to test for and respond to the various audio/video events and methods
  • How to control audio/video, and how to create fullscreen effects and add subtitles
  • How to create advanced animation with CSS3
  • How to create and apply easing effects with CSS3
  • How to create and use svgs in your web pages
  • How to use and control 3D shapes within your web pages
  • How to use JavaSript to write to and get data from a canvas element
  • How to use sprite sheets with the canvas element
  • How to use JavaScript to animate drawing within the canvas
  • Some simple, but effective, mathematical formulae for controlling your animations

Our scheduled courses are designed to ensure you have a professional and productive experience.  With 20 years practice we have had plenty of time to get it right, but we are always open to new suggestions as well.

Reasons to choose Highlander for your HTML5 Bootcamp

  • A proven track record - Highlander has been established for 20 years.
  • High quality instruction - All of our instructors are Adobe Certified Instructors.
  • We make sure you are happy - Our satisfaction guarantee ensures you leave with a smile.
  • Follow on support - We give you 12 months post course support.

What you get on a Highlander Course

Start and finish times

Our courses start at 9.30am and typically run until 4pm. The finish time is based primarily on how much information people can retain in a day without being overwhelmed, and can vary slightly depending on individual class size and ability.

Equipment

Each delegate is provided with use of a computer, setup with the latest version of the software they are learning. Our London centre has a mix of Mac and PC's, so if you have a preference please advise us when booking. Older versions of software can usually be catered for on request.

If delegates prefer to work in their own environment and would rather bring their own laptop that is equally fine.

Refreshments

Hot drinks and bottled water is provided throughout the day together with a selection of biscuits and sweets.  There is a scheduled 15 minute break mid morning and again mid afternoon.

Lunch

There is a one hour break for lunch to allow delegates some time "off the screen".  Both our centres are in areas which offer a wide range of options for lunch.

In London we are located on Upper Street in Islington which is one of London's more popular locations for eating out, offering everything from popular cafe's and burger & pizza bars through to a wide range of restaurants.  In addition we also have an in-house cafe in the building should you not wish to venture further.

In York we are located on the well known Bishy Road, with a wide range of popular cafe's just a few metres from the front door. The street regularly features in national newspapers and has been described by Wall Street Journal as "an enclave of gourmet delis and cafes" while The Times described it as "York's answer to Notting Hill".

Course Materials

Course manuals / books are provided for all our standard scheduled courses and you get 12 months access to our learning management system which contains a variety of content ranging from video tutorials and refresher exercises through to copies of course slides.

Internet Access

All the machines have full internet access and free wifi is available to use within our centres.

Certificate of Completion

All delegates receive a certificate of completion to show they have completed a Highlander Training Course.

Who should attend this course

This course is suited to those who have no previous experience of HTML, but wanting to learn how to make the most of the latest web technologies to develop interactive web based content.  In addition to using a range of development tools, you will also be learning to write JavaScript code and for those who are new to this we recommend allowing some practice time between each stage.

.

Related Products