WOD 1 (BrowserHistory1) Reflection:
In my first “workout of the day” (WOD), I was tasked to create a simple web page titled “A History of Web Browsers”. This page was intended to include a title, table of contents, and five sections (introduction, a brief history of internet explorer, a brief history of Firefox, a brief history of Chrome). Each item listed in the table of contents was to maintain a relative link to the appropriate section of that page, and each section of the page was to include an external link to a site of my choosing. The last step is to embed the logos of each web browser above their corresponding sections.
There were many learning curves to this exercise. I performed it a total of four times because I kept making simple errors. I was able to create the page successfully in 14 minutes (denoting “mastery”) on my first try (which felt very good), though I forgot to narrate my screencast. Hence, I had to perform the task again. On my second attempt, I got all the way to the last step before I realized that I forgot to start my timer (how silly!)…So, I deleted my work and tried again. On my third attempt, I was feeling very good. My speed was increasing with each trial, and I was sure that this would be the one. That was until I reached the final step once again…and my computer died!!! Talk about a test of patience. From this first exercise, I learned resilience. It would have been very easy for me to get frustrated with myself and give up. Despite this, I persevered and kept trying until I performed the entire assignment successfully. In the end, I felt a great sense of accomplishment.
WOD 2 (BrowserHistory2) Reflection:
My second WOD asked that I build upon my previous web page. I was instructed to create a CSS file and link it in my HTML file. From there (in CSS), I had to change certain fonts, font colors, margins, text size, background color, and logo placement. I found this exercise to be much more difficult than the first. This is likely because of my significant unfamiliarity with CSS rather than HTML. It took me three attempts before I was able to complete the entire task successfully.
First, I didn’t realize that you have to “load” the fonts that you are going to reference in your CSS file into your HTML file first. I spent a very long time trying to figure out why my fonts weren’t changing. After watching the screencast, I realized that each HTML page must be loaded with their appropriate fonts (and perhaps a few back-ups) before deploying it to the browser. Next, I had a difficult time getting my logos to be inline with the text. I had to refer back to the screencast several times to observe how the professor did it. In the end, I found that referencing the screencast improved the rate of my learning. I’m very much a visual learner, so seeing the exercise performed first made it easy for me to recall certain tasks.
WOD 3 (BrowserHistory3) Reflection:
In my final WOD, I was asked to change the layout of my “A History of Browsers” web page. I was instructed to keep the introduction section full-width, but change the remaining content so that it would appear side-by-side. Then, I was asked to remove the “table of contents” header and create a horizontal navigation bar (in place of a list). I found this task to be the most challenging of all. When attempting to use the “float” CSS style, I didn’t realize that there is no such thing as “float center” (only float-left, and float-right). Rather, if you want a section to appear between other sections, you simply change the text width and insert padding.
Next, I struggled with changing the padding around the items in the navigation bar. I initially added padding to the bar as a whole, but soon realized that I needed to add padding to my “li” attributes, so that the section headers would appear spaced out. In the end, I completed the exercise successfully (with a bit of help from the screencast), and it felt oh so good!