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
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
====================
Continue Page
====================
Learn More Page
====================