Responsive Product preview card with Angular

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 6 months ago

  Hello Sajib, your solution is perfect! It's extremely similar to the proposed design, almost reaching pixel-perfect. For your first post, you've started off very well! Congratulations!

  I'd like to give you some tips regarding your HTML and CSS. Let's start with CSS. I noticed that you used font sizes in px. While this isn't wrong, it's strongly recommended to use rem instead. rem adapts to the user's font size settings, which helps with accessibility and responsiveness of the solution.

  Now, onto HTML. It's well-structured, but I noticed it lacks some semantic elements. Semantic markup is extremely important not only for SEO but also to improve accessibility of your page. Here are some sections that could be improved:

  • <div class="Card">: It would be more appropriate to replace this with <main>, as it contains the main content of your page.
  • <div class="cardImg">: Here, you could replace it with <figure> since it's only storing the illustration of the page.
  • <div class="cardBody">: This section could be an <article>, as it has identical thematic content and is self-explanatory, not depending on other sections of your HTML to make sense.

  Inside the <div class="cardImg">, you could also use a <picture>. This way, you avoid having to use two <img> tags. Here's an example:

  <figure class="cardImg">
     <picture>
         <source media=('min-width: 1024px') srcset="images/image-product-desktop.jpg"
         <img class="Mobile" src="images/image-product-mobile.jpg" alt="">
     </picture>
  </figure>
  

  Here's a link about it: W3SChool - Picture

  Again, congratulations! If you have any questions, please ask below, and I'll try to help as best as possible.

  0