Exercise 2: CSS, Bootstrap, and HTML Media

The aims of this lab are:

• Practise CSS and Bootstrap
• to use Google HTML/CSS style guide to sanitize your code
• to get to know the new media tags <picture>, <audio>, and <video>.
• to learn the various HTML5 form controls

CSS Tutorial

Run through the basic CSS tutorial at W3Schools, up to Pseudo-element.

Bootstrap Tutorial

Run through the basic Bootstrap tutorial at W3Schools.

Google HTML/CSS Style Guide

Read the first three sections of the Google HTML/CSS Style Guide. This is a local copy obtained from the Github Google Style Repository

While reading, correct your HTML code from last lab to conform with the Google style.

Layout your website using the <table> element

Turn your single page website into a multi-page one. For example, create a page for About me, one for Timetables, one for A collection of links/thoughts/hobbies and one for Contact me. Create a navigation bar to allow for easy navigation across the site. Layout the site using the <table> element. In next lab, we will use CSS positioning together with HTML layout tags <nav>, <header>, <footer> <article> and <section> to do this properly.

HTML Rich Media

Add media files such as images, audios and videos to your website in the HTML5 way, i.e. provide fall backs to ensure cross-browser and cross-platform rendering.

Responsive Images

The <picture> element provides a container for the image source file, where the <img src=""> is always the last element. It uses the media attribute to query and serve different images according to different devices.

For example, you can modify the following code to serve different images to different media. Load this into Gwiddle, and access using your phone and see if it is supported. For a comprehensive set of what element works on which browser, please refer to CanIUse.com.

<picture>
<source media="(min-width: 1024px)"
srcset="fullsize.jpg">
<source media="(min-width: 700px)"
srcset="midsize.jpg">
<img src="crop.jpg" alt="My image">
</picture>

Search on the web for more information about HTML5 responsive images to learn other new features such as the srcset and size attribute as shown in the example below.

<picture>
  <source media="(min-width: 1024px)"
  srcset="fullsize-1x.jpg 1x, fullsize-2x.jpg 2x, fullsize-3x.jpg 3x">
  <img src="crop-1x.jpg" alt="My image" 
  srcset="crop-2x.jpg 2x, crop-3x.jpg 3x">
</picture>