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

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

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.

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! :)

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: /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics MDN CSS Reference: /en-US/docs/Web/CSS/Reference Flexbox in 100 seconds (by Fireship): /watch?v=K74l26pE4YA Flexbox Froggy (learn CSS flexbox game): / MDN Accessibility: /en-US/docs/Web/Accessibility W3 Accessibility: /WAI/fundamentals/accessibility-intro/ MDN Responsive Design: /en-US/docs/Learn/CSS/CSS_layout/Responsive_Design CSS Grid in 100 seconds (by Fireship): /watch?v=uuOXPWCh-6o FrontendExpert CSS Transitions/Animations (free video I made): /frontend/css-crash-course/animations JavaScript info: / MDN JavaScript Guide: /en-US/docs/Web/JavaScript/Guide MDN Intro To The DOM: /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents MDN Intro To JavaScript Events: /en-US/docs/Learn/JavaScript/Building_blocks/Events JavaScript Course (by FreeCodeCamp): /watch?v=jS4aFq5-91M MDN Using Fetch: /en-US/docs/Web/API/Fetch_API/Using_Fetch FrontendExpert Working With The Server (free video I made): /frontend/javascript-crash-course/working-with-the-server FrontendExpert Working With APIs / types of APIs (free video I made): /frontend/web-dev-fundamentals/working-with-apis MDN JSON: /en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON Free Public APIs: /public-apis/public-apis Command Line For Beginners (FreeCodeCamp): /news/command-line-for-beginners/ Git In 1 Hour (by ProgrammingWithMosh): /watch?v=8JJ101D3knE GitHub Docs: /en/get-started/quickstart/git-and-github-learning-resources MDN Node.js: /en-US/docs/Glossary/Node.js Node.js Getting Started Docs: /en/docs/guides/getting-started-guide MDN Express: /en-US/docs/Learn/Server-side/Express_Nodejs Express Docs: /en/starter/installing.html MySQL Basics: /mysql-basics/ Using MySQL With Node: /mysql-nodejs/ SQL Zoo Tutorial: /wiki/SQL_Tutorial MongoDB Getting Started: /docs/manual/tutorial/getting-started/ How To Use MongoDB With Node.js: /node-mongodb/ MDN MongoDB/Mongoose With Node/Express: /en-US/docs/Learn/Server-side/Express_Nodejs/mongoose React.js Docs: /learn MDN Getting Started With React: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started TypeScript Docs: /docs/handbook/ MDN How Does The Internet Work: /en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work Geeks For Geeks Computer Networks Basics: /basics-computer-networking/# Docker Docs: / Docker in 100 Seconds (By Fireship): /watch?v=Gjnup-PuquQ AWS EC2 Docs: /AWSEC2/latest/UserGuide/concepts.html MDN Security: /en-US/docs/Web/Security MDN Server-Side Security /en-US/docs/Learn/Server-side/First_steps/Website_security Next.js Docs: /docs The Odin Project: / MDN Learn Web Development: /en-US/docs/Learn Mega Full-Stack Resource Guide (tons more links here): /writing/mega-full-stack-resource-guide/ 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.

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

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

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!

There’s a wealth of advice here. Thank you Conner.

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.

I'm an old school developer, mostly working on backend and databases. Recently got interested in full stack development and this video described my hours of research in 10 minutes!! This is one of the best roadmaps I've seen with very simple starting points for each stage! You're AWESOME! THANKS!!

The best roadmap for full-stack development on YouTube.

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.

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!

i did, html, css, php, developper tools, vc code terminal, now going into js

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.

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.

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 👍👍👍

The buffering really got me haha, thanks Conner a great, organized video!

I'm just starting my journey in coding so I can build out a website! This will be super helpful as I learn and work towards that goal. Thank you!

...and when you learn all of this, you can also learn how to solve traffic jams for New York City.