Frontend developer roadmap for beginners

Frontend web development is the best starting point for a beginner. There are many job opportunities and you can quickly achieve a sense of success as you learn new things. In the following, I will explain how I think you should progress with learning as a beginner.

I strongly recommend project-based learning and consistency.

Each step deserves a separate article, but I tried to give an outline.

Step 0:

Decide if you really want to be a programmer.

• Can you sit in front of a computer for 8 hours a day?
• Are you interested in this topic?
• Do you like learning, and making stuff, experimenting with tech?

If you only do it for the money and you find no joy in it, sooner or later you'll burn out before you even get to a junior level.

Step 1: Basics

What are programming languages? How does the web work? Search for learning materials on youtube, udemy etc.
look for learning communities.

The basics of all programming languages are similar, if you are good at one, you will easily learn other languages, don't start with more than one programming language at the same time and if you want to develop front-end applications the best option is Javascript. (CSS, HTML are not programming languages).

Step 1.1: HTML, CSS

Learn what is html and css, create designs, and do small projects with them.

Google is your friend, one of the most important skills is Google search and autodidactically learning. Asking the right questions.

If you feel stupid, don't be discouraged, this feeling will always remain, just on a different level, get used to it and keep going.

Step 1.2: GIT & GitHub

Now that you've started programming, get to know Git and Github as soon as possible because you'll be using it at work on a daily basis.

Look at your Github as a secondary portfolio, It stores the code of your projects. It will play a big role when you apply for your first job.

Create a Portfolio website with your HTML CSS knowledge, write about yourself and later put your projects there with a description and GitHub link. You can easily host it with the help of GitHub pages.

If you already know how to write an HTML CSS page, create 2-3 small projects that you can implement and host on Github pages.

Step 2: Javascript

This will be the most difficult part, if you have a good understanding of javascript, you are more than halfway to success. Give yourself time, it's not easy, learn the basics, practice.

• Familiarize yourself with the language and syntax (var, let, if, for, while...)

• Try to combine what you have learned so far with an HTML,
  Add Javascript to an HTML CSS website. Learn DOM manipulation.

• Learn some basic algorithms

• Create projects continuously, small games, e.g. calculator, word games, quiz, etc. come up with something of your own and make it happen from simpler to more complex, don't start with a Twitter clone.

Step 2.1 HTML CSS JS projects & Google

Once you've mastered the basics, let your imagination run wild and try creating projects with the help of HTML CSS Javascript.

Learn how to teach yourself when you need something, how to find the solution to your coding problem. You will use this skill on a daily basis at work, no one knows everything, even the senior programmers google basic stuffs sometimes. The point is that with the help of Google you can look up and use the various materials, find a solution and create value, you don't have to memorize everything.

Step 3: Fronted framework

Find out what is the most popular frontend framework in your area, (React or Vue, or Angular..) If you cant choose pick React.
Learn the different concepts, and explore the framework/lib.

Step 3.1 API

Learn about APIs: how you can get data and interact with different APIs.

Step 3.2 TypeScript

TypeScript is becoming more and more popular, which is basically just Javascript with types. At large projects, you can write code faster and extend easier with it, and also catch many bugs.. try it out. Most companies use it.

Step 4. Job search

If you've made it this far, you should already have a few projects to show off, choose the best ones, and put them in your portfolio. Write a project that you will be proud of, use a fronted framework (e.g. React HTML CSS JS-TS) and APIs. Submit your application as a front-end developer. Improve your portfolio projects while you find a job.

Step 5: Like this post.

Thanks for reading, I hope I could help! If you have any questions, feel free to ask in the comment section. :D