To preface this essay, my experience with HTML and CSS is wild and extremely unorganized. Being an older student amongst my peers, I am proudly from the MySpace era which provided with my first exposure to HTML at the age of 13. Unlike FaceBook and Instagram, MySpace had ability to create a custom-made profile using HTML. While a lot of my profile was based off copying and modifying page templates, it gave me some great exposure into how HTML works and the structure that the language follows. Moving over a decade forward, I haven’t spent too much time working with HTML/CSS, but I’ve ran into it in both BUS 311 as well as developing a website for my EDM music productions. So, in short, I’ve been exposed to HTML/CSS over time, but I never really took the time to sit down and learn it properly.
The Browser History WODs were a great opportunity to review some basic HTML/CSS concepts and put them into practice. However, I quickly learned that my previous exposure to the language wasn’t going to be enough to develop a good-looking website from scratch. I needed to take the time to learn from the beginning to truly understand the language. While going through the provided resources, I employed a strategy that helps me learn best: read while practicing. I created a test HTML page in VS Code and would apply the new concepts in the readings as I progressed. By reading and then putting it into practice, I found that completing the WODs did not require too much prep-time. For anyone else in this class, I would highly recommend that you do the same. Especially when learning programming where you are learning several new concepts in a matter of minutes, make sure you take the time to experiment with them and truly understand how they work and what results they provide.
The Browser History 1 WOD was lengthy, but also the easiest for me. Once you can grasp how HTML separates a webpage into different sections such as headers and paragraphs, it is easy to structure your code properly. I was able to complete this WOD in 13 minutes achieving Rx status. I think something that really helped me here was coding in the sections of the webpage before copying over the information. By reading through the WOD instruction, I knew how many headers and paragraphs were needed so I spent the first portion of the WOD constructing this framework. After doing this, it was very easy to input the information I needed. Also, before working on the WOD, I spent some time learning the actual meaning behind some of the shorthand in HTML. For example, by learning that “href” means Hypertext Reference and “src” means Source, I had an easier time understanding their function and remembering how to properly use them in HTML tags. Finally, I tried to apply a concept from ICS 111 to my coding: incremental development. As I progressed through the WOD, I would continually save the file and refresh the localhost webpage to view the changes that I made. I think this tactic is crucial in programming as it allows you to catch errors early on. It is also very satisfactory to see that the code you are typing is creating a tangible (well visually-tangible anyway) product.
Browser History 2 WOD was the most difficult for me. While I was able to pick-up HTML rather quickly, CSS was a whole other story. Through this WOD, I realized that most of my webpage experience in the past was solely HTML. While I used some inline CSS, I never really understood the difference between HTML and CSS. This WOD helped me see the difference. While learning CSS was slower than HTML, my biggest struggle was a problem that took some research to solve. On my first attempt of this WOD, I noticed that my website wasn’t always applying the CSS changes I had made in VS Code after saving the CSS file. At first, I thought this was an issue with the server, but with some Googling I found that Chrome was referencing cached versions of the style.css file. Therefore, even though I made changes to the file, the CSS effects being applied were from an older version of the file. The simple solution to this took an unfortunate amount of time to find, but I eventually learned that by hitting “CTRL + SHIFT + R” I could perform a “hard reload” which wouldn’t try to use this cached information. Although this was completely un-related to the WOD itself, I found this to be the most time-consuming issue I faced. However, after learning this, I was able to complete the WOD at Rx speed.
Out of all the WODs, Browser History 3 took the most time to prep for. While it seemed like creating three columns would be easy-to-do in HTML, it wasn’t as straight-forward as I hoped. Doing some Googling, I found a lot of different examples of separating the section using the “div” divider tag, but this seemed to out of the scope of what we had learned. Therefore, I tried to take a step back and work with the concepts we had. Luckily, I remembered back to BUS 311 where we completed a similar goal by separating the webpage into sections using tables. After realizing this, it was easy to see how you could create three columns be creating a single-row table with three columns. Each cell would contain the information on each web browser.
However, I did struggle on the CSS side. I noticed that by formatting the “td” cells of the table, that any table in the website would have to abide by the same CSS properties. While I know that this is likely outside of the scope of what we have learned so far, I want to spend some time learning how to create different classes for each type and how to format them independently in CSS. With some extra practice, I’m optimistic that I will get there! I was able to finish this WOD with an Rx status.