Best FrontEnd Developer Roadmap !

Best FrontEnd Developer Roadmap !

ยท

6 min read

Hey fellow developers! Hope you're absolutely full of energy & fire!!

Begin your Journey as a Front-End Developer!

There are many people like me exist who only know that they want to become a software developer/ software engineer and they do not know anything else , what to do & where to begin!!

Here Is your ideal Guideline for Becoming a developer.

Becoming a Software Developer is a Journey!

  1. FrontEnd Developer
  2. BackEnd Developer
  3. Full-Stack Developer

If you follow my path in sequence then you'll definately get a job in 5 month of learning. depends on you, how you approach my path as properly.

Things You need to start Coding?

  • Laptop: 4gb/8gb ram atleast with ssd prefereable .
  • good Internet connection.
  • willingness to learn.

Resources available to learn:

  1. freeCodeCamp
  2. Udemy
  3. Coursera
  4. LinkedIn Learning
  5. YouTube
  6. W3 School
  7. MDN

choose any of above and search for front-end development/ web developer. and you will see the result.

Software required to start journey with your coding:

  • install Chrome
  • Install VSCode
  • Install Git
  • Install Github Desktop
  • Install NodeJs

VSCode Extesnion that's have to required:

  • Pretify
  • Live Server

Alright, that's it. You're ready to rock.

Are you confuse about where to start & which language to learn?

Follow my all step & You'll never regret upon your time & learning.

step-1/ Signup LinkedIn

search a job in city where you want to do a job. try search term front-end developer/backend developer/full stack developer/ software engineer/ software developer.& you'll find tonnes of job and then notice and write down job requirements & what is in demand in your country/area.

step-2 Signup freeCodeCamp

start learning HTML. In case you do not know some thing simply google it or search in youtube.

step-3 Signup Udemy

Join any short course on HTML & CSS

step-4 Complete the course

after completing a course and freecodecamp you'll now all of the basics. so, now you are intermediate.

step-5 Clear Concepts

In case you do not understand any topic or any term search on youtube about it and watch the videos. Read it on W3School & practice it. Read on MDN & clear your concepts.

step-6 Roadmap

Roadmap which is work for me (May be work for you as effectively)

  • HTML
  • CSS
  • 5 Projects atleast using HTML & CSS
  • make your portfoilio using HTML & CSS (!Important)
  • Bootstrap (CSS Framework)
  • atleast 2 project using Bootstrap with CSS & HTML
  • Git & GitHub
  • push your projects to GitHub
  • JavaScript
  • make 4 projects with JS & push to GitHub
  • Refresh HTML
  • Refresh CSS ( Responsive web Design)
  • Tailwind CSS (CSS Framework)
  • make 3 project with use of tailwindcss

step-7 Hosting your Projects

Host your all projects which you've pushed into GitHub.

Best Hosting Platform for free:

  • Netlify
  • Vercel
  • GitHub Pages

note: I used Netlify & It is more preferable as well as suggested by expert. now, you have 15 projects for your showcase in portfolio. This all thing should completed within 2-3 months. now, apply for a job.

It is your best roadmap for turning into Front-End developer & able to get job by finishing it.

I know every person says same thing but They're all authentic via way of means of their location and that they already doing a job but only beginner know that what kind of trouble they are dealing with to begin and keep going.

Hey, you are lazy ?

Do you need some readymade Roadmap and all resource to walk and by that finishing you become a developer ? right?

Right here I'm sharing resources that are made by Expert Developer. and by finishing any of this course you'll become a front-End developer/ full stack developer.

First thing is If you do not use Notion then Install Notion app on Android/Ios device and signup.

Becuase all resources hyperlink is available in Notion.

Front-End Developer Roadmap 2021

Become a web developer without spending a penny

Clear cut full stack developer roadmap

A complete web development cheat sheet

A complete web development resoources

This all resources are the best. Pick any one of it. Give your best to complete it. If you complete any of it then you'll become web developer in no-time.

Pro-Tips:

  • don't go slow , go fast. do not procastinate. code together along with your tutor.
  • code at the same time as looking your tutorial. different people have own different techniques to learn but you should observe your pattern & find yours.

Usually, I code alongside the educate and notice the end result that im getting the end result that's proven in display as identical.

so, like that. undestand yoursellf, would like to code at night time or early morning or during day?

do you like cofee during coding ? do you like lofi music during coding or full-silence. try different things and find out what's suitable for yourself. life is all about figuring out.

Pro-Tips to avoid Burn-Out while learning coding:

  • Make an excellent Schedule & notice it down in your diary.
  • begin with early morning 05:00 AM
  • go for a run & do exercise & do meditate
  • 05:45 AM: come back home take a shower
  • 06:00 AM Start Coding
  • make your own schedule with your suitabillity
  • at night time sleep at 10:00 PM
  • before sleeping meditate for better sleep.

Why Meditation?

You watch the tutorial and after watching you try to code by yourself. Meditation do assist your mind to retrive more information without problems and assist your thoughts to calm & control over your thought process and additionally assist you to get better sleep at night time. Only 10 Minute of meditation make you a lot better in long term.

Pro-Tips:

consistency is a key. If you do Any of above things & If you are now no longer consistent then you may now no longer see any precise end result. Be like a warrior. If stay lazy & If you do not work serioulsy then you are decieving to youself. you are dishonest with yourself. Tomorrow does't exist Only Today Exist.

Now is the Time

Now, go and code some HTML, CSS & JS.

Note: This Guide is only For Beginners.

Note: Notion resources are made by experts & don't forget to appreciate those people. You'll found rest of your answer in this resource.

Thank you for reading If you like my blog then you can follow me on Twitter and comment down your amazing thoughts rights here.

Did you find this article valuable?

Support Avinash Vagh by becoming a sponsor. Any amount is appreciated!

ย