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 d5c572b8de
commit 7bbd2d9efd
2 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>