CA2: Tasks to Complete

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.

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

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

Sample image index.html

Introduction to the Box Model

You make a new web page and stylesheet (page-8.html and style-8.css) that demonstrate the CSS properties of margin, padding and border.

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

Sample image page-8.html

Working with Cards

You make a new web page and stylesheet (page-9.html and style-9.css) with four small, visually attractive cards of content.

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

Sample image page-9.html

Working with the Font Stack

You apply system fonts and a fluid typographic scale to a new web page (page-10.html) and its linked stylesheet file (style-10.css).

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

Sample image page-10.html

Working with Google Fonts

You add various Google Fonts to a web page (page-10.html) and its linked stylesheet file (style-10.css).

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.

NOTE: Please include your Name and Student ID in the title tag of this 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.

You also update your index.html home page with a background video, animated headings, and two Google Fonts with fluid font sizes.

Sample image hero-video.html

Return to Home.