A Helping Hand in Web Development
09 Oct 2024
Web development is an essential part of software engineering as websites make up more than 90% of the internet. We get our information from websites, purchase products from websites, receive entertainment from websites, etc. Websites are a big part of our daily lives as we almost never go a day without using one. As a result, this emphasizes the importance of building them. Creating websites from raw HTML and CSS is very difficult as each element on the web page has to be carefully designed. This includes text size, font, font-weight, margins, padding, border, color, and so much more. With how meticulous web design can get, developers introduced UI frameworks.
The Convenience of Bootstrap 5
UI frameworks such as bootstrap 5 have completely changed how websites are being built. They make developers’ lives easier, as these frameworks come with pre-built classes that format website components to have a visual appeal that is difficult to accomplish with raw HTML and CSS. For example, I can create a navbar by typing in “navbar” in the class of a div. Adding “container” to a div class will add a nice padding to the container so that it is not hugging the side of the webpage. Modifications can be added to these general classes, such as “navbar navbar-expand-lg” will allow the navbar to expand and collapse based on the web page size. Since Bootstrap 5 is built with “mobilefirst” in mind, it is one of the best frameworks to use when building a website with a primary audience of mobile users. The classes allow the website elements to transform as the page size changes. These examples are just the tip of the iceberg. However, because of the vast amount of classes and different modifications that can be added to these classes, Bootstrap has a steep learning curve. It can be thought of as another coding language. New developers can get lost in the broad amount of information and classes that Bootstrap offers. Especially when HTML and CSS have override functions, using Bootstrap can be confusing. In short, in exchange for an “easier” experience building web pages, developers are met with a complex “coding language”.
Time management with UIs
Other than the convenience of UI frameworks, they also offer other benefits. Speed is essential in the coding world, especially when there are bugs that interfere with the user’s experience and a quick fix is needed. Since Bootstrap 5 contains pre-designed elements such as navbars, buttons, grids, and containers, a lot of time is saved as the majority of the coding only occurs in the HTML file. On the other hand, if it were raw HTML and CSS, a lot of the padding and formatting would have to occur in the CSS file, which can get complicated. This is a big plus when debugging code as well, as developers don’t need to dig through hundreds of lines of HTML and CSS code.
A Steep Learning Curve
My personal experience with the UI framework Bootstrap 5 is one of stress and confusion. While rebuilding website pages for my ICS 314 class assignments, I encountered plenty of issues regarding the navbar and centering divs in specific ways. Like I’ve stated before, the vast amount of classes in Bootstrap and the different modifications that can be layered on top of the classes can get overwhelming. However, once I was able to get comfortable using Bootstrap and exploring the different classes, I obtained a better understanding of this UI. It really is like learning a new programming language, as our variables are the website elements such as the images, words, headings, buttons, and our functions which modify the variables are the classes like the navbars, container, footers, etc. After learning Bootstrap, however, I can see how powerful this tool is and how beneficial it is for web developers.
A Wrap on Bootstrap 5
UI frameworks, despite their complexity, are very efficient. The time saved with the pre-built classes and formats are worth the steep learning curve. In larger projects, the flexibility and responsiveness offered by Bootstrap 5 make them invaluable. Whether you’re building a blog or a complex web application, the benefits of a UI framework can bring your development process to the next level. It will also reduce maintenance headaches, and allow you to focus on functionality rather than the design. While raw HTML and CSS certainly have allowed for amazing web applications to be built, the investment in a UI framework is worth the time and effort.