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

responsive landing

@DiegoAlvees

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Will 310

@wansmth

Posted

Hi Diego,

Your solution looks great. Some things I think you could improve on though are the following:

You have styled the "Perfume" heading by directly adding spaces and capitalising the letters in the HTML. There are properties in CSS to do this: 'letter-spacing' and 'text-transform'.

I am not sure if it is a result of using React, but I think you could choose closer-matching HTML elements. For example the table row you have used to contain pricing information, it's not really tabular information and so a simple div with either flexbox or grid might have been better suited. The main argument for this approach would be accessibility, as a screen reader announcing a table is a little bit inaccurate.

Hope this was somewhat useful.

Marked as helpful

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