HTML and CSS

Introduction

At this point, you have written quite a bit of vanilla HTML and CSS, and learned many design techniques that you will continue to use as you grow as a developer. However, through your experiences, you have no doubt encountered a few popular CSS frameworks that promise to make writing CSS more streamlined and less tedious. Sound tempting?

Frameworks like Twitter Bootstrap and Zurb Foundation do a lot of the heavy lifting of packaging up commonly used CSS code, even icons and interactions (like menu dropdowns), for you. They are designed to abstract away the process of coding intuitive, reusable, and responsive elements by creating them for you, and giving you the tools to inject these styles into your HTML elements directly through class name keywords. All you have to do is understand how they expect you to lay out your site and which classes they use to designate these particular batches of styles.

Frameworks are great for rapidly producing sites with interfaces that end-users can easily interact with. However, once you’ve taken a tour through some of the more popular ones, like Bootstrap, you’ll start looking at every site you see (especially startup ones) and notice an awful lot of similarities. From a learning perspective, the prospect of not having to keep practicing writing vanilla CSS causes too many new developers to jump into learning frameworks too early in their education. As a result, these developers simply do not get enough CSS practice under their belts to solidify the fundamentals of this very important language.

Additionally, the process of overriding a framework’s styling or debugging style issues on your page becomes very difficult if you haven’t really mastered CSS fundamentals. It is imperative to understand what a framework is doing “under the hood” so you are equipped to handle these issues later (and trust us, you will).

For these reasons, this lesson is designed to teach you about frameworks and what their role is, but we strongly recommend that you continue to focus on the fundamentals of CSS as you continue through the curriculum.

Doing so will make you a better developer in the end.

Learning Outcomes

• What are CSS frameworks?
• How do frameworks actually work?
• How do you interact with the framework to get the look you want?
• What is Twitter Bootstrap?
• What is Zurb Foundation?
• What is TailwindCSS?
• What other frameworks can you find out there?
• What are the disadvantages of using frameworks?

Assignment

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

• Bootstrap Docs
• Foundation Docs
• TailwindCSS Docs