The following file is required for this lesson:

Introduction

This walkthrough will be done in two parts:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps – Part 1: Background Image

  1. Download the demo-css-background-image.zip file and extract its contents to a folder called demo-css-background-image.
  2. The result of this demo should look like:
    background-final.jpg
  3. Open the demo.psd file and examine the images, fonts, and layout properties of the file; the images are already extracted for you).
  4. Modify the styles.css file as shown below:
    • Add a .page-header class:
      css-styles-a
    • Add a .hidden class:
      css-styles-b
  5. Modify the index.html file as shown below:
    index-code.jpg
  6. Open the index.html file in your browser. If the result is different, make any necessary corrections, and refresh your browser.

Steps – Part 2: Lab - Completed Web Page

Using the extracted images and the copy.txt complete the web page so that it looks like:
lab-completed.jpg

  1. Open the demo.psd file and use the eye dropper tool to determine the font colours, font sizes, and layout spacing. Verify your values with the code shown in this section of the document.
  2. Modify index.html as follows:
    • First <section> (use the first full paragraph of copy.txt for the contents of the paragraph):
      index-code-a
    • Second <section> (use the second full paragraph of copy.txt for the contents of the paragraph):
      index-code-b & The <footer> section:
      index-code-c
  3. Modify styles.css as follows:
    • Headings:
      css-styles-c
    • The <section> element:
      css-styles-d
    • The <footer> element:
      css-styles-e
    • The <strong> element:
      css-styles-f
  4. Open index.html in your browser. If the results are different, make any necessary corrections, and refresh your browser.

Exercise Instructions

There are no exercises related to this demo.

Lab

Submit your completed las as per the instructions on Moodle.

Module Home

COMP1017 Home