Unit 1 Overview

This unit establishes the foundation of modern CSS. You will learn how native CSS has evolved to replace preprocessors, master custom properties and math functions, explore modern color functions, build complete typographic systems, and use advanced selectors. These fundamentals prepare you for organizing, structuring, and building complex CSS in later units.

Part 1: Core Modern Features

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• CSS Preprocessing: Historical Context
  Learn why SASS and LESS were created, the problems they solved, and how modern CSS now covers those same needs.
• CSS Custom Properties and Math Functions
  Learn how to use CSS variables and math functions (calc(), min(), max(), clamp()) to make layouts and themes that are easier to control and update.
• Convert SASS/LESS to Native Nested CSS
  Practice rewriting SASS/LESS examples as native nested CSS, compare your version with the compiled output, and reflect on the differences.
• CSS Color Functions Interactive Demo
  Experiment with modern color functions (rgb(), hsl(), oklch(), color-mix()) and see how they work with custom properties to build flexible color themes.
• Custom Properties & Math Functions Practice
  Create a small responsive component that uses custom properties and math functions to drive fluid typography and spacing.

Part 2: Typography, Advanced Variables, and Modern Selectors

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• GitHub Portfolio Setup
  Set up a public GitHub portfolio site with GitHub Pages so you have a place to publish and share your coursework and projects.
• CSS Custom Properties Deep-Dive
  Go deeper into CSS variables; learn about scoping, inheritance, fallbacks, and theming patterns that make large stylesheets easier to manage.
• Typography Complete
  Learn how to design a complete typography system (fonts, scale, measure, rhythm, responsiveness) and manage it with custom properties.
• Typography Implementation
  Apply a modular scale, measure, and vertical rhythm to build a consistent, responsive typography system for a page.
• Modern Selectors and Specificity
  Explore modern selectors (:has(), :is(), :where(), :not()), how they affect specificity and the cascade, and when to use them.
• Refactor CSS Using Modern Selectors
  Refactor provided CSS using modern selectors to simplify rules and reduce specificity conflicts.
• Logical Properties and Writing Modes
  Learn logical properties (margin-inline, padding-block, etc.) and how they support layouts that work in both left-to-right and right-to-left writing modes.