Roadmap to become Web Developer in 2021

If you are a total beginner to web development and thinking to dive deep into web development then you are at the right place. I am damn sure at the end of this article you will be having a clear picture of **Where *to Start, *What *to study, and *How **to study.

⚠ If you already have some exposure to web development then I will recommend you to visit roadmap.sh. It contains a detailed analysis of stacks to become a web developer. Also, you can read about my ***Story of Transition to the Senior SE role***

Before diving into where and how let’s understand WHAT?

What is Frontend? What is Backend? What is Full-stack? How these are co-related? Find answers to all your questions here.

Hope now, you understand **What **is web development. Let’s understand from where we can get started with these.

Concisely to become a full-stack Javascript developer, You need to accomplish these in the sequence. I will discuss these in detail as we go along in this article.

step 1: learn HTML
step 2: learn CSS
step 3: learn CSS Frameworks (**e.g.: Bootstrap, Tailwind etc.**)
step 4: learn JavaScript
step 5: learn nodejs / expressjs **(or, Hapi, KoaJs, fastify, NestJs etc.)**
step 6: learn sql / nosql **(mongodb, PostgreSQL etc.)**
step 7: learn react / vue / angular
step 8: go back to step 4

🏆 congratulations, you are now a full-stack developer.

Now, let me start to discuss one at a time, what and from where you need to learn to get started in these tech domains. Some may argue, why not React/Vue/Angular first and then Node/Express. My take on this: You are free to do so but since all these front-end frameworks/libraries are dependent on package manager so why not learn Node first.

HTML -> CSS -> CSS FRAMEWORK (e.g.: Bootstrap, Tailwind)

HTML: Hypertext Markup Language is the standard mark-up language for documents designed to be displayed in a web browser.

Must know topics: What is HTML? Anatomy of HTML Tag, HTML Document Structure, Essential HTML Tags, HTML form.

CSS: Cascading Style Sheets is a style sheet language that explains the presentation of a document written in a mark-up language like HTML.

Must-know topics: What is CSS? Anatomy of CSS, CSS Selectors (Element, Class and ID), Combining selectors, Pseudo selectors, CSS Specificity (Conflict Resolution), Box Model and Layout, CSS Grid, CSS Flexbox, Relative vs Absolute element positioning, Box Model, Media Queries (Responsive design using CSS).

CSS FRAMEWORK: It is a CSS framework to ease the design process. These are free and open-source CSS frameworks directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Eg.: https://getbootstrap.com/, https://tailwindcss.com/

JAVASCRIPT

It is often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. It is high-level, often just in time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object orientation, and first-class functions.

In JavaScript, there is a lot to learn, so instead of mentioning topics, Now, I will recommend you the courses, which you can follow and get comfortable with. You can visit the **javascript.info **website for detailed and well documentation of JavaScript.

Courses you can follow for getting started with HTML, CSS & JS.

It is one of the brilliant courses available to get started with web development. Here, you will get to learn HTML, CSS, Bootstrap, JavaScript, and AJAX. You can apply for financial aid or you can simply audit the course.

Over here, I will suggest you complete until SECTION 20 (To DO Lists Project).

Once you are done with the above-stated course, then now is a good time to dive deep and know all about JavaScript & **its architecture.**

The perfect and complete course, which helps you to understand every nuke and corner of JS. This course is a perfect combo of project-based learning as well as a deeper dive into the why and how of JavaScript.

you can refer to this video and playlist for getting started with JS. [FREE]

JavaScript ES6, ES7, ES8 - https://www.youtube.com/watch?v=nZ1DMMsyVyI&ab_channel=freeCodeCamp.org

also, there is one ongoing course from Akshay Saini which discussed architecture and behind the scene of JavaScript. [**Namaste Javascript**]

**Optional: (Now is the good time to revise whatever you have learned.) I will recommend you to visit freecodecamp and complete the projects of **Responsive web design certification **to get the certificate; if you feel stuck, you can definitely go through the tutorial provided there.

Once you are done with these above, now is a good time to dive into the framework/library.

NODE -> EXPRESS -> MONGO-DB

For Backend, I will recommend a single course. Also, you can study each topic in detail by following a separate tutorial for each.

This course is a top-rated course on Udemy. This course has beautifully covered all the essentials of the Backend covering NodeJS, Express JS, Mongo, and Mongoose along with Unit Testing.

you can refer to these videos and playlists for getting started with Node.JS [FREE]

FRONTEND LIBRARY/FRAMEWORK (e.g.: React, Vue, Angular):

I will provide the links of course which I found amusing. I, being a MEAN stack developer, have experienced Angular & React courses myself and for Vue, I have taken opinions from my friends working with Vue.

Note: Which frontend framework/lib to choose?

Seeing the current market scenario, React is the first choice but at the same time, Vue JS is rising slowly and is expected to surpass React totally. Earlier Angular was at the top, not anymore. However, it does not matter which framework you know, once you are comfortable with any library or framework then you can easily pick others too. For more analysis on what to choose, you can search and find many helpful articles. The major difference between the different stacks can be found here. And if you just want to know individually what they are, that you can see here.

ANGULAR

Angular — The Complete Guide (2020 Edition) - https://www.udemy.com/course/the-complete-guide-to-angular-2/

It is one of the most comprehensive courses on angular. It is actually a bit too many details sometimes but better be safe than sorry.

Or,

you can follow this to quickly get started with Angular. [FREE]

Vue JS

Being one of the highest-rated courses on Udemy taught by Maximilian Schwarzmüller, I can undoubtedly say, Go for it. He is one of the BEST instructors present in the tech industry.

you can refer to these videos and playlists for getting started with VueJs. [FREE]

or,