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

Flexbox, CSS Variables and the in html.

P
Danny 110

@DannyGuerin

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 feel like I have improved in coding layouts and ensuring everything looks the same. I chose to go mobile-first for the responsiveness, and it went ok, but I will need much more practice. I'm proud that it is almost exactly the same as the design.

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

Working backwards and changing the design to Desktop was challenging as I had never done it. I researched my way through it, and after some trial and error, it went my way.

I would really like to get much faster at this... hopefully, with more projects, I can pick up the speed.

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

Please let me know if anyone can see anything wrong or how to improve. Thank you. :-)

Community feedback

@KapteynUniverse

Posted

Hey Danny, nice job. Small things;

I think you can use article tag for the card-wrap div. The article tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

On the body you can use min-height:100vh instead of 100%, on content wrap justify-content: space-between; looks better than the center imo.

Gabrielle Essence Eau De Parfum could be in a h2 instead of p tag. On a full web page there will be h1 somewhere, so that is why i said h2 for this.

Also use a modern css reset for future projects

Oh forgot to mention. Using classes for styling would be better. ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website.

Marked as helpful

0

P
Danny 110

@DannyGuerin

Posted

Thank you very much @KapteynUniverse ! This was very useful... especially the modern CSS reset.

1

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