HTML5 " CSS3 Course

HTML5 & CSS3 | Course

Course Description

Use the exciting new features of HTML5 today. Supported well by current browsers, the new specifications offer access to the latest device capabilities, video, audio, dynamic new form elements and structural efficiencies.

CSS3 is the fresh standard for controlling style and layout in HTML pages. It offers new options such as animation, shadows and embedded fonts. This course is an introduction to new features in HTML5 and CSS3 for the development of clean, efficient, responsive websites that utilise the very latest capabilities.

What You Will Learn

  • Semantic markup for efficient searchable code
  • HTML5 forms
  • How to include audio and video
  • CSS3 for style, colour and opacity
  • CSS3 shadows, gradients, round corners
  • Animation & transitions with CSS3
  • Web fonts
  • Responsive design
  • Media Queries to target mobile devices

Prerequisites

Knowledge of HTML & CSS is required to attend this course – and completing the 1 day HTML & Web Principles class and CSS Essentials will meet this requirement.

Who should attend

This course is ideal for web developers with some experience in older versions of HTML, who would like to begin to build sites that use the latest capabilities on offer. It is also an excellent follow on course for students of the Dreamweaver Essentials and/or CSS Essentials courses.

HTML5 and CSS3 Course

Course Outline

Intro to HTML5 and CSS3

  • What is HTML5
  • Current best practice with HTML5 features
  • Differences in the doctype
  • What is CSS3
  • Browser support for new features
  • Future developments
  • The varied browser market
  • The growing mobile market
  • Mobile browser support for new features
  • The practice of progressive enhancement

HTML5 Markup

  • A basic HTML5 template
  • Doctype
  • The html element
  • The head element
  • HTML5 FAQ
  • New code in older browsers
  • Closing tags
  • New elements for defining page structure
  • Headers and footers
  • Sections, articles and asides
  • Correct structures and content for articles
  • New heading structures
  • The nav element

More HTML5 Semantics

  • Types of content
  • Document outline
  • Heading groups
  • Figures and captions
  • New elements to organise content
  • New tags to mark content
  • Deprecation
  • Block elements inside links
  • Bold and Italic
  • Small text
  • Citing references
  • Details element
  • Changes to existing HTML features
  • Validating HTML5

HTML5 Forms

  • HTML5 form attributes
  • Fields and textareas
  • Search fields
  • Email address validation
  • URL
  • Telephone numbers
  • Triggering the right keyboard on mobile devices
  • Numbers
  • Range slider element
  • Colour picker element
  • Dates and Times
  • Other new form input types
  • Required fields
  • Placeholders

HTML5 Audio and Video

  • HTML5 video vs Flash video
  • Video container formats
  • Video file formats and compression
  • Audio file formats and compression
  • Video codecs
  • Audio codecs

HTML5 Audio and Video (continued)

  • Browser support for video & audio
  • Accessibility issues for video & audio
  • Video and audio for mobile devices
  • Enabling native controls
  • Support for multiple formats
  • MIME types
  • Auto playing media
  • Looping
  • Preloading video & audio
  • Poster images for video
  • Video for older browsers

Introduction to CSS3

  • CSS selectors
  • Relational selectors
  • Attribute selectors
  • Pseudo-classes
  • Structural pseudo-classes
  • Pseudo-classes and generated content
  • CSS3 colours and opacity
  • Using RGB, HSL, RGBA and HSLA
  • The opacity property
  • Rounded corners
  • Percentages, ems or pixels for rounded corners
  • Drop shadows
  • Multiple drop shadows
  • Inset shadows
  • Colours and opacity of drop shadows
  • Text shadows

CSS3 Gradients and Multiple Backgrounds

  • Linear gradients
  • Online tools for gradient generation
  • Radial Gradients
  • Repeating gradients
  • Multiple background images
  • transparency in backgrounds
  • Flexible and resizable background images
  • Using cover and contain
  • Background size
  • Background positions and behaviours

CSS3 Transformations and Transitions

  • Transformations: translate, scale, rotate, skew
  • Transitions triggered by rollovers
  • Browser support issues
  • Transitions: property, duration, timing, delay, multiple transitions
  • Animation with CSS
  • Defining keyframe animations
  • Setting multiple keyframes
  • Implementing named keyframe animations
  • Easing and bounces with timing functions

Embedded Fonts and Columns

  • Web fonts with @font-face
  • Using Google fonts
  • Font Squirrel fonts
  • Using downloaded local webfonts
  • Font considerations
  • Font formats and file types
  • CSS3 multi-column layouts
  • Column gaps
  • Column count
  • Column widths
  • Media Queries and browser support
  • How to write media query to suit your layout
  • Responsive design for multiple devices
  • Designs that adapt to any screen
  • Repositioning elements
  • Hiding and showing elements
  • Flexible sizes for elements
  • Flexible grid systems
  • CSS3 HTML5 boilerplate

Geolocation and Canvas

  • Browser support issues
  • What is canvas and where might it be used?
  • Javascript and canvas implementation
  • Javascript and geolocation
  • Finding the current location
  • Javascript to access the geolocation position object
  • Retrieving latitude and longitude
  • Matching current location to a Google map
  • Fail safe procedures
HTML5 and CSS3 Course
SYDNEY AugSept Oct Nov Dec Jan
HTML & Web Principles 20 10 1
27
17 8 7
19
HTML Email Newsletters 6
26
2 18 18 Feb
CSS Essentials 21 & 22 28 & 29 15 & 16 20 & 21
HTML5 & CSS3 18 & 19 30 & 31 17 & 18 22 & 23
MELBOURNE AugSept Oct Nov Dec Jan
HTML & Web Principles 25 24 20 19 15 14
HTML Email Newsletters 4 26 10 16 20
CSS Essentials 5 & 6 8 & 9 9 & 10 15 & 16
HTML5 & CSS3 8 & 9 23 & 24 11 & 12 22 & 23
BRISBANE Aug Sept Oct Nov Dec Jan
HTML & Web Principles 22 17 9 Feb
CANBERRA AugSept Oct Nov Dec Jan
HTML & Web Principles 22 24 18 Feb
HTML Email Newsletters Please call for custom training
HTML5 & CSS3 Please call for custom training

"I teach tertiary graphic design students and run a small business - this is the missing link to the front end mindset I had - thanks!"

"Great course, great trainer, very patient and helpful."

"This course was great to get a handle on the new frontier of HTML5 & CSS3 – I feel more confident and ready to implement what I have learnt."

"Very passionate instructor who was enjoyable, friendly and knew what he was talking about."

"The trainer was very good and made the course interesting and had a great knowledge of HMTL & CSS."

"Linda was an exceptional trainer. Clear and even paced, she explained everything we did, gave us time to try it out and then answered any questions we had. I found the course very interesting and useful."

"Thankyou - the lights came on in many areas. I can now understand what the designer was doing, and have more confidence to further develop my own website."

"Linda is a great teacher. This is my third course with Linda and she always excels my expectations. I've learned a lot more than what I've expected."

"I feel I have gained more knowledge into HTML5 & CSS3 which will help me in my career and skills in the future."

"Instructor was very knowledgeable about the subject matter and material was presented in an easy to absorb manner."

HTML5 and CSS3 Course

HTML5 & CSS3 | Course

Book now and pay onlin or we can send an invoice.....

HTML5 and CSS3 Course

SPECIAL OFFER

Sydney & Melbourne

$850 + gst

Brisbane & Canberra

$900 + gst

Upcoming Courses

SYDNEY

30 & 31 Oct

17 & 18 Dec

22 & 23 Jan

More Dates

MELBOURNE

8 & 9 Sep

23 & 24 Oct

11 & 12 Dec

More Dates

BRISBANE

Custom Training
Only

CANBERRA

Custom Training
Only

FREE Course Resit

12 months email
+ PHONE support

Average class size: 4–5