🎨 Advanced CSS Visual Diagrams

A fully interactive, educational web tool built with HTML, CSS, and JavaScript to visually demonstrate core and advanced CSS concepts through diagrams, animations, and user interactions.

📁 Project Structure

• index.html
  Contains the structural layout and components for all demos including box model, positioning, float, display, z-index, flexbox, and grid.

• stylesheet.css
  Styles the interface using advanced gradients, shadows, animations, transitions, and responsive media queries. Provides visual clarity to the diagrams with vibrant UI/UX.

• index.js
  Adds interactivity and dynamic behaviors such as:

  • Drag and drop for layers
  • Live-updated CSS values
  • Interactive sliders/buttons for styling controls
  • Sound and animation effects
  • Keyboard shortcuts for quick access

🚀 Features

✅ Core CSS Visualizations

• Centering elements
• Box Model decomposition
• CSS Specificity hierarchy
• CSS Positioning types
• Display types (block, inline, inline-block)
• Float behaviors
• Z-Index layering

🔧 Flexbox Playground

• Adjust flex-direction, wrap, justify-content, align-items, align-content, gap
• Modify individual item properties like flex-grow, shrink, basis, align-self, and order
• Keyboard navigation and animations

🧱 Grid Layout Explorer

• Modify grid-template-columns and rows
• Change gaps and alignment
• Toggle grid lines and experiment with complex layouts
• Realtime code output panel

🧩 Extra Interactivity

• Drag elements across containers
• Color customization and live style updates
• Animated transitions and audio feedback

💻 How to Run

1. Clone or download the repository.
2. Open index.html in your browser.
3. Interact with the buttons, sliders, and diagrams to explore CSS behavior.

⌨️ Keyboard Shortcuts

• Ctrl + R: Reset Demo Element
• Ctrl + Z: Randomize Z-Index
• Ctrl + F: Reset Float

🔊 Sound Effects

Enable or disable sound using the 🔊/🔇 toggle button on the top right. Custom tones are played for actions, selections, and feedback.

📦 Technologies Used

• HTML5
• CSS3 (Flexbox, Grid, Animations, Media Queries)
• JavaScript (ES6+, DOM Manipulation, Web Audio API)

📚 Educational Purpose

Ideal for students, educators, and frontend developers who want to see CSS in action and interact with styling concepts beyond static tutorials.

📌 License

This project is open-source and free to use for learning and non-commercial purposes.