UI Basics

13 Sep 2022

Browser History 1


This WOD required us to create a basic webpage, with headings, lists, links, paragraphs and images. Since this was the first WOD, I had trouble starting out. I was able to set up the boilerplate, and divide the document into 4 sections. I had trouble with the internal document linking because I couldn’t remember what I needed to link to things in the same webpage. After the first attempt, I referred to the screencast and found that I needed to designate ids for each section and then to link them using the anchor href element and referring to the ids using #. I also had trouble inserting the first image because I thought that I had typed some code wrong and it wasn’t loading because of my error. I spent way too long trying to figure out what was wrong but it turned out that the image just wasn’t working at the time. I saw that the other images were working and the code was similar so I tried to find and insert my own image from Google and it ended up working.

Browser History 2


For this WOD, we had to copy BH1 and add a css file to style our html file. This one came along easier because I had remembered how css files work, and VSC was able to suggest the code I was looking for and auto completed for me. The thing I had trouble with was linking the font family in the html file. I had already linked the css file in the html file but I totally missed that I had to reference an external link to be able to use the fonts in the html file. I referred to the screencast and was able to fix this problem. Next time I need to make sure I read the instructions carefully and to go over the material that covered this information once, twice and even three times over so I can remember what to expect when I come across a certain aspect.

Browser History 3


By far the hardest WOD yet, and learning from BH1 & BH2 I actually ended up skimming through the screencast before making my first attempt this time. I STILL had trouble remembering what to do and what elements to use for some parts. Namely, the part where I had to split the sections into three columns. I knew that I had to declare and classify each section, and I was able to split them into three columns by setting each section to float on whichever side of the page after some time. I had trouble trying to make sure everything was in line and had ample spacing between each section. After referring to the screencast again I found that some padding did the trick.