RoadMap to Web development

:=>
When I started my Web-Development journey, getting overwhelmed by so many topics is what I used to face all the time, there is always something new that I have to learn while having no idea about what I should learn. I can assure you must have faced this issue if you are getting started in Programming or Web-Development, so I decided to prepare a roadmap for beginners who are looking to get into Web-Development, from my own experience I can assure, it gets harder if you have undecided goals about what you need to build with your skills, so make sure you always have a proper goal about where you want to apply these skills, otherwise, the learning path never ends for a developer.

How The Internet Works

You don’t have to get into the deeper concepts of the internet to become a Web-Developer, all you need is a basic knowledge of how things work under the hood to make your learning path more practical. Otherwise, you will be writing code with no idea about how is it going to perform in your application.

You can think of the internet as pair of computers, running 24*7 to provide services, any kind of web application or website has to access a server or a memory where the files are stored related to that application.

Note: There are many other terms that you should learn such as Ip Address, Gateways, Cookies, etc.

• HTTP/HTTPS: Hypertext Transfer Protocol is the main method through which the data of web pages are transferred over a network. As the web pages are stored on servers, which are then served to the client computer as the user accesses them. But there is an issue with HTTP being less secure which easily gives access to third-party attackers stealing the data. Due to this security issue, later after HTTPS was introduced. In the case of HTTPS, it requires a secure certificate from a third-party vendor to secure the connection and verify if that site is secure. This secure certificate is called SSL (Secure Socket Layer), it simply adds an extra layer of security for sensitive data that we don’t want someone to access easily (most of the time third-party attackers).

• DNS: Among web developers, DNS is one of the least understood concepts of the internet, DNS is quite important to understand for Web-Developers as it is the glue that links your domain name (yourwebsite.com) to your website which is hosted on the internet & it stands for Domain Name Service.

In simple words we are talking about the ability for users who are browsing the internet at your web address to be directed to the IP Address of the server that is hosting your website.

• Hosting: Web hosting is the process of providing a space, where all the content of your website has to be housed on a server so that anyone can access it all over the world. You don’t have to deep dive into the concepts of hosting these days, as there is plenty number of platforms where you can host a website within a few steps.
• Browsers: As a web developer, you should know how browsers work with a web application, having a good knowledge of browsers unlocks more ways to optimize your applications, which results in more reliable applications so that users on various browsers can have the best possible results.
• Domain Names: You can call it a web address to your website, so anytime a user enters that address in their browsers they will be redirected to your website. If you want to read more concepts of how Domain Names work, here is an awesome article for that.

Basic Tools

1. Terminal

Every developer should master the ecosystem of terminals tools, when I started programming the biggest problem that I used to face is having no idea what to do with the terminal, so if you are getting started into web development it is highly recommended to learn how the terminal works on different machines.

On macOS and Linux-based machines, we have the bash terminal, which is the most loved terminal among developers yet as it serves the best package of tools with no compatibility issues, and if you have Windows OS on your machine then also you can access that workspace of UNIX through WSL2 (Windows Subsystem For Linux), using WSL2 you can virtually use a UNIX based environment in your machine and get the work done most effectively.

From my own personal experience, you will be having a lot of issues in the case of the Windows OS terminal, as there are some tools that doesn’t support in Windows OS terminal, so I highly recommend you to install a WSL environment before getting started.

My WSL2 Environment

There are a lot of advantages if you use a WSL environment, as you can install tools such as zsh and the autocomplete plugins.

• Bash: You will find bash as your most useful terminal, as it’s highly customizable and supports awesome plugins, most of the time you will find it hard to work without UNIX commands if you are not using a bash terminal.
• Git Bash: Quite frankly I don’t use the Git bash as much, but that’s a whole matter of preference, Git bash provides a UNIX-based environment on Windows OS machines when we install Git.

2. Desing Tools

• Figma & Adobe XD: You will be using a lot of design tools to make wireframes or just to build a preview of your applications, Figma & Adobe XD both work pretty well, but it’s recommended to use Figma as you can access it on any device & and all of your files are stored on the cloud, so you don’t have to worry about the files and changes that you made.

3. Text Editors

There nothing much you need to know about text editors before getting started, as all the tools and plugins that you need are just a part of your learning path, also there is no need to get familiar with any deep stuff about text editors, the most loved text editor VS Code is recommended from my side as it offers the best tools & its very lightweight. But text editors such as Atom & Sublime Text have special support for web development, you can choose any of the 3 text editors but make sure that you stick to only one until you are familiar enough with IDEs.

HTML

Learning the root of any skills is most important in programming, if you have no idea bout HTML and how its shapes web application then it will be just as similar to working with doubts, also you don’t have to completely master HTML to be a web developer but that’s a skill that you should know as a web developer. Learn the basic of HTML and the following concepts :

• Forms & Validations: These days we don’t use core HTML for forms with validations in our applications, there is plenty number of external libraries built by developers & where we can build beautiful forms with validation within few steps and much lesser lines of code. But in case our application is very lightweight to use, we should learn HTML forms & validations.
• Semantic HTML: The part of HTML that introduces the meaning of the web page rather than just representation. For example, we have a <p> tag which indicated that the enclosed text is a paragraph. The benefit of writing semantic HTML is that it provides a driving goal for a web page & it gives you many more hooks for styling your content.
• Best Practices: When you are done with the basics of HTML, make sure to apply some rules in your code such as using a meaningful title tag, and always declaring a doctype. Following these practices makes you a better developer who can manage projects better than anyone.

CSS

1. CSS Basics

• CSS Grid: It is a layout system in CSS that allows you to quickly create flexible two-dimensional layouts, it is not a framework or a library, you can use it to place, size, align layouts easily that were quite hard without CSS Grid when we have only floats and flexbox. CSS Grid is highly recommended to learn as a beginner if you are more focused on front-end development.
• Flexbox: A layout mode in CSS3, it is used to make the elements behave responsibly when they are used with different screen sizes, flexbox are almost everywhere in modern web applications they are more capable of handling changes when the application behaves in different manners. You can think of a flexbox as a container where you can render any kind of data that is valid inside the flexbox and using various flex properties you can manage the position of these containers.
• Custom Properties: Also called CSS variables, they are entities defined by CSS authors that contain some specific values to be reused throughout the document. The advantage of using custom properties in CSS is that you can make more complex front-end applications with clean code.

For example, lets say you have a complex web application to build, and if your UI contains some specific number of colours then you have to define them everywhere in your code, instead of that we can use custom CSS properties where we can store there value globaly and use them anywhere.

2. Modern CSS

Once you are done with basic CSS & HTML I would highly recommend building some web pages that force you to learn HTML & CSS in your own way.

Always work with smaller projects so that you don’t have to worry about learning the root concepts through your learning path.

• CSS Modules: CSS module is not an official implementation in the border but rather a process in a build step that changes class names and selectors to be scoped.

For example: The way CSS & HTML normally work is when a class is applied in HTML, as we have to apply CSS to the HTML document and the background color of <h1> would be red, this approach becomes a bit harder to maintain in case of huge web applications, but if you are using CSS modules instead of writing plain HTML, we need to write all of our markup in a JavaScript file, such as index.js.

• Styled Components: One of the new ways to work with CSS is styled components in modern JavaScript, you can call it a successor of CSS modules where you write CSS that’s scoped to a single component instead of leaking to any other element on the page. I would recommend learning styled components only if you are comfortable enough to work with CSS without any weak concepts.

3. CSS Frameworks

They provide a basic structure for designing consistent solutions instead of working from scratch

• Bootstrap: Among all the CSS frameworks Bootstrap gives the most promising architecture with enough customization options. Still widely popular among WordPress and Drupal users. There are plenty of reasons to choose Bootstrap rather than any CSS framework, especially if you are a beginner who has to work with frontend skills then Bootstrap is easy to learn as it offers fewer files for those who know how to work a bit with CSS and also provides the plain old CSS for who don’t want to use CSS pre-processing.
• Tailwind CSS: Tailwind is a bit different from other frameworks as it doesn’t have a default theme& there are no built-in UI components. If you are looking for a framework that comes with a predesigned widget to build applications then it might not be the right choice for you. I still personally prefer using Bootstrap as it provides a more easy way to build beautiful applications.

4. Responsive Design

As a developer one of the biggest issues is building a responsive user interface, as there are different screen sizes where your applications are going to be used, to solve this issue, there is a term called Responsive Desing which focuses on building user interfaces that perform flexibly on all screen sizes.

To build a responsive web application you have kept the following three terms in mind:

• CSS Media Queries: They give you a way to apply CSS only when the browser and device environment matches a rule that you can specify. For example, a viewport is wider than 500 pixels, media queries are a key part of responsive web design, also they can be used to detect other things about the environment of your application. All you need to get started with CSS media queries is basic HTML and CSS.
• Viewport: The visible area of web pages known as the viewport, back then when the web is only used on the computer the web pages were designed to have a fixed size, but later after that when we started using the web on mobile devices, developers started using viewports in web pages to make them behave more responsibly.

• rem units:

According to the W3C spec rems units are the computed value of font-size on the root element, when specified on the font-size property of the root element, the rem units refer to the property’s initial value.

5. CSS Preprocessors

They compile the code that is written using a special compiler, then they use that to create a CSS file that can be referenced by the main HTML document.

• Sass: One of the widely used CSS preprocessors, Syntactically Awesome Stylesheets, using Sass you can write your own code in CSS that will be faster and easier to maintain. For example, normally you must have used hex values for different colors with a lot of variations, so instead of typing those hex values you can just simply use Sass to store those values with a particular name, and later after that, you can use them anywhere in your build.
• PostCSS: A great alternative for CSS preprocessors, PostCSS is more focused on working with a blank state with many options according to your needs. I personally find PostCSS easier to work with as it is easier to set up and provides much extensibility.

6. Animations

• Plain CSS: Before you dive into CSS animation libraries, it’s better to learn basic CSS animation skills, such as defining keyframes for the animation. (keyframes hold what styles the element will have at certain times). Learning these skills won’t take much time as at this time you are pretty much familiar with CSS properties.
• GSAP: The GreenSock Animation Platform is one of the popular JavaScript tools for building animations on the web, whether you build responsive web apps, games: GSPA is always up to the task. Also, it is very beginner-friendly and delivers the control that professionals need which is the reason why it is used on over 8 million sites.
• anime.js: You will always find new animation libraries during your learning path, so instead of focusing on new tools and libraries work with the easy-to-use alternatives that deliver promising results. anime.js has been one of my favorites because of the compact structure with an elegant approach.

Front-End Developer Path

1. Learn JavaScript

Having a good and proper knowledge of the JavaScript concepts is a key to become a better front-end developer, if you are new to any programming language then start with:

• The basic syntax of JavaScript
• JSON
• ES6/ES7
• TypeScript
• Fetch API

and if you have some experience with any OOP programming language then you should focus on some best practices and tools to boost your JavaScript skills such as:

• Axios
• Dev Tools
• ESLint
• VS Code Extensions
• npm scripts
• Version Control Systems (Git)
• Package managers (npm or yarn)

2. Choose The Right Front-End Framework

• React: You can’t call React a web framework because when we build the application with a framework such as Angular and Vue our application structure is very defined and you can simply notice these structures in an Angular or Vue application but in the case of React which a JavaScript library to build UI components, its doesn’t force you to follow that pattern for building applications, and that’s the reason React is most loved by developers, the flexibility that you get with React is better than any web framework.
• Angular: The learning curve in Angular is pretty different and it is a fully-fledged framework, so if you want deep dive into concepts like TypeScript MVC pattern, directives, modules, decorators, services, pipes & dependencies injection then only go after learning Angular
• Vue: It provides high customizability and that makes it easier to learn than any web framework, but Vue overlaps with Angular and React for their functionality such as the working of components. It will be quite easy for you to start building applications with Vue as simplicity and flexibility are some of its biggest advantages.

Back-End Developer Path

1. Pick A Back-End Framework

• Node.js: It has been my personal choice for backend applications, it’s a perfect choice for a JavaScript developer who has less experience with any kind of backend development, also Node.js perfectly fits in the JavaScript ecosystem which makes it one of the most loved choices by developers. Also, Node.js offers the most promising performance when it comes to fast and scalable applications, which is the reason why the tech giants are moving their backend stack to Node.js.
• Deno.js: The reason I’m adding Deno.js to this list is that there are plenty of good chances that Deno might win the backend battle in 2021, as it’s been only a few years since it’s released and already it’s becoming the choice for fast backend applications, in comparison to any web technology Deno has been gaining the fastest popularity that I have observed.

Note: Deno is not a fork of Node, we can call it a new implementation based on modern features of JavaScript, it’s a secure runtime for JavaScript and TypeScript based on Google’s V8 just similar to Node.js, but the core is built using Rust in Deno, whereas its C++ in case of Node.

• Django: If you like to add a bit more to your stack, then there is nothing better than Django, it is simple to use and much secure with great performance. I would personally recommend learning Django if you want to build applications that take less time while offering a good level of security, Django is much secure due to its built-in security system. Also, you can use the in-built templates that offer the same performance with no issues.
• Flask: There are many key differences in Flask, as Flask is a WSGI framework whereas Django is a full-stack web framework. It completely depends on which approach you prefer, as Flask offers the MVC pattern and as a backend developer, you should stick to your preferences no matter if the framework is old or new. Flask is minimal yet powerful, but not the best choice you can make for backend applications in 2021.

2. Databases

Relational Databases VS Non-Relational Databases

Relational Databases are mostly used in enterprise scenarios, they store information with columns, rows, and tables. Where each column is associated with a data point and a row represents the value for that category. In relational databases, each table can only store one object.

• MySQL
• PostgreSQL

For example, you can’t store data on customers and clients in the same relational table. To make that work you will need two tables: one for customers, another one for clients.

But in the case of Non-Relational Databases, which are more flexible because the data isn’t limited to the same table, they use columns and rows to enter types of data and its values and identify objects with keys. Here we can identify the object with a key and assign data to it, now anytime you need to assign some new data to the object, you just have to enter a specific key, without looking and editing a particular table.

• MongoDB -Recommended
• AWS- Easy to scale
• Firebase- A great choice for small projects

3. APIs

Now when you are done with databases you need to access the data on the frontend through APIs, think about the electricity supply in your houses, to use an appliance you need to plug it into a plug socket. Similarly, we use a written API in a higher-level language such as JavaScript or Python. As a beginner, you should learn how different APIs work and where you can use them to minimize work in your projects.

• Authentication: Nowadays almost all web application has to work with several users, and to keep a track on users you need to implement authentication. The most stable way you can go for is working with OAuth or JavaScript Web Tokens (JWT), and if you want to take it a bit easy there are some good alternatives such as Auth0 or Firebase.

Deployment

Concepts to Learn

• Load Balancing: The process of distributing workloads across multiple servers, where the main purpose of load balancing is to prevent any single server from getting overloaded. You can’t build scalable applications without applying load balancers.
• GitHub Actions: They enable you to create custom software development cycle workflows in your GitHub repository, and these workflows are made out of different tasks knows as actions that can be run automatically on certain events.
• SSH: Stands for Secure Socket Shell, a secure way to access a computer over an unsecured network, SSH provides a strong password authentication and public key authentication, as well as encrypted data communications between two computers connecting over an open network.
• Monitoring: A web application that handles a lot of user interaction always requires monitoring to make sure that the application is performing at its peaks. One of the main goals of monitoring is to achieve high availability by minimizing time to detect & the time to mitigate.
• SSL Certificates: They enable websites to move from HTTP to more secure HTTPS. The SSL certificate is a data file hosted in a website’s origin server and they contain website public key along with other related information.

Serverless (FaaS)

The concept of serverless computing via serverless architecture, developers use this to deploy an individual function or a piece of logic which they want to start within milliseconds and process individual requests. One of the best options for computing services are listed below:

• AWS Lambda
• Netlify

Virtualization

Using Virtualization you can create powerful IT services that require traditional connections to hardware, which allows you to use a physical machine at its full capacity by distributing its capability to many users.

You can use Kubernetes and Docker, the basic difference between these are is that Kubernetes run across clusters while Docker runs on a single node. Most of the developers prefer using both of them together to build better infrastructure.

Thank you
if you like this give some love :)