Responsive Product Preview Card with HTML & CSS

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 19 days ago

  Picture tag is what you need.

  Also <div> tag is used as a container for HTML elements, i recommend you to use p tag for the long text and maybe another p with span inside for the prices. You can also dive deeper and add some screen reader only texts like old price, discount, new price etc.

  Marked as helpful

  1

  ---

  

  P

  Harta Shuwanto•50

  @hartashuPosted 19 days ago

  @KapteynUniverse Wow cool! Thanks for the advice. I will try the picture tag and also change the div tag with p tag.

  At first, I used p tag for every text in html except the heading part. But lately, I change my mind. For every short text, I use div. Is div tag only used as container? Or is there any condition where we have to use div beside as a container? And also for the "PERFUME" part, what do you think to use, p or div tag?

  0

  

  KapteynUniverse•2,170

  @KapteynUniversePosted 19 days ago

  @hartashu Div should be used only when no other semantic element is appropriate (There is article, nav, section, hgroup, lists etc.) and to contain group of elements. There may be times to contain only one element for styling purposes ofc, like

  <div>
    <p>
      ...
    </p>
  </div>
  

  For texts there are lots of tags, p, headings, q for small quotes, another quotes tag blockquote, time, abbr for abbreviation/acronym etc.

  You can check here for every tag

  "PERFUME" part is called ribbon text in the design world. P tag would be better.

  For this challenge Grace Snow has a article

  You can also check Kevin Powells video

  Marked as helpful

  1

  

  P

  Harta Shuwanto•50

  @hartashuPosted 18 days ago

  @KapteynUniverse Okay. Thanks a lot for such a lot of good helpful input 👍

  1