CSS Project 3 — Community feature grid

Build a mobile-first card grid that adapts to available space and unpredictable content.

Companion notes: CSS notes.

Start your own copy

On GitHub, select Use this template → Create a new repository, choose whether it will be public or private, then clone your new repository and edit that copy.

Time-box: 75 minutes
Prerequisite: CSS Foundations Lesson 3 and CSS Projects 1–2
After-lesson milestone: you can choose grid for two-dimensional layout and preserve logical reading order.

Start

Open index.html and edit styles.css. Keep the DOM order exactly as written so visual and reading order remain aligned.

Acceptance checklist

• The outer section has a flexible maximum width and narrow-screen gutters.
• Cards form one column when space is tight and multiple columns when space permits.
• The grid uses flexible tracks; no card has a fixed width or height.
• A very long heading wraps without overlap or page-level horizontal scrolling.
• Card internals use flex only to keep the action link at the end.
• Gaps create layout spacing instead of repeated directional margins.
• Link hover and keyboard-focus states are both visible.
• CSS does not visually reorder the cards.

Finish

Test at 320px, 768px, and 1440px, then replace one description with three paragraphs. Confirm the grid still grows naturally.

Get your automatic project grade

1. Create your own copy from this template.

2. Read MASTERY.md, then create an attempt branch:

   git switch -c attempt/my-project

3. Build the project and run the same check GitHub uses:

   node --test test/mastery.test.mjs

4. Commit and push the attempt branch:

   git add .
   git commit -m "Complete project attempt"
   git push -u origin attempt/my-project

GitHub Actions grades every pushed attempt automatically. PASS — NAILED IT means every required check passed. REVISE — KEEP BUILDING means the run shows what to fix before you push again. You do not need the KODE Ń VIBE owner to review or start anything; the template's main branch stays quiet on purpose.

The free grading guide explains the result and its limits.