Design comparison
Solution retrospective
I just finished my second challenge. I want your suggestions what can be improved and in general what you like or you don't like. Thank you in advance for feedback :)
Community feedback
- @jeancarlosruizPosted over 1 year ago
Hello Michal :D
Congratulation on finishing this challenge, here are my suggestions detailed below:
-HTML:
-- <picture>: Using a picture tag you avoid using background-image setting width and height, inside of the picture tag set a main img and a source tag setting when the image will change with media query. Example with a mobile first workflow: Documentation, Video.
<picture> <source media="(max-width: 810px)" srcset="img-mobile-location.jpg"> <img src="img-desktop-location.jpg" alt="img-desktop"/> </picture>
-- <h2> or <span>:
- You can use an h2 or a span rather than h3 in <h3>Perfume</h3> because in order to use an h3 it needs to come after an h2 and so on. In my opinion the best solution for this is using a span. documentation
-- SVG:
- Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
- Inside the <svg>, add:
<title>A short title of the SVG</title>
- Add the appropriate ID’s to the <title>:
<title id="uniqueTitleID">The title of the SVG</title>
- On the <svg> tag, add:
aria-labelledby="uniqueTitleID
documentation
-CSS:
-- rem:
- For font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. documentation
- Website to converte px to rem easly: PX to REM
Best Regards, Jean Ruiz
Marked as helpful1 - @namborghiniiPosted over 1 year ago
Good job on completing the challenge! :)
Please remember to set font-family as well as font-weight for the different kind of sections.
Marked as helpful1
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