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
parent 9f09d47088
commit 76e7e40256
14 changed files with 986 additions and 287 deletions
--- a/src/config/lessons.js
+++ b/src/config/lessons.js
@@ -6,7 +6,10 @@
 // English lesson imports
 import welcomeEN from "../../lessons/00-welcome.json";
 import basicSelectorsEN from "../../lessons/00-basic-selectors.json";
+import advancedSelectorsEN from "../../lessons/01-advanced-selectors.json";
 import boxModelEN from "../../lessons/01-box-model.json";
+import colorsEN from "../../lessons/03-colors.json";
+import typographyEN from "../../lessons/04-typography.json";
 import unitsVariablesEN from "../../lessons/05-units-variables.json";
 import transitionsAnimationsEN from "../../lessons/06-transitions-animations.json";
 import responsiveEN from "../../lessons/08-responsive.json";
@@ -16,9 +19,9 @@ import htmlFormsValidationEN from "../../lessons/22-html-forms-validation.json";
 import htmlDetailsSummaryEN from "../../lessons/23-html-details-summary.json";
 import htmlProgressMeterEN from "../../lessons/24-html-progress-meter.json";
 import htmlTablesEN from "../../lessons/30-html-tables.json";
-import htmlMarqueeEN from "../../lessons/31-html-marquee.json";
 import htmlSvgEN from "../../lessons/32-html-svg.json";
 import flexboxEN from "../../lessons/flexbox.json";
+import gridEN from "../../lessons/grid.json";
 import goodbyeEN from "../../lessons/99-goodbye.json";

 // German lesson imports
@@ -34,7 +37,6 @@ import htmlFormsValidationDE from "../../lessons/de/22-html-forms-validation.jso
 import htmlDetailsSummaryDE from "../../lessons/de/23-html-details-summary.json";
 import htmlProgressMeterDE from "../../lessons/de/24-html-progress-meter.json";
 import htmlTablesDE from "../../lessons/de/30-html-tables.json";
-import htmlMarqueeDE from "../../lessons/de/31-html-marquee.json";
 import htmlSvgDE from "../../lessons/de/32-html-svg.json";
 import flexboxDE from "../../lessons/de/flexbox.json";

@@ -51,7 +53,6 @@ import htmlFormsValidationPL from "../../lessons/pl/22-html-forms-validation.jso
 import htmlDetailsSummaryPL from "../../lessons/pl/23-html-details-summary.json";
 import htmlProgressMeterPL from "../../lessons/pl/24-html-progress-meter.json";
 import htmlTablesPL from "../../lessons/pl/30-html-tables.json";
-import htmlMarqueePL from "../../lessons/pl/31-html-marquee.json";
 import htmlSvgPL from "../../lessons/pl/32-html-svg.json";
 import flexboxPL from "../../lessons/pl/flexbox.json";

@@ -68,7 +69,6 @@ import htmlFormsValidationES from "../../lessons/es/22-html-forms-validation.jso
 import htmlDetailsSummaryES from "../../lessons/es/23-html-details-summary.json";
 import htmlProgressMeterES from "../../lessons/es/24-html-progress-meter.json";
 import htmlTablesES from "../../lessons/es/30-html-tables.json";
-import htmlMarqueeES from "../../lessons/es/31-html-marquee.json";
 import htmlSvgES from "../../lessons/es/32-html-svg.json";
 import flexboxES from "../../lessons/es/flexbox.json";

@@ -85,7 +85,6 @@ import htmlFormsValidationAR from "../../lessons/ar/22-html-forms-validation.jso
 import htmlDetailsSummaryAR from "../../lessons/ar/23-html-details-summary.json";
 import htmlProgressMeterAR from "../../lessons/ar/24-html-progress-meter.json";
 import htmlTablesAR from "../../lessons/ar/30-html-tables.json";
-import htmlMarqueeAR from "../../lessons/ar/31-html-marquee.json";
 import htmlSvgAR from "../../lessons/ar/32-html-svg.json";
 import flexboxAR from "../../lessons/ar/flexbox.json";

@@ -102,7 +101,6 @@ import htmlFormsValidationUK from "../../lessons/uk/22-html-forms-validation.jso
 import htmlDetailsSummaryUK from "../../lessons/uk/23-html-details-summary.json";
 import htmlProgressMeterUK from "../../lessons/uk/24-html-progress-meter.json";
 import htmlTablesUK from "../../lessons/uk/30-html-tables.json";
-import htmlMarqueeUK from "../../lessons/uk/31-html-marquee.json";
 import htmlSvgUK from "../../lessons/uk/32-html-svg.json";
 import flexboxUK from "../../lessons/uk/flexbox.json";

@@ -110,25 +108,29 @@ import flexboxUK from "../../lessons/uk/flexbox.json";
 const moduleStoreEN = [
 	// Welcome
 	welcomeEN,
-	// HTML Grundlagen
+	// HTML Fundamentals
 	htmlElementsEN,
 	htmlFormsBasicEN,
 	htmlFormsValidationEN,
-	// HTML Interaktiv
+	// HTML Interactive
 	htmlDetailsSummaryEN,
 	htmlProgressMeterEN,
-	// HTML Weitere
+	// HTML Data
 	htmlTablesEN,
-	htmlSvgEN,
-	htmlMarqueeEN,
-	// CSS Grundlagen
+	// CSS Fundamentals
 	basicSelectorsEN,
+	advancedSelectorsEN,
+	colorsEN,
+	typographyEN,
 	boxModelEN,
 	unitsVariablesEN,
+	// CSS Graphics
+	htmlSvgEN,
 	// CSS Layouts
 	flexboxEN,
+	gridEN,
 	responsiveEN,
-	// CSS Animationen
+	// CSS Animation
 	transitionsAnimationsEN,
 	// Goodbye
 	goodbyeEN
@@ -138,25 +140,29 @@ const moduleStoreEN = [
 const moduleStoreDE = [
 	// Welcome
 	welcomeDE,
-	// HTML Grundlagen
+	// HTML Fundamentals
 	htmlElementsDE,
 	htmlFormsBasicDE,
 	htmlFormsValidationDE,
-	// HTML Interaktiv
+	// HTML Interactive
 	htmlDetailsSummaryDE,
 	htmlProgressMeterDE,
-	// HTML Weitere
+	// HTML Data
 	htmlTablesDE,
-	htmlSvgDE,
-	htmlMarqueeDE,
-	// CSS Grundlagen
+	// CSS Fundamentals
 	basicSelectorsDE,
+	advancedSelectorsEN, // Using EN fallback until translated
+	colorsEN, // Using EN fallback until translated
+	typographyEN, // Using EN fallback until translated
 	boxModelDE,
 	unitsVariablesDE,
+	// CSS Graphics
+	htmlSvgDE,
 	// CSS Layouts
 	flexboxDE,
+	gridEN, // Using EN fallback until translated
 	responsiveDE,
-	// CSS Animationen
+	// CSS Animation
 	transitionsAnimationsDE,
 	// Goodbye
 	goodbyeEN
@@ -164,81 +170,129 @@ const moduleStoreDE = [

 // Polish module store - ordered by learning path
 const moduleStorePL = [
+	// Welcome
 	welcomePL,
+	// HTML Fundamentals
 	htmlElementsPL,
 	htmlFormsBasicPL,
 	htmlFormsValidationPL,
+	// HTML Interactive
 	htmlDetailsSummaryPL,
 	htmlProgressMeterPL,
+	// HTML Data
 	htmlTablesPL,
-	htmlSvgPL,
-	htmlMarqueePL,
+	// CSS Fundamentals
 	basicSelectorsPL,
+	advancedSelectorsEN, // Using EN fallback until translated
+	colorsEN, // Using EN fallback until translated
+	typographyEN, // Using EN fallback until translated
 	boxModelPL,
 	unitsVariablesPL,
+	// CSS Graphics
+	htmlSvgPL,
+	// CSS Layouts
 	flexboxPL,
+	gridEN, // Using EN fallback until translated
 	responsivePL,
+	// CSS Animation
 	transitionsAnimationsPL,
+	// Goodbye
 	goodbyeEN
 ];

 // Spanish module store - ordered by learning path
 const moduleStoreES = [
+	// Welcome
 	welcomeES,
+	// HTML Fundamentals
 	htmlElementsES,
 	htmlFormsBasicES,
 	htmlFormsValidationES,
+	// HTML Interactive
 	htmlDetailsSummaryES,
 	htmlProgressMeterES,
+	// HTML Data
 	htmlTablesES,
-	htmlSvgES,
-	htmlMarqueeES,
+	// CSS Fundamentals
 	basicSelectorsES,
+	advancedSelectorsEN, // Using EN fallback until translated
+	colorsEN, // Using EN fallback until translated
+	typographyEN, // Using EN fallback until translated
 	boxModelES,
 	unitsVariablesES,
+	// CSS Graphics
+	htmlSvgES,
+	// CSS Layouts
 	flexboxES,
+	gridEN, // Using EN fallback until translated
 	responsiveES,
+	// CSS Animation
 	transitionsAnimationsES,
+	// Goodbye
 	goodbyeEN
 ];

 // Arabic module store - ordered by learning path
 const moduleStoreAR = [
+	// Welcome
 	welcomeAR,
+	// HTML Fundamentals
 	htmlElementsAR,
 	htmlFormsBasicAR,
 	htmlFormsValidationAR,
+	// HTML Interactive
 	htmlDetailsSummaryAR,
 	htmlProgressMeterAR,
+	// HTML Data
 	htmlTablesAR,
-	htmlSvgAR,
-	htmlMarqueeAR,
+	// CSS Fundamentals
 	basicSelectorsAR,
+	advancedSelectorsEN, // Using EN fallback until translated
+	colorsEN, // Using EN fallback until translated
+	typographyEN, // Using EN fallback until translated
 	boxModelAR,
 	unitsVariablesAR,
+	// CSS Graphics
+	htmlSvgAR,
+	// CSS Layouts
 	flexboxAR,
+	gridEN, // Using EN fallback until translated
 	responsiveAR,
+	// CSS Animation
 	transitionsAnimationsAR,
+	// Goodbye
 	goodbyeEN
 ];

 // Ukrainian module store - ordered by learning path
 const moduleStoreUK = [
+	// Welcome
 	welcomeUK,
+	// HTML Fundamentals
 	htmlElementsUK,
 	htmlFormsBasicUK,
 	htmlFormsValidationUK,
+	// HTML Interactive
 	htmlDetailsSummaryUK,
 	htmlProgressMeterUK,
+	// HTML Data
 	htmlTablesUK,
-	htmlSvgUK,
-	htmlMarqueeUK,
+	// CSS Fundamentals
 	basicSelectorsUK,
+	advancedSelectorsEN, // Using EN fallback until translated
+	colorsEN, // Using EN fallback until translated
+	typographyEN, // Using EN fallback until translated
 	boxModelUK,
 	unitsVariablesUK,
+	// CSS Graphics
+	htmlSvgUK,
+	// CSS Layouts
 	flexboxUK,
+	gridEN, // Using EN fallback until translated
 	responsiveUK,
+	// CSS Animation
 	transitionsAnimationsUK,
+	// Goodbye
 	goodbyeEN
 ];

--- a/src/index.html
+++ b/src/index.html
@@ -20,7 +20,7 @@
 				</button>
 				<a href="#" id="logo-link" class="logo">
 					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
-					<h1><span class="code-text">CODE</span><span>CRISPIES</span></h1>
+					<h1><span class="code-text">CODE</span><span class="crispies-text">CRISPIES</span></h1>
 				</a>
 				<div class="header-actions">
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
--- a/src/main.css
+++ b/src/main.css
@@ -186,6 +186,10 @@ kbd {
 }

 .logo h1 .code-text {
+	color: var(--primary-color);
+}
+
+.logo h1 .crispies-text {
 	background: var(--primary-color);
 	color: white;
 	padding: 0.15rem 0.35rem;
@@ -194,10 +198,6 @@ kbd {
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }

-.logo h1 span:last-child {
-	color: var(--primary-color);
-}
-
 .help-toggle {
 	width: 28px;
 	height: 28px;