HTML-CSS-JS Demo Project

A collection of demo projects showcasing fundamental frontend development using core web technologies: HTML, CSS, and JavaScript.

📋 Description

This repository contains basic demonstration projects built with vanilla HTML, CSS, and JavaScript. These projects are designed to showcase various frontend development concepts and techniques without relying on frameworks or libraries.

🚀 Technologies Used

• HTML5 - Structure and content
• CSS3 - Styling and layout
• JavaScript (Vanilla) - Interactivity and functionality
• GSAP (GreenSock Animation Platform) - Advanced animations

📂 Project Structure

HTML-CSS-JS-Demo-Project/
├── Applications/
│   ├── Analog clock/
│   ├── Realtime clock/
│   └── To-do list/
├── Games/
│   ├── Pong/
│   ├── Snake game/
│   ├── Space shooter/
│   ├── Tetris/
│   └── Tron Light Cycles/
├── Gsap Animation/
│   ├── Interactive animation/
│   ├── Scroll animation/
│   └── Tutorial/
└── Website/
    ├── Stem Hub/
    ├── Website Template 1/
    ├── Website Template 2/
    └── Website Template 3/

🎯 Purpose

This repository serves as:

• A learning resource for frontend development fundamentals
• A reference for common web development patterns
• Practice projects for improving HTML, CSS, and JavaScript skills
• Portfolio demonstration of core frontend capabilities

🛠️ Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A code editor (VS Code, Sublime Text, Atom, etc.)
• Basic understanding of HTML, CSS, and JavaScript

Installation

1. Clone the repository:

git clone https://github.com/NguyenLe15325/HTML-CSS-JS-Demo-Project.git

2. Navigate to the project directory:

cd HTML-CSS-JS-Demo-Project

3. Open any project folder and launch the index.html file in your browser

💻 Usage

Each project is self-contained and can be run independently:

1. Navigate to a specific project folder
2. Open the index.html file in your web browser
3. Interact with the demo to see the functionality

Alternatively, you can use a local development server:

# Using Python 3
python -m http.server 8000

# Using Node.js with http-server
npx http-server

Then navigate to http://localhost:8000 in your browser.

📚 Projects Included

📱 Applications

Practical web applications including clocks, to-do lists, and more.

🎮 Games

Classic games like Pong, Snake, Tetris, Space Shooter, and Tron Light Cycles.

🎨 GSAP Animation

Interactive and scroll-based animation projects using GreenSock Animation Platform.

🌐 Website

Complete website templates and landing pages.

🎓 Learning Outcomes

By exploring these projects, you'll learn:

• HTML semantic structure and best practices
• CSS layout techniques (Flexbox, Grid)
• DOM manipulation with JavaScript
• Event handling and user interactions
• Responsive design principles
• Game development fundamentals with JavaScript
• Animation techniques using GSAP
• Building complete web applications from scratch
• Clean code organization and project structure

🤝 Contributing

Contributions are welcome! If you'd like to add a new demo project or improve existing ones:

1. Fork the repository
2. Create a new branch (git checkout -b feature/new-demo)
3. Make your changes
4. Commit your changes (git commit -m 'Add new demo project')
5. Push to the branch (git push origin feature/new-demo)
6. Open a Pull Request

📝 License

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

🌟 Show Your Support

Give a ⭐️ if this project helped you learn or build something!

📧 Contact

For questions or feedback, please open an issue in the repository.

---

Happy Coding! 🚀