Codedex.io Project 1 – HTML

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…


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

     element.
  • A header section that features:

  • An image with an id of "header-img".

  • 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.

  • h3 element for the name of the menu item.

  • 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:

  1. Proper use of semantic elements like <section> and <article>
  2. Creating forms with various input types
  3. 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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Codedex.io Project 1 – HTML." Jade | Sciencx - Tuesday June 25, 2024, https://www.scien.cx/2024/06/25/codedex-io-project-1-html/
HARVARD
Jade | Sciencx Tuesday June 25, 2024 » Codedex.io Project 1 – HTML., viewed ,<https://www.scien.cx/2024/06/25/codedex-io-project-1-html/>
VANCOUVER
Jade | Sciencx - » Codedex.io Project 1 – HTML. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/25/codedex-io-project-1-html/
CHICAGO
" » Codedex.io Project 1 – HTML." Jade | Sciencx - Accessed . https://www.scien.cx/2024/06/25/codedex-io-project-1-html/
IEEE
" » Codedex.io Project 1 – HTML." Jade | Sciencx [Online]. Available: https://www.scien.cx/2024/06/25/codedex-io-project-1-html/. [Accessed: ]
rf:citation
» Codedex.io Project 1 – HTML | Jade | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.