Design comparison
Community feedback
- @helenhappPosted 4 months ago
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 helpful1@tannguyenk3Posted 4 months ago@helenhapp thank you, your feedback so help me more about html and css. I will refer to your opinion
0 - @BlanchevalenPosted 4 months ago
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
0
Please log in to post a comment
Log in with GitHubJoin 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