@VCarames
Posted
Hey @JGedd, adding to what was said above/below:
- To make your content Semantically Correct and give it Structure, your HTML code has be set up in the following manner.
<body>
<main>
<article class="card">
<div class="card-text"></div>
<picture class="card-images">
</picture>
</article>
</main>
</body>
Since this card can stand on its own and its reusable, the Article Element is the best choice to wrap your card in.
-
For headings, you always start with <h1> Heading. If this in a larger site with more cards, then the <h2> or <h3> Heading might be the better option.
-
For this challenge you want to use the Picture Element not the Background Image Property. The Background Image Property is mainly used on decorative images NOT images that add value and serve a purpose.
Picture Element will allow your to switch between images in different breakpoints and makes your site load faster by saving bandwidth.
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
Source:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
Happy Coding!
