🖊️ CodePen Clone – Online Code Editor

A lightweight CodePen clone built using HTML, CSS, and JavaScript that allows users to write and preview HTML, CSS, and JavaScript code in real time. This project demonstrates core front-end concepts such as DOM manipulation, live rendering, and responsive UI design.

---

🚀 Features

• ✨ Live preview of HTML, CSS, and JavaScript
• 🧠 Real-time code execution
• 📱 Responsive and clean UI
• ⚡ Instant updates without page refresh
• 🎨 Separate editors for HTML, CSS, and JS

---

🛠️ Tech Stack

• HTML – Structure of the editor
• CSS – Styling and layout
• JavaScript – Live preview & logic handling

---

📂 Project Structure

📁 codepen-clone
 ├── index.html
 ├── style.css
 └── script.js

---

▶️ How to Run Locally

1. Clone the repository

   git clone https://github.com/your-username/codepen-clone.git

2. Navigate to the project folder

   cd codepen-clone

3. Open index.html in your browser

---

🎯 Learning Outcomes

• Improved understanding of JavaScript DOM manipulation
• Hands-on experience with live code rendering
• Strengthened fundamentals of frontend development
• Better UI/UX structuring using CSS

---

🔮 Future Improvements

• 💾 Save & load code snippets
• 🌙 Dark mode support
• 🔗 Shareable code links
• 🧩 Framework support (React/Vue)

---

🙌 Acknowledgements

Inspired by CodePen, built for learning and practice purposes.

---

📬 Contact

If you liked this project or have suggestions, feel free to connect with me on LinkedIn or check out my other repositories 🚀

---