Project Overview

Project 10

For this project you will recreate the webpage design for project 5, using w3-schools w3-css framework classes.


Lecture Notes

In this project you will test your understanding of w3-CSS frameworks by recreating the webpage from project 5.
Recall this design:

image of page layout for project 5
Screen shot of project 5

You will need to match colors exactly by sampling the colors from the design. Your webpage needs to be responsive, meaning that the 4 columns need to respond to changes in screen size.
The assets you need will be in this zip file: Project 10 assets.
I just want to remind you that, the tools for w3-CSS frameworks will make your workflow more efficient and you do not have to approach the construction of the page the same way as you did originally when you created project 5. Do not try to follow those instructions when doing project 10. Utilize these more modern techniques to make building this webpage more efficient and easy. It should take you less time and be a much easier process once you get the hang of it.

My advice to you is to start by simply drawing out the core layout. Take the " what holds what " approach. That means draw a box with names like " row 5 " and then inside that box draw other boxes like " column 1 ", then another box " column 2 ", etc. And do this for each row and section, until you have a pretty good understanding of what you are going to do. I find it best to draw it and plan it out first, before I jump on the computer. That way I have clear directions to what I am trying to do and the relationship each element has with the other elements. Other wise, I find, I confuse myself and end up wasting a lot of time and get frustrated.
Here is an example of the sketch I did before I made the CIS 152 project webpage you are reading these notes from:

My web page design sketch example

Quiz 8


Lecture Videos


Lab Directions

Lab 10

Submission

Rework project 5 to be a modern, responsive webpage using w3-CSS frameworks

Submit a single URL to project 10. The page should look near identical to the reference image provided above. Make sure your page validates and has proper syntax and whitespace. Please make sure your page is responsive and uses comments to document core sections of your page to aid in debugging. Make sure your colors match and the overall layout and design are consistent to reference.

All content Copyright © 2017 Derek Dallas all rights Reserved