Submitted over 1 year ago

🔥🔥🔥 Responsive news homepage using React

Kenny Ng• 400

@kennylun123

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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 1fr to 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-GJ• 410

@FrontendBy-GJ

Posted over 1 year ago

Well done! Did you enjoy using React?

Kenny Ng• 400

@kennylun123

Posted 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.

FrontendBy-GJ• 410

@FrontendBy-GJ

Posted 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.

Kenny Ng• 400

@kennylun123

Posted over 1 year ago

@Garcia-Jr Thanks for your suggestion. I will take a look on that. :)

Please log in to post a comment

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