CSS Mastery

Web Styling Curriculum · Beginner to Confident

A structured 12-week programme for students who have completed Tech Minds HTML Mastery (or equivalent foundational assessment). Go from writing your very first external CSS rule to engineering a polished, mobile-first, animated multi-page website using Flexbox and CSS Grid.

12Weeks

5Stages

55+Lessons

8Projects

1Prerequisite (HTML)

Download Official 2026 Curriculum PDF

Core Topics: Selectors & Specificity · Box Model & DevTools · Typography & Colour · Flexbox · CSS Grid · Mobile-First Responsive Design · Transitions & Animations · 4-Page Styled Capstone

---

Learning Pathway: Programme Overview

Stage	Focus	Duration	Level	Prerequisite
Stage 1	CSS Foundations — selectors, syntax, cascade	2 weeks (Weeks 1–2)	Beginner	HTML Mastery
Stage 2	The Box Model, Spacing, Display & Overflow	2 weeks (Weeks 3–4)	Beginner	Stage 1
Stage 3	Typography, Colour Systems & Backgrounds	2 weeks (Weeks 5–6)	Intermediate	Stage 2
Stage 4	Modern Layout — Flexbox & CSS Grid	3 weeks (Weeks 7–9)	Intermediate	Stage 3
Stage 5	Responsive Design, Animations & Capstone	3 weeks (Weeks 10–12)	Advanced	Stage 4

---

Curriculum Rationale: Key Decisions Explained

Question	Tech Minds Engineering Rationale
Why CSS after HTML?	CSS has no meaning without clean semantic HTML to style. Students who jump into CSS without solid HTML foundations write fragile guesswork code they cannot debug. The Tech Minds Web Engineering track is sequential by design — each course builds directly on the last.
Why dedicate 3 full weeks to layout?	Flexbox and CSS Grid are the layout skills employers test most heavily in junior frontend interviews. Spending three dedicated weeks ensures you build genuine architectural confidence — not vague copy-paste familiarity — with both 1D and 2D layout engines.
Why teach mobile-first?	Over 60% of web traffic worldwide (and over 80% across Nigeria) comes from mobile phones. Writing base styles for small screens first and scaling up with @media (min-width: ...) is the global industry standard. Students who learn desktop-first have to unlearn bad habits later; we build the right instinct from Day 1.
What comes after this course?	CSS Mastery feeds directly into JavaScript Fundamentals (14 Weeks) — the third course in our full-stack engineering sequence. Graduates of CSS Mastery are ready to add dynamic DOM interactivity and live API data to the responsive interfaces they can now build and style.

---

Stage 1: CSS Foundations (Weeks 1 – 2 · Beginner)

How the browser parses CSS, connecting external stylesheets, and mastering the Cascade & Specificity.

Stage 1 assumes you can write clean HTML5. CSS is introduced from first principles — how rulesets are structured, why professional developers separate concerns into external .css files, and the exact mathematical rules browsers use to decide which style wins when two rules target the same element.

Week 1 — Introduction to CSS (5 hrs)

1. 01: What is CSS (Cascading Style Sheets) and how does it separate presentation from HTML structure?
2. 02: Three ways to apply CSS: inline (style="..."), internal (<style>), and external (.css file)
3. 03: Why external stylesheets are the engineering standard (reusability across pages, caching, clean markup)
4. 04: Linking a CSS file inside <head> using <link rel="stylesheet" href="styles/main.css">
5. 05: CSS syntax anatomy: selectors, curly braces, declarations, properties, colons, values, and semicolons
6. 06: Writing your first CSS rules — styling color, background-color, font-family, and font-size

Week 1 Project: Take your Week 1 'About Me' HTML page from HTML Mastery and transform its typography, colours, and spacing using a cleanly linked external styles.css stylesheet.

Week 2 — Selectors & Specificity (6 hrs)

1. 01: Element (type) selectors — targeting semantic tags directly (body, h1, p, a)
2. 02: Class selectors (.card, .btn-primary) — creating reusable, composable styles across elements
3. 03: ID selectors (#main-header) — unique hooks and why classes are preferred over IDs for styling
4. 04: Grouping selectors (h1, h2, h3) — sharing rules across multiple selectors without repetition
5. 05: Combinators: descendant selectors (.card p) vs direct child selectors (.nav-list > li)
6. 06: The Cascade & Specificity — source order, inheritance, and why .highlight beats p while #hero beats .highlight (and why !important is an anti-pattern)

Week 2 Project: Build and style a long-form technical article page using element, reusable .class, descendant/child combinator, and ID selectors purposefully — with zero inline styles and zero !important hacks.

Stage 1 Code Reference & Annotated Snippets

Linking an External Stylesheet Cleanly

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tech Minds CSS Foundations</title>
  <link rel="stylesheet" href="styles/main.css" />
</head>

Specificity Calculation Table ((Inline, ID, Class, Element))

When two CSS rules set the same property on the same element, the browser compares their 4-column specificity weight from left to right:

Selector Example	Inline	ID (#)	Class / Pseudo-class (., :)	Element (tag)	Total Score	Winner Rank
p	0	0	0	1	(0, 0, 0, 1)	Lowest (Base default)
article p	0	0	0	2	(0, 0, 0, 2)	Beats p
.lead-text	0	0	1	0	(0, 0, 1, 0)	Beats any number of element tags
.card .lead-text:hover	0	0	3	0	(0, 0, 3, 0)	Beats single .lead-text
#site-banner	0	1	0	0	(0, 1, 0, 0)	Beats any number of classes
style="color: red"	1	0	0	0	(1, 0, 0, 0)	Avoid inline styles in production!

/* styles/main.css — Clean Selector Architecture & Custom Properties */
:root {
  --brand-navy: #0b3558;
  --brand-blue: #0088cc;
  --surface-soft: #f8fafc;
  --text-main: #1e293b;
}

/* 1. Element selector: base defaults inherited across the document */
body {
  color: var(--text-main);
  background-color: #ffffff;
}

/* 2. Grouping selector: shared heading colour */
h1,
h2,
h3 {
  color: var(--brand-navy);
}

/* 3. Reusable class selectors */
.callout-box {
  background-color: var(--surface-soft);
  border-left: 4px solid var(--brand-blue);
}

/* 4. Direct child combinator (>): targets ONLY top-level list items, not nested sub-lists */
.nav-menu > li {
  list-style: none;
}

---

Stage 2: The Box Model & Spacing (Weeks 3 – 4 · Beginner)

Understanding how every element occupies physical space on screen and inspecting layouts in Chrome DevTools.

The CSS Box Model is the single most important mental model in frontend styling. Every HTML tag on a page renders as a rectangular box composed of four concentric layers: content, padding, border, and margin. Once you master box-sizing: border-box, margin collapsing, display modes, and Chrome DevTools inspection, mysterious spacing bugs disappear forever.

Week 3 — The Box Model (6 hrs)

1. 01: Content, padding, border, and margin — visualising the four concentric layers of every element
2. 02: How width and height interact with padding and border under default content-box
3. 03: box-sizing: border-box — the universal modern reset every CSS project starts with
4. 04: Live-debugging spacing using the Box Model diagram inside Chrome DevTools (F12 -> Elements -> Computed)
5. 05: Clockwise shorthand values: margin: 16px 24px (vertical / horizontal) vs margin: 10px 20px 15px 20px (top / right / bottom / left) and centring blocks with margin-inline: auto
6. 06: Vertical collapsing margins — why adjacent top and bottom margins merge (rather than add) and how to avoid the trap

Week 3 Project: Build a crisp Course / Product Card Component featuring an image, category badge, title, description, and call-to-action button with pixel-accurate padding, borders, and margins verified in Chrome DevTools.

Week 4 — Display, Visibility & Overflow (5 hrs)

1. 01: Default flow behaviour: block (<div>, <p>, <section>) vs inline (<span>, <a>, <strong>) vs inline-block
2. 02: Changing element flow with display (e.g., making an <a> tag display: inline-block so vertical padding works properly!)
3. 03: visibility: hidden (hides visually while preserving layout space) vs display: none (removes element from layout flow completely)
4. 04: Controlling content that exceeds its container: overflow: hidden, overflow: auto, and overflow-x: auto (for wide tables on mobile!)
5. 05: Mastering border (1px solid #e2e8f0) and directional borders (border-bottom)
6. 06: border-radius — rounded card corners (12px), pill badges (9999px), and perfect circles (50% on square avatars)

Week 4 Project: Build a Developer Profile Card featuring a circular avatar (border-radius: 50%), pill skill tags (display: inline-block), rounded card container with overflow: hidden, and clean spacing.

Stage 2 Code Reference & Annotated Snippets

Visualising the CSS Box Model (box-sizing: border-box)

  ┌─────────────────────────── Margin (Transparent Outer Space) ───────────────────────────┐
  │  ┌──────────────────────── Border (Visible Frame — Included in Width!) ─────────────┐  │
  │  │  ┌───────────────────── Padding (Breathing Room Inside Background) ───────────┐  │  │
  │  │  │                                                                            │  │  │
  │  │  │                        CONTENT AREA (Text / Image)                         │  │  │
  │  │  │                                                                            │  │  │
  │  │  └────────────────────────────────────────────────────────────────────────────┘  │  │
  │  └──────────────────────────────────────────────────────────────────────────────────┘  │
  └─────────────────────────◄─────── width: 340px (with border-box) ───────►───────────────┘

Universal border-box Reset & Profile Card Component

/* Always place this universal box-sizing reset at the top of every CSS file! */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.profile-card {
  width: 100%;
  max-width: 340px;
  margin: 32px auto;          /* 32px top/bottom, horizontally centred */
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;           /* Clips top banner image cleanly to the 16px corners */
  box-shadow: 0 10px 25px rgba(11, 53, 88, 0.08);
}

.profile-card__body {
  padding: 24px;              /* Inner breathing room on all 4 sides */
  text-align: center;
}

.profile-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;         /* Square width/height + 50% radius = perfect circle */
  border: 4px solid #ffffff;
  margin-top: -60px;          /* Pulls avatar slightly over the card banner */
  object-fit: cover;
}

.profile-card__badge {
  display: inline-block;      /* Allows vertical padding & margin on inline <span> / <a> */
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 9999px;      /* Pill shape */
  background-color: rgba(0, 136, 204, 0.12);
  color: #0088cc;
  font-weight: 600;
}

---

Stage 3: Typography & Colour (Weeks 5 – 6 · Intermediate)

Making text effortless to read and applying modern colour systems, gradients, and hero backgrounds.

85% of a website is typography and colour harmony. Stage 3 teaches you how to load custom Google Fonts efficiently, scale typography accessibly with rem units instead of rigid px, ensure strong contrast ratios, and construct dramatic full-bleed hero sections with CSS gradients.

Week 5 — Typography (5 hrs)

1. 01: font-family — web-safe font stacks (system-ui, -apple-system, sans-serif) and fallback chains
2. 02: Importing and pairing Google Fonts cleanly using <link rel="preconnect"> for fast loading
3. 03: Sizing units compared: px (fixed) vs em (relative to parent — compounds!) vs rem (relative to root <html> — predictable & accessible!)
4. 04: font-weight (400–800), font-style, and font-variant
5. 05: Vertical rhythm and readability: unitless line-height (1.6 for body copy, 1.2 for headings), letter-spacing, and max-width: 65ch
6. 06: text-align, text-decoration (customising link underlines with text-underline-offset), text-transform, and subtle text-shadow

Week 5 Project: Design and style a Long-Form Editorial Blog Post pairing two Google Fonts (heading + body), rem type scale, comfortable 1.65 line-height, 65ch reading measure, styled <blockquote>, and code blocks.

Week 6 — Colour & Backgrounds (5 hrs)

1. 01: CSS colour formats mastered: named colours, Hex (#0b3558), rgb(), and hsl() (why hsl() makes creating lighter/darker palette shades effortless!)
2. 02: Alpha transparency with rgba() / hsla() / modern rgb(11 53 88 / 0.8) vs the element-wide opacity property
3. 03: background-color and background-image: url(...) (always provide a fallback background-color while images load on slow networks!)
4. 04: background-size: cover vs contain
5. 05: background-position: center and background-repeat: no-repeat
6. 06: CSS Gradients: linear-gradient() and radial-gradient() — including layering semi-transparent dark overlays on top of hero photos so white text remains 100% legible

Week 6 Project: Build a Full-Width Landing Page Hero Section combining a background photograph, a layered linear-gradient brand overlay, high-contrast headline typography, and dual call-to-action buttons.

Stage 3 Code Reference & Annotated Snippets

When to Use rem vs em vs px

Unit	Relative To	Best Use Case
rem	Root <html> font size (1rem = 16px default)	Font sizes, vertical spacing, container max-widths. Respects user browser zoom & accessibility font preferences!
em	Current element's own font-size	Button padding (padding: 0.6em 1.2em) or letter-spacing (0.04em) that should scale proportionally with that element's text.
px	Physical CSS pixel	Hairline borders (1px, 2px), subtle shadows, and media-query thresholds.

Google Fonts Pairing + Layered Gradient Hero Section

/* Base root typography: 1rem = 16px (default browser root) */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: hsl(215, 28%, 17%);
}

.article-prose {
  max-width: 65ch;            /* Ideal 60-70 characters per line for effortless reading */
  margin-inline: auto;
}

/* Layered linear-gradient OVER a background image ensures crisp white text contrast! */
.hero-banner {
  min-height: 75vh;
  padding: 4rem 1.5rem;
  background-color: #0b3558;  /* Instant fallback if mobile network is slow */
  background-image:
    linear-gradient(
      135deg,
      rgba(11, 53, 88, 0.90) 0%,
      rgba(0, 136, 204, 0.72) 100%
    ),
    url('../images/campus-collaborate.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}

.hero-banner__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7dd3fc;
}

.hero-banner__title {
  font-size: 2.5rem;
  line-height: 1.15;
  margin-top: 0.75rem;
  max-width: 20ch;
}

---

Stage 4: Layout — Flexbox & CSS Grid (Weeks 7 – 9 · Intermediate)

Engineering modern one-dimensional and two-dimensional page layouts with complete confidence.

Layout is where CSS becomes an architectural superpower — and where self-taught beginners who skip fundamentals get stuck. Stage 4 devotes three full weeks to mastering Flexbox (1D row or column alignment) and CSS Grid (2D rows and columns simultaneously).

Week 7 — Flexbox — Part 1 (Container Axes & Alignment) (6 hrs)

1. 01: What is Flexbox and why it permanently replaced fragile float and clearfix hacks
2. 02: display: flex — creating a flex formatting context (Flex Container vs direct child Flex Items)
3. 03: flex-direction: row vs column — understanding how the Main Axis and Cross Axis rotate!
4. 04: justify-content — distributing space along the Main Axis (flex-start, center, space-between, space-around, space-evenly)
5. 05: align-items — aligning items along the Cross Axis (stretch, center, flex-start, baseline)
6. 06: The gap property (gap: 1.5rem) — clean gutter spacing between flex items without messy margin-right hacks

Week 7 Project: Build a Horizontal Navigation Bar (logo left, links centred/right, CTA button aligned) and a Vertically & Horizontally Centred Hero Section powered entirely by Flexbox.

Week 8 — Flexbox — Part 2 (Wrapping & Flex Item Sizing) (6 hrs)

1. 01: flex-wrap: wrap — allowing flex items to flow gracefully onto new rows when space runs tight
2. 02: Understanding item flexibility: flex-grow, flex-shrink, and flex-basis
3. 03: Mastering the flex shorthand (flex: 1, flex: 0 0 280px, flex: 1 1 300px)
4. 04: align-self — overriding Cross-Axis alignment for a single item (e.g., pushing a card's button to the bottom with margin-top: auto)
5. 05: order — visually reordering flex items (and why DOM tab order for keyboard accessibility must stay logical!)
6. 06: Building real-world equal-height card rows with Flexbox

Week 8 Project: Build a 3-Column Wrapping Card Layout (Services, Portfolio Projects, or Team Members) where cards stay equal height and buttons align cleanly along the bottom edge regardless of text length.

Week 9 — CSS Grid (7 hrs)

1. 01: display: grid — activating two-dimensional row-and-column layout control
2. 02: Defining tracks with grid-template-columns and grid-template-rows (plus repeat())
3. 03: The fractional fr unit (1fr 2fr 1fr) and intrinsic responsive grids with repeat(auto-fit, minmax(280px, 1fr))
4. 04: Grid gutters with gap (row-gap and column-gap)
5. 05: Spanning items across multiple tracks using grid-column: 1 / -1, grid-column: span 2, grid-row, and named grid-template-areas
6. 06: Flexbox vs CSS Grid — how professional frontend engineers combine both inside the same page

Week 9 Project: Build a Complete Dashboard / Documentation Page Layout featuring a full-width header, sticky sidebar navigation, multi-card main content grid, featured spanning banner, and full-width footer using CSS Grid.

Stage 4 Code Reference & Annotated Snippets

Decision Matrix: Flexbox vs CSS Grid

Question / Scenario	Choose Flexbox (display: flex)	Choose CSS Grid (display: grid)
Dimensionality	1D — Laying items out in a single row OR a single column.	2D — Controlling both rows AND columns at the exact same time.
Sizing Philosophy	Content-Out: Let each item's intrinsic content size dictate spacing (e.g., nav links, pill tags, icon + label).	Layout-In: Define strict column tracks first and place items cleanly into those tracks.
Classic Examples	Navbar (space-between), button with icon, social icon strip, pushing a card footer to the bottom (flex-direction: column).	Overall page skeleton, 3-column portfolio gallery, bento grids, pricing tables.

1. Flexbox Navbar + Equal-Height Card Internals

/* Flexbox Pattern A: Classic Navigation Header */
.site-header {
  display: flex;
  justify-content: space-between; /* Logo on left, nav links on right */
  align-items: center;            /* Vertically centred on cross-axis */
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid #e2e8f0;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

/* Flexbox Pattern B: Inside a Card so the CTA Button Always Sits at the Bottom */
.service-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.service-card__cta {
  margin-top: auto;   /* Absorbs leftover vertical space, pinning button to bottom! */
  align-self: flex-start;
  padding-top: 1.25rem;
}

2. Auto-Responsive Card Grid & Full-Page Holy-Grail CSS Grid

/* CSS Grid Pattern A: Zero-Media-Query Responsive Card Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}

/* CSS Grid Pattern B: Named Page Layout (Header, Sidebar, Main, Footer) */
.app-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.app-header  { grid-area: header; }
.app-sidebar { grid-area: sidebar; }
.app-main    { grid-area: main; padding: 2rem; }
.app-footer  { grid-area: footer; }

---

Stage 5: Responsive Design, Transitions & Capstone (Weeks 10 – 12 · Advanced)

Making websites shine on every screen from 320px smartphones to 1440px monitors, adding tactile micro-interactions, and shipping your 4-page Capstone.

Over half of global traffic — and the vast majority of Nigerian users — will open your portfolio on a smartphone first. Stage 5 combines mobile-first media queries, fluid clamp() typography, responsive media, buttery-smooth 60fps CSS transitions/animations, and a full 4-page Capstone build.

Week 10 — Responsive Design & Media Queries (6 hrs)

1. 01: What is responsive web design? Why Mobile-First (min-width) produces cleaner, smaller CSS than Desktop-First (max-width)
2. 02: Why <meta name="viewport" content="width=device-width, initial-scale=1.0"> is mandatory for media queries to work on real phones
3. 03: Writing @media queries cleanly and testing live in Chrome DevTools Device Mode (Ctrl + Shift + M)
4. 04: Industry-standard breakpoints: 480px (large phone), 768px (tablet), 1024px (laptop), and 1280px (wide desktop)
5. 05: Fluid responsive typography and spacing using clamp(min, preferred, max)
6. 06: Responsive images and embeds: max-width: 100%, height: auto, aspect-ratio, and object-fit: cover

Week 10 Project: Refactor your Week 9 CSS Grid page layout to be 100% Mobile-First Responsive — stacking cleanly into a single touch-friendly column at 360px width, expanding at 768px, and displaying the full multi-column layout at 1024px+ with zero horizontal scrollbar.

Week 11 — Transitions, Hover Effects & Animations (6 hrs)

1. 01: CSS Transitions — creating smooth state changes instead of jarring instant jumps (and always placing transition on the base element, not :hover!)
2. 02: Controlling transition-property, transition-duration (150ms–300ms), transition-timing-function (ease-out, cubic-bezier), and transition-delay
3. 03: Interactive :hover and :focus-visible states for buttons, cards, and navigation links
4. 04: GPU-accelerated 2D transforms: transform: translateY(-4px), scale(1.03), rotate(), and skew()
5. 05: Multi-step CSS Animations using @keyframes (0% / 50% / 100%)
6. 06: animation-name, animation-duration, animation-iteration-count (infinite), animation-direction, and respecting user motion sensitivity (@media (prefers-reduced-motion: reduce))

Week 11 Project: Build an Interactive Showcase Component featuring a card with smooth hover elevation (translateY + shadow transition), accessible :focus-visible button transition, and a pure-CSS @keyframes loading spinner.

Week 12 — Capstone Project (6 sessions · 10 hrs)

1. 01: Design system planning — defining :root CSS custom properties for brand colours, Google Font pairs, spacing tokens, and container widths
2. 02: Building & styling the Home Page (index.html) — responsive header/nav, gradient/split hero, Flexbox/Grid feature highlights, and multi-column footer
3. 03: Building & styling the About Page (about.html) — responsive image-and-story split layout and equal-height team/milestone grid
4. 04: Building & styling the Services or Portfolio Page (services.html / portfolio.html) — interactive 3-column card grid with hover transitions and responsive comparison table
5. 05: Building & styling the Contact Page (contact.html) — styled form inputs (:focus & :invalid states) alongside contact cards/map embed
6. 06: Cross-device responsive audit — testing at 375px (Mobile), 768px (Tablet), and 1280px (Desktop), W3C CSS Validator check, and live deployment on GitHub Pages

Week 12 Capstone Deliverable: A complete, Mobile-First Responsive 4-Page Website styled cleanly with external CSS (custom properties, Flexbox, CSS Grid, fluid typography, and subtle transitions), deployed live on GitHub Pages and reviewed on Demo Day.

Stage 5 Code Reference & Annotated Snippets

Standard Breakpoint Reference

Target Device Tier	Mobile-First Media Query	Typical Layout Adaptation
Base CSS (No Query)	0px – 479px (Phones)	Single-column stack, compact 1rem–1.25rem horizontal padding, full-width buttons.
Large Mobile	@media (min-width: 480px)	2-column compact stats/badges, slightly wider card padding.
Tablet	@media (min-width: 768px)	2-column grids, horizontal navigation bar, side-by-side split sections.
Laptop / Desktop	@media (min-width: 1024px)	3-column grids, sidebar + main layouts, generous whitespace.
Wide Desktop	@media (min-width: 1280px)	Capped max-width: 1200px centred container so lines never stretch edge-to-edge.

Mobile-First Media Queries, Fluid clamp(), Hover Card & @keyframes Spinner

/* 1. Fluid Typography & Responsive Images */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.section-heading {
  /* Scales smoothly between 1.75rem (mobile) and 3rem (desktop) without jumps! */
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.15;
}

/* 2. Mobile-First Layout: 1 column on phones -> 2 on tablet -> 3 on desktop */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* 3. Interactive Card Lift & Accessible Button Transition */
.project-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  /* Define transition on BASE class so both hover-in AND hover-out animate smoothly */
  transition: transform 220ms ease-out, box-shadow 220ms ease-out;
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 53, 88, 0.12);
}

/* 4. Pure CSS @keyframes Loading Spinner */
.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0, 136, 204, 0.2);
  border-top-color: #0088cc;
  border-radius: 50%;
  animation: tm-spin 0.8s linear infinite;
}

@keyframes tm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Accessibility: Respect users who disable motion in OS settings */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

Assessment & Completion

In accordance with the Tech Minds 40/30/30 Evaluation Rubric, students are evaluated across three components:

Component	Description	Weight
Weekly Projects (×8)	Styled page or UI component built from scratch and pushed to GitHub each sprint	40%
Stage Assessments (×5)	Short quiz and live CSS DevTools code review at the end of each of the 5 stages	30%
Capstone Website	Fully responsive 4-page website (Home, About, Services/Portfolio, Contact) — mobile-first, animated, validated, and hosted on GitHub Pages	30%

---

Learning Outcomes: What Students Can Do on Completion

On completing CSS Mastery, you will be able to:

• [x] Write clean, maintainable CSS using external stylesheets, custom properties (--var), and well-structured class selectors
• [x] Explain and apply the CSS Box Model (box-sizing: border-box, padding, border, margin) and inspect computed styles in Chrome DevTools
• [x] Design readable typography hierarchies using Google Fonts, accessible rem units, fluid clamp(), and optimal line-height
• [x] Work fluently across all CSS colour systems (hex, rgb(), hsl(), alpha channels) and build layered gradient hero sections
• [x] Engineer any modern 1D or 2D interface layout confidently using Flexbox and CSS Grid
• [x] Write mobile-first @media (min-width: ...) rules so websites look effortless on phones, tablets, and wide monitors alike
• [x] Apply GPU-friendly CSS transitions, transforms, and @keyframes animations for polished micro-interactions
• [x] Build, audit, and deploy a complete, responsive 4-Page Styled Capstone Website publicly on GitHub Pages

---

Tools & Resources: Everything the Student Needs

Every tool required for CSS Mastery is 100% free:

Tool	Purpose	Cost
VS Code	Primary code editor for writing HTML and CSS	Free
Live Server	Auto-refreshes Chrome instantaneously on every CSS save	Free
Chrome DevTools	Inspect the Box Model, Flexbox/Grid overlays, computed styles, and mobile viewports	Built-in
Google Fonts (fonts.google.com)	Open-source web font library used throughout the typography stage	Free
W3C CSS Validator (jigsaw.w3.org/css-validator)	Verify CSS stylesheets for syntax errors and standards compliance	Free
GitHub Pages	Host and share your responsive Capstone Website publicly with a live HTTPS link	Free

---

Next Step in the Web & Full-Stack Track

You can now structure semantic HTML5 documents and style responsive, modern interfaces from scratch! Your next milestone is bringing your websites to life with programming logic, DOM manipulation, event handling, async/await, and live REST APIs in JavaScript Fundamentals (14 Weeks).