The following file is required for this lesson:

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

  1. Download the css-horizontal-menu.zip file from Moodle and extract its contents to a folder called css-horizontal-menu.
  2. The result of this demo should look like:
  3. Open the css-horizontal-menu.psd file and examine the images, fonts, and layout properties of the file; the images are already extracted for you).
  4. You will need to following fonts from google fonts:
    • Raleway
    • Alegreya (do not select Alegreya Sans)
  5. Add the links to those two fonts in the <head> of index.html. (These fonts will be added to your styles.css file later in this walkthrough.)
  6. Add the following code to index.html (_Note: the classes used below will need to be added to your styles.css file.):
    • Add the <header> block:
      index-code-a
    • Add the <main> block:
      index-code-b
  7. Modify the styles.css file as shown below:
    • Modify the <body> to add font styling:
      css-styles-a
    • Style the <header> to be:
      css-styles-b
    • Target the <a> element:
      css-styles-c
    • Add additional styling to the <li> element:
      css-styles-d
    • Layout the <li> elements horizontally:
      css-styles-e
    • Layout the logo image and the <nav>:
      css-styles-f
    • Position the <nav> and add hover effects:
      css-styles-g

      The following additions to styles.css will be for the .banner class

    • Add a .banner class:
      css-styles-h
    • Style the <h2> in the banner:
      css-styles-i
    • Style the .left-column class (Note the calculation needed):
      css-styles-j
    • Style the .bar class:
      css-styles-k
    • Style the .right-column class (Note the calculation needed):
      css-styles-l
    • Style the <h2> in the .right-column:
      css-styles-m
    • Style an <a> element to look like a button:
      css-styles-n
    • Style the hover effect of the <a> element:
      css-styles-o
  8. Save and open index.html in your browser. If the result is different from the expected, make any necessary corrections, and refresh your browser.

Exercise Instructions

Download the ex-css-horizontal-navigation.zip file from Moodle. The ZIP file contains a sample output file, ex-horizontal-complete.jpg, and the Photoshop file, design-comp.psd, which will aid you in completing this exercise. Complete this exercise as per the instructions on Moodle.

Lab Instructions

Download the documents for the Lab from Moodle to get the following files:

lab-files.jpg

Complete the lab as per the instructions on Moodle.

Module Home

COMP1017 Home