In this article I will be giving you a very well detailed explanation of various languages and tools you need to know, as well as a proper learning path and suggestions on how long it will take you to learn this.
There are some many languages and tools out there HTML, CSS, JavaScript, Typescript, Java, C# (pronounced as C sharp), C++, PHP, Python, React. If you have been so confused you are not the only one. In this article, I will give a clear learning path. One of the mistakes that beginners make is that they waste so much time jumping from one place to another and they do not learn anything properly.
FOUNDATION
To become a front-end developer, you need to start with HTML, CSS and JavaScript, these are the fundamental languages for a front-end developer. You use HTML to structure the pages, use CSS to make them beautiful and JavaScript to program them. Let me make an analogy, think of a building and the building is like a web page on the internet, CSS can be the beautiful walls, windows and tiles, while Javascript is for example, when you press the elevator button, it comes to pick us up. Every web pages on the internet are built with those three languages.
FRONT-END FRAMEWORKS
Building website includes a bunch of repetitive tasks, this is where front-end frameworks and libraries come. A framework or library comes with a lot of codes we can reuse in our websites, so they help us get the work done faster. That is why a lot of companies this days use one of these popular frameworks like React, Angular or Vue. And more accurately, React is not a framework it is a library. The difference between a Framework and a library is that a Framework forces our application into a structure, all applications works for the framework like Angular ends up having a similar structure. While, Libraries do not force our applications into a structure, they just provide a tool for us to reuse. React, Angular and Vue serves the same purpose. They help us build applications faster. You do not need to learn all of these to get started, out of all React is the most popular tool, it is built by Facebook and it is used to build Facebook and Instagram, I will advise to go for React.
VERSION CONTROL SYSTEMS
Version control system is used to track our project history and work collaboratively with others that is why you will find it in almost every job description. GIT is the most popular Version control system in the world and it is used in 70% of software development teams.
CSS PREPROCESSORS
A CSS preprocessor is a program or tool that let you generate CSS code from different language that is better and more capable than CSS. Instead of using the old plain CSS, you use another language very similar to CSS in fact it is almost identical but has some extra features, then we give our codes to CSS preprocessor so it get converted to the old plain CSS code that all browsers can understand that is the purpose of CSS preprocessors. They are many preprocessors such as SASS, LESS and Stylus to name it few. My suggestions to you is to learn SASS because it is the most popular CSS preprocessor.
LEARNING PATH
To get your first front-end development job, First you need to learn HTML, CSS and JavaScript. I will say if you spend 3-5 hours a day studying and coding you should be able to know the fundamentals in three months. You need to learn a front-end library or framework like React you will need like one or two months to learn that after that you should be able to learn a version control systems like GIT and you should learn preprocessor like SASS and Typescript.