E1: UI Technical Basics

28 Jan 2023

Browser History 1

I went through the entire HTML beginner tutorial a couple days prior to starting this WOD, so I briefly reviewed what I learned from the website before actually starting. The information was fresh in my mind, so for the most part I kind of knew what I was doing. However, I initially struggled with getting my http-server to work. I remember being so disappointed because I was ready to begin the WOD, but I just could not get the http-server to start. After trying every option I could think of, it worked when I tried node ./server.js rather than putting two dots before /server.js. Rather than mindlessly doing things, it’s important to know why you’re doing what you’re doing. After maybe an hour of fiddling with the terminal, I at least had an improved understanding of how to start an http-server on VS Code.

During my first try, I wanted to familiarize myself with the steps, so I took my time. It took around 30 minutes to fully complete the WOD. For my second try, I was ready to time myself. I forgot how to code the links, so I had to refer to the screencast for help. There were a lot of “brain-fart” moments, but I eventually finished the whole WOD in 18 minutes. Without the help of the screencast, my third and last try was successful, where I finished in 13 minutes. I made small mistakes here and there, including accidentally adding an extra quotation mark, forgetting >, mixing up href with src, but I was able to recognize what I did wrong. After Browser History 1, I felt more comfortable with the basics of HTML and setting up a simple web page.

Browser History 2

I did the same thing for Browser History 1 where my first attempt was taking things slow to fully digest the instructions. I was able to do the first step of linking the style.css to the index.html file on my own, as I remembered what I learned from the CSS beginner tutorial. However, I did not know how to proceed for the following steps, so I referred to the screencast. This took around 15 minutes. For my second try, I tried to do all of the steps from memory. Although I thought that this WOD was straightforward for the most part, I found myself often making minor formatting mistakes along the way. I persistently forgot the semicolon (;), and often could not immediately realize what I did wrong. This was frustrating, but at least these repeated mistakes prompted me to always check that I had the semicolon in my code. In my third try, I was able to go through the whole WOD only with a couple bumps here and there with formatting, and I finished in 7 minutes. I was then ready for my fourth and last try, where I finished in 5 minutes. Overall, this exercise was enjoyable and as a result, I have learned about the basics of CSS and inputting Google Web Font links to request a font family.

Browser History 3

I didn’t know how to start this WOD, and even reviewing what I learned from the CSS and HTML beginner tutorial did not help much. I felt guilty about going straight to the screencast, so I tried to look online for how I could get started on sorting the text into columns. I at least got somewhere, being able to get two columns, but I couldn’t get the last column to align with the rest. I was stumped, so I finally went to the screencast for help. I repeated this pattern where I tried to tackle bits of the WOD on my own, and afterwards referenced the screencast for the solution. Although there were not many steps to this WOD, I took a long time getting the hang of making the navigation bar. I could not remember the code to write under <ul> and <li> in the CSS file. After I ran through the WOD a couple more times, the process felt easier to me. I guess these WODs have really reinforced the fact that practice is everything. For my last try, I was able to finish in 5 minutes and 50 seconds. As a result of this WOD, I learned how to make classes, IDs, and a horizontal navigation bar with CSS.

Advice for future ITM 352 students (and current students): Do not be afraid to make mistakes! With these WODs, I try to have fun with coding and playing around with what I can do. Learning becomes a little less stressful when you approach WODs with this mindset. If possible, try not to rely too much on the screencasts (I know, it’s harder than it sounds), but it definitely feels better to figure things out on your own. Think of them as a last resort. Also, I advise finding enough time to do these WODs, as they took longer than I anticipated, especially with doing multiple trials and the whole recording process.