libretech/code-crispies
1
0
Fork 0
Code Issues Pull Requests Activity
Files
main
code-crispies/LESSON_EVALUATION.md
Michael Czechowski fb33930328 feat: restructure learning path with new modules and enhanced explanations 
- Add CSS Colors, Typography, Advanced Selectors, and Grid modules
- Remove deprecated HTML Marquee module from all languages
- Remove redundant div & span lesson from HTML Block & Inline
- Move SVG module from HTML to CSS section
- Enhance first lessons with comprehensive explanations:
  - Flexbox: historical context, axes concept
  - Colors: named colors, background-color explained
  - Grid: comparison to Flexbox, key properties
- Swap header logo highlight (CRISPIES instead of CODE)
- Use English fallbacks for new modules in non-EN languages
- Fix test to include 'playground' mode

New path: 19 modules (~78 lessons) vs previous 16 modules (62 lessons)

🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-13 20:32:45 +01:00

31 KiB
Raw Permalink Blame History

Code Crispies Lesson Evaluation

This document evaluates all lessons using the 5-question framework to identify gaps, improvements needed, and restructuring recommendations.

Evaluation Framework

The 5 Questions

  1. Q1: PURPOSE - What concept does this teach and why does a student need it?
  2. Q2: PREREQUISITES - Does it assume knowledge already taught?
  3. Q3: TASK CLARITY - Can students complete it without guessing?
  4. Q4: EXPLANATION DEPTH - Is depth appropriate for position?
  5. Q5: PROGRESSION - Does it prepare for the next lesson?

Scoring

  • 5 = Excellent
  • 4 = Good
  • 3 = Adequate
  • 2 = Needs Improvement
  • 1 = Requires Rewrite

Module 1: Welcome (00-welcome.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Get Started 5 5 5 5 5 25/25 Keep
Overview 5 5 5 5 5 25/25 Keep
Playground 5 5 5 5 5 25/25 Keep

Module Summary: Excellent onboarding. Comprehensive explanation of platform, clear navigation guidance.

Issues: None

Recommendation: Keep as-is

Module 2: HTML Block & Inline (20-html-elements.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Block vs Inline 4 5 5 3 5 22/25 Enhance
Semantic Tags 4 5 4 3 5 21/25 Enhance
div & span 2 5 5 2 4 18/25 REMOVE

Module Summary: Good content but lesson 3 (div & span) is redundant with lesson 1.

Issues:

  • Q4: First lesson (Block vs Inline) needs more historical context about document flow
  • Q4: Missing explanation of why block/inline matters for layout
  • Q1: Lesson 3 (div & span) is redundant - block/inline already covered in lesson 1

Recommendation:

  • REMOVE lesson 3 (div & span) - redundant to lesson 1
  • Enhance lesson 1 with comprehensive explanation (~200 words)
  • Add "why" context: Why does HTML distinguish block from inline?

Module 3: HTML Forms - Basics (21-html-forms-basic.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Form Structure 5 5 5 4 5 24/25 Keep
Input Types 5 5 5 4 5 24/25 Keep
Submit Button 5 5 5 3 5 23/25 Minor edit

Module Summary: Well-structured with good accessibility focus (mentions for attribute).

Issues:

  • Q4: First lesson could have more context about why forms exist, HTTP form submission
  • Q4: Depth is similar across all lessons instead of progressive reduction

Recommendation:

  • Add comprehensive intro to lesson 1 about forms' role in web applications
  • Reduce depth in lesson 3 (Submit Button)

Module 4: HTML Validation (22-html-forms-validation.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Required Fields 5 5 5 4 5 24/25 Keep
Constraints 5 5 5 4 5 24/25 Keep
Full Form 5 5 4 3 5 22/25 Minor edit

Module Summary: Good coverage of native validation attributes.

Issues:

  • Q3: Full Form lesson task says "Add required attributes, proper input types, and validation constraints" - somewhat vague
  • Q4: Difficulty marked as "intermediate" but content is beginner-friendly

Recommendation:

  • Clarify task in lesson 3: specify exactly what to add
  • Change difficulty to "beginner"

Module 5: HTML Details & Summary (23-html-details-summary.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
First Widget 5 5 5 4 5 24/25 Keep
Pre-expanded 5 5 5 3 5 23/25 Keep
FAQ Accordion 5 5 5 4 4 23/25 Keep

Module Summary: Excellent demonstration of native HTML interactivity.

Issues:

  • Q4: First lesson could mention historical context (before details, needed JS)
  • Q5: FAQ Accordion is a good capstone but doesn't connect to next module

Recommendation:

  • Add "why" context to lesson 1: "Before HTML5, collapsible content required JavaScript"

Module 6: HTML Progress & Meter (24-html-progress-meter.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Progress Bars 5 5 5 4 5 24/25 Keep
Indeterminate 5 5 5 3 5 23/25 Keep
Meter Gauges 5 5 5 4 4 23/25 Keep

Module Summary: Good coverage of native visualization elements.

Issues:

  • Q4: Meter lesson has many attributes - could be overwhelming

Recommendation: Keep as-is

Module 7: HTML Tables (30-html-tables.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Basic Table 5 5 5 4 5 24/25 Keep
Head & Body 5 5 5 4 5 24/25 Keep
Complete Table 5 5 5 3 4 22/25 Minor edit

Module Summary: Good semantic table structure teaching.

Issues:

  • Q4: First lesson could explain when to use tables (tabular data, not layout!)
  • Q4: Progressive depth reduction works well

Recommendation:

  • Add context to lesson 1: "Tables are for tabular data, not page layout"

Module 8: HTML SVG (32-html-svg.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Drawing Circles 5 5 5 4 5 24/25 Keep
Rectangles & Lines 5 5 5 3 5 23/25 Keep
Multiple Shapes 5 5 5 3 3 21/25 Review

Module Summary: Good intro to SVG but positioned oddly in HTML section.

Issues:

  • Q5: Final lesson doesn't connect to CSS section that follows
  • Position: SVG involves graphics/styling - better fit in CSS section

Recommendation:

  • MOVE to CSS section after Units & Variables
  • Add comprehensive intro about SVG vs raster images

Module 9: HTML Marquee (31-html-marquee.json) - DEPRECATED

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Scrolling Text 2 5 5 3 3 18/25 REMOVE
Direction & Behavior 2 5 5 3 3 18/25 REMOVE
Retro News Ticker 2 5 5 3 2 17/25 REMOVE

Module Summary: Teaches deprecated HTML element.

Issues:

  • Q1: Marquee is deprecated and should not be taught as standard practice
  • Q5: Doesn't lead to anything practical

Recommendation:

  • REMOVE from learning path
  • Could be moved to optional "Web History" section if desired

Module 10: CSS Selectors (00-basic-selectors.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
What's a Selector? 5 5 5 5 5 25/25 Keep
Type Selectors 5 5 5 5 5 25/25 Keep
Class Selectors 5 5 5 5 5 25/25 Keep
Multiple Classes 5 5 5 4 5 24/25 Keep
Combining Types 5 5 5 4 5 24/25 Keep
ID Selectors 5 5 5 4 5 24/25 Keep
Type + ID 5 5 5 4 5 24/25 Keep
Selector Lists 5 5 5 4 5 24/25 Keep
Universal (*) 5 5 5 4 5 24/25 Keep
Specificity 5 5 5 4 5 24/25 Keep

Module Summary: EXCELLENT! This is the gold standard for explanation depth. First lesson has comprehensive "why" context with code examples.

Issues: None significant

Recommendation:

  • Keep as-is
  • Use as template for other modules
  • Note: Progressive depth reduction could be stronger (lessons 5-10 have similar depth)

Module 11: CSS Box Model (01-box-model.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Box Model Components 5 5 5 4 5 24/25 Enhance
Adding Borders 5 5 5 3 5 23/25 Keep
Adding Margins 5 5 5 3 5 23/25 Keep
Box Sizing 5 5 5 4 5 24/25 Keep
Margin Collapse 5 5 5 3 5 23/25 Keep
Margin Shorthand 5 5 5 3 5 23/25 Keep
Padding Shorthand 5 5 5 2 5 22/25 Keep
Border on Specific Sides 5 5 5 2 4 21/25 Keep

Module Summary: Good structure with proper progression.

Issues:

  • Q4: First lesson could have MORE comprehensive explanation (like CSS Selectors has)
  • Q4: Last lessons appropriately brief - good depth progression!

Recommendation:

  • Enhance lesson 1 description with "why" context (like CSS Selectors lesson 1)
  • Visual diagram reference would help but not critical

Module 12: CSS Units & Variables (05-units-variables.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Absolute vs Relative 5 5 5 4 5 24/25 Keep
CSS Custom Properties 5 5 5 4 5 24/25 Keep
Unit Calculations 5 5 5 3 5 23/25 Keep
Viewport & Responsive 5 5 5 3 4 22/25 Keep

Module Summary: Good coverage of units and variables.

Issues:

  • Q5: Last lesson could better transition to Flexbox module
  • GAP: Colors and Typography should come BEFORE this module

Recommendation:

  • Add transition text mentioning layout modules next
  • INSERT Colors and Typography modules before this one

Module 13: CSS Flexbox (flexbox.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Container 5 5 5 2 5 22/25 ENHANCE
Direction & Wrap 5 5 5 2 5 22/25 Keep
Justify Content 5 5 5 2 5 22/25 Keep
Align Items 5 5 5 2 5 22/25 Keep
Flex Grow 5 5 5 2 5 22/25 Keep
Align Self 5 5 5 2 4 21/25 Keep

Module Summary: MAJOR ISSUE - First lesson has minimal explanation compared to CSS Selectors!

Issues:

  • Q4: CRITICAL - Lesson 1 description is only 2 sentences + code block
  • Q4: No "why" context about flexbox history or when to use it
  • Q4: All lessons have similar minimal depth - no progressive reduction

Recommendation:

  • REWRITE lesson 1 with comprehensive explanation:
    • History: Before flexbox, layout was done with floats/positioning
    • Why: Flexbox solves the "vertical centering problem" and responsive layouts
    • Main vs cross axis explained
    • When to use flexbox vs grid
  • Keep lessons 2-6 brief (appropriate for later lessons)

Module 14: CSS Responsive Design (08-responsive.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Media Queries 5 5 5 4 5 24/25 Keep
Fluid Type 5 5 5 3 5 23/25 Keep
Responsive Grid 5 4 5 3 5 22/25 Review
Mobile-First 5 5 5 3 4 22/25 Keep

Module Summary: Good coverage but has prerequisite issue.

Issues:

  • Q2: Lesson 3 (Responsive Grid) uses CSS Grid concepts but Grid hasn't been taught!
  • GAP: Grid module should come BEFORE Responsive Design

Recommendation:

  • ADD Grid module before Responsive Design
  • Or remove/rewrite Responsive Grid lesson to use flexbox only

Module 15: CSS Animations (06-transitions-animations.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Transitions 5 5 5 4 5 24/25 Keep
Timing Funcs 5 5 5 3 5 23/25 Keep
Keyframes 5 5 5 4 5 24/25 Keep
Animation Properties 5 5 5 3 4 22/25 Keep

Module Summary: Good structure with appropriate progression.

Issues:

  • Q4: First lesson could have more context about when to use animations (UX principles)

Recommendation:

  • Add brief UX context to lesson 1: "Animations should enhance UX, not distract"

Module 16: Goodbye (99-goodbye.json)

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Well Done! 5 5 5 5 5 25/25 Keep
Contribute 5 5 5 5 5 25/25 Keep
Keep Learning 5 5 5 5 5 25/25 Keep

Module Summary: Excellent closing with resources and encouragement.

Issues: None

Recommendation: Keep as-is

Unused Modules Evaluation

Colors (03-colors.json) - NOT IN PATH

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Setting Background Colors 5 5 4 3 5 22/25 Enhance
Text Color and Contrast 5 5 5 3 5 23/25 Keep
CSS Gradients 5 5 5 3 5 23/25 Keep
Background Images 5 5 4 3 4 21/25 Review

Issues:

  • Q3: Lesson 1 uses hex code (#e0f7fa) instead of named color - inconsistent with guidelines
  • Q4: First lesson needs more explanation about color theory, accessibility
  • Q3: Lesson 4 task is vague: "using a placeholder URL"

Recommendation:

  • ADD to learning path after CSS Selectors
  • Change hex codes to named colors where possible
  • Enhance lesson 1 with color accessibility context (contrast ratios)
  • Clarify task in lesson 4

Typography (04-typography.json) - NOT IN PATH

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Font Family & Fallbacks 5 5 5 3 5 23/25 Enhance
Font Size & Line Height 5 5 5 3 5 23/25 Keep
Font Weight & Style 5 5 5 3 5 23/25 Keep
Text Decoration & Shadow 5 5 4 3 4 21/25 Review

Issues:

  • Q4: First lesson needs more context about web fonts, system fonts, why fallbacks matter
  • Q3: Lesson 4 task is vague: "Apply an underline... and a light shadow"

Recommendation:

  • ADD to learning path after Colors
  • Enhance lesson 1 with font loading context
  • Specify exact values in lesson 4 task

Grid (grid.json) - NOT IN PATH

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
Grid Container Basics 5 5 5 4 5 24/25 Enhance
Grid Template Areas 5 5 5 4 5 24/25 Keep
Spanning Grid Cells 5 5 5 3 5 23/25 Keep
Automatic Grid Placement 5 5 5 3 5 23/25 Keep
Grid Alignment 5 5 5 3 5 23/25 Keep
Overlapping Grid Items 5 5 5 3 4 22/25 Keep

Issues:

  • Q4: First lesson needs comprehensive intro about Grid vs Flexbox (when to use which)

Recommendation:

  • ADD to learning path after Flexbox
  • Enhance lesson 1 with Grid vs Flexbox comparison

Advanced Selectors (01-advanced-selectors.json) - NOT IN PATH

Lesson Q1 Q2 Q3 Q4 Q5 Total Action
[attribute] 5 5 5 5 5 25/25 Keep
Attr Matching 5 5 5 5 5 25/25 Keep
Child (>) 5 5 5 5 5 25/25 Keep
Descendant 5 5 5 5 5 25/25 Keep
Adjacent (+) 5 5 5 5 5 25/25 Keep
Sibling (~) 5 5 5 5 5 25/25 Keep
:hover 5 5 5 5 5 25/25 Keep
:first-child 5 5 5 5 5 25/25 Keep

Issues: None - this is an excellent module!

Recommendation:

  • ADD to learning path after CSS Basic Selectors
  • This module has the BEST explanation depth of all modules

Summary

Overall Statistics

Category Count
Total Active Lessons 62
Lessons Scoring 24-25 35 (56%)
Lessons Scoring 21-23 22 (35%)
Lessons Scoring <21 5 (8%)
Modules to REMOVE 1 (Marquee)
Modules to ADD 4 (Colors, Typography, Grid, Adv Selectors)

Critical Issues

1. Missing Modules (HIGH PRIORITY)

  • Colors - Students use colors without learning them
  • Typography - Font properties not taught
  • Grid - Essential layout missing
  • Advanced Selectors - Excellent content not being used

2. Explanation Depth Issues (MEDIUM PRIORITY)

  • Flexbox Lesson 1 - Needs comprehensive rewrite (currently only 2 sentences)
  • HTML Block & Inline Lesson 1 - Needs "why" context
  • Box Model Lesson 1 - Could be more comprehensive

3. Module Position Issues (MEDIUM PRIORITY)

  • SVG - Should be in CSS section, not HTML section
  • Responsive Design - Uses Grid concepts before Grid is taught

4. Deprecated Content (HIGH PRIORITY)

  • Marquee - Remove from learning path

Recommended New Structure

1.  Welcome
2.  HTML Block & Inline
3.  HTML Forms - Basics
4.  HTML Forms - Validation
5.  HTML Details & Summary
6.  HTML Progress & Meter
7.  HTML Tables
8.  CSS Selectors - Basics      (existing)
9.  CSS Selectors - Advanced    (ADD - excellent content)
10. CSS Colors                  (ADD)
11. CSS Typography              (ADD)
12. CSS Box Model
13. CSS Units & Variables
14. CSS SVG                     (MOVE from HTML)
15. CSS Flexbox                 (ENHANCE lesson 1)
16. CSS Grid                    (ADD)
17. CSS Responsive Design
18. CSS Animations
19. What's Next?

REMOVED: HTML Marquee

Priority Actions

Immediate (Before Next Release)

  1. Remove HTML Marquee from src/config/lessons.js
  2. Remove "div & span" lesson from HTML Block & Inline (redundant)
  3. Add Advanced Selectors to path after Basic Selectors
  4. Enhance Flexbox lesson 1 with comprehensive explanation

Short-term

  1. Add Colors module to path (after Basic Selectors)
  2. Add Typography module to path (after Colors)
  3. Add Grid module to path (after Flexbox)
  4. Move SVG from HTML section to CSS section

Medium-term

  1. Enhance all first lessons with comprehensive explanations
  2. Fix hex colors in Colors module to use named colors
  3. Clarify vague tasks (Typography lesson 4, Colors lesson 4)

Long-term

  1. Implement progressive depth reduction across all modules
  2. Update translations for new module order

UI Changes

  • Current: "code" has background highlight, "crispies" is plain
  • Change: Swap so "crispies" has background highlight, "code" is plain

Detailed Lesson-Level Improvements

HTML Section Lessons

Module: HTML Block & Inline (20-html-elements.json)

Lesson 1: Block vs Inline Elements

Current Description:

"HTML elements fall into two main categories: Block elements (containers) start on a new line and take full width. Examples: div, p, h1, section. Inline elements flow within text and only take needed width. Examples: span, a, strong, em"

Issues:

  • No "why" context - why does HTML distinguish between block and inline?
  • No historical context
  • No practical application explanation

Improved Description:

<strong>Understanding Document Flow</strong><br><br>

When browsers render HTML, they follow a concept called <em>document flow</em> - the natural way elements arrange themselves on a page. This fundamental concept, dating back to HTML's origins as a document markup language, divides elements into two categories:<br><br>

<strong>Block elements</strong> behave like paragraphs in a word processor - they start on a new line and stretch to fill available width. Think of them as "containers" that stack vertically. Examples: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br>

<strong>Inline elements</strong> behave like words in a sentence - they flow within text without breaking the line, taking only the width they need. Examples: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd><br><br>

<strong>Why this matters:</strong> Understanding block vs inline is essential for CSS layout. You cannot set width/height on inline elements, and vertical margins behave differently. This distinction forms the foundation of all web layout.

Lesson 2: Semantic Tags

Current Description: Good, but could add brief "why" for accessibility

Add to beginning:

Semantic HTML helps both browsers and assistive technologies (like screen readers) understand your content structure. Using the right semantic elements improves accessibility and SEO.<br><br>

Lesson 3: div & span

Action: REMOVE (redundant - block/inline already covered in lesson 1)

Module: HTML Forms - Basics (21-html-forms-basic.json)

Lesson 1: Form Structure

Current Description:

"Every form needs a form wrapper. Inside, use label to describe inputs and input for user data entry. The for attribute on labels should match the id on inputs for accessibility."

Issues:

  • No context about what forms ARE or why they exist
  • No mention of HTTP form submission

Improved Description:

<strong>HTML forms are the primary way users send data to websites</strong> - from login credentials to search queries to payment information. Without forms, the web would be read-only.<br><br>

Every form needs a <kbd>&lt;form&gt;</kbd> wrapper that defines where data goes when submitted. Inside, you build the interface with:<br><br>

• <kbd>&lt;label&gt;</kbd> - Describes what each input is for<br>
• <kbd>&lt;input&gt;</kbd> - Where users enter data<br><br>

<strong>Accessibility tip:</strong> The <kbd>for</kbd> attribute on labels should match the <kbd>id</kbd> on inputs. This lets users click the label to focus the input - essential for users with motor impairments.

Lesson 2: Input Types

Status: Good as-is (score 24/25)

Lesson 3: Submit Button

Current Description: Good but could be briefer (this is lesson 3) Action: Reduce slightly - appropriate for late-module position

Module: HTML Forms - Validation (22-html-forms-validation.json)

Lesson 3: Full Form (Complete Registration)

Current Task:

"Complete the registration form. Add required attributes, proper input types, and validation constraints."

Issue: Task is vague - doesn't specify exactly what to add

Improved Task:

Complete the registration form by adding:<br>
1. <kbd>required</kbd> to all fields marked with *<br>
2. <kbd>type="email"</kbd> to the email input<br>
3. <kbd>type="password"</kbd> to the password input<br>
4. <kbd>minlength="8"</kbd> to the password input<br>
5. <kbd>required</kbd> to the terms checkbox

Module: HTML Details & Summary (23-html-details-summary.json)

Lesson 1: First Widget

Add to description beginning:

Before HTML5, creating collapsible content required JavaScript. The <kbd>&lt;details&gt;</kbd> element gives you this functionality natively - no scripts needed, fully accessible, works everywhere.<br><br>

Module: HTML Tables (30-html-tables.json)

Lesson 1: Basic Table Structure

Add to description beginning:

<strong>Important:</strong> Tables are for <em>tabular data</em> only (like spreadsheets, schedules, or comparison charts). Never use tables for page layout - that's what CSS Grid and Flexbox are for.<br><br>

Module: HTML SVG (32-html-svg.json)

Lesson 1: Drawing Circles

Add to description beginning:

<strong>SVG (Scalable Vector Graphics)</strong> creates images using mathematical descriptions rather than pixels. Unlike JPG or PNG, SVG images stay crisp at any size - perfect for logos, icons, and illustrations.<br><br>

CSS Section Lessons

Module: CSS Selectors (00-basic-selectors.json)

Status: EXCELLENT - Use as template for other modules. No changes needed.

Module: CSS Box Model (01-box-model.json)

Lesson 1: Box Model Components

Current Description:

"The CSS box model consists of four concentric layers: content area (innermost), padding, border, and margin (outermost). Understanding how these components interact is essential for precise layout control."

Issues:

  • Good but could be more comprehensive like CSS Selectors lesson 1

Improved Description:

<strong>The CSS box model is the foundation of all web layout.</strong> Every HTML element is rendered as a rectangular box, and understanding this box is crucial for controlling spacing and sizing.<br><br>

The box model consists of four concentric layers (from inside out):<br>
1. <strong>Content</strong> - Your actual text, images, or nested elements<br>
2. <strong>Padding</strong> - Space between content and border (inside the element)<br>
3. <strong>Border</strong> - The visible edge of the element<br>
4. <strong>Margin</strong> - Space between this element and others (outside the element)<br><br>

<pre>.box {
  /* Content is determined by width/height */
  padding: 20px;   /* Inside spacing */
  border: 2px solid black;
  margin: 10px;    /* Outside spacing */
}</pre>

<strong>Key insight:</strong> Padding adds to the element's visual size; margin creates empty space around it.

Module: CSS Flexbox (flexbox.json) - CRITICAL

Lesson 1: Container

Current Description:

"Learn how to create a flex container and understand the main and cross axes. [code block]"

Issues:

  • ONLY 2 sentences before code block!
  • No "why" context
  • No comparison to older methods
  • No explanation of when to use flexbox

Improved Description:

<strong>Flexbox revolutionized CSS layout.</strong> Before flexbox (2012), developers used floats and positioning hacks for layouts - techniques that were never designed for that purpose. Flexbox was created specifically to solve common layout problems.<br><br>

<strong>When to use Flexbox:</strong><br>
• Centering content (finally easy!)<br>
• Distributing space between items<br>
• Aligning items in a row or column<br>
• Creating responsive navigation bars<br>
• Building card layouts<br><br>

<strong>The two axes:</strong><br>
Flexbox works along two perpendicular axes:<br>
• <strong>Main axis</strong> - The direction items flow (horizontal by default)<br>
• <strong>Cross axis</strong> - Perpendicular to main axis (vertical by default)<br><br>

<pre>.container {
  display: flex;        /* Creates flex container */
  justify-content: center; /* Align on main axis */
  align-items: center;    /* Align on cross axis */
}</pre>

To start, you only need <kbd>display: flex</kbd> on the parent container. This immediately makes all direct children "flex items" that can be aligned and distributed.

Lessons 2-6

Status: Good as-is - appropriately brief for later lessons

Module: CSS Responsive Design (08-responsive.json)

Lesson 1: Media Queries

Add to description beginning:

<strong>Responsive design</strong> means your layout adapts to different screen sizes - from phones to desktops. Media queries are CSS rules that only apply when certain conditions (like screen width) are met.<br><br>

Module: CSS Animations (06-transitions-animations.json)

Lesson 1: Transitions

Add to description:

<strong>UX principle:</strong> Animations should enhance usability, not distract. Use subtle, fast transitions (0.2-0.3s) for interactive feedback. Reserve longer animations for meaningful state changes.<br><br>

Unused Modules to Add

Module: CSS Colors (03-colors.json)

Lesson 1: Setting Background Colors

Current Issues:

  • Uses hex code (#e0f7fa) instead of named color
  • No context about color accessibility

Improved Description:

<strong>Color is fundamental to web design</strong>, but it's also one of the most important accessibility considerations. Approximately 8% of men have some form of color blindness.<br><br>

CSS offers multiple ways to specify colors:<br>
• <strong>Named colors:</strong> <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd> (147 names)<br>
• <strong>Hex codes:</strong> <kbd>#3498db</kbd> (harder to read)<br>
• <strong>RGB:</strong> <kbd>rgb(52, 152, 219)</kbd><br>
• <strong>HSL:</strong> <kbd>hsl(204, 70%, 53%)</kbd> (easiest to adjust)<br><br>

For learning, we'll use named colors - they're memorable and readable.

Fix task: Change #e0f7fa to lightcyan (equivalent named color)

Lesson 4: Background Images

Current Task: "Set a background image on '.bg-img' using a placeholder URL, center it, and prevent tiling."

Issue: Vague - what URL? What values?

Improved Task:

The background image is already set. Add these properties to <kbd>.bg-img</kbd>:<br>
1. <kbd>background-position: center</kbd><br>
2. <kbd>background-repeat: no-repeat</kbd>

Module: CSS Typography (04-typography.json)

Lesson 1: Font Family & Fallbacks

Add context:

<strong>Web fonts vs System fonts:</strong> Web fonts (like Google Fonts) load from the internet, adding download time. System fonts (like Georgia, Arial) are already on users' devices - instant and reliable.<br><br>

<strong>Fallback stacks</strong> ensure text displays even if your preferred font fails to load. Always end with a generic family (<kbd>serif</kbd>, <kbd>sans-serif</kbd>, <kbd>monospace</kbd>).

Lesson 4: Text Decoration & Shadow

Current Task: "Apply an underline with text-decoration and a light shadow using text-shadow on '.fancy'."

Issue: Doesn't specify shadow values

Improved Task:

Style <kbd>.fancy</kbd> with:<br>
1. <kbd>text-decoration: underline</kbd><br>
2. <kbd>text-shadow: 1px 1px 2px gray</kbd>

Module: CSS Grid (grid.json)

Lesson 1: Grid Container Basics

Add context about Grid vs Flexbox:

<strong>Grid vs Flexbox - when to use which?</strong><br><br>

• <strong>Flexbox:</strong> One-dimensional layouts (a row OR a column)<br>
• <strong>Grid:</strong> Two-dimensional layouts (rows AND columns together)<br><br>

Use Grid when you need to align items in both directions simultaneously - like a photo gallery, dashboard, or page layout. Use Flexbox for navigation bars, card rows, or centering content.<br><br>

Grid was the last major layout feature added to CSS (2017), completing the layout toolkit that web designers had wanted for decades.

Summary: Lessons Requiring Changes

Module Lesson Change Type Priority
HTML Block & Inline 1. Block vs Inline Rewrite description HIGH
HTML Block & Inline 2. Semantic Tags Add accessibility context MEDIUM
HTML Block & Inline 3. div & span REMOVE HIGH
HTML Forms 1. Form Structure Enhance description MEDIUM
HTML Forms Validation 3. Full Form Clarify task MEDIUM
HTML Details 1. First Widget Add history context LOW
HTML Tables 1. Basic Table Add "not for layout" warning MEDIUM
HTML SVG 1. Drawing Circles Add SVG vs raster context LOW
CSS Box Model 1. Components Enhance description MEDIUM
CSS Flexbox 1. Container REWRITE description CRITICAL
CSS Responsive 1. Media Queries Add responsive context LOW
CSS Animations 1. Transitions Add UX principle LOW
CSS Colors 1. Background Colors Fix hex→named, add a11y MEDIUM
CSS Colors 4. Background Images Clarify task MEDIUM
CSS Typography 1. Font Family Add web font context MEDIUM
CSS Typography 4. Decoration Specify shadow values MEDIUM
CSS Grid 1. Container Basics Add Grid vs Flexbox MEDIUM