React | Manage Landing Page

Solution retrospective
The first venture using React. Loved it! If there are any pros that want to pass their expert eye over my code I'd welcome any feedback. I'm not sure yet of best practices and would appreciate this being pointed out to me.
And if anyone has any advice on pushing React apps with routing that would be really good! I want to try this out in a future build and I can see that adding a React app with routing needs a few extra steps and I'm unsure where to start looking.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @denielden
Hello Steven, You have done a good work! 😁
Some little tips to improve your code:
- add
header
tag and wrap the navbar for improve the Accessibility - use
article
tag to the container a specifies independent, self-contained content like a card, forum post, news... not for the "slider" section of site - remove all unnecessary code, the less you write the better as well as being clearer: for example the
article
container of image withhero-image
class - you can use
picture
tag to change image by resolution -> read here - add the image directly to the body
background
with css instead of usingimg
tag with class.pill--lg
- for floating menu use less
useState
with this logic: you first hook into the menu button's dom node via aref
and then use a state to define whether the panel is open or closed ref guide - read here
const refNavBar = useRef(), [isOpen, setIsOpen] = useState(false), handleToggle = () => setIsOpen(!isOpen);
Then you restructure the html of the menu like this by adding the nav toggle button and the control over the
nav
element:<header> <a> <svg logo /> </a> <button className="nav-toggle" aria-controls={refNavBar} aria-expanded={isOpen} onClick={handleToggle} /> <nav ref={refNavBar} data-visible={isOpen} > <ul> ........ </ul> <a href="#nogo" className="button">Get Started</a> </nav> </header>
finally through the css/scss manage the menu icon and whether to make it appear or not:
button.nav-toggle { background: url( icon-hamburger ); } button.nav-toggle[aria-expanded="true"] { background: url( icon-close ); } nav { opacity: 0 } nav[data-visible="true"] { opacity: 1 } @include u.breakpoint(lg) { button.nav-toggle { display: none; } }
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful - add
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