responsive, css flex, css grid

Please log in to post a comment
Log in with GitHubCommunity feedback
- @helenhapp
Hi.
Congratulations on completing the challenge!
I see you added both images in your HTML file and used CSS to toggle between them with
display: none;
. This is not the best practice. I suggest that you read "The picture element" article on web.dev. Here's a code example from it that shows how to display different images for different screen sizes:<picture> <source srcset="large.png" media="(min-width: 75em)"> <source srcset="medium.png" media="(min-width: 40em)"> <img src="small.png" alt="A description of the image."> </picture>
Also, instead of writing
<span>P E R F U M E</span>
like this in HTML, its better to write<span class="category">Perfume</span>
, so that the screen reader reads it as a word and not separate letters (to keep your website accessible), and then style it with CSS like this (as an example):category { text-transform: uppercase; letter-spacing: 5px; }
Text-transform: uppercase;
turns all letters to uppercase andletter-spacing
adds some space between them.I hope this is helpful. Happy coding!
Marked as helpful - @Blanchevalen
Dear Nguyen Duc Tan,
You have a nice solution! Your HTML code is very simple and effective. Your CSS code is good, working well, but the many media query maybe makes sustainability difficult.
Thanks! Blanchevalen
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