-
So verwendest du Code Crispies
-
Code Crispies ist eine interaktive Plattform zum Lernen von HTML, CSS und Tailwind durch praktische Übungen.
+
Über Code Crispies
+
Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!
+
+
Lernmodi
+
+ - CSS - Schreibe CSS-Regeln zum Stylen von Elementen
+ - Tailwind - Wende Utility-Klassen direkt im HTML an
+ - HTML - Übe semantisches Markup und native Elemente
+
Erste Schritte
-
Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.
+
Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.
Lektionen abschließen
- - Lies die Anleitung auf der linken Seite
+ - Lies die Aufgabenstellung auf der linken Seite
- Schreibe deinen Code im Editor
- - Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen
+ - Klicke auf Ausführen oder drücke Strg+Enter
- Folge den Hinweisen, um Fehler zu beheben
- - Klicke auf "Weiter", wenn du fertig bist
+ - Klicke auf Weiter, wenn du fertig bist
-
Tipps
+
Editor-Werkzeuge
- - Klicke auf "Lösung zeigen", um das Zielergebnis zu sehen
- - Dein Fortschritt wird automatisch gespeichert
- - Strg+Enter führt deinen Code aus
+ - ↶ Rückgängig / ↷ Wiederholen - Bearbeitungsverlauf navigieren
+ - ⟲ Zurücksetzen - Ursprünglichen Code wiederherstellen
+ - Lösung zeigen - Zielergebnis ein-/ausblenden
+
+
+
Tastenkürzel
+
+ - Strg+Enter - Code ausführen
+ - Strg+Z - Rückgängig
+ - Strg+Umschalt+Z - Wiederholen
Emmet-Kürzel (HTML-Modus)
-
Tippe Abkürzungen und drücke Tab zum Erweitern:
+
Tippe Abkürzungen und drücke Tab zum Erweitern:
- - div.container → div mit Klasse
- - ul>li*5 → ul mit 5 li-Kindern
- - nav>ul>li*3>a → verschachtelte Struktur
+ - div.box → div mit Klasse
+ - ul>li*3 → ul mit 3 li-Kindern
+ - form>input+button → verschachtelte Struktur
- p{Hallo} → p mit Textinhalt
-
How to Use Code Crispies
-
Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.
+
About Code Crispies
+
Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!
+
+
Learning Modes
+
+ - CSS - Write CSS rules to style elements
+ - Tailwind - Apply utility classes directly in HTML
+ - HTML - Practice semantic markup and native elements
+
Getting Started
-
Open the menu (☰) to select a lesson module. Each module contains a series of lessons.
+
Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.
Completing Lessons
- - Read the instructions on the left
+ - Read the task instructions on the left
- Write your code in the editor
- - Click "Run" or press Ctrl+Enter to test
- - Follow the hints to fix any issues
- - Click "Next" when you're done
+ - Click Run or press Ctrl+Enter to test
+ - Follow hints to fix any issues
+ - Click Next when complete
-
Tips
+
Editor Tools
- - Click "Show Expected" to see the target result
- - Your progress is saved automatically
- - Ctrl+Enter runs your code
+ - ↶ Undo / ↷ Redo - Navigate edit history
+ - ⟲ Reset - Restore initial code for current lesson
+ - Show Expected - Toggle the target result overlay
+
+
+
Keyboard Shortcuts
+
+ - Ctrl+Enter - Run your code
+ - Ctrl+Z - Undo
+ - Ctrl+Shift+Z - Redo
Emmet Shortcuts (HTML mode)
-
Type abbreviations and press Tab to expand:
+
Type abbreviations and press Tab to expand:
- - div.container → div with class
- - ul>li*5 → ul with 5 li children
- - nav>ul>li*3>a → nested structure
+ - div.box → div with class
+ - ul>li*3 → ul with 3 li children
+ - form>input+button → nested structure
- p{Hello} → p with text content