E1 - UI Basics

06 Feb 2020

BrowserHistory1 WOD was just a brief introduction to creating and using html files with the browser. We created a brief history of web browsers web page using one html file. In the WOD we were tasked to reference other links, create different sections, create a list, and add images. This WOD took me an Av (average) of 15 minutes. I did attempt this WOD twice that is why the time was lower the second time as I got accustomed to what the WOD was asking for. Overall, I learned how to create a list through ul and li, reference links using a href, source images using img src, and structure the document so that it looks neat. Because I did the WOD twice, the first time myself to see what I was able to do and since that time was longer than average I decided to do it again and it was faster because I wasn’t going step by step figuring out what to do as I got to a direction.

I think since it was the first WOD it was good to go slowly and run through everything to see if you get stuck or just to see how long it will take you to finish. This WOD wasn’t too difficult so I didn’t really need the screencast at first but I still checked it just in case to make sure it was correct. I think to avoid getting more confused I’d listen to what professor Port said and rely on the screencast only when you get stuck because then you go through it faster instead of watching pausing and redoing the whole thing again and again. Even so, they are quite helpful!

BrowserHistory2 WOD was mainly about creating a css stylesheet for our web page. In the style.css file we were able to improve the presentation of the page by changing fonts, margins, and colors. This WOD was fairly easy and straight to the point. I didn’t need to look at the screencast too many times because the style.css directions were straightforward. The only thing I thought was a bit overwhelming was all the names that could be used in the css file. At times when I didn’t know what I should be naming the design I would have to go back to the screencast to see what the professor used. Browserhistory2 took me roughly 6 and ½ minutes but I did it twice just like the first WOD. I just missed the Rx the first time I did it so I decided to try it again and after doing it the first time and looking over the variable names on the screencast I was more confident in getting a faster time. I like to think doing css is fun but frustrating sometimes.

Some advice I have for this WOD, like the first one, is to go slow through it and you should be fine. Specific advice I would have, since it confused me, was to make sure like absolutely make sure to read the css articles and tutorials because those are going to be super helpful. Also, if you want to learn more or just be extra with your css I recommend surfing the web for more information and help on what to use when for the best outcome!

BrowserHistory3 WOD was the next step past BrowserHistory 1 and 2 where we changed the format of the web page. We had to create a navigation bar and put the web browser information into 3 sections, making sure everything was aligned correctly. Out of all of the three WODs for BrowserHistory this was the hardest one for me and it took the longest. I don’t remember the time it took me to do the WOD every time I attempted it but I know that for my last attempt it took me about 9 and ½ minutes to complete. That is however, after I attempted the WOD 4 times. After doing them quite a few times I learned how to do it faster but some things just weren’t working for me no matter what I tried. For this one I watched the screencast over and over. For one of my attempts I followed the screencast exactly and it still wasn’t giving me the result I wanted at the end. I’m still not quite sure why to this day but I assume it’s because you can’t be so sure in the world of code and things just might not work out because of the slightest things. That being said, I still finished the WOD and learned quite a bit. I learned how to divide the paragraphs into sections using div class. Also, I learned how to section images to make sure they are where we want them to be using float and I learned you have to do it separately for each of them.

My advice for this WOD is to pay attention to detail to make sure you don’t miss anything. Also, if it doesn’t work even after you look at the screencast I’d say to take a break for a few hours then come back to it because sometimes it just doesn’t work and you’ll end up frying your brain if you continue to stare at it without knowing how to fix it. If you come back with a fresh slate you are more inclined to figure out where you went wrong or just allow your browser to completely refresh. Also, padding is your best friend when you want to make sure things are aligned!