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

Note: The video walk-through is a bit cropped on the edges. It should be used as a reference for functionality not layout. To see examples of the layout check the screenshots at the bottom of this page


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

Designing Your Site

Sketch It Out

Grab a pencil and (preferably graph) paper, and replicate the provided layout, paying additional attention to the details.

Be mindful of how the containers are aligned not only in relation to the page, but to each other as well.

Ask yourself the following: * What elements line up where? * Do they fit the full width of the page? * Are they centered? If so, what are they centered in relation to? * What is the **smallest** thing I can work on? * What stylings/elements can I reuse?

Break It Down

Now that you have your outline, break it down into pieces you can handle, like a single row. Or if that row holds multiple containers, start with one of the containers!

Build It Up

Take those pieces and put it all together! Then, once you have the general layout of your pages, focus on the details, like: * fonts and typography * whitespace adjustment * images * color pallet

It's important to get the layout done BEFORE you start focusing on the specifics, so don't skip steps!


Besides your site's overall design, the following stories must be completed as well:


Given the browser has loaded the page

When the user clicks on a button

Then the browser's URL changes

And the new page loads

  • Clicking on "Continue Reading" navigates to the continue-reading page
  • Clicking on "Learn More" navigates to the learn-more page
  • Clicking on "Just Another Post" navigates to the blog-post page
  • Clicking on Any Page's Header navigates to the index page

Highlighting Button Links

Given the browser has loaded the page

When the user mouses over a "Button Style" link

Then the button's color lightens

Highlighting Text Links

Given the browser has loaded the page

When the user mouses over a "Text Style" link

Then the link changes colors entirely

Form Inputs

Given the browser has loaded the page

When the user enters a form with an "input device" (like a cursor or a focus)

Then the form background and border change color


  • Add in different types of media i.e. audio, and video
  • Have the contact form alert the user when it is submitted, then reset the form
  • Animate elements of your layout


Link to Drive

Home Page
![Home page](/images/home-1.png) ![Home page](/images/home-2.png) ![Home page](/images/home-3.png) ![Home page](/images/home-4.png)


Continue Page
![Continue Reading](/images/right-1.png) ![Continue Reading](/images/right-2.png) ![Continue Reading](/images/right-3.png)


Learn More Page
![Learn More](/images/left-1.png) ![Learn More](/images/left-2.png) ![Learn More](/images/left-3.png)


Blog Post Page
![Blog Post](/images/none-1.png) ![Blog Post](/images/none-2.png)