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

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

Desktop View

Tablet View

Mobile View

Links

• Solution URL
• Live Site URL

My process

Built with

• HTML
• SCSS
• JavaScript

What I learned

This is my first time working with Sass and I'm not sure if this was the right CSS framework because there were many differences in styling.

After watching a couple of tutorials on creating functions for responsive websites, I was able to write a prompt in the Google browser, and the browser AI generated the code below. I was pleasantly surprised to see the code work and I didn't have to spend additional time trying to figure out how to get another example code to work.

To see how you can add code snippets, see below:

  function responsiveImage() {
    const imageElement = document.querySelector("#techImage");

    if (window.matchMedia("(max-width: 1440px)").matches) {
      imageElement.src = data.technology[0].images.landscape;
    } else {
      imageElement.src = data.technology[0].images.portrait;
    }
  }
  // Call the function initially to set the image based on the current screen size
  responsiveImage();
  // Add an event listener to update the image when the screen size changes
  window
    .matchMedia("(max-width: 1440px)")
    .addEventListener("change", responsiveImage);

Useful resources

• YouTube SCSS Tutorial - This video tutorial showed me the basics of implementing Sass in an actual project.

• Sass Guide - This is the official Sass website where the guide shows SCSS examples alongside the compiled CSS.

Author

• Website - Portfolio
• Frontend Mentor - @heejung-hong
• LinkedIn - heejung-hong