Project: Luigi's Pizzeria - Homepage
Requirements
- The homepage will have links to each of the other pages.
- The other pages will have links to each other.
- Each page will have a picture of the fictional restaurant that consists of a large image.
- Each page will have a copyright at the bottom.
- The homepage will have at least one paragraph describing the restaurant.
- The description of the restaurant should use the word "pizza" at least once.
- Each mention of the word "pizza" should be a link out to the wikipedia page for pizza.
Instructions
- In the "index.html" file, add the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Luigi's Pizzeria</title> </head> <body> </body> </html>
- Save.
- If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
- Create a heading for the page by adding the following code between the opening and closing tags of the body:
<h1>Luigi's Pizzeria</h1>
- Save.
- Create a navigation bar for the website by adding the following code under the heading:
<!-- Navigation Bar --> <ul> <li><a href="./index.html">Home</a></li> <li><a href="./pizzas.html">Our Pizzas</a></li> <li><a href="./prices.html">Prices</a></li> <li><a href="./contact.html">Contact</a></li> </ul>
- Save.
- Create a background image for the website by adding the following code under the navigation bar:
<img src="./images/background.jpg" alt="background image"> <br>
- Save.
- Create a descriptive paragraph for the website with links by adding the following code under the background image:
<p> Luigi's Pizzeria is a warm and inviting restaurant specializing in delicious, authentic Italian <a href="https://en.wikipedia.org/wiki/Pizza" target="_blank">pizza</a>. With its charming decor and friendly atmosphere, Luigi's is the perfect place to enjoy a meal with family and friends. The menu features a variety of tasty <a href="https://en.wikipedia.org/wiki/Pizza" target="_blank">pizza</a> options, made with fresh ingredients and cooked to perfection in a wood-fired oven. Whether you're in the mood for a classic cheese, a spicy pepperoni, or a unique specialty pie, Luigi's has something for everyone. And with competitive prices, you can enjoy a delicious meal without breaking the bank. Visit Luigi's Pizzeria today and taste the difference for yourself! </p>
- Save.
- Create a footer for the page by adding the following code under the descriptive paragraph:
<p>© 2023 All rights reserved.</p>
- Save.
- In the browser, you should see the following:
Code Walkthrough and Explanation
For the homepage, all requirements were met. The homepage features links to each of the other pages, allowing easy navigation to other parts of the site. The page includes a large image of the fictional restaurant used for the "background". A copyright is present at the bottom of the page, providing necessary information about the ownership and rights of the content. The homepage also includes a descriptive paragraph about the restaurant, which contains at least one mention of the word "pizza". Importantly, each instance of "pizza" in the text is a link out to the corresponding Wikipedia page, providing additional information and context for interested users. With all of these requirements met, the homepage is complete and functional.
Video and Code References
Questions? Subscribe and ask in the video comments: