I was able to get through BrowserHistory1 before the DNF time (sadly, I didn’t record every attempt’s time) without having to look anything up for reference. I repeated this again a couple more times messing around with VS Code to learn useful hotkeys like holding down alt to select multiple lines at the same time. Ultimately, I came in at 11:46 in my final run. What ended up taking the most time was just setting everything up like getting my browser tabs open with the right pages since there is text and links to include. I spent a bit of time making my formatting look better as well as including some nice-to-haves like making the links to the other pages include a target=”_blank” attribute so that they open in another tab. I just think it’s considerate to have that kind of thing on a page where I can presume the reader would be in the middle of reading something and might not want to lose their spot by loading a new page in the current tab.
BrowserHistory2 took me a 2 tries to get into Rx territory. The first time I just stopped the timer since I got sucked into looking at different Google fonts. The primer on Google fonts was a little lacking if I’m being honest. Maybe it was just me, but it took me a little while to figure out the format for including Open Sans. I would have thought the web page for the fonts would just include a functional link directly on the page for easy access, instead of making me figure out the correct spacing and capitalization. In the end I went with the single line used in the screencast which gets both fonts separated by a pipe. My second attempt was much quicker, and I came in at 5:24.
BrowserHistory3 was more of a challenge for me. I’ve never tried to edit a page that much without a framework like Bootstrap to make the gridding easier. It was more fun than I expected to figure out how to make the columns in parallel. I tried and utterly failed to make it work my first time, earning me a DNF. After watching the screencast though, I started getting some better ideas. I think the screencast solution was to create a new CSS class for each of the three parallel columns. For some reason, when I followed their exact technique, my columns still ended up misaligned. I couldn’t figure out exactly what was causing it, but I resolved to try something different. Instead of three separate CSS classes that were each used only once, I wanted to make a single class more reusable. In the end I patted myself on the back for the slightly more elegant solution which this time aligned perfectly. I made another change from the screencast version that had some set margins for the navigation bar in CSS. I did some division and made the four links each margined left and right 5% each to keep them spaced nicely. My second time was also technically a DNF since I was experimenting so much. I recreated my changes in my final run and ended up with an Rx at 5:41.