Ping Coming Soon Page

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

LABELS 🔖:

• input elements wants a label associated with it

• A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute

• Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

• Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields, So here using aria-label="{values}" attributes for input is enough to be accessible

• Example:

<input type="email" id="email-input"  aria-label="Enter your Email Address"  placeholder="Your email address..." oninput="validateEmail()">

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Well done for completing the challenge

.Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.

1. Lack of semantic HTML:

• Semantic HTML elements are missing or not used appropriately.
• The structure does not convey the meaning and purpose of different parts of the webpage.

-.Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serve as the component’s container

--

More info

.Avoid skipping heading levels ⚠️.

• Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.

More info

2. Usage of absolute units instead of relative units:

• Absolute units like pixels (px) are used for defining lengths and sizes instead of relative units like percentages (%), em, or rem.
• Relative units are more flexible and responsive across different screen sizes.

More info

For improved accessibility 📈 for your content, it is best practice to use em ✅ for media queries. Using this unit gives users the ability to scale elements up and down, relative to a set value use this link to learn about media queries

more info

Your CSS Reset is being underutilized😢 To fully maximize 💯 it, you will want to add more to it. Here are some examples that you can freely use 😁: Josh Comeau Reset Eric Meyer Reset

I hope you find this helpful and happy coding