Skip to content
OverviewSolutions
5
Comments
5
P
Bára Kalvodová
@BaraKalvo

All comments

  • P
    oxford777•80
    @oxford777
    What are you most proud of, and what would you do differently next time?

    Ce dont je suis la plus fiere, c’est d’avoir réussi à reproduire le design de manière fidèle, aussi bien sur mobile que sur desktop. J’ai également bien compris comment utiliser Flexbox et les media queries pour gérer le responsive.

    What challenges did you encounter, and how did you overcome them?

    Le plus gros défi a été de gérer l’image du produit : elle était parfois déformée ou coupée sur certains formats. J’ai appris à utiliser object-fit, max-height, et les unités comme clamp() pour l’adapter correctement sans perdre en qualité visuelle.

    J’ai aussi eu du mal avec les breakpoints. J’ai finalement trouvé une bonne organisation en testant avec les outils de développement du navigateur.

    What specific areas of your project would you like help with?

    J’aimerais savoir s’il existe de meilleures pratiques pour gérer les images dans un layout responsive sans passer par trop de media queries.

    Je suis aussi curieuse d’avoir des retours sur l’accessibilité de mon bouton (j’ai utilisé aria-label, mais je ne suis pas sûr de tout faire correctement).

    Enfin, je serais ravi d’avoir un feedback général sur le code CSS (organisation, lisibilité, simplicité).

    Product preview card component HTML, CSS

    1
    P
    Bára Kalvodová•90
    @BaraKalvo

    Hi, great job! I just have a couple of small suggestions. Since the entire product card is essentially one logical unit, I believe that from a semantic point of view, it would be more appropriate to use a <section> tag instead of a <div> for the .carte class.

    For responsive image display, I’d also consider using the <picture> and <source> tags. This way, you can define breakpoints directly in the HTML for displaying either a vertical or horizontal image. It could save you a few lines of CSS.

    Otherwise, very nice work. Have fun coding! :-)

  • P
    Bára Kalvodová•90
    @BaraKalvo

    Hi, nice visual styling! :-) Just a small note: since the section Nutrition displays nutritional values in two columns and even refers to a 'table' in the text, it might be more semantically appropriate to use an actual <table> element. That way, screen readers can better understand the data structure. Here is an example of how it could look:

    <table>
  <tbody>
    <tr>
      <th scope="row">Calories</th>
      <td>277kcal</td>
    </tr>
 ...
  • P
    Bára Kalvodová•90
    @BaraKalvo

    Hi, great job!

    I’d suggest adding some padding to the container—either directly to the <main> element or, even better, by wrapping everything in a <div class="container"> and adding padding there. This way, the text won’t be touching the edges on smaller screens.

    In the design, the mobile version also has slightly less padding than the desktop version—you can handle that with a media query. For example, set the padding to 20px to the .container, and then increase it to 40px for larger screens.

    As for the social media links, instead of using <p>, I’d recommend using <a href="..."> so they function as actual links.

    Lastly, for better code readability, you could create a class like .button and style that, instead of using a div p selector, which can be harder to read and manage.

  • P
    Bára Kalvodová•90
    @BaraKalvo

    Hi, I like the HTML structure – it's clear and simple. Also, defining your own color variables is a good idea. Regarding the spacing between elements inside the <div class="align">, I’d recommend resetting the margins on all elements (margin: 0) and using gap: 12px; instead. In my opinion, this solution is simpler and more concise. Overall, you've done a good job!

    Marked as helpful
  • P
    Bára Kalvodová•90
    @BaraKalvo

    Hi, to me, it's not necessary to use flexbox on .card. All the elements inside the card are situated vertically, so it works the same way without flexbox. But overall, you've done a good job. Keep it up!

    Marked as helpful