Skip to content

Latest commit

 

History

History
198 lines (170 loc) · 17.2 KB

vue.md

File metadata and controls

198 lines (170 loc) · 17.2 KB
Raw

Vue - Topic Deep Dive

The following is a deep dive, designed to familiarize you thoroughly with Vue. It is not the "easy path to just learning 'enough'" - it aims far higher, combining thorough study of the official docs, regular practice projects, comprehensive exploration of Vue's ecosystem and hands on non-Vue JavaScript practice to ensure a rock solid foundation in everything Vue.

Tier 0 - reference only if you need pre-Vue basics

  • Course: Introduction to Computer Science - CS50 (If you want more confidence programming)
  • Articles: How to not f-up your local files with Git part1, part2 and part 3 (You want to be using git, read these to get up to speed.)
  • Course: Learn to Code HTML & CSS (Intro, to get you started with HTML and CSS)
  • Course: Learn to Code Advanced HTML & CSS (Additional HTML and CSS instruction)
  • Course: Getting Sassy with CSS (Dip into Sass, try to hit this before you finish the guide)
  • Book Series: YDKJS (You need to KNOW JavaScript, not just sorta-know JavaScript, if you haven't studied these books, do yourself a favor and study them alongside whatever else you might be doing)
  • Official Docs: ESLint - thoroughly review the User Guide
  • Official Docs: Axios npm package - thoroughly review, you'll want this for making API calls

Tier 1 - basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

You NEED to know JavaScript - if you're shaky on JavaScript, do yourself a favor and hit MDN and study, especially ES6 features - and hit YDKJS.

For each project:

  • Use a git workflow (If you wonder what this is, read the articles in Tier 0)

For at least one project:

  • Code all CSS yourself
  • Use Bootstrap
  • Official Docs: Vue.js Guide - All sections in Essentials
  • Official Docs: Flexbox
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: Vue DevTools
  • Official Docs: Vue.js Style Guide - Priority A Rules
  • Official Docs: CSS Grid Layout
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: Vue.js Examples - Review all examples and pick one to implement yourself
  • Official Docs: Vue Loader
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: vue-test-utils
  • Project: CodeWars - complete 10 problems using JavaScript
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Tier 2 - beyond basics

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests

For at least one project:

  • Code all CSS yourself
  • Use Bootstrap
  • Official Docs: Vue.js Guide - All sections in Transitions & Animation
  • Official Docs: Vue.js Guide - All sections in Reusability & Composition
  • Project: CodeWars - complete 20 problems using JavaScript
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: Vue.js Guide - All sections in Tooling
  • Official Docs: Vue.js Style Guide - Priority B Rules
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: Vue.js Examples - Review all examples and pick one to implement yourself
  • Official Docs: Vue Router
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Project: CodeWars - complete 20 problems using JavaScript
  • Official Docs: Jest Docs
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters

Tier 3 - intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Utilize Sass
  • Implement end-to-end testing

For at least one project:

  • Code all CSS yourself
  • Use Bootstrap

Tier 4 - beyond intermediate

Study each item thoroughly. Type the code. Understand how it works. Yes, the whole thing.

For each project:

  • Use a git workflow
  • Include at least 20 automated tests
  • Utilize Sass
  • Implement end-to-end testing

For at least one project:

  • Code all CSS yourself
  • Use Bootstrap
  • Implement state using Vuex
  • Implement state using Redux

On two projects of your choice - use no CLI or boilerplate created by someone else. Setup the project from scratch using npm init. Setup your own build process. Include only what you need from npm. Know precisely what everything in the setup is doing because you put it there, on purpose, yourself.

  • Official Docs: Vue.js Style Guide - Priority D Rules
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Official Docs: Vue.js Examples - Review all examples and pick one to implement yourself
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Official Docs: Webpack Template
  • Project: CodeWars - complete 20 problems using JavaScript
  • Official Docs: Vuex
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Official Docs: Vue.js Server-Side Rendering Guide
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Official Docs: Redux docs
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Project: Pick a template from here, here or here and implement an Vue application with it as your inspiration (do not use its assets)
  • Project: Select an API from Todd Motto's API List and build an Vue application powered by data fetched from the API you chose.
  • Official Docs: JavaScript Guide on MDN study thoroughly three chapters
  • Project: Utilize everything you've learned to create a comprehensive portfolio that showcases your ability with Vue, refactoring earlier projects as necessary to bring them up to the standard of your current abilities.

Bonus - advanced

  • Official Docs: Weex official documentation Study thoroughly, then refactor any previous project into a mobile app using Weex
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Official Docs: MDN Accessibility
  • Project: Clone a substantial production website (on the level of Medium, Twitter, etc)
  • Write an extensive tutorial on Vue - post it publicly
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Study a comprehensive text on Data Structures and Algorithms (such as Cormen or Sedgewick, or the freely available Open Data Structures book) and implement all data structures and algorithms in JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Google Code Jam - complete one round of any past contest using JavaScript
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use
  • Project: Make an open source contribution to a project you use

Helpful links