Learning Web Development in 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 900,000 students on platforms like Udemy, Pluralsight and of course Academind Pro, 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

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.

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:

• HTML: Diving into HTML (Video + Article), A Complete Introduction (Series of Articles)

• CSS: CSS - The Complete Guide (Full Course), An Introduction (Series of Articles)

• JavaScript: JavaScript - The Complete Guide (Full Course), An Introduction (Series of Articles)

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

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.

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!

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:

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

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:

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

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 JavaScript - The Complete Guide course. It does not just cover the basics but teaches the latest and most modern syntax right from the start.

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.

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.

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:

Build mobile-app like experiences in the browser (no app store required)! My Complete Guide (Full Course) got you covered!

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.

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.