The ULTIMATE Guide To Advancing From a Junior to a Mid-Level Web Developer

Published in

Level Up Coding

13 min readApr 2, 2024

Welcome to the web developer roadmap of 2024. This roadmap is for those who already have their first developer job and are looking to advance their position or get hired by a new company.

If you don’t have a developer job yet and you’re just getting started, then you need to check out the first part of this roadmap.

Use my free Web Development Roadmap to follow along the contents:
· Workspace Tools
∘ Jira
∘ Agile and Scrum
∘ Confluence
∘ Slack
· CI/CD
∘ Environments
∘ Deployments
∘ Pipelines
· Cloud and Hosting
∘ Cloud Providers
∘ Static and Managed Hosting
· Web Servers
∘ Nginx and Apache
∘ Load Balancers
∘ Content Delivery Networks (CDNs)
· Backend Languages
· APIs
∘ REST API
∘ GraphQL
∘ gRPC
∘ Protocols
∘ Security
∘ Docker
∘ Serverless
· Authentication
∘ Token Authentication
∘ Cookie Authentication
∘ Authorization
∘ OAuth
∘ Managed Authentication
· Databases
∘ SQL Databases
∘ NoSQL Databases
∘ Graph/Vector Databases
· Summary

Workspace Tools

So, assuming you’ve landed your first job as a web developer, you will now be granted access to the company’s workspace tools. If you’re a bit more experienced, you might think, “Why even talk about this?” it’s obvious how to use Slack or Jira. Still, I remember when I first got hired by a company, and they added me to their tools like Slack I didn’t know anything about what Slack is, why people use it, and how to use it. If you also felt the same, then this part is for you.

In any development job, you’ll need to get comfortable with several Workspace Tools that are mostly used for collaboration, project management, and communication.

Jira

Jira is a project management tool designed for teams. You’ll use it to track issues and tasks throughout the project, like who’s working on which task or bug.

You’ll notice there are different types of work items on the Jira board, such as tasks, bugs, stories, and epics, and it can be confusing if you’ve never worked with them before.

Tasks: A task represents a unit of work that needs to be done. For instance, this can be “Update login page UI” or something like that.
Bugs: Bugs are issues that indicate something is not working as intended. For example, if users cannot reset their password on the login page, then this will be tracked as a bug in Jira.
Stories: A story, or user story, is a feature described from the perspective of the end-user or customer. An example of a user story can be, “As a user, I want to filter search results by date so that I can find the most relevant articles.”
Story Points: Since stories are usually tasks requiring high effort, the development teams rate these stories with story points based on their complexity, which are the numbers of the Fibonacci sequence.
Epics: Epics represent a big feature or goal that combines multiple of these stories.

Agile and Scrum

Then, we have Agile and Scrum methodologies, which divide the development process into short periods, typically two weeks, where a set of stories and tasks are selected to work on. These two-week periods are called sprints.

With Scrum methodology, you will also have daily calls, bi-weekly sprint planning, and other meetings. These meetings will happen in MS Teams, Zoom, or Google Meet.

Confluence

The next tool is Confluence, which is used for project documentation. It helps teams to create, share, and collaborate on projects in one place.

Slack

Slack is a messaging app, just like Messenger or WhatsApp, but it is more focused on group chats for teams, which are called channels, and they represent the same concept as group chats, except that most of the channels are public for everyone.

CI/CD

The next area you’ll dip into is CI/CD, which stands for Continuous Integration and Continuous Deployment. CI/CD is the practice of automating code changes, testing, and deployments. This includes multiple things.

Environments

Environments, such as the dev, staging, and production environments, were also a confusing topic for me at the beginning; what are these that everyone keeps talking about in the Slack channels?

Luckily, this is a very simple concept — teams usually create 2–3 different environments, like a development environment, which developers use to test their changes, staging (also called test) for QA testers to test the changes and verify that they work properly, and production which is the real application or website that its users use.

Deployments

Another part of CI/CD is Deployments. If the CI/CD is set up properly, this is easy. You just run a certain GitHub or Jenkins action, and it starts deploying your code to the environment you specify.

GitHub Actions and Jenkins are tools you’ll use to automate your CI/CD pipeline.

Pipelines

Every Pull Request you open or deployment you trigger goes through a series of Pipeline checks to verify that everything is fine before deployment. For example, it runs the tests (these can be unit/integration tests or end-to-end tests), checks the linter, and then starts to do the deployment.

If any of the pipelines fail, it stops the process, and if it is successful, it deploys your code and typically notifies you in a Slack channel.

Cloud and Hosting

Your next stop is understanding Cloud and Hosting. This is where your web application is deployed after you run the GitHub or Jenkins deployment actions.

Cloud Providers

The most popular cloud providers are AWS, Azure, and GCP. They provide different services for hosting web apps, their backend services, and even serverless cloud functions all in one place. They use a cost-effective method: you pay as much as you use the resources instead of the traditional fixed-price server costs.

They also handle the system's scaling, which can be cost-effective because the company doesn’t have to maintain a large DevOps team to manage the infrastructure.

Static and Managed Hosting

For simpler sites or web apps, static and managed hosting services provide a more straightforward, serverless solution for quickly deploying projects.

Some examples of static hosting services are Netlify and GitHub Pages. An example of a managed hosting service is Vercel.

Web Servers

As you move further into the backend domain, it becomes essential to understand the infrastructure that supports the applications you’re building.

Before moving on to backend languages, let's first discuss web servers, which are systems that deliver content to end-users over the Internet.

Using HTTP and other protocols, it accepts requests from clients (usually from web browsers) and responds by serving web pages and other types of content, like images, video, and data.

Nginx and Apache

These are the engines behind a website, handling client requests and serving the right content. Nginx, for example, is known for its high performance and stability. It can also act as a reverse proxy and an email proxy.

Load Balancers

The most popular reverse proxy example is Load balancers that distribute network or application traffic across a number of servers, ensuring no single server bears too much demand. This improves the responsiveness and availability of applications.

Content Delivery Networks (CDNs)

Then we have CDN web servers, which are networks of servers that deliver cached static content from websites to users based on the geographic locations of the users. This gives us the advantage of faster delivery and less stress on any one server. You’ll learn why CDNs are essential for reducing latency and speeding up the delivery of resources by serving them from locations closest to the end-user.

These concepts will start to make more sense after you learn one backend language and begin to work with APIs. Therefore, the next logical step is to learn a backend language…

Backend Languages

A web app's backend is where your applications' logic runs and data is processed.

There are different backend languages to choose from, like:

Java: A versatile, object-oriented language that’s used in large-scale enterprise environments, especially for big data processing.
C#: Developed by Microsoft, C# is primarily used via ASP.NET for web applications.
PHP: It’s easy to learn and widely used for web development. It powers popular content management systems like WordPress and Shopify.
Ruby: Known for its elegant syntax, Ruby is often associated with the Rails framework, which emphasizes convention over configuration and is used for rapid web development.
Python: This is a super-readable and efficient language and is popular in data analysis, artificial intelligence, and scientific computing.

I recommend starting with Node.js. It’s a JavaScript runtime built on Chrome’s V8 engine and allows you to write server-side code using JavaScript, which you’re already familiar with from front-end development.

This means you can use a single language across your entire stack, and later, you can learn some of the other languages if you’ll need them in a project, but this is the easiest one and also a popular one.

Let’s break down the components of Node.js:

You’ll learn about Node.js architecture: It’s event-driven and features a non-blocking I/O model, which makes it lightweight and efficient for real-time applications.
Node.js Event Loop: Nodejs also uses the Event Loop as JavaScript; although it’s a bit different than the browser side Event Loop, it’s mostly similar, and you’ll understand this very quickly. This is what allows Nodejs to perform non-blocking operations despite being single-threaded.
Then we have the Core Node.js Modules: Modules like fs for file system operations, path for file path operations, or http for server creation are the building blocks of any Node.js app.
Middleware are common concepts in Nodejs, they are just functions that have access to the request and response objects and can modify them or execute any code. For example, features like authentication are implemented here through middlewares.
Streams & Buffers are other common concepts that allow us to process big data like videos in small chunks.

After learning the fundamentals, you need to pick a Nodejs framework because it’s unlikely you’ll write a real backend API with pure Nodejs.

Here, Express.js is the most popular one, known for its simplicity and minimalism.
Nest.js is inspired by Angular and provides an out-of-the-box application architecture.
Hapi.js is a rich framework for building applications and services.

There are more frameworks than I’ve listed here, but these are the most popular ones.

APIs

After getting comfortable with a backend language, you’ll start building APIs, which are Application Programming Interfaces.

REST API

The most common type of API is REST API: This is an architectural style that uses HTTP requests to access and use data. They’re used to perform standard database functions, like reading, creating, updating, and deleting records within a resource.

GraphQL

GraphQL is the second most popular type of API. This is a query language for your API and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

gRPC

gRPC is ahigh-performance RPC framework that uses HTTP/2 for transport, Protocol Buffers as the interface description language. It’s designed primarily for server-to-server communication.

Protocols

Then, we have the protocols that are used by these APIs for communication

HTTP is the standard protocol of data communication for the Web. You’re already familiar with it from the frontend part, but backend development involves deeper aspects of this protocol.
WebSockets provides two-way communication channels over a single TCP connection, and because of that, it’s used for real-time data transfer between a client and a server, like for chat apps or for video streaming.
Secure Shell (SSH) is a protocol used for secure remote login over a network. For example, you might use SSH to log into your remote web server for troubleshooting, performing maintenance operations, or in situations where CI/CD pipelines are not enough and manual intervention is necessary.

Security

Security is another important aspect. You’ll need to understand different security mechanisms to protect data and ensure the integrity of your applications.

Hashing: Used to securely store passwords and other sensitive data.
Encrypting: Transforms data into a secure format that unauthorized parties cannot access without a key.
Signing: Ensures the authenticity of data by providing a digital signature.
Encoding: Converts data into a different form, often to prepare for transport or storage.

Docker

We use Docker to wrap our API into an isolated environment, which is called a container. This makes sure that if the API is running on your local machine, it will also run smoothly on the remote server and will reduce the issues of having different operating environments.

Serverless

Lastly, you’ll explore modern deployment models like serverless. Serverless is a cloud computing execution model where the cloud provider runs the server and dynamically manages the allocation of machine resources.

With serverless, the cloud provider dynamically manages the allocation and provisioning of servers and automatically scales the application without you worrying about the underlying infrastructure.

Authentication

The next important part of backend servers is how you authenticate the users.

Token Authentication

Token Authentication is a stateless method where the user is authenticated via tokens. This can be further divided into Access and Refresh Tokens.

Access tokens are used to make authenticated HTTP requests, and refresh tokens are used to obtain new access tokens without having to authenticate again.

An example of token authentication is JSON Web Tokens (JWT), which are a compact, URL-safe means of representing claims to be transferred between two parties, allowing for secure information exchange.

Cookie Authentication

The traditional way of authentication is cookie based. Here, sessions are managed using cookies, which are sent with each HTTP request, allowing the server to identify users across requests.

Authorization

Don’t confuse this with authentication. Authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.

OAuth

OAuth is an open standard for access delegation, used as a way for users to grant websites or applications access to their information on other websites but without giving them the passwords.

Managed Authentication

This is where third-party services like Amazon Cognito, Firebase, Auth0, Keycloak, or Okta manage user authentication and authorization for your applications. They offer a secure way to handle user sign-up, sign-in, and access control and often provide additional features like social login and multi-factor authentication.

Databases

Building backend APIs without database knowledge is fundamentally impossible. Databases are where APIs store, retrieve, and manipulate the data they serve.

There are various types of databases, each with its own use cases and features:

SQL Databases

These databases, also known as relational databases, use a structured query language (SQL) for defining and manipulating data. They are based on a schema that defines the structure of your data.

PostgreSQL: An open-source object-relational database system known for its robustness, feature richness, and performance.
MySQL: Another popular open-source relational database which is widely used for web applications due to its reliability and ease of use.
SQLite: A C-language library that implements a small, fast, self-contained, high-reliability, full-featured SQL database engine. It’s widely used in applications where the setup needs to be light and simple, such as in mobile apps or small web applications.

NoSQL Databases

These are non-relational and can store and process a large amount of unstructured data. They offer more flexibility and scalability compared to traditional SQL databases.

MongoDB: A document database that stores data in flexible, JSON-like documents, meaning the data structure can be changed over time.
Redis: An in-memory key-value store known for its speed and often used for caching.

Graph/Vector Databases

These are specialized databases optimized for queries that involve traversing relationships, like social networks or recommendation engines.

For example, Amazon uses the Amazon Neptune graph database service for product recommendations. You probably have seen “Customers who bought this also bought…”, and this is utilizing the graph database to identify which products you might be interested in.

Summary

After learning and practicing the topics we’ve covered, you’re now well-equipped to take the next step in your career. You can either climb the ranks within your current company and ask for a promotion or apply for a new role to get yourself a better position and salary. From my experience, it’s better to change your project every 1–2 years because this will first help you grow faster as you work on different types of projects, and second, you usually get a bigger salary increase than if you got promoted in your current company.

In the next post, we’ll continue the path from where you stand now to reaching the senior developer position, and we’ll cover the advanced skills you’ll need to get there.

If you’re new here, I’m Hayk. I help web developers secure their first tech jobs or advance to senior roles at the Web Dev Mastery community.