Responsive Product Preview Card using HTML and CSS

Community feedback

• 

  T

  Josh•400

  @burrijwPosted almost 2 years ago

  Hey! Nice attempt!

  Look into using the <picture> element for serving different images responsively. Here is a guide on MDN for responsive images. (Index.html : 21-22)

  It may not be the best fit semantically to us an article inside the card. From MDN: “The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).” It wouldn’t make sense to repurpose the card content without the product images. So the whole card may fit in an <article>, but the text content by itself might not. You could just use a <div> since the only reason for grouping those elements together is for styling.

  I would suggest revisiting your heading levels. I don’t think the “perfume” really serves as a page title.

  Try the <del> element for the old/previous pricing. The <strike> tag isn't recommended anymore.

  Marked as helpful

  1