Skip to content

Latest commit

 

History

History
179 lines (139 loc) · 15.8 KB

job-ready-javascript-edition-2.0.md

File metadata and controls

179 lines (139 loc) · 15.8 KB
Raw

Get Job ready - JavaScript Edition - Version 2.0

Deprecated - Updated 3.0 version available here

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 midway through Tier 2.

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 - Intro to Programming

Goal: Become Proficient with HTML, CSS and JavaScript.

Tier 2 - Add Complexity

Goal: Become familiar with D3.js and React to strengthen your proficiency with JavaScript.

Tier 3 - 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.
  • Book: Open Data Structures
  • Project: Finish all classic puzzles on CodinGame from easy through hard by the end of the Tier.
  • 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: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
  • 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. Consider building it as a Chrome Extension, Mobile, or Electron App
  • Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
  • 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. Consider building it as a Chrome Extension, Mobile, or Electron App
  • 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) - or do a one month Speedrun of the FreeCodeCamp Projects.

Tier 4 - 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: 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.

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 give you greater freedom, over the course of studying the guide, to create a portfolio that is unique to you - rather than a clone of the same exact projects that are on the portfolio of every other junior web dev out there.

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
    • 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)