Skip to content
Submitted about 5 years ago

flexbox for some sections, mobile overlay, inline-flex

Jhabari Guidry•190
@J-Guidry
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Bookmark landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Should there have been css attribute selectors used in CSS for aria attributes instead of classes which is toggled in js? I could not completely get a match on background blue color after/before pseudo selector although I got as close as I could. Was height percentage along with the rest of the code a good way to get that done (css lines 178-190, 286-297)? I spent a lot of time researching accessibility. I am unsure it was done right in the tabbed system and accordion. Was the error system on the form under the action done correctly? the red around the input sounds like there was a div surrounding it which I did use with display none.

Community feedback

  • TCassas•235
    @TCassasPosted about 5 years ago

    You can use the "transition" css attribute to make those effects as smooth as you want!

    1
  • Matt Studdert•13,611
    @mattstuddertPosted about 5 years ago

    Hey Jhabari, nice work on this challenge. To answer your questions:

    • For the aria attributes question, I'm not 100% sure I know what you mean. Could you clarify, please?
    • I would use either rem on the height for the background pattern. This way it will scale down with your content. Using a percentage could lead to unexpected outcomes as the screen size changes.
    • It's great to hear that you've been researching accessibility. It's so important for a front-end developer to understand. A simple test for the accordion system would be to try and navigate it without using the mouse/trackpad. Doing this, you'll see that tabs 2 and 3 are un-selectable due to the tabindex="-1" that you've got on them.
    • For the form validation, I'd take a look at other solutions for the same challenge. Yours functions fine, but there are so many ways you could do it. You'll learn a lot by reading other people's code and seeing how they tackled that same problem.

    Keep it up! 🙂

    0
  • Segun•178
    @Segun98Posted about 5 years ago

    welldone. it's better than mine :).here's mine https://www.frontendmentor.io/solutions/bookmark-landing-page-javascript-jquery-9c2hkD7m/preview

    0

Please log in to post a comment

Log in with GitHub

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