StyleDuel

StyleDuel is an open-source browser extension that transforms any live website

into an interactive CSS challenge.

🎯 The Problem

CSS is one of the hardest skills to learn by doing. Existing tools like

CSSBattle use static pre-made targets that feel disconnected from real-world UI.

Developers need practice with real, production-grade interfaces.

💡 The Solution

StyleDuel lets you:

- Visit any website (Spotify, Airbnb, GitHub, etc.)

- Select any section of the page

- Strip its CSS instantly

- Recreate the styles in a live sidebar editor

- Get a real-time accuracy score vs the original

🔧 How It Works

1. Extension detects the page DOM

2. User selects a component/section

3. Extension isolates and removes that section's styles

4. A split-panel editor opens with the unstyled HTML

5. User writes CSS live — the panel updates in real time

6. Accuracy is scored by comparing computed styles

🛠 Tech Stack

- JavaScript (Vanilla) — DOM manipulation & style extraction

- Chrome Extension APIs (Manifest V3)

- CodeMirror — in-extension code editor

- CSS Computed Style API — for accuracy scoring

- Open source — MIT License

🌍 Open Source Impact

- Completely free, no login required

- Community can submit "featured challenges" from popular websites

- Helps beginners learn CSS on real-world UIs

- Contributes to open web education

🗓 30-Day Roadmap

- Week 1: Extension shell + DOM section selector

- Week 2: CSS stripping + live editor sidebar

- Week 3: Accuracy scoring engine

- Week 4: UI polish + featured challenges + demo video