Learn to become a Frontend, Backend, Fullstack, or DevOps developer with this visual guide — no CS degree required

There has never been a better time to learn to code or make a career change to software engineering. The demand for web developers is at an all-time high, and it’s only increasing. There are both free and premium tutorials online that teach you the skills to get a job as a developer — no CS degree required 🤓.

This article will be divided into the following sections:

  1. Required Learning for Any Path: Programming concepts every dev will need to know.
  2. Introduction to Programming: Where to begin if you are brand new to coding.
  3. Frontend Development: Learn how to build user interfaces (UI’s).
  4. Backend Development: Learn how to build APIs and write server code.
  5. DevOps Engineering: Learn how to manage infrastructure, deployment, and systems.

1. Required Learning for Any Path

We will start with skills every developer needs to learn, and these will be used in all the paths — Frontend, Backend, or DevOps.

Web Developer Roadmap

To be effective as a developer, you should be proficient with the command line, know how to version control your code with Git, and understand the fundamentals of the web.

Pick a Text Editor

VS Code is the is the top choice for web developers, which makes it a great place to start — it’s personally what I use. It is free and open source, with tons of plugins to make you more productive. However, there are many excellent options available such as Atom, WebStorm, or Vim (for the hardcore).

The text editor is where you will write all your code, and the terminal is where you execute it. As a developer, this is where you live. Spend some time to pick the right editor, set up the plugins, and learn the hotkeys. Having the right workflow can dramatically increase your productivity.

Web Fundamentals

Web Developer Roadmap

2. Introduction to Programming

Before you dive into any of the paths, you should have a solid foundation in programming. For new developers, I highly recommend learning JavaScript as your first language. JS can be used for both frontend and backend developers which means you can become a fullstack developer while being able to focus on mastering only one language. The benefits of JavaScript are:

  1. JavaScript is a relatively easy language to learn
  2. JavaScript is required to build web applications since it is the programming language that runs in the browser
  3. JavaScript can be used on the frontend and the backend, allowing you to write full-stack applications with a single language
  4. There are tons of jobs for JavaScript developers

If you know that you either only want to work with data or exclusively on the backend, learning Python is the other option that is good for beginners.

The Complete JavaScript Course 2020: Build Real Projects!

Modern JavaScript From The Beginning

3. Learn Frontend Development

Frontend development is how we build user interfaces for the web. You must have a strong foundation in JavaScript as well as understanding how HTML/CSS work.

Web Developer Roadmap

The popular client-side libraries — React, Angular, and Vue — are all written in JavaScript. Knowing vanilla JavaScript thoroughly is essential to leveling up and having the required skills to build complex applications. Once you have a solid foundation in JavaScript, you should learn HTML and CSS. Even though the UI is coded in JS, it still generates HTML and is styled by CSS.

Refer to the resources in the “Introduction to Programming” section if you need more work with JavaScript.

The Web Developer Bootcamp

HTML and CSS

HTML and CSS are typically learned together. HTML is the skeleton of the page that gives is structure, and CSS is the language that gives it style.

HTML and CSS for Absolute Beginners
Build Responsive Real World Websites with HTML5 and CSS3

UI Libraries (React, Vue, Angular)

Modern UI development has gravitated towards a component model with 3 libraries as the primary ones used by professional frontend engineers— React, Vue, and Angular. You are better off knowing one of these libraries very well as opposed to trying to learn all 3. Then on the job, you will be able to pick up something different if the company uses a framework that you did not learn. React is the most popular, but Vue and Angular are both being adopted rapidly.

React

The Official React Introduction

React — The Complete Guide (incl. Hooks, React Router, Redux)

Modern React with Redux

Vue

The Official Vue Introduction

Vue JS 2 — The Complete Guide (incl. Vue Router & Vuex)

Angular

Angular 9— The Complete Guide

4. Learn Backend Development

The backend is where you communicate with the database, handle business logic, and send the necessary data to the frontend.
Web Developer Roadmap

Your backend / server can be written in any language. My recommendation is to start with Node/JavaScript since it is relatively easy to learn but also incredibly powerful. In addition, you can more easily transition between frontend and backend since you will be using the same language for each. I will also detail other possible languages to learn backend development — Python, Go, Ruby on Rails.

Working with a database is core to being a backend engineer, and I will also outline tutorials to learn SQL, NoSQL, and GraphQL. While NoSQL has become more popular, SQL is still by far the most utilized database type and is essential to learn.

5. Learn DevOps Engineering

DevOps manages the infrastructure of a company. They set up the processes to deploy your web apps and manage traffic to the site. DevOps engineers focus on allowing other teams to get code into production as fast as possible and make sure the servers are always up and running while and sending content to the end-user as quickly as possible.

Web Developer Roadmap

The field of DevOps is very broad, and the choices they make impact every engineering team. Some essential topics to learn as a DevOps engineer include:

  • Linux: Linux is used on 67%+ servers and is highly likely what you would use as a DevOps engineer. It is essential to thoroughly understand it.
  • Security:Make sure your entire cloud is secured and encrypted. Also set up the APIs such that all content is served through HTTPS and not susceptible to common attacks.
  • Command Line / Terminals:We introduced the command line in the first section, but it even more essential for a DevOps engineer. You must thoroughly understand how it works and the Linux commands and be prepared to SSH into remote servers. You will also be writing scripts and automating programs for the entire company.
  • Automated Testing:DevOps sets up a system of automated testing so that all code that enters production has been thoroughly vetted and reduces the possibility of introducing bugs or regressions.
  • Continuous Integration and Continuous Delivery (CI/CD): Set up a pipeline for deployment so that code is automatically merged into production while reducing manual touchpoints for individual developers. Automated testing using plays a large role in CI/CD.
  • Containers: Containers are a core part of infrastructure, with most startups and tech giants utilizing Docker and/or Kubernetes in some form. A container ensures that your code is always executed in a clean and reproducible environment.
  • Cloud Providers: Understand how to manage servers in the cloud using one of the popular providers such as AWS, GCP, or Azure.
  • Log Management: Having proper logging is essential. It allows you to diagnose bugs and find the root cause for any issues in your application.

#javascript #angular #node-js #reactjs #web-development

Web Development Guide 2020 - A Complete Roadmap
136.45 GEEK