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: The lecture (This Design Lecture is in the Demos starting at demo 5a)
Watch the videos for this exercise.

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. Folder Name: Ex5
  2. Opening Page Name: index.html Second pages named page2.html
  3. Number of pages: 2
  4. Link the pages together. (Using Relative Links)
  5. Create content for your index page, using headlines, paragraphs & images. Style page using CSS.
  6. Copy your index page content and save as page2.html
  7. On page 2:
    • Use CSS to style a wrapper div with a set width and centered alignment (see below)
    • Use Google Fonts for your headlines (or more)
    • Use all the Design Concepts covered in the Demos for Exercise 5

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

Use Decorative fonts for H tags or HEADLINES.
Use simple fonts for the P tags or paragraph text.


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/experimentation (6)
Creativity (6)