Exercise 2: CSS, Bootstrap, and HTML Media

The aims of this lab are:

CSS Tutorial

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

Bootstrap Tutorial

Run through the basic Bootstrap tutorial at W3Schools.

W3.css

Have a look at the W3.CSS tutorial. You don't have to go through it all, but you can comapre some elements to Bootstrap. You're free to use either W3.CSS or Bootstrap in the assignments so try both to see which you prefer.

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

Tables shouldn't be used for layout. Use CSS or Bootstrap instead.

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

There are better ways to do this now. See W3 Schools.

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>

Audio and Video fallbacks

Read the Mozilla MDN Docs on Video and Audio. Try out the lecture examples. Use one video type first and see if it works for both Windows and Linux. Right click to download the video files and audio files.

Video files
Audio Files