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

Blog