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 component

YoungZV 260

@YoungZV

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 built the right part with flexbox however it could have been built without it as they are just block elements. Unfortunately, I started with the desktop view as found easier to start with it in this case. I learned about <picture> tag which was very helpful in this case.

Any other comment is welcome as always.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Replace width with max-width to make your design more responsive.

➨ For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle chanel Perfume bottle surrounded by leaves.".

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄

Marked as helpful

1

YoungZV 260

@YoungZV

Posted

@NehalSahu8055

Thank you for your feedback.

I like to use width: min(x%, x px ); but I am a bit confusing here as a newbie. I learned the basics on "full size" projects and now i am sticking to a little size projects in the middle of the screen :)

Will implement the other two.

Thank you again.

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