My Intensive Program to Level Up and Become an 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 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
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
JavaScript Essentials (Free)
JavaScript: Understanding the Weird Parts
Learning Data Structures in JavaScript from Scratch
The Complete JavaScript Course
WebPack 2: the Complete Developer Guide
Free Exercise / Coding Interview Apps
DETAILED PLANNING (120 days)
Exercises (1 per day for 120 days):
- JS 30 (30 days)
- Hacker Rank 30 (30 days)
- Hacker Rank — Cracking the Coding Interview (20 days)
- Cracking the Coding Interview Book (40 days) (Free alternative: exercism.io or leetcode.com)
I. Mastering JavaScript (30 days)
Objects & Prototypal Inheritance
- PluralSight: JavaScript Objects and Prototypes
- Book JavaScript, The Definitive Guide: Chapter 6 “Objects”
- javascriptissexy.com : JavaScript Objects in Detail
- javascriptissexy.com : JavaScript Prototype in Plain Language
- Book Professional JavaScript: Chapter 6 “Object-Oriented Programming”, Section “Understanding Objects”
- FreeCodeCamp: Section “Basic JavaScript”, 9 Challenges (Build JavaScript Objects, Accessing Objects Properties with the Dot Operator, Accessing Objects Properties with Bracket Notation, Accessing Objects Properties with Variables, Updating Object Properties, Using Objects for Lookups, Testing Objects for Properties, Manipulating Complex Objects, Accessing Nested Objects)
JSON, XML & APIs
- Book Professional JavaScript: Chapter 18 “XML in Javascript” and Chapter 20 “JSON”
- Udemy: The Web Developer BootCamp: Section 25 “Working with APIs”, Lecture 237 “JSON and XML”
- Udemy: JavaScript: Understanding the Weird Parts: Section 4 “Object and Functions”, Lecture 33 “JSON and Object Literals”
- Udemy: Advanced JavaScript, Section 6 “Networking”
- Pluralsight: Hands-on JavaScript Project: JSON
Regular Expressions
- Book JavaScript, The Definitive Guide: Chapter 10 “Pattern Matching with Regular Expressions”
- The Coding Train: Introducing Regular Expressions Series
- FreeCodeCamp: Section “Basic JavaScript”, 4 Challenges ( Sift through Text with Regular Expressions, Find Numbers with Regular Expressions, Find Whitespace with Regular Expressions, Invert Regular Expression Matches with JavaScript)
Advanced DOM Manipulation
- Udemy: JavaScript Essentials, Section 4 “DOM Manipulation”
- Udemy: The Web Developer BootCamp, Section 14 “Advanced DOM Manipulation”
- DOM Enlightenment: Chapters 1 to 10
JavaScript Events in depth
- Book Professional JavaScript: Chapter 13 “Events”
- Book JavaScript, The Definitive Guide: Chapter 17 “Handling Events”
- Book Professional JavaScript: Chapter 22 “Advanced Techniques”, Section “Custom Events”
- Philip Roberts: “What the heck is the Event Loop Anyway?”
- PluralSight: Advanced Techniques in JavaScript and jQuery, Sections 2-3
- DOM Enlightenment: Chapter 11
jQuery
- Book JavaScript, The Definitive Guide: Chapter 19 “The jQuery Library”
- FreeCodeCamp: Section “jQuery”
- CodeSchool: Try jQuery
- PluralSight: Advanced Techniques in JavaScript and jQuery, Section 4
Strict Mode
- Book Professional JavaScript: Appendix B (“Strict Mode”)
- Udemy : JavaScript: Understanding the weird parts, Section 7 “Odds and Ends”, Lessons 67 and 68
- Udemy: Advanced JavaScript, Section 2 “Basics”, Lesson 3
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
- Book Beginning JavaScript: Chapter 13 “Data Storage”
- Book Professional JavaScript: Chapter 23 “Offline Applications and Client-Side Storage ”
- Book JavaScript, The Definitive Guide: Chapter 20 “Client-Side Storage”
- Dive into HTML5: Chapter 7 “The past, present and future of local storage for web applications”
ECMAScript6
- Udemy: Accelerated ES6 JavaScript training
- PluralSight: Rapid ES6 Training
- Udemy: The Complete JavaScript Course, Section 7 “Get Ready for the Future: ES6 / ES2015”
Object-Oriented Programming in JS
- Udacity: Object-Oriented JavaScript
- Book Beginning JavaScript: Chapter 5 “JavaScript: An Object-Oriented Language”
- Book Professional JavaScript: Chapter 6 “Object-Oriented Programming”
- Book JavaScript, The Definitive Guide: Chapter 9 “Classes and Modules”
- javascriptissexy.com : OOP: what you need to know
- Udemy: JavaScript: Understanding the weird parts, Section 5 “Object-Oriented JavaScript and Prototypal inheritance”
- FreeCodeCamp: Section “Object-Oriented and Functional Programming”, 5 challenges (Declare JavaScript Objects as Variables, Construct JavaScript Objects with Functions, Make Instances of Objects with a Constructor Function, Make Unique Objects by Passing Parameters to our Constructor, Make Object Properties Private)
Final Project
- FreeCodeCamp: Tic-Tac-Toe & Simon Game projects
II. Software Engineering via JavaScript (37 days)
Software engineering & CS basics
- Viking Code School Prep Work: Chapter “Basic Prep Work”, Section 2 “Software Engineering Basics”
- FrontEndMasters: Workshop “Four Semesters of Computer Science in Six Hours”
- Brilliant.org: Computer Science Complete Course
- FreeCodeCamp: “Computer Basics”
- Blog Articles: Computer Science in JavaScript
- Simple Programmer: Approaching problems, breaking it down
- FreeCodeCamp: “Big O Notation”
- CodeCademy: Big O
Algorithm and Data Structures
- Udemy: Learning Data Structures in JavaScript from Scratch
- FrontEndMasters: Algorithms and Data Structures in JavaScript
- Free Code Camp: Algorithm Scripting (Beginner, Intermediate and Advanced)
JS Design Patterns
- Book Learning JavaScript Design Patterns
- PluralSight: Practical Design Patterns in JavaScript
- PluralSight: JavaScript Design Patterns
Functional Programming
- FunFunFunction: Functional Programming in JavaScript Series
- Functional Light JS
Final Project
III. Front-end Development Tools & Architecture (23 days)
JS templating (Handlebars.js)
Tooling & Automation
- PluralSight: JavaScript Build Automation With Gulp.js
JS Module loaders / bundlers (Webpack)
- Udemy: WebPack 2: the Complete Developer Guide
- PluralSight: Building a JavaScript Development Environment
Principles of a Single Page Application
- Front-End JavaScript Single Page Application Architecture
- Nicholas Zakas: Scalable JavaScript Application Architecture
- Making a Single Page App Without a Framework
Architecting Front-End Web Applications
- Book Eloquent JavaScript: Chapter 10 “Modules”
- Udemy: JavaScript: Understanding the Weird Parts, Sections 8 and 9
- Udemy: The Complete JavaScript Course, Section 6 “The Budget App project”
Testing for Front-End Developers
- PluralSight: Front-End First: Testing and Prototyping JavaScript Apps
- Udacity: JavaScript Testing
High Performing Code in JS
- Book High Performance JavaScript: Build Faster Web Application Interfaces
IV. React & Redux (16 days)
- TylerMcGinnis: React Fundamentals
- Udemy: Modern React with Redux
- PluralSight: Building Applications with React and Redux in ES6
V. Go further (14 days)
Progressive Web Apps
- A Beginner’s Guide to Progressive Web Apps
- Udacity: Intro to Progressive Web Apps
- PluralSight: Getting Started with Progressive Web Apps
Site Performance Optimization
- Udacity: Browser Rendering Optimization
- Udacity: WebSite Performance Optimization
SASS
- PluralSight: A Better CSS: LESS and SASS
SEO Fundamentals
- PluralSight: SEO Fundamentals
Get the job
- PluralSight: Preparing for a Job Interview
- Viking Code School Prep Work: Chapter “Getting Hired Phase 1”
- PluralSight: Designing a Killer Job Search Strategy
- PluralSight: Get Involved!
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.
If you want to join me in this program and share your best resources for learning, use the hashtag #120DaysBetterDev on Twitter: let’s encourage each other and code together!