This is a solution to the Space Tourism Website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The challenge was to create a multipage website for a space tourism company that meets the following requirements:
View the optimal layout for each of the website's pages depending on their device's screen size See hover states for all interactive elements on the page View each page and be able to toggle between the tabs to see new information
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
- Research and planning
- Setting up the development environment
- Design and prototyping
- Building the components
- Integration
- Testing
- Deployment
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- CSS Modules
- Mobile-first workflow
- React Router
- React - JS library
I learned how to use React.js to build dynamic and interactive user interfaces, managing the state of my components to create a smooth user experience. I also learned how to use React Router to handle navigation between different pages of the website.
I got to grips with CSS Modules and used them to write modular and maintainable styles for my components, which I used in conjunction with React.js to create a cohesive and attractive design for my website. I also learned how to use CSS custom properties and Flexbox/CSS Grid to create flexible and responsive layouts.
I used a mobile-first design approach to create a website that looks great on any device and used CSS media queries to adjust the layout for different screen sizes.
I used HTML5 to create well-structured and semantically meaningful content for my website and used semantic elements such as header, footer, main, and article to give structure to my pages.
I also learned how to use the browser's developer tools to debug my code and fix any issues, and how to use React's built-in testing features to ensure my components were working correctly.
Overall, I learned how to build a complete and professional-looking website using React.js and CSS Modules, and how to use these technologies to create a dynamic and responsive user interface that works well on any device.
- React.js official documentation
- CSS Modules documentation
- React Router documentation
- Flexbox
- Semantic HTML
- Mobile-first design
These resources should provide a solid foundation for building websites with React.js and CSS Modules, and help you learn about the technologies, tools, and best practices involved in the process.
- Frontend Mentor - @Nupogodi