The following file is required for this lesson:

Review Instructions

You can follow along with your instructor to compare this build to the one you completed. The completed build should look like:

first-build-01.jpg
first-build-02.jpg

NOTE: There is a hover effect on Hire me.

Steps - HTML

  1. The <head> block:
    index-code-01.jpg
  2. The <body> block in the container <div>:
    1. <header>
      index-code-02
    2. Add a <section> block
    3. Add a <div> for the first column:
      index-code-03
    4. Add a <div> for the second column:
      index-code-04
    5. Add a <div> for the third column:
      index-code-05
    6. Add a <footer> below the </section>:
      index-code-06

Steps - CSS

Add the style rules as follows:

  1. Body:
    1. Background color
    2. Font color
    3. Font family
  2. Header/Banner section:
    1. Heading
      1. Font size
      2. Font styling
    2. Paragraph
      1. Font colors
      2. Font styling
    3. Hyperlink
      1. Styling
      2. Hover effect
  3. Main:
    1. Section with 3 div elements each representing a column
      1. Flex container
      2. Spacing around
      3. Spacing between columns
    2. Each div needs styling for:
      1. Background color
      2. Center align text
      3. Font sizing
  4. Footer:
    1. Font styling
    2. Sapcing around and inside
    3. Background color

Validation

  1. Validate your html using https://validator.w3.org/.
  2. Check your document outline using https://gsnedders.html5.org/outliner/.

References

Module Home

DMIT1530 Home