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.
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
Here are some of the pictures of actual website.
- Live Site URL: Space Dev Challenge
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
One of the massives aspects after developed this challenge is how it's hard to feel comfortable with CSS, but I loved it. I love how this challenge allowed me to use Figma and was intriguing to find and look for ways to fit everything.
A tool that really helped me was the Pesticide extension, for example below, where you can see the boxes it's wonderful such a tool.
And with some fixes
I'll try this project again when I'll start to study react. I did this challenge with html and css only. So that data.json was useless, for me. I want to use it next time. Also, I aim to use CSS Grid, next time. Now, I'm quite comfortable with flexbox.
- A Complete Guide to Flexbox - I can't say enough how this guide helped me. I'm just grateful for the pure existance of this. The properties for the Children (flex items), and how it is visually applicable.
One of the biggests flex on layouting is to see that everything is a box. This is a great challenge, it's simple on positioning elements, and it's great how it helps you to understand and see through how everything is a box.