Update on the Frontend Mentor Challenge

Nabila AbubakarNabila Abubakar
2 min read

I successfully completed the Space Tourism Challenge on Frontend Mentor in 4 days even though I estimated it will take me a week.

It was the first time I worked with a design file to create a website and I'm grateful to the Frontend Mentor team for this opportunity to learn and grow.

I used this to also practice my Vue and sass which made me learn more on using mixins, props, methods and also Vue directives.

OVERVIEW OF MY WORKFLOW:

• Ran npm create vue@latest (to make a new Vue project) and Created a repo

• I checked out the design file on figma

• Made variables for the fonts, spacing and other css elements in Sass.

• Had a mental map of which component I'll start with first.

• Started with the Nav then the Homepage.

• I made sure each page was responsive and had the right measurements, colors and mixins before moving on.

• Tested my code and then deployed.

PENDING ISSUE (1)

So far, there's only one issue I encountered and have tried several options to fix it but it still didn't work.

The background image doesn't change as I switch pages even though I specified each one in SASS.

I tried binding the pages to specific classes to each page but then my nav background had issues.

If you have any idea on how to solve this, please comment.

Feel free to checkout the website and share your views!

Live Demo : https://space-tourism-flax-gamma.vercel.app/

GitHub:

https://github.com/Beela303/space-tourism

Solution: https://www.frontendmentor.io/solutions/responsive-space-tourism-website-using-vuejs-and-sass-0xa0KearRV

Thank you for reading!

0
Subscribe to my newsletter

Read articles from Nabila Abubakar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Nabila Abubakar
Nabila Abubakar

I'm a self-taught front-end web developer on my way to full-stack. Currently learning Django and ionic.