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:
    1. Raleway
    2. 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.):
    1. Add the <header> block:
      header
    2. Add the <main> block:
      main
  7. Modify the styles.css file as shown below:
    1. Modify the <body> to add font styling:
      body
    2. Style the <header> to be:
      header
    3. Target the <a> element:
      anchor
    4. Add additional styling to the <li> element:
      additional li
    5. Layout the <li> elements horizontally:
      horizontal li
    6. Layout the logo image and the <nav>:
      nav logo
    7. Position the <nav> and add hover effects:
      nav hover

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

    8. Add a .banner class:
      .banner
    9. Style the <h2> in the banner:
      .banner h2
    10. Style the .left-column class (Note the calculation needed):
      .left-column
    11. Style the .bar class:
      .bar
    12. Style the .right-column class (Note the calculation needed):
      .right-column
    13. Style the <h2> in the .right-column:
      .right-column h2
    14. Style an <a> element to look like a button:
      anchor button
    15. Style the hover effect of the <a> element:
      anchor button hover
  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