Website Refactoring & Professional Layout Planning

Business Scenario

The BiteBox website is now fully functional. Customers can browse restaurant information, explore the menu, register themselves, and place food orders using HTML forms.

Now our next task is to refactor the website

But Why Are We Refactoring the Website?

Throughout the previous labs, we learned the fundamental HTML concepts required to create a multi-page website. While our website is functional, it still reflects a beginner-level structure. In real-world web development, developers often revisit and refactor their HTML before applying CSS to improve readability, maintainability, and scalability.

In this lab, we will reorganize the BiteBox website into a modern, professional structure inspired by popular food delivery platforms.

Pre-Lab Preparation

git pull origin branchName

Git Pull

Module:

1) HTML Foundations: From Web Basics to Page Content

2) HTML Structure, Links, and Images

3) Advanced HTML: Structure, Tables, Forms, and Media

Task 1:  Create a Common Website Header


<header>
        <img src="assets/images/logo.png" alt="BiteBox Logo" 
        width="150">
  
        <!--Navigation Menu-->
        <nav>
            <a href="index.html">Home</a>
            |
            <a href="menu.html">Menu</a>
            |
            <a href="about.html">About</a>
            |
            <a href="contact.html">Contact</a>
        </nav>

    </header>

Open index.html - Add a logo inside the header section and remove the "Bitebox" heading

1

Update the Header on All Webpages

2

The BiteBox website currently uses different header structures on different webpages. To maintain a consistent brand identity, the restaurant owner wants the same header to appear on every page.

Open the following files:

  • menu.html
  • about.html
  • contact.html

Replace their existing top section with the same header created in index.html.

Task 2:  Reorganize the Homepage into a Professional Landing Page

<section>
  
    <h1>Delicious Food Delivered To Your Doorstep</h1>
    <p>
        Fresh ingredients, delicious recipes, and fast delivery 
        — all in one place.
    </p>

    <a href="menu.html">Order Now</a>
    |
    <a href="menu.html">Explore Menu</a>
  
</section>

Open index.html - Immediately below the <header> element, create a hero section

1

Replace the Existing Welcome Section with a Hero Section

 <section id="features">
            <h2>Why Choose BiteBox?</h2>

            <article>
                <img src="assets/images/fresh.png" alt="Fresh Ingredients" 
                 width="80">
                <h3>Fresh Ingredients</h3>
                <p> Every meal is prepared using fresh vegetables and premium 
                    quality ingredients.
                </p>
            </article>

            <article>
                <img src="assets/images/fast-delivery.png" 
                alt="Fast Delivery" width="80">
                <h3>Fast Delivery</h3>
                <p>
                    Get your favorite meals delivered quickly to your doorstep.
                </p>
            </article>

Immediately below the Hero section, add a section "Why to choose bitebox"

2

   
            <article>
                <img src="assets/images/hygienic.png" alt="Hygienic Kitchen" 
                 width="80">
                <h3>Hygienic Kitchen</h3>
                <p>
                    Our meals are prepared under strict hygiene standards by 
                    experienced chefs.
                </p>
            </article>

            <article>
                <img src="assets/images/easy.png" alt="Easy Online Ordering" 
                width="80">
                <h3>Easy Online Ordering</h3>
                <p>
                    Browse the menu, place your order, and enjoy your meal with 
                    just a few clicks.
                </p>
            </article>
        </section>

 <!--Todays Featured Dishes -->
        <section id="popular-dishes">
            <h2>Popular Dishes</h2>

            <article>
                <img src="assets/images/pizza.png" alt="Cheese Pizza" width="220">
                <h3>Cheese Pizza</h3>
                <p>
                    Loaded with fresh vegetables and mozzarella cheese.
                </p>
                <p> <span>⭐⭐⭐⭐⭐ </span> <small>(126)</small></p>
                <p> <strong> ₹249 </strong></p>
            </article>

            <article>
                <img src="assets/images/burger.png" alt="Chicken Burger" width="220">
                <h3>Chicken Burger</h3>
                <p>
                    Crispy chicken patty served with fresh lettuce and cheese.
                </p>
                <p> <span>⭐⭐⭐⭐⭐ </span> <small> (99)</small> </p>
                <p> <strong>₹199</strong> </p>
          </article>

Replace the existing Featured Dishes section with the Popular Dishes section.

3

             <article>
                <img src="assets/images/pasta.png" alt="White Sauce Pasta" width="220">
                <h3>White Sauce Pasta</h3>
                <p>
                    Creamy white sauce pasta tossed with herbs and fresh vegetables.
                </p>
                <p> <span>⭐⭐⭐⭐⭐ </span><small> (76) </small> </p>
                <p> <strong>₹229</strong></p>
            </article>

            <article>
                <img src="assets/images/biryani.png" alt="Chicken Biryani" width="220">
                <h3>Chicken Biryani</h3>
                <p>
                    Aromatic basmati rice layered with tender chicken and authentic spices.
                </p>
                <p> <span>⭐⭐⭐⭐⭐ </span><small>(112)</small> </p>
                <p><strong>₹249</strong></p>
            </article>

            <article>
                <img src="assets/images/cake.png" alt="Chocolate Cake" width="220">
                <h3>Chocolate Cake</h3>
                <p>
                    Rich chocolate sponge layered with creamy chocolate frosting.
                </p>
                <p><span>⭐⭐⭐⭐⭐</span><small>(58)</small> </p>
                <p> <strong>₹149</strong></p>
            </article>
        </section>
 <!--Todays Special Offers -->
        <section id="offer">

            <div class="offer-content">
                <h2>Today's Special Offer!</h2>
                <p> Get <strong>20% OFF</strong> on all orders above 
                <strong>₹499</strong>
                </p>
                <p> Use Code: <strong>BITE20</strong> </p>
                <a href="menu.html"> Order Now </a>
            </div>

            <div class="offer-image">
                <img src="assets/images/pizza-discount.png" 
                alt="Special Offer Pizza" width="420" height="420">

                <img src="assets/images/badge.png" alt="20% OFF" width="180" 
                height="180">
            </div>
        </section>

Replace the Existing Today's Offer Section

4

 <!--Customer Reviews-->
       <section id="reviews">
           <h2>What Our Customers Say</h2>

          <article>
             <img src="assets/images/customer1.png" alt="Priya Sharma" 
                width="80" height="80">
                <h3>Priya Sharma</h3>
                <p> Amazing food and super fast delivery.
                    BiteBox is my go-to place every time!
                </p>
                <p> <span>⭐⭐⭐⭐⭐</span> </p>
            </article>

          <article>
             <img src="assets/images/customer2.png" alt="Rahul Verma"
             width="80"  height="80">
              <h3>Rahul Verma</h3>
            <p>

Add Customer Review Section  immediately below the "Today's Special Offer" section.

5

                    The food quality is excellent and
                    always fresh. Highly recommended!
                </p>
                <p> <span>⭐⭐⭐⭐⭐</span> </p>
            </article>


                <p> <span>⭐⭐⭐⭐⭐</span> </p>
            </article>

            <article>
                <img src="assets/images/customer3.png" alt="Anjali Mehta" 
                width="80" height="80">
                <h3>Anjali Mehta</h3>
                <p>
                    Great taste, great service and
                    very easy to order. Love it!
                </p>
                <p> <span>⭐⭐⭐⭐⭐</span> </p>
            </article>
        </section>
<section id="newsletter">
    <div class="newsletter-content">
        <img src="assets/images/mail.png" alt="Newsletter Icon"
        width="80" height="80">

        <div>
            <h2>Stay Updated!</h2>
            <p> Subscribe to our newsletter and get the latest
                offers and updates.
            </p>
        </div>
    </div>

    <div class="newsletter-form">
        <input type="email" placeholder="Enter your email">
        <button> Subscribe </button>
    </div>

    <div class="newsletter-image">
        <img src="assets/images/newsletter-food.png"
        alt="Newsletter Food" width="180" height="120">
    </div>
</section>

Add the "NewsLettler" section immediately below the "Customer Reviews" section.

6

<footer>

    <!-- Footer Logo Section -->
    <section>
        <img src="assets/images/logo.png" alt="BiteBox Logo" width="180">
        <p> Delicious food delivered to your doorstep.
            Fresh, fast and tasty!
        </p>

        <a href="#">
            <img src="assets/images/facebook.png" alt="Facebook" width="35" height="35">
        </a>

        <a href="#">
            <img src="assets/images/instagram.png" alt="Instagram" width="35" height="35">
        </a>

        <a href="#">
            <img src="assets/images/twitter.png" alt="Twitter" width="35" height="35">
        </a>

Replace the existing footer with the following enhanced footer and copy-paste the

updated footer into every HTML file

7

 <a href="#">
            <img src="assets/images/youtube.png" alt="YouTube" width="35" height="35">
        </a>
    </section>

    <hr>

    <!-- Quick Links -->
    <section>
        <h3>Quick Links</h3>
        <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>
            <li><a href="cart.html">Cart</a></li>
        </u 
    </section>

    <hr>

    <!-- Customer Service -->
    <section>
        <h3>Customer Service</h3>
        <ul>
            <li>Track Order</li>
            <li>FAQs</li>
            <li>Shipping Policy</li>
            <li>Return Policy</li>
            <li>Terms & Conditions</li>
        </ul>
    </section>

    <hr>

    <!-- Contact Information -->
    <section>
        <h3>Contact Us</h3>
        <p>📞 +91 98765 43210</p>
        <p>✉ support@bitebox.com</p>
        <p>📍 123 Food Street, Mumbai, Maharashtra 400001 </p>
    </section>

    <hr>

    <!-- Payment Methods -->
    <section>
        <h3>Payment Methods</h3>
        <img src="assets/images/visa.png" alt="Visa" width="60">
        <img src="assets/images/mastercard.png" alt="MasterCard" width="60">
        <img src="assets/images/upi.png" alt="UPI" width="60">
        <img src="assets/images/paytm.png"  alt="Paytm" width="60">
    </section>

    <hr>
    <p> © 2026 BiteBox. All Rights Reserved. </p>

</footer>

Task 3:  Enhance the Menu Page

 <!--Menu hero section-->
  <section id="menu-hero">
    <h1>Explore Our Delicious Menu</h1>

    <p>Discover freshly prepared pizzas, burgers, pasta,
       biryani, desserts and many more delicious dishes
       made with premium ingredients.
    </p>
  </section>

Replace the Existing Menu Heading with a Menu Hero Section

1

Note : Before starting this task, remove all the existing content below the Header and above the Footer from the menu.html page. Keep only the Header and Footer.


<section id="categories">
    <h2>Browse Categories</h2>

    <div
        <article>
            <img src="assets/images/pizza-icon.png" alt="Pizza"   
             width="120" height="120">
            <h3>Pizza</h3>
        </article>

        <article>
            <img src="assets/images/burger-icon.png" alt="Burger" 
            width="120" height="120">
            <h3>Burger</h3>
        </article>

Add "Browse Category" section immediately below the Menu Hero section.

2

        <article>
            <img src="assets/images/pasta-icon.png" width="120" 
            height="120">
            <h3>Pasta</h3>
        </article>

        <article>
            <img src="assets/images/biryani-icon.png" width="120" 
            height="120">
            <h3>Biryani</h3>
        </article>

        <article>
            <img src="assets/images/dessert-icon.png" alt="Desserts" 
             width="120"
             height="120">
            <h3>Desserts</h3>
        </article>
    </div>
</section>

Add the Menu Items Section just below the "Browse category" section

3

<section id="menu-items">
   <h2>Our Menu</h2>
   <div>
      <!-- Menu Item 1 -->
       <article>
           <img src="assets/images/margherita-pizza.png"  width="220">
            <h3>Margherita Pizza</h3>
            <p> ⭐⭐⭐⭐⭐ <small>(120)</small> </p>
            <p> <strong>₹249</strong></p>
            <button> Add to Cart </button>
        </article>

        <!-- Menu Item 2 -->
        <article>
            <img src="assets/images/cheese-burger.png" width="220">
            <h3>Cheese Burger</h3>
            <p>⭐⭐⭐⭐⭐<small>(98)</small></p>
            <p> <strong> ₹199 </strong> </p>
   <button> Add to Cart </button>
        </article>


<!-- Menu Item 3 -->
        <article>
            <img src="assets/images/alfredo-pasta.png" width="220">
            <h3>Creamy Alfredo Pasta</h3>
            <p>⭐⭐⭐⭐⭐ <small> (85) </small>
            </p>
            <p> <strong>₹229</strong> </p>
            <button> Add to Cart  </button>
        </article>

        
<!-- Menu Item 4 -->
        <article>
            <img src="assets/images/chicken-biryani.png" width="220">
            <h3>Chicken Biryani</h3>
            <p> ⭐⭐⭐⭐⭐ <small>(110)</small> </p>
            <p> <strong>₹279</strong> </p>
            <button> Add to Cart </button>
        </article>
  <!-- Menu Item 5 -->
        <article>
            <img src="assets/images/choco-lava-cake.png" width="220">
            <h3>Choco Lava Cake</h3>
            <p> ⭐⭐⭐⭐⭐ <small>(75)</small> </p>
            <p> <strong>₹149</strong> </p>
            <button> Add to Cart </button>
        </article>


<!-- Menu Item 6 -->
        <article>
            <img src="assets/images/veg-club-sandwich.png" width="220">
            <h3>Veg Club Sandwich</h3>
            <p>⭐⭐⭐⭐⭐<small>(60)</small> </p>
            <p> <strong>₹179</strong> </p>
            <button> Add to Cart </button>
        </article>

    </div>

</section>
<section id="offer">
    <div class="offer-content">
        <h2>Today's Special Offer!</h2>
        <p>Get <strong>20% OFF</strong> on all orders above
        <strong>₹499</strong>
        </p>
        <p> Use Code: <strong>BITE20</strong> </p>
        <a href="menu.html"> Order Now </a>
    </div>

    <div class="offer-image">
        <img src="assets/images/offer-pizza.png" width="320">
    </div>
</section>

Add "special offer" section immediately below the Menu Items section and before

the Footer.

4

Task 4:  Enhance the About Page

Remove the "Abous Us" heading and replace it with a professional hero section for the

About page that introduces the BiteBox brand.

1

<section id="about-hero">
    <div class="hero-content">
        <h2>About BiteBox</h2>
        <p> Serving Happiness Since 2025 </p>
    </div>
</section>

Note : Before starting this task, remove the About BiteBox, Our Story, and Chef's Message sections from the Home page (index.html), as these sections will now be added to the dedicated about.html page.

Create the Our Story section just below the hero section

2

<section id="story">
    <h2>Our Story</h2>
    <article>
        <img src="assets/images/restaurant.png" width="500">

        <div>
            <h3>Every Meal Has A Story</h3>
            <p> BiteBox was founded with a simple goal —
                to serve fresh, delicious food using quality
                ingredients and authentic recipes.
            </p>

            <p> What started as a small kitchen has now
                grown into a trusted food destination loved
                by thousands of happy customers.
            </p>
        </div>
    </article>
</section>

Create the Mission & Vision section just below "our Story" section to showcase

BiteBox's purpose and future goals

3

<section id="mission-vision">
    <h2>Our Mission & Vision</h2>
    <div>
        <article>
            <h3>Our Mission</h3>
            <p> To serve fresh, delicious, and high-quality meals
                prepared with the finest ingredients while providing
                exceptional customer service and memorable dining
                experiences.
            </p>
        </article>
        <article>
            <h3>Our Vision</h3>
            <p> To become the most trusted and loved restaurant by
                continuously delivering innovative flavors, outstanding
                hospitality, and a welcoming environment for every guest.
            </p>
        </article>
    </div>
</section>

Create the Meet Our Chefs section to introduce the talented chefs behind BiteBox.

4

<section id="chefs">
        <h2>Meet Our Chefs</h2>
        <div>
            <article>
                <img src="assets/images/chef1.png" width="250">
                <h3>Chef Arjun Kapoor</h3>
                <h4>Head Chef</h4>
                <p> Specializes in Italian cuisine with
                    10+ years of experience.
                </p>
                <div>
                    <img src="assets/icons/facebook.png" width="30">
                    <img src="assets/icons/instagram.png" width="30">
                    <img src="assets/icons/twitter.png" width="30">
                </div>
            </article>

            <article>
                <img src="assets/images/chef2.png" width="250">
                <h3>Chef Neha Sharma</h3>
                <h4>Sous Chef</h4>
 <p> Expert in continental and fusion
                    dishes with a creative touch.
                </p>

                <div>
                    <img src="assets/icons/facebook.png" width="30">
                    <img src="assets/icons/instagram.png" width="30">
                    <img src="assets/icons/twitter.png" width="30">
                </div>
            </article>

            <article>
                <img src="assets/images/chef3.png" width="250">
                <h3>Chef Rohan Mehta</h3>
                <h4>Pizza Specialist</h4>
                <p> Pizza artisan bringing authentic
                    flavors to every bite.
                </p>

                <div>
                    <img src="assets/icons/facebook.png" width="30">
                    <img src="assets/icons/instagram.png" width="30">
                    <img src="assets/icons/twitter.png" width="30">
                </div>
            </article>
        </div>
    </section>

5

Create the Restaurant Statistics section to highlight BiteBox's achievements

<section id="statistics">
    <h2>Restaurant Statistics</h2>
    <div>
        <article>
            <h3>10+</h3>
            <p>Years of Experience</p>
        </article>
        <article>
            <h3>50K+</h3>
            <p>Happy Customers</p>
        </article>
        <article>
            <h3>100+</h3>
            <p>Delicious Dishes</p>
        </article>
        <article>
            <h3>25+</h3>
            <p>Expert Chefs</p>
        </article>
    </div>
</section>

2

Check the output

Task 7:  Add Delivery Instructions Using <textarea>

1

Add a heading as "Delivery Instruction " - Below the heading add a label and textarea

<h3>Delivery Instructions </h3>

<label for="address">

Delivery Address

</label>

<br>

<textarea id="address" name="address" rows="5" cols="40">
</textarea>

<br><br>

2

Check the output

Task 8:  Add submit and reset button

1

Add a submit and reset button below the textarea

<h3>Delivery Instructions </h3>
        <label for="address"> Delivery Address </label>
        <br>
        <textarea id="address" name="address" rows="5" cols="40">
        </textarea>
        <br><br>

        <input type="submit" value="Place Order">

        <input type="reset" value="Clear Form">

</form>

2

Check the output

*

Complete Solution

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 - BiteBox</title>
</head>

<body>
    <h1> Contact Us </h1>
    <p>
        <a href="index.html">Home</a>
        |
        <a href="menu.html">Menu</a>
        |
        <a href="about.html">About</a>
   |
        <a href="contact.html">Contact</a>
    </p>


    <h2> Visit Our Website </h2>
    <p>

        <a href="https://www.google.com">

            Visit Google

        </a>

    </p>

    <hr>

    <!--Customer Registeration form -->
    <h2>Customer Registration & Order Form</h2>

    <hr>


    <form>
        <h3>Customer Information</h3>
        <label for="fullname">Full Name</label>
        <br>
        <input type="text" id="fullname" name="fullname">
        <br><br>
 <label for="email">Email Address</label>
        <br>
        <input type="email" id="email" name="email">
        <br><br>

        <label for="password">Password</label>
        <br>
        <input type="password" id="password" name="password">
        <br><br>

        <label for="phone">Phone Number</label>
        <br>
        <input type="tel" id="phone" name="phone">
        <br><br>

        <h3>Order Information</h3>
        <label for="quantity">Quantity</label>
        <br>
        <input type="number" id="quantity" name="quantity">
        <br><br>

        <label for="deliveryDate">
            Preferred Delivery Date
        </label>
        <br>
        <input type="date" id="deliveryDate" name="deliveryDate">
        <br><br>

        <label for="food"> Select Food Item </label>
        <br>
<select id="food" name="food">
            <option>
                Veg Pizza
            </option>

            <option>
                Cheese Burger
            </option>

            <option>
                White Sauce Pasta
            </option>

            <option>
                Veg Grilled Sandwich
            </option>

            <option>
                Chocolate Brownie
            </option>
        </select>
        <br><br>

        <h3> Payment Method </h3>

        <input type="radio" id="cash" name="payment">
        <label for="cash"> Cash </label>
        <br>
<input type="radio" id="card" name="payment">
        <label for="card"> Card </label>
        <br>
        <input type="radio" id="upi" name="payment">
        <label for="upi">UPI </label>
        <br><br>

        <h3> Extras </h3>
        <input type="checkbox" id="cheese" name="extras">
        <label for="cheese"> Extra Cheese </label>
        <br>

        <input type="checkbox" id="drink" name="extras">
        <label for="drink"> Cold Drink </label>
        <br>

        <input type="checkbox" id="dessert" name="extras">
        <label for="dessert"> Dessert </label>
        <br><br>

        <h3>Delivery Instructions </h3>
        <label for="address"> Delivery Address </label>
        <br> <textarea id="address" name="address" rows="5" cols="40"> </textarea>
        <br><br>

        <input type="submit" value="Place Order">
        <input type="reset" value="Clear Form">
    </form>
</body>
</html>

 

Great job!

You built a structured HTML form to collect customer information.

Checkpoint

   Git Push

git push origin branchName

Next-Lab Preparation

Module: CSS Foundations and Text Styling

1) Getting Started With CSS

2) Understanding different types of css