Mark Pascual

Frameworks Work For You

06 Oct 2022

Bootstrap 5 logo

Who needs frameworks?

Basic knowledge of HTML and CSS give the power to create trivial web UI ideas into real browser content. However, making web pages that are pleasant requires a deeper knowledge of the building blocks of UI design. Because of this, it can be challenging to create mock web pages that are simple and pleasing to the eye.

A framework like Bootstrap allows web developers to easily implement web designs that are modern and provide great functionality to web page users. In Bootstrap, web pages are designed with mobile environments in mind making content viewable on all screen sizes. A simple example of the mobile-first approach working in Bootstrap is seen with the grid system where simple columns of a row can stack on one another past certain breakpoints. Instead of worrying about the different viewports and the sizing, Bootstrap allows developers to simply apply different classes to elements for different displays.

Initial Thoughts

Learning HTML and CSS to design web pages is not as cut and paste as it may seem. Creating text is simple, however, working with divs and getting elements to align properly is not. Using the Bootstrap 5 framework made development of simple web pages easier. Although most of what was done was copy and pasted, with enough practice recreating mock websites I started to understand what the many Bootstrap classes meant. After working with Bootstrap to develop simple mock web pages, I came to understand the basic web page formula with Bootstrap.

  1. Create a navigation bar with a logo and site essentials in an unordered list
  2. Set a background and add text content if necessary
  3. Create a footer with useful closing information for a user

Future Bootstrap Use

In the future, I hope to develop a site with Bootstrap. I am not a front-end-developer and Bootstrap provides the tools to create profesional looking web pages. Even if Bootstrap is not used in future projects, I know that I can still use Bootstrap to quickly create a simple mock up design for a final design.