Remock

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

Goals

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

Details
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 * navigation reorganization * clearer separation between functional page elements * pseudo-classes

Stories

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

Links

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.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
  • Clicking on Any Page's Header navigates to the index.html page

Highlighting Button Links

Given the browser has loaded the page

When the user mouses over a "Button Style" link

Then the link'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 - Entering a form input with an "input device" such as a cursor or a focus changes the color of its border and background

Screen-shots

Link to Drive


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

====================

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

====================

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

====================

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