A simple log to track notes, decisions and questions for Front-End Challenges Club challenges.

Links

Challenge Info 🔗

Sketch Files 🔗

Challenge Submission 🔗

Challenge Repository 🔗

Challenge Solution 🔗 (for paying subscribers only)

Notes

• Hey, one that I didn't have to spend days banging my head against the wall to figure out! Unless I missed something? 🤔

• One area that I think I got wrong, or at least could've done better, was the box-shadow. In the brief it displays over the items, and the left side only displays upon scrolling.

  • I have a wrapper class on <main> that sets the width and controls scrolling on smaller screens, and I used a <ul> for the items. Adding a z-index to the wrapper didn't work.
  • I also tried wrapping the <ul> in an <article> and moving the box-shadow with a z-index to the <article> level, also no luck. Will await the implementation in the solution.

• The sneaky twist of this one is the flex fallback for older browsers (and maybe that box-shadow!):

  You should aim for the following:

  • Your solution works all the way back to old browsers like IE
  • The overflow component works for both fine pointing inputs (like mice) and touch inputs

• On the flex fallback for older browsers I used the hex colors directly since custom properties aren't supported. Not exactly DRY or maintainable, wondering if there's a better way to do that.