E1 UI Basics Technical Essay

30 Jan 2022

Summary

The first three WODs are designed to give students a first-hand experience to create an informational web page that contains information about the history of Internet Explorer, Firefox, and Chrome and an introduction about these three search engines. The fist WOD involves creating a table of contents section and four subsections (Introduction, Internet Explorer, Firefox, and Chrome), with each of the four subsections containing two paragraphs of text and one hyperlink. The subsections of Internet Explorer, Firefox, and Chrome also need to have a logo image per section. The second WOD involves creating a CSS Stylesheet and linking it to the web page and changing the font type and color, text width, margins, display of logo images, and background color through the CSS Stylesheet. The third WOD involves removing the table of contents and making a navigation bar instead and organizing the Internet Explorer, Firefox, and Chrome sections into three properly-aligned and evenly-spaced columns below the introduction section. For the first WOD, I practiced doing it five times. For both the second and third WODs, I practiced doing each of them four times.

First WOD

The first WOD had the most number of instructions, and finishing these instructions within the Av time category was challenging in the beginning. For the first try, I decided to work on my own first without relying on outside help. I started my timer and followed the instructions, and since I had prior experience in ICS 101, I was able to complete a majority of the instructions. However, I still ended up not being able to finish the last instruction since I was not able to correctly link the table of contents section to each of the four subsections (Introduction, Internet Explorer, Firefox, and Chrome). After my first try, I decided to watch Professor Port's video of how he was doing this WOD, and after watching, I was able to figure out where I did wrong in linking the table of contents to the four subsections. I was also able to learn some tricks from Professor Port on how to speed up the process of doing each WOD, including using "Command + shift" to relocate the text instead of deleting the text and retyping it again at another location. I carefully watched the video twice to make sure I completely understood how to do this WOD correctly and efficiently. Then, I began practicing this WOD three more times to strengthen my understanding of programming and increasing my efficiency of doing this WOD. After four tries, I was glad to see myself being able to complete this WOD perfectly with less and less amount of time used. At my last try, I was confident enough to record and narrate my performance, and since narrating and doing this WOD at the same time is something I still need to get used to, this last try took one minute longer than my fourth try.

Second WOD

The second WOD had much less instructions to follow, and the difficulty of doing this WOD was lowered in comparison to the first WOD. With my prior experience in ICS 101, I again finished a majority of the instructions. However, I did not realize there was Google Fonts, so I failed to link the web page to an external CSS Stylesheet developed by Google that contains a variety of fonts. This failure caused me to not be able to change the heading font to Oswald and paragraph text font to Open Sans. After I completed the first try on my own, I carefully watched the tutorial video by Professor Johnson, and I was able to quickly identify this error such that I linked Google's external CSS Stylesheet to the web page in my subsequent tries. While watching the video, I also made sure if there was anything else that I could learn from Professor Johnson on how to perform this WOD better, and one thing I learned was that I could combine both the h1 and h2 sections into one section called "h1,h2" on the CSS Stylesheet to make coding more succinct. After watching the video, I started to redo this WOD again for the next two tries, and I was happy to finish this WOD without any errors and with decreasing usage of time. For my last try, I became confident enough to record my performance, and since I was not completely accustomed to narrating and performing this WOD at the same time, my last try had a performance time of one minute more than my third try.

Third WOD

The third WOD has the least number of instructions, but I was nowhere close to finishing it for my first try. I did not know the correct way to program the layout of the web page to create three evenly spaced and aligned columns for the Internet Explorer, Firefox, and Chrome sections. I also never learned how to create a navigation bar and format it in the external CSS Stylesheet. As a result, after attempting to follow the instructions, I began to first seek outside help from W3Schools, which gave me some useful information. Then, I looked into Professor Johnson's video of his performance of this WOD, and since it was my first time learning new information, I had to carefully watch his video three times to strenghthen my understanding of the codes and their functions in this WOD. Then, I started to apply what I learned into actual practice. For my second try, my finish time was close to fourteen minutes, which was expected since it was my first try after learning from both W3Schools and Professor Johnson. I reviewed my codes after my second try and began my third try which took less time to finish. At the end, I recorded and narrated in my fourth try, and I was relieved that with practices I was able to better grasp new knowledge in this WOD by paraphrasing what I learned in my own words and carrying out the instructions with more confidence and less nervousness.

Advice

One advice that I have found helpful is to practice at least twice on each WOD since practice makes the actual recording and narrating of the performance of each WOD more perfect and efficient. Another advice is to do each WOD on your own before seeking outside help because I have found this method of doing WODs helpful for me to understand where I am at in terms of my progamming skills.