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

BEM, Flexbox, Accesibility

Emerson Limaā€¢ 200

@poissonfou

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am proud of making the website more accessible by making it possible to interact with the accordion and the tabs section through the keyboard. I'm also happy to have implemented a simple and intuitive solution to create the accordion section.

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

I've had issues with the layout jumping when I added hover effects to elements like buttons, because it would add a border to those elements when they previously didn't have them. I solved it by adding a transparent border to those element in their default style.

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

I still struggle to properly name my classes. I've tried to implement a BEM architecture but ended up breaking it a few time because I thought the class names were becoming to verbose. I would appreciate if someone could point out how I could've better name my classes and implemented BEM.

Community feedback

P
Marc Francisā€¢ 730

@marcfranciss

Posted

Impressive solution to this challenge! šŸ’Æ

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