Front End Fun!
26 Feb 2025
One of many UI saviors
Writing in HTML and CSS is an experience that I personally do not enjoy whatsoever. I find it to be confusing and irritating at times because there have been many occasions when I could not get an element to be centered despite trying 10 different methods where all of them do nothing or make things worse. Learning how to build a website with positioning in CSS and messing around with dimensions and floats has been quite the journey for me, and although there are times when I achieve my goals, the satisfaction of doing so is never there.
Over the past week and a half I have experienced coding with Bootstrap 5, which I will say, as an overall, I had a much better experience coding with Bootstrap 5 compared to without. There are a few things that still bothered me, however, but fortunately not as much as trying to center an element with raw HTML and CSS.
Zen Coding
The first time I used Bootstrap 5, I thought to myself, “Wow, this is horrible. I can’t get anything to work” because I was so used to coding without a UI framework. I had to look up documentation for how to use the framework, and the whole time I just thought that I could do this with HTML and CSS the old-school way, but after some time, I had a change of heart. As I built the habit of using the framework, I felt a little more comfortable utilizing it to its full potential rather than cutting corners with CSS. Instead of resizing fonts and icons and other elements in a separate CSS through color: white and font-size: 16px attributes, the same can be done all in the HTML file with classes text-white and fs-4. At first, I could not see how a UI framework would help me anyway whatsoever, but after really taking advantage of it when rebuilding a small part of the Internet Archive, I had an eye-opening experience.
Rebuilding the Internet (kind of)
During my attempt at recreating the Internet Archive webpage, I didn’t realize at the time how much of an easier time I was having coding compared to if I were to do everything the hard way. Creating a navbar was made a lot simpler by simply adding the class navbar to a nav tag. I no longer had to worry about spacing the elements in the navbar because I could just put them in an unordered list, and Bootstrap took care of the heavy lifting. I didn’t have to worry about padding or margins or spacing every single element (for the most part) anymore because Bootstrap would do all of that behind the scenes when I invoked certain classes on different elements. My main gripe about UI frameworks is that it works well when it does work, but there are times when I run into the same problem as when I use HTML and CSS: not being able to center elements. I’m not sure what it is, but I can never center things, even if my life depended on it. It would be unfair to say that this is a shortcoming of Bootstrap 5, however because this is more of a user issue.
Is it worth it?
I think that using Bootstrap 5 was a definite step-up from raw HTML and CSS because the amount of time cut from worrying about the specifics was incredible, and UI frameworks don’t seem to have that high of a learning curve. Sure, at the beginning it may seem pointless, but after you experience how seamless the HTML coding experience is with it, it’ll be hard to turn back.
Left is original. Right is copy made with Bootstrap 5