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.


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.

https//www.google.com/fonts

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

Evaluation

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