in my latest project for frontend mentor's digital bank landing page challenge i hit some snags when trying to make that big, fancy header look good on all devices. part 1 was smooth sailing until the "hero" came into play. it wasnt as easy peasy like expected .
basically got stuck with layout and spacing issues; things just wouldnt line up right no matter how many times i adjusted my css ♀️ ended learning a lot about media queries, flexbox vs grid .
the silver lining? the feature section was easier than anticipated! realized that sometimes simple is better when youre struggling with something complex .
anyone else hit these same roadblocks or have some cool tips on making hero sections work in react?
=what i did wrong=- forgot to test responsiveness early
- overcomplicated layout thinking it needed more advanced techniques
takeaways1.
start simple and build up complexity gradually
2. test often across devices - mobile first approach works wonders!
3. use
flexbox
/
grid
, but not both at the same time for simplicity
4. dont be afraid to go back basics when stuck
anyone got any other insights or funny stories about fighting with hero sections?
link:
https://dev.to/ayra_austine/my-first-react-projectpart-2-struggling-with-a-responsive-hero-section-css-lessons-learned-4bk3