Advanced HTML page authoring using modern CSS features code lab

Introduction

This codelab will teach you the latest CSS features and how to use them effectively to build amazing web content taking full advantage of modern browsers. The lessons show how to produce different layouts from web document content by applying various CSS layout features.

Pre-requisites

  • A laptop with a text editor installed and ready to use.
  • Chrome version 21
  • Working knowledge of CSS 2.1
  • Familiarity with HTML page layout
  • Setup

    Download and unpack the exercise content ZIP file from http://io12-css-codelab.appspot.com/lessons/io12-css-codelab.zip

    Checking the Chrome version: Start Google Chrome, click on the wrench at the top right of the browser and choose 'About Google Chrome'.

    You should now see an 'About' panel showing the browser version like so:

    In the above image, you can see the Version number is 21, in this case 21.0.1180.0. If your browser has a version less than 21 some of the exercises below may not work properly. If possible install version 21 or greater (canary recommended), if you can't then we have some work arounds for the lessons marked for the older browser versions.

    You're all done and ready to go, so let's get started with Lesson 1!

    Lesson 1: Learning HTML5 slide layout

    Lesson 2: Designing slides

    Lesson 3: Adding dimension

    Lesson 4: Multi-column layout

    Lesson 5: Elastic layout with the Flexible Box Module

    Lesson 6: Magazine style layout using Regions