List of exercises

Working with HTML

You create two new web pages, an exercise file named page-1.html and a Home page, named index.html.

Debugging HTML

You download and correct errors in a page named page-2.html.

Container Elements

You create a new web page named page-3.html.

Working with CSS

You download four stylesheet files, named style-1.css, style-2.css, style-3.css and global.css.

You link these CSS files to your four previously created web pages, and add various style properties and values to the CSS files.

Negative Space

You add spacing values to four stylesheet files, named style-1.css, style-2.css, style-3.css and global.css, to move their linked content in from the edges of the web browser window.

Media Queries

You add media queries to four stylesheet files, named style-1.css, style-2.css, style-3.css and global.css, so that the negative spacing in their linked web pages resizes according to the viewport width.

Colours and Web Design

You add text and background colours to the four stylesheet files you worked with previously.

These are the style-1.css, style-2.css, style-3.css and global.css files.

The four linked web pages are updated accordingly.

Working with Images

You download and work with four new web pages (page-4.html, page-5.html, page-6.html and page-7.html) and four new stylesheets (style-4.css, style-5.css, style-6.css and style-7.css).

You also insert various downloaded image files in the four web pages.

You also add an image to your index.html Home page.

Working with Google Fonts

You add various Google Fonts to four web pages (page-4.html, page-5.html, page-6.html and page-7.html) and their linked stylesheet files (style-4.css, style-5.css, style-6.css and style-7.css) you worked with previously.

Note: There is no page-8.html file or style-8.css file.

Fluid Typography

You apply the fluid typographic equation to two stylesheet files, named style-4.css and style-5.css, to scale font sizes responsively according to the viewport width.

Introduction to Hyperlinks

You update the page-4.html web page you worked with previously.

Working with Internal Hyperlinks

You update the page-5.html web page you worked with previously.

Styling Hyperlinks with CSS

You update the style-4.css and style-5.css stylesheet files you worked with previously.

Introduction to the Box Model

You learn about padding, borders and margins by downloading and working with a web page named page-9.html and its linked stylesheet file named style-9.css.

Working with Panels

You learn about styling div elements by downloading and working with a web page named page-10.html, its linked stylesheet style-10.css, and a sample image file.