Submitted almost 3 years ago

Officelite coming soon site with HTML, Sass, and Vue.JS

Riyana Gueco• 495

@rngueco

Preview site View code

This is a solution for...

Officelite coming soon site

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is the most interesting challenge I've worked on to date.

It's my first time working with Figma design styles, and at first I didn't know what to look for but after a while I got the hang of it. I did my best trying to replicate every pixel on this design, but I know that's quite impossible to achieve.

It's also my first time working with a frontend framework like Vue.js, so I'm not completely confident with how my components turned out, or even whether or not they should be a Vue component. So far with Vue I was able to:

Build a countdown timer component that takes the end date (release date) and countdown to it from the moment the user opens the page.

Build a subscription form component that checks that all required fields are filled out, and that the email address is in a valid format before submitting the form.

As far as styling these components go, I have created a SCSS partial/module for each one of the components I mentioned.

Community feedback

Grace• 27,670

@grace-snow

Posted almost 3 years ago

Hey

Well done on this, it looks good! Ive never done vue js files like this myself, I always use .vue files so I can keep templates, script section and optionally styles all in the same file. This is pretty easy to follow though and all makes sense.

The only things that dont quite look right are the paragraph line height and the select in the form. Selects are really hard to style for cross-browser so don't feel bad!

Good job

Marked as helpful

Riyana Gueco• 495

@rngueco

Posted almost 3 years ago

@grace-snow Thank you so much, Grace!

I had contemplated using single-file components on Vue but I was kind of afraid to try the Vue CLI (or anything that wasn't CDN really lol) as it was not recommended for beginners. I might try on a future project though! 🙂

I did see that there was a bonus challenge to make a custom select form input, which I might work on in the future but I thought native select would be alright for now as long as I knew what the downsides of native select are. 😅

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord