feat: add JSON schema for course modules and update module files

lessons/00-basics.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "css-fundamentals",
 	"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.",

lessons/01-box-model.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
 	"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.",

lessons/02-selectors.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "selectors",
 	"title": "Specificity",
 	"description": "Master the art of targeting HTML elements using various CSS selectors, from basics to specificity rules.",

lessons/03-colors.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "colors-backgrounds",
 	"title": "Colors & Backgrounds",
 	"description": "Learn how to apply and manipulate colors, backgrounds, and graphical fills using CSS properties.",

lessons/04-typography.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "typography-fonts",
 	"title": "Typography & Fonts",
 	"description": "Learn how to control text appearance through font selection, sizing, spacing, and decorative effects.",

lessons/05-units-variables.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "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.",

lessons/06-transitions-animations.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
 	"title": "Transitions & Animations",
 	"description": "Bring interactivity to your UI by smoothly transitioning properties and creating keyframe-driven animations.",

lessons/07-layouts.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "layouts",
 	"title": "Flexbox & Grid",
 	"description": "Master modern CSS layout techniques with Flexbox and Grid for responsive, powerful designs.",

lessons/08-responsive.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
 	"title": "Responsive Design & Media Queries",
 	"description": "Make your layouts adapt to different screen sizes using media queries and fluid design techniques.",

lessons/flexbox.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "flexbox",
 	"title": "CSS Flexbox",
 	"description": "Master the flexible box layout model for modern responsive designs",

lessons/grid.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "grid",
 	"title": "CSS Grid",
 	"description": "Master the grid layout system for complex two-dimensional layouts",

lessons/tailwindcss.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "../schemas/code-crispies-module-schema.json",
 	"id": "tailwindcss-basics",
 	"title": "Tailwind CSS Basics",
 	"description": "Learn how to use Tailwind CSS utility classes to quickly style your HTML elements",

schemas/code-crispies-module-schema.json

@@ -0,0 +1,146 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Code Crispies Module Schema",
+  "description": "Schema for CSS course modules with lessons",
+  "type": "object",
+  "required": ["id", "title", "description", "difficulty", "lessons"],
+  "properties": {
+	"id": {
+	  "type": "string",
+	  "description": "Unique identifier for the module"
+	},
+	"title": {
+	  "type": "string",
+	  "description": "Title of the module"
+	},
+	"description": {
+	  "type": "string",
+	  "description": "Detailed description of the module content and purpose"
+	},
+	"difficulty": {
+	  "type": "string",
+	  "enum": ["beginner", "intermediate", "advanced"],
+	  "description": "Difficulty level of the module"
+	},
+	"lessons": {
+	  "type": "array",
+	  "description": "Collection of lessons within the module",
+	  "minItems": 1,
+	  "items": {
+		"type": "object",
+		"required": [
+		  "id",
+		  "title",
+		  "description",
+		  "task",
+		  "previewHTML",
+		  "previewBaseCSS",
+		  "sandboxCSS",
+		  "codePrefix",
+		  "initialCode",
+		  "codeSuffix",
+		  "previewContainer",
+		  "validations"
+		],
+		"properties": {
+		  "id": {
+			"type": "string",
+			"description": "Unique identifier for the lesson"
+		  },
+		  "title": {
+			"type": "string",
+			"description": "Title of the lesson"
+		  },
+		  "description": {
+			"type": "string",
+			"description": "Detailed description of the lesson content and concepts"
+		  },
+		  "task": {
+			"type": "string",
+			"description": "The specific task instructions for the student to complete"
+		  },
+		  "previewHTML": {
+			"type": "string",
+			"description": "HTML content used for the interactive preview"
+		  },
+		  "previewBaseCSS": {
+			"type": "string",
+			"description": "Base CSS styles applied to the preview environment"
+		  },
+		  "sandboxCSS": {
+			"type": "string",
+			"description": "Additional CSS for the sandbox environment"
+		  },
+		  "codePrefix": {
+			"type": "string",
+			"description": "Code that appears before the editable area"
+		  },
+		  "initialCode": {
+			"type": "string",
+			"description": "Initial code provided in the editor"
+		  },
+		  "codeSuffix": {
+			"type": "string",
+			"description": "Code that appears after the editable area"
+		  },
+		  "previewContainer": {
+			"type": "string",
+			"description": "ID of the container element for the preview"
+		  },
+		  "validations": {
+			"type": "array",
+			"description": "Rules to validate user input",
+			"minItems": 1,
+			"items": {
+			  "type": "object",
+			  "required": ["type", "value", "message"],
+			  "properties": {
+				"type": {
+				  "type": "string",
+				  "enum": ["contains", "regex", "property_value"],
+				  "description": "Type of validation to perform"
+				},
+				"value": {
+				  "description": "Value to check against, format depends on validation type",
+				  "oneOf": [
+					{
+					  "type": "string"
+					},
+					{
+					  "type": "object",
+					  "required": ["property", "expected"],
+					  "properties": {
+						"property": {
+						  "type": "string",
+						  "description": "CSS property name to validate"
+						},
+						"expected": {
+						  "type": "string",
+						  "description": "Expected value for the CSS property"
+						}
+					  }
+					}
+				  ]
+				},
+				"message": {
+				  "type": "string",
+				  "description": "Feedback message shown when validation fails"
+				},
+				"options": {
+				  "type": "object",
+				  "description": "Additional options for validation",
+				  "properties": {
+					"caseSensitive": {
+					  "type": "boolean",
+					  "description": "Whether the validation should be case sensitive"
+					}
+				  }
+				}
+			  }
+			}
+		  }
+		}
+	  }
+	}
+  }
+}