Skip to content

README.md

Latest commit

 

History

History
44 lines (30 loc) · 2.44 KB

README.md

File metadata and controls

44 lines (30 loc) · 2.44 KB
Raw

Front-End Web Development Practice: David Chu's China Bistro 🥢

A responsive front-end clone of the David Chu's China Bistro website, developed as a practical academic assignment to master core web development concepts.

The goal of this project was to take a real-world restaurant website and reconstruct its interface, ensuring semantic HTML structure, robust CSS styling, and seamless responsiveness across desktop, tablet, and mobile screens.

🎓 Learning Objectives & Implementation

This project was built to practice and demonstrate proficiency in several foundational web development areas:

  • Semantic HTML5: Structuring content cleanly using proper tags (<header>, <nav>, <main>, <section>, <footer>) to ensure accessibility and SEO best practices.
  • Responsive Layouts: Utilizing modern CSS techniques (Flexbox, CSS Grid, or Bootstrap media queries) to create a fluid UI that adapts gracefully from large desktop monitors down to mobile viewports.
  • Navigation & UX: Implementing a responsive toggle navigation menu for mobile screens and organizing a multi-category restaurant menu efficiently.
  • Data Presentation: Structuring a clean, scannable layout for restaurant metadata including operating hours, location details, delivery constraints, and customer testimonials.

🛠️ Tech Stack Used

  • HTML5: Core page structure and semantic architecture.
  • CSS3: Custom layout design, component styling, and media queries for responsive design.
  • Bootstrap CSS: Used for rapid grid layout development and pre-built responsive components.
  • JavaScript: Implemented for mobile menu toggling or dynamic content rendering.

📸 Core Sections Replicated

  • Home Page / Landing Area: Featuring restaurant branding, operating hours, contact info, and Kosher certification.
  • Interactive Menu / Specials: A structured showcase of the bistro's food categories.
  • Delivery Rules Callout: Clear communication of the $20 minimum order, $3 delivery fee, and 3-4 mile radius constraint.
  • Testimonials Component: Stylized blockquotes for customer reviews.

📂 Project Structure

├── index.html          # Main landing page containing the structure
├── css/
│   └── styles.css      # Custom stylesheet handling layouts and media queries
├── assets/
│   └── images/         # Local copies of images, logos, and icons
└── README.md           # Documentation