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

Html CSS

P
Patrick 14,325

@palgramming

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


First Challenge I have posted here

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work, Patrick, and congrats on submitting your first solution! Here are a few pointers after taking a look at your code:

  • You're using heading elements when I'd say paragraphs would be better suited. For example, I'd say the "Gain access to our full library..." text is a paragraph, not a h3.
  • You're using HTML5 structural elements which is great. But I would say you could use the article and section elements better. An article is typically used to contain distinct content that could live independently from the rest of the content on the site/page. Good examples of this would be blog posts, articles, and forum posts. A section is typically used to wrap a larger grouping of themed content. For example, the whole Slack sign up area below these comments would be considered a section. For smaller groupings of content I'd then use div elements. So for this challenge, I'd say the whole thing is a section and the inner areas are just div elements.
  • I'd use a ul for the list of benefits/features as opposed to br tags.
  • The whole component could also have its width restricted so that it isn't quite so wide.

I hope these tips help. Let me know if you have any questions! 👍

1
P
Patrick 14,325

@palgramming

Posted

Thanks for the feedback. I think on the designs that are to be fixed width maybe in design photo it should show that element inside another example layout it might help understand the usage for what is being designed . just like a wire frame image with the little block inside showing the wire frame grow and shrink and the different widths

yes and not using UL for the list when I just got lazy and typed BR #Thanks

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