{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "markdown-basics", "title": "Markdown Basics", "description": "Learn to format text documents with Markdown, a simple and readable markup language used everywhere from GitHub to note-taking apps.", "mode": "markdown", "difficulty": "beginner", "lessons": [ { "id": "md-headings", "title": "Headings", "description": "Markdown uses hash symbols # to create headings. One # creates the largest heading (h1), two ## creates a smaller heading (h2), and so on up to six levels.

# Main Title\n## Section\n### Subsection
", "task": "Create a main heading by typing # Hello", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "", "solution": "# Hello", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^#\\s+.+", "message": "Start with # followed by a space and your heading text" }, { "type": "contains", "value": "Hello", "message": "Your heading should contain Hello" } ] }, { "id": "md-heading-levels", "title": "Heading Levels", "description": "Use more # symbols for smaller headings. ## creates an h2, ### an h3. This creates a clear document structure with visual hierarchy.", "task": "Create an h2 heading with ## About followed by an h3 heading with ### Details", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "", "solution": "## About\n\n### Details", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^##\\s+About", "message": "Start with ## About" }, { "type": "regex", "value": "###\\s+Details", "message": "Add ### Details for the h3 heading" } ] }, { "id": "md-bold", "title": "Bold Text", "description": "Wrap text in double asterisks ** or double underscores __ to make it bold. This emphasizes important words or phrases.", "task": "Make the word important bold by wrapping it with **", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "This is important text.", "solution": "This is **important** text.", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "\\*\\*important\\*\\*", "message": "Wrap important with double asterisks: **important**" } ] }, { "id": "md-italic", "title": "Italic Text", "description": "Wrap text in single asterisks * or single underscores _ to make it italic. Use this for subtle emphasis or titles of works.", "task": "Make the word elegant italic by wrapping it with *", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "A simple and elegant solution.", "solution": "A simple and *elegant* solution.", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "\\*elegant\\*", "message": "Wrap elegant with single asterisks: *elegant*" }, { "type": "not_contains", "value": "**elegant**", "message": "Use single asterisks for italic, not double" } ] }, { "id": "md-unordered-list", "title": "Bullet Lists", "description": "Create bullet lists using -, *, or + at the start of each line. Each item goes on its own line.", "task": "Create a bullet list with three items: Apple, Banana, Cherry", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "", "solution": "- Apple\n- Banana\n- Cherry", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "^[-*+]\\s+Apple", "message": "Start with a dash, asterisk, or plus followed by Apple" }, { "type": "regex", "value": "[-*+]\\s+Banana", "message": "Add Banana as a list item" }, { "type": "regex", "value": "[-*+]\\s+Cherry", "message": "Add Cherry as a list item" } ] }, { "id": "md-ordered-list", "title": "Numbered Lists", "description": "Create numbered lists by starting lines with 1., 2., etc. Markdown automatically numbers them in sequence.", "task": "Create a numbered list: Wake up, Eat breakfast, Start coding", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "", "solution": "1. Wake up\n2. Eat breakfast\n3. Start coding", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "\\d+\\.\\s+Wake up", "message": "Start with a number and period: 1. Wake up" }, { "type": "regex", "value": "\\d+\\.\\s+Eat breakfast", "message": "Add Eat breakfast as a numbered item" }, { "type": "regex", "value": "\\d+\\.\\s+Start coding", "message": "Add Start coding as a numbered item" } ] }, { "id": "md-links", "title": "Links", "description": "Create links with [text](url). The text in brackets is what readers see; the URL in parentheses is where they go when clicked.", "task": "Create a link that shows Google and goes to https://google.com", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "", "solution": "[Google](https://google.com)", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "\\[Google\\]\\(https?://google\\.com\\)", "message": "Use the format [Google](https://google.com)" } ] }, { "id": "md-inline-code", "title": "Inline Code", "description": "Wrap text in backticks ` to format it as code. This is useful for variable names, commands, or short code snippets in your text.", "task": "Format npm install as inline code using backticks", "previewHTML": "", "previewBaseCSS": "", "sandboxCSS": "", "initialCode": "Run npm install to install dependencies.", "solution": "Run `npm install` to install dependencies.", "previewContainer": "preview-area", "validations": [ { "type": "regex", "value": "`npm install`", "message": "Wrap npm install with backticks: `npm install`" } ] } ] }