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

#tailwind-css
Nathanโ€ข 160

@nathanLloydw

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Just been practicing my tailwind & CSS, All feedback welcome.

Community feedback

Tesla_Ambassadorโ€ข 2,980

@tesla-ambassador

Posted

Hey Nathan! Congratulations on completing this wonderful challenge! Looks like you had lots of fun doing it and I also love tailwind css ๐Ÿ˜Ž Here's a few pointers:

  • The solution is quite responsive but I think it can be more responsive if you apply some styles to the card at screen widths between 726px - 1168px you can just increase the width of the card to 75% of the screen so that your components within your card can be displayed better and your layout won't break.
  • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

Happy coding and keep up the good work๐Ÿ‘

Marked as helpful

1

Nathanโ€ข 160

@nathanLloydw

Posted

Hi @tesla-ambassador,

Thanks for the feedback, I have applied these changes and will keep it in mind for my next challenge

:)

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