codedamn

How To Become Full Stack Developer: Step-by-Step Guide In 2022

How To Become Full Stack Developer: Step-by-Step Guide In 2022

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

Because most developers believe that you can’t be a full stack 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 developer in 2021 without getting lost in the technology hell.

Why should you consider this guide worthy?

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.

What is a full stack developer exactly?

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.

Difference between frontend, backend, and full stack developer

Simply put, a frontend developer works only with the part involving browser. This could include UI, frontend optimization, UX optimization, 3rd party JavaScript and more.

A backend developer would be working on server side – APIs, databases, web security, etc.

A full stack developer can work with both areas with ease. Generally, full stack development gets a bit easier if you use the same technologies on frontend and backend. For example, you may choose to use JavaScript on frontend and Node.js on backend.

Step-By-Step Guide For Full Stack Development

Learning full stack development requires you to master three areas – frontend, backend, and deployment of your projects. There are “okay” ways of doing things, and then there is a scalable and rock-solid ways of doing things. Let’s learn how to become a great developer with these rock-solid approaches.

Learning frontend development

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:

  • HTML
  • CSS
  • JavaScript
  • React
  • Git
  • Chrome/Firefox DevTools
  • Material UI/TailwindCSS
  • TypeScript
  • React Query / Apollo GraphQL
  • Webpack
  • Next.js (kind of falls in the backend too, but we use Next.js mostly for serving codedamn’s frontend)
  • Code testing
  • 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 development

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

Internet fundamentals – knowing about how the web and internet really work from a birds’ eye view – DNS, HTTP, port numbers, etc.
Linux fundamentals – learning how to work with a shell – navigating file system properly, the concept of files, folders, etc.
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:

  • Linux fundamentals
  • Internet fundamentals
  • Node.js/TypeScript
  • Next.js (for SSR React)
  • GraphQL vs REST architecture
  • MongoDB (or MySQL – you only need to understand the core principles of working with a database)
  • Building simple applications with MongoDB + Node.js
  • Learning about authentication (JWT/cookies) and their pros/cons
  • Caching query results and other data with Redis
  • Reverse proxies like NGiNX
  • Networking, sockets, WebSockets
  • Docker/containerization
  • CI/CD
  • 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 CI/CD and project 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 becoming 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 to advise on what to do next, but rather only resources for those things.

FAQ’s

These are some commonly asked questions regarding full stack web development:

How much time would it take me to learn full stack development?

It could take you anywhere between 6-14 months if you’re starting from scratch. To get a better estimate, try out our calculator on the full stack learning path.

How much salary do full stack developers get?

It depends on where you live, but remote roles in US/UK could get you job offers well in the range of $100K+ as starting positions too.

Is it worth learning full stack development?

Absolutely. As a full stack developer, you have a lot of power. You can even start your own side projects or startups! Codedamn started as a startup only because I was a full stack developer and could code something meaningful without any overhead or expenses.

How to learn full stack development?

There are multiple ways you can start, but if you want to save a lot of time – you should try codedamn’s full stack web development learning path. This path already includes interactive labs + projects along the way – and is extremely detailed. Courses in this path are authored by industry experts with years of experience.

Conclusion

I hope you liked this approach and breakdown of the 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 an 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.

Learn programming on codedamn

Codedamn is an interactive coding platform with tons of sweet programming courses that can help you land your first coding job. Here's how:

Programming is one of the most in-demand jobs today. Learning to program can change your future. All the best!

Sharing is caring

Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.