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

Notifications Page using flexbox

@hassaneljebyly

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


still not sure of accessibility

Community feedback

P
Ion Stici 1,230

@ionStici

Posted

Hello 👋, Congratulations on completing the challenge! Consider a small improvement:

.notification {
  border: 1px solid transparent;
  transition: border 0.1s;
}

.notification:hover {
  border: 1px solid var(--clr-neutral-500);
}

By defining the border property to the initial state set to transparent, it won't shake the layout when you hover over the notification element (smoother user experience).

Happy Coding! 😌

Marked as helpful

0

@hassaneljebyly

Posted

@ionStici thank you for pointing that out, just fixed it

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