In this project you will re-create a complicated blog style web page.

Example Web Page Screenshots

Use these HTML Mock Screen-shots for use in building the web-site.

Example Web Page Video Walkthough

Video Walk-though of the web-site with interactions


  • 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 continue-reading.html page
  • Clicking on "Learn More" navigates to the learn-more.html page
  • Clicking on "Just Another Post" navigates to the blog-post.html page
  • Clicking on Any Page's Title Header navigates to the index.html page

Highlighting Links

  • 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.

Form Inputs

  • Entering a form input with an "input device" such as a cursor or a focus changes the color from light grey to white


Home Page

Continue Page

Learn More Page

Blog Post Page