📓 1.1.4.4 Introduction to Bootstrap
Even if you don't pursue a career in web design, you'll need to know enough about CSS to apply the correct classes to your code to integrate a designer's CSS. You'll also need to know how to make small changes to CSS as required by your project. This is why it's so important for both web developers and designers to understand CSS basics.
Additionally, you might want to create a website that looks nice without spending a lot of time designing the user interface. In that instance, front-end frameworks are very useful. In this lesson we'll learn what a front-end framework is, how they work, and we'll begin familiarizing ourselves with Bootstrap, one of the most popular front-end frameworks for design.
Front-End Frameworks
When we use the term front-end in web development, we're referring to the portion of a website or application that's run in the browser. This includes menus, navbars, links, and CSS designs. This is in contrast to back-end code, which doesn't run in the browser. A browser application can make a request to a server where back-end code is stored.
The front-end can also include business logic, especially if the application doesn't have a separate back-end (such as a database). The term framework refers to a foundation of pre-built tools, software, code, and other resources we can use to create a project more easily than if we created it from scratch.
Front-end frameworks are pre-built code that assist us in creating the front-end of our website. There are frameworks more focused on design like Bootstrap, which we'll discuss in a moment. There are also frameworks that are focused on JavaScript code like React and Angular.
Bootstrap
Bootstrap is one of the most popular, widely used front-end design frameworks. It allows developers to quickly set up professional looking websites with minimal effort. It was originally built at Twitter to address inconsistencies in front-end design. It was later released to the public in 2011.
Bootstrap is essentially a big package containing all the code and CSS necessary to make a wide variety of commonly-used components like navigation bars, forms, headings, tables, buttons, and more. It also has built-in media queries so any Bootstrap elements we use in our own site will automatically re-style and resize themselves to best fit the user's viewport.
You can read more about Bootstrap on their website, here.
Websites Built with Bootstrap
Check out the following link to see some example sites built with Bootstrap:
We're going to start integrating Bootstrap into our sites, too. This will both further our knowledge of CSS, allow us to quickly create polished, professional-looking sites with far less effort. In the next lesson, we'll walk through how to download and install Bootstrap into a project.