How to become a full stack web developer in 2021

#full-stack
#web-development
#javascript
How to become a full stack web developer in 2021

The full stack web developer is a rare breed. They're the unicorns of the tech world. So why are there so few of them? Why a lot less people can confidently work on complete applications end to end?

Because most developers believe that you can't be a full stack web developer without learning everything there is to know about the web. They're wrong. I'm going to show you how to become a full stack web developer in 2021 without getting lost in the technology hell.

Why should you listen to me?

I've been learning web development since 2013 and teaching + learning since 2015 on codedamn YouTube. During that time, I've taught hundreds of thousands of students how to become web developers. I've built complete courses and even started an entire interactive learning platform that you see here, codedamn. I've spent years with the tech stack I'll be mentioning below - which powers most of the codedamn infrastructure here as well. Let's see how you can become a full stack web developer.

So, what is a full stack web developer?

There are mixed opinions on this online. But I stick with the following definition of the full stack developer:

A full stack developer = frontend + backend + databases + cloud/deployment + a bit of OS/cloud knowledge.

This might seem like a lot of tasks, but stick with me - it is possible to learn these things. Let's start step by step.

A full stack developer is a software engineer who can ideally build and deploy medium to large size applications end to end, from frontend to backend to databases. Let's take a look at all technologies you'll need in this adventure of yours.

Learning frontend technologies

The frontend could be either simple or complex, the way you look at it. Technically speaking, there are only three core technologies you have to know about - HTML, CSS, and JavaScript. There is no alternative (yet), and you have to learn all three to work effectively with the frontend. On top of this, we introduce a layer of abstraction through a lot of libraries and frameworks.

Most libraries and frameworks are useless, but some are extremely useful. Your job as a learner is to not only learn those but also to learn the correct ones. Here's my tech stack for frontend:

  1. HTML
  2. CSS
  3. JavaScript
  4. React
  5. Git
  6. Chrome/Firefox DevTools
  7. Material UI/TailwindCSS
  8. TypeScript
  9. React Query
  10. Webpack
  11. Next.js (kind of falls in the backend too, but we use Next.js mostly for serving codedamn's frontend)
  12. Code testing
  13. Yarn

That's it! Now, there could be a gazillion more libraries and things you might use along the way, but that's the core stack you need to call yourself a frontend developer and build functional website UIs.

Of course, a lot of these technologies would take much more time to learn compared to others. For example, getting familiar with yarn is probably one or two nights' work. On the other hand, React might take weeks, if not months, to properly learn and use the right practices.

The point that you should note here is not to learn conflicting technologies. It's okay to be aware of Angular, Vue, and React. It's not okay if you're trying to learn them all. We go deep into this frontend tech stack on our full stack learning path as well.

Learning backend technologies

Backend is interesting. Although you can start with a programming language, I believe this should be your order:

  1. Internet fundamentals - knowing about how the web and internet really work from a birds' eye view - DNS, HTTP, port numbers, etc.
  2. Linux fundamentals - learning how to work with a shell - navigating file system properly, the concept of files, folders, etc.
  3. Choosing a programming language.

You can pick any programming language here, but if you ask me, I'd say go with Node.js simply because there will be a lesser cognitive overload of context switching when you're working on frontend + backend together.

Node.js is a language that has massive community support. Therefore you'd almost always find someone out there to help you out. Moreover, even if you wish to change the language later, you can always almost immediately start writing backend servers in Node, thanks to your knowledge transfer from the frontend.

The other technologies you should consider on the backend are as follows:

  1. Linux fundamentals
  2. Internet fundamentals
  3. Node.js/TypeScript
  4. Next.js (for SSR React)
  5. GraphQL vs REST architecture
  6. MongoDB (or MySQL - you only need to understand the core principles of working with a database)
  7. Building simple applications with MongoDB + Node.js
  8. Learning about authentication (JWT/cookies) and their pro/cons
  9. Caching query results and other data with redis
  10. Reverse proxies like NGiNX
  11. Networking, sockets, websockets
  12. Docker/containerization
  13. CI/CD
  14. Deployment/Cloud provider

The deployment part could be separated into its own section where we talk about it more. We go deep into the backend tech stack on our full stack learning path as well.

Learning deployment

The deployment part can include CI/CD and actual servers (or serverless) while deploying it for others to see. For simple static - the JAMStack pages, as we say, you can try anyone (or all) of the following:

  • GitHub pages
  • Netlify
  • Vercel
  • Cloudflare pages

Although a relatively weak candidate among others, GitHub pages might be convenient in the initial stages because the setting to turn it on is sitting right next to your code on GitHub.

My recommendation is to go with Vercel - they have a very generous free tier for personal projects with great fair limit usages.

However, I would definitely not tell you to stop here. You should pick a cloud provider and learn about their services and how to deploy there. I could recommend starting with DigitalOcean, but even AWS or Google Cloud wouldn't be a bad choice if you're strong-hearted.

DigitalOcean has a very simple UI and could work flawlessly for creating droplets - the virtual compute cloud of digitalocean and managed databases. However, it is nowhere as powerful and service-rich compared to something like AWS. AWS is a monster - and it is both a good and a bad thing. It's good because it's a lot of power. It's bad because for initial developers it could be overwhelming.

My order for learning deployment and CI/CD would be as follows:

  1. Learn to deploy on these "one-click" deployment sites like Vercel.
  2. Learn about CI/CD through GitHub Actions.
  3. Move to a more server-based deployment environment on cloud. Heroku could also be a good start here, but I'd recommend going with DigitalOcean first.
  4. Eventually, move to AWS and try figuring out at least the following technologies: EC2, S3, SES, DynamoDB or any managed database from AWS.
  5. Eventually, learn about serverless computation, the advantages it brings, how applications work at scale, redundancy and principles around it.

All of this is a super solid career path to become an amazing developer. This information is more than enough at this point for you to deploy a lot of complex applications at scale. At this point, you probably won't need advise on what to do next, but rather only resources for those things.

Conclusion

I hope you liked this approach and breakdown of full stack developer guide. If you're someone who is only starting with full stack web development, we offer a complete breakdown of whatever we discussed in interactive course fashion - where you practice while you build on cloud computers, right inside your browser! Check out the full stack web developer learning path here.

Tweet a thanks to the author