UI Framworks

03 Oct 2023

Bootstrap5 logo

Reaching the front

As a guy with no previous experience with frontend development, I had a hard time when one of my college classes started requiring me to build webpages in HTML and CSS. The progress was slow, I had to look up everything, and the layout never turned out exactly as I thought it would. My webpages looked old school, and creating a modern layout took ages. I was really looking forward to learning a framework for my HTML, hoping it would make frontend development easier. We started using Bootstrap 5.

Missing in action: UI

And it did not make my coding easier - at first. I was hoping for a rich graphic user interface where I could drag and drop elements, and having the HTML written automatically. But no. Bootstrap is a framework for HTML and CSS, not a tool for building webpages. I had just gotten familiar with <p> and <img>, and now I suddenly had to learn a lot more class="container" and class="row". This was like learning a new language again? I did see how my this is a tool for professionals, but what about me? While using Bootstrap the first times, I spent way more time in the documentation than I did actually coding. I guess this is quite common when learning a new framework, but it feels slow and not very productive. I could’ve created the webpage faster using raw HTML, and not scrolling back and forth in the documentation for hours.

Getting familiar

But, as my instructor always says, it’s through using new framework you actually get better. After completing a few assignments using Bootstrap, the whole grid-system, and ease with creating navbars, suddenly made me able to recreate website quite fast. And position elements just where I wanted. I guess a framework actually makes frontend development easier. And it’s worth learning, even though it may seem a bit overwhelming in the beginning. Get through the first few tutorials, learn how to navigate the documentation, and suddenly you’ll find yourself creating webpages in no time. With a layout you’re proud of.

Mockup of indokntnu.no created by author using Bootstrap5