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

Mobile first product preview card using plain html and css

@martinc1402

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


Hello,

This is only the second webpage i've ever built. I used plain css and html and tried to opt for a mobile first design. I found it difficult making the design fully responsive across different browser widths and avoiding excessive white space in the text box but I believe I managed to produce something passable in the end.

Please feel free to provide any feedback, criticism or advice.

Community feedback

@Ashok-Kumar-dharanikota

Posted

Cool Martinc. I am having a problem with responsive web design. Your solution is really helpful for me to learn more about it. Keep going. Excellent work.

2

@martinc1402

Posted

@Ashok-Kumar-dharanikota Thank you for the kind words. I found it difficult to code the css for mobile first and then just do the desktop version using media queries. I'm sure we will both improve with more learning and practice.

0

@dellannie

Posted

Hey Martinc - I think you did a great job with this project. I just complete this same project as well but I did it desktop first. I was trying to see how difficult i would be not doing it mobile first and it was a challenge so I understand why mobile first is the best option in some case.

Keep up the good work

1

@martinc1402

Posted

@dellannie Thanks Corey, best of luck to you!

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