Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
3

Eddy

@eddy-tFrance80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Notifications page with Flexbox (100% responsive)


    Eddy•80
    Submitted over 2 years ago

    0 comments
  • NFT preview card component


    Eddy•80
    Submitted over 2 years ago

    2 comments
  • Interactive rating component main

    #bootstrap

    Eddy•80
    Submitted over 2 years ago

    1 comment
  • Responsive card product preview using bootstrap and javascript

    #bootstrap

    Eddy•80
    Submitted over 2 years ago

    1 comment
  • Responsive landing page using boostrap

    #bootstrap#accessibility

    Eddy•80
    Submitted over 2 years ago

    1 comment

Latest comments

  • rahul3d2y•250
    @Rahulgit3D2Y
    Submitted over 2 years ago

    notification

    #react
    1
    Eddy•80
    @eddy-t
    Posted over 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

  • AhmedMSalah87•110
    @AhmedMSalah87
    Submitted over 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-t
    Posted over 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)

  • Mathilde•30
    @matmatte
    Submitted over 2 years ago

    Product Preview Card Component

    1
    Eddy•80
    @eddy-t
    Posted over 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub