Product Preview Card Component

Community feedback

• 

  Francisco Carrillo•5,540

  @frank-itachiPosted almost 2 years ago

  Hello there 👋. You did a good job!

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks. For example, you could use a <footer> tag to wrap a footer section.
  • The heading order is important in the html structure so try to always start your headings with an <h1> tag and then you can decrease by one if you need to use more heading in your html code.
  • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  0

  ---

  

  Adebayo Goodness Oluwadamilola•60

  @bella019Posted almost 2 years ago

  @frank-itachi Thank you very much for this great advice.

  0
• 

  P

  Vivek•150

  @tweetandcodePosted almost 2 years ago

  Hi, I'll try to get you started in a simple way. open your css file and add this body { background: white; } @media screen and (min-width: 768px) { body { background: red; } }

  resize your browser to <= 768px to see the body go to white and >= 768px to see it become red.

  also remember this. min-width means if the screen is atleast(>=) that width, apply the css inside. max-width means if the screen is atmost(<=) that width, apply the css inside

  and place your media queries in the end.

  This should get you started. .

  0

  ---

  

  Adebayo Goodness Oluwadamilola•60

  @bella019Posted almost 2 years ago

  @tweetandcode I am currently studying on this. This makes a great head start. Excited to apply to my next work

  0