Frontend Mentor - Space tourism website solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• 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

Screenshot

Links

• Live Site URL: Space Tourism

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• React - JS library
• Swiper - For sliders

What I learned

Continued development

• I learned about flex-shrink and flex-grow. I did'nt know how to use these properties well. By default flex items has it values defined by flex-shrink 1, meaning they can shrink If necessary, in some parts of the code I needed it to change.

    flex-shrink: 1; // By default is defined as 1
    flex-grow: 0; // In some case you may need to change it to 1 and shrink to 0

• I already knew React, but working in this project I could study on it without following a step-by-step process and get down to it. I think I want to study more about React as well as I know about Vue.

Useful resources

• Swiper - This helped me in crew page, and using it I've learned new options in the library.

• Flex CSS and Grid CSS - Here you can find a complete guide that can help you clear up some doubts about these layouts.

Author

• Frontend Mentor - @pablo-moraes
• LinkedIn - Pablo Moraes