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

E-commerce Product Page built with HTML, CSS & JS

@EmanRadwan114

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

Community feedback

@AhmarIftikhar123

Posted

Assalam u Alaikum,

I'm reviewing the webpage code and found a few areas that could be improved:

Reviewing webpage code: Missing responsive design: Consider implementing responsive design principles to ensure proper display across different devices. Cart functionality: Investigate why the cart box isn't appearing. Check if click events and state management are implemented correctly for the cart image. Notification issues: Verify the logic behind hiding message notifications. Ensure the number display updates correctly based on notifications. Missing button interactions: Consider adding hover classes to enhance user experience by providing visual feedback on button interaction. These are just pointers. Further analysis is needed based on the specific code and functionalities. I'm recently completed this challange: https://github.com/AhmarIftikhar123/ecommerce-product-page-main

0

@EmanRadwan114

Posted

Assalam Alaikom,

First, I'ld like to thank you for your comment and feedback.

Second, I want to clarify that I already made the page responsive, so could you please tell me which screen size you found that the page design need to be improved? The design style sheet provided by frontend mentor mentioned the size of the mobile and desktop screens, so I designed the page on the intermediate screen between them according to my point of view.

Regarding the cart page, I did not add it to my logic, so you won't find its code in my js file

Regarding the notification, its functionality works correct with me, but my logic may be different from yours because there is no stated criteria for it here in the challenge page, but let me know if you found any issue in my logic or you face any problem understanding it.

Regarding the button interactions, I have already added hover classes on the nav links, but I agree with you that this area needs some improvements to enhance the user experience.

Again, thanks alot for your helpful feedback, and I wish you best of luck here on the platform. @AhmarIftikhar123

0

@AhmarIftikhar123

Posted

@EmanRadwan114 Wa Alaikum-o-sulm.

Subject: Improvements for Responsive Design and Functionality

Dear Developer,

I'm writing to provide some feedback on the webpage's responsive design and functionality. I've identified a few areas where improvements can be made:

  1. Responsive Design for Smaller Screens (550px and below):

Currently, the webpage encounters issues with the image aspect ratio and potentially other elements when the screen width falls below 900px. To address this, I recommend applying media queries that target screens with a maximum width of 550px. 2. Missing Cart Box on Click:

Clicking the cart image doesn't seem to trigger the display of the cart box where product details are shown. 3. Underline on ul on Hover:

The underlining effect on hovering over the <ul> element appears to be missing. You can use the CSS pseudo-class :hover to style the ul element when hovered over. For example: CSS ul:hover { text-decoration: underline; } 4.. Cart Product Count Discrepancy:

The current cart product count seems to be displaying the quantity of the last added item instead of the total number of products in the cart.

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