Created by Maximilian Schwarzmüller
    Last Updated on April 17, 2019

    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:

    1. Learn how the Web Works
    2. Dive into the Basics
    3. Understand the Different Types of Web Apps
    4. Pick up a Frontend Framework
    5. Learn Server-Side Development
    6. Master the Basics
    7. Explore the Development Ecosystem
    8. 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.

    Since you learned how the web works (you did, right?), you know that the three basic languages you have to know are: HTML, CSS and JavaScript.

    These tutorials teach you these technologies:

    Also explore our resources on this page - for HTML, CSS and for JavaScript.

    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:

    • A static website where HTML is stored on the server and served to the client. CSS and JavaScript might also be part of such a website.
    • A dynamic website where HTML is generated on the server (per request) and served to the client. CSS and JavaScript might also be part of such a website.
    • A “Single Page Application” (SPA) where you only get a single (static) HTML page + a bunch of JavaScript (and CSS). JavaScript then takes over in the browser and dynamically re-renders the website (“web app”) as required.

    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

    There are three major frontend JavaScript frameworks/ libraries that you can choose from: Angular, React.js (it’s actually a library, but we can ignore this difference for now) and Vue.js. These frameworks allow you to build highly reactive web user interfaces (= frontends) by taking away a lot of the nitty-gritty details you’d have to take care about when using “vanilla JavaScript” (= JavaScript without a framework) and doing a lot of behind-the-scenes optimization for you.

    Which of the three should you learn? Here’s my detailed analysis + opinion.

    These tutorials teach you these technologies:

    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:

    1. Picking & learning a server-side programming language
    2. Picking & learning a framework for that language - because working without a framework is simply too cumbersome and error-prone
    3. 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.

    Of course there are alternatives though - both regarding the programming language (PHP, Python, ASP.NET, …) as well as the framework (Hapi, Koa, …). But Google is your friend here and to get started, Node.js is the perfect choice - especially because it uses JavaScript. And you already had to learn that anyways, right? Hence you save the hassle of learning a brand-new language in addition to it.

    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:

    # 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!

    For JavaScript - which is the most important programming language in web development - I’d also recommend that you now dive into next-gen features with our Accelerated ES6 Training Course.

    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.

    That includes:

    • 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:

    You find a detailed comparison (and yet another option, Flutter) in this article + video.


    Static Websites

    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 :)


    Serverless Development

    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!


    Web Components

    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.