Frontend Guide (beginner friendly roadmap)


In this blog I want to share with you guys the way I would learn frontend development if I was in the beginning of the journey.

Hope you guys enjoy following me through each section below!

What to learn?


If you guys researching about the frontend development I assure that you gonna see this language is the main thing you gonna need and is really important to know how you gonna learn it from the beginning.

And in this blog I want to say that you should beginning in pure functional, logic, syntax learning only in javascript and temporary stay away from HTML or CSS because if you not spend enough time on JS other things gonna make you lost all the way about what is the true programming ways.

Knowing html and css at soon at possible is good but it is not compulsory to know it before you learn JS.


After about 1 week or you can say around 10-20 hours I think that you can remember about the syntax or data type, what is a variable, a function, etc…

If you can answer those questions I think that you are ready to learn some basic about html and css to interacting with your simple website and use JS to put some logic inside of it.


After 2-5 months, around 300-500 hours learning in demand I would recommend you to find a framework if you can answer some simple question about hoisting, arrow function, data types and can write JS fluently by JQuery, etc…

And if you already in this stage I believe that you must have heard about React, Angular, Vue, ….

Later in this post, I will only discuss about 3 of the most popular framework at present. And if you would like to discuss about other frameworks you can check it out on my other blog at

Backend Development

Yup! I know it look so weird to place this heading at here but believe me, either you go frontend or backend dev you still must know what they doing from the front to the back right?

If you want to be a good frontend developer I assure that you also must know what they doing in the backend, so that after learning and having a work as frontend dev you can co-op with backend dev as smooth as your knowledge about their workflow.


Finally, git nowadays is already a compulsory tools for developers. When you get to work, you not gonna build anything great on your own, a good application always go with improving it non-stop and refactoring or discussion to give the application a new feature, etc…

All of the issue I mentioned above is require you to always work as a team with your co-workers.

And Git is making it so easy to maintain your source-code from small to the biggest business or development team you in.

How to learn frontend?

Frontend Roadmap

You can save this roadmap or go to google the phrase “frontend roadmap” and it gonna give you the complete guide to start your journey, you can get along with any roadmap but here is a few suggestion from me of how to proceed these guidances.

Always code along even if it a video or blog tutorial.

You can always stop somewhere along the journey and dive deeper in some function/ component or object that you met on the way.

There are plenty of tutorials on the internet already so I think that you no need to pay for anything if you are not suitable for the fees especially when you are a beginner.

Remember to put all of your work to the internet to make sure after the learning process people can see it on your git profile and be impressed about it!

Take rest, yes! It always feel overwhelming for me to learn new technology but come with it always a interested feeling when I get it and to complete a tutorial you always need to take rest along your journey.

And to choose a good tutorial, I have so many resources and I really cannot recommend it here since I believe that we have to find our favorite bloggers or youtube channels by ourselves to really love it, haha…


If you have any question or need a person to get along with you on your learning journey, do not hesitate to comment below or contact me via [email protected]

Thank you for being here and I hope to see you soon in our career paths somewhere later!

Leave a Comment

Your email address will not be published. Required fields are marked *