Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
1
Justin Fowler
@JustinFowlerArt

All comments

  • Hamdi•170
    @justgo97
    Submitted over 2 years ago

    Responsive e-commerce product page with CSS flexbox and React

    #react#typescript
    1
    Justin Fowler•320
    @JustinFowlerArt
    Posted over 2 years ago

    I definitely understand the large quantity of CSS classes and issues with naming conventions. Although I used Material UI for this project, another project here I focused on learning SASS and the BEM naming convention. Both of these significantly reduced the redundancy and improved the readability of the stylesheets.

    CSS preprocessors could be a good potential solution for writing and managing the CSS, and BEM pairs well for making simple, easy to understand class names.

    Although not strictly necessary for this challenge, you might increase the resolution of the breakpoint where you switch from mobile to desktop styles. It gets squashed in the larger phone/tablet area. Maybe increasing to around 768px before switching to desktop styles.

    Finally, I noticed the thumbnail images are horizontal rectangles on desktop, and vertical rectangles on mobile instead of square. Everything else looks great and functions smoothly. Great job!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub