public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

docs: expand help dialog with learning modes and editor tools

Browse Source 
- Add About section mentioning open-source and no account required
- Add Learning Modes section (CSS, Tailwind, HTML)
- Add Editor Tools section (undo, redo, reset, show expected)
- Add dedicated Keyboard Shortcuts section
- Update Emmet examples to be more practical
This commit is contained in:
Michael Czechowski
2025-12-30 14:54:43 +01:00
parent 51b6645c8f
commit 68f93d1b77
2 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/index.de.html
View File

@@ -145,34 +145,48 @@
<button id="help-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
</div>
<div class="dialog-content">
<h4>So verwendest du Code Crispies</h4>
<p>Code Crispies ist eine interaktive Plattform zum Lernen von HTML, CSS und Tailwind durch praktische Übungen.</p>
<h4>Über Code Crispies</h4>
<p>Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!</p>
<h4>Lernmodi</h4>
<ul>
<li><strong>CSS</strong> - Schreibe CSS-Regeln zum Stylen von Elementen</li>
<li><strong>Tailwind</strong> - Wende Utility-Klassen direkt im HTML an</li>
<li><strong>HTML</strong> - Übe semantisches Markup und native Elemente</li>
</ul>
<h4>Erste Schritte</h4>
<p>Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.</p>
<p>Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.</p>
<h4>Lektionen abschließen</h4>
<ol>
<li>Lies die Anleitung auf der linken Seite</li>
<li>Lies die Aufgabenstellung auf der linken Seite</li>
<li>Schreibe deinen Code im Editor</li>
<li>Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen</li>
<li>Klicke auf <strong>Ausführen</strong> oder drücke <kbd>Strg+Enter</kbd></li>
<li>Folge den Hinweisen, um Fehler zu beheben</li>
<li>Klicke auf "Weiter", wenn du fertig bist</li>
<li>Klicke auf <strong>Weiter</strong>, wenn du fertig bist</li>
</ol>
<h4>Tipps</h4>
<h4>Editor-Werkzeuge</h4>
<ul>
<li>Klicke auf "Lösung zeigen", um das Zielergebnis zu sehen</li>
<li>Dein Fortschritt wird automatisch gespeichert</li>
<li>Strg+Enter führt deinen Code aus</li>
<li><strong>↶ Rückgängig</strong> / <strong>↷ Wiederholen</strong> - Bearbeitungsverlauf navigieren</li>
<li><strong>⟲ Zurücksetzen</strong> - Ursprünglichen Code wiederherstellen</li>
<li><strong>Lösung zeigen</strong> - Zielergebnis ein-/ausblenden</li>
</ul>
<h4>Tastenkürzel</h4>
<ul>
<li><kbd>Strg+Enter</kbd> - Code ausführen</li>
<li><kbd>Strg+Z</kbd> - Rückgängig</li>
<li><kbd>Strg+Umschalt+Z</kbd> - Wiederholen</li>
</ul>
<h4>Emmet-Kürzel (HTML-Modus)</h4>
<p>Tippe Abkürzungen und drücke Tab zum Erweitern:</p>
<p>Tippe Abkürzungen und drücke <kbd>Tab</kbd> zum Erweitern:</p>
<ul>
<li><kbd>div.container</kbd> → div mit Klasse</li>
<li><kbd>ul>li*5</kbd> → ul mit 5 li-Kindern</li>
<li><kbd>nav>ul>li*3>a</kbd> → verschachtelte Struktur</li>
<li><kbd>div.box</kbd> → div mit Klasse</li>
<li><kbd>ul>li*3</kbd> → ul mit 3 li-Kindern</li>
<li><kbd>form>input+button</kbd> → verschachtelte Struktur</li>
<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
</ul>
</div>