diff --git a/lessons/03-colors.json b/lessons/03-colors.json index 1aee288..11f0884 100644 --- a/lessons/03-colors.json +++ b/lessons/03-colors.json @@ -9,7 +9,7 @@ "id": "colors-1", "title": "Background Color", "description": "Color is one of the most powerful tools in web design. It creates visual hierarchy, conveys meaning, and establishes brand identity. CSS provides multiple ways to specify colors.

CSS named colors: CSS includes 147 named colors like steelblue, coral, gold, and tomato. These are easy to remember and read.

The background-color property: Sets the fill color behind an element's content and padding areas.

.card {\n  background-color: lightblue;\n}
", - "task": "This notification card needs a subtle background. Set background-color: seashell on .alert.", + "task": "This notification card needs a subtle background. Add background-color: seashell.", "previewHTML": "
New message

You have 3 unread notifications

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; border-left: 4px solid coral; border-radius: 4px; } .alert strong { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }", "sandboxCSS": "", @@ -30,7 +30,7 @@ "id": "colors-2", "title": "Text Color", "description": "The color property sets the color of text content. Good contrast between text and background is essential for readability and accessibility.", - "task": "Make the alert title stand out by setting color: coral on .title.", + "task": "Make the alert title stand out. Add color: coral.", "previewHTML": "
Warning

Your session will expire in 5 minutes

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .alert { padding: 1rem; background-color: seashell; border-left: 4px solid coral; border-radius: 4px; } .alert .title { display: block; margin-bottom: 4px; } .alert p { margin: 0; color: #666; font-size: 0.9rem; }", "sandboxCSS": "", @@ -51,7 +51,7 @@ "id": "colors-3", "title": "Border Color", "description": "Borders can have their own color using border-color. This is useful when you want to change just the color without redefining the entire border.", - "task": "This card needs an accent border. Set border-color: coral on .card.", + "task": "This card needs an accent border. Add border-color: coral.", "previewHTML": "

Premium Plan

Unlimited access to all features

", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; background: #f5f5f5; } .card { padding: 1rem; background: white; border: 4px solid #ddd; border-radius: 8px; } .card h3 { margin: 0 0 8px; } .card p { margin: 0; color: #666; }", "sandboxCSS": "", @@ -72,7 +72,7 @@ "id": "colors-4", "title": "Hex Colors", "description": "Beyond named colors, CSS supports hex codes (#ff6347), RGB (rgb(255, 99, 71)), and HSL (hsl(9, 100%, 64%)). Hex codes are the most common format in professional projects.", - "task": "Set the badge background to gold using its hex code: background-color: #ffd700.", + "task": "Set the badge background to gold using its hex code. Add background-color: #ffd700.", "previewHTML": "NEW", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; color: #333; }", "sandboxCSS": "",