This is a solution to the Space Tourism Multipage 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
Mockup created with Magic Mockups
- HTML/JSX
- CSS/SCSS (Sass)
- JavaScript
- React
- Figma
- Firefox
- Git Bash
- GitHub
- React Aria
- Vite
- Visual Studio Code
- How and why to use Vite to build a React application
- Vite is a faster and more lightweight tool than Create React App
- Best practices for organizing React files
- How to use useEffect to change background images on different screen sizes and on different pages
- How to use useState, the ternary operator, and NavLink to create a responsive navigation bar and hamburger menu on mobile screens
- How to use React Aria Tabs to create a tabbed component on the Destination, Crew, and Technology pages
- How to use inline media queries to display different images on different screen sizes
- Best practices for organizing SCSS files
- How to use Sass to organize multiple CSS files
- How to create a CSS reset file
- How to build utility classes in CSS
- Best practices for naming classes in CSS with BEM
- How to create responsive website layouts using CSS Flexbox and Grid
- How to deploy a Vite React application to GitHub Pages
- Time management
- I gave myself six months to work on this project, but most of the work was done in a two-month period. I had to balance my full time job and other obligations with this project. There is still more that could be developed, but as of February 2024, I have completed this project.
- Add comments to CSS
- Refactor CSS to follow BEM
- Nest media queries using Sass
- Eliminate white space on bottom of Technology page on tablet and mobile
- Fix active link underlines so that the active navigation underline remains when clicking on tabs on individual pages
- Research a work around for moving the TabList component within the TabPanel components
- Address Accessibility Report issues on Frontend Mentor
- Address HTML Validation Report issues on Frontend Mentor
- Clean up layout issues with Flexbox and Grid
- Add horizontal rule (horizonal line) element to the navbar
- An Interview With Elad Shechter on "The New CSS Reset" by CSS Tricks
- An Introduction to HTML/CSS Font Weight by Michael Allen on Udacity
- Centering in CSS: A Complete Guide by Chris Coyier
- Create a Design System with CSS - Web Development Course by freeCodeCamp on YouTube
- CSS utility classes for sizing and naming conventions by Catalin Rosu
- My favourite 3 lines of CSS by Andy Bell
- The New CSS Reset by Elad Shechter
- Style hover, focus, and active states differently by Zell
- A Modern Sass Folder Structure by Technophile
- Sass Guidelines - Architecture by Kitty Giraudel
- Why we prefer CSS Custom Properties to SASS variables by Sebastiano Guerriero
- Add a Class or Styles to the Body element in React by Borislav Hadzhiev
- An Easy Way to Create a Responsive Navbar in ReactJS by Abdul Basit On
- Create a responsive navbar with React and CSS by Chinwike Maduabuchi
- Fixing White Line Appearance Issue in React-Tabs Library by DevCodeF1 Editors
- Create a React app with Vite and deploy it on GitHub by Badreddine Boudaoud
- Deploying Vite Deploying Vite App to GitHub Pages by Aishwarya Parab
- GitHub: @kkarrwrites
- Frontend Mentor: @kkarrwrites