Full-stack developer roles are among the most highly sought after positions in the current job market.

But what exactly is full-stack web development, and how do you become a full-stack developer?

In this article, you will first learn what the term full-stack means.

Then, you will see some suggested technologies to learn accompanied by learning resources to start your full-stack web development journey.

What is Full Stack Development?

The web applications you use daily consist of:

The front-end, also known as the client-side part of the application,
- and the back-end, also known as the server-side part of the application.

What is front end development?

The front end is the user interface of the application.

It’s the presentation of the content, the parts the user views and interacts with, and the look and feel of the web page. It’s how information displays on both web browsers but also mobile devices.

It includes different components such as navigation bars, dropdown menus, buttons, and links.

The front end consists of all the visible parts responsible for the user experience.

What is back end development?

The back end consists of a server that receives and processes requests and a database used to store data.

The back-end is all the behind-the-scenes processes happening in a web application.

It is the business logic, the handling and manipulation of data, and the algorithms.

Essentially, it is all the hidden parts that a user is not directly aware of when viewing and interacting with a webpage. These parts are processes running in the background.

The back end is considered the logical side or the ‘brain’ of a web application.

Both the front-end and the back-end together make up a full-stack web application.

So, full-stack web development refers to the knowledge of all the parts responsible for the front-end and the back-end side of a web application.

Full Stack Engineer Guide

When you are a beginner just starting out on your learning journey, you may spend more time searching for what to learn instead of actually learning. And there is a lot to learn when it comes to full-stack web development - which can be overwhelming and intimidating.

In the sections to come, we'll discuss a lot of different technologies you'll need to learn, and there are many more which are not listed.

It's impossible to learn everything at once, just as it is also impossible to become an expert in everything.

This guide is a suggestion and a starting point. It provides the basics on which you can later expand.

Remember that it is going to take time to become a full stack developer. It may take some trial and error to find a learning schedule and routine that suits you and works for you, as you may have commitments such as taking care of family, working a full-time job, or any other life obligations.

Success is not linear.

Sketch from author and comedian Demetri Martin

The key to success is staying consistent and beating procrastination.

Map out and set aside some time every day - whether that is for only half or one hour. An hour a day is better than not doing any coding at all.

Remember to rest and take time away from the screen to not burn yourself out in the process.

Now, let’s see some of the technologies you should learn to become a full-stack web developer in 2022.

Basic Understanding of How the Internet and the Web Work

You will be spending a lot of time on the Internet, designing and developing for the Web.

Instead of just learning how to create web applications, products, and services, it is wise to have a well-rounded knowledge and good understanding of how these tools you are using to achieve your own goals work underneath the hood and interact with each other.

For example, it is a good use of your time to learn:

What is HTTP?
What are the different HTTP methods, and what does each mean and do?
What is the difference between HTTP and HTTPS?
What is an IP address, a Domain Name, and DNS?
An understanding of clients and servers, and how they interact using what is called the request-response cycle.
How the Internet works as a whole.

Here is some suggested reading to get you started:

Frontend Web Development Fundamentals

Start off learning to code by practicing HTML and CSS.

HTML and CSS are two languages that serve a different purpose but come together to create static web pages. For this reason, it is often the case that you'll learn them both in parallel.

First, learn HTML fundamentals, specifically HTML5, which is the latest HTML version and supports many more features.

What is HTML?

HTML (which stands for HyperText Markup Language) is used for defining the structure and content on a web page. So, the paragraphs, headings, lists, images, forms, and links you see on a page, along with their hierarchies, are all HTML code.

Key HTML concepts to learn are:

There are many HTML tags (as a matter of fact, there are over a hundred), but you only need to learn the most commonly used ones that you will end up using the most.
Learn to write semantic HTML. Semantic HTML describes the tag and the content it will hold instead of using a tag that has no meaning. For example, if you want to create a section on a webpage to hold specific content, you could use the <section> tag that specifies and describes the tag instead of the <div> tag that doesn't have any meaning behind it. All-in-all, avoid using too many <div> tags and learn the alternatives you can use instead.
The above point ties in well with learning to write HTML with accessibility in mind. Designing and developing with accessibility in mind means creating websites for everyone. People with visual impairments rely on assistive technologies such as screen readers to read the content out loud. People with other disabilities may depend on keyboard-only navigation. So, learning to write accessible HTML will lead you to create more user-friendly web pages.
Learn how to create HTML forms. Forms are present on almost all websites. It's how you log in or sign up and register to a website. It's also how websites gather information and data from users.

What is CSS?

Next, it's time to learn CSS.

CSS (short for Cascading Style Sheets) styles HTML elements. It is responsible for presenting content in a visually appealing way.

CSS code enables all the different colors and fonts. The sizing of elements and how those elements get displayed on the page. The page layout and how items get arranged next to one another.

Start learning CSS fundamentals to apply styles to the plain-text HTML content by covering topics such as:

CSS selectors. Learn the different ways you can select HTML elements, how each of them works, and how to choose which one to use. For example, you can use simple selectors that select an HTML element by its tag name, class name, or id name. In addition, a way to select HTML elements is by using pseudo-element selectors and pseudo-class selectors, to name a few.
Learn CSS specificity. When there are two or more selectors with the same matching CSS rules, how does the browser decide which styles get applied to the HTML element? Every selector has a different specificity value, so learning about specificity will help you avoid any confusion as to why styles are not applied.
Learn the Box Model. HTML elements are considered boxes, with each box consisting of the content, padding, border, and margin.
Learn the different ways to position elements on a page. Learn the differences between the relative, absolute, fixed, and sticky position properties.
Learn about the display and how block elements differ from inline and inline-block ones.
Learn layout techniques such as Flexbox for creating one-dimensional layouts or CSS Grid for creating two-dimensional ones.
Learn Media Queries and responsive web design. Websites are viewed on many devices nowadays, such as laptops, mobiles, and tablets, and each device has a different size and resolution. It's paramount that the site looks good and is usable no matter the device.

How to Learn HTML and CSS

The best place to start learning HTML and CSS is with freeCodeCamp's Responsive Web Design Certification.

It's a free, structured, and well thought-out interactive curriculum. You learn in a practical way by building projects.

You will learn all the concepts listed above (and more) by building 15 practice projects and five certification projects.

Once you've completed the certification projects, you can claim the certification and add it to your LinkedIn profile. It's a way to showcase your achievement to your network and prospective employers.

Know Your Way Around The Command Line

Knowing at least the basics of the command line will make you more productive by saving you a significant amount of time when performing repetitive and time-consuming tasks.

You can achieve the same things (and more!) as you can when using a GUI (Graphical User Interface). But with the command line, you'll use keyboard-only navigation and enter text commands instead of clicking and dragging icons.

You can create files and folders, view the contents of files and folders, copy or move the contents of a file to another one, and delete files and folders altogether, to name a few.

You type and enter the commands in a window or CLI (short for Command Line Interface).

Depending on your Operating System, this will be a different application. On a Mac, it’s called Terminal.app. On Windows, it’s called the Command Prompt.

The application runs a shell, such as Bash or Zsh, which acts as an intermediary between you and your computer’s Operating System. You type commands and essentially give orders to your computer. The shell running in the CLI reads the commands and instructs the Operating System. The Operating System carries out the instructions.

No matter the Operating System you are using, whether it's MacOS or Microsoft Windows, as a full stack developer, it will help if you learn Linux. Linux powers the majority of the servers on the Internet.

A way to get started with Linux is by installing it on your Operating System.

You can do this by setting up a Virtual Machine. A Virtual Machine acts as a separate computer inside your computer.

Once you set up a Virtual Machine, you can install one of the Linux distributions, such as Ubuntu, which is a version of Linux.

Here are some helpful resources to get you started:

Learn To Use A Code Editor

To start developing your projects locally, you will need a designated place for writing code.

It is not advised to code using a word processor such as Google Docs or Microsoft Word but instead set up a code editor to write source code.

There are many to choose from, with some of the most popular ones being Atom, Sublime Text, and Visual Studio Code. Many developers also use a command-line text editor called VIM. It is not recommended for beginners since there is a steep learning curve.

Visual Studio Code is the editor of choice for many developers, which you will also see referred to as VS Code.

It is free, open-source, and has many features available.

VS Code has powerful tooling and features that resemble an IDE (which stands for Integrated Development Environment).

When using Visual Studio Code, you can write and edit source code, save time with code autocompletion, and use the built-in debugger and terminal. You can compile and run source code, all under the same roof.

Additionally, it is easy to customise your workspace with the different extensions available in Visual Studio Code Marketplace to further enhance your productivity.

Below are links to download Visual Studio Code for your Operating System and for learning how to use it:

Learn A Version Control System

A Version Control System is a way to back up and save your projects and collaborate with other team members. It is a tool used in every software development job.

The most popular Version Control System is Git, which is free and open-source.

You can view a project’s entire history and keep track of all the changes. If needed, you can also revert to a previous version of it.

Git is not only practical for your personal projects, but it is necessary when you are part of a team.

For example:

You can download (or clone) a working copy of the entire project’s codebase source code on your local machine. Codebase refers to all the folders and files that make up the project.
You can stay up to date by pulling all the recent changes that have taken place in the codebase.
You can make changes safely, without affecting the original codebase, by creating what is known as a branch. Branches allow you to work on bugs or specific features.
You can review the modifications you made and merge them with the content in the original codebase.

Now, you may have heard of the term GitHub and may be confused about the differences between Git and GitHub.

Git is a tool you install locally to manage your projects, whereas GitHub is an online hosting service. GitHub makes it easier to use Git and is a place for you and your team to upload code.

Here are some helpful resources for you to learn Git and GitHub:

Now that you are familiar with the command line, Git, and GitHub, you can deploy a static HTML and CSS webpage and publish it to the Internet. You can do this using either GitHub pages or Netlify.

Learn a Programming Language

Programming languages act as the translator between humans and machines.

Programming languages are similar to human languages. They have syntactical elements like nouns, verbs, and phrases. And you group these elements to form something that resembles a sentence to create meaning.

Some of these languages resemble and look a lot like English. But they offer a shorter, more precise, and less verbose way to create instructions that the computer can understand.

A spoken/natural language like English, on the other hand, leaves a lot of room for ambiguity and different interpretations from different people. With programming languages, you don't have that ambiguity.

How to Make Web Pages Dynamic with JavaScript

You may have noticed that I used the word static to describe the type of webpages created when using just HTML and CSS.

To add dynamic behaviors and interactivity to the web pages, you need to use JavaScript alongside HTML and CSS.

JavaScript is a scripting language designed to run in the browser. It adds interactive features to otherwise static web pages.

Some interactive features JavaScript adds are:

A map with a user’s current location
A message shown to a user once they land on the page
A change on the page based on user input
An animation when a user clicks a button
A smooth scroll effect when there is a button to scroll back up to the top of the page.

To start learning JavaScript, begin studying the basic syntax, or what is known as Vanilla JavaScript.

There are a lot of concepts to learn, and this is not a complete list, but some of the topics to pay attention to are:

Data Types
Variables and Scope
Conditional statements
Loops
Iterators
Functions
Objects
DOM Manipulation
Async JS
Event Handling
ES6 syntax
Arrays
Array Methods
Call backs
Promises

To start learning JavaScript, you can go through freeCodeCamp’s JavaScript Algorithms and Data Structures certification.

You will start with the fundamentals and progress to more advanced topics such as Object-Oriented Programming and Data Structures.

In the end, you will build five certification projects, some of which include a telephone number validator and a Roman numeral converter.

Another fun way to sharpen your JavaScript skills is by building games.

Check out the following videos from freeCodeCamp’s YouTube channel to get started:

JavaScript Libraries and Frameworks

Before moving on to different technologies, you need to be comfortable with the basic JavaScript concepts. Take time to practice and build some projects using the language.

Then, you can learn one of the JavaScript libraries or frameworks.

JavaScript libraries and frameworks provide pre-written code that implements specific functionalities. They help you develop web applications much easier and faster and with more consistency across the different parts by creating what are known as UI components.

The most popular and commonly used JavaScript library to learn is ReactJS.

To learn React, here are some helpful resources to help you get started:

Learn React JS in This Free 7-Hour Course
Free React Course for 2022
Learn ReactJS – Complete Roadmap
If you are a Spanish speaker, or have a friend/ family member that is a Spanish speaker and wants to learn React JS, check out this 8-hour free course on React in Spanish.

Server-side Scripting Languages

As a full-stack web developer, you will need to know both front-end technologies and back-end tools. You will also need to be able to work with server-side scripting programming languages.

There are many to choose from, such as PHP, Ruby, and Java, to name a few.

And just a note about JavaScript – it's used widely in front-end development, but in recent years many developers have started using it for back-end development too.

This is all thanks to NodeJS (a JavaScript runtime environment) which makes that possible by providing back-end functionality.

Pairing NodeJS with the ExpressJS server-side web framework, you are now able to create full-stack web applications.

To learn Node JS and Express JS, check out the following resources:

Knowledge of SQL and Relational Databases

As a full-stack developer, you will need to know how to interact with databases.

Databases fall into two categories, relational and non-relational.

Relational databases (also referred to as SQL databases) store data in a structured, organized, tabular format.

There are clearly defined relationships between the data points, which makes searching for data easy.

Some relational databases include:

MySQL
Postgresql
Oracle
Microsoft SQL Server
SQLlite

The way to communicate with relational databases and manipulate stored data is to query them using a query language such as SQL (short for Structured Query Language).

It helps to have an understanding of how relational databases and SQL work. A great place to start your learning is with freeCodeCamp's Relational Database Course.

You will learn relational databases through interactive tutorials and projects using SQL and PostgreSQL.

Non-relational databases (also referred to as NoSQL databases) don’t store data in tables.

They instead store data in a less structured manner, and items are not related to one another, which allows for more flexibility.

The most popular non-relational database is MongoDB.

MongoDB, along with some of the technologies mentioned in previous sections, is part of the MERN stack. The MERN stack is a set of tools used for developing full-stack web applications.

So putting it all together, this is what MERN stands for:

MongoDB is the non-relational database for storing data.
ExpressJS is a server-side web framework layered on top of Node JS.
ReactJS is a JavaScript client-side web library for building user interfaces
NodeJS is the JavaScript runtime environment for running JavaScript on a server and not just the browser.

To learn more about MongoDB, here are some resources to get you started:

Conclusion

Hopefully, you found this article helpful, and you now have a better understanding of what full-stack web development entails.

In this article, we went over the definition of full-stack development, and you saw a suggested learning path to get you started with full-stack development.

Thank you for reading!

What is a Full Stack Developer? Full Stack Engineer Guide