@md5dalton
Posted
Hello VenkatSairam. Good job on your solution.
Here's my take away:
- Try and use Semantic HTML markup wherever you can to make app more accessible. For instance, you can use
h1
for.title
,p
for.description
, etc. - Use
picture
element to switch between the images when screen size changes:
<picture>
<source srcset="/images/image-product-desktop.jpg" media="(min-width: 576px)" />
<img src="/images/image-product-mobile.jpg" alt="product image" />
</picture>
- One member of Front end Mentor community pointed out to me after I completed this challenge that I should uncheck Use Optical Size when selecting the Fraunces from google fonts. This is because you may notice that your title text doesn't match the design's after the screenshot is taken.
I hope that helps a bit๐