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

Product Preview Card

@carisaelam

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?

I did the "mobile-first" method, and it definitely felt easier than going the other way around. Glad to have picked up on this! I'm sure it doesn't apply to all projects, but maybe it's just a good rule of thumb to start with?

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

I first put the images in as tags. But then when I went to add media queries and needed to change the src, I realized I couldn't do that. I had to go back in and reformat my HTML so that the images were actually just background images to a div so that I could then manipulate the src via media query. Took some extra time in there.

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

Is it best practice to use background-image versus inserting an ?

When does it make sense to use each method?

Community feedback

Razzak05 90

@Razzak05

Posted

Excellent

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