Navigating Through the Challenges of HTML, CSS, and Bootstrap 5
27 Feb 2025
My expectations were optimistic as I shifted from TypeScript to HTML and CSS. I had dabbled in HTML hoping to create a website as my project, and it didn’t seem that bad. However, my class has made me realize how difficult and time-consuming it is to learn and code HTML. In addition to learning two new languages, we were introduced to Bootstrap 5, a UI framework.
A Simple Start
The first few WODs we were given were very beginner-friendly. It had a title, header, paragraphs, and images. The hardest challenge for me was the CSS portion. The variety of ways to style and how to refer to certain parts of your HTML code was overwhelming; from padding and float to using # and being able to make the necessary changes. I could complete all of the WODs within a decent time, but I always had to refer to previous WODs or resources to help me with the CSS portions.
Where the Struggles Started
After being able to do basic tasks, we were introduced to Bootstrap 5. Bootstrap 5 is a UI framework that is a collection of pre-built components and code that is supposed to help the user interface. My impression was that UI frameworks would make the coding process much easier and would allow me to worry about CSS less. From the very start, I was completely lost. Having numerous classes in one class made the learning process difficult. It was clear that there is a large learning curve when using a UI framework like Bootstrap 5. The most difficult challenge for me was being able to recreate a page using Bootstrap 5. Having to match the original home was very difficult as it required a lot of small changes and being able to find what classes I needed to use made it worse due to the abundance of classes and features I could use. The only feature that I found easy to learn was being able to use the icons that Bootstrap 5 has to offer.
This was my attempt to recreate NVIDIA’s homepage.
Final Thoughts
I have come to understand the usefulness of UI frameworks like Bootstrap 5 due to their ability to speed up the process of designing web pages but the time it takes to fully take advantage of UI frameworks makes it daunting to fully invest in learning.