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 browse lesson modules. Each module covers a specific topic with progressive exercises.
Completing Lessons
- Read the task instructions on the left
- Write your code in the editor
- Watch the live preview update as you type
- Follow hints to fix any issues
- Click Next when complete
Editor Tools
- ↶ Undo / ↷ Redo - Navigate edit history
- ⟲ Reset - Restore initial code for current lesson
- Show Expected - Toggle the target result overlay
Keyboard Shortcuts
- Ctrl+Enter - Validate immediately
- Ctrl+Z - Undo
- Ctrl+Shift+Z - Redo
Emmet Shortcuts (HTML mode)
Type abbreviations and press Tab to expand:
- div.box → div with class
- ul>li*3 → ul with 3 li children
- form>input+button → nested structure
- p{Hello} → p with text content
