I've been reflecting recently on just how much there is to learn in modern web development compared to the state of web development 20 years ago. The technologies are the same, but the amount of new technologies you are expected to understand to be a modern web developer can be bewildering. This is my attempt to break the learning journey down into discrete chunks so that each one builds on the others and so that you don't end up drowning in the sheer volume of technology you need to learn.
This is all based around using Javascript for the stack, primarily because for web development it can be used both server side and client side. I'm going to use the classic To Do list application to base the development on because it's sufficiently simple to understand and build. If you follow through the steps, you'll be building things in a very basic way initially and building up to a more modern (and complex) way of building things. It's worth not skipping any of the steps because they build on each other. If you don't already know the basics of Javascript, you should go and do some learning around that before you start.
This isn't meant to guide you through development line by line, it's more about setting small achievable targets and focussing your learning one one thing at a time. The skills you will be learning as you go along are all reusable, even as they get more specific (like React) the experience is transferrable to other stacks. You should fork this repository, check it out, work in each of the folders and commit as you work. That way you can get feedback on the work you've done.
Often, one of the challenging things about learning new technologies is to know what you should be searching for on the internet. To help with this, I've added search terms where relevant, so where you see text like this you can use it to guide your searches.
- Client Side Javascript
- Interacting with the API from the client side
- Using a client side framework (React)
- Using a larger framework for the whole service (Next.js)
- Creating a login mechanism
- Handling multiple users
- Running everything as a service
- Setting up a pipeline