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
  • Useful resources
• Author
• Acknowledgments

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: here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library

What I learned

• Following along with Kevin Powell's process, where he used basic HTML, CSS and JS, I learned how to visualize and convert that process into a React one
• The usefulness and necessity (in terms of accessibility) of aria attributes
• How to approach a design starting with CSS first and how it forces you to really plan out the many intricicies of the website
• The use of CSS utility classes and when best to use them
• How to provide various image options to improve performance via the picture element

Useful resources

• Kevin Powell - I have learned so much in regards to approach, planning and countless CSS tips watching Kevin approach this project

Author

• Website - RigneyMade
• Frontend Mentor - @KramYengir
• LinkedIn - Mark Rigney

Acknowledgments

Again, Kevin Powell, he provides invaluable advice and knowledge regarding CSS. I've learned a lot just by watching how he approached this project.