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 demo-liquid-fixed-layout.zip file and extract its contents to a folder named demo-liquid-fixed-layout.
  2. The output of this demo should look like:
    rwd-01.jpg
  3. The first step is to code the layout in index.html (all classes shown in the code will need to be added to your styles.css file):
    1. Create a container:
      index-01
    2. Add a <header> block inside the container:
      index-02
    3. Add the <main> with a <section>:
      index-03
    4. Add a flex container below the <section> created above:
      index-04
    5. Add a <footer>:
      index-05
      At this point, your web page should look like:
      rwd-02
  4. Now you need to add style rules to your styles.css file:
    1. Style the <body> element with generic CSS; this will be mobile first:
      css-styles-01
    2. Style the <header> and <footer> elements:
      css-styles-02
    3. Style the <nav> element:
      css-styles-03
      At this point, your web page should look like:
      rwd-03
    4. As the <section> blocks are not yet being displayed, are they still there? The answer is yes:
      rwd-04
      Now style the .promo class:
      css-styles-04
      rwd-05
    5. You need each of the promo blocks to be side-by-side, equally spaced, thus add the .flex-container class:
      css-styles-05
      rwd-06
    6. You still need the .banner class, which is:
      css-styles-06
      rwd-07
    7. Next add some padding for the <footer> element:
      css-styles-07
      rwd-08
  5. The next step is to add a media query that will make the web page change at a specific width. Add the following to your styles.css file:
    css-styles-08.jpg
  6. You need to test this using the browser’s developer tools. Remember the min-width: 1366 px; thus, once the page width exceeds the minimum width (larger screen resolution) the web page will change:
    rwd-09.jpg rwd-10.jpg
    rwd-11.jpg rwd-12.jpg
  7. The next step is to see how images behave in this layout. Add the following code below the <h2> in each <section class="promo">:
    css-styles-09.jpg
  8. Notice how the images have broken the layout:
    rwd-13.jpg
  9. To fix this there needs to be a style rule to set the maximum width of the <img> element to 100%. Open the reset.css file and scroll down to line 52. Replace the ÷ symbol with the following code:
    css-styles-10.jpg
    rwd-14.jpg
  10. Using the browser’s developer tools, change the width of the web page and notice how the images scale.

Exercise

Open the flexbox-exercise-instructions.docx file on Moodle and follow the instructions to complete the exercise for this lesson.

Module Home

DMIT1530 Home