E1 - UI Basics

14 Sep 2020

Browser History #1 was like a basic introduction to html coding. I first read through the instructions to make sure I knew all the steps and identified the steps that I did not know the codes for. It was relatively simple and I knew most of the codes from our lab lactivites, but did realize I didn’t know/remember how to link to certain sections on the page. After going through all the steps and finding the solutions, I checked the screencast to sort of compare answers before finally starting a recording. My first DNF time was around 30 minutes, with the screencast comparing and googling. Then my second recorded DNF time was just a little under 15 minutes.

Browser History #2 introduced the css sheets. I wasn’t too sure how to start this one so I did a quick skim through the screencast before attempting. Although it wasn’t recommended, I believe it is a faster and more benefitial way for me to learn since I wouldn’t be getting confused with incorrect codes and I always make sure I understand everything that I see before moving on. The steps I had the most trouble with was the fonts and making the logos inline with the text. I only skimmed through the screencast, so I didn’t know where the professor got the fonts from, but a quick google search gave me what I needed. However, only one of the fonts would show up after I added it and I couldn’t figure out why the second font wouldn’t show until I hard refreshed the page. I also did some googling for the image inlining so I could understand what the professor did in the screencast. I ended up recording the screencast 3 times since I couldn’t figure out why the fonts wouldn’t show and finished the WOD in 5 minutes in the end.

Browser History #3 had little steps but I didn’t know any of the codes to do what I needed. So I started out with googling how to make columns for the text. After finding a solution, I checked with the screencast to find that the professor had done it a different way. After doing a quick comparison, I decided to go with the way I found on google since it seemed simplier, less code to type. All went well until I realized I couldn’t figure out how to add some space in between the columns. I could have just switched to the way the professor did it, but I felt a little stubborn and searched for my own way anyway. It took me a while but I did figure out how to adjust the code so that it would look just like the one in the final image. Then I began working on the table of contents. A quick search didn’t give me anything on making the table of contents line up in the header so I decided it was probably the same as creating columns for the body text. However, I decided to use a different code that I found. It worked out in the end and it looked just like the final image. Though, when I checked the screencast later, the professor did it in a completely different way. In the end, I was able to complete the WOD in just a little over 3 minutes on my second try.

Although it was recommended not to watch the screencast before completely trying the WOD once, I believe it was more efficient for me to take a glace through the screencast when I’m completely lost and don’t know which direction to go. People learn differently and I am someone who would look at the solution and work backwards if I can’t move forward from the beginning. It also prevents me from remembering incorrect codes and confusing them in the future. It’s definitely not the way to go for people who just copy and go, but for ones who will actually sit down and try to understand the steps to get to the solution, I believe it is efficient.