🔥🔥🔥 Responsive news homepage using React
Design comparison
Solution retrospective
This is my first exercise using React. I tried to keep elements tidy and separated into tiny components. I would love to hear any comment on my page or coding. Thanks for your help.
What I learned:
- CSS Grid and Flexbox. Use
grid-template-column: 1fr 1fr 1frto keep columns or rows in same ratio. - Responsive image using
<picture>to switch imgage source. - Use the silbling selector (~) to link up the active state of navigation button and the following classes. (When a nav button is activated, the related CSS should be followed)
.nav-menu.active {
transform: translateX(0);
transition: all 200ms ease-in-out;
}
.nav-menu.active ~ .background {
width: 100%;
opacity: 0.5;
}
Community feedback
- @FrontendBy-GJPosted over 1 year ago
Well done! Did you enjoy using React?
1@kennylun123Posted over 1 year ago@Garcia-Jr Thanks for your kind words!! I'm still at the stage where I can only draft all the things together in one place and split them onto separate components at the end. But yeah, I like the structure of React. 😄
Also I'm trying to find some tools to make animation on React. Since I don't know why the transition effect when toggling my nav menu is not working on mobile.
0@FrontendBy-GJPosted over 1 year ago@kennylun123 I do the same thing, draft everything in one place then separate into components. I like to get the layout and everything working then I focus on making my code look pretty.
For animations, I like to use Framer Motion.
0@kennylun123Posted over 1 year ago@Garcia-Jr Thanks for your suggestion. I will take a look on that. :)
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