U&I Need To Learn This
27 Feb 2025
Why Learn and Practice At Least One UI Framework
You might think, “Why should I learn any UI frameworks? I can achieve the same thing using HTML and CSS.”
Well, that is true, but it’s the same as saying, “Why should I go to the hardware store and buy wood when you can chop my own?”
Neither are bad options. One just requires more and I mean more effort to do. UI frameworks are like the wood you buy from the store. They provide you with preset components that you can use right away, saving you time and effort. This allows you to focus more on your website’s functionality instead of trying to build from scratch every time. An example of a UI framework is Bootstrap 5. It contains premade components that are easy to implement once you get the gist of it. A cool function it has is ensuring the same responsiveness across all devices without having different versions of your code for mobile, tablet, and computer. It also has functions for the navigation bar and footers that are found in just about every website out there. Bootstrap 5 also has a library that contains pretty much everything you need to make a website.
You Decide
For those who might still think that UI frameworks are a waste of time.
The image above was my practice WOD that discusses the history of some leading browsers commonly used today. The image next to it is the same website but with a footer implementation using Bootstrap 5. As I mentioned earlier, headers are a key part of modern website creation; with that said, a significant difference between the two is the header. Although with proper editing it is possible to create the second image’s header without any UI framework, the difference lies behind the scenes in the index.html file. The implementation of the version without UI frameworks required 50 lines of CSS code and another 167 lines of HTML code to achieve. In contrast, the second version with a UI framework only needed 144 lines to implement. In short, I was able to achieve a more organized website with a properly aligned navigation bar with fewer lines of code.
My Yap About Bootstrap 5
When we first learned about Bootstrap 5, I thought it was the same as regular CSS/HTML until I needed to implement the navigation bar. I was very confused at first but quickly learned a simple navbar implementation. What I liked about it is that I didn’t need to change and write more CSS code to create a random block placed at the top of the page to be my header, as I usually did in the past. I personally think that I need more practice with Bootstrap 5. In the WODs about replicating a website of our choice and another replicating Murphy’s Restaurant, I realized that I was struggling the most with aligning things and not being able to put content where I wanted to place them. I think this is because I can’t tell which “box” my content is in, and therefore I’m changing the wrong divs. A few ways I tried to counter this were referring back to old code and also trying to map out where I want things to be so I can create the corresponding header, footer, columns, and rows.
Although I’m not having the easiest time implementing Bootstrap 5, a feature I really like is the premade logos and icons for popular apps like X and Instagram. Implementing icons has never been easier for me, as I would always use PNG photos and try to use them as icons on websites I’ve created before. I know it it would be hard but if I want to create websites, I need to learn UI frameworks.