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.

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

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