You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
"description": "Lerne, wie man Farben auf Text und Hintergründe mit CSS-Eigenschaften anwendet.",
6
+
"difficulty": "beginner",
7
+
"lessons": [
8
+
{
9
+
"id": "colors-1",
10
+
"title": "Hintergrundfarbe",
11
+
"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.<br><br><strong>CSS named colors:</strong> CSS includes 147 named colors like <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd>, and <kbd>tomato</kbd>. These are easy to remember and read.<br><br><strong>The background-color property:</strong> Sets the fill color behind an element's content and padding areas.<br><br><pre>.card {\n background-color: lightblue;\n}</pre>",
12
+
"task": "Diese Benachrichtigungskarte sieht kahl aus. Gib ihr eine warme, sanfte Hintergrundfarbe.",
13
+
"previewHTML": "<div class=\"alert\"><strong>New message</strong><p>You have 3 unread notifications</p></div>",
"message": "Welche Eigenschaft füllt den Bereich hinter dem Inhalt? Probiere eine warme, weiche Farbe",
26
+
"options": {
27
+
"caseSensitive": false
28
+
}
29
+
}
30
+
]
31
+
},
32
+
{
33
+
"id": "colors-2",
34
+
"title": "Textfarbe",
35
+
"description": "The <kbd>color</kbd> property sets the color of text content. Good contrast between text and background is essential for readability and accessibility.",
36
+
"task": "Der Alarm-Titel verschwimmt mit dem Fließtext. Lass ihn mit einer warmen Akzentfarbe hervorstechen.",
37
+
"previewHTML": "<div class=\"alert\"><strong class=\"title\">Warning</strong><p>Your session will expire in 5 minutes</p></div>",
"message": "Welche Eigenschaft ändert die Textfarbe? Probiere eine warme, lebendige Farbe",
50
+
"options": {
51
+
"caseSensitive": false
52
+
}
53
+
}
54
+
]
55
+
},
56
+
{
57
+
"id": "colors-3",
58
+
"title": "Rahmenfarbe",
59
+
"description": "Borders can have their own color using <kbd>border-color</kbd>. This is useful when you want to change just the color without redefining the entire border.",
60
+
"task": "Der Rahmen ist langweilig grau. Gib ihm eine warme Akzentfarbe.",
61
+
"previewHTML": "<article class=\"card\"><h3>Premium Plan</h3><p>Unlimited access to all features</p></article>",
"message": "Welche Eigenschaft ändert nur die Rahmenfarbe? Probiere eine warme, lebendige Farbe",
74
+
"options": {
75
+
"caseSensitive": false
76
+
}
77
+
}
78
+
]
79
+
},
80
+
{
81
+
"id": "colors-4",
82
+
"title": "Hex-Farben",
83
+
"description": "Beyond named colors, CSS supports hex codes (<kbd>#ff6347</kbd>), RGB (<kbd>rgb(255, 99, 71)</kbd>), and HSL (<kbd>hsl(9, 100%, 64%)</kbd>). Hex codes are the most common format in professional projects.",
84
+
"task": "Dieses Abzeichen braucht einen goldenen Hintergrund. Verwende einen Hex-Farbcode.",
"description": "Lerne, das Erscheinungsbild von Text durch Schriftauswahl, Größe, Abstände und Effekte zu steuern.",
6
+
"difficulty": "beginner",
7
+
"lessons": [
8
+
{
9
+
"id": "monospace-font",
10
+
"title": "Monospace-Schriften",
11
+
"description": "Different font families create different visual impressions. <kbd>monospace</kbd> fonts have equal-width characters, making them perfect for displaying code, data, or keyboard shortcuts.<br><br>Every computer has a monospace font built in, so <kbd>font-family: monospace</kbd> always works. This makes it a safe choice for inline code in any web project.",
12
+
"task": "Style den Inline-Code mit einer Monospace-Schrift. Füge <kbd>font-family: monospace</kbd> hinzu.",
13
+
"previewHTML": "<article>\n <h3>Quick Tip</h3>\n <p>Press <span class=\"code\">Ctrl + S</span> to save your work, or <span class=\"code\">Ctrl + Z</span> to undo.</p>\n</article>",
"message": "Setze font-family auf <kbd>monospace</kbd>"
29
+
}
30
+
]
31
+
},
32
+
{
33
+
"id": "font-size-line-height",
34
+
"title": "Lesbarer Fließtext",
35
+
"description": "Good typography is invisible—readers focus on content, not struggling to read it. Two properties work together for readability:<br><br><kbd>font-size</kbd> controls how big the text appears. For body text, <kbd>1rem</kbd> (16px by default) is a comfortable starting point.<br><br><kbd>line-height</kbd> sets the space between lines. A value of <kbd>1.6</kbd> means the line height is 1.6 times the font size—giving text room to breathe.",
36
+
"task": "Mach den Text angenehm lesbar. Füge <kbd>font-size: 1rem</kbd> und <kbd>line-height: 1.6</kbd> hinzu.",
37
+
"previewHTML": "<article>\n <h2>The Art of Coffee</h2>\n <p>Great coffee starts with quality beans. The roast level affects flavor—light roasts are fruity and acidic, while dark roasts are bold and smoky.</p>\n <p>Water temperature matters too. Brew between 90-96°C for optimal extraction. Too hot burns the coffee; too cold leaves it weak.</p>\n</article>",
"description": "Font weight controls how thick or thin text appears. Common values include:<br><br>• <kbd>normal</kbd> (400) — default body text<br>• <kbd>bold</kbd> (700) — strong emphasis<br>• <kbd>lighter</kbd> / <kbd>bolder</kbd> — relative to parent<br><br>Card titles and headings often use bold text to create visual hierarchy and draw attention to key information.",
68
+
"task": "Lass den Karten-Titel hervorstechen. Füge <kbd>font-weight: bold</kbd> hinzu.",
69
+
"previewHTML": "<article class=\"card\">\n <span class=\"title\">Weekend Special</span>\n <p>Fresh pastries and artisan coffee, 20% off all items this Saturday and Sunday.</p>\n</article>",
"message": "Setze font-weight auf <kbd>bold</kbd>"
85
+
}
86
+
]
87
+
},
88
+
{
89
+
"id": "text-transform",
90
+
"title": "Großbuchstaben-Labels",
91
+
"description": "The <kbd>text-transform</kbd> property changes text capitalization without editing the HTML. This keeps content semantic while styling it differently:<br><br>• <kbd>uppercase</kbd> — ALL CAPS (great for labels, buttons)<br>• <kbd>lowercase</kbd> — all lowercase<br>• <kbd>capitalize</kbd> — First Letter Of Each Word<br><br>Combined with <kbd>letter-spacing</kbd>, uppercase text creates a clean, modern label style often used in UI design.",
92
+
"task": "Style die Tag-Labels. Füge <kbd>text-transform: uppercase</kbd> und <kbd>letter-spacing: 1px</kbd> hinzu.",
93
+
"previewHTML": "<article>\n <div class=\"tags\">\n <span class=\"tag\">Design</span>\n <span class=\"tag\">CSS</span>\n <span class=\"tag\">Tutorial</span>\n </div>\n <h3>Getting Started with Typography</h3>\n <p>Learn the fundamentals of web typography in this beginner-friendly guide.</p>\n</article>",
"message": "Setze text-transform auf <kbd>uppercase</kbd>"
109
+
},
110
+
{
111
+
"type": "property_value",
112
+
"value": {
113
+
"property": "letter-spacing",
114
+
"expected": "1px"
115
+
},
116
+
"message": "Setze letter-spacing auf <kbd>1px</kbd>"
117
+
}
118
+
]
119
+
},
120
+
{
121
+
"id": "text-decoration",
122
+
"title": "Text-Dekoration",
123
+
"description": "The <kbd>text-decoration</kbd> property adds lines to text. Common values:<br><br>• <kbd>underline</kbd> — line below text<br>• <kbd>line-through</kbd> — strikethrough<br>• <kbd>none</kbd> — removes decoration (useful for links)<br><br>You can also style decorations with <kbd>text-decoration-color</kbd> and <kbd>text-decoration-style</kbd>.",
124
+
"task": "Zeige den alten Preis durchgestrichen. Füge <kbd>text-decoration: line-through</kbd> hinzu.",
"message": "Setze text-decoration auf <kbd>line-through</kbd>"
141
+
}
142
+
]
143
+
},
144
+
{
145
+
"id": "text-shadow",
146
+
"title": "Text-Schatten",
147
+
"description": "The <kbd>text-shadow</kbd> property adds shadow effects to text. The syntax is:<br><br><pre>text-shadow: x-offset y-offset blur color;</pre><br>Example: <kbd>text-shadow: 2px 2px 4px gray</kbd> creates a soft shadow offset down and right.",
148
+
"task": "Gib der Überschrift Tiefe mit <kbd>text-shadow: 2px 2px 4px gray</kbd>.",
"description": "Erstelle weiche Farbübergänge mit CSS-Verläufen.",
6
+
"difficulty": "intermediate",
7
+
"lessons": [
8
+
{
9
+
"id": "gradients-1",
10
+
"title": "Linearer Verlauf",
11
+
"description": "Gradients create smooth transitions between colors. The <kbd>linear-gradient()</kbd> function creates a gradient along a straight line.<br><br><strong>Basic syntax:</strong><br><pre>background: linear-gradient(color1, color2);</pre><br>By default, gradients flow from top to bottom.",
12
+
"task": "Füge einen Verlauf-Hintergrund von <kbd>coral</kbd> nach <kbd>gold</kbd> hinzu.",
13
+
"previewHTML": "<div class=\"card\"><h3>Summer Sale</h3><p>Up to 50% off</p></div>",
"message": "Setze <kbd>coral</kbd> als erste Farbe"
31
+
},
32
+
{
33
+
"type": "contains",
34
+
"value": "gold",
35
+
"message": "Setze <kbd>gold</kbd> als zweite Farbe"
36
+
}
37
+
]
38
+
},
39
+
{
40
+
"id": "gradients-2",
41
+
"title": "Verlauf-Richtung",
42
+
"description": "Control the gradient direction by adding an angle or keyword before the colors.<br><br><strong>Keywords:</strong> <kbd>to right</kbd>, <kbd>to left</kbd>, <kbd>to bottom right</kbd><br><strong>Angles:</strong> <kbd>45deg</kbd>, <kbd>90deg</kbd>, <kbd>180deg</kbd><br><br><pre>background: linear-gradient(to right, blue, purple);</pre>",
43
+
"task": "Lass den Verlauf von links nach rechts fließen mit <kbd>to right</kbd>.",
"message": "Füge <kbd>to right</kbd> für die Richtung hinzu"
57
+
}
58
+
]
59
+
},
60
+
{
61
+
"id": "gradients-3",
62
+
"title": "Radialer Verlauf",
63
+
"description": "The <kbd>radial-gradient()</kbd> function creates a gradient that radiates from a center point outward in a circular or elliptical pattern.<br><br><pre>background: radial-gradient(circle, white, steelblue);</pre><br>Add <kbd>circle</kbd> for a perfect circular gradient.",
64
+
"task": "Erstelle einen radialen Verlauf von <kbd>white</kbd> zu <kbd>steelblue</kbd>.",
0 commit comments