List of exercises

Below you can view a list of all the HTML/CSS exercises you have worked with in the various lessons.

Working with HTML

You create four new web pages, named page-1.html, page-2.html, page-3.html and page-4.html.

All four pages are displayed with the default web browser styles. None are linked to CSS stylesheets.

Sample image page-1.html
Sample image page-2.html
Sample image page-3.html
Sample image page-4.html

Working with CSS

You create four new stylesheets, named style-1.css, style-2.css, style-3.css and style-4.css.

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

Sample image page-1.html
Sample image page-2.html
Sample image page-3.html
Sample image page-4.html

Colours and Web Design

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

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

Sample image page-1.html
Sample image page-2.html
Sample image page-3.html
Sample image page-4.html

Working with Images

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

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

Sample image page-5.html
Sample image page-6.html
Sample image page-7.html
Sample image page-8.html

Working with Google Fonts

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

Sample image page-5.html
Sample image page-6.html
Sample image page-7.html
Sample image page-8.html

Introduction to Fluid Typography

You make two web pages (page-5.html and page-6.html) responsive to different screen sizes by adding media queries and fluid font sizes to their linked stylesheet files (style-5.css and style-6.css).

Sample image page-5.html
Sample image page-6.html

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.

Sample image page-9.html

 

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.

Sample image page-10.html

 

Hero Blocks with Text

You download and work with a new web page named hero-text.html and its linked stylesheet hero-text.css.

Sample image hero-text.html

Hero Blocks with Images

You work with new versions of the hero-text.html and hero-text.css files.

You save these files with the new names of hero-image.html and hero-image.css. You also download a new sample image file.

Sample image hero-image.html

Hero Blocks with Videos

You work with new versions of the hero-image.html and hero-image.css files.

You save these files with the new names of hero-video.html and hero-video.css. You also download a new sample image and video file.

Sample image hero-video.html

Introduction to Hyperlinks

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

Sample image page-5.html

Working with Internal Hyperlinks

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

Sample image page-6.html

Styling Hyperlinks with CSS

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

Sample image page-5.html
Sample image page-6.html