
Responsive landing page, built using ReactJS, CSS Grid and Flexbox
Design comparison
Solution retrospective
I'm proud of building a mobile-friendly navigation menu with a hamburger icon and mastering Flexbox and Grid for a responsive layout. I used React's useState hook for menu state management, ensuring a dynamic experience. For the future, I plan to implement a slider for the photo gallery, focusing on state management to control the active image and adding navigation buttons for a smoother user experience.
What challenges did you encounter, and how did you overcome them?One aspect I spent some time on was refining the positioning of elements using Flexbox and Grid. I experimented with various layout configurations, adjusting properties like display, justify-content, align-items etc. I also utilised browser developer tools to test responsiveness across different screen sizes, ensuring a consistent and adaptable design.
Community feedback
- P@Stv-devlPosted 1 day ago
Hi,
I like your React components, they are clean and have well-structured JSX.
I have some advice for you :
-
You can keep each component in its own folder and include its CSS file there. This makes it easier to reuse the components.
-
Consider placing your images and other assets (like font) in the public folder.
-
It’s a good practice to use the map to display elements in React :
const PhotoGallery = () => { const images = [ { src: MilkBottles, alt: "milk-bottles" }, { src: Orange, alt: "orange-on-table" }, { src: Cone, alt: "ice-cream-cone" }, { src: SugarCubes, alt: "sugar-cubes" }, ]; return ( <section className="gallery-section"> <div className="gallery-grid-container"> {images.map((image, index) => ( <img key={index} src={image.src} alt={image.alt} /> ))} </div> </section> ); }; export default PhotoGallery;
const Testimonials = () => { // 1. Define an array of testimonials const testimonialsData = [ { image: Emily, alt: "Emily", review: "We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.", name: "Emily R.", occupation: "Marketing Director", }, { image: Thomas, alt: "Thomas", review: "Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.", name: "Thomas S.", occupation: "Chief Operating Officer", }, { image: Jennie, alt: "Jennie", review: "Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!", name: "Jennie F.", occupation: "Business Owner", }, ]; return ( <section className="testimonials-section"> <h1 className="testimonials-heading">Client Testimonials</h1> <div className="testimonials-grid-container"> {testimonialsData.map(({ image, alt, review, name, occupation }, index) => ( <div key={index}> <img src={image} alt={alt} /> <p className="review">{review}</p> <p className="name">{name}</p> <p className="occupation">{occupation}</p> </div> ))} </div> </section> ); }; export default Testimonials;
Good continuation
Marked as helpful1@KuvashneeNaidooPosted about 16 hours agoHi @Stv-devl
Thank you for the helpful tips! I will definitely try to improve the directory structure and use the map method to render the elements. 🙌🌟🙌
Question: I understand that the public folder is meant for static assets that don’t require processing and are shared across components, while the src folder is for component-specific images or assets that need to be bundled and optimized during the build process.
Therefore, just checking again if my current approach of using the src folder is correct?
Your response is appreciated 🙏
0P@Stv-devlPosted about 14 hours ago@KuvashneeNaidoo you true my mistake, images from componants should be in the src.
0@KuvashneeNaidooPosted about 14 hours ago@Stv-devl Thank you for clarifying 🙏
Happy coding !!! 😁
0 -
Please log in to post a comment
Log in with GitHubJoin 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