🎨 CSS Fundamentals — 30 Day Learning Lab

Learn, practice, and build with CSS. Thirty days of focused, hands-on exercises that take you from the very basics of styling to layouts, motion, and responsive design — one small project at a time.

This is a Web 102 CSS Lab from CodeNoJutsu Lab: short, practical, and beginner-friendly. No fluff, no walls of theory — code every single day.

🎯 Learning Objectives

By the end of this lab you will be able to:

• Write and connect CSS using selectors, colors, units, and the box model.
• Build real layouts with Flexbox and CSS Grid.
• Add typography, backgrounds, transitions, transforms, and animations.
• Combine everything into complete pages (profile card, gallery, portfolio, and more).
• Follow a guided Responsive Web Design practice track (Days 22–30) based on freeCodeCamp projects.
• Read and understand any beginner-level CSS codebase.

🥷 Lab Information

Domain	Web
Level	101 — Beginner
Topic	CSS Fundamentals
Type	Lab
Duration	30 days
Prerequisites	Basic HTML

🗺️ 30-Day Learning Path

Days 1–5 — CSS Foundations

Day 1 · CSS Fundamentals · Day 2 · Colors & Units · Day 3 · CSS Selectors · Day 4 · The Box Model · Day 5 · Sizing & Dimensions

Days 6–7 — Mini Projects

Day 6 · Profile Card · Day 7 · Image Gallery

Days 8–12 — Layout

Day 8 · CSS Positioning · Day 9 · Flexbox Fundamentals · Day 10 · Advanced Flexbox · Day 11 · CSS Grid Fundamentals · Day 12 · Advanced CSS Grid

Days 13–16 — Practical CSS

Day 13 · Flexbox Layout Project · Day 14 · CSS Grid Layout Project · Day 15 · CSS Typography · Day 16 · CSS Backgrounds

Days 17–19 — Motion

Day 17 · CSS Transitions · Day 18 · CSS Transforms · Day 19 · CSS Animations

Days 20–21 — Projects

Day 20 · Portfolio Homepage · Day 21 · Animated Homepage

Days 22–30 — Responsive Web Design

Guided projects based on the freeCodeCamp Responsive Web Design certification: Day 22 · Café Menu · Day 23 · Colored Markers · Day 24 · Registration Form · Day 25 · Rothko Painting · Day 26 · Photo Gallery · Day 27 · Nutrition Label · Day 28 · Accessible Quiz · Day 29 · Balance Sheet · Day 30 · Cat Painting

🌱 Repository Structure

The lab is organized by branches — one branch per day.

web102-css-fundamentals-lab
│
├── main              → this README (overview & roadmap)
├── day-01            → Day 1 exercise
├── day-02            → Day 2 exercise
├── ...
├── day-30            → Day 30 exercise
│
└── solution          → complete reference implementation for all 30 days

Each day branch contains its own README.md with the objective, concepts, practice, requirements, hints, and a completion checklist.

🔀 Branches

main
│
├── day-01
├── day-02
├── ...
├── day-30
│
└── solution

There are 32 branches in total. Each daily branch is self-contained — it only contains that day's exercise, so you can work at your own pace without carrying previous days around.

🚀 Getting Started

1. Install a modern browser (Chrome, Firefox, Safari, or Edge).
2. Install VS Code — or any editor you like.
3. Clone this repository and switch to Day 1:

git clone https://github.com/CodeNoJutsu-Lab/web102-css-fundamentals-lab.git
cd web102-css-fundamentals-lab

git checkout day-01

4. Read README.md inside the branch and follow the exercise.
5. Move to the next day when the checklist is ticked:

git checkout day-02

6. Need a reference? Compare your work with the solution branch (start with its SOLUTIONS.md index):

git checkout solution

🛠️ Tools

• Any modern web browser (with DevTools)
• VS Code or your favorite editor
• The built-in browser preview is enough — no bundlers or frameworks needed

📚 Resources

• MDN Web Docs — CSS
• freeCodeCamp — Responsive Web Design
• CSS-Tricks
• W3C — Learn CSS

🥋 CodeNoJutsu Lab

A public learning ecosystem for practical computer science.

Learn. Practice. Build. Repeat.