The Ultimate Never Before Seen Web Development Roadmap

If you’re a beginner looking to get into web development.

Or perhaps have a bit of web development experience, but want to know what things you should learn next.

Or maybe you’re more experienced and want to know what you should focus on next.

Then this will be the best guide you ever go through, and will be far more different than any other kind of web development roadmap you ever looked at…

With so many ways to build a website, it’s tough to know what is the best path, and what you should focus on.

There’s so many technologies, and when first starting out it can be overwhelming.

But this will bring lots of clarity into what you should focus on.

Some of the things I will go over will also be quite unexpected and you don’t ever see them covered anywhere on a web development roadmap despite them being so crucial.

So let’s get into it…

Here’s the first unexpected thing to get into understanding which will help you tremendously on your learning journey.

Most web development roadmaps start with the basic technologies you need to learn, but there’s something you should learn even before that.

How to think…

Yep, this is something that can completely change the way you go about learning this stuff.

How should you think then?

Here is a mental model that will serve you greatly, it is how to think from First Principles.

This is something that helps greatly with breaking down problems or concepts, and coming up with original solutions or ideas.

This is something that even Elon Musk does a lot to come up with innovative solutions for many complex problems.

It is also something that is very relevant when learning web development.

Now what is thinking from first principles?

This is a method of thinking that allows you to break something down and have a deep understanding of it.

Most people have a shallow way of thinking, and when you do this in something like web development, it later makes it difficult to come up with proper solutions.

You end up needing to search through Google and Stack Overflow to see if someone else came up with a solution to your problem because you can’t figure it out yourself.

This is a consequence that comes from not thinking in first principles, you end up having too many knowledge gaps, and can’t even begin to conceptualize how to solve something.

This means you end up just searching for a solution for the overall problem instead of understanding the individual pieces and just figuring out how to make these pieces work together to make the overall system work.

What first principles thinking boils down to is reducing an idea down to the smallest fundamental truths that you can conceive of, and once you get to this fundamental you have arrived at the first principle.

When you understand these fundamentals for let’s say something like web development, this allows you to innovate, optimize things, learn other complex ideas, and also teach others.

What helps is when you can map out these fundamentals and have a way to organize the information.

You start from the first principles, and work your way up.

Let’s say you want to build an app that integrates payments…

Let’s reduce this down to the first principles…

You have the fundamentals of how to structure the information, this is done through the markup language HTML…

This means you must understand this in order to structure the information on the app in a proper way…

Then things need to be laid out and styled, this is done through CSS…

This means you must understand the syntax, selectors, and the rules associated with CSS…

Then once you know these rules, then you have other things you build up from there, like how to lay out different components…

This is where you get into the fundamentals of how float layouts, flex box, and how css grid works…

This gives you the fundamentals of how to properly place elements on the screen…

Then what about different screen sizes, this gets you into the fundamentals of responsiveness…

Then you have the front-end app logic, this comes from JavaScript…

Here you start off with the rules, the syntax, and then build up from there…

Once you understand the rules, then you get into concepts like asynchronous requests, the DOM, object oriented programming, and so forth…

Then each of these concepts have concepts that build on top of them…

You see how this is almost like you have building blocks?

You need to understand the foundation in order to have a deep understanding of the fundamentals that build on top of it…

This is what gives you intuition into how to solve a problem…

Most people when learning web development want the shortcuts…

When you jump ahead to learn the shiniest thing and don’t take the time to properly learn the foundation that the shiny thing builds on top of, then the moment you run into an issue you get stuck…

This is why reasoning from first principles is so important, because if you can’t reason from first principles when solving a web development problem, that means you didn’t take the time to reduce something to the smallest fundamentals and understand that fundamental…

Once you understand JavaScript and the fundamentals that build on top of it, then once you learn a JavaScript framework, you can efficiently solve problems you run into…

If you didn’t take the time to understand the smaller fundamentals that the framework is built on top of which is JavaScript and the concepts that build on top of that…

Then the moment you run into a problem, you’re forced to search for a solution to the overall problem…

For example, you use a JavaScript framework, then you run into a problem with an asynchronous request not working, then the way you approach this problem is by searching for a solution…

Instead if you use first principles reasoning and understand the fundamentals, then you know how JavaScript works and how to debug something, you understand the concept of asynchronous requests and promises that build on top of it, and you can find out what’s going wrong…

Now when it comes to asynchronous requests and promises in JavaScript, a good thing to always ask yourself is, is there something else that this builds on top of?

Once you know JavaScript, are you ready to learn the next building block of asynchronous requests and promises?

Or is there another smaller fundamental that should be taken into account first…

Well in fact there is, and this is why reasoning from first order principles is so important…

Let’s say you understand JavaScript, then you go to make an asynchronous request, and you get back a 403 forbidden error…

How would you solve this issue without jumping into stack overflow and seeing if someone else figured out a solution?

Well you do this by understanding the smaller fundamental of how the web works…

Then to understand how the web works, you need to understand the smaller fundamentals that make the web operate in the way it does…

How are web requests made?

What are web protocols?

What are headers?

What are status codes?

What are cookies and how do they work?

All these things you can break down even further until you get to the smallest fundamental truth…

Then let’s go back to the example of the 403 forbidden error, once you understand status codes, you then understand when a status code like this is used…

You understand that 400 level status codes are client side errors…

Then you understand that a 403 means that the person making the request was forbidden from making it…

Then you can find out why were they forbidden? Why did they not have the necessary permissions to make the request?

Now if you just understood JavaScript, and then jumped into asynchronous JavaScript and promises, you wouldn’t be able to figure out something like this…

Now if you remember, we were breaking down integrating payments on an app by reasoning through first principles…

So where do we build from here?

Now that we understand how to structure information, how to style elements, have logic on our app, understand how the web works, and know how to make asynchronous requests…

Now we get into payments…

Payments are something that takes a lot of logic to implement, so typically you use an API from a third party service to accomplish this…

This now leads you into understanding how APIs work, and this is something that builds on top of how the web works, and if you understand this, then learning APIs isn’t too difficult.

Now when it comes to payments, it’s good to break this down a bit into smaller fundamentals as well in order to have a deeper understanding…

When you understand how payment gateways work, and how APIs work, then you can integrate payments into your app regardless of the third party payment gateway API…

When it comes to APIs, you can break this down into understanding the request and response cycle…

Then you can break down a request, like what is a request method? What is a request header? What is JSON data? What are query parameters?

Then you can break down a response, like what is a status code? What is the data? What other elements make up a response?

Then you can use these things to help understand a payment gateway API, like what is the endpoint I should send a request to? What request method should I use? What should I pass in the request headers? Do I need to pass any data? What format should this data be in? What headers do I use to dictate the type of data that should be used? Is there a library that abstracts some of these things away?

Then further you get down to what determines whether the response was successful? What determines an error? What status codes should I expect? What do these status codes dictate? Is there data that I should expect to get returned? What data is present when the response is successful? What kind of data is present when there is an error with the response? Is there a piece of data like an error message that gets sent back with error responses that can help with determining what went wrong?

As you can see, there’s a lot of smaller fundamentals when it comes to API requests, and when you understand these you can easily solve issues when you run into them…

If you don’t understand them, then you’ll find yourself searching for solutions…

Then if you want, you can break down payment gateways into smaller fundamentals as well in order to gain a deep understanding of how this works…

You can start to think about different smaller concepts…

These third party payment gateway services often have the same features just with a different API…

They have ways to store customers, store addresses, payment methods, make transactions, make subscriptions, process refunds, and these are all fundamentals you see in payment gateways…

They will often have different ways of accomplishing the same thing…

And they will often have many other features as well to help you when it comes to payments…

Then you can break down these individual things further as well if you want a deeper understanding…

For instance how do payment methods work? How do you use a payment method to make a transaction happen?

You can break things down even more, what are the smaller fundamentals that allow you to have a valid payment method and make a transaction?

How do banks work? How do bank accounts work? How do credit cards work? How do debit cards work? How do bank deposits and withdrawals work? How do bill payments work?

You can really break things down a lot, and this is a great thing to do when learning web development to have a really deep understanding of different concepts.

This is what allows you to come up with solutions to difficult problems, and come up with them quickly.

Because you understand the smallest fundamentals, and you understand all those fundamentals that build on top of those, and then on top of those, and when you understand all the components you understand the overall system.

Then if something goes wrong in the system, you can diagnose the component that is causing an issue, and maybe there is something that component is built on top of that is causing the issue, and you can quickly figure out what’s happening.

For instance, maybe you’re using a Python package, and that package isn’t working…

Why isn’t the package working?

When you don’t learn things through first principles, then you’ll be jumping into searching for why it isn’t working and trying to see if someone else solved the issue…

Instead you can break down is this package version compatible with the version of Python you’re using? Is there another package this package relies on that is causing the issue? If so, is that package version compatible with the version of Python you’re using?

When you understand how something like the Python programming language works, how versions of Python differ, how Python packages work, how the versions of a Python package differ, then you can easily diagnose what’s going wrong…

You’ll see an error message, and through your deeper understanding of how these things work you’ll be able to solve the issue…

So we broke down quite a lots of things, so let me summarize where we’re at so far…

We broke down thinking in first principles, then I used the example of an app that integrates payments to walk you through how to reason in this way to build an app like this…

Through reasoning with first principles, we broke down many concepts you need to understand in order to build something like this…

We have the web development building blocks, HTML, CSS, and JavaScript…

We broke down fundamentals that build on top of these…

We broke down fundamentals of how the web works…

We broke down APIs…

And we broke down payment gateways…

Now there’s many other web development concepts as well which I’ll break down…

I won’t be doing this in a first principles way anymore, I wanted to do this when covering the web fundamentals so you understand the importance of learning these fundamentals and not jumping too quickly into the shiniest tools and frameworks…

And also to understand the importance of thinking in first principles and why it can be very helpful when learning web development, or anything for that matter…

Now here are some other web development fundamentals to dive into…

How authentication works, this is what allows you to have users on an app…

There’s different approaches to implementing authentication, and understanding how they work before learning how to implement them will give you a far deeper understanding of them…

This is where you get into basic authentication, session authentication, token authentication, json web token authentication, and so forth…

You want to learn these different approaches, how they work, the pros and cons of them, and so forth…

Then after that you can learn how to implement them, and then how to use a library to help you implement them more easily…

Or you can jump straight to using a library, and then the moment you run into a problem you’ll have no idea how to solve it since you don’t know the components that make up the overall system…

Again why first principles thinking is so useful and why I always recommend diving into the smaller fundamentals and really understanding them before diving into a library…

If you ever find yourself thinking about using a library or framework, I suggest to always do this…

If you want to use a CSS Framework, first learn the fundamentals of CSS, if you want to learn a JavaScript framework, first learn the fundamentals of JavaScript…

This brings us to JavaScript frameworks for front-end development…

These are things like React, Vue, and Angular…

These frameworks allow you to create incredible interactive front-ends, and just make front-end development far easier…

Again, this isn’t something you want to jump straight into just because it’s a shiny tool, the fundamentals that this builds on top of are important to understand as this will put you very far ahead of everyone else that just jumps into these things far sooner than they should.

The fundamentals aren’t necessarily the sexy thing, but what is sexy is when you can solve a problem in no time, when you can innovate, optimize your apps, learn complex concepts quickly, and all because you didn’t jump straight into learning the cool new framework with all the coolest features…

Now once you know how to build interactive front-ends using a framework, then there’s other things to consider after this…

This is where you get into back-end development…

Now when it comes to finding a job, by this point you have the skills to be a front-end developer, this next part is if you want to be a full-stack developer, meaning you can develop front-end and back-end…

Here there’s many options, and when it comes to choosing a framework, I like to use what’s popular, this goes for front-end frameworks too…

This is because this creates the most job opportunities, but it also allows these frameworks to continue to improve over time…

With many people using a framework, more progress will get made for that framework, and it’s a reason why I like focusing on React as a front-end framework…

Then this is also why I like to focus on Next.js as a front-end framework as well, because this is server-side rendered React, and again Next.js is popular meaning lots of progress will be made with this framework over time and lots of job opportunities will also be available…

When it comes to front-end, these popular frameworks will all use JavaScript, so choosing the most popular framework is a good way to make a decision on which to focus on…

When it comes to back-end, there’s many options for languages, you have JavaScript, Python, Java, PHP, and so forth…

Then for these languages you also have different popular framework options…

So for back-end, the programming language becomes another factor on top of what framework is popular…

I personally like Python and Django, as Python is an incredible language with lots of useful libraries, and Django is the most popular Python back-end framework meaning it has the most job opportunities and is likely to progress better than the other framework choices…

Though there are other good options as well for back-end, if you use another language then I’d recommend again choosing the most popular framework for the language as it will more than likely progress better over time…

Then with back-end you need to learn things outside of this too, like databases, and web servers...

With databases you have SQL databases like PostgreSQL and MySQL, and you have NoSQL databases like MongoDB...

Then when it comes to web servers, this is where you learn about things such as Nginx and Apache...

Then there's also other concepts like web hosting and domain hosting...

Then we have concepts to consider outside of just the development process…

One of which is how SEO works…

SEO isn’t necessarily something you need to build websites, but it’s one of those things that go hand in hand with it…

It’s something that makes a website far more valuable as it helps a website rank better in search engines…

Then this leads you into concepts like server-side rendering, which allow you to use a front-end framework while also having your websites well optimized for SEO…

Now when it comes to web development, roadmaps always just break down a million tools and frameworks, but there are far more valuable things to focus on than this…

One of these things is understanding the purpose of a website, then breaking things down from there.

Websites are used for businesses, and are supposed to help drive revenue for a business.

So what makes a website useful for a business?

Is it through learning a bunch of shiny tools and frameworks?

Or is it by learning the concepts of what makes a website help drive revenue for a business?

Well, you can build a website using the best tools and frameworks, best programming practices, it can be the highest quality engineered website in the world, but if it doesn’t drive revenue for a business your website is useless…

This may sound harsh, but this is reality…

Websites are used to help run businesses, and if your website isn’t fulfilling the role it’s meant to, your website is pointless for that business…

This is why after learning enough fundamentals to build a website, I don’t recommend you keep jumping from one shiny thing to the next…

Learn what makes your website actually valuable, because it’s not necessarily just the tools and frameworks…

Don’t get me wrong, these things are important, but the point is that you don’t need to learn how to build websites using every tech stack imaginable…

This will not help your website be valuable…

This is where you want to think about the concept of how a business operates online, and start breaking things down from there, again through our handy first principles reasoning…

Then you can use these concepts in your websites in order for them to actually drive revenue to a business…

What gets someone to buy something from a business online? What makes someone become a customer? What makes 3 people out of 100 purchase something on average instead of just 1 out of a 100?

These are the questions you want to start asking and breaking down…

This is where you get into the concept of sales, how sales works, which then brings you into understanding human psychology, then brings you into how to implement a sales cycle on a website…

Then implementing a sales cycle on a website leads you into understanding things like sales funnels, opt-in pages, lead generation, landing pages, and so forth…

This also leads you into concepts like copywriting, marketing, which themselves break down very deeply…

As you can see, these concepts aren’t directly related at all when it comes to building a website…

They are instead concepts that are indirectly related, and concepts that when incorporated in the building process of a website make the resulting product far more valuable…

These are the types of things web development roadmaps never dive into…

They always dive into a million concepts that would take an eternity to learn, and don’t make the website itself highly valuable…

Having a well engineered website is important, but a well engineered website that doesn’t drive sales is useless…

Once you can build a website, I strongly recommend to look into these concepts like business models, sales, sales funnels, marketing, copywriting, SEO, and so forth…

These are the things to focus on next, not the million shiny tools and frameworks out there…

So to summarize, first learn how to think using first principles…

Then learn the building blocks like HTML, CSS, and JavaScript…

Then learn the concepts that build on top of these…

Learn how the web works which you do by diving into networking…

Learn a front-end framework, and I recommend focus on learning one as deeply as you can…

Learn server-side rendering, and how to do it with the framework you chose to focus on…

Learn a back-end framework…

Learn about databases, web servers, web hosting, and domain hosting...

Then learn concepts that aren’t necessarily part of developing a website, but indirectly tie into a website and make it far more valuable…

This again is concepts like business models, sales, sales funnels, marketing, copywriting, SEO, and so forth…

With this you have a proper roadmap to follow where you learn how to think properly, how to solve problems, you understand how things work…

You put your focus in the most important areas instead of falling into the trap of jumping into all the shiny tools and frameworks from one to the next…

You understand important concepts, and understand concepts that indirectly tie into web development and make a website far more valuable.

This is my recommended web development roadmap, and hope you gain a ton out of it.