Skip to content
Submitted 8 months ago

Responsive landing page using CSS, JAvascript and Html

akinwale01•50
@akinwale01
A solution to the Product list with cart challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to devote my time into doing it. Took lots of hours but I got it at the end. Learnt new Javascript functions, and attributes.

What challenges did you encounter, and how did you overcome them?

I was discouraged when I got to how to make the cart-summary change to hold items. And also how to style the confirm-order

What specific areas of your project would you like help with?

In all areas. If there is any part of the project that needs correcting. Would gladly accept it.

Code

Please log in to post a comment

Log in

Community feedback

  • Dylan Heslop•2,460
    @dylan-dot-c

    Well done, I can help you with this!

    • The font: Currently it seems you didn't use the font specified in style-guide.md as the browser is using the default and ugly Time New Romans font. You can use google fonts to get the one you want and import it via your CSS or HTML file.
    • Responsiveness: The website looks good on desktops but that's just about it(no offense). I suggest doing a mobile-first approach that helps to make building it easier especially since in most cases mobile designs are easier and faster to implement and also it's easier to scale your design up than down.
    • Accessibility: All buttons seems to be focusable but on the increment and decrement buttons you need to add a focus style as a user can't really see where the keyboard tab is currently at when they are on that element. I also find it weird that you have the containers in that order. You should also make use of the main tag to help make it more semantic and remove that landmark error you have up there^^^. Also it's weird to have the overlay as a separate div from the modal-container as you could just remove it and use a background-color on the modal or put the modal in the overlay.
    • Modal: When it is open, you can actually make the body/html tag an overflow of hidden as to prevent the webpage from scrolling while showing the modal.
    • Layout: For the order-summary and the order-items container you could make the container for both of those and use flex to align them in rows(default) and (columns) for mobile. Make sure that the order-summary comes after the order-items.

    There may be a few more things to discuss but these are a good starting point, you should also try using the picture element to dynamically change the images in respect to screen size. ALso you need to clean up your folder structure and actually put all the images in an images folder.

    You can check out my solution and see how I did a few things(I used vue tho) but the HTML should be similar.

    Marked as helpful

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