Skip to content
Submitted 21 days ago

Responsive Product Card

Car•140
@Lukas3162000
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of figuring out object-fit:cover; to solve the problem of viewing the product picture in an responsive environment.

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

I didn't quite get it how to wrap the contents in contents into containers that don't make things too complicated.

And how did i overcome it? I didn't, i made it comlicated and wokred throug so that it at least works and i'll try to improve over the next couple of tasks as i go :D

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

I'd really like to understand, why me content-part of the card in mobile view (below 600px width) doesn't use any margin or padding to the right side & overflows.

I just couldn't figure it out :/

Community feedback

  • Łukasz Gwarda•160
    @lgwardaPosted 21 days ago
    1. Semantic HTML:

    • Use more semantic elements: Consider using tags like <section> or <article> to further enhance the semantics of your HTML.

    • Improve image accessibility: Use descriptive alt text for <img> elements. For example, alt="Bottle of Gabrielle Essence Eau De Parfum" instead of alt="Parfume".

    • Add aria-label to buttons: Describe button actions more clearly for assistive technologies. For example, <button aria-label="Add to cart">Add</button>.

    1. Code Structure and Readability:
    • Group related styles: Organize your CSS by grouping related styles for better readability.
    • Use classes instead of IDs: Rely on classes for styling to enable better reusability, following CSS best practices.
    1. Design Consistency:
    • Alignment with design: Compare spacing, font sizes, and colors with original mockups and adjust as necessary.
    • Visual hierarchy: Ensure headings, subheadings, and body text have a clear visual hierarchy.

    By addressing these areas, you can enhance the overall quality and usability of your component. Focus on semantics and design consistency, aligning with provided mockups or guidelines when applicable. Implementing these suggestions will lead to a more user-friendly and visually appealing result. Good luck!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord