diff --git a/lessons/00-basic-selectors.json b/lessons/00-basic-selectors.json index caa640f..1b843e0 100644 --- a/lessons/00-basic-selectors.json +++ b/lessons/00-basic-selectors.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "css-basic-selectors", - "title": "Selectors", + "title": "CSS Selectors", "description": "CSS selectors are the foundation of styling web pages, allowing you to target specific HTML elements for styling. This module introduces fundamental selector types including element type selectors, class selectors, ID selectors, and the universal selector.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 9b90902..2a6afb2 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "box-model", - "title": "Box Model", + "title": "CSS Box Model", "description": "Master the fundamental principles of space management in web design through the CSS box model. This module explores how content, padding, borders, and margins combine to create layout structures that are both visually appealing and structurally sound.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index de70ba9..d4e89e0 100644 --- a/lessons/05-units-variables.json +++ b/lessons/05-units-variables.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "units-variables", - "title": "Units & Vars", + "title": "CSS Units & Variables", "description": "Understand the variety of CSS measurement units and how to define and use custom properties for maintainable styles.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/06-transitions-animations.json b/lessons/06-transitions-animations.json index 744e309..468e21a 100644 --- a/lessons/06-transitions-animations.json +++ b/lessons/06-transitions-animations.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "transitions-animations", - "title": "Animations", + "title": "CSS Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/08-responsive.json b/lessons/08-responsive.json index bc856cd..0da4143 100644 --- a/lessons/08-responsive.json +++ b/lessons/08-responsive.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "responsive-design", - "title": "Responsive", + "title": "CSS Responsive Design", "description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.", "difficulty": "intermediate", "lessons": [ diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json index dd19bdf..5afbf44 100644 --- a/lessons/20-html-elements.json +++ b/lessons/20-html-elements.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-elements", - "title": "HTML Elements", + "title": "HTML Block & Inline", "description": "Understanding the fundamental difference between container (block) and inline elements", "mode": "html", "difficulty": "beginner", diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json index e68dde6..ea57a5f 100644 --- a/lessons/21-html-forms-basic.json +++ b/lessons/21-html-forms-basic.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-forms-basic", - "title": "Form Inputs", + "title": "HTML Forms", "description": "Learn to create forms with various input types", "mode": "html", "difficulty": "beginner", diff --git a/lessons/22-html-forms-validation.json b/lessons/22-html-forms-validation.json index 94f448e..ef7e909 100644 --- a/lessons/22-html-forms-validation.json +++ b/lessons/22-html-forms-validation.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-forms-validation", - "title": "Validation", + "title": "HTML Validation", "description": "Learn HTML5 built-in form validation attributes", "mode": "html", "difficulty": "intermediate", diff --git a/lessons/23-html-details-summary.json b/lessons/23-html-details-summary.json index 2c6dcc9..532eb82 100644 --- a/lessons/23-html-details-summary.json +++ b/lessons/23-html-details-summary.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-details-summary", - "title": "Disclosure", + "title": "HTML Details & Summary", "description": "Create expandable content sections without JavaScript", "mode": "html", "difficulty": "beginner", diff --git a/lessons/24-html-progress-meter.json b/lessons/24-html-progress-meter.json index 46e6677..d1a7d48 100644 --- a/lessons/24-html-progress-meter.json +++ b/lessons/24-html-progress-meter.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-progress-meter", - "title": "Progress/Meter", + "title": "HTML Progress & Meter", "description": "Display completion status and scalar measurements natively", "mode": "html", "difficulty": "beginner", diff --git a/lessons/30-html-tables.json b/lessons/30-html-tables.json index 1d35a4e..a60d32c 100644 --- a/lessons/30-html-tables.json +++ b/lessons/30-html-tables.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-tables", - "title": "Tables", + "title": "HTML Tables", "description": "Create structured data tables with headers and captions", "mode": "html", "difficulty": "beginner", diff --git a/lessons/31-html-marquee.json b/lessons/31-html-marquee.json index 385b67e..78538ea 100644 --- a/lessons/31-html-marquee.json +++ b/lessons/31-html-marquee.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-marquee", - "title": "Marquee", + "title": "HTML Marquee", "description": "Create scrolling text with the classic (deprecated but fun!) marquee element", "mode": "html", "difficulty": "beginner", diff --git a/lessons/32-html-svg.json b/lessons/32-html-svg.json index 663ec2b..2a96917 100644 --- a/lessons/32-html-svg.json +++ b/lessons/32-html-svg.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "html-svg", - "title": "SVG", + "title": "HTML SVG", "description": "Draw scalable vector graphics directly in HTML", "mode": "html", "difficulty": "beginner", diff --git a/lessons/flexbox.json b/lessons/flexbox.json index bd7cc1c..cc75563 100644 --- a/lessons/flexbox.json +++ b/lessons/flexbox.json @@ -1,7 +1,7 @@ { "$schema": "../schemas/code-crispies-module-schema.json", "id": "flexbox", - "title": "Flexbox", + "title": "CSS Flexbox", "description": "Master the flexible box layout model for modern responsive designs", "difficulty": "intermediate", "lessons": [ diff --git a/src/app.js b/src/app.js index 46d5567..bb88414 100644 --- a/src/app.js +++ b/src/app.js @@ -20,6 +20,7 @@ const elements = { helpBtn: document.getElementById("help-btn"), // Left panel + editorSection: document.querySelector(".editor-section"), modulePill: document.getElementById("module-pill"), moduleName: document.querySelector(".module-name"), lessonTitle: document.getElementById("lesson-title"), @@ -313,6 +314,9 @@ function loadCurrentLesson() { const lesson = engineState.lesson; const mode = lesson.mode || engineState.module?.mode || "css"; + // Add transition class for smooth content swap + elements.editorSection?.classList.add("transitioning"); + // Update UI based on mode updateEditorForMode(mode); @@ -388,6 +392,11 @@ function loadCurrentLesson() { // Render the expected/solution preview lessonEngine.renderExpectedPreview(); + + // Remove transition class after content is updated + requestAnimationFrame(() => { + elements.editorSection?.classList.remove("transitioning"); + }); } // ================= LIVE PREVIEW ================= diff --git a/src/i18n.js b/src/i18n.js index b6adfe2..63977bc 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -76,6 +76,10 @@ const translations = { emmetNested: "form>input+button → nested structure", emmetContent: "p{Hello} → p with text content", + // Contact + contactTitle: "Contact & Links", + contactText: "Code Crispies is developed by librete.ch", + // Reset dialog resetDialogTitle: "Reset Progress", resetDialogText: "Are you sure you want to reset all your progress? This cannot be undone.", @@ -165,6 +169,10 @@ const translations = { emmetNested: "form>input+button → verschachtelte Struktur", emmetContent: "p{Hallo} → p mit Textinhalt", + // Contact + contactTitle: "Kontakt & Links", + contactText: "Code Crispies wird von librete.ch entwickelt", + // Reset dialog resetDialogTitle: "Fortschritt zurücksetzen", resetDialogText: "Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.", diff --git a/src/index.html b/src/index.html index 7cb410b..cf38536 100644 --- a/src/index.html +++ b/src/index.html @@ -178,6 +178,15 @@
  • form>input+button → nested structure
  • p{Hello} → p with text content
    • + +

    Contact & Links

    +

    Code Crispies is developed by librete.ch

    + diff --git a/src/main.css b/src/main.css index 24366a7..f2c13e5 100644 --- a/src/main.css +++ b/src/main.css @@ -228,6 +228,19 @@ code, kbd { border-bottom: 1px solid var(--border-color); } +/* Smooth lesson transition */ +#lesson-title, +.lesson-description, +.task-instruction { + transition: opacity 0.1s ease; +} + +.editor-section.transitioning #lesson-title, +.editor-section.transitioning .lesson-description, +.editor-section.transitioning .task-instruction { + opacity: 0.3; +} + .module-pill { display: inline-flex; align-items: center;