abhie7 / roadmap-full-stack

Roadmap for Learning Web Development - Free!

A comprehensive roadmap to guide you through your web development learning journey. Remember, it's okay to explore tangents and take it one step at a time.

Credit - Video Reference - Conner Ardman

HTML Basics

• MDN HTML Basics

CSS Fundamentals

• MDN CSS Reference
• Flexbox in 100 seconds (by Fireship)
• Flexbox Froggy (learn CSS flexbox game)

Accessibility

• MDN Accessibility
• W3 Accessibility

Responsive Design

• MDN Responsive Design
• CSS Grid in 100 seconds (by Fireship)

CSS Transitions/Animations

• FrontendExpert CSS Transitions/Animations (free video)

JavaScript Fundamentals

• JavaScript.info
• MDN JavaScript Guide
• MDN Intro To The DOM
• MDN Intro To JavaScript Events
• JavaScript Course (by FreeCodeCamp)

Fetch API

• MDN Using Fetch

Working With The Server

• FrontendExpert Working With The Server (free video)

Working With APIs

• FrontendExpert Working With APIs / types of APIs (free video)

JSON

• MDN JSON

Free Public APIs

• Free Public APIs

Command Line Basics

• Command Line For Beginners (FreeCodeCamp)

Git Basics

• Git In 1 Hour (by ProgrammingWithMosh)
• GitHub Docs

Node.js

• MDN Node.js
• Node.js Getting Started Docs

Express.js

• MDN Express
• Express Docs

MySQL

• MySQL Basics
• Using MySQL With Node

SQL

• SQL Zoo Tutorial

MongoDB

• MongoDB Getting Started
• How To Use MongoDB With Node.js
• MDN MongoDB/Mongoose With Node/Express

React.js

• React.js Docs
• MDN Getting Started With React

TypeScript

• TypeScript Docs

How Does The Internet Work

• MDN How Does The Internet Work

Computer Networks Basics

• Geeks For Geeks Computer Networks Basics

Docker

• Docker Docs
• Docker in 100 Seconds (By Fireship)

AWS EC2

• AWS EC2 Docs

Security

• MDN Security
• MDN Server-Side Security

Next.js

• Next.js Docs

Additional Resources

• The Odin Project
• MDN Learn Web Development
• Mega Full-Stack Resource Guide (tons more links here)

Also, a few other notes I wanted to add:

• The goal here was to give a streamlined approach. As you learn things, you will naturally go on some tangents down different areas. That is not only okay, but actually encouraged as an important part of learning.
• Try not to feel overwhelmed by everything. Take it 1 step at a time, using 1-2 primary resources for each step.
• Note that you don’t necessarily need to learn everything in all of these steps, particularly the later ones. That said, I wanted to include it all for more completeness.
• I mention SEO and performance both as key benefits of SSR in the video. But I wanted to add that these topics are not necessarily linked to each other. Learning about both SEO and performance optimizations can be a great step towards improving your skills! Also, there’s plenty of other benefits to SSR.