Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single price grid component

Davis Tran 110

@davistran86

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

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work on this challenge! I like that you've added your own creative twist on the design as well.

At the moment you're using h1 and h3 elements, but you haven't got any h2 headings. Try to make sure you don't skip heading levels like this, as it can negatively affect the content hierarchy and make it confusing for screen reader users. Here's an article for more information.

Also, I'd recommend giving min-width media queries a try on your next project and practice working from a mobile-first approach. It has a number of benefits, including reducing the amount of CSS being loaded by mobile users.

Keep up the great work!

0

@l3rodey

Posted

@mattstuddert That's a broken link? I found this though for those looking: https://www.sitecentre.com.au/design/responsive

1
P
Matt Studdert 13,611

@mattstuddert

Posted

@l3rodey cheers for the link. Looks like Interneting is Hard has let their SSL Certificate expire since I posted.

0
Davis Tran 110

@davistran86

Posted

Thanks Matt, I didn't know that we need to use all the heading in order. Do you have any examples about using min-width and mobile-first approach ?

0
Davis Tran 110

@davistran86

Posted

Thanks a lot Matt :)

0

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