The ULTIMATE Beginners Guide To Becoming a Web Developer

Published in

Level Up Coding

13 min readMar 26, 2024

Intro

Welcome to the complete web developer roadmap. Becoming a web developer is a great idea. Even in this year of 2024, with all the AI hype and everything, the web developer job is not going anywhere in the upcoming decade.

In this full guide, we’ll look at how you can go from complete beginner level, whether you’re a student or intern, to landing your first developer job. If you already have a job, we’ll look at what you need to learn to advance your position in your current company or get hired by a new one. And then we’ll also cover the skills you need to go from mid-level to a senior position and get yourself a six-figure salary position.

I will cover the languages and tools for frontend, backend, and full-stack web development to provide you with a complete overview.

Some people might visualize this roadmap differently, but this is what I would do if I started to learn web development from zero.

Use my free Web Development Roadmap to follow along the contents:
· How the web works
· Workspace Setup
· HTML
· CSS
· JavaScript
∘ Asynchronous JavaScript
∘ Memory Leaks
∘ Web APIs
∘ ESLint
∘ Modules
∘ Build Tools
∘ Browser Dev Tools
∘ TypeScript
∘ Static and Dynamic Typed Languages
∘ Types and Interfaces
∘ OOP vs Functional Programming
∘ Generics and Decorators
∘ Utility Types
· Version Control
∘ Git
∘ GitHub, GitLab, BitBucket
· Package Management
∘ Popular Libraries
∘ npm, yarn, pnpm
· Frontend Frameworks
∘ React
∘ Lifecycle Hooks of React Components
∘ React Hooks
∘ Built-in APIs
∘ Built-in Components
∘ CSS-in-JS
∘ Higher-Order Components
∘ SPA vs SSR
∘ State Management
· Interview Preparation
∘ How to Structure Your CV
∘ Find and Apply for Developer Roles
∘ Prepare for Non-Technical Interviews
∘ Prepare for Technical Interviews
∘ How to Negotiate Your Salary

How the web works

The first landmark on our roadmap is understanding how the Web works, meaning how the browser and servers communicate to display web content on users' screens.

Here, you’ll learn about the Domain Name Servers (DNS), which are like the internet’s phonebook, connecting domain names we know to the IP addresses that the web uses.

You will also learn about HTTP and HTTPS protocols — the foundational protocols that browsers and servers use to send and receive requests.

Workspace Setup

After that, you need to set up your Workspace and your coding environment.

This involves installing and familiarizing yourself with your Code Editor or IDE. Some popular ones are VSCode, WebStorm, SublimeText, and Atom, and there are more. I recommend VSCode because it’s the most popular one, which means it has a lot of ongoing support for extensions and features, but choose the one that you like because this is the tool where you’ll spend most of your coding hours.

Then, we’ll need to enhance your setup with Extensions and Helper Tools, for example, tools like Prettier for code formatting, auto open-close tag extensions, auto importers, spell checkers, live server extensions, and more. These will boost your productivity and streamline your coding process.

You also need to learn basic Terminal commands and how to navigate in the Terminal, which will be helpful for various tasks, from running scripts and starting servers to version control.

HTML

Once you have your workspace set up, you can start coding. And the first step is HTML, which is the cornerstone of web content.

Here, you’ll learn about:

HTML tags that are used to create the structure of a website. Tags like headings, paragraphs, links, and much more.
HTML Forms, which are used for user interactions on the web.
Accessibility — which is ensuring your websites are usable by everyone, including people with disabilities, which also helps improve overall user experience.
Semantics, which involves using the correct tags to provide meaning and structure; this helps in readability and benefits search engine optimization and accessibility.

CSS

I would learn HTML in parallel with CSS because I think that way, it makes much more sense. CSS is the styling language that brings beauty to the structure of your HTML.

For example, with CSS Layout, you can control how elements are placed and organized on a screen. This includes the CSS Grid, Flexbox for one-directional positioning, Floats and Box Models, which are used for creating responsive layouts that work on any device.

Next, we have animations that add life to your web pages with transitions and movements to capture user attention.

We also need to make sure that the website looks great on any screen, and that is the Responsive UI part, which is using flexible grids, layouts, and media queries to adapt your pages to large screens, laptops, tablets, and even to the smallest screen phones.

CSS Variables are used when you want to streamline how you manage and reuse styles across your website. For instance, they are useful when you want to define a theme of colors for the website or create a dark/light mode, and so on.

In projects where CSS gets complicated, some companies use Preprocessors, like Sass, Stylus, and Less, to make stylesheets more maintainable and easier to read.

But you do not always have to write CSS for every component from scratch. Some companies, especially the small ones, use Frameworks like Bootstrap, Tailwind, Skeleton, or other tools to speed up their development processes and avoid focusing too much on styling.

JavaScript

Next, I would learn JavaScript, which makes the websites functional and allows users to interact with them.

Although this part may seem overwhelming, it’s essential not to skip the fundamentals, as having a strong understanding of JavaScript will help you a lot throughout the upcoming parts of your journey in web development.

We need to start with the basics, and that is understanding the syntax and concepts like different Data Types, how to define Variables and Functions, how to use Conditional statements, and how to write Loops. These building blocks will let you write functional scripts for your web pages.

Asynchronous JavaScript

Next, we have Asynchronous JavaScript; since JavaScript is a single-threaded language, it handles operations that take time, like fetching data or waiting for user events asynchronously, to keep our apps responsive. In this part, you’ll learn about how the event loop works and how we resolve promises and timers.

Memory Leaks

Memory Leaks are also a common topic in JavaScript, and learning this will help you optimize your web apps and prevent common issues that can slow down or crash your websites.

Web APIs

You’ll learn about Web APIs like DOM and how to manipulate HTML elements on the screen. You'll also learn how to fetch data with the Fetch API for making HTTP requests. While working with Fetch, you’ll also learn the most commonly used data formats for web APIs like JSON, XML, and gRPC.

Next Web APIs are Local Storage for saving data in the browser and Service Workers, which add offline functionality and can handle heavy operations outside of the main thread. i18 is the practice of designing web applications that can be adapted for different languages and regions.

ESLint

ESLint is a helpful tool for keeping code clean and consistent. It automatically identifies problems and suggests fixes.

Modules

The next part is Modules, which help us organize code into CommonJS or ES6 Modules, manage and maintain our codebase, reuse code, and manage dependencies.

Build Tools

You’ll learn about Build Tools like WebPack and Babel that help us bundle those modules into a single file and transpile new JavaScript syntax into a form that older browsers can understand.

Browser Dev Tools

Lastly, we have the Browser Dev Tools, which allow you to test and debug your JavaScript in real-time, inspect elements, and analyze performance to optimize your web pages.

TypeScript

After learning JavaScript, the next step is to learn TypeScript, a superset of JavaScript that adds static typing to the language and enhances the development experience with type safety and advanced object-oriented features.

In fact, 90% of the projects that I’ve worked on in recent years were written in TypeScript. In my opinion, most companies looking for JavaScript developers now are looking for someone with TypeScript knowledge as well.

Static and Dynamic Typed Languages

Here, you’ll learn about the difference between Static and Dynamic Typed Languages: TypeScript, being statically typed, allows for checking type correctness at compile time and reduces the typical runtime errors that we usually get with JavaScript.

Types and Interfaces

And it does it by allowing us to define custom Types and Interfaces to enforce certain structures for objects and classes.

Object-Oriented Programming vs Functional Programming

Here, you will also learn about Object-Oriented Programming (OOP) and Functional Programming (FP). You could learn these while studying JavaScript as well, but I think it makes more sense after you know one statically typed language like TypeScript, to understand the difference fully.

Generics and Decorators

The next topic is Generics and Decorators in TypeScript. Generics allow you to create components that work with any type, not just one. Decorators provide a way to add annotations and a meta-programming syntax for class declarations and their members.

Utility Types

Utility Types are also commonly used in TypeScript applications that allow you to transform and reuse existing types by adding or removing some properties from them.

Version Control

After you learn TypeScript, the next logical thing is to learn Version Control. This is how you would share and receive the code updates from your colleagues.

The naive way would be to compress a zip folder of the code changes you made and send it to them. But this approach has many issues — first, they won’t know which files and lines of code you’ve changed, and if two or more of you are working on the same part of code, it will quickly become a mess.

Git

To solve that issue, we have Git — the most common version control tool. This is the tool you’ll use to manage all those updates to your code. It lets you track changes, revert to previous stages, and work on different features without messing up your main project.

GitHub, GitLab, BitBucket

Don’t confuse Git with GitHub, GitLab, or BitBucket: Think of these platforms as social networks for your code. They’re where you can store your Git repositories online, collaborate with others, and even showcase your work to potential employers.

Package Management

Next up is Package Management, which is how we manage all the tools and libraries that the project needs.

Popular Libraries

For example, you might need to add a routing package to your application, a CSS preprocessor, lodash for utility functions, momentjs or date-fns for dealing with dates, Axios for making HTTP requests, d3 for creating complex visualizations, and much more.

npm, yarn, pnpm

These are all managed by a package manager. The 3 popular package managers are npm, yarn, and pnpm. These can get pre-made code packages for you to help your project do more things without writing extra code yourself.

Frontend Frameworks

The final major topic you need to learn to land your first tech job is a Front-End Framework. These frameworks provide pre-written code that helps you build fast, responsive, and interactive web applications with less effort than writing everything from scratch with pure Javascript.

Popular options are Angular, VueJS, Svelte, and React, each with its own strengths and weaknesses.

React

React still remains the most popular choice in 2024 in terms of usage and open developer jobs. This is what I would personally learn if I started over because it has the highest number of job openings and is the easiest and fastest way to get started.

Lifecycle Hooks of React Components

The first thing you’ll learn about React is the Lifecycle Hooks of components, including the Mounting, Updating, and Unmounting phases, which help us manage resources and data during the component's lifecycle.

React Hooks

Next, we have Hooks, which are just functions that let you “hook into” React state and lifecycle features from function components. They have changed how we write components and brought simplicity and flexibility to the forefront:

Performance Hooks: useMemo and useCallback, help in optimizing your components to prevent unnecessary renders.
Ref Hooks: useRef for referencing elements and useImperativeHandle to expose imperative methods to parent components.
Context Hooks: useContext, simplifies the way you handle state across multiple components.
State Hooks: useState and useReducer are the core hooks for component state management.
Effect Hooks: useEffect, useLayoutEffect, and useInsertionEffect let you perform side effects in your components.

Built-in APIs

React also provides a suite of Built-in APIs like memo, lazy, for optimizing your components, and forwardRef and createContext for advanced functionalities.

Built-in Components

Similarly, it provides a couple of Built-in Components like Profiler for performance measurement, Suspense for data fetching, StrictMode for detecting potential problems and more.

CSS-in-JS

CSS-in-JS is a pattern that lets you write CSS directly within your JavaScript code. This means you can scope styles to components, leverage JavaScript’s power to generate styles dynamically and avoid style collisions.

Higher-Order Components

Higher-Order Component (HOC) is a React pattern used for reusing component logic. They are functions that take a component and return a new component by “wrapping” the original one to extend its capabilities.

SPA vs SSR

You’ll also learn about Server-Side Rendering (SSR) vs Single-Page Applications (SPA). SSR can provide faster initial load times and SEO benefits, while SPA offers a better user experience.

React offers production-level frameworks for developing applications like Next.js, Gatsby, and Remix. These frameworks are built on top of React, but still, you have to learn pure React, and then these frameworks are pretty easy to pick up after that.

State Management

Managing state in React applications is a big aspect, and that’s why it offers its own State Management logic with Context API as well as third-party libraries (Redux, Zustand, Recoil, Jotai, etc) for complex applications.

From here, you can also transition to React Native developer after you learn React. For instance, in my last projects, the company used React for the website and React Native for the mobile app. Why? Because this is cost-effective, they keep the same web developers team who work both the frontend part and the mobile app at the same time. Of course, you’re going to be paid more than just a front-end developer if you know both React and React Native. But that’s just a side note, and it’s not required at all to become a full-stack developer.

Interview Preparation

The final step before you land your first tech job is Interview Preparation. This stage is all about making sure you stand out as a candidate and are ready to showcase your skills and knowledge in interviews.

Here, you need to learn about

How to Structure Your CV

Your CV is your first impression. You need to make sure it’s clean and professional and highlights your web development skills, projects, and any relevant experience. Ideally, this should be one page long. It should showcase only the skills relevant to the job you are applying for. It should exclude any non-relevant parts, as this will help HRs and recruiters understand your position more clearly.

Find and Apply for Developer Roles

You need to avoid the mistakes that almost 90% of developers make, and because of this, they get ghosted by recruiters or never get a reply on their applications. Here, there are 2 common approaches — high volume or tailored applications. With the first one, you send your CV to as many companies and positions as you can and focus on the volume, and with the opposite, you pick a few targeted companies and do as much personalization for them as possible.

Both worked well for me in the past. I think the personalized approach is better, but it’s good to know both approaches. Use job boards, company websites, and networking to find opportunities. Tailor your application to each job, focusing on how your skills match the job description.

Prepare for Non-Technical Interviews

This should be the easiest one if you’re prepared. This is usually called an HR interview, and you just need to present yourself and talk about your relevant skills and experiences.

These interviews assess your soft skills, such as communication, problem-solving, and team fit. Be ready to discuss your experiences and what you bring to the team beyond technical abilities.

Prepare for Technical Interviews

Here, expect to demonstrate your coding skills, perhaps through a live coding session or a technical Q&A. Practice common web development problems and review your fundamental knowledge. This is a large topic to cover here, but let me know if you’d like to learn more about this.

How to Negotiate Your Salary

This is an important skill. You need to know industry salary standards and be prepared to discuss your salary expectations. Some people fear discussing this because they think the company may change their mind and not hire them.

For example, I didn’t negotiate my first role’s salary, and later, I found out that I could’ve requested 3x more for that same role. After that, I negotiated every role’s salary before accepting it, and knowing negotiation techniques will help you a lot here. It’s not just about the number but also the overall compensation package.

After you both agree on the terms of the contract, you can accept the offer and land your first tech job in the industry.

In the next part of the roadmap, we will cover the transition from a junior to a mid-level full-stack developer. See you 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.