Pages and reusable elements in No-Code - Mini Project: Build & Apply

Creating Pages and Reusable Elements

📖 Scenario: You are building a simple website for a local bakery. The website needs multiple pages like Home, Menu, and Contact. To keep the design consistent, you want to use reusable elements like a header and footer on every page.

🎯 Goal: Build a basic website structure with multiple pages and reusable header and footer elements that appear on all pages.

📋 What You'll Learn

Create a Home page with a welcome message

Create a Menu page listing bakery items

Create a Contact page with contact details

Create a reusable Header element with the bakery name

Create a reusable Footer element with copyright info

Add the Header and Footer to all pages

💡 Why This Matters

🌍 Real World

Websites often have multiple pages sharing common parts like headers and footers. Using reusable elements saves time and keeps design consistent.

💼 Career

Web developers and designers use reusable components to build maintainable and scalable websites efficiently.

1

Create the Home page

Create a page called Home with a heading that says Welcome to Sweet Treats Bakery.

No-Code

# Create a page called Home with the heading
# Your code here

Need a hint?

Use a page tag with the attribute name="Home" and add an h1 heading inside.

2

Create the reusable Header element

Create a reusable element called Header that contains the bakery name Sweet Treats Bakery inside a heading tag.

No-Code

  Welcome to Sweet Treats Bakery


# Create a reusable element called Header with the bakery name
# Your code here

Need a hint?

Use a reusable tag with the attribute name="Header" and add an h2 heading inside.

3

Add Header to Home page and create Menu page

Add the reusable Header element to the Home page. Then create a new page called Menu with a list of bakery items: Bread, Cake, and Cookies.

No-Code

  Welcome to Sweet Treats Bakery
  



  Sweet Treats Bakery


# Create Menu page with list of bakery items
# Your code here

Need a hint?

Use the <use reusable="Header" /> tag inside the Home page. Create a Menu page with an unordered list of items.

4

Create Footer and add to all pages

Create a reusable element called Footer with the text © 2024 Sweet Treats Bakery. Add this Footer to both the Home and Menu pages.

No-Code

  Welcome to Sweet Treats Bakery
  
  



  Sweet Treats Bakery



  
    Bread
    Cake
    Cookies
  
  


# Create Footer reusable element
# Your code here

Need a hint?

Create a reusable Footer element with a paragraph. Add <use reusable="Footer" /> inside Home and Menu pages.