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

Links

Challenge Info 🔗

Figma Prototype 🔗

Figma Project 🔗

Challenge Submission 🔗

Challenge Repository 🔗

Challenge Solution 🔗 (for paying subscribers only)

Notes

• I'm using Andy's CSS reset but plan to make my own at some point. 🤓
• I thought I was pretty good at layout with grid and banged out something that looked really good, and then realized that I needed to make some decisions on how to handle wrapping (or not!).
  • I went back and forth with a few different things between flex & grid and decided on grid with auto-fill and minmax of 100px & 200px. That was all fine, but then had some centering issues.
  • Using the grid and justify-items/align-items on the body forced the items in the grid at the wrapper level into a column, regardless of the screen size.
  • Setting a max-width on the wrapper worked on bigger screen sizes but was inelegant on smaller sizes (e.g., depending on the amount of space it could be two images on the first line and one on the second line).
  • Ended up using a media query to set the max-width at 768px and up. Not sure if this is a great way to handle it or a hackish way to handle it (or somewhere in between 🤔), but look forward to seeing how it's handled in the solution.
  • Saw this video on media queries after the fact and could've set the grid to be a single column at the smaller size instead of relying on the size of the container. Not sure if one approach is "more correct" than the other, but might come back and play with this.
• The duotone part is a combo platter of the all things I was bad at in Photoshop. ☠️
• I cropped the founder image to be same size as the other two images so I could use one class to handle the cropping/positioning.
  • Update: Turns out I didn't need to do that 🤓
• I was REALLY tempted to manually crop the images to match them up exactly to the comps, and in fact if it was my job to code this design I would've. But I wanted to learn how to do the cropping with CSS, so the images aren't cropped and positioned to spec.
• I used a link to the Challenge info to validate that the link works via keyboard, mouse and tap (it does!).
• Used a nifty trick from Heydon Pickering's Inclusive Components Card post to make the entire card clickable (and focusable!). I chose the JS version so the text is still selectable.