Responsive preview card using HTML and CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  Hello

  In html

  • use the picture element not two img tags like this. That lets the browser select the images correctly for you
  • img alt text should describe what the image actually looks like (briefly)
  • you have opened a paragraph tag for perfume but closed a h6. It should be a paragraph
  • that paragraph should not be capitalised in the html. Let the css capitalise it
  • you shouldn’t ever have text in a div or span alone. Wrap those prices in a paragraph tag
  • the old price needs to be wrapped in a del element.
  • I recommend also adding some additional informative text to the del element via before and after pseudo elements, a technique demonstrated on Adrian Rosellis site. So you would have del:before { content: “[deletion start]”. This greatly benefits screenreaders because they are not reliably told when deletions start or end, and are not told when text is styled with a line through, so there would be no way for them to know which is the old price without this extra effort
  • the icon in the button is decorative so alt should be empty
  • I recommend making attribution a footer. It’s not really relevant to the main content

  Marked as helpful

  3

  ---

  

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  With css I prefer to review in browser but am away from my computer so will have to have a go at feeding back without that tonight. Here goes!

  • beware height 100vh. I’d only expect min-height on the body not 100vh on container as well, not sure why you'd need or want that. It can cause overflow issues
  • the card should not have a width or height. Only max-width
  • letter spacing shouldn't ever be in px; use em or %
  • next time work mobile first
  • use a css reset at the start of every stylesheet. Josh comeau and Andy Bell both have good modern examples
  • it is more performant to link font families in the head not import into css
  • on the desktop layout I think you need each half of the card to be display block and width 50%

  1

  

  Maria Vivi•50

  @mariapaulavPosted about 2 years ago

  @grace-snow Thanks Grace I'll do that!

  0
• 

  P

  Astar•170

  @astabaPosted about 2 years ago

  Hola señora. Muy bien hecho, para una principiente ya nos depara muchas promesas sus futuro en el IT.

  1. Le aconsejo añadir un "media query" para cumplir con los requisitos del "Responsive Web Design".
  2. Antes de usar position: absolute es mejor dominar el uso de display: flex del que se puede sacar mucho provecho. Le propongo disfrutar de este Flexbox tutorial.

  1

  ---

  

  Maria Vivi•50

  @mariapaulavPosted about 2 years ago

  @Matondo99 Thanks!

  0