E1: UI Basics Technical Essay

30 Jan 2023

I tackled BrowserHistory1 on my own. I had no trouble with adding tags and changing the title of the document. Creating paragraphs from the given text was also straightforward. However, creating links to external webpages proved challenging and formatting was time-consuming. I made the mistake of not keeping my code organized in VSCODE, which made it difficult to work with. Another obstacle was creating the table of contents with an itemized list and links to each of the four internal sections. Instead of typing out the code, I could have copied it four times for efficiency. I failed to finish on my first attempt and watched the screencast for guidance on areas I was struggling with. On my second attempt, I was able to successfully complete the final step of displaying logos on the webpage, finishing at 23 minutes and 30 seconds before DNF time. I’m still not satisfied with the time I got and I’m still aiming to improve my time by redoing the WOD later.

For BrowserHistory2, I prepared by studying CSS and Google Web Fonts links. I began the WOD by copying my index.html file from BrowserHistory1 and creating a new style.css file to link to my index.html. As a result of my prior experience with CSS from labs and previous classes (ICS101), creating and linking the style.css file was easy. However, writing the definitions for the style.css file proved challenging. I was familiar with changing font color, text width, and background color, but was unsure of how to format my webpage with other style rules. On my first attempt, I DNF’d while trying to figure it out, so I watched the screencast to familiarize myself with these new rules. After understanding them, I started my second attempt and was able to apply all the necessary definitions and changes to my css file. I completed the WOD in 7 minutes and 49 seconds, beating the Rx time for the first time.

When I first attempted BrowserHistory3, I was faced with challenges in formatting the three sections into columns and styling the list of links into a horizontal bar. Despite trying for 20 minutes, I wasn’t able to solve the problem on my own. I then decided to watch the screencast and learned about the div tag and its attributes (class and id) and how they can be used to change the format in CSS. With this new knowledge, I was able to complete the WOD on my second attempt in 9 minutes and 39 seconds, within the RX time frame.

My advice for tackling a WOD is to first attempt the task without the aid of a screencast or other external resources. This will allow you to challenge yourself and see what you can figure out on your own. You will be surprised at how much you can accomplish on your own. If you’re completely stuck, give yourself time to work through the issue. After exceeding DNF time, consult your notes, the screencast, lab readings, and other resources to understand what you’re struggling with. Then, delete your previous WOD to avoid cheating yourself, and repeat the task to improve your time and understanding.