Fullstack Developer Series - Learn to Code in 2021 and Beyond

Welcome to my free series on learning to code. Through this free series, you will go from zero experience to deploying your first full stack web application. Along the way, I'll teach you the essential web development concepts needed for 2021 and beyond.

Please share this series with the hashtag #fullstackroadmap and help me spread the word!

Where I will be updating this course

All updates to this series will be made on my Github repository.

If you don't have an account on Github, create one now. You need to do this to follow along with this series, but this will also be the account that employers will look at when you are interviewing for jobs (so make sure your username is professional).

Once you have created your account, go to my series repository and click the star so that you can find it easily later.

Who is this for?

This series is perfect for you if...

• You have never written a line of code in your life, but want to learn what coding is all about
• You are just starting your journey to becoming a full-stack JavaScript developer but need a roadmap to guide you
• You have some experience with front or back-end web development but need to brush up on your skills

You might ask, how could this series be for all of these varying skillsets?

Well, my intention with the series is to go in sequential order from the most beginner topics to even some advanced web development topics, which means you can jump into the series according to where you are at in your personal journey!

What skills will I have at the end?

IMPORTANT!!

Let's be very clear. This series will teach you how to code and will teach you the discipline of web development.

In other words, by the end of the series, you will know how to code in JavaScript, and you will know how to create web (not mobile) applications such as Facebook, YouTube, Quickbooks, You Need a Budget, or even my own app, Eagle Eye Golf Performance.

Since this series will teach you how to code (which is very transferable to other disciplines), here are the disciplines that we will NOT cover in this series:

• How to code IOS or Android apps
• Data science, AI, and Machine Learning
• Advanced DevOps (we will cover the basics though)
• How to code in languages other than JavaScript (although we will explore a few others to give you some exposure throughout the course)

What topics will I learn in this series?

In this series, you will learn the following:

• How to code (we will use JavaScript, and here's why)
• General web development concepts (not specific to any language or framework)
• Exposure to various web frameworks without diving too deep into any

A detailed outline can be found at the bottom of this post.

What are we building?

I want you to walk away from this series with something useful, which is why we will be building out your personal website and deploying it. By the end of the series, you'll have a personal website that you can write blog posts on, display your portfolio and resume on and that you can extend even after this series is over.

It will be small and inefficient in the beginning, but we will refactor it several times throughout the course (for the sake of learning) until it is a completely functional and useful app.

The best part? I have no idea how it is going to look right now. We are going to build it as we go, which should lead to some interesting lessons and give you a realistic perspective of what it is like to be a full-stack web developer.

How can I ask questions?

While I may not be able to respond immediately, please follow this template on my Github repository to raise your questions. You will need a Github account to do this.

Why are you excluding certain technologies here?

When I first learned to code, I read through roadmaps like this one which are great, but extremely intimidating. Not only that but in hindsight, I know that these roadmaps are unrealistic for someone starting out. I've been coding almost every day for over 4 years, and I haven't even covered all the topics you might find in these roadmaps. They are great for seeing the landscape ahead, but not so great for getting yourself started.

Because of this, I have chosen specific technologies for you to learn throughout this series that I think will make you the most versatile (and hireable) developer possible. We won't cover everything out there, but we will learn modern technologies that real companies use.

For example, when we get to the part of the course where we learn about web hosting for our app, there are TONS of options. We could use AWS, Azure, Linode, Digital Ocean, Heroku, and many more. But in this series, we will be using Digital Ocean because it is cheap, has a simple interface, and will teach you the first principles of hosting a web app that can be applied to any other hosting company. Aka, you'll be learning versatile skills here without having to make a choice yourself.

After going through this series, you will explore MANY MANY more technologies, so don't worry about covering them all now. Right now, the goal is to learn web development, and analysis paralysis of "what tool should I use?" shouldn't get in the way of that.

Additional Q&A

Where can I take this course?

I will be posting on my blog, Dev, Medium, and YouTube. Below are the relevant links to find the series.

• My blog
• Dev
• Medium
• YouTube

Why I chose JavaScript

It's nearly 2021, and according to the StackOverflow developer survey, JavaScript is the most widely used programming language AND happens to be the language I'm most proficient in. Here are some additional reasons why JavaScript is a good choice for us.

• JavaScript powers the web, and will for years into the future
• JavaScript can be used on both the front-end and the back-end (more on this here). This is important because we only have to learn one language to build full-stack web applications rather than two.
• JavaScript is the only true programming language that can be used in the browser, so you pretty much have to learn it no matter what (there is a nuance here though--with the introduction of WASM, you will be able to write non-JavaScript languages in the browser, but this is in its infancy and not something you will be learning at the beginning of your journey)

Why is this free?

I'll be honest, this is free because I don't have the time (I work a full-time job and do this on the side) to sit down and craft together a complete training course from start to finish, record it, edit it, market it, and market it some more. That said, my intention is to provide as good, if not a better quality series for free than most paid training courses. I do plan to sell courses in the future, but I am very passionate about teaching this subject and think everyone should have the opportunity to learn to code for free.

I genuinely think that if you go through this series, you will have the required skills to get a job as a full-stack JavaScript web developer.

Detailed Series Outline

Please note that this is an evolving outline. If there are essential web development topics that I have missed, please raise an issue on Github and I will consider adding it.

Part 1: Coding Basics

• Writing your first JavaScript program
• Introduction to Browser DevTools
• Variables and data types
• What is the "console"?
• Operators and conditionals
• What is a runtime?
• Setting up your local development environment
• Terminal basics
• Loops
• Functions
• Objects
• Imports and exports
• Intro to NodeJS
• Introduction to Git and Github

Part 2: The Basics of Front-End Development

• Introduction to HTML and Creating your first webpage
• Styling your webpage with CSS
• The Document Object Model (DOM)
• The Box Model
• Introduction to Flexbox

Part 3: Deploying your Webpages

• Introduction to Digital Ocean
• Basics of Vim Editor
• How to connect to your VPS (Virtual Private Server)
• Introduction to NGINX (our static webserver)
• DNS and Firewall basics
• Let's put your site on the internet!
• Managing your server and updating your site
• A cheaper, easier way: Github Pages (optional)

Part 4: Basics of Back-End Development

• Package management
• Introduction to ExpressJS
• Modules
• Basic Server
• Express Middleware
• RESTful APIs
• Connecting to the front-end
• Introduction to databases and MySQL
• Designing the database in MySQL Workbench
• Connecting the database to the server
• Testing your blog's API routes

Part 5: Why we need front-end frameworks

• Rendering back-end content with Vanilla Javascript
• Introduction to EJS
• Angular vs. React

Part 6: Authentication

• HTTP Headers and Cookies
• Express Sessions
• Passport Local strategy
• Public key cryptography
• JSON Web Tokens
• Passport JWT
• JWT Authentication from Scratch

Part 7: Building a Content Management System with Angular

• Introduction to Angular
• Basic Angular app
• Connecting Angular to backend
• Designing blog post admin UI

Part 8: Deploying and testing a full-stack app

• Nginx configuration
• Deployment and updates workflow
• Testing your app with Jest
• CI / CD Introduction

Next Steps

This concludes the introduction to the full-stack developer series.

Be sure to get on my email list to receive updates when I post lessons in the future!

Go to next lesson