How to Become a Web Developer in 2023

Posted on Jan 10 • Originally published at selftaughttxg.com

The demand for programmers continues to rise, and there are plenty of FREE resources to learn how to code. In this article, Jesse Hall provides us with a road map to becoming a web developer in 2023!

TXG-70

About Jesse Hall

Jesse Hall is a tech industry expert and is well-known as "codeSTACKr" in the web dev community.

He creates the "best content he possibly can" to give away for FREE on his codeSTACKr YouTube channel, which has over 274,000 followers and is growing!

Each week he also provides top tech resources to help us keep up to date with the developer community and technology with his codeSTACKr newsletter.

Jesse currently works as a Senior Developer Advocate at MongoDB.

Road Map Layout

In this road map, Jesse provides us with the core essentials to become a full-stack developer in 2023.

A full-stack developer is a programmer that works with both front-end and back-end development.

The core essentials include:

Skills
Tools
Front-End Web Development
Back-End Development
Additional Skills

Skills

Before we learn how to code, Jesse advises us to learn the following skills:

Googling
How the internet works

Googling

Jesse tells us that "Googling" is the best skill any developer can master.

When you don't know how to fix an issue or need to learn how to accomplish a specific task, you should search online using Google.

Always do your best to research and try to resolve issues you have on your own before reaching out to the community. When reaching out to the community for help, be detailed. Be specific about the problem, what you tried, and what you already searched.

Jesse tells us even the most experienced developers can't remember everything; they Google regularly.

How the internet works

When first getting started, you need to have a basic understanding of how the internet works.

Internet

browsers
domains
hosting HTTP/HTTPS
DNS

Jesse provides us with these resources to help us understand these concepts.

Tools

When you are ready to start coding, you must first set up your web developer environment.

Basic Tools

Browsers
Code editor
Terminals

Browsers

Browsers are how your users view your applications. Depending on what browser they use, they may have different experiences. For that reason, developers test their applications on multiple browsers to ensure they are working as expected.

Major browsers:

Code editor

The most popular code editor for developers is Microsoft's VS Code, and it's FREE!

Jesse has created plenty of content on YouTube on how to install, configure, and become familiar with VS Code.

If you want to dive deep into learning how to use VS Code, check out Jesse's Become a VS Code SuperHero course.

Terminals

As a developer, you will want to become comfortable using the command line (terminal). Every operating system comes with a terminal.

Terminals

command prompt (comes with Windows)
powershell (comes with Windows)
WSL
gitbash
zsh

If you are using Microsoft Windows, you are not limited to the preinstalled terminals. Jesse, and many developers, including myself, use gitbash.

If you want to learn how to use the command line, check out Brad Traversy's Command Line Crash Course For Beginners | Terminal Commands.

Brad Traversy also has a helpful YouTube scripting course, Shell Scripting Crash Course - Beginner Level.

Web Development 101: A Beginner's Guide to Launching a Successful Career in 2023

Front-End Web Development

After we set up our web development environment, it's time to start coding! We will need to learn the following:

HTML
CSS
JavaScript

HTML

HTML (HyperText Markup Language) is the standard markup language for documents designed to display in a web browser. HTML is the web's main building block and provides a website's structure.

Jesse provides us with the following HTML resources:

CSS

CSS (Cascading Style Sheets) is a style sheet language used to style the content on a webpage; we use CSS to style HTML elements. We also use it to add flair to a website, such as transitions and animations.

Jesse tells us there is a lot to CSS, and if you're planning to be a Front-End Developer, it is essential to understand CSS fully.

After you learn the basic syntax, learn the following:

Flexbox
Grid
Responsive Web Design

Jesse provides us with the following CSS resources:

JavaScript

JavaScript (JS) is a programming language used in Front-End and Back-End development. We use it to make web pages interactive.

When it comes to JavaScript, Jesse tells us that we will need to spend most of our time learning the following :

Basic syntax
DOM
Fetch API
JSON
ES6

Important: Before learning a framework such as React or Vue, you must fully understand JavaScript (also known as Vanilla JavaScript).

Jesse provides us with the following JavaScript resources:

After you learn the web development foundations of HTML, CSS, and JavaScript, it's best to learn about the following:

APIs
Version Control
Hosting & Deployment

Working with APIs

An API (application programming interface) is code that enables software programs to communicate.

APIs allow you to perform queries or computations on the back end and then send the results to the front end.

Jesse explains requesting data from a database as a simple example. The API on the server will perform that action and then send the data to the front end, allowing a layer of security for applications (the front end would expose database login credentials, whereas the back end conceals them).

Jesse provides us with the following API resources:

If you would like a beginner-friendly introduction to working with an API, check out my article JavaScript: How to Use the Star Wars API for Beginners. No authentication is needed to connect to it, making it easy!

Version Control with Git & GitHub

Version control allows us to keep track of changes to our codebases. Version control is essential when working with other developers, such as on a team.

Git is a free and open-source distributed version control system popular among developers.

GitHub is a code hosting platform for collaboration and version control.

Git and GitHub are integral to the CI/CD pipeline (Continuous Integration/Deployment).

Hosting & deployment

As a developer, You must learn how to set up a hosting service and deploy a basic website.

Jesse tells us that a static host is the easiest way to accomplish this.

Static hosts

Netlify
Vercel
Cloudflare
GitHub pages

The provided list consists of static hosts that can be integrated with GitHub (I use Netlify for my blog website).

When you use one of the static hosts with GitHub, you can set the configuration to rebuild and redeploy your website automatically every time you push changes to the GitHub repo. Very convenient!

If your application requires a true back-end environment, you will need a more traditional hosting service, such as Heroku or Linode.

Jesse provides us with the following hosting and deployment resources:

Frameworks

JavaScript Frameworks

Although you can find employment as a front-end web developer without first learning a framework, plenty of jobs require it, and you will increase your opportunity of landing a job if you know one.

Popular JavaScript Frameworks include:

React
Vue
Angular
Svelte

When deciding what framework to learn, consider researching the companies you want to work with and learn their frameworks and technologies.

After learning a JavaScript framework, you can take it further by learning Next.js or Gatsby, frameworks built on top of React. Or, if you learn Vue, you can learn Nuxt.js. Learning these frameworks will give you more built-in functionality, such as static site generation and server-side rendering.

Jesse provides us with the following JavaScript Frameworks resources:

CSS Frameworks

CSS Frameworks make it easier to use CSS to style your applications.

Note: Before you learn a CSS Framework, you should first learn CSS.

Two CSS Frameworks that Jesse uses and recommends are:

Tailwind
Bootstrap

Jesse provides us with the following CSS Frameworks resources:

Back-end Development

Back-end Development with Node.js

Once you have learned JavaScript, you should learn Node.js and Express.js.

Node.js allows us to use JavaScript on the back-end server.

Express is a Node.js web application framework that provides features such as defining routes, building out APIs, connecting to databases, and more.

You will also need to learn with npm (Node Package Manager). Package managers allow us to easily add pre-built packages to our applications, which helps us accomplish various tasks without constantly "reinventing the wheel."

Jesse provides us with the following resources:

Databases

Jesse tells us that just about every website needs to keep track of data, for example, products on an e-commerce website.

There are different types of databases, such as:

Relational
Document
Graph
Wide Column

Relational databases are similar to spreadsheets, containing tables, rows, and columns. The tables link to each other using a unique identifier.

Relational databases are more strict, requiring each table's column and type to be defined ahead of time, creating a predefined scheme.

ORM (Object Relational Mapper) makes handling disconnected data easier when working with relational databases. When queried, the database will return all of the connected data.

Jesse tells us the most popular databases use SQL (Structured Query Language). Examples of structured query languages are:

SQL
MySQL
PostgreSQL
MS SQL

Document databases are relatively new, which brings many benefits over SQL databases.

Document databases are:

Flexible
Uses JSON
No ORM needed

Jesse explains that document databases are not as strict as relational databases by default but can be as strict as you need, making them flexible.

Document databases use JSON-structured documents, making it easy for JavaScript developers to understand and implement. Because of this, there is no need for ORMs when working with them.

Jesse provides us with the following database resources:

Authentication

If your website needs to keep track of user interactions, such as a shopping cart, or it has user accounts, you will need to implement authentication.

You can use oAuth or JWT (JavaScript Web Tokens) to implement authentication manually, or you can use an authentication provider to do all the work for you.

Jesse recommends Auth0 as an authentication provider.

Jesse provides us with the following Authentication resources:

Content Management Systems (CMS)

Content management systems allow us to manage the content of our websites easily.

If you plan on freelancing, content management systems are a good choice. With content management systems, you provide a way for your customers to update their website content easily on their own.

Jesse tells us that WordPress is probably the most popular CMS. However, they traditionally require us to use their service for the front-end CMS and back-end CMS.

In the past few years, Headless CMSs have become popular, and now WordPress supports Headless CMSs. This allows us to use a headless CMS for the back-end, then you can use any front-end technology that you want, freeing us from being tied to a specific technology on the front-end and back-end.

Examples of headless CMSs are Sanity.io and Strapi.

Jesse provides us with the following content Management Systems resources:

Additional Skills

Jesse also provides a list of additional optional skills, including:

TypeScript Crash Course
Blockchain & Cryptocurrencies
Soft Skills & Personal Development
And more!

Watch his YouTube video to learn more, and you can also sign up for his FREE 2023 Web Dev Roadmap Podia course, which includes the complete list of resource links.

2023 Web Dev Roadmap

My other Jesse Hall articles

Conclusion

Armed with a roadmap of FREE resources consisting of the skills, tools, and technologies you need, with hard work and dedication, there's is time to become a web developer in 2023.

As a developer, you will still need to learn continually as new technologies emerge. Be encouraged, knowing that once you have learned a language, it will be easier for you to learn new ones.

When deciding what framework to learn, consider researching the companies you want to work with and learn their frameworks and technologies; they might use something other than the most popular.

In addition to the core requirements of being a web developer, additional skills, such as soft skills, will significantly benefit you and set you apart from others when seeking employment opportunities. Check out Jesse's FREE complete resource list, providing what you need to become a web developer in 2023!

Let's connect! I'm active on LinkedIn and Twitter.