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.
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.
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.
By 2013 approximately 1.6% of the million most popular websites were using Bootstrap. In 2016 15.7% of the top one million sites are powered by Bootstrap.
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, headers, tables, buttons, and more. It's even responsive! It has media queries built right in, so any Bootstrap elements we use in our own site will automatically re-style and resize themselves to best fit the user's viewport. Pretty cool, right?
You can read more about Bootstrap on their website, here.
But doesn't this mean all these websites look the same if they're all using the same framework? That's rather boring, right? Well, this isn't necessarily the case. 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.
Front-End: The portion of a website or application that is in the browser.
Framework: 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: Pre-built code that assists us in creating an application that runs in the browser.
Bootstrap: One of the most widely-used free front-end frameworks.