E1: UI Basics Technical Essay

29 Jan 2023

Having Coding Experience Can Help

BrowserHistory1

This was the very first WOD I tried and I completed it after three attempts with the score of Rx in 12:48 minutes. Since it is the first WOD, I recommend familiarizing yourself with the timer and screen program tool that you are using. I did some test runs to ensure the screen recording program was picking up my voice. BrowserHistory1 was not as difficult for me because I had prior coding experience with HTML. In my first attempt, I had forgetten the syntax for setting the width of the images. Instead of using width=”” I had used width:””. It is important to always be on the look out for these small details as forgetting one thing can lead to your code not working. Moreover, I struggled with putting the links of the internal sections in the Table of Contents. I did not know that I could just use the # as hyperlinks for the internal sections. This is why I strongly recommend that before trying out any WODs, you should review the material whether it is through reading the assigned modules or looking back at your notes. If you want to achieve a higher score or faster time, I recommend for this assignment in particular to prepare the file using an emmet documentation like ! and to create your headings and paragraph tags ahead of time. Also try to save a day of your week to doing your WODS because you never know how many takes you’ll take for a WOD.

BrowserHistory2

I took a lot longer with BrowserHistory2 compared to BrowserHistory1 because I had a hard time remembering CSS syntax and formatting. I completed this WOD after three attempts with the score of Av in 10:42 minutes. One of the most important things to remember about CSS is how to link your style sheet to your HTML file. Although there are other ways to use CSS with HTML such as through the use of the , using is just as important. Personally having separate files for your CSS and HTML is cleaner to look at compared to having all your code in one file. Another thing I struggled with is to link the google style fonts. When I first tried the WOD, I had no idea how to link it to my HTML file which caused me to reach DNF. With this in mind, I recommend to “read the manual.” There is a reason why our professor and TAs emphasize the importance of completing the assigned readings. After watching the video and rereading the google font styles reading, I realized how important it is to pay attention to small details. For example, font-family: ‘Oswald’, sans; was the correct format for CSS however, I did not do this in my first attempt. Another thing that helps especially with CSS is using a live server extension on VS Code. Live server allowed me to see the changes I made with CSS quickly.

BrowserHistory3

This was the hardest of the three WODs I had to do so far. I took a total of four attempts with a score of Rx in 9:55 minutes. I think what made this WOD difficult is arranging the paragraphs using div boxes. I knew I had to use div boxes to move the three body paragraphs using float however, I eventually got stuck on how to move the last paragraph in between the other two. This led me to watching the screencast and learning more about css. I knew about margins but along with my previous coding experience, I never really played with margin or padding of elements. I think that margins and padding play a large role on how elements are nicely displayed on the page so for any future website designers, take notes! For me, this assignment was really frustrating to do since I had some of the pieces in my initial attempts but that I did not know how to put them together. Nevertheless I think that WODs are a great tool for practicing as a coder and I had a lot of fun. I know it may be tempting to watch the screencast ahead of time but I personally think that by doing that you ruin the value of WODs for yourself. My final advice regarding these three WODs is to never give up and to always see these as a fun learning opportunity.