Skip to content
Submitted over 1 year ago

Price Grid using CSS and HTML

accessibility
Duzor12•10
@Duzor12
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I had no prior experience with CSS before this, and I had heard that using CSS flexbox or grids would be easier, but I wanted experience with the basics. I'm ready to complete more challenges in the future

What challenges did you encounter, and how did you overcome them?

The CSS display property behaves weirdly when it is set to inline-block. It gave me some trouble with positioning some of my elements, but I eventually solved it by removing the whitespace between two inline-block-type elements in the HTML file.

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    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!

  • Brian Michael Poblete•490
    @Brian-Pob

    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!

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