E1: UI Basics WODs 1,2,3

13 Sep 2023

My First Experience with WODs

WOD 1

In the first WOD, BrowserHistory1, I was initially quite intimidated to start. However, once I got going, things went smoothly and I learned a lot. Completing the screencast with my narrated demonstration took me between 1.5 to 2 hours with a couple attempts inbetween. To begin, I first read through the instructions and then watched Professor Dan’s screencast. Watching the screencast first provided me with a general structure and guidelines for tackling the problem. After that, I attempted the problem on my own. Whenever I encountered something I didn’t know how to do, I followed Professor Dan’s advice to “RTFM.” I think the benefit of this learn-as-you-go approach for me is that it immediately highlights my gaps in knowledge, allowing me to quickly find solutions. For example, I could easily look up “how to insert a hyperlink” when I realized I didn’t know how to do it. Additionally, having to narrate a live demonstration forced me to fully understand the basic aspects of HTML and CSS. You can’t narrate something you don’t understand, so this requirement added an extra layer of depth to my learning.

WOD 2 & 3

While BrowserHistory1 focused on structuring a web page and inserting text and images using HTML, the following WODs—BrowserHistory2 and 3—had me working with CSS to control the style and layout of the web page. I approached these WODs the same way as before: first by reading the full instructions, then watching the screencast, and finally attempting them on my own. Although WODs 2 and 3 appeared to be shorter, they actually took me longer to complete due to my lack of familiarity with CSS. This required me to take extra time to study before returning to the tasks. Additionally, I was determined to achieve good times on the screencasts, so I restarted them multiple times. Overall, these WODs presented many challenges, but through trial and error, I believe they are an excellent way to deepen my understanding of topics like CSS and HTML.