How I'd Learn Full-Stack Web Development (If I Could Start Over)

Learning full-stack web development can be a daunting task. There's so many different complicated road maps and tutorials out there, that it's hard to know what to learn. This video should give you a step-by-step approach to how to start learning web development.

Prepping for your frontend interviews? Use code "conner" for a discount on my product FrontendExpert:

[ConnerArdman]

Hey everyone, thanks for watching! While this video provides a roadmap for learning web development, it’s also important to have a set of good resources to follow with each step. Here’s some of my favorite free ones, but let me know if there’s any I missed!

MDN HTML Basics:

MDN CSS Reference:

Flexbox in 100 seconds (by Fireship):

Flexbox Froggy (learn CSS flexbox game):

MDN Accessibility:

W3 Accessibility:

MDN Responsive Design:

CSS Grid in 100 seconds (by Fireship):

FrontendExpert CSS Transitions/Animations (free video I made):

JavaScript info:

MDN JavaScript Guide:

MDN Intro To The DOM:

MDN Intro To JavaScript Events:

JavaScript Course (by FreeCodeCamp):

MDN Using Fetch:

FrontendExpert Working With The Server (free video I made):

FrontendExpert Working With APIs / types of APIs (free video I made):

MDN JSON:

Free Public APIs:

Command Line For Beginners (FreeCodeCamp):

Git In 1 Hour (by ProgrammingWithMosh):

GitHub Docs:

MDN Node.js:

Node.js Getting Started Docs:

MDN Express:

Express Docs:

MySQL Basics:

Using MySQL With Node:

SQL Zoo Tutorial:

MongoDB Getting Started:

How To Use MongoDB With Node.js:

MDN MongoDB/Mongoose With Node/Express:

React.js Docs:

MDN Getting Started With React:

TypeScript Docs:

MDN How Does The Internet Work:

Geeks For Geeks Computer Networks Basics:

Docker Docs:

Docker in 100 Seconds (By Fireship):

AWS EC2 Docs:

MDN Security:

MDN Server-Side Security

Next.js Docs:

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:
1. 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.
2. Try not to feel overwhelmed by everything. Take it 1 step at a time, using 1-2 primary resources for each step.
3. 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.
4. 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.

[nnskhnf]

For Front-End：

1.Basic of Html.
2.Basic of Css.
3.Fundamentals of Javascript.
4.Dom Manuplation.
5.Make Projects.
6.Revisit Html and Css for 7.Transition and animation etc.
Learn framework like Bootstrap or tailwind css.

[stachowi]

This was fantastic. As a 20+ year full stack web dev this is dead on.

[JenJHayden]

YOU PERFECTLY EXPLAINED FRAMEWORKS AND LIBRARIES IN 30 SECONDS! omg thank you.

[esahoosa]

This is easily the best roadmap that I’ve seen as a beginner developer and has really simplified how I should I progress. You’ve earned yourself a new subscriber my friend! :)

[OIP_]

this is great, thanks - i've done about 50% of the odin project and it covers much of this ground but this also added some new ideas. there is *so* much to learn i find you have to be enjoying the journey and pace yourself or it's just overwhelming.

[Inkarnid]

It’s great when experienced developers such as yourself make a clear concise video like this. It took me personally years to get a clear picture of how distributed systems work and what technologies you should know to build them. For beginners I’m sure this would help a lot in arriving there faster

[astrahcat]

Starting with the front end and just making simple html js and css web pages is really the way to go, then learning how to send and receive http requests. Ask chat gpt tons of questions its never impatient ao dumb questions really help learn faster.

[jonathanjohnson]

Thank you for the valuable information and also for creating it in a step by step manner. Jumping into react js too soon was a big shift for me and took me a while to grasp things. All the best 👍👍👍

[ry]

awesome video! Im a CS student but i still have a hard time grasping why i learned something and how they all relate to each other, so tysm for making this video!

[robertjr]

This is the best video I have ever seen on web dev.
Straight to point. No vague “just build something, learn by building you’ll get there” this actually gives you a solid foundation on how to start and when to move to the next thing. Thank you so much bro!

[dianaabisheva]

thank you! you’re literally a godsend. i thought i would never learn css and html because of how broad they are, but this just shortens my path and worries even more! thank you.

[Ramix]

This is the best ever roadmap i ever seen from all videos out there, the order is on point!

Bro you're a real G! Hope u all the best with ur life brother!

[rossmaaron]

You confimred a lot of things I had already been thinking about. Instant subscriber. In the short time I've been watching videos, no one has laid it out like this, with detailed explanations. Thank you.

[thevanegas]

I’ve followed that path, I’m on react step. It is nice to know that I haven’t lost my time and I’m doing well. I even know infrastructure as Docker and AWS. I need to learn backend.

[catharperfect]

Brilliant video. Watched it twice and made notes. Favourited. Before this was legitimately getting anxiety from just trying to figure out the best way to move forward from mashing together HTML/CSS files like a n00b.

[johan]

I'm so excited to learn this. I've done basic html and css so far. A little deeper into css with flex box and now learning grid and bootstrap. And then I'll dive into javascript. I hope that won't be too overwhelming...

[keirangrant]

This was a really good breakdown of things to learn, amazing video. One thing I would have liked to have seen included was a time frame as to how long (on average) people should spend on each topic. Obviously everyone learns at different speeds but a general estimate would have been nice to see. Other than that, fantastic video 😊

[Cuber]

Dude, this is awesome. I just started learning web dev when I saw this, so I will be sure to use it a lot. You just gained a subscriber!

[amdbest]

I like this, very clear roadmap for anyone would start, but maybe implementing more projects along the way will help more to put this knowledge in experience, good job 👍