Project Overview
Build a complete restaurant website with multiple pages, showcasing the restaurant’s menu, location, and contact information.
What You’ll Build
-
Homepage: Welcome message and featured dishes
-
Menu Page: Complete menu with prices
-
About Page: Restaurant story and team
-
Contact Page: Location, hours, and contact form
Step-by-Step Instructions
Step 1: Project Setup
mkdir restaurant-website
cd restaurant-website
touch index.html menu.html about.html contact.html
mkdir css js images
touch css/style.css
Step 2: Homepage (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bella Vista Restaurant - Fine Dining Experience</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Bella Vista Restaurant</h1>
<p>Authentic Italian Cuisine Since 1985</p>
</header>
<main>
<section id="hero">
<h2>Welcome to Bella Vista</h2>
<p>Experience the finest Italian cuisine in a warm, family-friendly atmosphere.</p>
<a href="menu.html" class="cta-button">View Our Menu</a>
</section>
<section id="featured">
<h2>Featured Dishes</h2>
<article>
<h3>Spaghetti Carbonara</h3>
<p>Classic Roman pasta with eggs, cheese, and pancetta</p>
<span class="price">$18.99</span>
</article>
<article>
<h3>Margherita Pizza</h3>
<p>Fresh mozzarella, tomato sauce, and basil</p>
<span class="price">$16.99</span>
</article>
<article>
<h3>Osso Buco</h3>
<p>Braised veal shanks with risotto milanese</p>
<span class="price">$28.99</span>
</article>
</section>
<section id="hours">
<h2>Restaurant Hours</h2>
<ul>
<li>Monday - Thursday: 5:00 PM - 10:00 PM</li>
<li>Friday - Saturday: 5:00 PM - 11:00 PM</li>
<li>Sunday: 4:00 PM - 9:00 PM</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Bella Vista Restaurant. All rights reserved.</p>
<p>123 Main Street, Little Italy, NY 10013</p>
</footer>
</body>
</html>
Step 3: Menu Page (menu.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu - Bella Vista Restaurant</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Our Menu</h1>
</header>
<main>
<section id="appetizers">
<h2>Appetizers</h2>
<article>
<h3>Bruschetta</h3>
<p>Grilled bread with tomatoes, garlic, and basil</p>
<span class="price">$9.99</span>
</article>
<article>
<h3>Antipasto Platter</h3>
<p>Selection of cured meats, cheeses, and olives</p>
<span class="price">$16.99</span>
</article>
<article>
<h3>Mozzarella Caprese</h3>
<p>Fresh mozzarella, tomatoes, and basil with balsamic glaze</p>
<span class="price">$12.99</span>
</article>
</section>
<section id="pasta">
<h2>Pasta</h2>
<article>
<h3>Spaghetti Carbonara</h3>
<p>Classic Roman pasta with eggs, cheese, and pancetta</p>
<span class="price">$18.99</span>
</article>
<article>
<h3>Fettuccine Alfredo</h3>
<p>Creamy parmesan sauce with fettuccine</p>
<span class="price">$16.99</span>
</article>
<article>
<h3>Lasagna Bolognese</h3>
<p>Layers of pasta with meat sauce and cheese</p>
<span class="price">$19.99</span>
</article>
</section>
<section id="pizza">
<h2>Pizza</h2>
<article>
<h3>Margherita</h3>
<p>Fresh mozzarella, tomato sauce, and basil</p>
<span class="price">$16.99</span>
</article>
<article>
<h3>Pepperoni</h3>
<p>Classic pepperoni with mozzarella and tomato sauce</p>
<span class="price">$18.99</span>
</article>
<article>
<h3>Quattro Stagioni</h3>
<p>Four seasons: artichokes, mushrooms, prosciutto, and olives</p>
<span class="price">$21.99</span>
</article>
</section>
<section id="desserts">
<h2>Desserts</h2>
<article>
<h3>Tiramisu</h3>
<p>Classic Italian dessert with coffee and mascarpone</p>
<span class="price">$8.99</span>
</article>
<article>
<h3>Gelato</h3>
<p>Three scoops of house-made gelato</p>
<span class="price">$6.99</span>
</article>
<article>
<h3>Cannoli</h3>
<p>Crispy shells filled with sweet ricotta cream</p>
<span class="price">$7.99</span>
</article>
</section>
</main>
<footer>
<p>© 2024 Bella Vista Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
Step 4: Contact Page (contact.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Bella Vista Restaurant</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1>Contact Us</h1>
</header>
<main>
<section id="contact-info">
<h2>Get in Touch</h2>
<div>
<h3>Address</h3>
<address>
123 Main Street<br>
Little Italy, NY 10013<br>
United States
</address>
</div>
<div>
<h3>Phone</h3>
<p><a href="tel:+1234567890">(123) 456-7890</a></p>
</div>
<div>
<h3>Email</h3>
<p><a href="mailto:info@bellavista.com">info@bellavista.com</a></p>
</div>
<div>
<h3>Hours</h3>
<ul>
<li>Monday - Thursday: 5:00 PM - 10:00 PM</li>
<li>Friday - Saturday: 5:00 PM - 11:00 PM</li>
<li>Sunday: 4:00 PM - 9:00 PM</li>
</ul>
</div>
</section>
<section id="contact-form">
<h2>Send us a Message</h2>
<form action="/contact" method="POST">
<fieldset>
<legend>Your Information</legend>
<div>
<label for="name">Full Name: *</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email: *</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</div>
</fieldset>
<fieldset>
<legend>Your Message</legend>
<div>
<label for="subject">Subject: *</label>
<select id="subject" name="subject" required>
<option value="">Select a subject</option>
<option value="reservation">Reservation</option>
<option value="catering">Catering</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="message">Message: *</label>
<textarea id="message" name="message" rows="5" required placeholder="Please describe your inquiry..."></textarea>
</div>
<div>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to our newsletter for special offers</label>
</div>
</fieldset>
<div>
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
</div>
</form>
</section>
</main>
<footer>
<p>© 2024 Bella Vista Restaurant. All rights reserved.</p>
</footer>
</body>
</html>
Project Checklist
-
All four HTML pages created
-
Semantic HTML structure used throughout
-
Navigation menu on all pages
-
Contact form with proper validation
-
Accessible form labels and structure
-
Proper heading hierarchy
-
All links working between pages
Bonus Challenges
-
Add an About page with restaurant history
-
Include images for menu items
-
Add a reservations form
-
Create a special offers section
-
Add social media links in the footer
Module 2 Summary
Key Takeaways
-
HTML provides the structure and content of web pages
-
Semantic HTML improves accessibility and SEO
-
Forms are essential for user interaction
-
Proper validation ensures good user experience
What’s Next
In Module 3, we’ll learn CSS to make your HTML beautiful. You’ll master styling, layouts, and responsive design.
Pro Tips for Success
-
Always use semantic HTML elements
-
Test your forms thoroughly
-
Validate your HTML code
-
Keep accessibility in mind
-
Practice with real-world projects
Your HTML skills are growing. Time to make it look amazing with CSS.
