This content originally appeared on DEV Community and was authored by Jade
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
h1heading 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
h2heading 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
imgimage element.A
h3element for the name of the menu item.A
pparagraph 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
pparagraph 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.
This content originally appeared on DEV Community and was authored by Jade
Jade | Sciencx (2024-06-25T14:59:45+00:00) Codedex.io Project 1 – HTML. Retrieved from https://www.scien.cx/2024/06/25/codedex-io-project-1-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.