Project: Luigi's Pizzeria - Intro & Requirements
With the understanding of HTML tags and elements, you are now equipped with the basic knowledge needed to start building your first web project. You have learned about different types of HTML tags, such as headings, paragraphs, images, links, tables, and forms. While there is a lot more out there, you can now create structured content for a website and create basic user interactions with forms.
The project that we will continually build upon in this book series will be a fictional pizza restaurant's website - "Luigi's Pizzeria". For now, you will build a basic HTML website which will describe the different types of pizza, their prices, the location of the restaurant, and a contact form. As we progress to the other technologies in the stack, you will add much more features to it.
Here are the requirements that we will build our web page to meet:
- The website will consist of four separate pages
- Home
- Our Pizzas
- Prices
- Contact
- 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.
- The "Our Pizzas" page will have a picture and a description of each of these types of pizzas:
- Cheese Pizza
- Pepperoni Pizza
- Mushroom Pizza
- The "Prices" page will have a table that shows the cost of each pizza by size.
- The "Contact" page will the restaurants location and a form that consists of the following fields:
- Name
- "Yes / No / NA" radio button choices to answer the question - "Did you enjoy your pizza?"
- "Cheese / Mushroom / Pepperoni" checkbox choices to answer the question - "Which pizzas have you tried?"
- Comments as a textarea.
- Submit button
If you want to test your skills, feel free to try and build this out with the HTML you learned in the previous sections before following the instructions in the next sections. In software development, there is almost always many different ways to build something so your code may end up looking different from what you see in the instructions. This is perfectly fine.