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

AWS Startups GenAI Day - Build Generative AI on AWS - One Day Virtual Event - Thursday September 14th @ 9:00AM PST - Register Now rmbrnd.com/GenAI23 Virtual product placement by Rembrand www.rembrand.com
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:
www.frontendexpert.io/conner
🎬 TikTok: / connerardman
💼 LinkedIn: / connerardman
💻 Video/Coding Gear: www.amazon.com/shop/connerardman
📅 Book A 1-on-1 With Me: 1-on-1.com/connerardman
Business/brands 👉 [e-mail]

[@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: developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics MDN CSS Reference: developer.mozilla.org/en-US/docs/Web/CSS/Reference Flexbox in 100 seconds (by Fireship): kzbin.info/www/bejne/gWiXnWVspapnj6M Flexbox Froggy (learn CSS flexbox game): flexboxfroggy.com/ MDN Accessibility: developer.mozilla.org/en-US/docs/Web/Accessibility W3 Accessibility: www.w3.org/WAI/fundamentals/accessibility-intro/ MDN Responsive Design: developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design CSS Grid in 100 seconds (by Fireship): kzbin.info/www/bejne/q6ayiYONeM1gbNE FrontendExpert CSS Transitions/Animations (free video I made): www.algoexpert.io/frontend/css-crash-course/animations JavaScript info: javascript.info/ MDN JavaScript Guide: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide MDN Intro To The DOM: developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents MDN Intro To JavaScript Events: developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events JavaScript Course (by FreeCodeCamp): kzbin.info/www/bejne/oISXknmnapJsZ68 MDN Using Fetch: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch FrontendExpert Working With The Server (free video I made): www.algoexpert.io/frontend/javascript-crash-course/working-with-the-server FrontendExpert Working With APIs / types of APIs (free video I made): www.algoexpert.io/frontend/web-dev-fundamentals/working-with-apis MDN JSON: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON Free Public APIs: github.com/public-apis/public-apis Command Line For Beginners (FreeCodeCamp): www.freecodecamp.org/news/command-line-for-beginners/ Git In 1 Hour (by ProgrammingWithMosh): kzbin.info/www/bejne/bnutYmNneZiepKc GitHub Docs: docs.github.com/en/get-started/quickstart/git-and-github-learning-resources MDN Node.js: developer.mozilla.org/en-US/docs/Glossary/Node.js Node.js Getting Started Docs: nodejs.org/en/docs/guides/getting-started-guide MDN Express: developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs Express Docs: expressjs.com/en/starter/installing.html MySQL Basics: www.mysqltutorial.org/mysql-basics/ Using MySQL With Node: www.mysqltutorial.org/mysql-nodejs/ SQL Zoo Tutorial: sqlzoo.net/wiki/SQL_Tutorial MongoDB Getting Started: www.mongodb.com/docs/manual/tutorial/getting-started/ How To Use MongoDB With Node.js: flaviocopes.com/node-mongodb/ MDN MongoDB/Mongoose With Node/Express: developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose React.js Docs: react.dev/learn MDN Getting Started With React: developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started TypeScript Docs: www.typescriptlang.org/docs/handbook/ MDN How Does The Internet Work: developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work Geeks For Geeks Computer Networks Basics: www.geeksforgeeks.org/basics-computer-networking/# Docker Docs: docs.docker.com/ Docker in 100 Seconds (By Fireship): kzbin.info/www/bejne/fZvRpqNjhdqkq7M AWS EC2 Docs: docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html MDN Security: developer.mozilla.org/en-US/docs/Web/Security MDN Server-Side Security developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security Next.js Docs: nextjs.org/docs The Odin Project: www.theodinproject.com/ MDN Learn Web Development: developer.mozilla.org/en-US/docs/Learn Mega Full-Stack Resource Guide (tons more links here): hawkticehurst.com/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.

[@johnnyjev9840]

thanks so much for this video and all the resources included in this pinned comment

[@shreya6229]

Hey could you pin the comment with all the resources?

[@ConnerArdman]

@shreya6229 Weird, I'm pretty sure this was pinned at one point. Not sure how it got unpinned, but thanks for the heads up! Fixed now 👍

[@Ventt_]

no fixed @@ConnerArdman

[@cold_]

@@ConnerArdman editing comment does that i think

[@user-nn5sk8hn5f]

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.

[@HaggisMuncher-69-420]

What I need to know is how basic is basic?

[@UNIVERSAL25433]

​@@HaggisMuncher-69-420 basic in quote "basic", are the very 1st and important step one must know before diving into the main course, so it won't be complicated when you decide to go deeper

[@higherpurpose1212]

The problem is, companies don't hire devs with basic learning.

[@divanshu5039]

you can be in intern. And then go up from there.@@higherpurpose1212

[@jakubfrei3757]

Not enough

[@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

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

[@ConnerArdman]

Thank you! Glad you enjoyed it 😃

[@robertjr8205]

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!

[@JenJHayden]

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

[@OIP_1]

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.

[@ry3833]

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!

[@stachowi]

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

[@ConnerArdman]

🙌

[@LolLol-jm1pv]

Actually?

[@st7171]

@@LolLol-jm1pv As someone who is learning, i agree with this too

[@DanBauer]

As someone a few months into coding, what’s a reasonable timespan to learn enough about the different steps in this video to be hirable?

[@stachowi]

@@DanBauerIMO if focused and doing it full time (couple hours a day), 6 months. Not as full stack, but like a junior front end dev. Now with ChatGPT... you can become a super learner... I would ask it to explain anything that you don't understand. "Explain how the web works to a 7th grader" and then just ask it anything you don't get. Things never came easy to me, i'm just very persistent, I study the fundamentals 20 years into it, i just love to reinforce concepts over and over so i just get them. Best of luck!

[@dianaabisheva745]

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.

[@ecom-ninjutsu]

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.

[@user-bu3gj9ll5w]

😮😮

[@jonathanjohnson2785]

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

[@sovithonhin6831]

Short, Precise, and understandable. Subscribed.

[@thevanegas9678]

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.

[@catharperfect7036]

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.

[@keirangrant3706]

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 😊

[@Cuber1771]

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!

[@a7mdbest15]

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 👍

[@SRP47]

Nicely explained in layman language. Thanks ,Conner !!

[@varunpalsingh3822]

Clear and concise video, thanks 👍

[@tuna_yag]

This edit is on fire!! thanks for the content

[@johan9388]

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

[@alanmurray4011]

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

[@ConnerArdman]

Glad you liked it!

[@jammy2003]

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

[@ConnerArdman]

Gottem 😂 And thanks! Glad you liked the video!

[@RhodaOgungbemi]

This is so helpful on so many levels. Thank you

[@voxmor]

Great Video! After a few iterations, I found myself following the path you describe, but it sure would have been great to do it from the start 😅

[@abhcode7219]

Actually i feel this is a practical one in the 1st 3 min itself! Thanks a lot

[@iamchristotle]

Just gone through this video and it was amazing to me. Wow.

[@omarelesnawy1833]

Great effort with great explanation, Thank you!

[@abdiazeezmohamed8020]

Truly amazing and easy to understand, thank you

[@gregorydaggett7444]

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!

[@ConnerArdman]

Good luck! 👊

[@ojaypopeyee179]

Nice video currently learning javascript and data structure and algorithms

[@reshtinzegham3118]

You simply overwhelmed me with a millions things you just listed.

[@SahibNub]

Nice roadmap. I am gonna start the journey soon 😊

[@kallamsudhakar4957]

It's wonderful video.the way of explaining is awasome.easy to understand with effective examples

[@proflead]

Nice one! Thanks for sharing!

[@Robert-Ncube]

oky this is the best explained video lve come across in this platform thank you!!!

[@kehastube2014]

Best explanation i love it

[@murtajiz545]

Awesome video! Super insightful and helpful.

[@bolangnfi8557]

This video is golden

[@Iroda_Ikhtiyorova]

Very clear, thank you

[@elenavargas7764]

Wao! Amazing! Finally a good video about this topic! thank you!

[@CM-di5bw]

Thanks Bro👍great stuff

[@pucksheet4456]

I started my web development journey thanks for this roadmap

[@ConnerArdman]

Love that, good luck 🙌

[@mahamoudlaag8773]

Amazing, made me understand a lot better then I was bed watching this video.

[@nazzgif]

This is actually easy to understand. Other videos on this topic intimidated me a bit :p

[@robertspidey8136]

I just subscribed to your channel. It's an honor brother. Cheers

[@justforthevibes3290]

will come back after doing a project. Just finished basics of HTML and CSS

[@Evangelist45938]

You are super underrated!!! This channel deserve more subs

[@ConnerArdman]

Thanks! 🚀

[@eddieburris675]

Woah 1st video I've seen of yours and you have earned my sub, like, & comment for the algorithm brother. Not only did you provide realistic & original content, you don't have some course of affiate leak to push. When I first started to teach myself 6 months ago, there was all these roadmap videos tht were all bear minimum, as well as 99% of them being the exact same then at the end they sneak in "you can follow this roadmap, clickthe link do buy my course" But whats worse: your about to finish 30min+ roadmap vid, think you got good advice, genuine advice, then towards the end: "you can follow this exact path if you click my affiliate link for the "learn full stack and get a senior developer position @ FANG in 2 days only!" By udemy, to get 2% off this $800 course! BUT THIS IS A GODDAMN MASTERPIECE! Fr tho, the amount of info you were able to set out step by step istop tier. Best roadmap vid, hands down

[@Clean_Code856]

Thank you so much❤

[@user-qp3jb3oh7d]

Hey Conner, this was amazing but there is one more part if you could cover. In interviews questions like how to maintain atomicity and some more questions related to system designs are asked although I am having 5 + years of experience heavily on frontend but when I attend interviews, these sort of questions sometimes daunt me. I do have knowledge of backend but not at a deep level. How should we approach studying these topics?

[@14onyx]

have you gotten any respond to that here or in real life? ever?

[@shernurshirinkulov501]

very helpful, thanks

[@Mithun1717]

Excellent Roadmap❤

[@tonyng6448]

Excellent roadmap

[@babushka10]

Full detailed course would be great on this topic

[@gusidichaitanya176]

This guy reminded me of my whole CS engineering life

[@Mohammedali-yf8pj]

Great content 👍

[@motivationalthought7429]

Thanks buddy, Your video is very good. I really appreciate it.

[@gwho]

wow, looking back, this IS a lot of different stuff to learn.

[@jumpingchamp8150]

Im on it!!!❤

[@fairygirlspa992]

Thank you 🙌

[@armsthetics]

Appericate you for this as a computer science student and learning full stack on my own, this is a lot of value and definitely nice guide to follow!

[@felixkwakye9226]

Aww, I'm also a self-taught student

[@shawnthomas85]

1st I am seeing your video and you gave the best road map on KZbin. You earn my subscribe.

[@ConnerArdman]

Thanks! Glad you enjoyed it 😀

[@aymenortashi8411]

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

[@misogynist8293]

learning how to code found this at exact right time thanks yt algorithm and thanks to you

[@ndayisabajonas8452]

Thanks. Make another detailed tutorial on web development

[@Game-tz2lb]

Thank you bro

[@zatcode]

Really good video for biggeners 🎉, really impressive sir

[@brig2913]

This video is super legit, great job!

[@ConnerArdman]

Thanks!

[@gateCodeKC]

Thanks for the tip! I'm on my 2nd week into html & css but my head wants to know how it works inside the pc. Like how or why the computer executes the words I input in the code editor. As a guy who, previously, drafts architectural plans that's usually how my brain work. I absorb information better if I understand how it all interacts with each other. Thank you for your roadmap!

[@hashbrown9245]

When a browser receives your html document, it will parse it, that is read it character by character splitting it by tags. It will later create an abstract syntax tree based on how the tag are arranged with each other, and finally read through the tree and call on some lower level graphics library to display the content. The first steps of this process are essentially how all programming languages work. There is of course more detail that I am skipping, but this process does not really matter for a web developer since it is already done for us. We abstract the low level details and use a relatively straightforward which is html and css.

[@sharafmakk2936]

As a computer engineer, you can go as deep as digital electronics to answer those questions. Or even deeper if you want to study the intricate physics behind the computers.

[@marmak256]

Basically it's like this: *Your code in your code editor* --> translated into assembly language --> translated into machine code (0's and 1's) --> the processor reads each machine code instruction (normally in 32 or 64 bits) and it can be multiple clock cycles for each instruction. The 0's and 1's splits into specific segments that travels to different parts of the processor.

[@ola...o1009]

Thanks for the languages map. I am not a coder. Petroleum background but looking to learn languages that criss cross multiple industries. Where does Python fall in Web Development ?

[@juanpedrosantiago]

Now that regenerative AI is becoming the norm as the personal tutor and automated reference manual of programmers, would you still recommend the same?

[@innocentofodum9395]

Great content, just subscribed. I would like to learn. Do you run any Tutorial class for newbies??

[@bondaribogdan9759]

its very helpful i will learn on this way and i hope that i would get to learn and to become a software engineer its may dream job

[@preciouspets8m396]

Spot on.

[@Girish-Navani]

After learning two month of html css. I am here. I was searching for this guidance bro. Thank you . This road map is what i was searching for. Really appreciate your work.

[@ConnerArdman]

Awesome! I’m glad you found it helpful 👌

[@GauravSingh-tv9bp]

well no words to describe i was asking everyone that how i can learn web development but no one could give the proper way(they wanted to open up and tell (well fucks)) but thank you so much for opening up and telling properly feels so good thank yoou so much:))) may god fulfill all your wishes

[@towbbie]

subscribed => very helpful and informative

[@yousifnassir2242]

Almost what i have done except that l learnt Tailwind lately. All in all I agree with this roadmap.

[@MonkeyD_Luthy]

This is a great map

[@dem4rec554]

Nice video, I'm learning about databases. Its lots of fun :D

[@ConnerArdman]

Thanks! And that’s awesome to hear you’re enjoying it! 🙌

[@zalty8556]

Yo thank you so much for this video there’s so much info out there in terms of stacks it felt overwhelming I have mostly been doing leetcode with python to hone in problem solving skills but want to now start building some projects and hopefully get hired thx

[@theproactivemindset]

What a great video Conner, new sub here!!!

[@ConnerArdman]

Thanks! Glad you enjoyed it 😃

[@Dontgo5]

thank you for sharing. How long will it take to learn these things? seems like an eternity

[@eternalifeproductions]

HTML, css (grid), vanilla JavaScript plus fetch,PHP,MySQL,cron jobs json python

[@lakshmanshankar]

The pictures used in this video conveys a lot. thank you conner

[@TheStrategist314]

I don’t know if this is the best way…but it’s easy to understand. That is important because your learning journey will not be.

[@exitous3857]

I think adding in Containers and orchestration is a good thing to learn as a full stack engineer. Most of the time this is handled by devops and infra team but it’s good to understand how your code is accessed in production and how it’s served from an internal network to the public web (ingress)

[@yogotonyeugine]

That's good to hear. At what time should I learn Containers and orchestration if so? Thanks

[@andrefarinha419]

Hello i am doing a project for school. I need to create a website for web and android. I need to use Database for my data.(SQL? MAYBE) Wich program do you suggest that i use to build the website. I need to have a admin system, where he changes data and a client system. Thank you!

[@1776_Reasons]

As someone who has spent 14 minutes researching the requirements of a web development certificate, I'm not qualified to comment on the usefulness of this video. But I appreciate it! 😂

[@chizidotdev]

Very similar to Angela Yu’s Full Stack web development course on Udemy. Hands down the most straightforward full stack curriculum I’ve seen…

[@AyeManRavoen]

Have you completed it?

[@raiaiorfa1396]

Great video thank you, I was feeling very overwhelmed (am still pretty overwhelmed) with all the things I have to learn but at least now I know where to start. I actually want to learn PHP for back-end, is that ok, please do you have any suggestions.

[@ConnerArdman]

Thanks! You can learn PHP for the backend if you prefer, but I’m not really sure why you would unless you have a specific use case in mind. It’s been declining in popularity for years, and in my opinion it is significantly harder to learn than Node or Python.

[@korngsamnang]

This is one of the best roadmap videos for web development I've ever seen.

[@calvinyip364]

What about UI and UX to design the website?

[@AestheticHumans]

I love flexbox

[@ivankisakye265]

Thanks thanks

[@Nickator]

Hey I'm still a student now and I was curious in general how long would it take someone with a bit of consistency to learn everything you said in the video? (Obviously you can learn each one with more dept but just enough understanding to implement everything together)

[@ConnerArdman]

It really depends on the person and their “consistency” just like learning anything else. But to try to give you an idea, most of the better bootcamps teaching similar content take ~6 months of 8-12 hour days. That’s probably a good marker for just about as fast as possible to get to an employable junior level. Of course, if you spend 2 hours a day, it will take way longer. That said, you can be effective at some parts of development pretty early on (and maybe even employable for some basic freelance work). For example, if the goal is just to make a website for your portfolio or local business, you can probably get there very quickly.

[@Nickator]

@@ConnerArdman thanks! I recently came across your channel and it's a gem you'll definitely get big!

[@Nickator]

@@ConnerArdman hey I had a question, I'm in my first year of cs engineering and I'm really confused weather I should get into web development right now or should I focus on data structures and algorithms!?

[@ConnerArdman]

You have _a lot_ of time. I'd say just experiment with different things and figure out what you like best. That said, data structures and algorithms is by far the most important class you'll take for getting internships. In general, I'd recommend to take it as early as you can for that reason.

[@aydennnx]

I've been employed as a front end developer for 8 years, learning at my own pace. I’ve started off building front end UI with jQuery and then it took me a couple years to transition to react. I would say I know 80% of what your roadmap covers, but I still feel like I lack the skillset to apply for a full stack job. I feel like my understanding of databases, cloud and security is mediocre because I have no real work experience working with these. If anything, these new react frameworks like NextJS, Gatsby, and Remix has helped me learn more about the backend but I don’t think it’s enough to start applying for a full stack job. I’m probably going to be stuck as a front end developer for awhile, based on the job market.