Design comparison
Community feedback
- @oppaheroPosted 6 months ago
Hi!
Congratulations on finishing this challenge✨
I have a suggestion about your code that might interest you 💡
📍You can use the
<picture>
tag when you have different versions of an image for different device scenarios<picture> <source srcset="image-large.jpg" media="(min-width: 1200px)"> <source srcset="image-medium.jpg" media="(min-width: 600px)"> <img src="image-small.jpg" alt="Description"> </picture>
📍A recommended practice and it is important for SEO is to include the meta tag with the description
The <meta name="description"> element provides a summary of a page's content that search engines include in search results.
<meta name="description" content="Put your description here.">
- You can use Lighthouse, it is an automated tool to improve the performance, quality and correctness of your web applications.
📍Use appropriate semantic HTML tags to define the different sections of your page.
For the card it would be more appropriate to use the
<article>
tag, this is because:<div>
is a generic tag for grouping elements. It has no specific semantic meaning.<article>
represents independent and autonomous content, such as a news article, a blog post, a product or, precisely, a card.
Happy coding!
Marked as helpful0@Kingkobi01Posted 6 months agoHi
Thank you for the
<picture>
tip. I've never used this tag before and I've been thinking of a way to show different versions of an image in different scenarios. I'll be using it a lot.Also thank you for the semantic HTML tip.
About the SEO, do you have any resources for that?
0@oppaheroPosted 6 months ago👋 Hello @Kingkobi01
-
Chrome has its own developer documentation. Here you can see about audits and best practices
-
Quick Start Guide to SEO. It also contains different resources that are of interest.
Hope it helps ✨
Have a nice day!
Marked as helpful0
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