Skip to content
OverviewSolutions
5
Comments
3
Eddy
@eddy-t

All comments

  • Eddy•80
    @eddy-tPosted almost 2 years ago

    Good job, however it was not useful to bootstrap this project, it is easier and better to use Flexbox and CSS Grid to really learn how to use it and not need to bootstrap all the time.

    Moreover I notice some little mistakes:

    • The badge with the number of notifications doesn't change to 0 when you click on the "Mark all as read" link (plus there is a hover status on the badge that shouldn't be there)

    • You forgot to add for each unread notification the little red dot on the right

    • When you click on the link "Mark all as read" the background of the unread notifications changes correctly but the number of notifications on the badge stays at 3 (it should normally be 0)

    Check out my version of this challenge (coded entirely in HTML/CSS without bootstrap but with Flexbox and CSS Grid and with a tiny bit of JS for all the state changes when clicking on the "Mark all as read" link

    0
  • AhmedMSalah87•60
    @AhmedMSalah87Submitted almost 2 years ago
    What are you most proud of, and what would you do differently next time?

    understanding flexbox and grid

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

    how to make flex items with the same sizes

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

    how to changee picture when changing break points

    Product component flexbox

    1
    Eddy•80
    @eddy-tPosted almost 2 years ago

    Uses javascript to change the image when the screen size decreases below a certain size. You can look at my version of this project and you'll see that the responsive is not the same (in mobile version your product presentation card goes over the edges of the screen).

    You need to review the responsive and see how to change the image with JS (this is the easiest and most efficient solution)

    0
  • Eddy•80
    @eddy-tPosted almost 2 years ago

    The layout is identical to the original, unfortunately the page is not responsive. Look at my version of this project to see the difference.

    I used Bootstrap to make it responsive more easily and then I had to use some javascript code to make the image change (from desktop to mobile version when the screen size decreases)

    The base is good anyway but you need to review the responsive (use bootstrap for more ease) and the change of image of the product with JS.

    Marked as helpful
    0