In this project you will re-create a complicated blog style web page.
Example Web Page Screenshots
Example Web Page Video Walkthough
- Using display, position, and other css properties for layout
- Spacing of elements
- Color matching
- Matching typography
- Using CSS to modify styles based on events (e.g. highlight on hover)
Make it work
Create a page layout with empty
divs and other page elements. Don't worry about making all the content correct; focus on the layout.
Make it right
- Fill in the page content.
- Make interactive elements work correctly.
Make it better
Experiment with design improvements. For example:
- fonts and typography
- whitespace adjustment
- navigation reorganization
- clearer separation between functional page elements
- Clicking on "Continue Reading" navigates to the
- Clicking on "Learn More" navigates to the
- Clicking on "Just Another Post" navigates to the
- Clicking on Any Page's Title Header navigates to the
- Hovering over "Button Style" links lightens the color of the link.
- Hovering over "Text Style" links changes the color of the link from grey to red.
- Entering a form input with an "input device" such as a cursor or a focus changes the color from light grey to white
Learn More Page
Blog Post Page