Skip to content
Submitted over 3 years ago

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

Riyana Gueco•495
@rngueco
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Officelite coming soon site
  • HTML
  • CSS
  • JS
2junior

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•30,990
    @grace-snowPosted over 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
    0
    Riyana Gueco•495
    @rnguecoPosted over 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. 😅

    0

Please log in to post a comment

Log in with GitHub

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