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 E-Commerce Product Page by Tailwind CSS and Vanilla JS

Erenβ€’ 720

@erenymo

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there πŸ‘‹

Any feedback is welcome, Keep Coding ! ^^

Community feedback

Aman Singh Bhogalβ€’ 1,010

@asbhogal

Posted

Hi Eren,

Great job! The design matches the mockups nicely and the app seems to function well. I've just listed some suggestions below in terms of code maintainability and performance:

  • Firstly, it's worth having separate JS files for your components (e.g. one for the slider, one for the cart handling.) This makes it easier to locate code and debug issues. If you use a bundler like Vite, this can make light work of it. You can them import them into your main.js, which is referenced in the index.html
  • Also, add your node_modules to your .gitignore as this bloats your build, and isn't required in production-ready interfaces. If a developer wants to run this on their local machine, its convention for them to run the npm install to install the relevant dependencies from the package.json lists, which would subsequently install the node_modules folder on their machine
  • Locally host your Google Fonts for privacy and performance reasons. Here's a link from Kevin Powell on how to download and convert them Link and a documentation link from Tailwind on how to reference them in your tailwind.config.js file (you can either extend or override the default theme) Link
  • In terms of accessibility, your button is missing an accessible name for screen readers and other assistive technologies to be able to read. Here's a link on how to add this Link
  • Your images are missing explicit height and width values, which can help prevent layout shifts on rendering
  • Use Vercel or Netlify for your front-end applications as these are much more robust platforms, compared to GitHub pages, with better performance, stability and caching. I use Vercel, and if you use Vite for your builds, it detects this and automatically compiles your code at build time when you push a commit to Git, meaning you don't have to run the npm script each time

Hope this helps!

Marked as helpful

1

Erenβ€’ 720

@erenymo

Posted

Hi @asbhogal 😊

I wasnt expect that much but you made my day by your feedback and recommendations. I will note them all and use it on my next projects. Thankkk you for your helpful comment😊😊

0
Aman Singh Bhogalβ€’ 1,010

@asbhogal

Posted

@erenymo no problem, glad to help. I'd recommend refactoring this code with the suggestions made if you haven't already, as you learn a lot from doing so and it's a very common practice in software development.

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