CSS-Playground

A beginner-friendly CSS playground built using HTML, CSS and JavaScript. Practice recreating UI components by writing CSS and seeing the results update instantly no backend, no frameworks and just pure frontend development.

Features

• Live CSS editing
• Side-by-side target and preview
• Instant updates as you type
• Reset challenge at any time
• No backend required

Challenges

The playground currently includes six beginner-friendly challenges:

1. Simple Card
2. Profile Card
3. Product Card
4. Login Form
5. Pricing Card
6. Flexbox Layout

Each challenge provides:

• A target design
• A starter CSS template
• A live preview panel

The goal is to recreate the target design using your own CSS.

Project Structure

css-playground/
│
├── html/
│   ├── index.html
│   ├── challenges.html
│   └── challenge.html
│
├── css/
│   ├── style.css
│   ├── challenges.css
│   └── challenge.css
│
├── js/
│   ├── app.js
│   └── challenge.js
│
└── README.md

Technologies Used

• HTML5
• CSS3
• JavaScript (Vanilla)

No frameworks or libraries are used.

Getting Started

1. Clone this repository:

git clone https://github.com/DevOfDungeon/CSS-Playground

2. Open the project folder.

3. Open html/index.html in your browser.

That's it no installation or setup required.

License

This project is Free & Open Source and available under GPL 3.0 License

---

Made with 💚 for learning and practicing CSS.