MAT 125: Exercises & Projects

Exercise 8: Fixed to Flexible Page Layout. Navigation using Unordered Lists

This exercise is a continuation of Exercise 7. In this Exercise we will use newer HTML Elements introduced in Exercise 7 including the aside and main tags for a 2 column format, then use CSS styles to make the page adjust from fixed to flexible. We will also experiment with navigation using lists.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 8.
Refer to: Chapter 14 and follow along in the Demos for Exercise 8. Be sure to experiment.

Folder Name: Ex8

Minimum Number of Pages/Documents Required for Exercise: 6

Create a minimum of 6 pages. All pages have the same content and tags used. Use the new tags covered in Exercise 7. Some of the activity is similar. Start with your Natural Flow page which has NO CSS added. Use the aside and main tags to create a two column layout. You will be working on the CSS for pages 2-6.

All Pages in the Exercise Must Link Together.

Use Brackets HTML Editor to create your pages.

Page Content:

Topic for this exercise: Your favorite style of music. Do a little research into this and use what you discover to make the one page of content required for this exercise.

Use at least one image in the Main area of your page.

You will use the same content on the first five pages. Page 6 will be your Artist Statement.

  1. Index.html Natural Flow

    Create a page of content for each area using all the new tags listed in this exercise. Write your content in "Natural Flow" or the order it should be read. DO Not add CSS styles to this page. Be sure to add at least one image.

  2. Page2.htmlAdd CSS Styling

    Using the same content as your index page - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders. Use the aside and main tags to create a two column layout. Use an overall div with an ID of "wrapper". Add CSS styles to give the wrapper a set width. Somewhere between 960px and 1200px is a good amount.

  3. Page3.html Using Percentages instead of Pixel Amounts

    Use the same content (and styles) from your 2nd page. Change padding & margin to percentages. Set your "wrapper" to a width of between 98% - 100% . Use percentages for the widths on your Aside and Main areas.

  4. Page4.html Adding a max-width

    Use the same content (and styles) from your 3rd page. Keep the percentages that you created for your wrapper, aside and main areas. Add a max-width: 960px (or 1200px); to the wrapper.

  5. Page5.html Navigation Using an Unordered List

    Use the same content (and styles) from your 4th page. Work on navigation using an unordered list.

  6. Page6.html Artist Statement

    Plan your pages out. Create a wireframe of your page layout. Develop a color palette and choose your fonts. Take this information and build out your Artist Statement page. Explain each piece of your design thoughts, layout, color pallete, and font choices, as if presenting this to a client.

  7. OPTIONAL Page7.html Adding Navigation in the Aside area

    Use the same content (and styles) from your 5th page. Adjust as needed. Try adding the navigation into the aside area.

Review the Exercise 8 demo pages and video pages for more information.

Points: 30

CSS Styles for Page Layout

  • EXAMPLE style for the wrapper: width: 960px; padding: 10px;

Use to set a specific width to the wrapper, aside & main areas. Experiment to make sure the aside and main areas will fit together inside the wrapper. Use a calculator if needed. Your width can be up to 1200px.

  • Example for Flexible pages (for the wrapper): width: 98%; padding: 2%;

Use percentages to set the widths to make your page adjust or be flexible to fill the browser window. Try on the wrapper, aside and main areas. Be sure to check to see that the aside and main fit inside the wrapper.

  • Example for a page that is flexible to a certain width and then becomes fixed so the page does not expand beyond a comfortable viewing area. (for the wrapper): width: 98%; padding: 2%; max-width: 960px; -- again your max-width can be as high as 1200px;

CSS: Navigation Styles Using an Unordered List

Using your existing navigation content from your Exercise 8 pages, add an unordered list, with each link being a list item. Remember page7 is optional -- but a good learning experience

<li> <a href="index.html"> HOME </a> </li>
<li> <a href="fixed.html"> Fixed Page </a> </li>
<li> <a href="flexible.html"> Flexible </a> </li>
<li> <a href="maxwidth.html"> Max-Width </a> </li>
<li> <a href="nav.html"> Navigation </a> </li>
<li> <a href="art.html"> Artist Statement </a> </li>
<li> <a href="sidenav.html"> Aside Navigation </a> </li>

Review the Demo pages for CSS style use.

Exercise Eight Grading Rubric
Item/Points 1-3 4-5 6
Coding / Errors Some Mostly Correct All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Most Requirements Above & Beyond
Design & Creativity Basic Average Amount Above & Beyond


This exercise is worth up to 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort/experimentation (6)
Design (6)