How I'd Learn Full-Stack Web Development (If I Could Start Over)
ฝัง
- เผยแพร่เมื่อ 17 ส.ค. 2023
- 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 👉 youtube@connerardman.com - วิทยาศาสตร์และเทคโนโลยี
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):
th-cam.com/video/K74l26pE4YA/w-d-xo.html
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):
th-cam.com/video/uuOXPWCh-6o/w-d-xo.html
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):
th-cam.com/video/jS4aFq5-91M/w-d-xo.html
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):
th-cam.com/video/8JJ101D3knE/w-d-xo.html
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):
th-cam.com/video/Gjnup-PuquQ/w-d-xo.html
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.
thanks so much for this video and all the resources included in this pinned comment
Hey could you pin the comment with all the resources?
@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 👍
no fixed @@ConnerArdman
@@ConnerArdman editing comment does that i think
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.
What I need to know is how basic is basic?
@@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
The problem is, companies don't hire devs with basic learning.
you can be in intern. And then go up from there.@@higherpurpose1212
Not enough
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
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! :)
Thank you! Glad you enjoyed it 😃
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!
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.
YOU PERFECTLY EXPLAINED FRAMEWORKS AND LIBRARIES IN 30 SECONDS! omg thank you.
This was fantastic. As a 20+ year full stack web dev this is dead on.
🙌
Actually?
@@LolLol-jm1pv As someone who is learning, i agree with this too
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?
@@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!
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.
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!
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.
😮😮
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!
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.
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 👍👍👍
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.
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...
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 😊
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!
Short, Precise, and understandable. Subscribed.
The buffering really got me haha, thanks Conner a great, organized video!
Gottem 😂
And thanks! Glad you liked the video!
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 👍
There’s a wealth of advice here. Thank you Conner.
Glad you liked it!
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 😅
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!
Good luck! 👊
Nicely explained in layman language.
Thanks ,Conner !!
Clear and concise video, thanks 👍
This is so helpful on so many levels. Thank you
Just gone through this video and it was amazing to me. Wow.
Thank you you explained everything, I enjoyed watching this video
Great effort with great explanation, Thank you!
This edit is on fire!! thanks for the content
You simply overwhelmed me with a millions things you just listed.
It's wonderful video.the way of explaining is awasome.easy to understand with effective examples
Truly amazing and easy to understand, thank you
Very clear, thank you
Awesome video! Super insightful and helpful.
1st I am seeing your video and you gave the best road map on TH-cam. You earn my subscribe.
Thanks! Glad you enjoyed it 😀
Wao! Amazing! Finally a good video about this topic! thank you!
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!
Aww, I'm also a self-taught student
This is actually easy to understand. Other videos on this topic intimidated me a bit :p
Actually i feel this is a practical one in the 1st 3 min itself!
Thanks a lot
Thank you very much for this video
I started my web development journey thanks for this roadmap
Love that, good luck 🙌
Nice one! Thanks for sharing!
I just subscribed to your channel. It's an honor brother. Cheers
Nice roadmap. I am gonna start the journey soon 😊
Nice video currently learning javascript and data structure and algorithms
oky this is the best explained video lve come across in this platform thank you!!!
Amazing, made me understand a lot better then I was bed watching this video.
will come back after doing a project. Just finished basics of HTML and CSS
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?
have you gotten any respond to that here or in real life? ever?
Thanks buddy, Your video is very good. I really appreciate it.
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
learning how to code found this at exact right time thanks yt algorithm and thanks to you
very helpful, thanks
Excellent roadmap
Full detailed course would be great on this topic
i did, html, css, php, developper tools, vc code terminal, now going into js
Thanks Bro👍great stuff
This is by far the best video I've seen on the web development roadmap! Gem of a detailed video!
You've totally earned a new subscriber!
Thanks! Glad you liked it 😃
The pictures used in this video conveys a lot. thank you conner
This is one of the best roadmap videos for web development I've ever seen.
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.
Awesome! I’m glad you found it helpful 👌
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!
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.
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.
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.
You are super underrated!!!
This channel deserve more subs
Thanks! 🚀
Thank you so much❤
thank you for sharing. How long will it take to learn these things? seems like an eternity
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 ?
Thank you 🙌
Excellent Roadmap❤
Thanks. Make another detailed tutorial on web development
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
Great content, just subscribed. I would like to learn.
Do you run any Tutorial class for newbies??
This video is golden
Thank you bro
Best explanation i love it
Nice video, I'm learning about databases. Its lots of fun :D
Thanks! And that’s awesome to hear you’re enjoying it! 🙌
Now that regenerative AI is becoming the norm as the personal tutor and automated reference manual of programmers, would you still recommend the same?
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.
Really good video for biggeners 🎉, really impressive sir
I feel like I have a pretty good grasp on HTML and CSS and made my first static website that I am happy with, and now trying to work on a bigger project that would require databases and user profiles and accounts and using search engines and I haven’t even really started learning JavaScript and when I did start looking at it, I was thinking shit how my gonna get through this? I felt like I spent to much time trying to nail down HTML and CSS that it made JavaScript feel like my mind was just overflowing with information
Almost what i have done except that l learnt Tailwind lately. All in all I agree with this roadmap.
subscribed => very helpful and informative
Great content 👍
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
Very similar to Angela Yu’s Full Stack web development course on Udemy. Hands down the most straightforward full stack curriculum I’ve seen…
Have you completed it?
Spot on.
Thanks so much for your video , well I am actually confused with all different things to make website and things,can you please make a video for those diffrent languages and frameworks that serve the same purpose? For example (python vs java ,angular vs flutter, nodejs vs react .....).i am a complete beginer i want to understand the complete basic please.
This guy reminded me of my whole CS engineering life
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
I want to start doing web development and this video helps out a lot 👍 However where can I actually make a website and start doing the things you have told me to do?
Im on it!!!❤
This video is super legit, great job!
Thanks!
What a great video Conner, new sub here!!!
Thanks! Glad you enjoyed it 😃
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)
That's good to hear.
At what time should I learn Containers and orchestration if so?
Thanks
@@yogotonyeugineMy honest opinion: It is better to learn things on the go. Programming is all about problem solving. You stumble upon some problem you learn necessary tools and skills to solve it. Say you're learning React and as a beginner you'd mostly build simple projects, but as soon as your projects codebases start to grow you'll catch yourself prop drilling the state through components resulting in a huge mess, and figures this is perfect time for you to learn the concept of state management. So to answer your question, you should learn docker and containerization when you're done building your first fullstack web app ready to be uploaded to the cloud, till then it's not something you should be bothered about.
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.
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.
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.
I agree that they are easy to learn, but they are hard to use and not worth using beyond just prototyping(except GO) imho. Anything that's more complex should be done in a proper statically typed language.
What free application do you recommend to practice coding languages?
HTML, css (grid), vanilla JavaScript plus fetch,PHP,MySQL,cron jobs json python