HTMLs - Interactive Web Demos

A collection of interactive HTML demonstrations created with AI assistance, showcasing various web technologies and visualization libraries.

📁 Repository Contents

This repository contains three interactive HTML demonstrations:

🎮 interactive_three_js.html

An interactive 3D visualization built with Three.js

• Technology: Three.js WebGL library
• Features: 3D graphics, interactive controls, real-time rendering
• Description: Demonstrates 3D scene creation, object manipulation, and user interaction in a web browser
• Use Case: 3D visualization, gaming elements, immersive web experiences

📊 interactive_with_d3.html

Data visualization demo using D3.js

• Technology: D3.js data visualization library
• Features: Interactive charts, data binding, dynamic updates
• Description: Showcases data-driven document manipulation and interactive data visualization
• Use Case: Dashboards, analytics, data storytelling

🌈 multicolor_interactive.html

Multi-colored interactive interface demonstration

• Technology: HTML5, CSS3, JavaScript
• Features: Dynamic color changes, user interaction, responsive design
• Description: Interactive elements with colorful visual feedback and user engagement
• Use Case: UI/UX demonstrations, interactive art, educational tools

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection (for CDN libraries)

Running the Demos

1. Clone this repository:

   git clone https://github.com/doribd/htmls.git

2. Navigate to the project directory:

   cd htmls

3. Open any HTML file in your web browser:

   # Option 1: Double-click the HTML file
   # Option 2: Use a local server
   python -m http.server 8000
   # Then visit http://localhost:8000

Live Demos

You can also view the demos directly via GitHub Pages:

• Three.js Demo
• D3.js Demo
• Multicolor Interactive Demo

🛠️ Technologies Used

Technology	Purpose	Demo File
Three.js	3D graphics and WebGL	interactive_three_js.html
D3.js	Data visualization	interactive_with_d3.html
HTML5	Structure and markup	All files
CSS3	Styling and animations	All files
JavaScript	Interactivity and logic	All files

🎯 Features

• 🔧 No Build Process: All demos are self-contained HTML files
• 📱 Responsive Design: Works on desktop and mobile devices
• ⚡ Fast Loading: Optimized for quick loading and smooth performance
• 🎨 Interactive Elements: User-friendly interfaces with visual feedback
• 🌐 Cross-Browser Compatible: Works across modern web browsers

📚 Learning Resources

Three.js

• Three.js Official Documentation
• Three.js Examples

D3.js

• D3.js Official Documentation
• Observable D3 Gallery

Web Development

• MDN Web Docs
• HTML5 Specification

🤝 Contributing

Feel free to contribute to this project by:

1. Forking the repository
2. Creating a feature branch
3. Adding your own interactive HTML demos
4. Submitting a pull request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Created with AI assistance
• Built using open-source libraries
• Inspired by the web development community