Frontend Developer roadmap with free resource

There are plenty of courses available for front-end developers or full-stack developers at $1000 or even more, but you don't need those to learn web development. You don't even need to invest a single penny to become a front-end developer. Here is how:

HTML, CSS:

These are the core basics of web development. Maybe you won't use them directly at the production level or maybe do, but you must have to learn them. Do not get into tutorial hell for these topics and don't try to do a Ph.D. on these. Learn the basic things from W3Schools or any other resource if you like, then dive into making projects on them. Go to https://www.frontendpractice.com/projects or https://www.frontendmentor.io or any other website, pick up a single-page website and start cloning that. You will learn most of the things you need to know while building these clones. Make at least 15 to 20 clone projects on only HTML and CSS from basic to advance. After that, you are done with HTML and CSS. You will be a master of these at this point and won't need to worry about them in the future.

CSS Framework/Libraries:

After mastering HTML CSS now pick up any CSS library. Currently, the most popular is Tailwind. You can go with that, or you can even go with Bootstrap or Bulma or something else. After picking a particular library, first, go to a basic tutorial video on youtube or find some articles on the internet. Get some basic knowledge about how that library works and then again start with some projects. This time, pick some more complex websites. Make at least 3 to 5 clones on this, and you are good to go.

Git and GitHub:

At this time you will have so many projects on your local device, but those were not for your local device, you have to showcase your projects to the world, and for further learning, a version control system will be very important for you. So it is the best time for you to learn Git and Github. You can find tons of courses to learn this, but here I will give links from 2 of my favorite channels:

JavaScript:

JavaScript is the most important thing to learn for your front-end developer journey, so give yourself as much time as you need and learn it in the best possible way. First, pick up a beginner-level course from Youtube or Udemy. Here are some of my suggestions:

In this period you have built as many projects as you can. It will sharpen your knowledge of JavaScript. Play with DOM Manipulation, build different kinds of projects and then when you feel a little bit comfortable about JavaScript then watch this playlist Namaste JavaScript. It will help you to understand how JavaScript works under the hood and also prepare for the interview. This is one playlist that you need to keep with you always if you want to make your career with JavaScript.

JS Framework/Libraries:

After being enough confident with JavaScript, now dive into a JavaScript library. Currently, the best options to choose from will be React or Angular. Pick any one from these and start mastering it. You will get hundreds of courses on Udemy for React and Angular, if you want to purchase anyone from it then do a little research about that, see the reviews on youtube and search for the feedback on youtube, you will get reviews of most of the popular Udemy courses on youtube. Watch them and choose what is suitable for you. Here I will share links to some free resources.

React:

Angular:

Conclusion:

After Learning a JS framework properly, you will become a front-end developer. Now You can get some basic knowledge about the backend and that will help you in your career. Build more and more projects, that's the only to learn more. Don't fall into the trap of tutorial. Pick one wisely and stick to that. Watching hundreds of tutorials will not make you a better developer, building projects will do.

Roadmap with Resources for Front-end Developer

Table of contents