Skip to main content

Command Palette

Search for a command to run...

Update on the Frontend Mentor Challenge

Updated
2 min readView as Markdown
N

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

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!