Starting Web Development in 2021: The Complete Guide (with Resources)

  1. It has a high demand in the job market
  2. Web is the most accessible platform, anyone from anywhere can access it. All they need is an internet connection and a device capable of handling a web browser. If you make an Android app, it will be only runnable on Android devices. But if you make a Web app, everyone can use it
  3. No matter what you choose as a tech career, you will be directly or indirectly involved with web development. Even if you’re an AI Engineer/Machine Learning Engineer, still you would need basic knowledge of Web Development. So, learning Web Dev is not a bad investment in any scenario, even if you switch to Data Science or AI.
  4. Ever used Uber? Of course you did (or at least some similar service). What does it do? It gives a ride-sharing platform and nothing more. Although the app seems very nice, it’s actually the backend code that’s doing all the magic, which also falls under the web category. They even have a dedicated Research and Development team called Uber Engineering where they get millions of investments and they’re constantly bringing revolutionary changes in Software Engineering. Most of the work they do there is related to making the ‘ride sharing’ platform better, which might have seemed ‘simple’ to you a few minutes earlier. Interesting, right? You might store some data in a database, do some CRUD (No worries if you don’t know the term) operations and make a nice looking web page. But you will be stuck when you’re given a complicated system like Uber, which is running at a large scale and millions of users are using it at once.
  • Turn web design (provided by UI designer) into code.
  • Implement user interactions like button events, visual feedbacks etc.
  • Implement data model and data state. Decide how data is going to be stored and manipulated throughout the application
  • Design and implement database schema
  • Take system architectural decisions. Decide how to scale up your application to thousands or millions of users
  • Implement business logic for your unique product (like what happens on the server-side when a customer requests a ride in Uber)
  • Use tools and technologies to provide data insights
  • Bridges the gap between Developers (who write code) and the Operations (who run the code) team. In simple terms, a backend/frontend engineer writes the code, while the DevOps engineers main responsibility is to serve the written code to customers
  • Automates the deployment pipeline using CI/CD (Continuous Integration and Deployment). By deployment, I mean from writing the code to serving it to end customers (SDLC).
  • Manage the servers and network. Ensure systems are running properly without downtime
  • Not directly involved with the implementation of the product
  • Works in both Frontend and Backend
  • In most companies, the title is generally ‘Software Engineer’
  • Small to moderate companies offer full-stack roles. For bigger companies, the product is so complex that a full-stack role is not possible. In those cases, they offer specific Backend or Frontend positions
  • Development-focused engineers who solve operational/scale/reliability problems
  • It’s an overlap of DevOps and Backend Engineering
  • Has direct involvement with the implementation of the product

The Roadmap

Pick a Programming Language

Python

  • It’s easier to learn, difficult to master. It looks like almost natural language
  • Has powerful and battle-tested (read ‘mature’) web tools and frameworks
  • Great community
  • If you’re thinking of switching to Machine Learning, AI or Data Science later, go blindly with Python. Because literally speaking, Python is the ‘heart’ of those sectors

Javascript

  • The most popular and loved language
  • Great community
  • This is the language with diverse possibilities. If you learn this language, you can do Web Frontend, Server programming (backend), cross-platform mobile app development, desktop app development, game development and even for Machine Learning (experimental) and Embedded Systems programming. Although, I would not recommend this language for the last two. But you can see the picture, this language has the most diverse amount of use cases.
  • Jeff Atwood, one of the founders of the life-saving platform (for devs) Stack Overflow, said this back in 2007

Any application that can be written in JavaScript, will eventually be written in JavaScript. — Jeff Atwood

Clean code and refactoring

Design Patterns

Database

Version Control with Git and GitHub

Frontend

Backend

Python Path

CREATE TABLE students (
id INT PRIMARY KEY,
name VARCHAR(50),
age INT
);
INSERT INTO students VALUES (1, 'John', 17);
INSERT INTO students VALUES (1, 'Doe', 19);
SELECT * from students WHERE age > 18;
class Student:
id = db.Column(...)
name = db.Column(...)
age = db.Column(...)
student = Student('John', 18); # id will be calculated automatically
student.save()
Student.query.filter_by(age > 18).all()
SELECT * FROM students WHERE age > 18;

Node.js Path

Resources

Language

Python

JavaScript

Clean Code and Refactoring

Design Patterns

Database

Postgres

MongoDB

Git and GitHub (Version Control)

  1. Git HowTo
  2. Branching
  3. Introduction to GitHub

Frontend

HTML, CSS, SCSS

  1. HTML5 and CSS3 By Jonas
  2. SCSS (or Sass) for Beginners

React

Backend

Python Path

  1. Build REST APIs with Flask (Very average tutorial, misses a lot of things. But still a bit better than others. You have to follow it because it shows some modern techniques)
  2. Flask Mega tutorial by Miguel Grinberg (Read the whole series. This will be the series that you will take as reference point while writing Flask code. Forget the bad practices introduced to you in the previous tutorial)

Node.js Path

  1. Node.js: The Complete Guide to REST APIs by Mosh
  2. Node.js, Express and MongoDB By Jonas

Where to go from here

Some tips for new learners

  • Don’t rush. Take your time to learn these things. Learn everything thoroughly
  • Do Projects. This is extremely important. Don’t fall into the learning loop. Be ready to get your hands dirty as soon as possible
  • Every project you do, keep it in GitHub. This is extremely important
  • Try to get involved in open-source contributions . It will drastically boost your profile
  • Don’t forget that Data Structures and Algorithms are important and might be asked in company interviews. This is not a Computer Science roadmap, so discussing algorithms is out of scope. But you should have a basic understanding. You can use Leetcode (Easy + Medium levels) to practice interview questions.
  • Don’t waste time on Coursera certificates. Instead, invest time in doing projects. By far, I haven’t seen any company that judges a candidate by their Coursera certificates. I’m discouraging this because most people try to gather as much certificate as possible, without learning anything valuable. Even for a beginner, a company will look into how much real experience you have building things and solving problems, not those fancy certificates you showcase on Linkedin.
  • It’s much better to pick few things and master them instead of being a jack of all trades
  • There is no universal tech stack that can get you a job in any company. When hiring beginners, most good companies are tech agnostic
  • Even if you don’t know a tech stack, you can learn that easily because now you have a strong fundament

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmed Sadman Muhib

Ahmed Sadman Muhib

I’m a Software Engineer interested in Web, Cloud and Cross-platform technologies. Favorite things of mine are reading, watching movies and eating burgers