🍽️ Level 1 Project — Delish Restaurant Landing Page

A fully responsive, animated and modern landing page for a fictional restaurant, built as part of Level One of my web development learning path. This project focuses on rebuilding front-end fundamentals, clean design, responsive layout, animation, accessibility, SEO, and deployment best practices.

---

📌 Project Overview

• Fully responsive landing page for a restaurant brand.
• Includes modern sections like Hero, About Us, Menu, Testimonials, Contact, and Footer.
• Implemented scroll effects, animations, responsive grid, counters, and video background.
• Structured and deployed using Git & GitHub.

---

🚀 Live Demo

🔗 View it here: https://webdev-plan-1.github.io/Level1-Project/

---

✅ Objectives Achieved

1. Build a modern, real-world UI from scratch

2. Rebuild confidence in HTML/CSS/JS after a long break

3. Practice full responsive layout techniques using Grid & Flexbox

4. Begin writing clean, reusable, and accessible code

5. Add interactivity using Vanilla JavaScript

6. Optimize for SEO, accessibility, and performance

7. Practice deployment workflow using Git and GitHub Pages

---

✨ Features

• ✅ Responsive layout for all screen sizes (desktop, tablet, mobile)

• 🖼️ Hero section with background image/video and call to action

• 🧾 About Us section with split image + text layout

• 🍔 Menu section with responsive animated cards

• 💬 Testimonials slider with avatar and smooth transition

• 📞 WhatsApp button integration for direct chat

• ⌛ Custom animated loader with logo and “Loading Delish…” message

• 📊 Animated statistics counters (CountUp.js)

• 🎯 Scroll-triggered animations (e.g., fade-ins)

• 📍 Contact Us section with embedded Google Map and contact form

• 📱 Mobile-first navigation with hamburger menu

• ⚙️ SEO-optimized with proper meta tags and structure

• 📡 Deployed live using GitHub Pages

---

🛠️ Technologies Used

• HTML5 + CSS3

• JavaScript (Vanilla JS)

• CSS Grid & Flexbox

• Responsive Design

• Scroll Animations

• CountUp.js (for animated counters)

• AOS.js (optional scroll animations)

• Git & GitHub (version control)

• GitHub Pages (deployment)

• Chrome DevTools & Lighthouse for performance tuning

---

📁 Folder Structure

Level1-Project/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── assets
│   └── images
|   |    └── logo.png
|   |    └── background.jpg
|   |    └── testimonial1.jpg
|   |    └── ...
|   └── fonts
├── README.md

---

🧪 Lighthouse Report

Category	Score
Performance	94
Accessibility	91
Best Practices	74
SEO	100

---

🧠 Next Step: Level 2

In the next level, I’ll build a more dynamic and interactive system using advanced JavaScript and a PHP-based form backend.

---

🙌 Acknowledgment

| This project is part of my return to Web Development after 3 years away. It's the first of five levels in my personal learning & rebuilding journey.

---

👤 Author

🧑‍💻 Developed by Ahmed Hafez

🚀 Level One Project – Full Web Development Learning Plan