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

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 🙂.