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
• 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

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Gulp workflow
• SASS/SCSS (CSS Preprocessor)
• JavaScript (with ES6+ syntax)

What I learned

Building this multipage website I have used HTML aria & data attributes, the aria attributes stand for 'Accessible Rich Internet Applications' which enables us to make content more accessible. Data attribute on the other hand allows us to create custom HTML attributes. I also created my very first functional tab.

See below some code snippets

<div class="tab-list flex" role="tablist">
  <button class="indicator--disc" aria-selected="true" aria-controls="commander-tab" data-tab-image="commander-image" role="tab" tabindex="0">
    <span class="sr-only">Commander</span>
  </button>
</div>

const targetImage = targetTab.getAttribute('data-tab-image')

Author

• Frontend Mentor - @ZaidMarrie
• Twitter - @LeKoels27

Acknowledgments

Kevin Powell's Course