Product preview card using Flexbox

Community feedback

• 

  Lacey E•110

  @laceederPosted over 2 years ago

  to address the issues in the report first: Report

  1. include a <main> tag after your body tag.
  2. images must have an alt text like this: <img src="./image/example.png" alt="short img description" />..this is so someone with a screen reader can tell what the image is. Try to remember accessibility, it's very important.

  now for YOUR questions! :)

  With headings, go in numerical order. You can always go and change the font size in the CSS! :) So go from h1 to h6. For me, I use p tags when it's more than a blip of text. For this one, the only <p> would be the paragraph below the title name of the perfume because it's a block of text. I'm not entirely sure when to use <span>. Here's a good article I found here. Spans are inline, divs are block elements. So divs are for sections of your code, like the perfume title and description could be a div, then the price information could be another, and then your button would be another. I try to look at my design and see which areas I'll need to group together and think about how they'll need to be styled.

  I highly recommend styling mobile first. It's hard to tell when it's a small design like this, but when you get to bigger projects, you'll run into the issue of it being more time-consuming to go from big to small versus small to big. It's easier, IMO, to expand my design rather than shrink it. When I've tried styling desktop first, I find myself going back and forth to fix things more often than I should be. Because when I style something for mobile, then the desktop style always changes. However, when I do mobile first, I rarely ever find myself going back and forth and doing double the work. The standard I learned it mobile-first, but I've seen some people prefer to do the opposite. I just recommend you do mobile first! :)

  With your design, you did a great job! Your perfume title is a little large, and the paragraph doesn't line up like in the design file, but otherwise it looks great! Keep practicing and good luck on your future challenges! And don't be afraid to google information. I've found a lot of great resources that way :)

  Marked as helpful

  1
• 

  Martin•450

  @mvelardeqPosted over 2 years ago

  Excellent!. I only notice that cart icon doesn't align with the text in button, maybe you could write in "a" selector display: flex, justify-content:center, align-items:center and gap:1rem. Maybe there is a short way, i don't know.

  1