Lesson Thursday

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 one of the most popular front-end frameworks, Bootstrap.

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 the user actively interacts with. Things like the menus, navbars, links, and CSS designs. 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.

Therefore, front-end frameworks are pre-built code that assists us in creating the front-end of our website. That is, the CSS, designs, layouts, and portions the user interacts with.

Bootstrap

Bootstrap is one of the most popular, widely used front-end 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 front-end 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.

Websites Built with Bootstrap

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.

Terminology


  • Front-End: The portion of a website or application that the user actively interacts with. Things like the menus, navbars, links, and CSS designs.

  • 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 the front-end of our website. That is, the CSS, designs, layouts, and portions the user interacts with.

  • Bootstrap: One of the most widely-used free front-end frameworks.

Additional Resources