The complete learning path for Front-End developer (Online courses)
Tags: javascript, webdev, react, codenewbie
Published: 2020-08-21 07:10:14

#Hey! 👋
I'm a Front-End (React) Developer and an IT mentor at [CoderDojo](https://coderdojo.com/). People often ask me how to become a developer, what **resources** I would recommend, what is the correct order for learning these technologies. As a person who constantly watches courses online and learned A LOT from them, I think I've got a pretty decent answer. 

So, let me share with you the courses that had a great influence on my career. And BTW I want to say special thanks to the authors of these courses because without them I'd probably become a vegetable seller. This is not an advertisement, although I would like it to be...

##**First things first: HTML + CSS**
Since this is the very first topic you should touch, there's quite a lot of information on HTML and the basics of CSS on the Internet. But there is one resource that I've found very decent. I like Jonas Schmedtmann's course not only because it's very comprehensive. Jonas is a great designer and walking through this course you'll build the web pages that look amazing! We all know how hard it is to maintain the motivation at the beginning of your learning journey, but I promise that the web-artworks that you'll create with this course will provide you instant gratification. You'll be proud of what you're doing, trust me :)

####[Build Responsive Real World Websites with HTML5 and CSS3](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/) by Jonas Schmedtmann
[![Build Responsive Real World Websites with HTML5 and CSS3](https://i.ibb.co/xFTc6VT/htmlcss.png)](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)


##**Second things second: Advanced CSS**
Try to ask a Back-End Developer "Why didn't you choose Front-End?". Chances are good that you will receive something like "I hate CSS. I just can't do it". For some unclear reason, a lot of people think that the ability to use CSS is God's gift. News flash — it isn't 😊. The delusion is probably caused by the fact that it is easy to start working with CSS, but it requires a lot of time to master it. And again, I think that the best option to start with it is another course by Jonas Schmedtmann. The author dives deep into important topics like Flexbox, CSS-Grid, preprocessors, project structure, BEM methodology, etc. I really do recommend it!

####[Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://www.udemy.com/course/advanced-css-and-sass/) by Jonas Schmedtmann
[![Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://i.ibb.co/xD8DcsW/sass.png)](https://www.udemy.com/course/advanced-css-and-sass/)



##**The heat is getting higher: JavaScript**
JavaScript is without hesitation the most important skill for you as a Front-End Developer. I am a supporter of the not very popular opinion that the fastest and most effective way to master it is as follows:
1. Learn the basics of JavaScript
2. Learn React (or another framework/library)
3. Understand that you don't know the basics of JavaScript
4. Truly learn JavaScript

Don't try to learn every little JavaScript detail from the beginning. It will be much easier for you to understand and prioritize many things if you already have some practical experience. But don't be fooled by a too superficial understanding of the basics.

At the beginning of your JavaScript journey I'd recommend one of these tho courses:

#####[The Complete JavaScript Course: Build Real Projects!](https://www.udemy.com/course/the-complete-javascript-course/) by Jonas Schmedtmann
[![The Complete JavaScript Course: Build Real Projects!](https://i.ibb.co/pJYgG1r/js1.png)](https://www.udemy.com/course/the-complete-javascript-course/)


#####[JavaScript - The Complete Guide(Beginner + Advanced)](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/) by Maximilian Schwarzmüller
[![JavaScript - The Complete Guide(Beginner + Advanced)](https://img-a.udemycdn.com/course/750x422/2508942_11d3.jpg)](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/)


##**Time to choose your destiny: React, Angular, Vue**
Now you're ready to learn how to handle real power. There's no need to learn all of them. At least for the start, you'd better pick one of the frameworks/libraries. I'm really into React but I don't want to start a holy war about what technology is better (although React is the best 😊). I tried them all and can confidently say that [Academind](https://academind.com/) (Maximilian Schwarzmüller) has excellent courses about all three:

[![JavaScript - The Complete Guide(Beginner + Advanced)](https://i.ibb.co/cxczjYG/fwks.png)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)
#####[React - The Complete Guide (incl Hooks, React Router, Redux)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) by Maximilian Schwarzmüller

#####[Angular - The Complete Guide (2020 Edition)](https://www.udemy.com/course/the-complete-guide-to-angular-2/) by Maximilian Schwarzmüller

#####[Vue JS - The Complete Guide (incl. Vue Router & Vuex)](https://www.udemy.com/course/vuejs-2-the-complete-guide/) by Maximilian Schwarzmüller

##**The "T-word": Unit Testing**
I know that you hate it. I hate it too. But we have to live with what we've got. The process of testing is especially painful when you try to come up with weird hacks because of a lack of knowledge. And probably the best way to gain this knowledge is an awesome course on unit testing by [Kent C. Dodds](https://kentcdodds.com/). Everybody in the community knows him. He truly deserves trust. After all, he gave us the react-testing-library. Definitely the best resource on unit (and not only unit) testing I've seen:


#####[Learn the smart, efficient way to test any JavaScript application](https://testingjavascript.com/) by Kent C. Dodds
[![Learn the smart, efficient way to test any JavaScript application](https://kentcdodds.com/static/metaImage-a10bc5908ac36d2832d80fec74205556.jpg)](https://testingjavascript.com/)


##**JavaScript on steroids: TypeScript**
Another great Maximilian Schwarzmüller's course. If you truly master TypeScript, you'll insanely improve the quality of your code! There're a lot of people with a superficial understanding of TypeScript... Please, don't become one of them. This course (and a lot of practice) will help you to become a Master Yoda of TypeScript.

#####[Understanding TypeScript](https://www.udemy.com/course/understanding-typescript/) by Maximilian Schwarzmüller
[![Understanding TypeScript](https://www.filepicker.io/api/file/hDdzn2AcQccmYaE4h8iK)](https://www.udemy.com/course/understanding-typescript/)

##**Think out of the box: Node.js**
What? Isn't it for the Back-End?! Technically it's not only for BE but I do want to talk about the Back-End part. At some point in your career, you'll most probably want (need?) to try the Back-End part or even become a full-stack developer. I've taken a few courses on this topic and the one I like the most is created by Andrew Mead:

#####[The Complete Node.js Developer Course](https://www.udemy.com/course/the-complete-nodejs-developer-course-2/) by Andrew Mead
[![The Complete Node.js Developer Course](https://i.ibb.co/PrLhkkc/node.png)](https://www.udemy.com/course/the-complete-nodejs-developer-course-2/)

##**There ain't no REST for you: GraphQL**
Even though GraphQL is not that new technology (in Front-End development world things are changing so fast that there will likely be released a fancy new framework by the end of this article), REST is still much much more popular. But I'm sure you'll want (or need) to give it a try. After all, as a good person once said *"No sane person would choose REST instead of GraphQL"*. It's hard to find the course on this topic that is not out of date. For today I think this one is quite decent:

#####[The Modern GraphQL Bootcamp (with Node.js and Apollo)](https://www.udemy.com/course/graphql-bootcamp/) by Andrew Mead
[![The Modern GraphQL Bootcamp (with Node.js and Apollo)](https://i.ibb.co/DMgqDD8/gql.png)](https://www.udemy.com/course/graphql-bootcamp/)


##**What? JavaScript again?: The Hard Parts**
As I previously said, the vast majority of us (devs) at some point have to realize that "we know nothing". I love Will Sentance's course from the bottom of my heart because he dives deep in very important topics that you probably missed during your first cycle of learning of the basics. The author uses only the whiteboard to explain the concepts. I like it so much that I even give such lectures for the interns in the company where I work. It helps a lot in preparation for an interview.

#####[JavaScript: The Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts/) by Will Sentance
[![JavaScript: The Hard Parts](https://i.ibb.co/BV8WLqp/hp.png)](https://frontendmasters.com/courses/javascript-hard-parts/)

#**Conclusion**
If you watched all the mentioned courses, I'm sure you are a decent specialist. One thing I wanted to mention before the end is a trap for Front-End Developers. Our JS world is probably one of the most fast-changing in the industry. It's almost impossible to be on top of all new technologies. You can probably feel the same "fear of missing out" because of that as I do. I've recently come across a wonderful Kitze's Talk on how to "Navigate the Hype-Driven Frontend Development World Without Going Insane". Please, enjoy what you're doing and live a balanced life.

 {% youtube QZ6aC6G0ufg %}

Peace.

Thanks again to all the authors of these amazing courses, and also thank you, the readers. Feel free to follow me on Twitter [@DenisVeleaev](https://twitter.com/DenisVeleaev). I'm at the beginning of my blogging path. Hope you will like it. 

Also, I would like to see your recommendations.

-----
#**Honorable mentions**
- [MongoDB - The Complete Developer's Guide](https://www.udemy.com/course/mongodb-the-complete-developers-guide/)
- [React Native - The Practical Guide](https://www.udemy.com/course/react-native-the-practical-guide/)
- [Design Patterns in JavaScript](https://www.udemy.com/course/design-patterns-javascript/)
- [Fullstack Advanced React & GraphQL](https://advancedreact.com/)
- [JavaScript Algorithms and Data Structures Masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)
- [NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)](https://www.udemy.com/course/nodejs-the-complete-guide/)