https://github.com/chanda-abdul/vue-workit-landing-page

This is a solution to the Workit landing page challenge on Frontend Mentor using Vue.js
https://github.com/chanda-abdul/vue-workit-landing-page

bem sass vite vue

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/chanda-abdul/vue-workit-landing-page
• Owner: Chanda-Abdul
• Created: 2023-05-01T22:04:25.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-05-11T03:21:13.000Z (almost 2 years ago)
• Last Synced: 2024-11-14T02:23:01.389Z (3 months ago)
• Topics: bem, sass, vite, vue
• Language: SCSS
• Homepage: https://moonlit-bubblegum-fba953.netlify.app/
• Size: 863 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Workit landing page

![](/src/assets/preview.jpg)

This is a solution to the [Workit landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/workit-landing-page-2fYnyle5lu). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

## Overview

### The challenge

#### Users should be able to:

- [x] View the optimal layout for the interface depending on their device's screen size

  - [x] Mobile-first, for viewports < 600px

  - [x] Tablet(Portrait and Landscape), for viewports from 600px to 1200px

  - [x] Desktop for viewports < 1200px

- [x] See hover and focus states for all interactive elements on the page

### Screenshot

### Links

- Solution URL: [here](https://github.com/Chanda-Abdul/vue-workit-landing-page)

- Live Site URL: [here](https://moonlit-bubblegum-fba953.netlify.app/)

## 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](https://vuejs.org/) - 

- 🙌🏾 [Udemy Course: Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann](https://www.udemy.com/course/advanced-css-and-sass) - Very Helpful for Sass and Responsive 

- [How to use variable fonts](https://css-tricks.com/newsletter/259-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](https://css-tricks.com/css-counters-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](https://www.Chandabdul.dev)

- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)

- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)