feat: update module titles and enhance button styles

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.<br><br><pre>/* Element selctor */\np {\n  color: orangered;\n  /* │       └─── Indicates the value of the expression\n     │                                                     \n     └─────────── Indicates the property of the expression */\n}</pre>",
 			"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": "<p>This paragraph should be blue.</p><p>This paragraph should also be blue.</p><div>This div element should remain unchanged.</div>",
 			"previewBaseCSS": "body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }",
@@ -35,7 +35,7 @@
 			"previewHTML": "<h2>This is a heading that needs styling</h2><p>This is a paragraph that should remain unchanged.</p><h2>This is another heading that needs the same styling</h2>",
 			"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",

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": [

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": [

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": [

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": [

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": [

public/gear.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" version="1.1" id="Capa_1" width="800px" height="800px"
+     viewBox="0 0 45.973 45.973" xml:space="preserve">
+	<path stroke="currentColor" fill="white"
+          d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774    c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815    C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607    c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205    C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501    C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763    c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733    s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128    c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735    c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77    c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z     M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85    C30.906,27.334,27.355,30.85,22.976,30.85z"/>
+</svg>

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");
 

src/index.html

@@ -51,7 +51,7 @@
 								<div class="code-editor">
 									<div class="editor-header">
 										<span>CSS Editor</span>
-										<button id="run-btn" class="btn btn-primary">Run</button>
+										<button id="run-btn" class="btn btn-secondary"><img src="./gear.svg" />Run</button>
 									</div>
 									<div class="editor-content">
 										<pre><code id="editor-prefix"></code></pre>

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;