Diving Deep into Bootstrap
04 Oct 2023What are UI Frameworks?
Imagine you're making a sandwich. You have two choices: start completely from scratch by baking your bread and preparing all the fillings, or use pre-made ingredients to assemble your sandwich faster. Using raw HTML and CSS is like starting from scratch, while using a UI framework, like Bootstrap, is like using ready-made items. Bootstrap is an open-source front-end framework designed to simplify and expedite web design. It consists of pre-built components such as buttons, icons, forms, and menus, all set to be plugged in. This streamlined approach significantly accelerates the development process.
Why use Them?
But why gravitate towards UI frameworks? Firstly, they are reliable and safe. Popular UI frameworks like Bootstrap have a continuously growing community of users who share and collaborate together. This collective ensures the framework is always updated, rigorously tested, and refined. Aside from being reliable, UI frameworks are also very efficient. With a UI framework, you're handed a palette of ready-to-use components. Without them, you would have to build and style everything from the ground up, whcih is a more time-consuming venture.
My Personal Take on Bootstrap
When I first started using Boostrap, I encountered a significant learning curve—it felt like learning a new language. However, as I navigated through the initial challenges, my appreciation for it grew. Building web pages became more straightforward, and customization turned intuitive. The ready-made components, ranging from navigation bars to headers, proved invaluable. Reflecting on my journey with Bootstrap, it stands out as an enjoyable learning experience and a valuable addition to my skillset.
Recreating a Webpage Using Bootstrap
In a recent assignment, I was tasked with recreating a webpage using only Bootstrap. Below, you'll find images showcasing my work. You might notice slight differences, particularly in the cropping of the images; this stems from constraints I faced when trying to directly copy images from the original webpage. The most challenging part of this project was implementing a carousel to display a series of six images. However, once I got the hang of it, everything else fell into place.
The following images are of the original webpage.
The following images are of the recreated webpage.
