By Trey Huffine


Translator: winter rain planning |


This article was originally published on Level Up Coding and was translated and shared by InfoQ Chinese with permission from the author.

Demand from Web developers is at an all-time high and is still growing. There are several free tutorials and advanced tutorials available on the Internet. This article breaks down the roadmap and describes in detail the skills and tutorials needed to learn each section effectively. You can choose the best way for you to learn the knowledge and skills you need.

There’s never been a better time to learn programming or switch careers to software engineering. Industry demand for Web developers is at an all-time high and growing. There are free tutorials and advanced tutorials on the Internet that teach you the skills you need to get a job as a developer for a fee. No computer science degree is required 🤓.

This article details the skills and tutorials needed to learn effectively. This illustrated guide is provided by Kamran Ahmed and can be found at roadmaps.sh or GitHub repo. Kamran is doing a great job, please be sure to support him by clicking a star on repo and subscribing to his newsletter. Don’t be intimidated by this roadmap. It may seem like a lot at first glance, but let me break it down so you can learn each part step by step.

In each section of this article, links are provided to a number of resources, both free and paid, to help you learn the knowledge and skills you need in a way that best suits your needs.

This paper will be divided into the following parts:

  1. The must-learn, the must-learn for any path: programming concepts that every developer needs to know.
  2. Introduction to Programming: If you’re a complete novice, start here.
  3. Front-end development: Learn how to build a user interface (UI).
  4. Back-end development: Learn how to build apis and write server-side code.
  5. DevOps engineering: Learn how to manage infrastructure, deployments, and systems.
  6. JavaScript and Deep coding: learn all aspects of JS from beginner to master.
  7. Software Engineering Books: In this section I will recommend a number of books that I think have been very helpful in improving my overall understanding of programming and can have a positive impact on my work.
  8. For the full bibliography: https://amzn.to/2SdZtxI
  9. Job search advice: I conclude with some tips on how to find a job and grow as a developer.

What every developer needs to learn

We’ll start with the skills that every developer needs to learn as part of any path, whether front-end, back-end, or DevOps.

To be an effective developer, you need to be proficient at the command line, know how to use Git to version code, and understand the basics of the Web.

The command line

The command line is a way to run code. You must be able to read and execute the required commands. The better you master the command line, the more effective you will be as a developer.

The following learning resources are available:

  • Don’t Know these Command lines if you want to be a hacker – a great free command line book.
  • https://www.learnenough.com/c…
  • Linux command line basics
  • https://bit.ly/2srCscc
  • The Linux command line: a complete introduction
  • https://amzn.to/2W23LHD

Select a text editor

VS Code is a top choice for Web developers, which makes it a great tool to get started with, and I personally use it. It’s free and open source, and it’s full of plugins that can help you improve your productivity. Beyond that, there are many other good options, such as Atom, WebStorm, or Vim (for hardcore users).

The text editor is where the code is written, and the terminal is where the code is executed. As a developer, these are the places where you do most of your work. So, it’s worth spending some time choosing the right editor, setting up plug-ins, and learning hotkeys. Having the right workflow can dramatically improve your productivity.

Git and version control

Git is a tool for saving code and creating different versions, allowing you to collaborate with other developers. GitHub is the go-to place for storing code and collaborating on open source software.

The following learning resources are available:

  • Learn About Git on GitHub
  • http://try.github.io/
  • Git Tutorial leaderboard
  • https://gitconnected.com/lear…
  • Git Complete Guide: an authoritative, step-by-step guide to Git
  • https://bit.ly/2HknNd8

Network Basics

The following learning resources are available:

  • HTTP / HTTPS
  • https://en.wikipedia.org/wiki…
  • SSH
  • https://en.wikipedia.org/wiki…
  • A character encoding
  • https://www.w3.org/Internatio…
  • Model-view-controller (MVC)
  • https://en.wikipedia.org/wiki…
  • REST
  • https://en.wikipedia.org/wiki…

Introduction to programming

Before exploring any of these paths in depth, you should have a solid programming foundation. For new developers, I strongly recommend learning JavaScript as your first language. JS can be used by both front-end and back-end developers, which means you can become a full-stack developer while being able to focus on mastering a language. The benefits of JavaScript are:

  1. JavaScript is a relatively easy language to learn;
  2. Building Web applications requires JavaScript because it is a programming language that runs in a browser;
  3. JavaScript can be used on both the front end and back end, allowing you to write full-stack applications in a separate language;
  4. There’s a lot of work for JavaScript developers to do.

If it’s clear that you either want to work with the data or only the back end, learning Python is another option for beginners.

There are many free, quality sites that can get you started, including freeCodeCamp and Codecademy, which will help you lay the groundwork.

Freecodecamp.org, a free online course to learn code, programming projects, and interview preparation…

Codecademy.com, learn the basic technical skills needed for programming development.

Once you’ve mastered the basics, the next step is to consider the free JavaScript30 course or BeginnerJavaScript Advanced course. Web Bos teaches the core concepts of JavaScript by building real projects. You should get down to the real project as soon as possible. Projects are the best way to learn job skills and build a portfolio for yourself when you start preparing for interviews.

If you want to get your foot in the door of JavaScript quickly, the following excellent and affordable courses are available for beginners and quick progress:

  • Introduction to Modern JavaScript
  • https://bit.ly/2T1cbNi
  • A Practical introduction to modern JavaScript (including 10 practical projects)
  • https://bit.ly/2T1cbNi
  • Learn pure JavaScript to build projects with (no frameworks or libraries)
  • https://bit.ly/2T1cbNi
  • Modern JavaScript Bootcamp (2020)
  • https://bit.ly/2AQcEL5
  • Learn JavaScript by building real-world applications. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!
  • https://bit.ly/2AQcEL5
  • Javascript Advanced, in just three hours, you will learn from a junior JS developer to a senior JS master
  • https://bit.ly/2DobpVj

If you’re looking for a course that ranges from beginners to professionals, then Pluralsight is a good choice. To subscribe, you must first sign up for an account (free trial), and they cover almost all the great content.

Learning front-end development

We build the user interface for the site through front-end development. To learn front-end development, you must have a solid foundation in JavaScript and understand how HTML/CSS works.

The popular client libraries (React, Angular, and Vue) are all written in JavaScript. A careful understanding of Vanilla JavaScript was critical to advancing the level of skills needed to build complex applications. Once you have a solid JavaScript base, it’s time to learn HTML and CSS. Although the UI is written in JS, it is still essentially generating HTML and stylized by CSS.

The following learning resources are available:

Web Development Bootcamp 2020 has a full-fledged Web development course, starting with HTML and CSS, learning JavaScript and how it interacts with the DOM, and finally building a full-stack Web application.

https://bit.ly/2D8kams

The Web Developer Boot Camp has classes where you need to learn HTML, CSS, JS, Node, etc.

https://bit.ly/2QZdHxG

If you need to learn more about JavaScript, see the resources in the “Getting Started with Programming” section.

HTML and CSS

People usually learn HTML and CSS together. HTML is the language that gives the skeleton of a structured page, while CSS is the language that defines styles.

The following learning resources are available:

If you want to learn how to create web pages, but are afraid of learning HTML and CSS and don’t know where to start, consider taking this course.

https://bit.ly/2CnsSv8

This is a very practical and easy to learn course in building real, responsive websites using HTML5 and CSS3.

https://bit.ly/2SYFgJu

CSS: The Complete Guide (ADVANCED CSS), if you are learning CSS for the first time, or want to review CSS and then further study, consider this course.

https://bit.ly/2FBcQRA

UI libraries (React, Vue, Angular)

Modern UI development is increasingly moving towards a component model with three main libraries — React, Vue, and Angular — used by professional front-end engineers. It’s better to focus on one of these libraries in depth, rather than trying to learn all three. Later in your career, if the company uses a framework you didn’t learn, you can use it to learn something different. React is by far the most popular, but both Vue and Angular are rapidly being adopted.

React

The following learning resources are available:

This tutorial assumes you don’t have any React knowledge. It builds a little game to get you started.

https://reactjs.org/tutorial/…

React: Reactjs, Hooks, Redux, React routing, animation, Next. Js, Reactjs, Hooks, Redux, Next.

https://bit.ly/2W66AY3

There are also Modern React with Redux, React for Beginners, Advanced React + GraphQL and other courses available.

Vue

The following learning resources are available:

Vue official introduction

https://vuejs.org/v2/guide/

Vue JS 2-Complete Guide (includes Vue router and Vuex)

https://bit.ly/2R2bOQX

VueJS 2 ultimate development course to learn and master VueJS by building 3 professional, real-world Web applications using Vue

https://bit.ly/2DmWkU1

Vue JS basic Vuex and Vue routing, 11 hours to master Vue, Vuex and Vue routing

https://bit.ly/2Ho3mfj

Angular

The following learning resources are available:

The Angular 8 complete guide to mastering Angular (Angular 2+, including Angular 8) and using Angular.js to build great, responsive Web applications.

https://bit.ly/2Hn9mF6

Complete Angular: Advanced for beginners, a comprehensive Angular 4 (Angular 2+) course. Build a real e-commerce application with Angular, Firebase, and Bootstrap.

https://bit.ly/2RFP0M2

Learn about back-end development

The back end is where you communicate with the database, process the business logic, and send the necessary data to the front end.

Your backend/server can be written in any language. My recommendation is to start with Node/JavaScript, as it is relatively easy to learn and very powerful at the same time. In addition, you can more easily switch between the front and back ends because your front and back ends are using the same language. I’ll also detail the learning of other languages you can use for back-end development — Python, Go, Ruby on Rails.

Working with databases is core work for back-end engineers, and I’ll also outline tutorials for learning SQL, NoSQL, and GraphQL. Although NoSQL has become more and more popular, SQL is still by far the most used database type and is the foundation for learning.

Node.js

Node is our way of executing JavaScript outside the browser and can be used to build apis on the back/server side.

The following learning resources are available:

Node.js Development Tutorial (Third edition)

https://bit.ly/2RSOAkL

Complete guide to NodeJS (including MVC, REST API, GraphQL), master NodeJS, learn to build REST API with Node.js, GraphQL API, add authentication, work with MongoDB, SQL, and more.

https://bit.ly/2U46COi

Learn Node and an advanced training course on building applications using Node.js, Express, and MongoDB.

https://learnnode.com/friend/…

The database

A database is used to perpetuate an application’s data. Typically, the back end queries the database during an API call. SQL and NoSQL are two common database types.

PostgreSQL / MySQL

These are the two most commonly used SQL implementations, and you’ll probably see them used in most companies.

The following learning resources are available:

  • MySQL ultimate boot camp: from SQL beginner to expert
  • https://bit.ly/2R0Wfcj
  • Getting started with SQL & PostgreSQL
  • https://bit.ly/2FEGeHs

GraphQL

GraphQL is not a database itself, but a query language on top of the database. Many people think it will revolutionize application development and the way we build apis. It is rapidly being adopted and heavily exploited by tech giants and top startups.

The following learning resources are available:

  • Modern GraphQL Bootcamp(Advanced node.js)
  • https://bit.ly/2R2tf3F
  • GraphQL and React: A complete guide for developers
  • https://bit.ly/2W8d4Wf

You can try Hasura. It lets you generate GraphQL using a Web interface and automatically builds a Postgres database for you.

MongoDB

Mongo is the most popular NoSQL database used with Node. It stores data in documents that are easily mapped to JSON and JavaScript object key/value pairs.

The following learning resources are available:

  • MongoDB – Complete guide for developers
  • https://bit.ly/2U3wOIJ

Python

Python is easy for beginners to learn, and is widely used by technology giants and startups for back-end, data science, and scripting.

The following learning resources are available:

Python Full Boot Camp: Python 3 From novice to prawn, learn Python like a pro! Start with the basics and eventually create your own apps and games!

https://bit.ly/2AWhgPW

Welcome to the Python and Django Full Stack Web Developer Boot Camp! Everything you need to know is covered in this course.

https://bit.ly/2U0NNeQ

Go (Golang)

Go is relatively new, but has quickly gained widespread adoption. It’s a statically typed language, but it’s also very developer-friendly. This makes it an ideal choice for building services.

The following learning resources are available:

  • Go Complete Boot Camp: From rookie to Prawn (Golang)
  • https://bit.ly/2U464rH
  • Web development using Google’s Go programming language
  • https://bit.ly/2QYgWFG

Ruby on Rails

Ruby on Rails was the startup language of choice for years. Its ease of use and convention driven language make it easy to build products quickly.

The following learning resources are available:

  • A complete Ruby on Rails development course
  • https://bit.ly/2CD3UIm

Learn about DevOps engineering

DevOps manages a company’s infrastructure. They set up processes for deploying Web applications and managing site traffic. DevOps engineers focus on getting other teams to release code into production as quickly as possible, keeping servers up and running, and getting approval from end users as quickly as possible.

DevOps are very broad, and the choices they make affect every engineering team. Some basic topics to learn as a DevOps engineer include:

  • Linux: Linux is currently used on more than 67% of all servers and is likely to be used by DevOps engineers. It’s important to understand it.
  • Security: Make sure your entire cloud is secure and encrypted. Also set up the API so that everything is served over HTTPS and is not affected by common attacks.
  • Command line/Terminal: We covered the command line in Part 1, but it’s even more important for DevOps engineers. You must thoroughly understand how it works, as well as the main Linux commands, and be able to SSH to a remote server to do the work. You’ll also write scripts and automation programs for the entire company.
  • Automated testing: Set up an automated test system so that all code released into production is thoroughly reviewed to reduce the possibility of introducing bugs or regression.
  • Continuous integration and Continuous delivery (CI/CD) : Set up a pipeline for deployment so that code is automatically integrated into the production environment, while reducing the number of manual touchpoints for individual developers. Automated testing plays an important role in CI/CD.
  • Containers: Containers are a core part of infrastructure, and most startups and tech giants use Docker and/or Kubernetes in some form. Containers ensure that your code is always executed in a clean, replicable environment.
  • Cloud providers: Learn how to manage servers in the cloud using popular providers such as AWS, GCP, or Azure.
  • Log management: Proper logging must be available. It allows you to diagnose bugs and find the root cause of any problem in your application.

JavaScript and deep coding

On the one hand, I suggest you start working on real projects as soon as possible. On the other hand, at some point you’ll want to dig into JavaScript and understand how it works. In addition, understanding data structures, algorithms, and other general computer science knowledge is also important.

The following learning resources are available:

What you don’t know about JavaScript (YDKJS), this JavaScript book is very, very good. If you fully master the contents of this book, you will understand the entire core LANGUAGE of JS. You can read them for free on GitHub, buy physical books on Amazon or Kindle e-books.

https://amzn.to/2FwY6TO

TypeScript – This is not required for beginners (unless you use Angular), but TypeScript applications are growing rapidly and are dominating the JS market. Many people see it as the future of JavaScript.

https://bit.ly/2UnQ0RZ

Data structures in JavaScript – Build the most common data structures in JavaScript from scratch. This video series is a great extension to build on the body of knowledge you’ve learned by combing through and building on what you’ve learned, as well as a great interview resource.

https://bit.ly/2FNMZa9

Eloquent JavaScript — Another popular book for JavaScript engineers. It covers a wider range of topics than YDKJS, including browsers and Node. It can be read for free online, as well as buy physical books from Amazon or Kindle e-books.

https://amzn.to/2FsFJj7

Introduction to algorithms – Although this book is not very beginner friendly, it is in-depth. When you really think it’s time to understand the algorithm more deeply, you should read it.

https://amzn.to/2M8yfTx

Algorithms – This course is taught in Java, but it doesn’t affect understanding. You’ll learn all about the most important algorithms in computer science. The course is being taught by Princeton University on Coursera.

https://bit.ly/2R1fbr5

Software Engineering Books

The following five books will either make you a better programmer or, at some point in your career (such as in an interview), provide you with the help you need. If you need more, check out the full list of recommended programming books:

https://www.amazon.com/ideas/…

  • Clean Code. By Robert C Martin
  • The Discipline of programmers. By Andrew Hunt and David Thomas
  • The Efficient Engineer. By Edmund Lau
  • The Guide to Interviewing programmers. By Gayle Laakmann McDowell
  • The Art of Computer Programming. By Donald Knuth

If you’re studying web development, chances are you’re also interested in starting a business. Here are some of the top books on entrepreneurship and the philosophy of success.

  • The Lean Startup, Eric Ries
  • From Zero to One. By Peter Thiel
  • Hooked: How to Build Habit-Forming Products. By Nir Eyal
  • Traction: How Startups Attract Customers Fast, by Gabriel Weinberg and Justin Mares
  • Hard To Start a Business. By Ben Horowitz

Job search advice and summary

By following these tutorials, you will be on your way to becoming a professional Web developer. Be sure to start building real projects as soon as possible and start looking for jobs. Projects and deployed Web applications are some of the best ways to show what you can contribute once you join the company.

Finding your first job is often a numbers game, and the more resumes you send out, the better your chances of getting an offer. But that could take months, so be prepared for a long walk. But trust that you will eventually get a job, and that it will be easier to find the next job after you get the first one.

Job search tips:

  • Bite off more than you can chew and focus on a limited number of skills: JavaScript, React, Node. Don’t try to learn everything — React, Vue, Angular, jQuery, Backbone, etc. Try to learn the language or library that has the least requirements for you. Go deep, not too broad.
  • Build a portfolio website and use the API to support the data. Demonstrating your ability to build applications is crucial for hiring managers.
  • Send out as many cover letters as you can, as long as your skills match the job requirements. Don’t give up! If you keep trying, you will find your job eventually. It’s a long, hard road, but if you’re passionate about the field, it’s worth the effort.
  • Prepare for the interview. Use the Programmer Interview Guide and interview websites to practice answering interview questions with ease.
  • Read the JavaScript You Don’t Know series. This will ensure that you have a fuller and deeper understanding of the language.
  • Hands-on Building projects – Projects are the best way to learn and the best way to show you understand how to build real world projects.

supplement

How to learn Java, share two universal learning databases:

1. Books:

codeGoogler/ProgramBooks

2: Video Tutorial:

SpringBoot, Spring, Mybatis, Redis, RabbitMQ, SpringCloud, High Concurrency (Continuous updates)

After brushing 200 questions to the top, I drifted!

Feel good friends remember to forward attention oh, the follow-up will continue to update selected technical articles!

Finally, as usual, amway wave’s official account, “Terminal R&D Department”, currently recommends one high-quality technology-related article every day, mainly sharing Java related technology and interview skills, our goal is: know what, why, lay a good foundation, do well in every point! This main technology public number super worth everyone’s attention.