Web development is nothing like it used to be. Nowadays it's way more complex, there are lots of moving pieces, and it's quite hard to get started. You've got backend, frontend, lots of frameworks, some only for backend, some only for frontend, some for both, then you have infrastructure such as Docker, Kubernetes, traditional web servers such as Apache and Nginx, how does it all fit together?
Well, I won't attempt to explain every single stack out there, but knowing where things came from can help make sense of the way things are now.
The Dark Ages
Web development started with the internet. Before the internet, there were no internet pages! The idea of a web page was much simpler back then.
A website was just a set of inter-related pages, linking between each other. Back then a link was called a 'hyperlink'. A page was just HTML. It had text, links, and maybe some images. A lot of them didn't have any dynamic functionality at all, it was just 'read only'.
Web servers would use the HTTP protocol and spit out HTML. You could make websites by dropping HTML files in a directory and serve them with a web server like Apache.
Note that HTML back then was more limited. It had fewer elements, and there was no CSS at first. CSS was added later on to give developers more control over how their websites looked.
Some pages had forms, you could submit a form and make something happen. For example, you could order a pizza:
Web servers could then, instead of returning HTML, execute a script and return that instead. Initially, because pages weren't that big, they were considered 'scripts', not proper programs.
Because Perl was the language to do scripting back then, most dynamic functionality was managed by Perl scripts. This would be what we now call backend.
In reality, this looked like a cgi-bin folder in your web server (most likely Apache) where you dropped your scripts.
Now of course, I'm sure there were more complex websites that used a different stack, but Apache + cgi-bin was the most popular, as far as I know.
The boom of websites
Around 1995 PHP was released. PHP made it very easy to make websites. It was thought as a quick and dirty way to embed code in HTML. Which is what Perl scripts were doing, but in a much cumbersome way.
PHP exploded in popularity, it was almost synonym of web development, but it wasn't the only stack out there. By now there were things like ASP by Microsoft, Java could also make websites with servlets.
Still, most functionality was just HTML with forms being processed by a server in a programming language, like PHP, Visual Basic or Java. So far we are still in backend-land in modern standards.
Humble frontends
Around 1995 JavaScript was created. Just like CSS in a way, JavaScript was created to give developers more control over their pages. It allowed you to make small changes on the HTML. So much so that it was also called 'DHTML' for 'Dynamic HTML' at first.
It's important to note that JavaScript was not the only language supported by browsers. Internet Explorer had a variant of Visual Basic as an alternative to JavaScript. There were also Java Applets to execute Java in the browser.
Eventually though, JavaScript won. Pages now had the ability to make fancy animations and interactions, but still, the concept of 'frontend' didn't yet exist. It was still just backend with sprinkles of JS.
AJAX and SPAs
AJAX (XMLHttpRequest, an early version of what is now known as fetch) was invented by Microsoft and added to Microsoft Explorer, initially as a private API.
Microsoft used this to add SPA features to Hotmail, their mail client, what is now known as Outlook. It blew everyone's minds. Back then you needed to click on an email, wait for the page to load, and then see the actual mail.
In Hotmail, you could just click at the mail, and see your page load it without a full page reload! It was faster, and much more slick. They integrated features like marking a mail as spam that felt almost instant.
This was the born of Single Page Applications (SPAs). Still, most apps weren't just a single page with a router, like we know SPAs to be today, but a lot of regular backend pages, each with some JavaScript interactivity through AJAX.
jQuery to the rescue
Other browsers also implemented AJAX, and frontend code would turn more complex. but the subtle difference in APIs were quite annoying. Even DOM operations were not consistent across browsers.