Product Preview w/ Optimized layout

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 3 days ago

  Well done! Looks really close to the design and you made good use of semantic HTML!

  For the prices that don't align vertically it because of a margin you have on the newPrice selector.margin: 0.25em 0.5em 0.5em 0; Due to that it won't center align. I see you used flex so if you want a spacing, you can use gap: .5rem it works for both grid and flexbox.

  I see that in that section you have 2 ps in a span. Generally its bad practice to put block level elements in inline elements(I don't know the actual disadvantages but its best practice). What you could do is switch them so you have 1 p tag and 2 span tags. That would be more semantic.

  For making the image change for mobile devices, make sure to use the picture tag as its useful and allows pictures to change based on media attribute and can be done without CSS. It's generally a best practice as well.

  ALso for the Add to cart button you could make it accessible by making it an actual button so it can be focusable by keyboard.

  <div class="heading">Gabrielle Essence Eau De Parfum</div> for this, it is the heading of the webpage so make it an h1/h2(h2 would be better since h1 would be too important) but it's your choice.

  <div class="cardWrapper"> this could have been a section as you don't really need a div to wrap it again.

  Also use a p tag for the description.

  Overall you did good but you still have a few more things to improve to get better.

  FOr the readme there is a template that Frontend Mentor wants you to follow so you others can see what you have learnt and gain more insights about your process and solution. ALso read the first readme.md to get an idea of the process FEM expects you to use.

  0
• 

  SydsBike•70

  @SydsBikePosted 3 days ago

  Nicely done!

  0