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 design using flex

#react#tailwind-css
Carl 160

@carllouislabutong

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


Need to practice my media queries

Community feedback

@YariMorcus

Posted

Hi @Carl,

First of all, congratulations on completing this challenge! I have been taking a look at your component and must say that it looks good.

I do have some feedback I want to share with you.

Visual

  1. Just like you already mentioned (in some way), I noticed that your component is not responsive between breakpoint 375px and 528px. A horizontal scrollbar is shown, and both your title, old price, and button are overflowing its container.

Tips

  1. Try to use a little bit more of the semantic HTML5 elements, such as <main>, <article> and <section>. This is important for assistive technologies because it communicates better what the role of a specific element is. A div or span for example, does not communicate any meaning or role, which is important for people using these technologies.
  2. You can use <button> as an icon button. This point also relates to point one above (do not forget to define an accessible name if you do so).
  3. Some classes contain one or two whitespaces in front or after of the name. You should remove them for neatness.
  4. Try to define a more descriptive name for your images. This is important for search engines so they can understand better what an image is about. img-46292547.jpg as an example doesn't say a lot about what it can be (does it represent a car, food, or an animal?). As an example you could name your image grabielle-essence-eau-de-parfum-bottle.jpg.

Things you did good (may also be said)

  1. You are using utility classes as should (they only do one thing).
  2. Your design looks good on both mobile, tablet, and desktop (disregard the breakpoints for this moment).
  3. You added a hover state to your button (a simple thing, but plenty of people forget it or the color used isn't visible enough).

I could give you some more feedback and tips but I think this should do it for now.

However, I hope you can do something with the feedback and tips I gave you. If you have any more questions, feel free to ask me.

If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things 😄

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