Skip to content

Latest commit

 

History

History
228 lines (186 loc) · 19.9 KB

job-ready-javascript-edition-3.0.md

File metadata and controls

228 lines (186 loc) · 19.9 KB
Raw

Get Job ready - JavaScript Edition - Version 3.0

A guide primarily focused on Frontend development, but including just enough of an introduction to Backend to enable an understanding of the "entire process" to prepare for productive entry to a Full Stack team as a confident and capable Frontend Developer.

Tier 0 - Prep

Goal: Be comfortable with git by midway through Tier 1, and comfortable with Precalculus by the end of Tier 4.

Anything in Tier 0 can be studied before beginning Tier 1, or alongside the rest of the guide as you progress through the other Tiers.

Tier 1 - The Basics

Goal: Become comfortable with HTML, CSS, JavaScript and SQL basics.

Tier 2 - Intro to Programming

Goal: Become Proficient with HTML, CSS and JavaScript.

Tier 3 - Add Complexity

Goal: Become familiar with D3.js and frontend libraries/frameworks to strengthen your proficiency with JavaScript.

  • Course: CS50's Mobile App Development with React Native
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Project: 100 Days of CSS in CodePen. Complete at least 5 more at this point.
  • Course: Data Visualization and D3.js
  • Project: Clone this online resume template
  • Book: JavaScript Allongé, the "Six" Edition
  • Project: CodinGame finish all problems in the 'Classic Puzzle - Medium' section.
  • Project: 100 Days of CSS in CodePen. Complete at least 5 more at this point.
  • Tackle documentation: Pick Angular, React, or Vue and dive into its official documentation, study it all, practice it, learn it thoroughly - then clone this Admin template using whichever library/framework you chose. Note that there are 'many' pages and features to this template, you should clone them all. Continue practicing by using your library/framework of choice on the majority of the projects from this point forward in the guide.
  • Tackle documentation: Study the Jest.io official docs working through all the introduction and guides sections.
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Book: JavaScript Design Patterns
  • Project: Revisit CSS Zen Garden - and implement a new design
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Tackle documentation: Study the Express.js official docs, paying special attention to all Getting Started and Guide sections.
  • Project: Clone Twitter using Node.js/Express.js on the backend, and your frontend framework/library of choice. Include all basic features: signup/login/logout, follow user, search, tweet, like/retweet, home page with stream of recent tweets.
  • Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
  • Project: Complete any sections of Algebra II you have yet to complete.

Tier 4 - Practice

Goal: Practice Frontend Development in greater depth and continue studying JavaScript, ensuring you understand the algorithms and data structures you're likely to encounter in interviews (and on the job).

  • Project: Read How to Contribute to Open Source - and make two contributions to open source projects (of your choice) by the end of this Tier.
  • Project: 100 Days of CSS in CodePen. Complete at least 5 more at this point.
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Project: Complete any sections of Trigonometry you have yet to complete.
  • Book: Open Data Structures
  • Project: CodinGame finish all problems in the 'Classic Puzzle - Hard' section.
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Project: 100 Days of CSS in CodePen. Complete at least 5 more at this point.
  • Tackle documentation: Thoroughly study The Webpack Guides
  • Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
  • Project: Create a web page using this theme as your inspiration, include all features (hover effects, animations, etc)
  • Project: 100 Days of CSS in CodePen. Complete at least 5 more at this point.
  • Project: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) - Consider building it as a Chrome Extension, Mobile, or Electron App.
  • Project: Full stack project of your choice (make it grand).
  • Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
  • Project: Complete any sections of Precalculus you have yet to complete.

Tier 5 - Wrap everything up and prep for interviews

Goal: Interview with confidence.

  • Project: Finish any questions you have remaining from JavaScript Interview Prep
  • Project: Finish any of 100 Days of CSS you have yet to complete.
  • Project: CodinGame finish all problems in the 'Classic Puzzle - Very Hard' section.
  • Project: Create and polish your Portfolio site.
  • Project: Create and polish your Resume/CV.
  • Project: Study and complete all The HackerRank Interview Preparation Kit on HackerRank
  • Project: Continue honing your skills as you interview. Prioritize contributing to open source. Look at the 'official docs' section of the FAQ at the end of this guide and begin studying any or all of them.

What now?

  • If you want to move on to Data Science - hit the Data Science Guide
  • If you preferred the Algorithms and Data Structures - hit the CS-WD Guide
  • If you mostly enjoyed the Web Development - hit the WD-CS Guide

FAQ for this guide

Why is it so much longer than the original Job Ready Guide?

What I've observed over the past 9 months is two phenomena, the first being that many "self-supplemented" with additional beginner projects and resources while working through YDKJS, so I expanded on the beginner section to alleviate the "but what else should I be doing" question. The second is that the most successful learners also supplemented with more involved projects towards the end of the guide, so I added more intricate/advanced projects to meet that need.

Why so much Math and Algorithms?

It's not THAT much math, just through Precalculus so you won't feel so behind the curve when you want to push beyond just "Job Ready" and tackle more involved programming projects. The algorithms -- I've added them to ensure you're prepared and confident you can handle anything you might encounter in an interview.

Where should I deploy my code?

For all projects - store your code on GitHub, GitLab or BitBucket (GitHub preferred if you want it to later be seen by potential employers) and for web projects deploy the code on the web using the service of your choice (GitHub or GitLab projects or Surge.sh are ideal for frontend only projects, while Heroku is a free alternative for backend/fullstack).

Why the change in Project selections?

To provide a bit more guidance in selecting a variety of projects that will involve a variety of front end development work (animations, media, etc).

Do you have a list of helpful links to point me in the right direction if I need a productive break, or need to consult the official docs while I'm working through all this?

Yes, yes I do:

  • For when you need a quick/fun productive break that teaches you how to use CSS to layout a site (revisit this section in Tier 1 - Flexbox Zombies alone will prove extremely helpful learning to layout a page for the early projects.)
  • For when you need a quick/fun productive break in which you also practice JavaScript
  • For when you need assets/ideas
  • Official Docs
    • MDN HTML - for exploring all that HTML has to offer
    • MDN CSS- for exploring all that CSS has to offer
    • MDN JavaScript- for exploring all that JavaScript has to offer
    • Sass - supercharged CSS
    • Node.js - should be your primary reference for building backend projects
    • Express - an excellent framework to accompany Node.js on the backend
    • MongoDB - for storing data
    • Mongoose - access to MongoDB from Node.js made easy(er)
    • Passport.js - remember this link when you have to setup a login system
    • D3 - for creating awesome graphs and charts
    • Angular - option for creating single page apps on the frontend
    • React - option for creating single page apps on the frontend
    • Vue - option for creating single page apps on the frontend
    • Redux - for managing state in a single page app
    • ngrx - reactive programming in Angular applications
    • RxJS - reactive JavaScript
    • Mocha - venture into testing
    • Karma - venture into testing
    • Jest - venture into testing
    • Webpack - module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
    • Babel - makes the new JavaScript work on old browsers (or node versions for that matter)
    • Gulp - for automating your workflow
    • ESLint - for helping to keep your code clean
    • Prettier - more help keeping your code clean
    • Travis - continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)