Codedex.io Project 1 - HTML
Tags: learning, html, coding
Published: 2024-06-25 14:59:45

**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 <head> 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 <article> 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 <textarea> element for one of the items (for special requests).

- 
A submit input that says "Go To Checkout".
Note: Make sure to include a <label> element for each <input> 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:

{% codepen https://codepen.io/winx33/pen/zYQaQLo %}


## 🧠 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.