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 details the needed skills and the corresponding tutorials to learn them effectively. The illustrated guide is provided by Kamran Ahmed and can be found on roadmaps.sh or the GitHub repo — his work is excellent so be sure to star the repo and subscribe to his newsletter to support his efforts. Don’t be intimidated by the map. It may seem like a lot, but I’ll break it down so you can learn each piece step-by-step.
This article will be divided into the following sections:
Required Learning for Any Path: Programming concepts every dev will need to know.
Introduction to Programming: Where to begin if you are brand new to coding.
Frontend Development: Learn how to build user interfaces (UI’s).
Backend Development: Learn how to build APIs and write server code.
DevOps Engineering: Learn how to manage infrastructure, deployment, and systems.
JavaScript and Coding In-depth: Learn JS from top to bottom.
Software Engineering Books: These are books I’ve found to be generally helpful in improving my overall understanding of programming and making a positive impact on the job. (Find the full list here)
Job Advice and Wrap Up: Some final quick tips on how to search for a job and continue your growth as a developer.
These are all products that I personally recommend. For some of them, I do receive compensation if you use the links in the article. If you do find something you like, your support is appreciated.
The Portfolio API — Grow your coding career effortlessly | gitconnected
Remove the pain from manually updating your details in each separate location. Simply change the data once in your…
gitconnected.com
- 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.
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.
Command Line
The command line is how you run your code. You must be able to navigate and execute the required commands. The better you are on the command line, the more efficient you will be as a developer.
Learn Enough Command Line to Be Dangerous — an excellent free book to learn the command line.
Linux Command Line Basics
The Linux Command Line: A Complete Introduction
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.
Git and Version Control
Git is the tool used to save code and create different versions, allowing you to collaborate with other developers. The top place to store code and collaborate on open source software is GitHub.
Learn Git from GitHub
Ranked Git tutorials
Git Complete: The definitive, step-by-step guide to Git
Web Fundamentals
HTTP / HTTPS
SSH
Character Encodings
Model-View-Controller (MVC)
REST
- 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:
JavaScript is a relatively easy language to learn
JavaScript is required to build web applications since it is the programming language that runs in the browser
JavaScript can be used on the frontend and the backend, allowing you to write full-stack applications with a single language
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.
There are plenty of high-quality free options to get started with coding. freeCodeCamp and Codecademy are excellent choices and are great to set your foundation.
Learn to code with free online courses, programming projects, and interview preparation for…
Learn to code with free online courses, programming projects, and interview preparation for developer jobs.
freecodecamp.org
Learn to code — for free | Codecademy
Learn the technical skills you need for the job you want. As leaders in online education and learning to code, we’ve…
codecademy.com
Once you have the basics down, a great next step is the free JavaScript30 course or the premium BeginnerJavaScript course. Web Bos teaches you the core concepts of JavaScript by building real projects. You should try to do real projects as quickly as possible. Projects are the best way to learn skills for the job and allow you to build a portfolio for when you start interviewing.
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials
javascript30.com
Beginner JavaScript
My Account → Slam Dunk JavaScript Fundamentals with Wes Bos Join 11,346 Others & Start Learning Now → A rock solid…
beginnerjavascript.com
If you want to speed things up, these are some great premium courses to go start from a beginner in JS and advance quickly.
Modern JavaScript From The Beginning
Beginning Modern JavaScript (Includes 10 Real Projects)
Learn and build projects with pure JavaScript (No frameworks or libraries)
udemy.com
The Modern JavaScript Bootcamp (2020)
The Modern JavaScript Bootcamp (2020) | Udemy
Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!
udemy.com
Advanced Javascript
Advanced Javascript | Udemy
In only three hours you will learn enough javascript to transform from a Junior JS Dev into a Senior JS Guru
udemy.com
If you are looking for a subscription option with courses that will take you from beginner to pro, a great option is Pluralsight. You must sign up for a subscription (free trial offered), but they have excellent content on almost everything.
Pluralsight — Unlimited Online Developer, IT, and Cyber Security Training
The technology learning platform that provides web development, IT certification and ondemand training that helps your…
pluralsight.com
- 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.
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 Complete 2020 Web Development Bootcamp
The most complete course on web development. Start with HTML and CSS, learn JavaScript and how it interacts with the DOM, and eventually build a full stack web application.
The Complete 2020 Web Development Bootcamp | Udemy
Welcome to the Complete Web Development Bootcamp, the only course you need to learn to code and become a full-stack web…
udemy.com
The Web Developer Bootcamp
The Web Developer Bootcamp | Udemy
The only course you need to learn web development — HTML, CSS, JS, Node, and More!
udemy.com.
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
Step-by-step HTML and CSS for Absolute Beginners
Want to learn how to create webpages, but feeling intimidated by HTML and CSS? Not sure where to start? Step-by-step…
udemy.com
Build Responsive Real World Websites with HTML5 and CSS3
Build Responsive Websites with HTML5 and CSS3 | Udemy
“Having gone through other related courses on other platforms, I can say this course is the most practical and readily…
udemy.com
CSS: The Complete Guide (Advanced CSS)
CSS: The Complete Guide (Advanced CSS)
Learn CSS for the first time or brush up on your CSS skills and dive in even deeper. EVERY web developer needs to know.
udemy.com
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
Tutorial: Intro to React - React
This tutorial doesn't assume any existing React knowledge. We will build a small game during this tutorial. You might…
reactjs.org
React — The Complete Guide (incl. Hooks, React Router, Redux)
React 16: The Complete Course (incl. Hooks, React Router, Redux)
Dive in and learn React from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!
udemy.com
Modern React with Redux
Modern React with Redux | Udemy
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!
udemy.com
React for Beginners
React For Beginners
Want to upgrade your JavaScript skills and learn React.js? Learn how to build websites and web apps in just a couple of…
reactforbeginners.com
Advanced React + GraphQL
Advanced React & GraphQL
Build Full Stack Applications with React and GraphQL
advancedreact.com
Vue
The Official Vue Introduction
Introduction - Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
Vue JS 2 — The Complete Guide (incl. Vue Router & Vuex)
Develop with Vue JS 2 (Complete Vue Router & Vuex Course)
Vue JS is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!
udemy.com
The Ultimate Vue JS 2 Developers Course
Vue.js Essentials — 3 Course Bundle | Udemy
Learn and master VueJS by building 3 professional, real world web application using Vue!
udemy.com
Vue JS Essentials with Vuex and Vue Router
Vue JS Essentials with Vuex and Vue Router | Udemy
Have limited time to learn Vue, Vuex, and Vue Router? Take this course and learn Vue in 11 hours!
udemy.com
Angular
Angular 8— The Complete Guide
Master Angular 8 (formerly Angular 2): The Complete Course
Master Angular (Angular 2+, incl. Angular 8) and build awesome, reactive web apps with the successor of Angular.js
udemy.com
The Complete Angular Course: Beginner to Advanced
The Complete Angular Course: Beginner to Advanced
The most comprehensive Angular 4 (Angular 2+) course. Build a real e-commerce app with Angular, Firebase and Bootstrap…
udemy.com
- Learn Backend Development
The backend is where you communicate with the database, handle business logic, and send the necessary data to the frontend.
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.
Node.js
Node is how we execute JavaScript outside the browser which can be used to build APIs on the backend/server.
The Complete Node.js Developer Course (3rd Edition)
The Complete Node.js Developer Course (3rd Edition)
Have you tried to learn Node before? You start a new course, and the instructor has you installing a bunch of libraries…
udemy.com
NodeJS — The Complete Guide (incl. MVC, REST APIs, GraphQL)
NodeJS — The Complete Guide (incl. MVC, REST APIs, GraphQL)
Master Node JS, build REST APIs with Node.js, GraphQL APIs, add Authentication, use MongoDB, SQL & much more!
udemy.com
Learn Node
Learn Node
A premium training course to learn to build apps with Node.js, Express, MongoDB, and friends.
learnnode.com
Databases
The database is the permanent storage for the data of your application. Typically the backend will make a query against the database during an API call. There are 2 common database types — SQL and NoSQL.
PostgreSQL / MySQL
These are two top SQL implementations and likely what you will see utilized at most companies.
The Ultimate MySQL Bootcamp: Go from SQL Beginner to Expert
SQL & PostgreSQL for Beginners
GraphQL
GraphQL itself is not a database but a query language on top of databases. Many people believe it is going to revolutionize app development and totally change how we build APIs. It is rapidly gaining adoption and being utilized by tech giants and top startups.
The Modern GraphQL Bootcamp (Advanced Node.js)
GraphQL with React: The Complete Developers Guide
As a bonus, try Hasura. It allows you to generate GraphQL using a web UI and automatically builds a Postgres database for you.
MongoDB
Mongo is the most popular NoSQL database used with Node. It stores data in documents which are key/value pairs that easily map to JSON and JavaScript objects. It is a
MongoDB — The Complete Developer’s Guide
Python
Python is easy for beginners but also utilized extensively by tech giants and startups for backends, data science, and scripting.
Complete Python Bootcamp: Go from zero to hero in Python 3
Complete Python Bootcamp: Learn Python Programming and Code
Learn Python like a Professional! Start from the basics and go all the way to creating your own applications and games!
udemy.com
Python and Django Full Stack Web Developer Bootcamp
Python and Django Full Stack Web Developer Bootcamp
Welcome to the Python and Django Full Stack Web Developer Bootcamp! In this course we cover everything you need to know…
udemy.com
Go (Golang)
Go is relatively new but has seen rapid adoption. It is a statically-typed language but is also incredibly developer-friendly. This makes it ideal for building services.
Complete Go Bootcamp: Go from zero to hero (Golang)
Web Development with Google’s Go Programming Language
Ruby on Rails
Ruby on Rails was the go-to startup language for years. It’s ease of use and convention-driven language made it easy to rapidly build products.
The Complete Ruby on Rails Developer Course
- 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.
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 and Coding In-depth
I recommend working on real projects as quickly as possible. However, at some point, you will want to do a deep dive into JavaScript and learn how it all works underneath the hood. In addition, it is important to have an understanding of data structures, algorithms, and other general computer science knowledge.
You Don’t Know JavaScript (YDKJS) — This is simply the best book on JavaScript. If you work through this entirely, you will know the entire core language of JS. Read it free on GitHub or purchase physical or Kindle copies on Amazon.
TypeScript — This is not a requirement for beginners (unless you are using Angular), but TypeScript adoption is growing rapidly and has consumed the JS world. Many think it’s the future of JavaScript.
Data Structures in JavaScript — Build the most common data structures from the ground up in JavaScript. This video series is a great extension to build the knowledge you have already gained and is an excellent resource for interviews as well.
Eloquent JavaScript — Another favorite book of JavaScript engineers. It covers a broader range of topics than YDKJS, including the browser and Node. Read it for free online or purchase a physical or Kindle copies on Amazon.
Introduction to Algorithms — While not the most beginner-friendly book, it is thorough. Take this step once you really feel like it’s time to understand algorithms thoroughly.
Algorithms — This course is taught in Java, but the learning outcomes are still valid. You gain a thorough understanding of the most important algorithms in computer science. The course is taught by Princeton on Coursera.
- Software Engineering Books
This selection is 5 books that will either make you a better coder in general or an essential book you will need at some point in your career, such as during interviews. Or, see a complete list of programming book recommendations.
Clean Code by Robert C Martin
The Pragmatic Programmer by Andrew Hunt & David Thomas
The Effective Engineer by Edmund Lau
Cracking the Coding Interview by Gayle Laakmann McDowell
The Art of Computer Programming by Donald Knuth
If you are learning to web development, there is also a high likelihood you’re interested in startups. These are some of the top books about startups and the philosophies of those that are successful.
The Lean Startup by Eric Ries
Zero to One by Peter Thiel
Hooked by Nir Eyal
Traction by Gabriel Weinberg and Justin Mares
The Hard Thing About Hard Things by Ben Horowitz
- Job Advice and Wrap Up
By following these tutorials, you will be on your way to becoming a professional web developer. Make sure to start building real projects as quickly as possible and begin applying to jobs. Projects and deployed web apps are the best way to show a company that you will be able to contribute once you are hired.
Finding the first job is always a numbers game, so the more you apply, the better your odds are of getting an offer. It can take months though, so be ready for the long road. However, you will get one eventually and every job going forward will be much easier to get after landing that first role.
Job Tips:
Only focus on a few skills: Ex. JavaScript, React, Node. Don’t try to learn everything — React, Vue, Angular, jQuery, Backbone, etc. Get as good as you can learning the minimal required languages/libraries. Go deep, not wide.
Build a portfolio website and use the portfolio API to power the data. The ability to show you can build applications is essential to hiring managers.
Apply to as many jobs as you can as long as they fit your skillset. Don’t give up! You will eventually find your role if you keep working. It’s a long and hard road, but well worth the effort if you are passionate about the field.
Practice for the interview. Use “Cracking the Coding Interview” and websites to become comfortable with answering interview questions.
Read the “You Don’t Know JavaScript” series. This will ensure you know the language inside and out.
Keep building projects — projects are the best way to learn and show that you understand how to build apps for the real world.
Top comments (0)