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

Overview

The challenge

Users should be able to: | Les utilisateurs doivent pouvoir :

• 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: Add solution URL here
• Live Site URL: Space Touriism Website

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• JSON

What I learned

During this project, I was able to acquire new skills by working with the JSON format. I also learned the importance of accessibility to ensure that our site is accessible to as many users as possible.

To work with JSON data, I used JS's async function to call the fetch and await methods, as in the following sample code:

async function getData() {
  const response = await fetch('../data.json');
  const data = await response.json();
  console.log(data);
}
getData();

Also, I discovered how to simulate an event and use it effectively in my code.

element.dispatchEvent(new Event('event'));

Regarding the design of the site, I learned to use the prefix -webkit

selector {
  -webkit-backdrop-filter: blur(50px);
}

to make the property

selector {
  backdrop-filter: blur(50px);
}

available to iPhone users. This project allowed me to strengthen my skills and continue to improve my knowledge in these key areas.

Continued development

In my future projects, I want to continue to focus on working with the JSON format. Although I have worked with datasets before, I want to sharpen my skills and start working with APIs. Additionally, I discovered how to simulate an event and use it effectively, and I plan to continue to perfect this technique as well.

Useful resources

• element.dispatchEvent on MDN - It helped me to simulate a client side event, and thus take advantage of it.

Author

• Frontend Mentor - @Joseph-Itakala
• Github - @Joseph-Itakala
• Linkdin - @Joseph-Itakala

Acknowledgments

I would like to express my gratitude to my fellow learner at Kadea, Junior Asosa, who gave me invaluable help, in particular by testing the accessibility of the site on his iPhone.