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

• Frontend Mentor - Space tourism website solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

This challenge was different because it is a partnership between Frontend Mentor Kevin Powell, a YouTuber CSS teacher, and Scrimba, a course platform focused on technology and design. During the course, he encouraged me to learn by proposing small challenges that helped me to have a better understanding of the code.

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

Desktop	Mobile

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

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

What I learned

• Use z-index on the parent element to avoid sending the element too far behind

• Keep animations separated from each other to give more control to the animation of each element

• Use em on media queries for cross-browser compatibility.

• Create grid-container → normally done for desktop layouts, create a grid-template-columns with minmax() making the content width flexible:

  grid-template-columns: minmax(2rem, 1fr) repeat...;

• Difference between place-content and place-itens. place-content → Keep the content together and distribute the space around the elements. place-itens → Distribute the space between the elements.

• Verify browser support before using a CSS property:

  @supports(property:value) { ...
  
  @supports(backdrop-filter:blur(1rem)) { ...

• When the element complexity is too high, separate it by a media query.

• Move an element outside of the screen with the translate property:

  transform: translateX(100%);

• Scripts using the defer attribute will be read after all the HTML.

• Use the data- attributes to manipulate elements using JavaScript instead of classes and IDs. Leaving the style for the CSS and the ‘action’ for the JavaScript.

• Use aria-hidden for screen readers who do not read the element content.

Continued development

In the future, I want to try to rebuild this project using React.

Useful resources

• CSS Grid - A complete description of the placement of grid elements.
• CSS Flex - Examples that help to understand the main concepts of flexbox.
• Accessibility - Everything you need to know about accessibility.

Author

• Frontend Mentor - @diegoflorenca
• LinkedIn - @diegoflorenca

Acknowledgments

Kevin Powell is an excellent teacher, and the Build a Space Travel website course has a lot of important information about accessibility that is essential today.