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 using grid and flexbox, mobile first approach.

Rgeb1 110

@Rgeb1

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


I had a lot of trouble switching the images over as the layout changed from mobile to desktop, but with some research I found out how to do it. I wish the transition between the two was a lot more smoother but I'm not sure how to improve that. I tried to be more organised in my coding by adding comments that sectioned/titled the different areas I was working on for the sake of clarity. Overall I enjoyed this project even though it was quite challenging. Any feedback or tips is welcomed. Thanks.

Community feedback

Durban86 320

@Durban86

Posted

I like your code using picture and source tags. It seems to be the way to do achieve faster load times for responsive images. I had used a media query in my CSS to achieve the desired result as I too had to research how to make responsive images and was lead to a different solution, but I'm glad I came across this one as it's appears to be the preferred. Well done!

Marked as helpful

0

@cosmooliveira

Posted

isso pode te ajudar no caso do tempo das transformações para ficar mais suave. no geral eu achei muito bom utilizou o root para configurações de cores e fez todos os detalhes que estava no projeto e conseguiu até adaptar bem a resoluções para telas menores. acredito que esta indo no caminho certo meus parabéns

é assista o vídeo acho que pode lê ajudar e muito

https://www.youtube.com/watch?v=LUX2qkodA0c

Marked as helpful

0

Rgeb1 110

@Rgeb1

Posted

Thanks, I may not understand the language but I can follow along with the video. @cosmooliveira

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