Summary
WODs are designed to help us get familiar and comfortable with certain skills through repetition and timeliness. These 3 particular WODs, BrowserHistory1, BrowserHistory2, and BrowserHistory3 are designed to increase efficiency in creating a basic website. BrowserHistory1 focuses on setting up a website’s content, complete with hyperlinks and images. BrowserHistory2 focuses a bit more on styling the website, incorporating colors and fonts. Lastly, BrowserHistory3 focuses on formatting the site (into columns) and creating a navigation bar and designing the user interface.
BrowserHistory1
1st attempt: ~18 minutes - Av
I went into BrowserHistory1 having watched the video on why and what a WOD sought to achieve by using an Athletic Approach. My strategy for approaching WODs was to read the instructions first and google everything I didn’t know or remember how to do beforehand. I thought that would be a better strategy than “peeking” at the answers provided by the instructor’s sample screencast. For example, prior to attempting BrowserHistory1, I looked up how to hyperlink both external websites and internal sections because I had forgotten. By combing through the instructions beforehand and making sure I understood what the WOD was asking for, I was able to go through the first WOD the first time, achieving an Average time (18 minutes and 3 seconds. I did have some issues along the way, like forgetting how to put an image in an html, but overall, I did fine. Since we had to hyperlink something in each browser’s paragraph, I found that finding a proper noun, and then linking it to its/their Wikipedia page was the fastest method.I then watched the instructor’s screencast, and saw that I pretty much did exactly what the professor did, but all on my own, which made me feel quite accomplished.
BrowserHistory2
1st attempt: DNF
2nd attempt: ~8 minutes - Rx
In comparison, I think that I had a much more difficult time when it came to BrowserHistory2. The WOD built off of the page we just made in BrowserHistory1, with a twist. This WOD used what we learned previously about using Google Fonts. Before attempting this WOD, I felt like I understood the instructions well enough. However, when I attempted to do the WOD, I ran into a lot of issues. For example, I forgot how to reference Google Fonts, specifically Oswald and Open Sans. Another issue that I ran into, was I forgot how to make the images align to the left – I later found out that this was done by using “float:” in the style sheet. Since I couldn’t figure out the Google Fonts issue, I ended up DNFing and watching the professor’s screencast. After seeing how the professor linked Google Fonts, I reattempted the WOD and My time was under 10 minutes (8 minutes and 15 seconds)., meaning I did better than average.
BrowserHistory3
1st attempt: DNF
2nd attempt: ~9 minutes - Rx
Lastly, for BrowserHistory3, I also DNFed one time. In my opinion, this was the most complicated WOD to do thus far. Although I had read the instructions beforehand, I had no idea how to put the browser paragraph contents into three separate columns. Despite trying for 20 minutes, I couldn’t figure it out. After attempting myself and failing, I then watched the professor do it. I found the screencast to be extremely helpful, but I did have to watch certain parts of the video again to figure out the exact steps. Combing through the video and following along in VS code helped a lot with retaining the different steps to creating the columns. Afterward, I redid the WOD and ended up with a really great time (9 minutes and 26 seconds) that was better than average.
Advice/Conclusion
Overall, I would highly recommend previewing the instructions before starting the WOD to make sure you are familiar or know what code you will need to know and write. If there are things you do not know how to do, I would recommend looking it up. If not, it will make the process more difficult. I also suggest that if you are unable to work through the WOD the first time, watch the professor’s screencast, but be doing what the professor does on the side. In that way, the next time you reattempt the WOD, there is a higher chance that you have retained the information that you watched. I also highly recommend installing live-server, which is what I used instead of http-server. This helped significantly, as all you need to do is save on VS Code, and the document will automatically update.