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": "Verwende aussagekräftige HTML-Elemente zur korrekten Strukturierung von Inhalten.",
7
+
"difficulty": "beginner",
8
+
"lessons": [
9
+
{
10
+
"id": "semantic-1",
11
+
"title": "Das <article>-Element",
12
+
"description": "The <kbd><article></kbd> element represents self-contained content that could be distributed independently, like a blog post, news article, or comment.<br><br><pre><article>\n <h2>Article Title</h2>\n <p>Article content...</p>\n</article></pre>",
13
+
"task": "Umschließe den Blogpost-Inhalt mit einem <kbd><article></kbd>-Element.",
"initialCode": "<h2>My First Post</h2>\n<p>This is a blog post about learning HTML.</p>",
19
+
"codeSuffix": "",
20
+
"solution": "<article>\n<h2>My First Post</h2>\n<p>This is a blog post about learning HTML.</p>\n</article>",
21
+
"previewContainer": "preview-area",
22
+
"validations": [
23
+
{
24
+
"type": "contains",
25
+
"value": "<article>",
26
+
"message": "Füge ein öffnendes <kbd><article></kbd>-Tag hinzu"
27
+
},
28
+
{
29
+
"type": "contains",
30
+
"value": "</article>",
31
+
"message": "Füge ein schließendes <kbd></article></kbd>-Tag hinzu"
32
+
}
33
+
]
34
+
},
35
+
{
36
+
"id": "semantic-2",
37
+
"title": "Das <section>-Element",
38
+
"description": "The <kbd><section></kbd> element represents a thematic grouping of content, typically with a heading. Use it to divide a page into logical sections.<br><br><pre><section>\n <h2>Features</h2>\n <p>Our product features...</p>\n</section></pre>",
39
+
"task": "Umschließe den Features-Inhalt mit einem <kbd><section></kbd>-Element.",
"initialCode": "<h2>Features</h2>\n<ul>\n <li>Fast performance</li>\n <li>Easy to use</li>\n</ul>",
45
+
"codeSuffix": "",
46
+
"solution": "<section>\n<h2>Features</h2>\n<ul>\n <li>Fast performance</li>\n <li>Easy to use</li>\n</ul>\n</section>",
47
+
"previewContainer": "preview-area",
48
+
"validations": [
49
+
{
50
+
"type": "contains",
51
+
"value": "<section>",
52
+
"message": "Füge ein öffnendes <kbd><section></kbd>-Tag hinzu"
53
+
},
54
+
{
55
+
"type": "contains",
56
+
"value": "</section>",
57
+
"message": "Füge ein schließendes <kbd></section></kbd>-Tag hinzu"
58
+
}
59
+
]
60
+
},
61
+
{
62
+
"id": "semantic-3",
63
+
"title": "Das <aside>-Element",
64
+
"description": "The <kbd><aside></kbd> element represents content tangentially related to the main content, like sidebars, pull quotes, or related links.<br><br><pre><aside>\n <h3>Related</h3>\n <ul>...</ul>\n</aside></pre>",
65
+
"task": "Umschließe die verwandten Links mit einem <kbd><aside></kbd>-Element.",
"description": "Lerne Variablen mit let und const zu deklarieren und mit grundlegenden Datentypen in JavaScript zu arbeiten",
6
+
"mode": "javascript",
7
+
"difficulty": "beginner",
8
+
"lessons": [
9
+
{
10
+
"id": "js-const",
11
+
"title": "Konstanten",
12
+
"description": "Use <kbd>const</kbd> to declare a variable that cannot be reassigned. Constants are the default choice for most values in modern JavaScript.",
13
+
"task": "Deklariere eine Konstante namens <kbd>name</kbd> mit dem Wert <kbd>\"Alice\"</kbd>",
"message": "Verwende <kbd>const</kbd> zur Deklaration"
27
+
},
28
+
{
29
+
"type": "regex",
30
+
"value": "const\\s+name\\s*=",
31
+
"message": "Deklariere eine Konstante namens <kbd>name</kbd>"
32
+
},
33
+
{
34
+
"type": "regex",
35
+
"value": "\"Alice\"|'Alice'|`Alice`",
36
+
"message": "Setze den Wert auf <kbd>\"Alice\"</kbd>"
37
+
}
38
+
]
39
+
},
40
+
{
41
+
"id": "js-let",
42
+
"title": "Let-Variablen",
43
+
"description": "Use <kbd>let</kbd> to declare variables that you plan to reassign later. Unlike <kbd>const</kbd>, a <kbd>let</kbd> variable can change its value.",
44
+
"task": "Deklariere eine Variable <kbd>count</kbd> mit <kbd>let</kbd> auf <kbd>0</kbd>, dann weise ihr <kbd>5</kbd> zu.",
"message": "Beginne mit <kbd>let count = 0;</kbd>"
58
+
},
59
+
{
60
+
"type": "regex",
61
+
"value": "count\\s*=\\s*5",
62
+
"message": "Weise count erneut <kbd>5</kbd> zu"
63
+
}
64
+
]
65
+
},
66
+
{
67
+
"id": "js-string",
68
+
"title": "Template-Literale",
69
+
"description": "Template literals use backticks <kbd>`</kbd> and <kbd>${}</kbd> to embed expressions inside strings. This makes building dynamic text much easier than string concatenation.",
70
+
"task": "Erstelle eine Konstante <kbd>msg</kbd> mit einem Template-Literal: <kbd>`Hello, ${name}!`</kbd>",
"message": "Deklariere eine Konstante namens <kbd>msg</kbd>"
84
+
},
85
+
{
86
+
"type": "contains",
87
+
"value": "${name}",
88
+
"message": "Verwende <kbd>${name}</kbd> in Backticks zum Einbetten der Variable"
89
+
},
90
+
{
91
+
"type": "regex",
92
+
"value": "`.*\\$\\{name\\}.*`",
93
+
"message": "Umschließe den ganzen String mit Backticks <kbd>`</kbd>"
94
+
}
95
+
]
96
+
},
97
+
{
98
+
"id": "js-array",
99
+
"title": "Arrays",
100
+
"description": "Arrays store ordered lists of values in square brackets. Access items by index (starting at 0) and use <kbd>.length</kbd> to get the count.",
101
+
"task": "Erstelle eine Konstante <kbd>colors</kbd> mit einem Array: <kbd>[\"red\", \"green\", \"blue\"]</kbd>",
"description": "Lerne HTML-Elemente mit JavaScript-DOM-Methoden wie querySelector auszuwählen und zu verändern",
6
+
"mode": "javascript",
7
+
"difficulty": "beginner",
8
+
"lessons": [
9
+
{
10
+
"id": "js-query",
11
+
"title": "querySelector",
12
+
"description": "Use <kbd>document.querySelector()</kbd> to find the first element matching a CSS selector. It returns a single element you can then modify.",
13
+
"task": "Wähle das <kbd>h1</kbd>-Element aus und speichere es in einer Konstante namens <kbd>title</kbd>",
"message": "Verwende <kbd>querySelector</kbd> zum Finden des Elements"
58
+
},
59
+
{
60
+
"type": "contains",
61
+
"value": "textContent",
62
+
"message": "Verwende die <kbd>textContent</kbd>-Eigenschaft"
63
+
},
64
+
{
65
+
"type": "regex",
66
+
"value": "(\"Done!\"|'Done!'|`Done!`)",
67
+
"message": "Setze den Text auf <kbd>\"Done!\"</kbd>"
68
+
}
69
+
]
70
+
},
71
+
{
72
+
"id": "js-style",
73
+
"title": "Inline-Styles",
74
+
"description": "Access the <kbd>style</kbd> property to set inline CSS on an element. CSS properties with dashes become camelCase: <kbd>background-color</kbd> becomes <kbd>backgroundColor</kbd>.",
75
+
"task": "Wähle das <kbd>.box</kbd>-Element aus und setze sein <kbd>style.color</kbd> auf <kbd>\"coral\"</kbd>",
"message": "Verwende <kbd>querySelector</kbd> zum Finden des Elements"
89
+
},
90
+
{
91
+
"type": "contains",
92
+
"value": ".style.",
93
+
"message": "Verwende die <kbd>.style</kbd>-Eigenschaft für CSS"
94
+
},
95
+
{
96
+
"type": "regex",
97
+
"value": "style\\.color\\s*=",
98
+
"message": "Setze <kbd>style.color</kbd> am Element"
99
+
},
100
+
{
101
+
"type": "regex",
102
+
"value": "(\"coral\"|'coral'|`coral`)",
103
+
"message": "Setze die Farbe auf <kbd>\"coral\"</kbd>"
104
+
}
105
+
]
106
+
},
107
+
{
108
+
"id": "js-classlist",
109
+
"title": "classList",
110
+
"description": "The <kbd>classList</kbd> property provides methods to add, remove, or toggle CSS classes on an element without touching other classes.",
111
+
"task": "Wähle das <kbd>.card</kbd>-Element aus und füge die Klasse <kbd>\"active\"</kbd> mit <kbd>classList.add()</kbd> hinzu",
0 commit comments