Skip to main content

# Learn Web Development
By Writing Real Code

Master HTML, CSS, and Tailwind through hands-on exercises with instant feedback. Free and open source.

Start Learning NOW

## Why CODE CRISPIES Works

### Learn by Doing

Write real code from lesson one. No videos to watch—just you, an editor, and instant feedback on every keystroke.

### Practice at Your Pace

Start with basics, fill gaps in your understanding, then accelerate. Pick up where you left off anytime.

### Master Real Skills

Learn CSS, HTML, and Tailwind the way professionals use them—through hands-on exercises and reference guides.

### Free & Open Source

No paywall, no tracking. Optional account for cloud sync across devices. The code is open for everyone.

## Explore Learning Paths

CSS

### CSS

Styling, layout, and animations

HTML

### HTML

Semantic markup and native elements

MD

### Markdown

Lightweight markup for formatting text

JS

### JavaScript

Interactive scripting for web pages

Best on desktop or tablet (landscape). Mobile works, but larger screens make coding easier.

## Coming Soon

### Achievements

Earn badges as you master new skills. Track your learning milestones.

### Frameworks

React, Vue, and Svelte basics. Build real components step by step.

### Code Challenges

Test your skills with timed puzzles. Compete on leaderboards and earn ranks.

Want to know when new features launch?

Max once a week. Unsubscribe anytime via mail@codecrispi.es

Thanks! We'll keep you posted.

## Start Learning Today

Let's get crispy!

Free and open source. No account required. Progress saved locally.

# CSS

Styling, layout, and animations

0 of 0 lessons complete

##

CSS Editor
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

#### 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?

Don't show this again

### 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:

URL copied to clipboard!

### 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

Email
Password

Email
Password
Confirm Password

Account created! Check your email to confirm.

Enter your email to receive a password reset link.

Email

Check your email for the reset link.

or continue with