Submitted almost 3 years ago

SEMANTIC HTML5, CSS, HTML5 MICRODATA ATTRIBUTES, SCHEMA VOCABULARY

accessibility

Assurance Chioma Ikogwe•410

@Aik-202

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

I have long read about micro data, that is the data that tells search engines more about your page and how to structure them, but I was yet to implement my knowledge, until this project came along. So, in this project I learnt how to use HTML5 Microdata attributes like itemscope, itemprop e.t.c and JSON.LD to structure my page, I also learnt about some tools I can use to structure a page automatically and validate the structure of the page that is Google Structured Data Markup Helper and Schema Markup Validator respectively. You can find at more in my article https://link.medium.com/WvtC54wNVsb

Any Feedback on how I can improve on my solution will be welcomed.

Code

Please log in to post a comment

Community feedback

Elaine•11,360
@elaineleung
Posted almost 3 years ago
Hi Assurance, I think this is the first time I came across the use of schema markup! Glad I saw this, as it prompted me to do a bit of research and reading, so thank you!

I think you've done well with the responsiveness here; the one main suggestion I have is, instead of using a background image to display the product image, try using a responsive image instead with img or picture with srcset. Since this is a product card, the image is part of the content and should be in the HTML; background images are normally for images that aren't really part of the content and is mainly used as decor. You can try either one of these and which one works best for you (depending on browser):
```
// using img

<img alt="Glass perfume bottle placed against a leafy background" 
    srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"     
    sizes="(min-width: 540px) 600px, 686px" 
    src="images/image-product-mobile.jpg">

// using picture

<picture>
    <source media="(min-width: 540px)" srcset="images/image-product-desktop.jpg" />
    <img src="image-product-mobile.jpg" alt="bottle of perfume bottle against a leafy background" />
</picture>
```
Once you use a responsive image, you won't need a fixed height (which is something I'd suggest removing).
Marked as helpful

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