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 and , and to become a stronger developer. JavaScript programming 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 , that I could follow , and . get me ready for code interviews while working a full-time job 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 , and in this ), and this is the result: combined. (It can cost much less if you choose alternative free resources of your choice of course). FrontEndMasters JavaScriptisSexy Nick Ciubotariu article a 4-month (very) intensive front-end engineering training, with a selection of excellent resources that cost less than 500€ 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 every day at the beginning of each session, that I will push on Github. one mandatory coding exercise 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 (21.32 €) Beginning JavaScript (5th Edition) (37.62€) Cracking the Coding Interview (6th Edition) (Free) Eloquent JavaScript (16.62 €) High Performance JavaScript (19.99€) JavaScript: the Definitive Guide (6th Edition) (Free) Learning JavaScript Design Patterns (21.34€) Professional JavaScript for Web Developers (3rd Edition) 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 (33€ / month, you can cancel anytime) Front-End Masters (25€ / month, you can cancel anytime) PluralSight Udemy Courses Wait for their frequent big sales where each course is 10$ Accelerated ES6 JavaScript training Advanced JavaScript (Free) JavaScript Essentials 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): ( ) JS 30 30 days ( ) Hacker Rank 30 30 days ( ) Hacker Rank — Cracking the Coding Interview 20 days Book ( ) (Free alternative: or ) Cracking the Coding Interview 40 days exercism.io leetcode.com I. Mastering JavaScript (30 days) Objects & Prototypal Inheritance PluralSight: JavaScript Objects and Prototypes Book : Chapter 6 “Objects” JavaScript, The Definitive Guide : javascriptissexy.com JavaScript Objects in Detail j : avascriptissexy.com JavaScript Prototype in Plain Language Book : Chapter 6 “Object-Oriented Programming”, Section “Understanding Objects” Professional JavaScript 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 : Chapter 18 “XML in Javascript” and Chapter 20 “JSON” Professional JavaScript Udemy: : Section 25 “Working with APIs”, Lecture 237 “JSON and XML” The Web Developer BootCamp Udemy: : Section 4 “Object and Functions”, Lecture 33 “JSON and Object Literals” JavaScript: Understanding the Weird Parts Udemy: , Section 6 “Networking” Advanced JavaScript Pluralsight: Hands-on JavaScript Project: JSON Regular Expressions Book : Chapter 10 “Pattern Matching with Regular Expressions” JavaScript, The Definitive Guide The Coding Train: Series Introducing Regular Expressions FreeCodeCamp: Section “Basic JavaScript”, 4 Challenges ( s, , , ) Sift through Text with Regular Expression Find Numbers with Regular Expressions Find Whitespace with Regular Expressions Invert Regular Expression Matches with JavaScript Advanced DOM Manipulation Udemy: , Section 4 “DOM Manipulation” JavaScript Essentials Udemy: , Section 14 “Advanced DOM Manipulation” The Web Developer BootCamp : Chapters 1 to 10 DOM Enlightenment JavaScript Events in depth Book : Chapter 13 “Events” Professional JavaScript Book : Chapter 17 “Handling Events” JavaScript, The Definitive Guide Book : Chapter 22 “Advanced Techniques”, Section “Custom Events” Professional JavaScript Philip Roberts: “What the heck is the Event Loop Anyway?” PluralSight: , Sections 2-3 Advanced Techniques in JavaScript and jQuery : Chapter 11 DOM Enlightenment jQuery Book : Chapter 19 “The jQuery Library” JavaScript, The Definitive Guide FreeCodeCamp: Section “jQuery” CodeSchool: Try jQuery PluralSight: , Section 4 Advanced Techniques in JavaScript and jQuery Strict Mode Book : Appendix B (“Strict Mode”) Professional JavaScript Udemy : , Section 7 “Odds and Ends”, Lessons 67 and 68 JavaScript: Understanding the weird parts Udemy: , Section 2 “Basics”, Lesson 3 Advanced JavaScript Handling Errors Book : Chapter 14 “The Window Object”, Section 14.6 “Error Handling” JavaScript, The Definitive Guide Book : Chapter 17 “Error handling and Debugging” Professional JavaScript Book : Chapter 8 “Bugs and Error Handling” Eloquent JavaScript Ajax Book : Chapter 14 “Ajax” Beginning JavaScript Book : Chapter 21 “Ajax and Comet” Professional JavaScript Udacity: Introduction to Ajax FreeCodeCamp: JSON APIs and Ajax Front-End Data Storage Book : Chapter 13 “Data Storage” Beginning JavaScript Book : Chapter 23 “Offline Applications and Client-Side Storage ” Professional JavaScript Book : Chapter 20 “Client-Side Storage” JavaScript, The Definitive Guide 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: , Section 7 “Get Ready for the Future: ES6 / ES2015” The Complete JavaScript Course Object-Oriented Programming in JS Udacity: Object-Oriented JavaScript Book : Chapter 5 “JavaScript: An Object-Oriented Language” Beginning JavaScript Book : Chapter 6 “Object-Oriented Programming” Professional JavaScript Book : Chapter 9 “Classes and Modules” JavaScript, The Definitive Guide j : avascriptissexy.com OOP: what you need to know Udemy: , Section 5 “Object-Oriented JavaScript and Prototypal inheritance” JavaScript: Understanding the weird parts 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: & projects Tic-Tac-Toe Simon Game II. Software Engineering via JavaScript (37 days) Software engineering & CS basics : Chapter “Basic Prep Work”, Section 2 “Software Engineering Basics” Viking Code School Prep Work FrontEndMasters: Workshop “Four Semesters of Computer Science in Six Hours” Brilliant.org: Complete Course Computer Science 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: Series Functional Programming in JavaScript Functional Light JS Final Project Build a Vanilla JavaScript Web App III. Front-end Development Tools & Architecture (23 days) JS templating (Handlebars.js) j : avascriptissexy.com Handelbar.js Tutorial PluralSight: JavaScript Templating with Handlebars 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: , Sections 8 and 9 JavaScript: Understanding the Weird Parts Udemy: , Section 6 “The Budget App project” The Complete JavaScript Course 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 : Chapter “Getting Hired Phase 1” Viking Code School Prep Work PluralSight: Designing a Killer Job Search Strategy PluralSight: Get Involved! SOME TIPS While learning, be sure to you will encounter, and to practice as much as possible. write and reproduce most of the code Push as much code as you can on Github: having 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. long streaks of public commits for extended periods of time When you really don’t understand a key concept: . 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. take 1 or 2 days to write an in-depth article about it Don’t be a perfectionist: . 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. be clever about what is most suited to your needs Try to reach to solutions by yourself but don’t get stuck: when you can’t move forward. get help on StackOverflow or in the FreeCodeCamp community group If you want to join me in this program and share your best resources for learning, use the hashtag on Twitter: let’s encourage each other and code together! #120DaysBetterDev
