2025 Roadmap for web development (100% free resources)

0:00 If you're trying to learn web development as a beginner, it can be hard to know how to get started and what skills you need to learn. Also, you don't want to break the bank when you're just starting out and you know there are free YouTube videos on every topic in existence. But how do you know which resources to use? Well, that's why I wanted to make this video. I'll show you a simple road map that you can follow to learn web development as a beginner. And with each step, I'll be sharing completely free resources. All the resources are linked down in the description. Sound good? Let's get into it. Before learning the actual coding, you'll need to get familiar with the tools that you'll need in web development. The main tools you'll need will be a computer, a code editor, and an internet browser. Now, if you're not familiar with computer skills or you

0:46 just need a refresher, check out Free Code Camp's video on their YouTube channel, or go through the getting started modules on MDN Mosilla Developer Network for a textbased explanation. For your code editor, I would recommend using VS Code, which is short for Visual Studio Code. It's free to use and very popular. You can download it at code.visisualstudio.com. Just make sure that you're downloading VS Code and not Visual Studio, which is a different tool used for programming for languages like.NET and C. If you're new to VS Code, I recommend Kevin Pal's video on how to get started with VS Code, which will show you how to get set up and all the basics that you'll need to know. For your browser, your main choices are probably going to be Chrome, Firefox, or

1:32 Safari. I personally like Firefox, but Chrome is the most popular browser by far. But whatever browser you're using, I would highly recommend getting familiar with the developer tools to inspect the website. This is the best way to troubleshoot your CSS. I have a video on my channel about how to use the Firefox developer tools to debug CSS. and even if you're using a different browser, a lot of the tools are going to be the same or very similar. So, those are the basic tools that you'll need to use at the beginning. Now, let's look at all the different skills that you'll need to learn as a web developer. To start out, you'll want to learn front-end basics, which include HTML, CSS, and JavaScript. Every website on the internet is made up of these three, no matter what frameworks, libraries, or

2:17 programming language was used in the process. Very briefly, HTML or hypertext markup language is where you'll write the content of the website like text, images, videos, and more using tags to tell the browser what type of content each part is. CSS or cascading stylesheets is what you can use to change the appearance of your website content. You can use CSS to control the background and text colors, font size, and make the website responsive. JavaScript is a programming language originally made to run in the browser. You can write JavaScript to make your website more dynamic so that the user can interact with it. If you'd like to learn more about concepts like how websites work and what front-end and backend development are, check out my other video on how to learn web development as an absolute

3:03 beginner. Now, to learn HTML, CSS, and JavaScript, I have a few recommended resources. First, you've probably heard of freecodecamp.org, or but if you haven't, they have a textbased curriculum where you can learn the basics of webdev with their responsive web design certification. Another resource that people seem to really love is the Odin project, which is another textbased curriculum that also links to other helpful resources for further learning. And in addition to the basics, they have curriculum for Ruby on Rails and full stack JavaScript. And one more resource that you may like is Scribba. They're an online learning platform that has a video-based curriculum and has a built-in code editor so that you can follow along with the videos. They have both free and paid content. And they have quite a bit in the free tier,

3:49 including some full stack courses. In addition to HTML, CSS, and JavaScript, there are some other technologies that you should get familiar with. The terminal, also called the command line, npm, and git and github. The terminal is a text interface of your computer files and folders, and you can type into it to run different commands. To learn the command line, MDN has a textbased crash course on how to set it up and use it. And Traverse C Media has a video crash course on how to use a command line for beginners. One of the most frequently used tools on the command line is npm or node package manager. npm is a tool that you will definitely be using, especially as you work with more advanced JavaScript technologies like React. It allows you to install different pieces

4:34 of software called packages on your computer via the command line. You can learn how to use npm with the official npm docs. And I also have a video on my channel that explains npm for beginners and how to install and work with it. The last tool that you're going to want to learn as a beginner is Git and GitHub. Git is a version control system that tracks all the changes that you make to your code files. It lets you revert mistakes in your code and makes working with other developers a lot easier. You can learn Git via their online documentation which includes a free book called ProGit which you can read right in your browser. GitHub is an online platform where you can host your Git repositories as well as discover other people's repos and contribute to open source projects. You can learn how to

5:20 use Git and GitHub with this video by Kevin Stratford. I also have a video on Git and GitHub which shows you how to get started with GitHub Desktop, a desktop app that lets you work with your repositories via a graphical user interface compared to the default command line interface. All right, so once you've learned the basics, I do think that it's important to spend some more time getting good at building layouts with CSS, meaning getting all the elements on the website sized and positioned correctly. This involves using flexbox and grid, two very important CSS features. So, here are some resources that I've used a lot as references when I'm building layouts. Now, the ones that I've used by far the most are the CSS tricks flexbox and grid guides. These are great because they contain all the

6:06 different flex and grid properties along with visual illustrations of what the different property values look like. In addition, Josh Ko has a fantastic blog with interactive guides to both flexbox and grid. These are really great if you're still figuring out how flexbox and grid work or you just need a refresher. And while you're there, check out his other blog post on CSS and JavaScript because he is incredibly good at explaining complex topics and making them more understandable. Once you're feeling more comfortable building layouts from scratch with CSS, then you may want to learn Tailwind CSS. Tailwind is a CSS framework that uses utility classes to load different CSS style rules. It's super popular and would be a good skill to add to your tool set. They have really great documentation that'll get

6:51 you up and running. But if you like video tutorials, the YouTube channel JavaScript Mastery has a video on how to use the newest version 4 of Tailwind. So, we've talked about more CSS that you can learn. Now, let's look at some more areas of JavaScript that you can learn. React, TypeScript, Nex.js, and Astro. React is a JavaScript library that allows you to build user interfaces using separate individual pieces of code called components for different parts of the UI. It's currently the most popular JavaScript library or framework. You'll also need to use a build tool that does things like bundle your JavaScript files and optimize them for the web and to run the web app server. Right now, Vit is the most popular one and pretty much every recent learning resource, including all the ones I'll be sharing

7:36 next, use VIT. Now, one other thing to note that at the time of this recording, the newest version of React is 19. So, to learn React 19, I recommend the following. Bob Surle has a free React course that's been updated to cover version 19. You can go through it either on Scribba or on Free Code Camp's YouTube channel. JavaScript Mastery also has a full course on React 19 on YouTube. And the official React documentation is good to have on hand when you need to look up references and get code examples. After React, you can look into learning TypeScript. It's a strongly typed programming language that builds upon JavaScript. This helps you to catch type errors earlier on in your code editor before it gets compiled back to JavaScript in the browser. To learn

8:22 Typescript, you can follow the official docs which include the TypeScript handbook. There's also Jack Harrington on YouTube with his NOBS TypeScript playlist and Matt PCO has a free course for beginners Typescript. Now after Typescript, the next thing I would recommend to learn is Nex.js, which is a full stack React framework for building web applications. It supports client and serverside rendering and static site generation. To learn Nex.js, the Next.js website has a free interactive tutorial that you can go through. Dave Gray on YouTube has a full stack project that uses Nex.js 15 and React 19. And JavaScript Mastery has a Nex.js 15 crash course. One other JavaScript related tool that I

9:08 wanted to mention is Astro, a JavaScript framework designed to build static content-driven websites like blogs and marketing websites with a focus on speed and SEO. The best place to learn Astro from is the official documentation, especially with the newest version 5 that was released at the end of 2024. All right, so that's it for front-end web development for beginners. Now, let's move on to the back end. So, there's two main parts that make up back-end web development. The programming language and then databases. For the programming language, it can be a little overwhelming to know which one to pick because there are a lot of languages to choose from. But to be honest, you can just pick a language and learn it because when you learn any programming language, you'll not only be learning the syntax specific to that

9:55 language, but you'll also be learning programming principles which you can apply to other languages. One other way that you can decide which one to pick is by looking at local job boards and seeing if there are any trends in what languages are being mentioned the most in job listings. So, I wouldn't stress too much about the choice, but I am going to cover what seem to be the most popular languages right now. Now, the one that you're probably hearing the most about is NodeJS, which is a JavaScript runtime environment that runs on the server. To learn Node, you can follow the official documentation on node.js.org. Dave Gray also has a YouTube video where you can learn Node, ExpressJS, a Node framework, and MongoDB, a NoSQL database. The next language I wanted to mention is Python, which is liked for

10:41 its beginner-friendly syntax, and it's also used in data science. You can learn Python via Harvard University's free CS50 introduction to programming with Python course or you can use the University of Helsinki's Python programming MOO or massive open online course which they run every year. Next up is Java. Java has been around for a long time and it's not as hyped as say JavaScript, but don't be fooled because it is still used a lot for enterprise applications. You can learn Java through the official doc site on YouTube by programming with MSH's course or free code camp's Java course. The next language I wanted to mention is C. This is actually the first programming language that I learned when I was starting out and I personally really like it. In addition, C is used

11:28 in game development with the game engines Unity and GDAU. So, if you think you might be interested in gamedev, C might be a good choice for you. You can learn C via a course by the Centria University of Applied Sciences in Finland as well as a C# for beginners course made by Microsoft. And the last programming language on the list is PHP. PHP is a language that some people love to hate, but it is still used a lot with WordPress and with the very popular Laravel framework. So PHP is not going anywhere. You can learn it on the PHP the rightway website, which is a full book that you can read on the web. And you can also learn it on YouTube from Program with Gio who has a video course on the newest version PHP8. All right, so now let's look at

12:14 databases. Databases are used to store information for the website content or to store information submitted by users of your web app. The two main types of databases are relational and non- relational. Relational databases store data in rows and columns, sort of like a spreadsheet. And the collection of those rows and columns is called a table. And tables in a database often have relationships to each other, hence the name relational database. To interact with the data, programmers use structured query language, often called SQL or SQL. So relational databases are often referred to as SQL databases. PostgresQL seems to be the most popular and liked SQL database system. You can learn it from the official docs and free

12:59 code camp has a YouTube video teaching it as well. The other type of database is non relational or no SQL. Non-reational databases don't have as strict of a structure and may store data in different formats other than tables. One type of non-reational database are document store types which store the data in documents like in JSON format. MongoDB is a type of document database which is very common. The best way to learn MongoDB is through the official MongoDB University website. Another type of non-reational database type is key value store where the data is stored in a dictionary with each item having a key and a value. One type of this format is Reddus which is short for remote dictionary server and you can learn

13:45 Reddis from the official docs. So that's the simple road map if you're a beginner for web development. But if you need more details on what to learn in backend or front end, I highly recommend utilizing roadmap.sh which came in really handy when I was creating this guide. They have official road maps for front-end development, back-end development, and they have beginner-friendly versions of both so that you can look at the overall bird's eye view of what you need to learn without getting too caught up in all the details right away. They also have detailed road maps for specific skills like Git and GitHub, JavaScript, and more to make sure that you cover all your bases as you're learning. Now, if you're a beginner, you might be watching this video and feeling a little overwhelmed at all the different languages and technologies that we've

14:31 covered here. But one really important thing to remember is that learning web development is going to take time and it's not going to be easy. In my opinion, going from the very beginning of the road map, it could take you one to two years or even more to get through everything. So, if you're at the very beginning of your coding learning process, try to have some patience with yourself and don't try to rush through things or worse, get burned out and eventually quit altogether. The most important thing is to figure out what's feasible for you personally and just try to stay consistent. Another tip I have when you're learning is to practice building websites because this is where you'll get to put all those skills that you've been learning into action. If you don't know where to start with that, check out my second channel, Coder Coder

15:17 Builds, where I build websites from front-end mentor step by step and I explain the entire process as I go. All right, so that's the roadmap video. I genuinely hope that you found this video helpful for you. If you have, let me know down in the comments. And as always, thanks for watching and we'll see you in the next one.