DEV Community

Cover image for Frontend developer roadmap for beginners
Krisztián Maurer
Krisztián Maurer

Posted on

Frontend developer roadmap for beginners

Image description

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.
Maurer Krisztián

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).

Maurer Krisztián

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.

Maurer Krisztián

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.

Maurer Krisztián

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.

Maurer Krisztián

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.

Maurer Krisztián

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

Maurer Krisztian

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.

Image description

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

Top comments (6)

Collapse
 
rickdelpo1 profile image
Rick Delpo

Learning Javascript is key for the beginner but u can easily be way over ur head quick if u dive into React right away. Plain Vanilla Javascript is the way to go initially, get a grasp on this first then move to React. I think React is overkill for beginners but it seems to be a 'must have' to get a job.

I wrote a piece on 17 reasons why I chose Plain JS over React.
click here dev.to/rickdelpo1/react-vs-plain-j...

Collapse
 
exequielhb profile image
Exequiel Herrera

in the country I live they try to handle all the technologies they can (halfway) and try to apply to their first job, I think it is essential to always know these technologies in some depth before fully immersing themselves in looking for a first job, without forgetting the soft skills, great article :)

Collapse
 
maurerkrisztian profile image
Krisztián Maurer

Thanks! I agree. Effective communication is important skills because most of the time we work with a team. If someone Self-taught they can practice communication at open source projects or by writing articles, or by helping other less experienced developers I think.

Collapse
 
mmvergara profile image
mmvergara

that step 1.1 image had me dying lol

Collapse
 
monicamegarcia profile image
Monica M. E.

I have started for step 5. thanks!

Collapse
 
pleasebcool profile image
pleaseBcool

Totally agree with 1.2, git and github are probably the most important things for a developer.