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

Finally finished!

@11kyle

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


Hey everyone! I finally finished this challenge and I'm super excited about it. I added a footer to the project just to make it more like a complete website. Let me know what you think!

Something I learned was how to force the last item in a flex container to the next row. My code is below (using TailwindCSS classes).

<div className="flex flex-wrap">
     <div className="min-w-full">
          // Displayed on first line
     </div>
     <div className="min-w-full">
          // Displayed on first line
     </div>
     <div className="min-w-full">
          // Displayed on second line
     </div>
</div>

Next, I plan on connecting this to a database and make it a full MERN stack application. I'll probably refactor my code and add Redux as well.

Community feedback

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