Price Grid using CSS and HTML

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

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

LACK OF LEVEL 1 HEADING ⚠️:

• This solution lacks usage of <h1> so it can cause severe accessibility errors due to lack of level-one headings <h1>

• Every site must want only one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

• Example: <h1 class="sr-only">Single price grid component</h1>

• If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

.

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

Happy coding!

Great work on implementing the solution with only display: block. That's quite the challenge.

However, I believe using display flex or grid would indeed have been the better option. While I agree that it is important to understand the basics of CSS, a good understanding of flex and grid are also very important.

This can be seen when you use a smaller viewport width. It is just more difficult to implement responsive design using display block. See sample video

Overall, I think you did a great job. And I would highly recommend adding flex and grid to your next steps for becoming a master frontend developer!