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
- Solution URL: frontendMentor.io
- Live Site URL: space-tourism-website.whoamiandrew.com/
- Semantic HTML5 markup
- Mobile-first workflow
- SSR workflow
- React - JS library
- Next.js - React framework
- Typescript - Javascript superset
- TailwindCSS - For styles
I like a challenge ! So this time I took an Intermediate challenge to learn Next.js. Easy you might say, but no so fast. I also choose to throw Typescript in the mix. And to round things off I'll use tailwind css
Do I know any one of them? No. Will that stop me? Not even close !
NextJs is fantastic! Easy to set up, even from scratch. The Next js router makes it clear that Next js is SSR orientated. The Next/Image for lazy image rendering is good for performance.
Tailwind CSS is what I needed. I thought the lengthy classnames wouldn't suit me, but I was wrong. The sole fact of not having to name anything is a big bonus. I had to tweak a few utility classes to suit my needs but, nothing too fancy and, overall the experience was great.
Typescript. You and I are going to have the best love/hate relationship. My first programming language was Java. It's a cumbersome language but, you get what you write and, if anything is wrong, it will tell you. Typescript has the same feel. When you feel lazy, it has (not) a subtle way you telling you you have to define everything single variable. Sure, vanilla JS works but does it? By the end, I felt much more confident writing code.
- React Docs
- Next Js Docs
- Typescript Docs
- TailwindCSS Docs
- Fireship.io - Awesome Youtube channel. Fireship.io has a "Concept/framework in 100sec" playlist to quickly learn the very basics of a Programming language, framework, or concept. There are also longer videos for more in-depth frontend mini-projects.
- Kevin Powell - Discovered on FrontendMentor with the partnership on this challenge and where my CSS game step up to all new level.
- Google - Last but not least, the ultimate bug solver!
- Website - whoamihealay
- Frontend Mentor - @whoamihealay
- Linkedin - @andrewsouthern01
A huge thank you to my wife Andrea for her unconditional support and love. To my parents the MVP's of my upbringing!