Module 1

1.7 Project 1

BUILD A WEBSITE USING HTML

📚 HTML Beginner Project Instructions: Build a Website for "Habesh Foods" 

📝 Project Story (Scenario)

A new Ethiopian restaurant called Habesh Foods has just opened in Addis Ababa. The restaurant specializes in serving authentic Ethiopian traditional foods and drinks, and it wants a simple website to showcase its menu, culture, and a video demo of cooking one of its famous dishes, Doro Wat.

They have hired you to create a basic website that presents their story, menu, and images in a clean and organized way. The website should be beginner-friendly and built entirely with HTML.

🔗 Project Structure (Step-by-Step) 

🗂️ Project Folder Structure

• Create a folder called: habesh-foods-website

• Inside the folder, create a file called: index.html

🔖 Page Title

The title of the website (the tab name) should be:
Ethiopian Food - Habesh Foods

📝 Step 1 - Add the Main Heading

At the top of the page, create an h1 heading saying:

"Welcome to Habesh Foods"

📝 Step 2 - About the Restaurant (Story Section)

Add a short paragraph (inside a <p> tag) that introduces Habesh Foods.

Example content (they can modify):

Habesh Foods is a traditional Ethiopian restaurant located in the heart of Addis Ababa. We proudly serve authentic Ethiopian dishes, prepared with love and the finest local ingredients. Whether you’re here for a family meal or a cultural adventure, Habesh Foods welcomes you.

📝 Step 3 - About Ethiopian Food (Information Section)

Create a section with a heading (h2) that says:
About Ethiopian Traditional Foods

Under this heading, add a short description in a paragraph.

Example content:

Ethiopian cuisine is known for its rich flavors, unique spices, and communal dining style. Meals are often served on injera, a soft flatbread made from teff flour. Popular dishes include spicy stews, slow-cooked meats, and vegetarian platters.

📝 Step 4 - Menu Section (Ordered List with Nested List Practice)

With a heading:
Menu - Traditional Foods & Drinks

Under this, display two sections:

1️⃣ Traditional Foods (Ordered List)

• Doro Wat (with a clickable link to Wikipedia)

• Shiro (with a clickable link to Wikipedia)

• Tibs (with a clickable link to Wikipedia)

• Beyayenetu (with a clickable link to Wikipedia)

• Key Wet (with a clickable link to Wikipedia)

• Gomen (with a clickable link to Wikipedia)

2️⃣ Drinks Section (Unordered List with Nested Lists)

• Non-Alcoholic Drinks

  • Water (linked to Wikipedia)

  • Soft Drinks (linked to Wikipedia)

• Alcoholic Drinks

  • Tella (linked to Wikipedia)

  • Tej (linked to Wikipedia)

📝 Step 5: Cooking Demo Section

• Use an h2 heading:
  Cooking Demo

• Add a short paragraph (p) explaining:
  "Want to learn how to make Doro Wat, Ethiopia’s famous chicken stew? Watch this video to see the step-by-step recipe."

• Below the paragraph, add a button (styled link) that opens a YouTube video.

• Example button text: Watch Doro Wat Recipe

• Example video link:
  Doro Wat Cooking Demo

📝 Step 6: Gallery Section

• Use an h2 heading:
  Gallery

• Display two images of Ethiopian food.

• Each image should be wrapped in a link that redirects to Google Images search results for Ethiopian food.

• Example :

  • Image 1: Doro Wat
    (image 1 should be a link also)

  • Image 2: Beyayenetu
    (image 2 should be a link also)

✅ Final Look Like but add the gallery section below!!!