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): ruclips.net/video/K74l26pE4YA/видео.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): ruclips.net/video/uuOXPWCh-6o/видео.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): ruclips.net/video/jS4aFq5-91M/видео.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): ruclips.net/video/8JJ101D3knE/видео.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): ruclips.net/video/Gjnup-PuquQ/видео.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.
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 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
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 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 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! :)
@@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.
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!!
I’m very interested in knowing what de difference is between a formal education from back in the day compared to the free resources available online in 2024 if you are interested in sharing.
@@henrysanji3989 I can only talk about Computer Science program. We started with C & C++ and mostly we worked on algorithms. Java was a very popular course and we were encouraged to use Java a lot for most projects. We learned the theory, a lot of it (Advanced Math & Computer Theories). So basically you end up being a very good algorithm maker using C/C++/Java. Many had done their final year project using C or Java. Some self taught LAMP stack for their projects. As you can see, the web dev stacks that we have now weren't the focus back in our days. The focus was into solving difficult problems and being able to convert it in code.
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.
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’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.
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.
The problem with this approach (at least as implied by the circles and arrows graphic) is that it's linear - you learn thing 1, and then you can move on to thing 2, etc. Instead, learning is more like a spiral where you learn a little bit about HTML and CSS, then you learn a little bit about web frameworks, then you learn how to commit your code to GitHub, then you write a small back end server to handle requests, then you go back and beef up the client-side scripts with DOM manipulation, then you learn how to make git branches, then you learn how to store some data to a noSQL database, then you go back and play with the CSS to make your site pretty, then you add some features that need some more back-end stuff, then you realize you have to move to a SQL database... All the while you might be using libraries, and then you might move to more comprehensive framework...
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...
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!
Thank you for this. I think I just found my problem. As a front end developer of almost 3 years I still struggle to understand some of the syntax. I know JavaScript (beginner - intermediate level) then I just jumped into react with not enough experience in JavaScript. Thank you for this video it gives me what I’m missing. Cheers!!
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.
bro can you give me an idea about how much time it will take to learn the basics of html css and js to build a proper functional website ? around how much time ? and which portion of learning will take much time ?
@@reaperv1 month html and css, then 2-3 months of javacript including asynchronous programming. Take note that this is achievable if you code for 8-12 hours a day / 6 days a week, consistently. But you can stop on DOM manipulation in javascript then practice on basics until it will be like second nature to you.
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 😊
I started coding 5 years ago like this Html -> css -> JavaScript (not finished fully) -> bootstrarp. Then huge 2 years break then i came cross java and become interested in back-end 😊 Java se (completed) -> java ee (current) -> spring (next thing to learn). Whatever u choose front or back end one thing is important that u dont have to give up, just give yourself a little break if u stuck and come back again.
I know a decent amount of HTML & CSS and a tiny bit of vanilla JS/DOM stuff, but my university is having us jump straight to Angular and it's pretty confusing. This info helps a lot, I think I need to do things in vanilla JS for a while first. I'm definitely someone who tries to drill down through abstraction to understand things (my path was basically batch scripts -> Python -> C++ -> C), so the web world has been very disorienting for me.
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!
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! 😂
Encryption vs Hashing of passwords. Awesome video for me learning the full stack of website building on my own time while studying and applying cybersecurity, I will just make a note that passwords are best not encrypted but hashed and even better with a salted hash
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.
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)
@@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.
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.
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 👍👍👍
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 👍
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.
learning programming is absolutely not hard. you just need patiance and read a lot. and by a lot i mean a lot. i have read over 5 books with 1000 pages each and now im a professional.
Im in sales but im finding a big disconnect between what i do and what is done on the backend by our devs. Wanting to study this for my own interests but also to better understand the work our devs do so i can properly set expectations for our customers and quickly shut down things that are just outright impossible and more importantly filter the requests that get sent to the devs as well. This roadmap is helpful but are there courses or programs you’d recommend as well? There are so many out there and i dont have enough knowledge to know whats good or whats bad *scratch that. Found your other vids. Here we go!
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?
If there is a specific answer to this question, how much time should I spend at each step? Would someone be able to learn it all in one month? If not, how much time would you esteem? Then there's a question for Conner: are there videos on your channel on these topics?
Of course there isn't a specific answer to that question, you should spend as much time as it takes you to learn it. That entirely depends on you and your study habits. Likewise, the timeline will vary wildly from person to person, but no there is 0 chance you could learn all of this in a month. There's a reason computer science degrees take 4 years and even coding bootcamps take 6+ months of full-time work. As for videos on the topics, I don't do a lot of tutorial content on this channel, but check the pinned comment for a ton of resources 👍
Yes! I'm pretty proficient in everything back-end (C, C++, C#, Java, Python, JS, TS, the works). But as far as actual front end goes, I'm @#$& out of luck. I tried jumping head first into Angular and I was sorry to do so. I am now learning HTML and CSS and God will help me actually do something This path reminds me of learning these coding languages - start with the basics, C, because the rest aren't much more than abstractions that themselves rely on C. Just as all these frameworks are nothing more than a fancy wrapper to HTML, CSS and JS.
What is the roadmap for someone interested in learning frontend development instead of pursuing full-stack development, considering its difficulty for many?
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
@@mryup6100 yes I think you are right but as I go and learn I can just keep adding on, and I will start a web development course at the start of next year which should help, and until then I’ll just keep self learning, thanks for the advice
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?
Only saw this video now, but I have a question, that i think its quite important, how much time should I spend in this "journey" or in each step? A few months? A year perhaps? I think the answer to this question might help me know how much time I should spend in each step helping me progress better.
Great video Conner. im about learn programming and web development, how long would it take for me to grasp a reasonable level these things you listed? Thanks
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.
Idk man. College teaches other back end technologies like Java (Spring Boot), Python (Django) and C# (.NET) which are used by most companies and enterprises. Node js ain’t that popular in the work environment. Maybe for personal projects, a startup and of course RUclips. But not if your planning on working for a big company.
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.
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 ?
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):
ruclips.net/video/K74l26pE4YA/видео.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):
ruclips.net/video/uuOXPWCh-6o/видео.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):
ruclips.net/video/jS4aFq5-91M/видео.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):
ruclips.net/video/8JJ101D3knE/видео.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):
ruclips.net/video/Gjnup-PuquQ/видео.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
YOU PERFECTLY EXPLAINED FRAMEWORKS AND LIBRARIES IN 30 SECONDS! omg thank you.
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
you can be in intern. And then go up from there.@@RUclips_IS_WOKE
Not enough
react left the chat, angular left the chat, jquery left the chat, figma left the chat
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 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 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 😃
You forgot to add 10+ years to learn all these technologies and master them.
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.
The best roadmap for full-stack development on RUclips.
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!!
I’m very interested in knowing what de difference is between a formal education from back in the day compared to the free resources available online in 2024 if you are interested in sharing.
@@henrysanji3989 I can only talk about Computer Science program. We started with C & C++ and mostly we worked on algorithms. Java was a very popular course and we were encouraged to use Java a lot for most projects. We learned the theory, a lot of it (Advanced Math & Computer Theories). So basically you end up being a very good algorithm maker using C/C++/Java. Many had done their final year project using C or Java. Some self taught LAMP stack for their projects.
As you can see, the web dev stacks that we have now weren't the focus back in our days. The focus was into solving difficult problems and being able to convert it in code.
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.
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’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.
How are things going for you tho? Got a job?
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.
There’s a wealth of advice here. Thank you Conner.
Glad you liked it!
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! 👊
The problem with this approach (at least as implied by the circles and arrows graphic) is that it's linear - you learn thing 1, and then you can move on to thing 2, etc. Instead, learning is more like a spiral where you learn a little bit about HTML and CSS, then you learn a little bit about web frameworks, then you learn how to commit your code to GitHub, then you write a small back end server to handle requests, then you go back and beef up the client-side scripts with DOM manipulation, then you learn how to make git branches, then you learn how to store some data to a noSQL database, then you go back and play with the CSS to make your site pretty, then you add some features that need some more back-end stuff, then you realize you have to move to a SQL database... All the while you might be using libraries, and then you might move to more comprehensive framework...
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...
That will be. So be ready
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!
To be honest, to learn web dev today requires a very high bar, not just this. Things have changed quite so much.
What is required more ???
The video is just one year old 😂😂
Thank you for this. I think I just found my problem. As a front end developer of almost 3 years I still struggle to understand some of the syntax. I know JavaScript (beginner - intermediate level) then I just jumped into react with not enough experience in JavaScript. Thank you for this video it gives me what I’m missing. Cheers!!
Indefinitely one of the best roadmaps on youtube
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.
😮😮
After 7 years writing code, I’ve actually learned everything on this list
bro can you give me an idea about how much time it will take to learn the basics of html css and js to build a proper functional website ? around how much time ? and which portion of learning will take much time ?
@@reaperv minimum 3-4 months
@@reaperv1 month html and css, then 2-3 months of javacript including asynchronous programming. Take note that this is achievable if you code for 8-12 hours a day / 6 days a week, consistently.
But you can stop on DOM manipulation in javascript then practice on basics until it will be like second nature to you.
@@reaperv I think the JS will take the most
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!
i did, html, css, php, developper tools, vc code terminal, now going into js
will come back after doing a project. Just finished basics of HTML and CSS
Short, Precise, and understandable. Subscribed.
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 😊
I started coding 5 years ago like this
Html -> css -> JavaScript (not finished fully) -> bootstrarp.
Then huge 2 years break then i came cross java and become interested in back-end 😊
Java se (completed) -> java ee (current) -> spring (next thing to learn).
Whatever u choose front or back end one thing is important that u dont have to give up, just give yourself a little break if u stuck and come back again.
Java rules. Proper typing for the win.
how is java going my friend?
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?
I wish I saw this when I began newly. Now, I am fixed at a confused state. Thank you for this video
I know a decent amount of HTML & CSS and a tiny bit of vanilla JS/DOM stuff, but my university is having us jump straight to Angular and it's pretty confusing. This info helps a lot, I think I need to do things in vanilla JS for a while first. I'm definitely someone who tries to drill down through abstraction to understand things (my path was basically batch scripts -> Python -> C++ -> C), so the web world has been very disorienting for me.
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!
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! 😂
Encryption vs Hashing of passwords.
Awesome video for me learning the full stack of website building on my own time while studying and applying cybersecurity, I will just make a note that passwords are best not encrypted but hashed and even better with a salted hash
1st I am seeing your video and you gave the best road map on RUclips. You earn my subscribe.
Thanks! Glad you enjoyed it 😀
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 👌
I started my web development journey thanks for this roadmap
Love that, good luck 🙌
Quality video mate. Concise and perfect path to learn front end dev!
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.
The buffering really got me haha, thanks Conner a great, organized video!
Gottem 😂
And thanks! Glad you liked the video!
So far so good,i have learnt html ,css ,js and now learning node.js then go to react
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.
I was confused which roadmap should i select among many,and I think this one makes sense to me,because you are experienced developer❤️
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.
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 👍👍👍
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 👍
You simply overwhelmed me with a millions things you just listed.
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.
I just subscribed to your channel. It's an honor brother. Cheers
learning programming is absolutely not hard. you just need patiance and read a lot. and by a lot i mean a lot. i have read over 5 books with 1000 pages each and now im a professional.
Nicely explained in layman language.
Thanks ,Conner !!
Im in sales but im finding a big disconnect between what i do and what is done on the backend by our devs. Wanting to study this for my own interests but also to better understand the work our devs do so i can properly set expectations for our customers and quickly shut down things that are just outright impossible and more importantly filter the requests that get sent to the devs as well. This roadmap is helpful but are there courses or programs you’d recommend as well? There are so many out there and i dont have enough knowledge to know whats good or whats bad
*scratch that. Found your other vids. Here we go!
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?
Starting from today. Will daily update on how I am accomplishing these.
Bruh? Where's the update
If there is a specific answer to this question, how much time should I spend at each step? Would someone be able to learn it all in one month? If not, how much time would you esteem? Then there's a question for Conner: are there videos on your channel on these topics?
Of course there isn't a specific answer to that question, you should spend as much time as it takes you to learn it. That entirely depends on you and your study habits. Likewise, the timeline will vary wildly from person to person, but no there is 0 chance you could learn all of this in a month. There's a reason computer science degrees take 4 years and even coding bootcamps take 6+ months of full-time work.
As for videos on the topics, I don't do a lot of tutorial content on this channel, but check the pinned comment for a ton of resources 👍
Yes! I'm pretty proficient in everything back-end (C, C++, C#, Java, Python, JS, TS, the works).
But as far as actual front end goes, I'm @#$& out of luck. I tried jumping head first into Angular and I was sorry to do so. I am now learning HTML and CSS and God will help me actually do something
This path reminds me of learning these coding languages - start with the basics, C, because the rest aren't much more than abstractions that themselves rely on C. Just as all these frameworks are nothing more than a fancy wrapper to HTML, CSS and JS.
This is actually easy to understand. Other videos on this topic intimidated me a bit :p
Time to start coding,wish me luck
What is the roadmap for someone interested in learning frontend development instead of pursuing full-stack development, considering its difficulty for many?
Wao! Amazing! Finally a good video about this topic! thank you!
Thank you so much for making this! I'm seem to be starting in the right order! I'm not crazy!
Just gone through this video and it was amazing to me. Wow.
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
Same here, but learnt a bit of js, would you like to partner up and do this together?
Just start small, maybe your bigger project is too big for now
@@mryup6100 yes I think you are right but as I go and learn I can just keep adding on, and I will start a web development course at the start of next year which should help, and until then I’ll just keep self learning, thanks for the advice
@@jensensphotography4570 No problem, sounds like you got a good plan
How and where did you learn bro? Please help me... I can't do paid courses😭🙏🏻 I would be really grateful if you could provide info on free sources
This guy reminded me of my whole CS engineering life
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 one of the best roadmap videos for web development I've ever seen.
Amazing, made me understand a lot better then I was bed watching this video.
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 😅
learning how to code found this at exact right time thanks yt algorithm and thanks to you
This is so helpful on so many levels. Thank you
Thanks. Make another detailed tutorial on web development
thank you for sharing. How long will it take to learn these things? seems like an eternity
Nice video currently learning javascript and data structure and algorithms
It's wonderful video.the way of explaining is awasome.easy to understand with effective examples
Great content, just subscribed. I would like to learn.
Do you run any Tutorial class for newbies??
loved the video conner as someone whos aspiring to be developer. I was wondering to learn all of this properly how long would it take?
Full detailed course would be great on this topic
HTML, css (grid), vanilla JavaScript plus fetch,PHP,MySQL,cron jobs json python
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?
Only saw this video now, but I have a question, that i think its quite important, how much time should I spend in this "journey" or in each step? A few months? A year perhaps? I think the answer to this question might help me know how much time I should spend in each step helping me progress better.
oky this is the best explained video lve come across in this platform thank you!!!
Great effort with great explanation, Thank you!
Actually i feel this is a practical one in the 1st 3 min itself!
Thanks a lot
Great video Conner. im about learn programming and web development, how long would it take for me to grasp a reasonable level these things you listed? Thanks
You are super underrated!!!
This channel deserve more subs
Thanks! 🚀
Nice roadmap. I am gonna start the journey soon 😊
Nice one! Thanks for sharing!
thanks Conner this is so helpful
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.
Truly amazing and easy to understand, thank you
Thank you you explained everything, I enjoyed watching this video
You just summarize 4 years of college degree in 10 mins
Idk man. College teaches other back end technologies like Java (Spring Boot), Python (Django) and C# (.NET) which are used by most companies and enterprises. Node js ain’t that popular in the work environment. Maybe for personal projects, a startup and of course RUclips. But not if your planning on working for a big company.
Nah lol this isn't a college degree pipeline 😂
This edit is on fire!! thanks for the content
Would never spend a second on it knowing what I know now.
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.
Awesome video! Super insightful and helpful.
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 ?
Excellent roadmap