Frameworks & Preprocessors Overview — HTML & CSS Course

What you'll learn

You now know real, hand-written CSS — the essential foundation. This final Phase 6 module surveys the wider ecosystem: the frameworks and preprocessors professionals use to move faster, so you know what they are and can choose your next step wisely.

By the end you'll be able to:

Explain what CSS frameworks offer and their trade-offs
Compare Bootstrap and Tailwind at a high level
Understand what a preprocessor like Sass adds
Choose what to learn after this course

CSS frameworks

A framework is a library of pre-written CSS that speeds up development. The trade-off is real: you gain speed and consistency, but take on a dependency and some file size, and you must learn the framework's way of doing things. Crucially, frameworks are much easier to learn because you understand the underlying CSS — they're a shortcut, not a replacement for fundamentals.

Bootstrap vs Tailwind

The two most popular represent two philosophies you met in Module 24:

	Bootstrap	Tailwind CSS
`Style`	Pre-built components	Utility classes
`You write`	<button class="btn btn-primary">	<button class="px-4 py-2 bg-blue-600">
`Look`	Recognisable default design	Fully custom — you compose it
`Best for`	Fast, conventional UIs	Bespoke designs, design systems

Note

This very site is built with Tailwind CSS — the utility classes you see throughout, like flex, gap-4, and rounded-2xl, are Tailwind. Every one of them maps to plain CSS you now understand, which is exactly why the fundamentals came first.

Preprocessors (Sass)

A preprocessor like Sass/SCSS extends CSS with features it lacks, then compiles down to normal CSS the browser understands. Its headline features are nesting (mirroring your HTML structure), variables and mixins (reusable chunks), and splitting styles into partials:

styles.scss

$brand: #6366f1;              // a Sass variable

.card {
  background: $brand;

  &:hover {                   // & = the parent selector
    background: darken($brand, 10%);
  }

  .title {                    // nesting mirrors your HTML
    font-weight: bold;
  }
}

Tip

Modern CSS has absorbed much of what made Sass essential — custom properties (Module 21) and now native nesting. Sass is still widely used in existing codebases and for its mixins and functions, but you need it far less than you used to. Learn it if a job calls for it.

What to learn next

You've reached the end of the language content — and you can build real, responsive, accessible websites. The single most valuable next step is JavaScript, the third pillar of the web, which adds interactivity: dynamic content, form handling, fetching data, and full applications. From there, front-end libraries like React open up.

Key idea

Order of operations for a front-end path: HTML & CSS (done!) → JavaScript → a framework like React. You've built the foundation everything else stands on — and unlike people who skip it, you actually understand how the web works underneath.

Recap & quick check

Key takeaways

Frameworks are pre-written CSS that trade some control and size for speed and consistency.
Bootstrap offers pre-built components; Tailwind offers utility classes you compose.
Preprocessors like Sass add nesting, variables, and mixins, then compile to plain CSS.
Modern CSS (custom properties, nesting) has reduced the need for Sass.
The best next step after HTML & CSS is JavaScript, then a framework like React.

Quick check

1. What is the main trade-off of using a CSS framework?

2. How does Tailwind differ from Bootstrap?

3. What does a CSS preprocessor like Sass do?

4. Why has modern CSS reduced the need for Sass?

5. What's the recommended next step after HTML & CSS?

That completes Phase 6 — you code and work like a professional! All that remains is to prove it. In Phase 7 you'll build complete, portfolio-ready websites. 🚀