Design comparison
Solution retrospective
I liked this project
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @Jairth, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
A better way to work this solution image, the product image is by using
<picture>to wrap it on the html instead of using it as<img>orbackground-image(with the css). Using<picture>you wrap both images (desktop and mobile) and have more control over it, since you can set in the html when the images changes setting the screen size for each image.ote that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image.Here’s the documentation and the guide to use this tag:
https://www.w3schools.com/tags/tag_picture.asp✌️ I hope this helps you and happy coding!
Marked as helpful0@JairthPosted about 2 years ago@correlucas Thanks for the advice! I knew that way of adding the images, but I didn't know it helped with SEO, I will keep it very much in mind in my next challenges. Thank you very much ^-^
0 - @AdrianoEscarabotePosted about 2 years ago
Hi Jair Rodriguez, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
- We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements or ARIA reference regions.
Example:
native HTML5 reference elements:
<body> <header>This is the header</header> <nav>This is the nav</nav> <main>This is the main</main> <footer>This is the footer</footer> </body>ARIA best practices call for using native HTML5 reference elements instead of ARIA functions whenever possible, but the markup in the following example works:
<body> <div role="banner">This is the header</div> <div role="navigation">This is the nav</div> <div role="main">This is the main</div> <div role="contentinfo">This is the footer</div> </body>It is a best practice to contain all content, except skip links, in distinct regions such as header, navigation, main, and footer.
Link to read more about: click here
The rest is great!
I hope it helps... 👍
Marked as helpful0@JairthPosted about 2 years ago@AdrianoEscarabote Thanks for the recommendation! I will keep it in mind, thank you very, very much ^-^
1
Please log in to post a comment
Log in with GitHub
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