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 :)
This tutorial will walk you through all the steps you need to take to get started as a web developer - there also is a video that belongs to this article.
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
- Learn Server-Side Development
- Learn how to work with Databases
- Pick up a Frontend Framework
- Master the Basics
- Explore the Development Ecosystem
- 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.
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.
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:
- Picking & learning a server-side programming language
- Picking & learning a framework for that language - because working without a framework is typically 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.
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.
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)
#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.
#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).
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.
#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.
Related Premium Courses
CSS - The Complete Guide
Master CSS and ensure that your web pages look great!
NodeJS - The Complete Guide
NodeJS is the best choice for getting started with backend development - this course teaches it A to Z!