Quickly Build Web Applications with UI Frameworks

08 Oct 2022

When students first start web development, they typically go through a curriculum that uses HTML, CSS, and Javascript to set their foundation. Raw HTML, CSS, and Javascript are useful for understanding the basics of DOM manipulation, however it can be quite tedious to write reusable code with those three alone. That’s where frameworks come in to help.

Working with HTML and CSS alone in particular can be a daunting task. Mobile responsiveness and styling elements are tricky to get right, and it can require a lot of lines of code. With UI frameworks such as Bootstrap or Tailwind, a responsive web application can be up and running a lot quicker. On top of that, because they reduce the time that it takes to style or add responsiveness, more focus can be put on the complex logic behind the applications.

Here’s an example of Bootstrap vs. CSS:

See the Pen Bootstrap Example by Giorgio (@giorgio808) on CodePen.

Bootstrap

See the Pen CSS example by Giorgio (@giorgio808) on CodePen.

Pure CSS and HTML

What UI framework should you choose?

Well that depends on the needs of the project. With a project that is heavy on the backend and logic, maybe using Bootstrap would be nice for the frontend side of it. Bootstrap has pre-made components that can be used to style HTML elements. A few of my favorites are the toggler collapsible navbar and the carousel. These two would probably require quite a few lines of CSS for implementation. However, the drawback of using Bootstrap is that projects can look similar to other sites that use Bootstrap. This could make the site look less original.

The other alternative to make a more customized site is Tailwind. This framework is really good especially when combined with React, since components can be quickly created. It is similar to Bootstrap in the sense that styling can be done via the class attribute in HTML (or className attribute in JSX). The con of Tailwind is that it makes everything look a bit more messy since everything is inline. Ultimately though, both Bootstrap and Tailwind are awesome frameworks that can be used to quickly develop a site’s UI compared to plain HTML and CSS.