Responsive Single Price Grid Component - BEM, flexbox, media query

Community feedback

• 

  Tiago BW•210

  @tiagobwPosted over 2 years ago

  Hi Erel,

  You can probably get the exact measurements by opening the design .jpg inside Photoshop / Illustrator / Figma and using the Ruler tool.

  But I think that coding just by looking at the image and getting a good design is much more valuable. And yours is already great.

  And the same goes for your BEM methodology for CSS and structure, semantics, and accessibility for HTML.

  Great job.

  10/10.

  :)

  Marked as helpful

  0

  ---

  

  Erel Ropeta•385

  @ereljapcoPosted over 2 years ago

  @tiagobw I will try to use the ruler tool in Photoshop on the next challenge. Thank you so much, Tiago! I really appreciate the you looked into my code :)

  1

  

  Tiago BW•210

  @tiagobwPosted over 2 years ago

  @ereljapco

  That's great,

  I'm glad I could help.

  Thinking here, and for the fonts (just in case the size isn't available on the Front-end Style Guide), you can download the font in Photoshop / Illustrator / Figma and type over the design .jpg to see what size fits perfectly.

  Just a heads up about this challenge, it asked for See a hover state on desktop for the Sign Up call-to-action.

  I also forgot this detail, I've only added a cursor: pointer. I need to update it later.

  Keep up the awesome work. :)

  See you later.

  Marked as helpful

  1

  

  Erel Ropeta•385

  @ereljapcoPosted over 2 years ago

  @tiagobw Thank you so much for the tip about the font size. It takes a lot of trial and error to get close to the design ^^'

  Oh, my. Didn't notice the need for the hover state. Thank you for telling me. I always just based the code on the design images provided. This didn't have an active state image ^^'

  Thank you so much for the help. Cheers! :)

  1