The Lorem Ipsum Blog Page

Practice with HTML5, CSS3 and responsive design while building a blog page.

Scroll down...

Content

Resources

Comments

This first assignment is meant to get you to explore a few of the new tools you've learned over the past few lessons. This assignment is intended to be fairly straightforward and to build up muscle memory as much as anything else. The end-of-unit projects will be much more involved.

For this assignment, you'll build a very basic "blog" page but one which utilizes the HTML5 semantic elements and some new CSS3 features. The page will have two different form factors -- one for wide screens, and another for narrow screens. This is practice is called responsive design.

Large Screens

Click for a larger version

Smaller Screens

Click for a larger version

You'll get to practice with the Git workflows that we'll use throughout the course as well.

Getting Started

Fork and clone the Project Repo on Github. See How to fork if you need a refresher.
Add your name to the README file, commit the change, and push to your fork.
Set up a basic index.html file for HTML
Create a styles.css file for styles
Be sure to link to the stylesheet in the <head> of your HTML document
On to the main event!

Quick tip: If you have an ad blocker installed, it may not show the ad unit you're trying to create (especially if it has a suspicious class name like ad-content)! You can get around this by using an incognito window (which has no extensions running) or just disabling the blocker for your page.

Your Task

Your job is to produce the mockups included above. You'll start by building the basic structure of the wide page and then implementing the changes necessary to make the page degrade gracefully to a narrower form factor.

Don't worry about producing perfectly beautiful code the first run through. You will refactor it afterward.

Wide Version

Start by building out the HTML structure of the page. Use the HTML5 semantic tags where possible. Fill in the background colors of the sections as in the mockup (roughly) so you can keep track of where everything is. It'll be easiest to just think of the wide version for now.
Fill in the text of the elements. Tip: Type lorem and then hit Tab in Sublime text to generate a Lorem Ipsum paragraph
Now start applying styles so the elements are positioned on the page properly.
1. Assume that the maximum container width in the mockup is 990px (though obviously the navbar exceeds it).
2. Assume the navbar is fixed to the top of the screen (e.g. always there no matter how far you scroll down).
3. Assume that the ad box height is fixed at some value (this is really just to give you some experience vertically centering something).
4. Note that the 3 articles will be of differing lengths (heights), but there will always be 3 of them.
5. Don't forget a CSS reset
Apply any basic element stylings (and the rounded corners).
Commit to Github (frequently).

Narrow Version

Set up media queries so the page operates like the one in the second mockup.
Play with it to make sure the element layouts behave as expected when you cross the breakpoint.
Commit to Github.
Finally, refactor and clean up redundancies in your styles or markup. Try to conform to the best practices we covered earlier. Now is when you aim for good-looking code.

Finishing Up

When you're finished with all tasks, push your changes up to your fork (aka $ git push origin master).
To submit your assignment, create a pull request from your fork to the main upstream repository. See below if you need a refresher on how it's done.

Done!

Solution

The solution will be available here on Github once you've submitted your pull request.

Pull Request Refresher

Here's a quick refresher of how to submit a pull request. You'll do this about 100 times during the course so it'll very quickly become second nature.

Go to your fork and click the green "Pull Request" button:
Examine the files that will be submitted. If you don't see this screen, make sure you were actually on your fork in step 1:
Title, add any clarifying comments, and submit your pull request: