Online Web Masterclass

Course Dates

Click below to book your place or call us on 0800 156 0777


RRP: £150.00
Web Special: £150.00

Maximum Class Size

In order to ensure every student gets the most out of the course we have a maximum class size of:

London

8 Delegates

York

5 Delegates

Whilst it doesn't go to the same depth as the public scheduled Web Bootcamp, this online Web Masterclass is still a great way to get to grips with cutting edge web technologies like HTML5, CSS3 and JavaScript.

Designed and recorded by Alex Silver, an Adobe Certified Instructor with over 10 years experience, the web masterclass contains over 12 hours of high definition video tutorials, together with a range of accompanying hands on exercise files allowing you to get to grips with these powerful technologies. The course itself uses HTML5 video technology so whether you are using a desktop, laptop, iPad or something else you should have no problems watching the movies. There's no need to download Flash, quicktime or any other plugins, just click play in your browser. All you need is an internet connection.

The course is designed in three parts, covering the three subjects and includes the topics detailed below.

Part 1: Basic CSS


General Introduction
  • Overview of the course
  • What applications you can use
  • Setting up your test server

Basic CSS

  • Loading order
  • Background colour
  • Formatting text
  • Margins and padding
  • CSS resets
  • Borders
  • Width and height
  • Lists

Using CSS

  • How to format a web page
  • How are conflicts resolved
  • How cascading works
  • Looking at dreamweaver

Where to put your CSS

  • Inline CSS
  • Document CSS
  • CSS files

Styling Links

  • Setting up your links
  • Formatting your tags
  • Block display
  • Link pseudo-classes (hover, active,visited, link)

Laying out your page with CSS

  • Creating boxes
  • Positioning boxes
  • The position attribute
  • Laying out a simple page

Media types and media queries

  • What are Media types
  • What are Media queries
  • How to use media types and queries

Wireframing - converting your ideas to practical web pages

  • What is wireframing
  • How to wireframe
  • Converting your wireframes to web pages
  • Polishing the result

Practical examples

  • Formatting a poem
  • Effects
  • Creating a pure CSS button
  • Rotating
  • Fonts and masks
  • Transitions

 

Part 2: Basic JavaScript


Introduction & Overview

  • Introduction
  • Overview
  • Development and testing
  • Writing

Introduction to Variables

  • Variables
  • Objects and arrays

JavaScript language structure

  • Structure part 1
  • Structure part 2

About JavaScript Operators

  • What are Operators
  • Using modulus
  • Using parentheses
  • Greater and less than
  • Comparisons
  • Unary operators
  • Pre and post fix
  • Using typeof and instance of
Boolean logic

  • What are booleans?
  • Ifs
  • Switch and case

Loops

  • For loop
  • While loop

Functions and scope

  • What are functions
  • Function arguments
  • Scope

The Date class

  • Date class and methods

The DOM

  • What is the DOM
  • Using JavaScript to walk the DOM tree
  • Using JavaScript to play around with the DOM

JavaScript libraries

  • Basic overview of JQuery
  • Other JavaScript libraries

Part 3: Basic HTML5


Course Overview

Setup

  • Setting up your development environment
  • Using Dreamweaver
  • Using Aptana Studio
  • Other IDEs

Overview

  • What we will cover in this course
  • What we do not cover in the course

Basic HTML5 - Going through the semantic structure

  • The semantic tags in HTML5
  • What does semantic mean
  • How to structure your page with HTML5

The new tags in HTML5

  • What is new in HTML5
  • What has been dropped
  • What does the new tags mean for your web pages

HTML5 forms

  • HTML5 form tags
  • HTML5 tag attributes
  • How to make your forms work for you

Controlling your pages with JavaScript

  • Using form elements and JavaScript to control your page
  • The range element

Detecting HTML5

  • How to detect if a browser is HTML5 capable using Modernizr
  • What to do if your browser cannot run HTML5

The audio tag 

  • using audio
  • audio codecs
  • controlling audio
  • audio tag attributes

The video tag 

  • using video
  • video codecs
  • controlling video with JavaScript
  • video tag attributes

The canvas tag

  • drawing text
  • drawing shapes
  • What happens if your browser does not recognise the canvas tag

SVG 

  • What is SVG
  • Why is SVG so useful
  • Putting svg in a web page (with the Raphaël JavaScript library)

Overview of CSS3

  • Overview of the new elements in CSS3
  • What is CSS3 useful for