Single Price Grid Component (CSS Grid + Some Flex)

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Hey Mike,

  Great work on this challenge and congrats on submitting your first solution! Here are a few pointers for your HTML code:

  • The "$29 per month" text shouldn't really be in two separate paragraphs. I would just have a single paragraph and then add a span to separate the words. span elements have no semantic meaning, so they're great for these purely visual tasks.
  • You don't need the .overlay element to change the background in the "Why Us" area. Instead, you could just change the background-color.
  • In the "Why Us" area you've got the items in paragraph tags, whereas I'd say this should be a ul as you'd describe it as a list of features/benefits.

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

  2

  ---

  

  Mike•115

  @maquindePosted almost 5 years ago

  Thank you for the feedback! This is what I was looking for!

  0
• 

  Simeon Udoh•535

  @simeon4realPosted almost 5 years ago

  Your solution looks good. About your HTML5 and CSS code, I think It will be better if you apply BEM - Block Element Modifier to your solution. It will make your markup more semantic. Also, I recommend using classes to style elements. for your headings, You can use a class like .heading__primary { __code here__}

  This article on SmashingMagazine will help with that.

  Don't forget to upvote my feedback if you found it useful

  2

  ---

  

  Mike•115

  @maquindePosted almost 5 years ago

  Thank you! I really appreciate the feedback.

  0