A Good Foundation is a Good Framework

Making a good website is not as easy as it may seem. Simply learning html and css will only take you so far. Taking your website to the next level requires a new foundation, one built upon framework. A UI Frameworks allows you to further advance your ability to make websites by allowing you to make responsive website layouts by further expanding on HTML. The UI Framework that I’ll be expanding on is Bootstrap.

What is Bootstrap?

“Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.”

Simply put, adding bootstrap to a webpage allows you to benefit from better customization and organization of webpages by improving on webpage specific structures like navigation bars and footers. Currently there are 5 iterations of Bootstrap available to use. Bootstrap is a very powerful tool when one has a good understanding of how the framework functions. Evident by some of the beautiful websites built with it.

For my ICS 314 Class I had the opportunity to learn Bootstrap 5 to further my web development skills.

How was learning Bootstrap?

The difficulty of learning Bootstrap is similar to the difficulty of learning a new language. Having learned HTML and CSS prior to learning bootstrap, I was under the impression it was similar to adding on addition functions to HTML. It changes how you write HTML and format HTML entirely. Your code must be structured very specifically to get your desired results. You must think about how the code effectively changes the webpage itself. Formatting your code has immediate and sometimes huge effects on how your website looks. I spent a great deal of time trying to fix my website as my formatting was wrong. The Grid System is one of the cornerstones of formatting your bootstrap website and is a great example of why having the correct formatting can make or break the website.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

If you were to misplace or change certain properties of this structure, it will most certainly warp your website in undesirable ways. However when used properly it allows your website to be formatted in ways that HTML and CSS alone would be much more difficult to achieve. The fundamentals of this layout system is one of the key points that makes Bootstrap one of the most popular Frameworks of the internet.

Despite the difficulties of learning the framework, having access to this knowledge is one of the most powerful tools you can have in your kit as a web developer. I had a lot of fun learning this Framework and I believe that anyone interested in web design can learn it as well.