From 6d21309f8ae6c5a8b52551035b868f4d3af9a3bf Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 14 May 2025 11:28:43 +0200 Subject: [PATCH] feat: add JSON schema for course modules and update module files --- lessons/00-basics.json | 1 + lessons/01-box-model.json | 1 + lessons/02-selectors.json | 1 + lessons/03-colors.json | 1 + lessons/04-typography.json | 1 + lessons/05-units-variables.json | 1 + lessons/06-transitions-animations.json | 1 + lessons/07-layouts.json | 1 + lessons/08-responsive.json | 1 + lessons/flexbox.json | 1 + lessons/grid.json | 1 + lessons/tailwindcss.json | 1 + schemas/code-crispies-module-schema.json | 146 +++++++++++++++++++++++ 13 files changed, 158 insertions(+) create mode 100644 schemas/code-crispies-module-schema.json diff --git a/lessons/00-basics.json b/lessons/00-basics.json index f10ce8a..b2351b2 100644 --- a/lessons/00-basics.json +++ b/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.", diff --git a/lessons/01-box-model.json b/lessons/01-box-model.json index 0ae495b..87ce236 100644 --- a/lessons/01-box-model.json +++ b/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.", diff --git a/lessons/02-selectors.json b/lessons/02-selectors.json index b4dcc09..0cefd14 100644 --- a/lessons/02-selectors.json +++ b/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.", diff --git a/lessons/03-colors.json b/lessons/03-colors.json index f367f68..39e107a 100644 --- a/lessons/03-colors.json +++ b/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.", diff --git a/lessons/04-typography.json b/lessons/04-typography.json index a21ff87..8073c00 100644 --- a/lessons/04-typography.json +++ b/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.", diff --git a/lessons/05-units-variables.json b/lessons/05-units-variables.json index d186c87..82afc57 100644 --- a/lessons/05-units-variables.json +++ b/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.", diff --git a/lessons/06-transitions-animations.json b/lessons/06-transitions-animations.json index 6422a33..bdb7a17 100644 --- a/lessons/06-transitions-animations.json +++ b/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.", diff --git a/lessons/07-layouts.json b/lessons/07-layouts.json index 0f5af3f..1cc70ce 100644 --- a/lessons/07-layouts.json +++ b/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.", diff --git a/lessons/08-responsive.json b/lessons/08-responsive.json index b45f7aa..089a03f 100644 --- a/lessons/08-responsive.json +++ b/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.", diff --git a/lessons/flexbox.json b/lessons/flexbox.json index 7b380bd..464c6b8 100644 --- a/lessons/flexbox.json +++ b/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", diff --git a/lessons/grid.json b/lessons/grid.json index b3191bd..c06a5ea 100644 --- a/lessons/grid.json +++ b/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", diff --git a/lessons/tailwindcss.json b/lessons/tailwindcss.json index 85cabe2..654f612 100644 --- a/lessons/tailwindcss.json +++ b/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", diff --git a/schemas/code-crispies-module-schema.json b/schemas/code-crispies-module-schema.json new file mode 100644 index 0000000..99a31f3 --- /dev/null +++ b/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" + } + } + } + } + } + } + } + } + } + } +} \ No newline at end of file