diff --git a/lessons/20-html-elements.json b/lessons/20-html-elements.json index 961a612..eb41fe4 100644 --- a/lessons/20-html-elements.json +++ b/lessons/20-html-elements.json @@ -34,7 +34,7 @@ "id": "semantic-containers", "title": "Semantic Container Elements", "description": "Modern HTML uses semantic containers that describe their content:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Thematic grouping
<article> - Self-contained content
<footer> - Page or section footer", - "task": "Create a basic page structure with <header>, <main>, and <footer> elements. Add a heading in the header.", + "task": "Create a basic page structure:
1. Add a <header> with an <h1> containing the text 'My Website'
2. Add a <main> element with a paragraph saying 'Welcome to my site!'
3. Add a <footer> with a paragraph saying 'Copyright 2025'", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", diff --git a/lessons/21-html-forms-basic.json b/lessons/21-html-forms-basic.json index 1ee44ec..92caf9b 100644 --- a/lessons/21-html-forms-basic.json +++ b/lessons/21-html-forms-basic.json @@ -10,7 +10,7 @@ "id": "form-structure", "title": "Form Structure", "description": "Every form needs a <form> wrapper. Inside, use <label> to describe inputs and <input> for user data entry.

The for attribute on labels should match the id on inputs for accessibility.", - "task": "Create a form with a text input for 'Name'. Include a label connected to the input using for/id attributes.", + "task": "Create a form with:
1. A <label> with the text 'Name:' and for=\"name\" attribute
2. A text <input> with id=\"name\" and name=\"name\" attributes", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }", "sandboxCSS": "", @@ -49,7 +49,7 @@ "id": "input-types", "title": "Input Types", "description": "Different input types provide appropriate keyboards and validation:

type=\"text\" - General text
type=\"email\" - Email with @ validation
type=\"password\" - Hidden characters
type=\"number\" - Numeric keyboard
type=\"tel\" - Phone keyboard", - "task": "Create a login form with an email input and a password input, each with proper labels.", + "task": "Create a login form with two fields:
1. An email field: <label for=\"email\">Email:</label> and <input type=\"email\" id=\"email\">
2. A password field: <label for=\"password\">Password:</label> and <input type=\"password\" id=\"password\">

Optionally wrap each in a <div class=\"form-group\"> for spacing.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }", "sandboxCSS": "", diff --git a/lessons/22-html-forms-validation.json b/lessons/22-html-forms-validation.json index 150cd9b..b5e0bdb 100644 --- a/lessons/22-html-forms-validation.json +++ b/lessons/22-html-forms-validation.json @@ -34,7 +34,7 @@ "id": "input-constraints", "title": "Input Constraints", "description": "Control what users can enter:

minlength / maxlength - Text length limits
min / max - Number range
pattern - Regex pattern matching
placeholder - Hint text (not a label!)", - "task": "Add validation: password must be 8-20 characters. Add a helpful placeholder.", + "task": "Add validation to the password input:
1. Add minlength=\"8\" for minimum length
2. Add maxlength=\"20\" for maximum length
3. Add placeholder=\"Enter password\" as a hint", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } .hint { font-size: 12px; color: #666; margin-top: 4px; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }", "sandboxCSS": "",