Web Development has definitely gotten more complex in recent years. Becoming a web developer can therefore be overwhelming - not just when you’re getting started, but also once you want to dive deeper.
It doesn’t have to be that complicated though - all you need, is a structured guide!
Working as a freelance web developer and having taught more than 500,000 students on platforms like Udemy and Pluralsight, I sat down to prepare exactly such a guide. Here it is :)
Instead of boring you with a long essay, I decided to give you the core essence of what it takes to become a web developer and how I would recommend commencing through the world of web development. If you follow the steps outlined here, you’ll have everything you need to become a web developer!
Here’s the order of steps you should take - the links lead you to a short description as well as a list of helpful tutorials:
- Learn how the Web Works
- Dive into the Basics
- Understand the Different Types of Web Apps
- Pick up a Frontend Framework
- Learn Server-Side Development
- Master the Basics
- Explore the Development Ecosystem
- Experiment with Advanced & Alternative Concepts
Throughout this article (and also in the video at the top of the page), I’ll point at some of our courses as well as some free resources.
Our courses of course give you more than free resources typically do - you get a way broader coverage, lifetime access, up-to-date content and fast support in case you’re getting stuck. All courses also cover more than just the basics - they will help you along the entire way of becoming a web developer!
# Learn how the Web Works
It might sound trivial, but too many people skip this step. You need to understand how the web works - there’s no way you can work as a web developer if you don’t know that.
Yes, this is “boring theory” but it’ll only take you half an hour to an hour - way less then you’ll lose if you skip this step and therefore dive into the wrong topics.
This article and video contains all the information you need to get started.
Read and watch it carefully, this should be your first step towards becoming a web developer. Sidenote: It’s even worth a look if you already know some basics - you might still learn something new!
# Dive into the Basics
With “the basics”, I mean the core languages/ technologies you need to learn as a web developer - web development is all about writing code after all.
These tutorials teach you these technologies:
- HTML: Diving into HTML (Video + Article), A Complete Introduction (Series of Articles)
- CSS: CSS - The Complete Guide (Full Course), An Introduction (Series of Articles)
At this point, you don’t need to dive into advanced features! Simply focus on learning the fundamentals.
For the courses I linked, that means that you don’t need to go through them from A - Z. Take the first few sections until you got a solid understanding of the technologie and why (and how) you use it.
# Understand the Different Types of Web Apps
Of course, web development is about building web sites. But you might have heard the term “web app”. What’s the difference? And how do you build such a web app?
It turns out, that there are essentially three kinds of websites you can build:
You can learn more about these types in this article + video.
After going through that article & video, you should have a good understanding of how these types of websites differ and when you would use which approach.
I personally find it to be the most fun to then continue with frontend web development. Whilst every type of website has “a frontend” (=> what the user sees), building an SPA is definitely how you learn the most about frontend web development.
Therefore, it’s time to learn a frontend framework!
# Pick up a Frontend Framework
Which of the three should you learn? Here’s my detailed analysis + opinion.
These tutorials teach you these technologies:
- Angular: Angular - The Complete Guide (Full Course), Official Docs (Series of Articles)
- React.js: React.js - The Complete Guide (Full Course), Official Docs (Series of Articles)
- Vue.js: Vue.js - The Complete Guide (Full Course), Official Docs (Series of Articles)
Again, watch the video at the top of the page to understand how far you should venture into these courses/ topics at this point. There’s no need to master these technologies right now.
# Learn Server-Side Development
As you learned, web development is about two main areas: Frontend development and backend development. We had a look at frontend development - the obvious next step is to learn backend (server-side) development as well.
You have tasks that can or should only run on a server - storing user data, complex operations, registering product orders etc. These would all be tasks that happen on a server.
Server-side development is made up of three main parts:
- Picking & learning a server-side programming language
- Picking & learning a framework for that language - because working without a framework is simply too cumbersome and error-prone
- Picking & learning a database which you work with on the server (i.e. to which you communicate from your server-side programming language)
I would recommend learning Node.js as a server-side language - together with the Express.js framework for it. That’s an extremely popular language + framework combination which is in high-demand and capable of powering any kind of web app.
Regarding the database, you have the choice between SQL and NoSQL databases - this video + article explores the differences. I would recommend going with MongoDB - it’s pretty easy to learn and extremely powerful.
These tutorials teach you these technologies:
- Node.js + Express.js: Node.js - The Complete Guide, (Full Course, includes Express.js), Node.js + Express.js (Series of Articles)
- MongoDB: MongoDB - The Complete Developer’s Guide (Full Course), Official Docs (Series of Articles)
# Master the Basics
At this point, you have a very good understanding of the core fundamentals and the parts that make up web development.
It’s now time, to dive deeper into all these basics. The official docs of frameworks and languages (for the basics, MDN) are a good place to dive deeper. And of course all of our courses - none of those stop after the basics, they all dive deeper!
If you are into Angular and Node.js, combining both in the so-called “MEAN Stack” (MongoDB, Express.js, Angular, Node.js) is pretty popular. We got a course on that, too.
If you went with the courses, you can simply dive into the later course modules - watch the video at the top of the page to learn which parts of a course are “basic” and which parts are more advanced.
# Explore the Development Ecosystem
At this point, you already are a web developer - and you will already have encountered some additional tools, techniques and technologies that haven’t been mentioned in this article. That’s exactly how it should be!
At this point of your journey, a lot of the complexity you might’ve faced at the beginning will feel way less complex.
It’s now time to dive deeper into the tools you use ever day.
- Getting the most out of your IDE (this will improve your overall speed and efficiency). For Visual Studio Code, this article + video should be helpful. Also explore the official docs.
- Understanding how to debug web applications efficiently - both on the client-side and on the server-side. The Chrome DevTools are THE most important tool when it comes to debugging web apps. This official guide covers them thoroughly and in great detail.
- Diving into Git and GitHub, tools for managing your source code so that you can easily (and safely!) store it, revert to previous versions and collaborate.
- Learning more about the build tools and project setups you work with every day (especially in frontend web development). Webpack and Babel are the two most important tools in modern (frontend) workflows. Whilst you don’t need to master them (using pre-built project setups or CLIs is the way to go!), I would recommend that you at least explore how they work.
# Experiment with Advanced & Alternative Concepts
Web development has way more to offer than just “normal” websites or single page applications!
Interesting, advanced topics that you can and should dive into as a web developer are:
Progressive Web Apps (PWAs)
Build mobile-app like experiences in the browser (no app store required)! My Complete Guide (Full Course) got you covered!
Cross-platform Apps (Native Mobile Apps with Web Technologies)
You can use web technologies (HTML, CSS, JS) to build real native mobile apps, which are then distributed through the app stores. Yes, it’s really that amazing! There are multiple options:
- Ionic (Full Course, using Angular)
- React Native (Full Course, using React)
- NativeScript (Full Course, with Angular)
I mentioned static websites earlier already. For a lot of use-cases (e.g. a personal blog), they can be better alternatives to SPAs or server-side rendered web apps. You can explore approaches like the JAMStack to learn how to build such a website.
Web App Opimizations
As a more general topic, you of course also should make sure that your web pages load fast and run fast. This is a broad topic but you can start by googling for terms like “web app image optimization” or “lazy loading” and you’ll find plenty of articles that lead you down the rabbit hole :)
Learn how to build backends where you focus only on your code and not on the typical setup and routing boilerplate. Our complete course gets you started!
Frontend frameworks like Angular are extremely helpful. All three major frameworks embrace “components” as their core building block - but all these components can only be used inside of each framework. Learn how to build cross-framework web components (a feature built into modern browsers!) to re-use your logic in any web app you might be creating! Again, we got a complete course to get you started.