Practice WOD: BrowserHistory2

Prior to starting this WOD, you should have studied the CSS tutorial and the Google Web Fonts links in the Resources section.

Instructions

  1. Start your timer.
  2. Create an Eclipse project called BrowserHistory2.
  3. Copy the index.html file from BrowserHistory1 into this project.
  4. Create a second file called “style.css” in this project which will contain all CSS styles for this project.
  5. If you’re using LiveReload, enable it for this folder.
  6. Link style.css in your index.html file so that your CSS styles will be applied to the HTML in index.html.
  7. Now create definitions in your style.css file and references in your index.html to improve the presentation of your page as follows:
    • The font for all headings should be Oswald.
    • The font for non-heading text should be Open Sans.
    • The font color should be DarkBlue.
    • The top and bottom margins should be 10 px.
    • The left and right margins should be 50 px.
    • The text width should be 950px.
    • The background color should be Ivory.
    • The logos should be inline with the text.

The following image shows what it should look like (click to see full size):

When finished, stop your timer, and record how many minutes it took you to complete the WOD.

Rx: <10 min Av: 10-15 min Sd: 15-20 min DNF: 20+ min

Demonstration

Once you’ve finished doing the WOD a single time, watch me do it:

Standard WOD Caveats

You’ll learn significantly less from watching me solve the WOD if you haven’t attempted the WOD yourself first.

While it’s an achievement to finish the WOD no matter how long it takes, you might experience “diminishing returns” if you work longer than the DNF time. Thus, it might be strategic to stop working at the DNF time and watch my solution.

After watching my solution, I recommend that you repeat the WOD if you have not achieved at least Av performance. If so, be sure to:

Feel free to keep trying until you make Rx if that’s of interest to you.