Academind Logo

Getting Started with Web Development in 2021

Web development can be complex, so it might not look like it, but there actually IS a clear path that you can follow, when it comes to getting started with web development in 2021.

Created by Maximilian Schwarzmüller

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.

But here's the good news: Whilst web development definitely comprises many parts, getting started with it doesn't have to be difficult!

All you need, is a structured guide!

Working as a freelance web developer and having taught more than 1,000,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. Learn Server-Side Development

  5. Learn how to work with Databases

  6. Pick up a Frontend Framework

  7. Master the Basics

  8. Explore the Development Ecosystem

  9. Experiment with Advanced & Alternative Concepts

#

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.

#

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.

#

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.

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

You already learned about the core basics you need to build basic websites: HTML, CSS and JavaScript.

To build highly sophisticated user interfaces (e.g. something like Google Docs), you might want to consider diving into building SPAs and picking up some frontend JavaScript frameworks. More on that later.

For the moment, it makes most sense to dive into backend (server-side) development. Because most websites don't just need a nice-looking user interface but also some logic that runs on a server - for example some code that stores user input in databases or fetches data from databases.

#

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.

Why should such tasks run on a server?

For security and performance reasons - and also because some data needs to be stored in a central place (i.e. the server) instead of the client's computer.

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 typically 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.

NodeJS is a JavaScript runtime that allows you to run JavaScript code on the server - i.e. outside of the browser.

You already learned about JavaScript earlier: It can be part of websites to add interactivity.

With NodeJS, you're not limited to running JS code in the browser (and therefore on the frontend, i.e. the client's computer). NodeJS is a runtime that allows you to execute JavaScript code anywhere. With it, you can therefore write server-side code.

Express.js is a framework for NodeJS. That simply means that it adds utility functionality, gives you certain rules on how to structure your code and simply makes writing NodeJS applications a lot easier! You don't have to re-invent the wheel all the time and write all the code on your own if you use a framework like Express.

Of course there are alternatives though - both regarding the programming language (PHP, Python, ASP.NET, Java and others) 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.

These tutorials teach you these technologies:

#

Learn how to work with Databases

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.

Both SQL and NoSQL are basically "database philosophies", they're not ready-to-use databases.

Instead, there exist database engines that use these "philosophies".

For SQL, the most popular engine is MySQL. It's free to use!

For NoSQL, MongoDB is the most popular option.

Of course, just as with the server-side programming languages, there are alternatives - but to get started, these main options will do.

And as mentioned, I do recommend that you go with MongoDB. It's easy to use, especially if you have worked with JavaScript - because the MongoDB query language is very similar to JavaScript.

#

Pick up a Frontend Framework

Once you learned about server-side development, you have all the core basics you need! You can now technically build any kind of website!

Now, you're ready to dive deeper and explore the more complex parts of web development. For example, you can dive back into frontend development and learn about frameworks that make building complex user interfaces easier (just as you learned to use Express.js as a NodeJS framework to make writing server-side code easier).

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:

#

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 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.

#

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:


#

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.

Recommended Courses