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

@Aleemcode

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


Hello, fellow devs

I felt good to have my first challenge completed. I'll like to have your feedback on the following:

  1. What is the fastest approach to set up a layout?
  2. What is the best practice for typography?
  3. What do you guys think I need to know to improve my dev skills based on this submission.

Thanks.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Great work, Aleem! Congrats on submitting your first solution 🎉

Here are some answers to your questions:

  1. There isn't really a single fastest way to create any given layout. You'll become faster with every project you build. Everyone has their own workflow as well, so it's a great idea to just keep practicing so that you can find the workflow that suits you best.
  2. I always use the rem unit for font-size declarations. This always me to simply change the font-size on the html element to scale all sizes up and down. I'll use rem units for spacing as well, so that every scales proportionally. It's great to see that you're already doing this 👍
  3. Here are some pointers after taking a look at your code:
    • I'd recommend having a go at using min-width media queries instead of max-width. Doing this and working mobile-first often leads to less CSS code and has the benefit of loading in fewer styles for mobile users.
    • I'd recommend only using a single h1 heading. Having multiple can cause accessibility issues, so having a single one is recommended.
    • In the Why Us area, you're using a paragraph, whereas it's a list of features/benefits, so a ul would be a great option here.

I hope these tips help. Keep up the great work and let me know if you have any questions!

1

@Aleemcode

Posted

@mattstuddert Thanks for the reply. Well detailed and insightful, I really appreciate that. I'll look into the changes you raised and implement them likewise the tips.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Aleemcode you're welcome!

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