HTML Web Pages
You create and work with four web pages, named index.html, page-1.html, page-2.html, and page-3.html.
All four pages are displayed with the default web browser styles. None are linked to CSS stylesheets.
NOTE: Please include your Name and Student ID in the title tag of each web page.
![Sample image](assets/img/html-home.png)
![Sample image](assets/img/html-page-1.png)
![Sample image](assets/img/html-page-2.png)
![Sample image](assets/img/html-page-3.png)
CSS Stylesheets
You create and work with four stylesheets, named global.css, style-1.css, style-2.css and style-3.css.
You link these CSS files to your four previously created web pages, and add various style properties and values to them.
![Sample image](assets/img/rwd-home.png)
![Sample image](assets/img/css-page-1.png)
![Sample image](assets/img/css-page-2.png)
![Sample image](assets/img/css-page-3.png)
Responsive Design
You make four web pages responsive to different screen sizes by adding negative spacing and media queries to their four linked stylesheet files.
These are the global.css, style-1.css, style-2.css, and style-3.css.
![Sample image](assets/img/rwd-home.png)
![Sample image](assets/img/rwd-page-1.png)
![Sample image](assets/img/rwd-page-2.png)
![Sample image](assets/img/rwd-page-3.png)
Working with Colours
You add text and background colours to the four stylesheet files you created previously.
These are the global.css, style-1.css, style-2.css, and style-3.css.
![Sample image](assets/img/colours-example-one-browser.png)
![Sample image](assets/img/colours-example-two-browser.png)
![Sample image](assets/img/colours-example-three-browser.png)
![Sample image](assets/img/colours-example-four-browser.png)
Classes and Custom Properties
You add classes to the page-3.html web page and the style-3.css stylesheet. You also add custom colour properties to style-3.css.
![Sample image](assets/img/page-3-after-1.png)
Return to Home.