Your Output

Help

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

Jump to: CSS | HTML | Reference

Getting Started

Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.

Completing Lessons

  1. Read the task instructions on the left
  2. Write your code in the editor
  3. Watch the live preview update as you type
  4. Follow hints to fix any issues
  5. 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+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 LibreTECH

  • Gitea – Self-hosted source repository
  • GitHub – Public mirror
  • LinkedIn – Michael Czechowski

Support the Project

Help keep CODE CRISPIES free and open source.

Reset Code

Reset your code to the initial state for this lesson?

Reset Progress

Are you sure you want to reset all your progress? This cannot be undone.

Delete Account

Are you sure you want to delete your account? All your cloud progress will be permanently deleted. This cannot be undone.

Share Lesson

Copy this URL to share the current lesson:

Privacy Policy

CODE CRISPIES respects your privacy. This policy explains what data we collect and how we use it.

Local Storage

Your learning progress, code, and settings are stored locally in your browser. This data never leaves your device unless you create an account.

Account Data (Optional)

If you create an account, we store your email address and encrypted password to enable cloud sync. Your progress data is synced to our servers (Supabase) so you can access it across devices.

Newsletter (Optional)

If you subscribe to our newsletter, we store your email address to send updates about new features. You can unsubscribe anytime.

No Tracking

We do not use cookies for tracking, analytics, or advertising. We do not share your data with third parties.

Your Rights (GDPR)

You can delete your account and all associated data at any time from the sidebar menu. For questions or data requests, contact us at mail@codecrispi.es

Last updated: January 2025

Imprint

Responsible for content

Michael Czechowski
Schnellweg 3
70199 Stuttgart
Germany

Contact

Email: mail@codecrispi.es
Website: librete.ch

Disclaimer

CODE CRISPIES is provided "as is" without warranty. We are not liable for any damages arising from the use of this service. External links are provided for convenience; we are not responsible for their content.

Log In

or continue with