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

Ecommerce Product Page using Grid

@techyjc

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


So, I decided to published this unfinished. As I've been working on multiple personal projects and a second Frontend Mentor project, while also going to work...🙄

There is not a huge amount left to do..

  1. Burger Menu - Event handler functions and Styling CSS. (Completed) 31/1/2024
  2. Carousel (Desktop) Model view. (Completed) 30/1/2024
  3. Remove Carousel Navigation buttons (Desktop). (Completed) 31/1/2024
  4. Address spacing and text formatting issues.
  5. Simplify JS code - bit overly complicated and repetitive.
  6. User Profile image size on Desktop view. (Completed) 30/1/2024
  7. Basket text centered and no checkout button when empty.

Well.. maybe a bit less than huge... 🤣

Thought it would be interesting to publish it unfinished, obviously with a plan to complete it. It has a working Cart. You can add and remove items.

Any and all comments welcome.

Community feedback

Kiran-Dev 190

@Kirandev242144

Posted

Well Done ! This is my next challenege i hope i am gonna make it

1

@techyjc

Posted

@Kirandev242144 Hi Kiran, based on your previous solutions. I'd say... you got this! I need to tidy up my JS and I broke my hover state when I made some layout changes. So, I need to fix them. Was actually just about to do this now.

1

@techyjc

Posted

Updated the carousel and additional code, plus Avatar size at desktop break point.

1

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