One of the mistakes beginners make is jumping from one language to another because they do not know where to start from. A roadmap will give you a sense of direction and reduce unnecessary distractions. Imagine trying to learn 3- 5 languages at the same time because that is ‘what is popular’. That is not how to stand out in the tech industry! A learning roadmap is very important and should be overemphasized. I can remember when I recently started out in tech, one of the things my friend did for me was to draw out a learning roadmap for me and it was one of the factors that contributed to my growth. The frontend development learning map is not vast although might look complex. If you take it one step at a time it will not be overwhelming. Below is the learning roadmap, with love:
1. Build a good foundation on general knowledge:
since you will be building websites, it will be nice to learn about the Internet, how websites run e.t.c. It will give you an idea of why things are done the way they are done.
2. Start with the Basics:
The three major technologies in front-end development are HTML, CSS, and Javascript. 90% of the websites that we use on our phones and laptops are made with HTML, CSS, and Javascript. Why do we need to start with Html, CSS, and Javascript? Let me use this analogy:
This building has some structure that is what the HTML is used for. It is plain and ugly and used to give structure to the websites.
The CSS is for aesthetics like the picture above. It gives beauty to a website, makes it more appealing to the eyes. Next, Javascript is for functionality. You press the button of the elevators and they open. The button here plays the role of Javascript.
3. After learning the basics, learn libraries and frameworks.
Examples are Angular, Vue, React e.t.c. Libraries and frameworks make your work faster and easier. React is a library and not a framework. The difference between libraries and framework is libraries do not force your applications into a structure while frameworks force our application into a structure. For example, bootstrap is a CSS framework and any project that bootstrap is used on it is easy to tell because of the way they look and their functionality.
4. Learn how to use Git:
Git is the most popular version control system in the world and is used in 70% of software development. Git is used for tracking our project history and work collaboratively with others that is why you will see it almost in all job descriptions. There are several version control systems but it is advisable to learn Git because it is popular.
5. Learn a CSS preprocessor:
CSS is an old language and it is not sufficient to use for a very large project because once you want to change things in your code you end up running into a bug and can be very overwhelming. The CSS preprocessor makes your work faster and easier. There are many CSS preprocessors but it is advisable to learn SASS because it is more popular. If you follow this roadmap religiously for a year, you will be able to apply for a junior frontend role. Starting frontend development and do not know which resources to start from? Click here