UI Basics Technical Blog
13 Sep 2020
(Clipart courtesy of https://freesvg.org/1545356200)
Browser History 1
Before starting my first recorded attempt of Browser History 1, I looked through the intructions and went through all the steps I knew how to do. The only troubling part was creating the table of contents with internal links, but I was curious to see how the WOD process would go whilst recording and being under a time restraint, so I went ahead and attempted it anyways. Of course I got stuck while creating the table of contents, so after going past the DNF time trying to create the links, I stopped my attempt and watched the screencast example. After learning how to create internal links within the document I attempted a second time and was successful with reaching the Av time. However, afterwards I realized I didn’t narrate my process because I was so focused on getting below the DNF time and linking everything correctly, so I had to redo it again. Interestingly, this made my third attempt a little harder because I had to concentrate on narrating while quickly fulfilling the instructions. Although the first WOD was a bit rocky, following the instructions was for the most part easy since I reviewed the readings beforehand and went through the process already with the previous attempts.
Advice:
My advice is to fully review the readings and practice the instructions before attempting the WOD in order to increase the chance of succesfully completing it within the Av or Rx times.
Browser History 2
Browser History 2 was the easiest to accomplish compared to the other WODs. It was really fun to be able to manipulate the colors and fonts of the webpage to make it look more appealing via the .css file. It took two attempts to reach Rx time. One problem I encountered was the fonts not loading within the document. I wondered why that was, and after playing around with the file I found out it was because the “O” in “Oswald” wasn’t capitalized in the style.css like how it was in the index.html document.
Advice:
It was suprising that something that small would inhibit the font to not display, so my advice is to “sweat the small stuff” when coding, because whether it’s a missing semicolon or a uncapitalized letter, it could be the difference between something working or not working at all.
Browser History 3
Browser History 3 was the hardest. It took like, six tries to get an Av rating. Thinking back on it, I wonder “why did it take me so much tries?”. I realize now it was because I was overconfident in my html and css skills from Browser History 2. Looking at the instructions, the request seemed relatively simple; order the segments into three columns and make a horizontal navigation bar. However, once I began practicing with the index and .css files, I had no idea where to start. Before doing Browser History 3, I skimmed through W3Schools.com’s CSS website layout page and thought I got the gist of what to do. In reality, I didn’t and just got fustrated throughout my attempts. The internet explorer column kept spilling into the chrome column and the chrome column in the middle wasn’t aligned with the other two. Also, the style.css file wasn’t updating the changes I made to the layout of the index.html, and if it did it was very slow and after restarting the http-server. The changes only updated quickly when I viewed the index.html using the local file path. I’m still unsure why this is. I was only able to get within Av time after consulting the screencast example and practicing using the various elements many times. This excercise made me realize that I have a long way to go before I become proficient in using html and css.
Advice:
Looking back on my experiences doing the three WODS, most of the problems I encountered came from carelessness and lack of thought/planning. Therefore, I recommend reading the assigned material thoroughly, understand the methods and functions behind the various codes/elements that will be used, and engage in thoughtful and logical reasoning when following the instructions. Also, don’t feel discouraged if you do a lot of attempts because the more attempts you do, the more you practice and the better you get.