So you want to become a web developer or you want to become a better web developer and that's still a great idea in 2024 just as it's been in the previous years. And as I discuss in various podcast episodes, neither the rise of AI nor all those layoffs we saw in this in the last year change anything about that. But how do you then get started as a web developer or how do you dive deeper? What should be your next steps? That's what I'll take a look at in this video and of course below the video you find timestamps so that you can dive right into the parts that are most interesting to you and you also find links to courses I offer in case you want to learn anything about those topics I'm mentioning here because those will teach you all these things in depth. But with that, let's get started. How would you become a web developer in 2024? Well, you could get started by searching for a web development roadmap and you will likely find one of those complex huge roadmaps you can find out there on the internet which give you super comprehensive roadmaps about all the technologies you could learn if you want to dive into web development. And my recommendation would be that you ignore them for now because these are amazing resources which you might want to revisit once you have some web development knowledge but at the beginning they'll just be overwhelming and they also contain a lot of things, a lot of topics, features and technologies which you don't necessarily really need to know. Some are outdated and not used anymore, some are pretty niche and therefore ignore them for now, come back to such roadmaps later once you already have a solid understanding of the core web development technologies and topics you need to know which is what this video here is about. And therefore with that out of the way, how would I recommend that you get started? Well, by understanding the basics first and that starts with understanding how a website actually ends up on the screen. And here it's important to understand that it's in the end the browser of a visitor of a website that behind the scenes sends a request to a so-called server to some computer out there in the world sitting in some data center which then sends back a so-called response that contains a document that's then displayed by the browser and that's the website you're seeing so that document contains the content that should show up on the screen for example and a bunch of other things as well. And understanding this and how the web works is important and then it's important to understand and learn how you can prepare such a document on your own. And later in this video I will also explore how you can manipulate this server which sends back the document such that it sends back different documents with different content to different visitors. But initially you should learn how that document is prepared and that document is in the end prepared with help of three main languages and these would be HTML, CSS, and JavaScript. HTML is a markup language that in the end defines the content of the documents that are sent back from the web servers to the visitors who visit a website. CSS is then a language that's used to style this content so that it's not ugly because otherwise it would be. And JavaScript is a language that then can execute in the browser of your visitors to add interactivity to a website for example to open some overlay when a button is clicked. And you will always need these essentials so you should learn how to write HTML code, you should at least learn some basic CSS code, you don't have to become an expert if you don't like it, many developers don't, I personally do like it, but you do need the basics, you do need to understand how it generally works, and you absolutely should learn JavaScript because as you will see this is a language you can also use in plenty of other areas and it will be super helpful if you do know JavaScript. Now you can get started writing some basic HTML, CSS, and JavaScript code with any text editor of your choice with notepad on windows for example but that won't be any fun. Instead you should then as soon as possible also find a real code editor you personally like. My recommendation which is absolutely not a niche recommendation is Visual Studio Code because it's a super powerful extensible and free IDE, an integrated development environment, which gets used by millions of developers all over the world because it just is awesome. There also are alternatives which you could look into but if you don't know what to use simply use that, it'll be a good choice. And it's this code editor that will make writing code more fun because you get smart suggestions, syntax highlighting, the code gets structured for you, it's easier to catch errors, and so on. Now as you're playing around with those essential languages and you're building basic dummy applications you will probably soon notice that something's missing because whilst you're able to build basic dummy pages with those essentials you will probably soon notice that for example if you want to build an online shop you can't really store user orders anywhere because you just got a document with some dummy data inside but how can you send data back to the thing where the document is coming from? How can you store that data? Or how could you generate those HTML documents dynamically so that the same page can be used for different products and you can load different product data and maybe also update that product data dynamically and get a new page? How does this work? Well for that you need a backend because thus far with all those essentials you only worked on the frontend. You worked on the content that's loaded into the browsers of your visitors which is amazing because that is what every website needs but it's often not enough. Instead often you also need a backend. You need code that runs on a so-called server. And the idea here is that you have such a server, some computer, running somewhere on the internet, owned or operated by the person who owns or operates a website and it's on that server where some data is stored and where those HTML documents are dynamically generated upon incoming requests and sent back to the visitors of a website. And it's on that server where that so-called backend code would be executed. So code that's not executing in the browsers. Now the good thing is that you can actually still use JavaScript for that backend code whilst thus far you only used it on the frontend in that HTML document that's loaded in the browser. There also is a runtime for JavaScript that allows you to run JavaScript outside of a browser on any computer of your choice. For example on your local computer but also on such a server. And that runtime is called Node.js though there also are alternatives. Namely Deno and Bun are other alternative runtimes that would also allow you to run JavaScript outside of a browser. But Node.js is the most popular one. So learning Node.js would be a great next step so that you're able to write such backend code. Though with just Node.js alone you probably won't have too much fun. It can quickly get pretty cumbersome to write more complex applications with that which is why you should also typically pick up some backend Node.js framework as it's called. Some extra library that uses Node.js and exposes extra features which you can use in your code in the end. For example Express.js. It's pretty old but also pretty popular and stable. This would be a great choice to learn as a next step so that you can build more powerful backend applications. Now speaking of backend applications, backend code and libraries it's also worth noting that whereas in the browser on the frontend you're essentially limited to HTML, CSS and JavaScript you have more choices on the backend. Node.js makes a lot of sense because it uses JavaScript which you already know but you could also learn PHP, ASP.NET, Rust or other languages like Go and so on. Because there's a broad variety of programming languages you can use here because you have basically no restrictions. And hence you definitely might want to explore some alternatives here. Though it of course also is fine if you stick to Node.js. But especially PHP for example is also super popular and does actually power the majority of the worldwide web or of the websites of the worldwide web I should say. Now just as with Node.js you typically also have to pick up some framework to simplify the process of building such a backend application though no matter which programming language you're using. For PHP for example Laravel is a super popular and powerful and stable and well-maintained framework you might want to look into. Now with a backend programming language and framework alone you still won't be able to do too much though because you typically also need a database to for example store orders placed by users or to store product data which is then used to dynamically generate such HTML documents which are being sent back. And here a very popular and common choice is a SQL-based database engine like MySQL or PostgreSQL or SQLite to get started. These are all database engines which in the end allow you to set up a database and run a database where you can use the SQL query language in the end which looks like this to store data in the database or retrieve data from the database. And you can write pretty complex queries there as well to for example also filter data, order data or combine data from multiple tables. So learning how to work with SQL will definitely be a good idea because SQL-based database engines get used on many websites. That being said it's not the only choice you have though because there also are NoSQL databases. And as with all these technologies you have almost an endless amount of options but a particularly popular NoSQL alternative to these SQL databases would be MongoDB. The idea here is that unlike with SQL you typically don't split your data across a lot of tables but instead you keep it closer together and you store structured data documents in your database. You can then still query that data but it's simply the way you store it and retrieve it that's different. Now different database engines and systems can be good for different use cases but I simply recommend that you learn at least the basics of both of these main worlds so to say SQL and NoSQL databases so MySQL and MongoDB for example so that you're able to dive deeper into both areas depending on what you then are most interested in or what you need for your job. Now at this point chances are high that you're able to write back-end code which then dynamically generates HTML documents that are sent back to the client so that they're displayed in the browser and made beautiful with CSS and maybe they also have browser-side logic with browser-side JavaScript code and therefore what you're in the end building here are so-called full-stack applications because you have both the back-end and the front-end working together. The back-end does its thing to then produce code and content for the front-end and that's a pretty popular area of web development and a good thing to be able to do but it's not the only way of going about web development. Instead you also have websites where the front-end is decoupled from the back-end and that works with help of so-called single-page applications which essentially means that the server only sends back one HTML document to the client so to the browser and then there it's that JavaScript code that runs in the browser that continuously updates the UI and updates what the user sees therefore and those updates happen depending on what the user does and which data might be fetched behind the scenes and that's another important thing you should understand and be able to do. Fetch data behind the scenes with help of client-side JavaScript code because sending a request and rendering an HTML document on the server and sending back that document is just one way of displaying content on the screen. Another way is to build such a single-page application where you dynamically fetch data behind the scenes and that can be simplified with help of popular front-end JavaScript libraries and frameworks like React, Angular, Vue or Svelte and some others and I therefore also recommend that you explore those frameworks. You don't have to learn them all and you shouldn't learn them all but you should at least take a look at some of them and understand how they generally work and get a feeling for which one you personally like the most. Now as you're working with those JavaScript frameworks chances are high that your front-end applications are going to become a bit more complex and therefore you often also need more complex styling to make them look good. You need more complex CSS code and therefore you can either learn more about CSS and about all the features it has to offer which are really awesome or if you don't like CSS like many developers unfortunately do you can also dive into a CSS framework to simplify the process of adding styles to your website just as you're using a JavaScript framework like Angular or Express on the back end to build more complex JavaScript-based applications. Now for those CSS frameworks there again are a lot of choices. Bootstrap for example has been pretty popular in the past and still gets used on a lot of websites. The idea here simply is that you can add some classes as they're called to elements to give them certain styles and looks but nowadays I would recommend that you actually start by learning Tailwind CSS which is another CSS framework that's pretty popular and the idea here still is that you add such classes to elements to give them certain styles but unlike with Bootstrap CSS these classes on their own add way less styles per class and it's in the end then the combination of classes that you add to an element that achieves a certain look and behavior and this gives you more control and a more granular way of adjusting the look and feel of your website whilst still making sure that you don't really need to learn a lot about CSS. Now having some CSS knowledge will help with working with those classes and understanding what they do but basic knowledge will suffice and therefore I would recommend that if you don't want to dive deeper into CSS you take a look at frameworks like Tailwind CSS. And it's then these JavaScript frameworks and libraries that can be used to build such a decoupled front-end where all the UI updating logic is handled by that front-end client-side JavaScript code and where you then just fetch data that might be needed behind the scenes from the back-end. This also implies that you need to learn a new way of handling incoming requests and sending back responses on the back-end because chances are that thus far you always sent back a brand new HTML document that contained any content that should be displayed and this would now change if you have such a decoupled front-end. You would instead typically build a dedicated decoupled API often a so-called REST API which is still a back-end that accepts requests but a back-end which then sends back responses that only contain data instead of entire HTML documents. And that's a pretty popular way of building web applications as well and therefore you should also learn about it. An alternative to such REST APIs would be GraphQL APIs which are still about getting requests and sending back data responses but they basically handle requests slightly different and parse the request data and construct the response data slightly different you could say. That being said REST APIs are the more common form of APIs and if you had to choose what to learn I would recommend focusing on REST APIs because the important thing is that you simply are able to build these decoupled front-ends and back-ends or if needed these integrated full-stack applications where the HTML document is rendered on the back-end. Both things are used out there in the wild and both things are therefore things you should be able to work with. Now this is now also a good point where you should make sure that you really fully understand how the web works. Chances are you already learned it before when you got started with back-end development and so on or maybe even when you got started with the essentials but you should make sure that you really understand the idea behind requests and responses. You should have heard about caching and understand how that works and that there are different kinds of caches. Caches in the browsers of your visitors on servers which cache data that might have been fetched from a database and so on and whilst you don't need to be an expert on those topics you should at least understand how they generally work and you should also make sure that you learn how to authenticate users, how to store passwords securely, not in plain text for example. You should also learn about website security in general, about things like cores, cross-site request forgery or cross-site scripting attacks which are super important topics you absolutely have to know about so that you're building secure websites and not some insecure mess. Now assuming you're working with Node.js you also might want to look in learning about some meta frameworks that exist for those front-end frameworks like React and Angular. Namely you might want to explore Next.js and Remix for React or Analog.js for Angular or Nuxt for Vue and so on because these meta frameworks as they're called in the end simplify the process of building full-stack applications, fully integrated full-stack applications with those front-end libraries and that actually makes it then easier to again transition from a world where you have a decoupled front-end and back-end back to an integrated full-stack application world. Not that this would necessarily be better, a lot of companies have these decoupled ends instead, but it still is something that's pretty popular these days and that seems to become more popular. Therefore I absolutely recommend also learning about those meta frameworks because they can make building full-stack applications actually quite a bit easier and powerful you could say than if you're using just Node and Express for that for example. It's also worth noting though that as a web developer you don't necessarily have to build all these different ends, front-ends and back-ends, on your own. You could also look into using some content management systems like WordPress which is the most popular content management system in the world. Now the idea behind a content management system is that you don't have to write too much code, instead you install a piece of software on a server and you then get some administrator UI which you can use to set up content, control how it's going to be rendered and build an entire website with ease with writing little to no code. Now of course the idea behind being a web developer typically is that you want to write code and that more complex websites might benefit from some code being written instead of a content management system being used, but you will find a lot of websites out there that are using WordPress behind the scenes and you might want to explore using it on your own or especially if you for example plan to work as a freelancer, you also might want to make sure that you're able to utilize content management systems like WordPress and help clients that are using them. So that's definitely also an important topic to look into. Now somewhere between using such a content management system and building a back-end completely from scratch on your own are back-end services like Firebase or Supabase which in the end are tools you could say which you can use to simplify the process of building back-ends for your front-end applications. These are in the end tools and services that make it easier to quickly get started with a database, with the back-end for user authentication, with file storage and a lot of other things as well and you therefore might want to explore these tools as well since they can also vastly simplify the process of building back-ends for your front-end applications. They are not exactly the same as a content management system, you still have to write code on your own there and do more on your own, but they definitely do not require as much code to be written by you as you for example need to write if you're building everything from scratch on your own which of course also can have its advantages since you control everything but as always in life it's a trade-off and you should therefore also learn about such services. So now at this point you built a website. Well probably you built dozens or hundreds of websites already. Of course they're not too useful if they're just sitting on your computer though. Instead you at some point probably want to deploy a website as it's called. You want to make sure that it's available to visitors from all over the world and therefore you should learn how to do that and there is a vast variety of hosting providers you could use to host your website. So here I'm talking about providers who in the end give you that server computer on which your back-end code runs because it's also that back-end code that ultimately in the end serves that front-end code to your website visitors and you need a provider that gives you access to such a computer. And here popular choices are Vercel or Netlify if you're working with those meta frameworks I mentioned earlier if you're building a Next.js application for example but you could also look into providers like AWS or Azure which basically give you everything starting from an empty basic computer which you can configure the way you want all the way up to some managed hosting services so that you can find the solution you need to host your website and expose it to visitors from all over the world. Now here getting started with providers like Netlify typically is easier whereas using providers like AWS or Azure is more complex but also gives you more control because as mentioned there you can for example essentially rent a computer somewhere in one of their data centers and you can then configure it just as you need to and put your website and server code on it, start the server on that computer, expose it to the internet and you're ready to serve customers. Though of course there is a learning curve here as with all those topics but it's definitely something you should also explore and especially AWS and Azure can also be super interesting to dive deeper because there are also lucrative consulting jobs to be found in that area especially if you get those AWS or Azure certifications but that's just a side note. Now it's also at this point where you definitely should also explore helpful tools that you can use as a developer to make your life easier. Most importantly Git which is a version control tool. Now you might already want to learn it earlier actually but at least now you should definitely dive into it because as you're writing code you will probably also sometimes mess something up and you might want to go back to an earlier code snapshot to restore an earlier working state of your code and that's exactly what Git allows you to do for example. It is a tool which allows you to create code snapshots to which you can go back if you mess up. It also has way more features to offer and it can also simplify the process of deploying websites because many deployment providers and hosting providers actually integrate with Git and GitHub which is a platform where you can store your Git managed code in the cloud so that it's not just on your computer but in the cloud in case your computer gets damaged or you want to share that code with others and it's those hosting providers which often integrate with GitHub so that you can set up entire workflows where you create a new snapshot you push that into the cloud and that automatically triggers a deployment workflow. That's definitely more advanced but it is how in the end you will most likely end up deploying your websites because manually dragging and dropping your files that should be deployed is typically not what you want to do. Automating that process is indeed the part where things get interesting and speaking of that there also are related services and tools you might want to explore. For example GitHub Actions which is a service provided by GitHub which is that platform that allows you to store your Git managed code. Remember GitHub Actions simply is all about setting up entire workflows that will be triggered on a broad variety of events which you can define so that you can for example build and deploy your code, send an email to someone when you deploy a new version and so on. So that's definitely something you might want to explore. And kind of related to that you also might want to explore Docker. The idea behind Docker is that you can put your code into packages into isolated environments you could say which contain everything that's needed to run that code like the operating system and any extra tools that might be needed and you can then deploy these containers as they're called and by using this approach you make sure that you deploy the code in a package in which it definitely will run which is way better than putting it on some random computer which may be configured in some way you maybe don't know or you always have to tweak manually. That's why Docker and this approach of putting your code into such containers is super popular and you absolutely should also learn about Docker at some point. Though I will say that it's definitely a more advanced concept and should not be at the start of your learning journey but that's why I'm mentioning it now and not at the beginning. Now related to Docker you at some point might also want to learn Kubernetes which in the end is an orchestration tool that makes it easier to deploy complex applications that might consist of multiple such containers that need to work together. Now at this point we're definitely in far more advanced territory nonetheless Kubernetes is definitely also a topic or a technology that will be used in many companies and that you might want to explore at some point. Other things you might want to explore at some point are for example languages like TypeScript which in the end enhances JavaScript you could say by adding types to it or strict typing to it to be precise which can reduce the amount of errors that may live in your code. It can be a super useful language that's actually also used by many companies and teams. And you should also learn about testing. You should learn about tools like Vitest, Cypress or Playwright which allow you to write automated tests which in the end is code that executes to test your code. Yeah that's really a thing and the idea here is that you don't have to test everything manually. Now you will still do manual testing but by writing such automated tests and by running those tests whenever you change your code you can quickly make sure that some code change you introduced doesn't suddenly break some other part of your application. Automated tests are therefore a standard thing in more complex software projects and therefore also something you definitely should learn about at some point. What you should also start using at some point are AI tools that can make your life as a developer easier and I didn't mention them earlier in this video because I really believe that you should start learning about all these things without using AI too much. Because you should definitely use and leverage AI as a developer since it can tremendously boost your efficiency and will be a must-have skill in the future. But if you start using it too early you don't really learn how to write code. You just learn how to use an AI and chances are that this will not be enough in the future. Instead the most useful developers in the future will be those who have a very solid knowledge base and who also are able to then utilize AI tools like GitHub Copilot which gives you smart AI-based suggestions. You therefore definitely should also explore tools like that but don't do it too early. Don't be lazy here, you'll pay the price later. And there would be many other languages, services, libraries, tools and services that could be mentioned here. The idea of this video here was to give you a quick walkthrough. Definitely share anything you find important as well below the video and let me know what you would like to see in a future video. For example as a web developer you can also step into mobile app development with tools like Ionic which in the end allows you to wrap a web application in a mobile app so that you can easily build a mobile app with your web developer knowledge. Or you can use tools like Tauri which allow you to build desktop applications with web development knowledge. But that's really beyond the scope of this video and therefore I hope this video gave you a great overview and helps you decide what you want to learn next and how you best navigate your way through the world of web development.
