Restaurant Website: Code-Along Activity

Congratulations, you just won $250,000 in a prestigious cooking competition! The only catch is that all of that money has to go toward starting a restaurant. You can serve any type of food you'd like, but you also have to make a website for your new endeavor. Follow the instructions below!

Click here to open the Restaurant Website project.

Setup

Make sure to log into your Glitch account before proceeding!

In your new project, open up the index.html file
Add the html tags (opening and closing)
Add the body tags within the html tags

It should look something like this:

<html>
    <body>
    </body>
</html>

Adding the Basics

Add a header, image, and paragraph to the site. For this example, we will be making a Pizza restaurant - but feel free to choose a different food, and a different restaurant name.

Add an h1 header that says "Alfredo's Pizza Cafe" between the <body> and </body>
Under the h1, add an <img > of the pizza
Open the Assets on the right to copy the URL for the pizza image
- Set the src attribute to the copied URL
- Feel free to use a different image for a different restaurant
Under the img, add a p that says "WE'RE NOT FINE DINING; WE'RE JUST FINE FOOD!"
- Note that this is the actual slogan of the actual Alfredo's Pizza Cafe
Open your webpage in a browser and make sure it appears as expected!

At the end of this section, your code should look like this:

<html>
    <body>
        <h1>Alfredo's Pizza Cafe</h1>
        <img src="https://cdn.glitch.global/bb0e13bb-1865-4d75-abcd-970933c1c253/pizza.jfif?v=1724684191328">
        <p>WE'RE NOT FINE DINING; WE'RE JUST FINE FOOD!</p>
    </body>
</html>

Adding a YouTube Video

One fun way to attract customers is to add a video to the site! This is possible using YouTube's built-in embedding feature.

Go to YouTube
Find a video that would make sense on your website (like this one for a pizza restaurant)
From the YouTube video, click on the "SHARE" button
In the pop-up, click on the "Embed" button
In the lower right corner, click "COPY" to copy the code
Go back into Glitch, and paste the code into the index.html file, under the <p></p> element
Run the program, and verify that the video appears on the page!

It should look something like this:

<html>
    <body>
        <h1>Alfredo's Pizza Cafe</h1>
        <img src="pizza.jpg">
        <p>WE'RE NOT FINE DINING; WE'RE JUST FINE FOOD!</p>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/wusGIl3v044" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </body>
</html>

Adding Locations

Next, it's important to have the locations for the restaurant.

Add an h2 header that says "Locations" under the </iframe>
Under the h2, add some locations within p elements
- There should be at least three locations
Open your webpage in a browser and make sure it appears as expected!

At the end of this section, your code should look something like this:

<html>
    <body>
        <h1>Alfredo's Pizza Cafe</h1>
        <img src="pizza.jpg">
        <p>WE'RE NOT FINE DINING; WE'RE JUST FINE FOOD!</p>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/wusGIl3v044" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        <h2>Locations</h2>
        <p>Scranton, PA</p>
        <p>Albany, NY</p>
        <p>Utica, NY</p>
    </body>
</html>

The website has information now, but we still need to add in a menu!

Under the other code in the <body></body>, add an <h2><h2> element
- It should say "Menu"
Add some specialty pizzas under the header, each in <p></p> elements

<h2>Menu</h2>
<p>Hawaiian Pizza</p>
<p>Meat Lovers Pizza</p>
<p>Meat Haters Pizza</p>

Adding Toppings

Next, add a section that lists all the toppings a customer can add.

Under the last </p> in the body, make a new line
Add an h3 that says "Toppings"
Under the </h3>, create a <p></p> element
Between the <p> and </p>, add the text "Pepperoni"
Continue this process and add two more <p></p> elements under the first one

The code for this part should look something like this:

<h3>Toppings</h3>
<p>Pepperoni</p>
<p>Mushrooms</p>
<p>Extra cheese</p>

Run the program, and verify that the toppings list appears on the menu!

Linking to the Actual Website

Alfredo's Cafe has an actual website that visitors may be interested in seeing. At the bottom of the page, add a hyperlink to this website!

Add a h3 element saying "Alfredo's Cafe Site"
Under that, add an a element
Set the href attribute of the a element to "https://www.alfredoscafe.com/"
Set the text between <a> and </a> to say "Click here"

The could should look something like this:

<h3>Alfredo's Cafe Site</h3>
<a href="https://www.alfredoscafe.com/">Click here</a>

Final HTML

By the end, the HTML should look something like this:

<html>
    <body>
        <h1>Alfredo's Pizza Cafe</h1>
        <img src="pizza.jpg">
        <p>WE'RE NOT FINE DINING; WE'RE JUST FINE FOOD!</p>

        <iframe width="560" height="315" src="https://www.youtube.com/embed/wusGIl3v044" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        <h2>Locations</h2>
        <p>Scranton, PA</p>
        <p>Albany, NY</p>
        <p>Utica, NY</p>

        <h2>Menu</h2>
        <p>Hawaiian Pizza</p>
        <p>Meat Lovers Pizza</p>
        <p>Meat Haters Pizza</p>

        <h3>Toppings</h3>
        <p>Pepperoni</p>
        <p>Mushrooms</p>
        <p>Extra cheese</p>

        <h3>Alfredo's Cafe Site</h3>
        <a href="https://www.alfredoscafe.com/">Click here</a>
    </body>
</html>

Restaurant Code-Along