Login erforderlich
Melde dich an, um die komplette Lernwelt freizuschalten.
Jamies Code-Abenteuer · Schwarz-Weiß
Alles ist dunkel, klar und aufgeräumt. Sammle XP, schalte Räume frei und halte dein Journal fest. Sobald du eingeloggt bist, speichert das Backend deinen Fortschritt in SQLite.
–
Erhöht sich, wenn du Quests abschließt.
0 XP
0/100 XP bis Level 2
–
Wechsle unten: HTML, CSS oder JS.
XP basieren auf erledigten Quests. Alles wird im Backend gespeichert.
Wechsel den Modus, wenn du einen anderen Bereich übst.
Jede Woche endet mit einem Screenshot + kurzem Journal-Eintrag.
Strukturieren wie Kartenstapel – semantisch und sauber.
Nutze Überschriften, Absätze und Listen, um ein Monster zu beschreiben.
<section>, <h1-3>, Listen.alt, title, aria-label.Element: Licht
Fähigkeit: Wird aktualisiert, sobald du etwas eintippst.
Bilder, Beschriftungen und Links – erzähle eine kleine Geschichte.
<figure> + <figcaption> erklären Bilder.target, rel, sichere Navigationspfade.Formulare, Labels und eine Aufgabenliste zum Ausfüllen.
label + for.type="email" testen.Trage oben deine Heldendaten ein.
Verbessere Texte, Landmarken und Tastatur-Navigation.
<header>, <main>, <nav>.aria-label und sprechende Button-Texte.Teste mit der Tab-Taste und lese Texte laut vor. Wenn etwas unklar klingt, ergänze Kontext.
Markiere drei Elemente, die du verbessern möchtest, und schreibe Notizen.
Tipps: Prüfe Kontrast, fokussierbare Elemente, Alt-Texte.
Nur Schwarz & Weiß, klare Kontraste, animierte Details.
Definiere Variablen, teste Hintergründe und Fonts.
:root + sinnvolle Namen.Passe Farben & Schrift an.
.karte {
background: #0b0c12;
border-top: 6px solid #ffffff;
font-family: Space Grotesk;
}Sortiere Elemente wie ein Team im Kampf.
gap statt margin zwischen Kindern..arena {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
}Schwebe-Effekte mit Keyframes.
Niedrige Werte = schneller Tanz.
Nutze CSS Grid, um mehrere Karten auszurichten.
repeat(3, 1fr) vs. auto-fit.align-items, justify-items.gap..board {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, 1fr);
}Events, Arrays, Mini-Games und Debugging.
Reagiere auf Klicks und logge Ereignisse.
addEventListener.Beschworene Monster: 0
Baue dein Pokémon-Team als Liste auf.
Noch keine Mitglieder – los geht's!
Finde den goldenen Rupee.
Math.random().if/else Entscheidungen.Wähle eine Truhe:
Tippe, um dein Glück zu testen.
Simuliere eine kleine API-Antwort und zeige sie formatiert an.
Auch ohne echtes Internet kannst du JSON-Strings testen.
Checkliste: DevTools öffnen, Elemente inspizieren, Netzwerk-Tab prüfen, Fehlertexte laut vorlesen.
console.log() mit klaren Nachrichten.<input type="checkbox">.aria-label zu Inputs hinzu.Jedes Lab ist kurz und fokussiert – ideal für 10 Minuten.
flex vs. grid?== und ===?Antworten laut formulieren. Das trainiert Erklärungen.
git init, git status, git commit -m.Wiederholung macht den Unterschied – kleine, tägliche Schritte.
<header>, <main>, <footer>.label + input, textarea, select.figure + figcaption für Bilder.ul/ol für Aufzählungen, dl für Begriffe.<form>
<label for="mail">Mail</label>
<input id="mail" type="email" required />
</form>display:flex, gap, justify-content.grid-template-columns: repeat(3, 1fr).padding innen, margin außen..grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}const für feste Referenzen, let für Zähler.querySelector + Events für DOM.push, map, filter.fetch('/state').then(res => res.json()).const list = ['Pika', 'Evoli'];
const output = list.map((name) => `${name} `).join('');
document.getElementById('team').innerHTML = output;Alles was du speicherst, landet in der Datenbank. Nach Login bleibt es erhalten.
Noch nichts gespeichert.
Baue eine eigene Seite mit Monsterkarte, Galerie und Formular untereinander.
Kombiniere HTML, CSS und JS zu einem kleinen Tool (z. B. Zufallsmonster-Generator).
localStorage oder per Fetch ins Backend.[📝] Deine Reise beginnt. Logge dich ein und starte Woche 1.
Log wird mit jedem Event aktualisiert.
Bereite eine Version vor, die du auf Coolify hosten kannst.