E1 UI Basics Technical Essay

31 Jan 2021

Browser History 1

BrowserHistory1 was definitely the most time-consuming out of the three BrowserHistory assignments. I began the assignment by doing all the readings and found “About HTML, CSS, and support tools” and “Athletic Software Development” to be the most helpful in establishing good habits for future WODs. My strategy was to do all the steps for BrowserHistory1 until I got stuck and then watch the screencast for clarification. This did not prove to be an effective strategy as I would just confuse myself and pick up bad habits. Learning QuickTime and finding a reliable timer was very important before starting my recording because it does take up time when you are fumbling between tabs. I switched up my strategy and instead went through the steps alongside the screencast. After going through it thoroughly once, I tried to attempt it on my own WITHOUT screenrecording/ timing so I would not rush myself. This proved to be extremely helpful and whenever I would get stumped, I would delete the project and revisit the screenrecording. I decided to try my first recording and when I did try it, I finished around 16 minutes but realized certain steps could have time shaved off such as Step 4, the H2 tags and paragraph preservation. I racked up a total of 5 tries even though for 2 of the attempts I met Av time and the rest, Rx time. This was because I knew I was taking unneccesary steps and could be more efficient by copy/pasting an empty H2 and paragraph tag and applying them before placing my content in between them. Therefore, I took a little longer because I wanted to perfect these time-efficient habits. The li elements were tough to figure out because I would format them wrong by creating spaces so make sure you watch your spacing!!! My final time was around 9 minutes.

I did clip the first second of my first video because I was unfamiliar with the lag time that QuickTime has, it records like 2 seconds after you start screen recording. So my video starts off with the timer at 1 second so make sure you know how to use your screen recording application of choice.

Side Note

I felt a bit scared because I was making fast times (Rx and Av) and thought that I was skipping a step but I went over my recording with both the screencast and the instructions and realized I didn’t skip anything.

Advice

My biggest advice is to thoroughly do the readings beforehand and even follow along especially with the HTML and CSS tutorials. Then, get adjusted to your screen recording tool/ timer of choice and have the timer tab open so you can start it as soon as possible. Even if you do not understand what is going on, it will start to click while you are doing your WODs. Another piece of advice is that it is okay if you do not understand the instructions, just breathe, watch the screencast and follow along. I will add that you shouldn’t settle with a recording, if you stumble or mess up, do not breeze through it but acknowledge it and re-record it because good habits will be beneficial in the fluidity of your future WODs.

Browser History 2

I started BrowserHistory2 the day after BrowserHistory1 and it felt incredibly easy. The instructions were less detailed but light content wise so this is why the CSS tutorial was important. The tutorials prepared me for the style.css sheet and the reference links and etc. I watched the screencast once while following along and tried my hand. I made mistakes by forgetting to place a semi-colon (;) at the end of each definition and I corrected this right away. Another annoying aspect was creating a new file as when I right-clicked, I had to rush to name the style.css sheet as for some reason it would close before I could fully rename it. Now I made a HUGE mistake by dragging the file in my Finder directly into the browser. I finished my screenrecording in about 6 minutes the first try and when I realized I forgot to connect to localhost, I re-recorded and my time went up to 7 minutes. I practice again and then decided to re-record and creating definitions in the style.css sheet felt very natural. I took 6 tries for this one as the first 3 were mainly practice that I completed in 6-8 minutes, while the next 3 were attempts (5-7 minutes) after I fixed my mistake and started the server correctly. I took about 5 minutes on my last attempt and was very happy with the progress I had made in understanding each definition and the concepts such as why sans was needed in font-family after Oswald (because it is the default font).

Advice

This is a short BrowserHistory so even if you have multiple attempts it is okay! Revisit your mistakes and understand the definitions and tags especially the link rel format.

Browser History 3

This one was my favorite but I experienced the most problems with my browser not reloading the changes to my webpage. I found out I could disable my cache after the assignment so my quick fix was just clearing my history. The instructions are very short for this assignment but there are a lot of steps. I watched the screencast and learned more about definitions in .css which was easier because I had just come from BrowserHistory2. Creating ids as well as defining the .left .right .center was a small challenge but it was easy to remember because the order for CSS (left, right, center) was applicable throughout the whole assignment. My biggest accomplishment was understanding how to address each step without having to revisit things as shown in the screencast. For example, the screencast showed how to adjust padding after defining .left .right .center’s width and margins. Instead, I adjusted the padding all at once. Recording this took me 4 tries as I had problems with my browser refreshing and it looked so unprofessional in the recording. My final attempt was about 3-4 minutes which I was very proud of.

Advice

Make sure you understand how caches and reloading browsers work. It will create a stumbling block for you so understand it as soon as possible. Take your time and dissect the steps and combine the ones that you know go together.

Conclusion

Time should not be your main priority, understanding the concepts should be first and foremost. I quickly realized that reading and going through the tutorials are a very essential practice for these WODs. I realized that my quick times were not attributed to following the screencast but rather practicing the WODs until I could understand why I was performing the steps I was doing. That is why I took 5, 6, and 4 attempts even though I made the recommended times. I wanted to understand the concepts without any hiccups and I think that the attention to detail is very important. Most importantly, don’t rush! Take your time and space out the WODs if you have multiple. For example, BrowserHistory1 was dense so finish that and do the next 2 together another day because they are relatively short.