Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found

Submitted

Single price grid component

@BitWizCoder

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Sachin 830

@Sachin-Mahato

Posted

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

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

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

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

I hope you find this helpful and happy coding

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord