HTML & CSS Explorer 🚀

HTML & CSS Explorer is an interactive educational web platform designed to make learning web development visual, intuitive, and practical. Instead of reading plain technical definitions, learners can explore HTML tags through real-world application contexts (like Netflix UI, Portfolios, E-commerce, Blogs, and Social Media) and test CSS properties live using an embedded interactive sandbox browser.

---

🌐 Live Demo

Check out the live interactive app here: 👉 Live Demo Link

---

✨ Key Features

• 🎨 Interactive CSS Sandbox Browser: Test and tweak CSS properties in real-time within an embedded sample browser window to visualize instant layout and style changes.
• 📱 Real-World App Contexts: Learn HTML tags by seeing how they build popular real-world user interfaces:
  • Streaming Platform (e.g., Netflix): Media elements (<video>, <audio>), overlays, and media control structures.
  • Portfolio Sites: Semantic layout structures (<header>, <nav>, <section>, <footer>).
  • E-Commerce: Product cards, badges, grid layouts, and call-to-action buttons.
  • Social Media: User feeds, interactive post cards, user avatars, and comment structures.
  • Blogs & Articles: Rich text formatting (<article>, <blockquote>, <code>, <pre>).
  • Form Filling & Inputs: Comprehensive form controls (<input>, <select>, <textarea>, <label>) with visual validation styling.
• 📚 Tag Deep Dive & Explanations:
  • Detailed semantic meanings and usage guidelines for each HTML tag.
  • Clean, ready-to-copy code snippets.
  • Direct references to official documentation links on W3Schools.

---

🧩 Real-World HTML Tag Mapping

Category	Example App Context	Key HTML Tags Featured
Media & Streaming	Netflix UI	<video>, <source>, <track>, <figcaption>
User Feeds	Social Media	<article>, <button>, <svg>, <aside>
E-Commerce	Storefront & Products	<figure>, <img>, <span>, <section>
Forms & Input	Account Sign-up / Surveys	<form>, <label>, <input>, <select>, <fieldset>
Publishing	Blogs & Docs	<header>, <main>, <blockquote>, <code>, <footer>

---

📂 Project Structure

HTML-Explorer-/
├── src/                    # Source code directory
├── assets/                 # Icons, images, and static assets
├── css_sandbox.js          # Logic for the interactive CSS test browser
├── css_db.js               # CSS properties and visual database
├── teacher_db.js           # Database of HTML tag explanations and examples
├── css_templates.html      # HTML templates used for CSS testing
├── index.html              # Main HTML entry point
├── script.js               # Core application interaction logic
├── style.css               # Main styling stylesheet
├── server.ts               # Local dev server / backend script
├── package.json            # Node.js dependencies and scripts
└── vite.config.ts          # Vite configuration