Get ready for the BrowserHistory3 WOD:

Prior to starting this WOD, you may want to review the Chrome Developer Tools tutorial screencasts in the Resources section of this module. Open VS Code to your repo directory, start http-server, create a directory in WODs called BrowserHistory3

Instructions

1. Start your timer.
2. Copy the index.html and style.css files from BrowserHistory2 into the BrowserHistory3 directory.

3. Make the following changes to the layout:

   • The introduction section should remain full-width, but the three sections on browsers should appear side-by-side as three columns, each 300px.
   • Remove the table of contents header, and instead style the list of section links in a simple horizontal bar (i.e. a “navigation bar”).

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              Start WOD Timer

Demonstration

Once you’ve finished doing the WOD a single time, watch Prof. Johnson do it HERE

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:

• Delete your old project so you cannot refer to it;
• Don’t look at my screencast while you WOD; and
• Reset your timer.

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