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 layout-with-content.zip file and extract its contents to a folder called layout-with-content.
  2. The result of this demo should look like:
    Layout-final.jpg
  3. Calculate the width of each <li> in the <ul class="menu"> using the following steps:
    • Subtract the final right margin: 960 - 15 = 945
    • Subtract the left margin from each <li>: 945 – 75 = 870
    • Subtract the left and right border of each <li>: 870 – 20 = 850
    • Divide that result by 5: 850 / 5 = 170
    • Calculate the width of the each <section>:
      • Subtract the final right margin: 960 – 15 = 945
      • Subtract the left margin for each <div>: 945 – 30 = 915
      • Subtract the left and right borders: 915 – 8 = 907
      • Subtract the left and right padding: 907 – 60 = 847
      • Divide the result by 2: 847 / 2 = 423.5
  4. In the css folder add the following code to the styles.css file:
    • Style the typography:
      css-styles-a
    • Style the .site-header class:
      css-styles-b
    • Style the .site-header nav class:
      css-styles-c
    • Style the .menu:
      css-styles-d
    • Style the <li> in the <nav>:
      css-styles-e
    • Style the <main> element:
      css-styles-f
    • Style the <section> elements in the <main>:
      css-styles-g
  5. Open the index.html file in your browser. If the result is different, make any necessary corrections, and refresh your browser.
  6. In your browser, open the developer tools and examine the widths of each of the class="menu":
    width-menu.jpg
  7. Now examine a single <li> element:
    width-li.jpg
  8. Now examine a <section> element:
    width-section.jpg
  9. Now the <main>:
    width-main.jpg

Exercise Instructions

There are no exercises related to this demo.

Module Home

COMP1017 Home