Skip to content
Submitted over 1 year ago

first product preview card

faybas•70
@faybas
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

Please help with corrections. This project was interestingly hard

Community feedback

  • Tushar Biswas•4,080
    @itushPosted over 1 year ago

    Congratulations on completing the challenge!🎉

    As a beginner, making mistakes is completely okay. Don't worry, I've made plenty of mistakes too! Today, I'll share my thought process and approach for this kind of challenge, hoping you'll find it useful. 💡 I prefer to follow mobile-view-first approach. Because it's actually, an efficient way. However, I remember building the desktop-view first and then the mobile-view in my initial projects.

    When starting a project, I always focus on understanding the design before jumping to code. Each design tells a story, and I listen attentively to translate it into an HTML structure using appropriate elements. 🖥️📱

    For the mobile view, the design is divided into two parts: "product-image" on top and "product-info" at the bottom. I can put both the parts into one element maybe an <article> element and it will also help me to apply margins around it as per the design. So, I’m thinking I can start working with a structure like this:

    <body> 

<main> 

<article id="product-card"> 

<section id="product-image"> 

</section> 

<section id="product-info"> 

</section> 

</article> 

</main> 

</body>

    “product-image” is different for both the views. So I’ll be using background: url() in my CSS file rather than using <img> inside "product-image" to statically link the image. This way it will be also easier for me toggle and control the images for different views in media query.

    In "product-info"

    1. PURFUME looks like a "product-category"

    2. “Gabrielle Essence Eau De Parfum” looks like a product name and will use <h1> for this.

    3. The paragraph looks like a "product-description" hence will use <p> for this.

    4. $149.99 $169.99 will also go into a separate <p> and will simply call it "product-price"

    5. I’ll use a button element for Add to Cart and along with the icon-cart.svg and hover effect for active state.

    6. “product-info” needs some padding.

    For the desktop view, the “product-image” is on the left and the “product-info” is on the right. Which means I need to use “flex” in the “product-card”.

    During development, I utilize Chrome DevTools, starting with the Mobile-S 320px responsive view and gradually moving up to different breakpoints.

    I always try to use relative CSS units because they scale better between different rendering mediums. And use absolute CSS units where it's absolutely necessary. You may checkout my article on 12 Important CSS topics

    Feel free to checkout my project code and live site for better understand the CSS reset, media query etc. For this project I only used 3 breakpoints.

    If you need further help, please don’t hesitate to ask. Just remember programming/coding is an endless marathon, not a sprint. Hope to see cool projects from you in the future🚀

    Keep at it...💻 Happy hacking !

    Marked as helpful
    0

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