Front-end frameworks are collections of guidelines and resources (JavaScript files, CSS files, etc.) to support the efficient development of websites.

These frameworks generally include JavaScript or CSS that handle common “boilerplate” scenarios (laying out a website in columns, responsive navigation, and so on).

For example, when using the popular framework Bootstrap, tabbed navigation can be added with the following markup:

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Messages</a></li>

In this example, no additional CSS is required to style this list element as a series of tabs; the framework simply handles this work for us.

Examples of popular frameworks include:

While these frameworks are powerful tools, keep in mind that they come and go: as a result, you should not plan on depending on a framework indefinitely.

Instead, ensure you have a fundamental understanding of what the framework provides and how you could write this “boilerplate” code for yourself.