BrowserHistory1, BrowserHistory2, and BrowserHistory3 focus on developing a web page through the use of basic HTML, CSS, Google Fonts, and Chrome Developer Tools. The first WOD involves creating subsections using H2 tags, linking external web pages, and making a table of contents. BrowserHistory2 called for the practice of styling the web page through the use of CSS and Google Fonts. And finally, BrowserHistory3’s task required cleaning up the format of the page by make the paragraphs on the page appear side-by-side and creating a navigation bar.
When I started Browser History 1, I was able to create the index.html file, rename the title and top level section to “A history of web browsers,” run http-server to view the page, and create the four subsections using H2 tags. I then got stuck at the part where we had to create the links to an external web page because I forgot about the href attribute that goes after <a>. I viewed the next step which was to create a table of contents. I had also forgotten what the syntax looked like for this. I had to stop my recording and reviewed the resource to see the syntax, and I also watched the screencast. I attempted the WOD again and was able to complete it in 19 minutes, which falls under the average amount of time. Although I thought the tasks were relatively simple, they were also pretty tedious (e.g., inserting the paragraph tags in the right place to preserve the paragraphs).
I went into Browser History 2 thinking it would be fast to complete since it looked shorter than Browser History 1. However, I ran into a problem that caused me to be stuck on this WOD for over 3 hours. I started off by copying the index.html made in the previous WOD and pasting it into the Browser History 2 folder. After creating the style.css file, I attempted to link this to my index.html. I then went into the style.css file and tried to change a feature such as the font color. I ran the page and saw no changes. I kept trying to change different features, making sure to save in VS Code, however, every time I refreshed the page, I still saw no changes. I then viewed the screencast and tried to copy the video step by step. However, my browser was still not displaying my changes. I continued to delete and edit my code and googled why my style.css and index.html weren’t linking properly. After many hours of frustration, I came across a forum that suggested using command + shift + R to refresh the page. I had been using command + R to refresh the entire time prior to this. I tried command + shift + R and it worked! My changes were finally showing up. I was finally able to complete this WOD successfully in a little under 6 minutes, which was the Rx time. I think part of the reason I was able to do this so fast was from having stared at the code from the screencast for so long while I was trying to debug.
For Browser History 3, I was stuck from the first step at having to change the layout to make the sections appear side by side. I was not sure how to go about that so I watched the screencast. I followed the steps in the screencast and was able to get it to look like the given example. I then deleted this code and redid it again without the screencast. I was able to complete this WOD in a little under 10 minutes, which was the Rx time.
One piece of advice that I have for future WODs is to try your best to have a clear and thorough understanding of the required readings and screencast lecture. I think it is a good idea to review the readings again before attempting the exercise as I got stuck forgetting certain syntax here and there. It is also very helpful to follow along on your own while watching the screencast when you get stuck. Having a genuine understanding of what the code is doing is essential to succeeding in this course as the material continues to build on top of each other.