CA1: Tasks to Complete

Below you can view a list of all the exercises you have worked with.

Working with HTML and Debugging HTML

You create and work with three web pages, named index.html, page-1.html and page-2.html.

All three 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 index.html
Sample image page-1.html
Sample image page-2.html

Container (Semantic) Elements

You create a new web page named page-3.html and organise the content of all four web page into a logical structure with container (‘semantic’) tags.

NOTE: Please include your Name and Student ID in the title tag of the new web page.

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

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 index.html
Sample image page-1.html
Sample image page-2.html
Sample image page-3.html

Working with Layout

You make your 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 index.html
Sample image page-1.html
Sample image page-2.html
Sample image page-3.html

Working with Text

You apply font properties, custom fonts and a fluid typographic scale to your four CSS files.

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

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

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 index.html
Sample image page-1.html
Sample image page-2.html
Sample image page-3.html

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 page-3.html

Working with Favicons

You create a favicon using an online service, and insert the favicon into the <head> of your index.html home page.

Sample image index.html

Adding Images and Videos

You download and work with two new web pages (page-4.html and page-5.html) and two new stylesheets (style-4.css and style-5.css).

You also insert various downloaded image files in the two web pages and embed a responsive YouTube video in page-5.html.

NOTE: Please include your Name and Student ID in the title tag of each web page.

Sample image page-4.html
Sample image page-5.html

Working with Hyperlinks and Styling Hyperlinks

You update your page-4.html and page-5.html web pages with relative and internal hyperlinks, and add CSS styles to them.

Sample image page-4.html
Sample image page-5.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.

NOTE: Please include your Name and Student ID in the title tag of the new web web page.

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

Working with Google Fonts

You add various Google Fonts to two web pages (page-4.html and page-5.html) and their linked stylesheet files.

Sample image page-4.html
Sample image page-4.html

Return to Home.