Skip to content
Submitted 2 months ago

Product Preview Card using Semantic HTML 5, SCSS + CSS Grid & Flexbox

Sunay Dagar•120
@suzzy-dszy
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?
  • First time using SASS/SCSS after learning from an online tutorial. I learnt how to implement the SASS file structure, variables, nesting, functions and mixins.
  • First time using BEM methodology which turned out to be quite helpful and i quite like it.
  • First time trying out a mobile first approach which helped me understand the strengths and weaknesses of such a workflow.
  • Researching online helped me solve a lot of responsiveness issues i was facing, all hail stack overflow 💯. -Further improved my understanding of my base CSS knowledge especially CSS Grid & Flexbox.
  • In short a lot of first time experiences 🥳.
What challenges did you encounter, and how did you overcome them?
  • Initially struggled with figuring out the SCSS file structure that would be most suitable, i.e;
    • What should go in my main.scss, how many scss files do i need and for what purpose, and after some research i was able to find the base layout of what is usually done then went ahead from there.
    • Nesting was very confusing at first but quickly learnt what i was doing wrong and how i could leverage BEM to target exactly what i wanted.
What specific areas of your project would you like help with?
  • The preview looks good on small devices up to medium laptop screens but on large screens in my opinion the product card looks too zoomed in. I followed a mobile first approach and i guess that's where the issue is? I'm not sure, but I would've like the product card to look a bit smaller and centered on larger screens so that it looks a bit more aesthetically pleasing to the eyes. So if anyone has any tips on what i could do differently next time please feel free to share. -Also, since this is my first -time using SCSS, any tips/tricks would be much appreciated for example on how to optimize code / file structure, etc.

-Thank you in advance 🙂.

Community feedback

  • py-code314•340
    @py-code314Posted 2 months ago

    Hello, congrats on finishing your project. I've just finished this project and I also used Sass for first time to do it. So, cheers to that 👏🏼

    As I went through your code, I thought I could make some suggestions

    HTML:

    1. You should use <picture> element to switch the images depending on mobile and desktop views instead of wrapping them in <div>. Please refer to this article on how to do that
    2. For 'Perfume' it's best to use <p> tag as it's better to avoid <h2> before <h1> for accessibility purposes. Also it's recommended to change it to uppercase by using CSS, not in HTML itself
    3. For strikethrough old price, please use either <s> or <del> tag as it is more semantic
    4. Your BEM nomenclature of classes looks good 👍🏼
    5. Finally, I suggest this article by Grace Snow if you want to improve your HTML

    CSS:

    1. In your '_config' file you can also add variables for font-size and spacing if you want
    2. Use 'rem' or 'em' for @media instead of px for better responsiveness
    3. You already have border-radius on .product-card, so I don't think you need it on 'mobile image' too
    4. You don't need 'visibility' and 'position' properties for images if you use <picture> element and grid properties
    5. .product-card max-width is not 1000px in desktop view (I think that's why card is bigger than in the design file), it's only 600px (use rem here for better responsiveness) and in mobile view max-width is 343px
    6. I don't think font-size for 'content' is increasing from mobile to desktop. Can you please double check that!
    7. I believe new syntax to import partials is @use
    8. I suggest adding btn: focus and btn: active statuses to your code
    9. To center #main
    body {
  display: flex;
  justify-content: center;
  align-items: center;
}

    Hopefully these suggestions make your project better. Please contact me if you have any further questions. All the best. Happy coding 🎉

    Marked as helpful
    1
    Sunay Dagar•120
    @suzzy-dszyPosted 2 months ago

    @py-code314 Thank you so much for the advice, I'll be sure to try out all that you've suggested, and read up on the article on responsive web design to further aid my understanding. If you don't mind, i shall also take a look at your solution after i attempt the fixes to help gain an insight into what I've done right/wrong, otherwise If any issues do arise I'll be sure to contact you. Once again, thank you so much and props to you too for using SASS for the first time 😄🎉💯

    1
    Sunay Dagar•120
    @suzzy-dszyPosted 2 months ago

    @py-code314 Hello once again, I finally managed to achieve what was required all thanks to the advice you provided. I just wanted to say thank you, your advice helped me to better understand where I went wrong and what steps were needed to correct them. 😄💯

    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