THE COMPLETE WEB DEVELOPMENT ROADMAP 2021

Photo by Pakata Goh on Unsplash

Welcome to the Complete Web Development Roadmap 2021. In this article, we will be going through how you can start your journey to become a Web Developer. I have also linked some of the best resources I know, so you can get started today itself.

INTRODUCTION

What is Web and how it works ?

Web is a “universal linked information system” which can be accessed through the internet. While internet is a network of computers connected to each other through a medium.

Web contains a lot of books, magazines, newspapers, and other media so-called Websites. These websites are developed through technologies like HTML, CSS and JavaScript (i.e. Frontend Development). Also these websites can only be accessed through a web browser and are served to them by a server (a special type of computer with large storage options and built to run 24x7). To serve these websites we need server side logic/programs which falls under Backend Development of the Web.

What is the process of developing a website.

1. Design — Designing how the website will look and feel before developing it.
2. Develop — Development is the process of building a website/app with programming/coding. Frontend Development is implementing the design by building HTML documents with frontend technologies. The logic for serving those HTML documents to the browser and handling how the website responds to everything is Backend Development.
3. Test — Testing is checking the functionality of a website and making sure it works as it is supposed to work.
4. Deploy — Deploying consists of putting the program/code/logic of both frontend and backend to a server, so it can be accessed by everyone on the Web.

So to conclude, everything you see on a website, the way it looks, the fonts, colors, the layout etc is Frontend Development. And all the logic behind the website to serve it to a browser through a server, adding different functionality to the website, making it personalized is Backend Development. Also, the website is designed without any code before developing it and is tested after development. And then you repeat the cycle again, design — develop — test — deploy.

These are the sections you have to focus on are

1. UNDERSTANDING OF WEB
2. VERSION CONTROL
3. FRONTEND DEVELOPMENT
4. BACKEND DEVELOPMENT
5. GETTING RESULTS

The below roadmap shows the technologies you should know and with specific important topics you shouldn’t miss at all.

WEB DEV ROADMAP 2021

Order to learn everything in

1. HTML, CSS and JavaScript
2. Bootstrap / Tailwind CSS
3. Terminal Basics
4. Git and Github
5. Node.js and Express.js
6. PostgreSQL and MongoDB
7. REST API
8. React and Redux
9. SASS

UNDERSTANDING OF WEB

Understanding the web is important, there is so much jargon in Computer Science not to forget 10 technologies to do the same things. Hence, it is important to understand your track. I love JavaScript but maybe you might like python. Maybe you don’t want to commit to being a web developer yet, maybe you like databases or anything else. This is the reason I like to suggest people to go through the Introduction to Computer Science — Harvard’s CS50 course. It is around 15 hours, but you learn a lot about Computer Science core fundamentals like computational thinking, data structures, algorithms etc and a mix of many technologies like C, Python, SQL.

I still think it doesn’t align very well with my roadmap but still if you have trouble understanding Computer Science or you don’t know where to start. This is a very good place to start as Professor David J. Malan will give you one of the best introduction to Computer Science.

VERSION CONTROL

What is version control?
Version Control is a software/system responsible for managing changes in a program.
Here you have two most important things every developer must know

1. GIT is the most widely used version control system used by many developers to manage their projects. It is easy to learn yet could save your life at times.
2. GitHub, millions of developers and companies build, ship, and maintain their software on GitHub. You can share your work, collaborate with other developers, use and look at open-source projects from companies/developers around the globe.

A good resource to understand git and GitHub is here.

FRONTEND DEVELOPMENT

A front-end developer architects and develops websites and applications using web technologies i.e. HTML, CSS, DOM, and JavaScript

1. HTML (Hypertext Markup Language) is the most basic building block of the Web. It defines the actual content of the page.
2. CSS (Cascading Style Sheets) is a stylesheet used to describe the layout and styles of a Web document.
3. JavaScript runs on the client-side of the web, which can be used to design/program how the web pages behave on the occurrence of an event. JavaScript is easy to learn and also a powerful scripting language, widely used for controlling web page behavior.
4. Frameworks aim to facilitate software developments by allowing designers and programmers to devote their time to meeting software requirements rather than dealing with the more standard low-level details of providing a working system, thereby reducing overall development time.

• HTML, CSS and JavaScript

HTML, CSS and JavaScript are the foundation of Frontend Web Development you are going to use these every day if you are doing any kind of Frontend Development. I would suggest spending most of the time here. People are really keen to jump into Frameworks like React, don’t underestimate the power of HTML, CSS and JavaScript. Build some webpages with them, then go to advance stuff like complex responsive layouts, animations etc. I really think if you know them well it could also be enough to land a job.

Here is a good playlist covering all the basics to get started with HTML, CSS and JavaScript.

• React and Redux

React is a JavaScript library for building user interfaces. It is one of the most popular web frameworks assuming jQuery doesn’t exist.

I highly recommend learning React, at first, you will hate it but once you start using it there is no going back. I use React in almost every project now, yes there are alternatives like Vue.js which are good and quite popular as well, but I think React is still the way to go as it still is the most popular framework (if you like to call it one) assuming jQuery doesn’t exist in 2021.

Also, most of these frameworks are very similar in how they work, so you can learn one and pick the other quite easily.

Redux is a state management library for JavaScript Apps. It might not be the best solution out there but Redux is the go-to state management library with React, you just cannot ignore it. Some good alternatives are recoil.js and Context API but it totally depends on the projects you are working on.

React can also be very confusing and a lot to take in at first, take your time with it. Here I would like to suggest a full course on React by Academind.

Stack Overflow Developer Survey 2020

• Bootstrap and Tailwind CSS

Tailwind CSS and Bootstrap are CSS frameworks to help you build modern websites quickly. I recently got into Tailwind CSS and I just love it. CSS is fun, but sometimes I just need to get things done quickly. You don’t have to learn everything offered by these frameworks but if you plan to use them frequently they can be very useful.

I would say Bootstrap is very easy to learn and here is where I would leave you without giving any resources. Just jump into Bootstrap and Tailwind CSS Documentation learn to find what you need. As a developer, you have to learn to read documentation and figure things on the go. You cannot and should not expect to watch a 20-hour course on every technology you have to work with.

• SASS

SASS is a CSS Preprocessor, an extension to CSS to make it feel like a programming language. It has a ton of features that make it easier and faster to work with CSS. It is a nice to have and is helpful for faster development on large scale projects. But I think this video should be more than enough to get started.

Let's have a break here and just appreciate yourself to have a dedication of doing all the things you did. Now you can easily start building serious Frontend Projects which can help you stand out. Start building your portfolio, apply to frontend developer internships and jobs. Don’t get scared of job description, if you even meet 40% of requirements just apply worst case you get ghosted which can also happen if you meet 100% of the requirements too. You got nothing to lose just keep applying to take feedbacks and interviews, all this would lead to you getting better at presenting yourself and interviewing.

BACKEND DEVELOPMENT

I really believe in being a master of one, frontend development can take you so far on its own. But then there is Node.js, a JavaScript runtime. Giving you the option to for using JavaScript on Server Side. Now you can use all the same concepts you learned in JavaScript and apply it to the server side too. Being able to work on both side of the Web can open a lot of more options for you than just looking for a Full Stack Web Dev Job.

Front end development involves what a user sees on the screen when they open a specific URL owned by you. Even in a completely static environment (with only HTML/CSS), when someone opens a website, some server on the planet needs to respond to you with those HTML and CSS files.

That server is just a computer, just like the one you use yourself to browse the internet. But it has been tuned for performance, and doesn’t have unnecessary components like a mouse or keyboard attached. And it sits with tons of other computers probably in a data warehouse.

Programming those computers in some special way is called back end development.

Here I would suggest learning the following technologies

• Node.js and Express.js, both of these technologies will help you write server side logic for your web apps.
• MongoDB, a NoSQL database which is also used with this tech stack. (MERN STACK)
• PostgreSQL, a SQL database which is used very frequently with the Express.js, React and Node.js.
• REST APIs, Rest is a set of principles/conventions to be followed while building an API. It just make it easier to work with other developers and keeps things in a structured format.

To learn all these topics, I would again suggest a course by Academind, backend development can be overwhelming for some people as they see all terminal videos setting up databases and programming languages. I have given a flow at the top in which I describe in what order should you learn these technologies so it is a little easier for you.

I think now you can start calling yourself a Full Stack Developer. There is still a lot more stuff to learn but being a developer you will never stop learning. A full stack developer is expected to know a lot more but let's be honest Full Stack role as your first job is a very unlikely scenario.

Also these are 100% my thoughts on how I would have done my learning if I got another chance. You might not like it and that’s okay read this and other 50 articles and craft your own way.

GETTING RESULTS

I really think you can boost your results by

• Portfolio

I would say have 2–4 good quality projects rather than 15 todo apps. Its about quality not quantity.

Any projects with professional UI, databases, CRUD functionality, following RESTful conventions, Authentication, Authorization etc are good. I’m not saying do it all, just make sure what you do is according to Industry Standards, small thing like using different database for development and production can impress an interviewer.

Please do not mention exact code along projects from tutorials, learn from those apply that knowledge to something new. A project from these tutorials are mentioned in many resumes and it is a high possibility that interviewer might have seen that one before. Atleast add features to it make a new better UI, adding functionality to the app and making it your own is better than having the same exact project on your resume.

• Experience through Internships, Open Source Contribution and Freelancing

These are very vast topics on their own on how to get internships, contributing to open source and freelancing. Plus I might not be the best person to guide you in this part as I’m still exporing and haven’t been a part of major 3–6 months long part/full time work yet. But I really think there are many resources out there to help you with it

Finally now you know a lot about how to get start with learning web development. Also again these are my personal opinions on the industry right now, take everything with a grain of salt.

I hope you will become a web developer some day, Happy New Year!