DEV Community

Cover image for The complete learning path for Front-End developer (Online courses)
Denis Veleaev
Denis Veleaev

Posted on

The complete learning path for Front-End developer (Online courses)

Hey! 👋

I'm a Front-End (React) Developer and an IT mentor at CoderDojo. 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 by Jonas Schmedtmann

Build Responsive Real World Websites 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! by Jonas Schmedtmann

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

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! by Jonas Schmedtmann

The Complete JavaScript Course: Build Real Projects!

JavaScript - The Complete Guide(Beginner + Advanced) by Maximilian Schwarzmüller

JavaScript - The Complete Guide(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 (Maximilian Schwarzmüller) has excellent courses about all three:

JavaScript - The Complete Guide(Beginner + Advanced)

React - The Complete Guide (incl Hooks, React Router, Redux) by Maximilian Schwarzmüller
Angular - The Complete Guide (2020 Edition) by Maximilian Schwarzmüller
Vue JS - The Complete Guide (incl. Vue Router & Vuex) 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. 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 by Kent C. Dodds

Learn the smart, efficient way to test any JavaScript application

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 by Maximilian Schwarzmüller

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 by Andrew Mead

The Complete Node.js Developer Course

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) by Andrew Mead

The Modern GraphQL Bootcamp (with Node.js and Apollo)

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 by Will Sentance

JavaScript: The 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.

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. I'm at the beginning of my blogging path. Hope you will like it.

Also, I would like to see your recommendations.


Honorable mentions

Top comments (7)

Collapse
 
ashiqcseworld profile image
Ashiqur Rahman

IMO If someone doesn't build projects by himself and only watched and code along with those courses, he will never become a developer. because he watched someone else's already solved problems. He needs to solve the problem by himself in order to become a developer.
For example, after completing jonas's advanced CSS he could solve some challenges of frontend mentor, then only he can understand his actual progress.

Collapse
 
denisveleaev profile image
Denis Veleaev

Completely agree that the practice is crucial. 2 main things that are missing in practice-only approach are structure and best practices. I think we all know a lot of devs who learned only by doing and their code style is poor because of gaps in their knowledge and bad practices.

Absolutely agree that the only way to learn anything is a combination of practice and courses.

Collapse
 
manyorock profile image
Judith Ogar

Thank you for this piece.

Collapse
 
bytebodger profile image
Adam Nathaniel Davis

I believe you misspelled your title...

Collapse
 
justayush profile image
Ayush

Thanks for sharing 😊.

Collapse
 
corentints profile image
Corentin

Thanks!

Collapse
 
supportic profile image
Supportic