Exercise 2: CSS, Bootstrap, and HTML Media
The aims of this lab are to:
- Practise CSS and Bootstrap
- Construct some basic styles using raw CSS
- Use Bootstrap to make your webpage reactive
- Use Google HTML/CSS style guide to sanitize your code
- Get to know the new media tags
<picture>, <audio>, and
<video>.
CSS Tutorial
Run through the basic CSS tutorial at W3Schools, up to
Pseudo-element.
Write a small table in HTML, such as the Paralympic medal table here, and use CSS to style
it. Include the following specifications:
- There should be a centered title for the table, and the table should sit in the center of the view port
- There should be a table with 6 columns, with the headings rank, country, gold, silver, bronze, total in
bold centered text
- The rank column should have a black background with white centered text
- The country column should have white background with black left-aligned text
- The gold column should have a gold background, the silver column should have a silver background, the bronze
column should have a bronze background, all with black centered text
- The total column should have a green background, and black centered text
- The table should have a solid red border on the outside with rounded corners
- Each cell of the table should have a top and bottom 2 pixel border, with no margin, and 3 pixels of padding at
the top and bottom
- When the mouse hovers over a cell, the top and bottom border for that cell should increase to 3 pixels, and the
padding at the top and bottom should decrease to 2 pixels
- When the mouse hovers over a row, the data cells in that row should change the background to grey
- The countries should include the flag as a unicode character
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.
Use Bootstrap or W3.CSS to add a reactive style to your home page from last week. Apply container styles,
and the grid model to make your page more appealing, center some elements, and allow the page layout to adjust when
the viewport is resized.
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 the last lab to conform with the Google style guide.
Audio and Video fallbacks
Read the
Mozilla MDN Docs on Video and Audio. Try add some video or audio elements to your webpage.
You can download the files below, or you can find your own if you prefer.