A 120 Days Plan to Become a Better Front-End Developer

My intensive program to level up and become a better front-end engineer

I have been coding professionally as a full-stack developer for more than 3 years now and I particularly enjoy working on the front-end. I am a bootcamp grad and self-taught developer, and while I learn a lot on the job on a daily basis, I have always had this urge to take the time to fully grasp the deep fundamentals of JavaScript and programming, and to become a stronger developer.

Since I made an intensive plan for myself to level up and ace technical coding interviews, I decided to share it with you. Sometimes you just need to see the plan unfold to get started, so I’ll be happy if it can be of use to anyone.

I needed a program that would really get me ready for code interviews, that I could follow while working a full-time job, and not very expensive.

It was important to me that the program be intensive: I find that it’s easier to build and keep momentum in short bursts of massive action than to dabble for too long. I am more of a sprinter, but of course if you are of the marathonian type, you can easily spread this program over a longer period of time to fit your learning style.

I also purposefully chose several overlapping resources for each course: learning from a variety of medias (text, video) and being exposed to different ways of presenting a concept helps grab the content a lot better, not to mention the demonstrated benefits of repetition.

I have spent a lot of time researching, reading, looking for the best resources I could to build my own tailored curriculum (thanks for the inspiration FrontEndMasters, JavaScriptisSexy and Nick Ciubotariu in this article), and this is the result: a 4-month (very) intensive front-end engineering training, with a selection of excellent resources that cost less than 500€ combined. (It can cost much less if you choose alternative free resources of your choice of course).

Note that you should be comfortable with front-end development basics to hop on; Git, HTML, CSS, the DOM and JavaScript indispensable concepts (scope, this, closures, etc) are not part of this learning path. Tons of free good resources (including some articles on this blog) can help you quickly learn the beginner parts of the front end before taking on this program.

THE PROGRAM (120 days)

I am planning to work a minimum of 3 hours a day, with one mandatory coding exercise every day at the beginning of each session, that I will push on Github.

You can find the Google Sheet with the planning + resources here.

RESOURCES

Here is the list of the resources I will use along the program:

Books

Beginning JavaScript (5th Edition) (21.32 €)

Cracking the Coding Interview (6th Edition) (37.62€)

Eloquent JavaScript (Free)

High Performance JavaScript (16.62 €)

JavaScript: the Definitive Guide (6th Edition) (19.99€)

Learning JavaScript Design Patterns (Free)

Professional JavaScript for Web Developers (3rd Edition) (21.34€)

Free Learning Apps

You will have to create an account on the majority of them to access the content

Brilliant

Codecademy

CodeSchool

FreeCodeCamp

JavaScript is Sexy

ReactTraining

Udacity

Viking Code School Prep Work

Subscription-Based Learning Apps

Front-End Masters (33€ / month, you can cancel anytime)

PluralSight (25€ / month, you can cancel anytime)

Udemy Courses

Wait for their frequent big sales where each course is 10$

Accelerated ES6 JavaScript training

Advanced JavaScript

JavaScript Essentials (Free)

JavaScript: Understanding the Weird Parts

Learning Data Structures in JavaScript from Scratch

Modern React with Redux

The Complete JavaScript Course

The Web Developer BootCamp

WebPack 2: the Complete Developer Guide

Free Exercise / Coding Interview Apps

Exercism

Hacker Rank

JS 30

LeetCode

DETAILED PLANNING (120 days)

Exercises (1 per day for 120 days):


I. Mastering JavaScript (30 days)

Objects & Prototypal Inheritance

JSON, XML & APIs

Regular Expressions

Advanced DOM Manipulation

JavaScript Events in depth

jQuery

Strict Mode

Handling Errors

  • Book JavaScript, The Definitive Guide: Chapter 14 “The Window Object”, Section 14.6 “Error Handling”
  • Book Professional JavaScript: Chapter 17 “Error handling and Debugging”
  • Book Eloquent JavaScript: Chapter 8 “Bugs and Error Handling”

Ajax

  • Book Beginning JavaScript: Chapter 14 “Ajax”
  • Book Professional JavaScript: Chapter 21 “Ajax and Comet”
  • Udacity: Introduction to Ajax
  • FreeCodeCamp: JSON APIs and Ajax

Front-End Data Storage

ECMAScript6

Object-Oriented Programming in JS

Final Project

II. Software Engineering via JavaScript (37 days)

Software engineering & CS basics

Algorithm and Data Structures

JS Design Patterns

Functional Programming

Final Project

III. Front-end Development Tools & Architecture (23 days)

JS templating (Handlebars.js)

Tooling & Automation

JS Module loaders / bundlers (Webpack)

Principles of a Single Page Application

Architecting Front-End Web Applications

Testing for Front-End Developers

High Performing Code in JS

  • Book High Performance JavaScript: Build Faster Web Application Interfaces

IV. React & Redux (16 days)

V. Go further (14 days)

Progressive Web Apps

Site Performance Optimization

SASS

SEO Fundamentals

Get the job

SOME TIPS

While learning, be sure to write and reproduce most of the code you will encounter, and to practice as much as possible.

Push as much code as you can on Github: having long streaks of public commits for extended periods of time says a lot about your grit and passion for code. It will reflect very well when you get to the phase of the real interviews.

When you really don’t understand a key concept: take 1 or 2 days to write an in-depth article about it. It will force you to seek out external resources and to try and understand from various explanations. Write the article as if you were explaining the concept to someone who is a true beginner and doesn’t have background on the topic. This helped me a lot grasp many parts of JavaScript and is known to be amongst the best methods to understand and retain difficult concepts.

Don’t be a perfectionist: be clever about what is most suited to your needs. Spending 10 days on the quirks of Regular Expressions will not be very useful if you don’t intend to use them in the coming weeks. Understand what they are and move on: when the necessity to use them comes you will have the opportunity to go deeper and learn all the details about them.

Try to reach to solutions by yourself but don’t get stuck: get help on StackOverflow or in the FreeCodeCamp community group when you can’t move forward.

I hope you enjoyed this article, thank you for reading.

Léna

Liked this post? Sign up and get my new articles.

Get my articles directly in your inbox