Web Development Course

Coursework, assignments, and projects from my web development course covering HTML, CSS, JavaScript, and modern frameworks.

📁 Project Structure

web-development-course/
├── week01/                    # Week 1: HTML Fundamentals
│   ├── 12 con giáp.html       # Vietnamese Zodiac project
│   ├── 24120224.html          # Student ID project
│   ├── 24120224_NguyenAnhThai/ # Group project - Team Nguyen Anh Thai
│   │   ├── index.html         # Main group page
│   │   ├── images/            # Group images
│   │   └── members/           # Individual member pages
│   │       ├── raphinha/      # Member: Raphinha
│   │       ├── thai/          # Member: Thai
│   │       └── yamal/         # Member: Yamal
│   └── images/                # Shared images
│
├── week02/                    # Week 2: CSS Frameworks
│   ├── Example1/              # Example 1: Framework comparisons
│   │   ├── bootstrap.html     # Bootstrap implementation
│   │   ├── css.html           # Vanilla CSS implementation
│   │   └── tailwindcss.html   # Tailwind CSS implementation
│   └── Example2/              # Example 2: Framework comparisons
│       ├── bootstrap.html
│       ├── css.html
│       └── tailwindcss.html
│
├── week03/                    # Week 3: JavaScript & Interactive Projects
│   ├── Question1/             # Question 1: Chinese Chess (Cờ Tướng)
│   │   ├── index.html         # Main game page
│   │   └── CoTuong_imgs/      # Chess piece images
│   ├── Question2/             # Question 2: Interactive project
│   │   └── index.html
│   └── Question3/             # Question 3: Interactive project
│       └── index.html
│
├── week05/                    # Week 5: ReactJS & TailwindCSS
│   ├── index.html             # Navigation portal for Week 5
│   ├── Exercise1/             # Exercise 1: 12 Zodiac Animals (ReactJS + TailwindCSS)
│   │   └── index.html
│   ├── Exercise2/             # Exercise 2: Interactive Chinese Chess (ReactJS + TailwindCSS)
│   │   ├── index.html
│   │   └── CoTuong_imgs/      # Chess piece images & board
│   └── Exercise3/             # Exercise 3: Product Catalog & Details (ReactJS + TailwindCSS)
│       ├── index.html
│       ├── data.js            # Product dataset
│       └── imgs/              # Product images
│
├── LICENSE                    # MIT License
└── README.md                  # This file

📚 Course Progress

Week	Topic	Key Learnings
Week 01	HTML Fundamentals	Semantic HTML, forms, tables, multimedia, project structure
Week 02	CSS Frameworks	Bootstrap 5, Tailwind CSS, Vanilla CSS, responsive design
Week 03	JavaScript & Interactivity	DOM manipulation, event handling, game logic, interactive UI
Week 05	ReactJS & TailwindCSS	React 18, TailwindCSS, state management, move validation, product catalog, fallback mechanisms

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Safari)
• Optional: VS Code with Live Server extension for development

Running the Projects

1. Clone the repository:

   git clone <repository-url>
   cd web-development-course

2. Open any HTML file directly in your browser, or use a local server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js (if you have http-server installed)
   npx http-server
   
   # Using PHP
   php -S localhost:8000

3. Navigate to http://localhost:8000 and browse the weekly folders.

🎯 Featured Projects

Week 1 - Team Project: 24120224_NguyenAnhThai/

A collaborative team website showcasing individual member profiles with a shared navigation structure.

Week 2 - Framework Comparison: week02/Example1/ & Example2/

Side-by-side implementations of the same design using:

• Vanilla CSS - Custom properties, Flexbox, Grid
• Bootstrap 5 - Utility classes, components, responsive grid
• Tailwind CSS - Utility-first approach, JIT compilation

Week 3 - Chinese Chess Game: week03/Question1/

An interactive Cờ Tướng (Chinese Chess) implementation with:

• Drag-and-drop piece movement
• Valid move highlighting
• Game state management
• Traditional piece graphics

Week 5 - ReactJS & TailwindCSS Applications: week05/

Interactive modern web applications built using standalone React 18 and TailwindCSS:

• Exercise 1 (week05/Exercise1/): 12 Zodiac animals layout matching Week 1 gradients with automatic emoji/image fallback mechanism.
• Exercise 2 (week05/Exercise2/): Interactive Chinese Chess (Cờ Tướng) game with strict move validation (blocking horse leg, elephant river boundary/eye, palace bounds for advisor/general, flying generals rule, cannon mounts), drag-and-drop & click-to-move, and piece/board fallbacks.
• Exercise 3 (week05/Exercise3/): E-Commerce product catalog with category sidebar filtering (men's clothing, jewelery, electronics, women's clothing), detailed product view, and category placeholder image fallback.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍🎓 Author

Nguyen Anh Thai (Student ID: 24120224)

• Course: Web Development
• Year: Year 3
• Institution: HCMUS

---

This repository serves as a learning portfolio documenting my progression through the web development curriculum.