UI Basics Technical Blog

29 Sep 2019

The BrowserHistroy WODs was a whole new experience for me and it was a very interesting way of testing my programming knowledge thus far. Before taking this course, I had a basic knowledge of the fundamentals and concepts of several programming languages; such as HTML, CSS, JavaScript, Java and Python. Before I started to attempt the different BrowserHistory WODs, I began to contemplate on if I was about to complete the assignments in a certain amount of time; since this was a new experience for me. However, despite this minor setback, I was able to prepare myself in studying the material before hand and familiarizing myself with the concepts more. After completing the BrowserHistory WODs, I noticed that I was able to be more time efficient overtime and effectively found ways in improving my programming skills.

To my fellow peers: I recommend attempting the BrowserHistory WODs without studying or watching the screencasts prior to trying them. In doing so, this will test your overall knowledge of the content that we are learning and will give you a better understanding of where you are as an individual. Afterwards, if you seem to be struggling through these BrowserHistory WOD’s, then I would suggest to stop for a moment and re-learn the concepts in which you have forgotten as well as learning concepts that may be very useful for you in the future. Some resources that I can recommend using when you want to reference any programming language are W3 Schools, DevDocs, MDN Web Docs (Mozilla Developer Network) and Stack Overflow. When you have refreshed your memories and you feel ready to attempt the WODs again, I suggest waiting for some time before re-attempting. By doing this, you are able to actually have time to obtain the knowledge that you have learned and apply them in your future career.

BrowserHistory1

The main objective of BrowserHistory1 was essentially to develop a simple static webpage using the basic fundamentals of markup language HTML. This webpage would start off with the basic doc EMMET boilerplate setup which includes HTML elements, attributes, headings, paragraphs and other basic HTML tags found within the boilerplate. With prior knowledge of HTML, I was able to complete this assignment in Rx time (around 8 minutes). This first WOD was very straightforward and I was able to complete this assignment with minimal problems. After completing this first WOD, I decided to watch the screencast to compare how I performed in my coding with Professor Port. Subsequently, I noticed that my code was very similar to Professor Port’s code with a few minor differences. In spite of that, everything worked accordingly and this assignment was fairly simple to complete for me.

BrowserHistory2

The main objective of BrowserHistory2 was essentially to apply some styling to the static web page from BrowserHistory1 that we have previously created. This assignment required us to develop a static webpage using the basic fundamentals of a stylesheet language known as CSS and to use Google Web Fonts, on top of the already existing HTML code we have written. Although I was able to finish this assignment within the Rx time frame (around 11 minutes), this workout was a little more challenging than the first assignment because of the vast amount of CSS properties that can be used to style a basic HTML web page. However, despite this minor setback, I was able to figure out the correct CSS properties to use for my static web page. Based on the screencast; performed by Professor Johnson, our code was nothing far off one another. The most interesting part that I learned from this assignment is the use of alternative fonts in replace of the default text font shown on a web page. I have never used different fonts for a web page throughout my programming career so far and this was very eye opening for me.

BrowserHistory3

The main objective of BrowserHistory3 was essentially to enhance the styling of the static web page from which we have created from BrowserHistory2. This assignment required us to take the static web page from the previous task and take the styling even further beyond by using Google Chrome’s Developer Tools. In this assignment, we were given the task to change the browser sections to make them inline and appear side-by-side as columns instead of rows. The instruction in of itself was very tricky to comprehend, which made this BrowserHistory the most challenging of them all; since it took me several tries to understand the concepts as well as remaining within the advanced range. The main obstacle that I faced was figuring out how to make the sections into columns and centering the content to the middle of the web page. Due to this personal dilemma, I resorted to using external resources to help solve this problem. After watching the screencast and using multiple external resources, I had a better understanding of what I need to accomplish and how to use them correctly.

A link to WODs