I've been away in JavaScript Land since January so it was really nice, and challenging to get back to CSS. I have forgotten a lot over the last six months so I wanted to take the chance to relearn things I never felt confident with.
I've done my best to avoid the use of breakpoints in this challenge. It's an experiment and not good enough for a production level site (a couple of layout shifts don't work), but it was really interesting to push the boundaries of my knowledge of 'intrinsic design'.
A lot of the approach I've tried to apply here comes from the work Stephanie Eckles has been doing on intrinsic design.
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- 💡 Focusing on intrinsic design forced me to improve my knowledge of modern CSS functions (
min
,max
,clamp
, andflex
andgrid
etc.) - 💡 I like the overall approach of structuring the page along these principles, and only using breakpoints to 'tweak' things
- 💡 CUBE CSS seems to play really nicely with this approach, I think as container queries come online this approach will become more practical
I know that a couple of layout shifts are not working. But, as mentioned above, I was really trying to develop my knowledge of intrinsic design approaches, and avoid breakpoints in this challenge.
I would very much welcome advice on the following issues:
⚠️ Can things be improve without adding extra rules in the media queries. I think I only have two rules in one breakpoint at the moment - relating totext-alignment
in the footer andorder
in the hero section.
- 🙇♂️ I want to keep pushing on my learning an intrinsic design approach, but I'll allow myself more use of breakpoints so that the final product is more finished.