Not Found
Not Found
Request path contains unescaped characters
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

price component attempt

@adluders

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


As always, please give any feedback. I got slightly bored and wanted to try something quick and easy to keep my mind busy. Right after submitting, I realized that my code has a container like feel whereas the original design does not. Other than that, are there anything else that you guys can suggest I improve on?

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Adler, nice work! As you mentioned, the component in the design has its width constrained, whereas your solution stretches. I'd recommend having a go at refining that to get it looking as close to the design as possible.

Here are some other pointers after taking a look at your code:

  • You've got h1 and h3 headings, but no h2. It's recommended to avoid skipping heading levels as this can lead to accessibility issues with the content hierarchy.
  • You're using IDs for styling, which I'd recommend against. They're overly specific and they can't be reused on the page. Instead, stick to class, attribute, pseudo, and type selectors. It will help keep your code more maintainable, especially as you start building larger projects.

I hope that helps. Keep up the great work!

1

@adluders

Posted

Thanks Matt!! I will work on refining it later today or this weekend. I'm trying to get out of using IDs unless it's for ONE VERY SPECIFIC thing on the page but old habits tend to die hard. I will use first and nth type to format the two sections and see how that works out. My goal for this project was to practice my css selections. Rarely, if ever do I use combinations in my previous projects and the more I look into web dev, the more it seems like that's best practice. I will get on it. 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