@oppahero
Posted
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 helpful
@Kingkobi01
Posted
Hi
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?
@oppahero
Posted
👋 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 helpful
@Kingkobi01
Posted
🙏🏿Thank you @oppahero