So We Read And Then Write?

05 Oct 2023

---

Learning Web Design Is Like Learning New Programming Language

Before encountering UI Design topics in this class, I already had considerable knowledge of HTML and a slight understanding of CSS. However, I have yet to be able to build anything intently with HTML and CSS; my job in school as a Web Designer only requires me to become adept at using WordPress to manage the department's website. Hence, as a result, I never had anything that pushed me to get deeper with HTML and CSS. However, the projects required in this class served as my tipping point to applying and taking my mediocre web design skills to the next level.

As I have mentioned, I have little to no knowledge of CSS, so at first, I had a hard time comprehending its overall syntax as I find it very different from what I have been writing as a CS student. So, I decided to read MDN documentation and watch some tutorial videos on YouTube to grasp its concept better. It was initially confusing because each resource I stumbled upon offered a different way of writing CSS to style their web pages. This resulted in me creating a chaotic CSS file while doing one of the BrowserHistory homework.

Even though I was still uncomfortable with CSS, I had to move forward and learn another new UI design stuff called Bootstrap, a UI framework. My professor kept saying that styling with CSS alone is a tough job and that learning to style with Bootstrap would make our lives easier. I was excited about it as I thought I did not have to be proficient with CSS anymore. While watching my professor's demonstration video about recreating the BrowserHistory web page that we initially did with only HTML and CSS, I was like, "What is going on here?" because he kept on assigning these navbar, navbar-expand-lg, container, etc., which I had no idea of at the time. This led me to watch YouTube tutorials while reading Bootstrap documentation because the WOD-- abbreviation for "Workout of the Day," where our knowledge about Software Engineering topics is tested by making us solve a problem while being timed-- is coming. Failing to finish a WOD guarantees a zero in our grade book; who would want that?

I Learn By Doing

I was able to replicate the first scroll of the front page of Bellroy to complete my YourChoice homework (homework that required us to choose a website to recreate using Bootstrap) as shown below:

Nonetheless, I knew that my understanding of the overall process web designing with Bootstrap was still shallow. Therefore, I spent more time learning it, and I tried redoing Murphy's web page, which I failed to finish on time during the practice WOD in class.

During the process of replicating Murphy's web page, I became more aware of how things work as I did a lot of documentation reading and watching YouTube tutorials at the same time. After this, I became more confident about the upcoming WOD. I was also finally able to confirm what my professor said about how Bootstrap could make the web design process easier.

Conclusion

This experience from the two weeks of dealing with UI design filled with writing HTML, CSS, and implementing Bootstrap made me realize that there is no single right way when it comes to web design, which is also probably the reason why each YouTube tutorial offered different ways of styling like what I mentioned; I personally took a different approach into making Murphy's web page compared to my professor's solution-- this arguably made me learn so much more. In conclusion, I firmly believe that HTML, CSS, and Bootstrap are best learned when you are implementing them at the same time, which was the missing factor and the reason why I stayed an unskilled web designer all this time.