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
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
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 * images * color pallet
It's important to get the layout done BEFORE you start focusing on the specifics, so don't skip steps!
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-readingpage - Clicking on "Learn More" navigates to the
learn-morepage - Clicking on "Just Another Post" navigates to the
blog-postpage - Clicking on Any Page's Header navigates to the
indexpage
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
Icebox
- 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
Screen-shots
Link to Drive
Home Page
====================
Continue Page
====================
Learn More Page
====================