Hiya!
Documenting the journey! Here is my first project with Codedex program for HTML.
š The Project
I created a restaurant menu webpage using HTML. Here are the guidelines:
Final Project
Congratulations on finishing all of the chapters in The Origins I: HTML! Now letās use the skills weāve gained throughout the course to build out a fun Restaurant Menu website.
Restaurant Menu
In this Final Project, you'll create a page of a full fledged restaurant menu that includes a form for placing an order!
Create a new file calledĀ restaurant_menu.html.
You can be as creative as you want with the name and menu items for the restaurant; it can be real or fictional. However, you should include the following:
The HTML file should be properly structured (Hint: start withĀ <!DOCTYPE html>).
-
A
Ā element.titleelement with the restaurant name should be included in theĀ A
headersection that features:An image with anĀ idĀ of "header-img".
AĀ
h1Ā heading element with the name of the restaurant.A navigation section with two headings forĀ "#menu"Ā andĀ "#order-form".
A main section for the menu and order form, featuring:
Two sections, each with aĀ
h2Ā heading that says "Menu" and "Place Your Order".
The "Menu" section should have at leastĀ threeĀ Ā elements for the menu items that use the following elements:
AnĀ
imgĀ image element.AĀ
h3Ā element for the name of the menu item.AĀ
pĀ paragraph element that briefly describes the item (1-2 sentences) and includes price information (italicized).
The "Place Your Order" section must include aĀ formĀ element with the following inputs:
Number inputs for each menu item (make sure to validate input with a minimum of 0).
Radio and/or checkbox inputs for things like sides and add-ons.
At least oneĀ Ā element for one of the items (for special requests).A submit input that says "Go To Checkout".
Note:Ā Make sure to include aĀ Ā element for eachĀ Ā element.A footer that includes aĀ
pĀ paragraph element that reads "Made with love by " followed by your CodĆ©dex username.
You can view the project here:
š§ What I Learned
This project helped me grasp several HTML concepts:
- Proper use of semantic elements like
<section>and<article> - Creating forms with various input types
- The importance of explicit labelling in forms
A key learning point was about form labels. Initially, I used implicit labelling, but thanks to feedback, I learned about the preferred explicit labelling method. You can see an example here: [https://www.codedex.io/@intelagense/label-demo]
š± Challenges and Growth
The main challenge I faced was with form labels. I really appreciated the feedback and break down I was given, which helped immensely with my understanding.
It's amazing how much a small change can improve accessibility and user experience!
āļø Next Steps
I've already completed the CSS course, so my next step is to submit a new project of a personal website, with styling.
It is probably way to early to say this, but asĀ much as I thought I would like front-end so unleash some creativity, I am not actually loving the idea of it. At this point in time. We shall see!
š¤ Your Thoughts?
I'd love to hear your feedback on this project. If you have any suggestions for improvement or questions about my learning process, please feel free to comment below.
Top comments (0)