MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 5: Refining Your Design

In this exercise we will review some Simple Design Concepts, learn how to use Google Fonts and use a "wrapper" for Page containment.

Read: This assignments lecture (This Design Lecture is in the Demos starting at demo 5a)

By Due Date:

Create two HTML pages using Brackets. Save into your folder - Ex5. Create your own page content for your webpage, do not use the page content from the book. If you do not want to write your own content, you may use non-offensive song lyrics, poems, stories. Your first page is ALWAYS index.html

  1. Number of pages: 2
  2. Link the pages together. (Using Relative Links)
  3. Create content for your index page, using headlines, paragraphs & images. Style page using CSS.
  4. Copy your index content page and save as page2.html
  5. On page 2 add:
    • A wrapper div with a set width
    • Use Google Fonts for your headlines (or more)
    • Be sure to use the Design Concepts covered in the Demos!

Design Elements

Review the design lecture to learn how a good website is well C.R.A.P.H.T.E.D.

C is for Concept & Contrast
R is for Repetition
A is for Alignment
P is for Proximity
H is for Heirarchy
T is for Typography
E is for Ease of Use
D is for Depth

HTML Elements to a DIV with an ID

Use the DIV with an ID that you write CSS for in your CSS Document Styles (in the head of the page)

Add the Div with the ID right after you open the body tag.

  • <div id="wrapper">

Add your page content. Close the div right before the closing body tag:

  • </div>
  • </body>
  • </html>

Add CSS Styles for the #wrapper in the Document Styles. Choose a pixel width. Using auto for the right and left margin amount centers the Div on the page. FYI- an ID can only be used once per page, just like an address number on a street.

  • #wrapper {width: 800px; margin: 10px auto 10px auto;}

Adding Google Fonts

Visit the Google Fonts Page to find more interesting fonts to use on your pages.


Remember, use Decorative fonts for HEADLINES. Use simple fonts for the small or main (body) text.

Exercise Requirements

  • Read the design lecture on Demo 5a
  • Review all the Demo pages
  • Watch the Videos as needed

  • Create a project folder named "Ex5"
  • Create a minimum of TWO HTML pages
  • Make up your own creative content.
  • Use CSS for page design styling
  • Use CSS for styling page width & alignment
  • Add at least one Google Font.

Exercise Five Grading Rubric
Item/Points 1-2 3-4 5-6
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond


This exercise is worth 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort (6)
Creativity (6)

Due Date

Text Reference

Online Demos