Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive site made using html and css.

Ishika 100

@ishika-santhalia

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Used grid to style the component.

What challenges did you encounter, and how did you overcome them?

Faced some issues while using media queries so I had to look that up.

What specific areas of your project would you like help with?

Possibly making sites responsive and semantically correct.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

It's quite a neat work, cool =)

Bu you can take more from picture tag, by the way =) This tag should contain one img and different source tags:

<picture>
    <source srcset="mobile.jpg" media="(max-width: 40rem)">
    <img src="desktop.jpg" alt="">
</picture>

This way the picture will check media conditions from the source tags and choose one of them. If no one condition match it'll display img. Also you can change display of picture to block and style it directly without wrapping div. The less tags, the better =)

Except main tag. Every page should contain main tag.

Hope that could help =) Keep doing =)

Marked as helpful

1

Ishika 100

@ishika-santhalia

Posted

Thanks for the advice Alex! I'll implement it from now on :)

1
Felipe 60

@typingfe

Posted

nice

0

Please log in to post a comment

Log in with GitHub
Discord logo

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