Adaptive preview card using HTML&CSS only

Community feedback

• 

  Daniel 🛸•44,290

  @danielmrz-devPosted 7 months ago

  Hello @vladkvlchk!

  Your solution looks excelent!

  I have just one suggestion:

  📌 To improve semantic clarity, try to maintain the titles hierarchy with <h1>, <h2> <h3>, and so on.

  It's more than just text size — it's about structuring your content effectively:

  • <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.

  While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

  Hope this suggestion proves helpful! Keep up the great work!

  Marked as helpful

  1
• 

  Bernardo Poggioni•5,510

  @R3ygoskiPosted 7 months ago

  Hello Vladyslav, congratulations on completing your project! It looks perfectly similar to the proposed design. Well done!

  I'd like to offer some tips focused on your HTML. It's highly recommended to keep your CSS in a separate file, not only because it's a good practice but also because it helps increase the organization of your project.

  Regarding CSS, I highly recommend using the rem unit for fonts. rem is a relative measurement and adapts to the user's font settings, unlike px, which is an absolute value and doesn't change.

  Using rem to define the size of an element is also a good idea. This way, if the font size increases, the element covering it will also increase, making your code more accessible.

  Another tip is about your HTML. Its structure is correct, but it lacks semantic meaning. Using semantic tags is a good practice and essential for creating a more accessible page with good SEO integration.

  Also, regarding HTML and accessibility, be careful with how you structure your headings. Screen readers read them hierarchically, starting from <h1> and progressing to <h6>. In your solution, a screen reader would jump from the product title/name to the price and then to the category, which can be confusing.

  Once again, congratulations on your project! It looks amazing, truly. Keep up the great work. If anything I said isn't clear, please comment below. I'll be happy to help in any way I can.

  Marked as helpful

  1
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello i`ll wishing for your completion project solution.

  • I will give some suggestion i believe its used for improve your skill.
  • In CSS You will use

  .component {
      margin: 20px;
  }
  

  • I will recomand for Using rem values for padding provides a scalable and flexible approach, especially when considering accessibility and responsive design.

  .component {
      margin: 2rem;
  }
  

  Marked as helpful

  1