@py-code314
Posted
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:
- 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
- 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
- For strikethrough old price, please use either <s> or <del> tag as it is more semantic
- Your BEM nomenclature of classes looks good 👍🏼
- Finally, I suggest this article by Grace Snow if you want to improve your HTML
CSS:
- In your '_config' file you can also add variables for font-size and spacing if you want
- Use 'rem' or 'em' for @media instead of px for better responsiveness
- You already have
border-radiuson.product-card, so I don't think you need it on 'mobile image' too - You don't need 'visibility' and 'position' properties for images if you use <picture> element and grid properties
.product-card max-widthis 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 viewmax-widthis 343px- I don't think font-size for 'content' is increasing from mobile to desktop. Can you please double check that!
- I believe new syntax to import partials is @use
- I suggest adding
btn: focusandbtn: activestatuses to your code - 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
@suzzy-dszy
Posted
@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 😄🎉💯
@suzzy-dszy
Posted
@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. 😄💯
