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
More Projects
-
HTML over JS
- Learn to leverage native HTML elements instead of custom JavaScript solutions
-
Web Engineering Mandala
- Interactive visualization of JavaScript technologies organized by complexity
Contact & Links
Code Crispies is developed by librete.ch
