Chanda-Abdul/vue-workit-landing-page

This is a solution to the Workit landing page challenge on Frontend Mentor using Vue.js

Frontend Mentor - Workit landing page

This is a solution to the Workit landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
  • Mobile-first, for viewports < 600px
  • Tablet(Portrait and Landscape), for viewports from 600px to 1200px
  • Desktop for viewports < 1200px
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: here
• Live Site URL: here

My process

Built with

What I learned

First time using vue.js

Continued development

• Animations

Add pages for

• "Apply For Access"
• "Learn More"

Useful resources

• Vue Docs -

• 🙌🏾 Udemy Course: Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann - Very Helpful for Sass and Responsive
• How to use variable fonts - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Using CSS Counters for Custom List Number Styling - Getting custom styling on lists isn’t even so tricky anymore, since CSS counters have introduced counter-increment and counter-reset

Author

• Website - Chanda Abdul
• GitHub - github.com/Chanda-Abdul
• Frontend Mentor - @Chanda-Abdul