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.title
element with the restaurant name should be included in the A
header
section 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.