Basic UI Design

23 Feb 2023

Raw HTML

HTML alone can be a mess to try and make a webpage with. It’s clunky and unintuitive, and there’s a good chance that any page you design will look like it belongs in the early days of the internet. Using CSS along with it can help, but you are still severely limited by a lack of options. Fortunately for all the budding front-end developers out there, a better solution exists.

Bootstrap

Bootstrap 5 is a front-end web development framework that provides pre-designed HTML and CSS components, making it easier to build a website that is both functional and good-looking. Its many components allow you to quickly create things like navbars and dropdown menus, as well as easily insert background images. Bootstrap also uses a grid system to place the components, and can resize your page for different window/screen sizes while still making it pleasant to look at.

Mo’ Classes, Mo’ Problems

It’s not all sunshine and daisies, though. A lot of Bootstrap’s versatility comes from its built-in classes, which can be very difficult to learn. There are so many, and they don’t always behave in the way you might expect. Personally, I have had a pretty hard time and several frustrating hours just trying to get parts of web pages to line up nicely. Learning what can be done with a framework like Bootstrap takes some real effort to learn, let alone master. However, it’s still a far sight better than wrestling with HTML all day.