Get ready for the BrowserHistory1 WOD:

Prior to starting this WOD, you should:

(a) Do all the Readings in the UI Basics module

(b) Open VS Code to your repo directory, open a terminal, start http-server (It is recommended that you install and use live-server instead to help speed your development testing)

(c) Create a directory in your repo directory called WODs and inside this directory create another directory called BrowserHistory1.

You can watch the Getting Started With WODs screencast of you are unsure how to get started.

Instructions

1. Start your screen recording and timer.
2. Create a new file in the BrowserHistory1 directory called index.html.
3. Make the index.html file contain an HTML document whose title and top-level section (use the H1 tag) is named “A history of web browsers”. (You may wish to use the doc EMMET boilerplate to set up the document). Open a browser and check that the page loads and has the expected heading. Remember that you are running http-server from your repo directory so you will have to add the full path to the index.html file e.g. localhost:8080/WODs/BrowserHistory1/index.html
4. Structure the document into four subsections (use H2 tags): Introduction, A brief history of IE, A brief history of Firefox, and A brief history of Chrome. This link will take you to text you can copy for each of these sections. Be sure to preserve the paragraphs.
5. Create one link within each section to an external web page. Choose what to link yourself. For example, if the text mentions “Google”, you can make that text link to “http://www.google.com“. Since there are four sections, there should be four links total. Choose a different link for each section.
6. Create an initial section called “Table of Contents”, and create an itemized list within it with links to each of the four internal sections (Introduction, Internet Explorer, Firefox, Chrome) in this document.
7. Finally, the three sections describing the browsers should start with their logos. Here are links to the logos: IE, Firefox, Chrome. The logos should be displayed in the page with a width of 100 pixels.

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: <15 min Av: 15-20 min Sd: 20-25 min DNF: 25+ min              Start WOD Timer

Demonstration

Once you’ve finished doing the WOD a single time, watch a screencast example of doing it HERE

NOTE: This example may use different tools (such as the editor and web server) than used in class. You should not try to copy this example exactly. Use it to see how to do the WOD efficiently and get hints on areas you may be having trouble with.

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.