The following files are required for this lesson:

Introduction

This lesson will be 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: Demo Resets

  1. Download the demo-reset.zip file from and extract its contents to a folder named demo-reset.
  2. Open index.html in your browser to see something like:
    demo-reset-01.jpg
  3. In your code editor you will see the following code:
    reset-index-01.jpg
  4. Uncomment the first stylesheet link for reset.css, save and refresh the browser to see:
    demo-reset-02.jpg
    Question: What happened?
  5. Have a look at the reset.css code to verify your answer.
  6. In your code editor, comment out the reset.css and uncomment the link for normalize.css. Refresh your browser to see:
    demo-reset-03.jpg
    Question: What difference did this make?
  7. Have a look at the normalize.css code to verify your answer.
  8. Back in the code editor, comment out the normalize.css link and uncomment the reboot.css link. Save and refresh your browser to see:
    demo-reset-04.jpg
    Question: What happened?
  9. Have a look at the reboot.css code to verify your answer.
  10. Question: which one of the three stylesheets do you use?
  11. You need to markup your document in the <head> using a <meta> tag. Add the following code to your index.html file:
    reset-index-02.jpg

Note: Google results will now truncate the description at ~300 characters. Previously it was recommended to keep the description length to 50 - 160 characters, but now that can increase to around 300.

You need to customize the content to match the summary of the web page.

Steps - Part 2: Demo Box Sizing

  1. Download the demo-box-sizing.zip file and extract its contents to a folder named demo-box-sizing.
  2. Open index.html in your browser to see something like:
    box-sizing-01.jpg
  3. In your code editor you will see the following code:
    box-css-styles-01.jpg
  4. Uncomment the .border-box class, save and refresh the browser to see:
    box-sizing-02.jpg
    Question: What happened?
  5. Add the following code to the top of your stylesheet:
    box-css-styles-02.jpg
  6. There may not be a big change but you should see:
    box-sizing-03.jpg
  7. Now you need to use the developer tools to see the difference in the two boxes:
    1. box-sizing: content-box;
      content-box-01 content-box-02
    2. box-sizing: border-box;
      border-box-01 border-box-02
  8. Question: If you want all your blocks on your web page to have the same width, which box-sizing would you use?

References

Module Home

DMIT1530 Home