11 Stages To Become A JavaScript Full-Stack Engineer
Tags: javascript, webdev, beginners, programming
Published: 2023-01-12 12:36:20


**Last year I created a list to kickstart your career and become a Full-Stack developer. I realized that they are still valid and want to share it here!**

[Paul Knulst](https://www.paulsblog.dev/)  in  [Programming](https://www.paulsblog.dev/tag/programming/) • 6 min read

* * *


Last year, I have received multiple messages, mostly from newcomers that have just graduated and stepped into the world of coding. Most of the questions asked are about how to quickly improve their skills, how to become a Full Stack Developer, or how to choose a career direction.

While I try replying to everyone by one, I want to combine my own experiences and created a roadmap on how to become a Full-Stack Engineer that I want to share with everyone.

Stage 1  - HTML
---------------

Before starting with any programming language you should learn basic HTML. A good start will be the tutorial of W3Schools that teaches all the basics and also some advanced information: [find it here](https://www.w3schools.com/html/default.asp)

Stage 2  -  CSS (Grid, Flex)
----------------------------

With knowledge about HTML, you should learn about CSS to style your website. Again, W3Schools provides a good tutorial: [find it here](https://www.w3schools.com/css/default.asp)

Stage 3  -  JavaScript + DOM
----------------------------

Now it's time to learn JavaScript. JavaScript is one of the most used programming languages all over the world. To learn it you can use another [W3Schools tutorial](https://www.w3schools.com/js/default.asp). 

Also, I have written an article to learn advanced JavaScript with Gamification.

- On my blog: https://www.paulsblog.dev/learn-javascript-while-playing-games-gamify-your-learning/
- On Medium: https://medium.com/javascript-in-plain-english/learn-javascript-while-playing-games-gamify-your-learning-9f41d4d3dad9

Stage 4  -  Node.js
-------------------

Node.js is a powerful JavaScript-based platform that is built on Google Chrome’s JavaScript V8 Engine and provides an event-driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.

Start by downloading and installing the latest Node version for your OS on [nodejs.dev](https://nodejs.dev). This is mandatory for further progression as a JavaScript (TypeScript) developer.

Afterward, you should [check out their introduction](https://nodejs.dev/learn/introduction-to-nodejs) to learn some basics about Node.js.

Before heading to the next stage you should make yourself familiar with the npm ecosystem. Consider answering these questions before starting with React:

*   What is NPM?
*   How can I install something?
*   What is a package.json
*   I need package XX what should I do?

Stage 5 - React
---------------

If you are proficient with JavaScript (and maybe TypeScript) you should learn React because it is the most used framework based on data from [npmtrends.com](https://www.npmtrends.com/react-vs-angular-vs-vue-vs-preact-vs-ember-source):

![NPM Trens Report For React, Angular, Vue, Preact and Ember-Source.](https://www.paulsblog.dev/content/images/2022/09/image--46-.webp)

**Remember:** Mastering React takes some time because it has many different concepts that all become important during development.

My personal advice would be to work on the three following lists step by step before continuing to MySQL:

### Basics

1.  [Understand React](https://reactjs.org/tutorial/tutorial.html#what-is-react)
2.  How To Set Up Your DevEnv
3.  JSX
4.  Components
5.  State
6.  Props
7.  Lists/Keys
8.  Lifecycle Methods

### Advanced React Concepts

1.  Styling
2.  Form Handling
3.  Data Handling
4.  Reconciliation Process
5.  Hooks
6.  Custom Hooks
7.  Context

### Mastering React

1.  Lazy Loading
2.  Portals
3.  State Management
4.  Routing
5.  Theming
6.  Patterns
7.  Anti-Patterns

[This article from me here on dev.to has also come links for becoming a React developer](https://dev.to/paulknulst/simple-roadmap-to-learn-reactjs-4eoi)

Stage 6  -  MySQL
-----------------

After you mastered JavaScript and React to create beautiful websites the next step will be to use persistent data within these websites. Often, this is done by connecting to a database like MySQL, PostgreSQL, or SQLite.

**For simplicity, you should learn MySQL over PostgreSQL!**

As a developer, you have to be familiar with MySQL because it is ideal for both small and large applications (PostgreSQL is an advancement in DBMS but MySQL is basic knowledge).

To learn MySQL you can use a [W3School Tutorial](https://www.w3schools.com/mySQl/default.asp) which will teach you all the basics to understand every MySQL query you will encounter in different applications.

One important thing is, that you have to **understand database design** more than queries because in future stages you will use a technique (ORM) that helps you with queries anyway. **For this, you have to understand Database Normalization. This is very important if you want to work with relational databases!**

Stage 7  -  MongoDB
-------------------

In contrast to MySQL, MongoDB is a document-oriented database classified as NoSQL. It uses JSON-like documents with optional schemas to store data.

Get familiar with NoSQL database design and [read and understand this](https://www.mongodb.com/nosql-explained/data-modeling).

Stage 8  -  The CRUD Pattern
----------------------------

If you are working with persistent data it is mandatory that you understand the CRUD pattern. CRUD stands for **Create**, **Read**, **Update**, **Delete** and describes the four basic operations for persistent data.

It should be sufficient to read about it [on Wikipedia](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete).

### Stage 9 — ORM And ODM

ORM stands for [Object-Relational Mapping](https://en.wikipedia.org/wiki/Object%E2%80%93relational_mapping); ODM stands for Object Document Mapper. Both are techniques that are used to query and manipulate data from a database using an object-oriented paradigm.

**Often, when developers talk about ORM or ODM they refer to a library that implements any (or both) of these techniques.**

You should learn at least one of the following supporting both Database technologies:

*   [**TypeOrm**](https://github.com/typeorm/typeorm) (SQL and NoSQL)
*   [**Prisma**](https://www.prisma.io) (SQL and MongoDB)
*   [Mongoose](https://mongoosejs.com) (only MongoDB)
*   [Typegoose](https://github.com/typegoose/typegoose) (Mongoose for TypeScript)
*   [Knex.js](http://knexjs.org) (SQL)
*   [sequelize](https://sequelize.org) (SQL)

Personally, I would recommend learning **TypeOrm** AND **Prisma!**

Stage 10 - Build Side Projects To Gain Experience
-------------------------------------------------

Now that you know a programming language, a framework, and how to use a database you can start creating some projects.

This stage is very important in becoming a full-stack developer because you never encounter real-life problems in tutorials that you will face while working on your own project.

**Here are some ideas for cool projects:**

### Goal Tracking App

Simple app that tracks your personal goals. Save goals in a database and show them in a nice way in the front end.

### Clone A Website

Search for a nice website and try to clone it. Copy the contents and try to extrapolate the functions that the website uses. Then try to implement it for your own website.

### Developer Portfolio

A very important project that you should create is a portfolio. A Portfolio is an important website that will represent yourself. If you apply for a job you will have a nice-looking website that will show your skills or introduce yourself.

Get inspiration here: [https://betterprogramming.pub/create-your-portfolio-using-next-js-tailwind-css-stripe-and-paypal-80c723bb3fef](https://betterprogramming.pub/create-your-portfolio-using-next-js-tailwind-css-stripe-and-paypal-80c723bb3fef)

Stage 11  -  Deploy Your Side Project
-------------------------------------

The last stage is about deploying your project on a server. This stage is also mandatory because as a full stack developer you should know how to deploy your app in a production environment.

**I would recommend** learning about Docker and how it can be used to host different websites. As a starting point, you can [check out an introduction from me to Docker here](https://medium.com/geekculture/beginner-friendly-introduction-into-devops-with-docker-on-windows-6aac2de2db33). If you are already into Docker [you can check out this article](https://levelup.gitconnected.com/how-to-setup-traefik-v2-with-automatic-lets-encrypt-certificate-resolver-83de0ed0f542) where I explain how to deploy Traefik (a load balancer) that automatically creates SSL certificates for every service you will deploy on your server.

If you have read and understood both articles you can check out this article:

{% embed https://www.paulsblog.dev/deploy-any-ssl-secured-website-with-docker-and-traefik/ %}

It describes how you can deploy a simple website in a Docker environment that already runs a Traefik.

* * *

**Congratulations, you can call yourself a Full Stack developer!**

Closing Notes
-------------

Hopefully, these resources will help you to become a Full Stack Developer.

Also, if you have any questions, ideas, or recommendations, please jot them down below. I try to answer them if possible.

Writing has always been my passion and it gives me pleasure to help and inspire people.

This article was originally published on my blog at [https://www.paulsblog.dev/11-stages-to-become-a-javascript-full-stack-engineer/](https://www.paulsblog.dev/11-stages-to-become-a-javascript-full-stack-engineer/)

Feel free to connect with me on [my blog](https://www.paulsblog.dev), [Medium](https://medium.knulst.de/), [LinkedIn](https://www.linkedin.com/in/paulknulst/), [Twitter](https://twitter.com/paulknulst), and [GitHub](https://github.com/paulknulst).

* * *

🙌 Support this content
-----------------------

If you like this content, please consider [supporting me](https://www.paulsblog.dev/support/). You can share it on social media or [buy me a coffee](https://buymeacoffee.com/paulknulst)! Any support helps!

Furthermore, you can [sign up for my newsletter](https://www.paulsblog.dev/newsletter/) to show your contribution to my content. See the [contribute page](https://www.paulsblog.dev/contribute/) for all (free or paid) ways to say thank you!

Thanks! 🥰

* * *

Photo by [Caspar Camille Rubin](https://unsplash.com/@casparrubin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) / [Unsplash](https://unsplash.com/@casparrubin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)