diff --git a/lessons/00-basics.json b/lessons/00-basics.json index 7c0f630..f10ce8a 100644 --- a/lessons/00-basics.json +++ b/lessons/00-basics.json @@ -1,13 +1,13 @@ { "id": "css-fundamentals", - "title": "CSS Fundamentals: The Language of Web Design", + "title": "101 Rules and Selectors", "description": "Cascading Style Sheets (CSS) form the cornerstone of modern web presentation. This module provides a comprehensive introduction to CSS syntax, selectors, properties, and core design concepts. You'll develop a deep understanding of how CSS empowers web developers to control visual aesthetics, layout, and responsive behavior across digital interfaces. Throughout these lessons, we'll build a robust foundation that prepares you for more advanced web engineering topics.", "difficulty": "beginner", "lessons": [ { "id": "css-syntax-structure", "title": "CSS Syntax: The Building Blocks", - "description": "CSS (Cascading Style Sheets) follows a structured syntax that consists of selectors targeting HTML elements and declaration blocks defining their styling. A declaration block contains one or more declarations separated by semicolons, with each declaration consisting of a property and value pair. This fundamental structure forms the basis of all CSS rules and allows for precise control over web page presentation. Understanding this syntax is critical for effectively implementing any styling on the web.", + "description": "CSS (Cascading Style Sheets) follows a structured syntax that consists of selectors targeting HTML elements and declaration blocks defining their styling. A declaration block contains one or more declarations separated by semicolons, with each declaration consisting of a property and value pair. This fundamental structure forms the basis of all CSS rules and allows for precise control over web page presentation. Understanding this syntax is critical for effectively implementing any styling on the web.

/* Element selctor */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}
", "task": "Complete the CSS rule by providing a valid selector that targets all paragraph elements (p). This selector should apply to every paragraph on the page. Notice how the declaration block is already structured with the property-value pair 'color: blue;'.", "previewHTML": "

This paragraph should be blue.

This paragraph should also be blue.

This div element should remain unchanged.
", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }", @@ -35,7 +35,7 @@ "previewHTML": "

This is a heading that needs styling

This is a paragraph that should remain unchanged.

This is another heading that needs the same styling

", "previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }", "sandboxCSS": "h2, p { border: 1px dashed #ccc; padding: 10px; margin-bottom: 10px; }", - "codePrefix": "/* Write an element selector for h2 elements and set their color and text-decoration */\n", + "codePrefix": "", "initialCode": "", "codeSuffix": " {\n color: red;\n text-decoration: underline;\n}", "previewContainer": "preview-area", diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index fa2f1e4..0ae495b 100644 --- a/lessons/01-box-model.json +++ b/lessons/01-box-model.json @@ -1,6 +1,6 @@ { "id": "box-model", - "title": "CSS Box Model & Layout Principles", + "title": "Padding, Borders, and Margins", "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/02-selectors.json b/lessons/02-selectors.json index f7137b7..b4dcc09 100644 --- a/lessons/02-selectors.json +++ b/lessons/02-selectors.json @@ -1,6 +1,6 @@ { "id": "selectors", - "title": "CSS Selectors Deep Dive", + "title": "Specificity", "description": "Master the art of targeting HTML elements using various CSS selectors, from basics to specificity rules.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index 279736c..d186c87 100644 --- a/lessons/05-units-variables.json +++ b/lessons/05-units-variables.json @@ -1,6 +1,6 @@ { "id": "units-variables", - "title": "CSS Units & Variables", + "title": "Units, var() and calc()", "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 a37b718..6422a33 100644 --- a/lessons/06-transitions-animations.json +++ b/lessons/06-transitions-animations.json @@ -1,6 +1,6 @@ { "id": "transitions-animations", - "title": "CSS Transitions & Animations", + "title": "Transitions & Animations", "description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.", "difficulty": "beginner", "lessons": [ diff --git a/lessons/07-layouts.json b/lessons/07-layouts.json index adee7d5..0f5af3f 100644 --- a/lessons/07-layouts.json +++ b/lessons/07-layouts.json @@ -1,6 +1,6 @@ { "id": "layouts", - "title": "Advanced Layouts: Flexbox & Grid", + "title": "Flexbox & Grid", "description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.", "difficulty": "intermediate", "lessons": [ diff --git a/public/gear.svg b/public/gear.svg new file mode 100644 index 0000000..cf2d77e --- /dev/null +++ b/public/gear.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/app.js b/src/app.js index 9a2817e..42d5bf7 100644 --- a/src/app.js +++ b/src/app.js @@ -154,7 +154,6 @@ function selectModule(moduleId) { function resetSuccessIndicators() { elements.codeEditor.classList.remove("success-highlight"); elements.lessonTitle.classList.remove("success-text"); - elements.runBtn.classList.remove("hidden"); elements.nextBtn.classList.remove("success"); elements.taskInstruction.classList.remove("success-instruction"); } @@ -266,7 +265,6 @@ function runCode() { // Add success visual indicators elements.codeEditor.classList.add("success-highlight"); elements.lessonTitle.classList.add("success-text"); - elements.runBtn.classList.add("hidden"); elements.nextBtn.classList.add("success"); elements.taskInstruction.classList.add("success-instruction"); diff --git a/src/index.html b/src/index.html index acabe5e..b76afcc 100644 --- a/src/index.html +++ b/src/index.html @@ -51,7 +51,7 @@
CSS Editor - +
diff --git a/src/main.css b/src/main.css index 6879fa7..96d672f 100644 --- a/src/main.css +++ b/src/main.css @@ -2,7 +2,8 @@ --primary-color: #dd3b59; --primary-light: #ff5f7f; --primary-dark: #af2740; - --secondary-color: #ff7e5f; + --secondary-color: #393939; + --secondary-dark: #1e1e1e; --text-color: #13181c; --light-text: #777; --bg-color: #f9f9f9; @@ -158,6 +159,17 @@ body { width: 72%; } +.lesson-description pre { + display: inline-block; + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 0.9rem; + background-color: #f5f5f5; + padding: 2rem 3rem 2rem 2rem; + border-radius: 6px; + overflow-x: auto; + margin-bottom: 1.5rem; +} + /* Challenge Container */ .challenge-container { display: flex; @@ -319,6 +331,22 @@ code { background-color: var(--primary-dark); } +.btn-secondary { + background-color: var(--secondary-color); + color: white; + border: 1px solid var(--secondary-dark); +} + +.btn-secondary:hover { + background-color: var(--secondary-dark); +} + +.btn img { + width: 0.8rem; + height: 0.8rem; + margin-right: 0.3rem; +} + /* Modal */ .modal-container { position: fixed;