public/code-crispies
2
1
Fork 0
Code Issues 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 901c584145
commit 83d1bb4d18
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>

44
src/index.html
View File

@@ -145,34 +145,48 @@
<button id="help-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
</div>
<div class="dialog-content">
<h4>How to Use Code Crispies</h4>
<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
<h4>About Code Crispies</h4>
<p>Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!</p>
<h4>Learning Modes</h4>
<ul>
<li><strong>CSS</strong> - Write CSS rules to style elements</li>
<li><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
<li><strong>HTML</strong> - Practice semantic markup and native elements</li>
</ul>
<h4>Getting Started</h4>
<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
<p>Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.</p>
<h4>Completing Lessons</h4>
<ol>
<li>Read the instructions on the left</li>
<li>Read the task instructions on the left</li>
<li>Write your code in the editor</li>
<li>Click "Run" or press Ctrl+Enter to test</li>
<li>Follow the hints to fix any issues</li>
<li>Click "Next" when you're done</li>
<li>Click <strong>Run</strong> or press <kbd>Ctrl+Enter</kbd> to test</li>
<li>Follow hints to fix any issues</li>
<li>Click <strong>Next</strong> when complete</li>
</ol>
<h4>Tips</h4>
<h4>Editor Tools</h4>
<ul>
<li>Click "Show Expected" to see the target result</li>
<li>Your progress is saved automatically</li>
<li>Ctrl+Enter runs your code</li>
<li><strong>↶ Undo</strong> / <strong>↷ Redo</strong> - Navigate edit history</li>
<li><strong>⟲ Reset</strong> - Restore initial code for current lesson</li>
<li><strong>Show Expected</strong> - Toggle the target result overlay</li>
</ul>
<h4>Keyboard Shortcuts</h4>
<ul>
<li><kbd>Ctrl+Enter</kbd> - Run your code</li>
<li><kbd>Ctrl+Z</kbd> - Undo</li>
<li><kbd>Ctrl+Shift+Z</kbd> - Redo</li>
</ul>
<h4>Emmet Shortcuts (HTML mode)</h4>
<p>Type abbreviations and press Tab to expand:</p>
<p>Type abbreviations and press <kbd>Tab</kbd> to expand:</p>
<ul>
<li><kbd>div.container</kbd> → div with class</li>
<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
<li><kbd>div.box</kbd> → div with class</li>
<li><kbd>ul>li*3</kbd> → ul with 3 li children</li>
<li><kbd>form>input+button</kbd> → nested structure</li>
<li><kbd>p{Hello}</kbd> → p with text content</li>
</ul>
</div>