The project you are about to explore is a solution to the Space Tourism website challenge on Frontend Mentor.
Frontend Mentor is a platform that provides realistic projects aimed at improving coding skills. Each challenge pushes you to level up your skills and deliver the best possible solution. This space tourism website is one such challenge that tested my capabilities and skills.
This was my first attempt at building a multi-page site and despite the hurdles and learning curves, the experience was rewarding. During the development process, I was introduced to new concepts and strategies that played a significant role in my growth as a developer.
Note: Delete this note and update the table of contents based on what sections you keep.
This project, as mentioned earlier, is a solution to the Space tourism website challenge on Frontend Mentor. The challenge is aimed to help developers improve their coding skills by building realistic projects.
As a first multi-page website, it was a significant challenge that tested and expanded my skills. The journey was not a smooth one. It pushed me to my limits and nudged me to step out of my comfort zone. It took some getting used to as I had to adapt to a new mindset of dealing with multiple pages, which I hadn't done before.
Through this challenge, I gained a deeper understanding of the working and structuring of multi-page sites. It was a transformative learning experience that has set a new standard for my future projects.
In the screenshot above, you can see the final result of my space tourism website project. The website is a multi-page site with a user-friendly interface and vibrant visuals that encapsulate the essence of space exploration. The pages are neatly structured, with each page providing relevant and interesting information about space tourism.
- Solution URL: View solution URL here
- Live Site URL: View live site URL here
Throughout this project, I implemented and used a variety of different technologies that helped bring the project to life:
-
React: This project was my maiden venture into using React. It was a learning experience, getting to know how to handle components and states within React.
-
CSS Modules: For managing the background images and setting up grid areas for the layout, I used CSS modules. It made managing layout shifts for different devices much more manageable.
-
Framer Motion: To add some flair to the project, I implemented animations using Framer Motion.
-
Tailwind CSS: For most of the project, I utilized Tailwind CSS for its simplicity and intuitive design. However, I found that as things got more complex, like for my grid layouts, I needed to move beyond Tailwind for my grid-template-areas.
Each of these tools brought its own strengths to the project, and I learned a lot about when and how to use them effectively.
Note: These are just examples. Delete this note and replace the list above with your own choices
This project was a profound learning experience for me. Being my first multi-page site, it introduced me to new concepts and challenged my existing skills.
-
React: Working with React was both challenging and rewarding. There was a steep learning curve but once I started to understand the concept of components and states, it became an exciting journey.
-
Structuring Files and Components: One of the struggles I faced was figuring out how to structure my files and components. It was a new concept for me, but as I navigated through the project, I began to understand the significance and efficiency of componentization.
-
Managing Background Images: Ensuring high quality of the background images while being responsive was a challenging task. I had to try different methods and finally landed on using CSS modules, which ended up being very effective.
-
Managing Active Page in Navigation: Figuring out how to get the paths for each page to pass down to the nav to show which page is active was a unique challenge. It was particularly tricky when a user directly navigates to a page.
This project was indeed a journey of discovery and learning. The complexities I faced helped me grow as a developer and made me more confident in tackling new challenges.
Moving forward, I am aware there's a lot more to learn and refine. The completion of this project has not only given me a sense of accomplishment but also an array of learning avenues to explore further.
-
More React: I plan to continue honing my skills in React. With this project, I've just scraped the surface of what this powerful library can do, and I'm excited to delve deeper.
-
Refining Project Structure: Although I've made strides in understanding how to structure my files and components, I believe there's room for improvement. I aim to learn more about best practices and efficient ways to structure larger projects.
-
CSS Modules and Media Queries: The use of CSS modules and managing background images was a highlight of this project. I intend to experiment more with these in future projects to ensure seamless responsiveness and high-quality imagery.
-
Active Navigation State: Getting the active state in navigation right was a new challenge for me. In future projects, I aim to refine this process further and make it more efficient.
-
Feedback and Collaboration: This project was a solo endeavor. Going forward, I am keen to collaborate with other developers and receive feedback on my work. Constructive criticism is a great way to learn, and I am open to any thoughts or opinions from others.
My journey as a developer is ongoing, and with every new project, I aim to push my boundaries, learn new things, and improve on the existing skills. I am confident that with practice, I will grasp these concepts faster and better.
Here are some key resources that played a vital role in the completion of this project:
-
React Documentation - The official React documentation was indispensable for getting to grips with React's concepts and understanding how to work with it effectively.
-
NextJS Documentation - NextJS documentation was an excellent resource for understanding the principles and benefits of a hybrid static and server rendering.
-
Tailwind CSS Documentation - Tailwind's documentation was vital in figuring out how to use their utility-first classes to style my project efficiently.
-
MDN Web Docs - MDN Web Docs is always a go-to resource for understanding web technologies. It was incredibly helpful for getting a firm grasp on concepts like CSS modules and more.
-
WebDevSimplified's YouTube Channel - This YouTube channel was a great source of practical examples and clear, concise explanations of web development concepts.
-
Kevin Powell's YouTube Channel - Kevin's channel offered a wealth of knowledge, especially in terms of CSS. His clear and in-depth explanations are a fantastic resource for any developer.
These resources were instrumental in my journey through this project, and I recommend them to anyone who wishes to learn these concepts.
- Github - @blazeshomida
- Frontend Mentor - @shomidamoney