How I'd Learn Full-Stack Web Development (If I Could Start Over)
Вставка
- Опубліковано 26 гру 2024
- AWS Startups GenAI Day - Build Generative AI on AWS - One Day Virtual Event - Thursday September 14th @ 9:00AM PST - Register Now rmbrnd.com/Gen... 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.frontendex...
🎬 TikTok: / connerardman
💼 LinkedIn: / connerardman
💻 Video/Coding Gear: www.amazon.com...
📅 Book A 1-on-1 With Me: 1-on-1.com/con...
Business/brands 👉 youtube@connerardman.com
![The Complete Web Development Roadmap [2024]](http://i.ytimg.com/vi/GxmfcnU3feo/mqdefault.jpg)
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):
ua-cam.com/video/K74l26pE4YA/v-deo.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):
ua-cam.com/video/uuOXPWCh-6o/v-deo.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):
ua-cam.com/video/jS4aFq5-91M/v-deo.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):
ua-cam.com/video/8JJ101D3knE/v-deo.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):
ua-cam.com/video/Gjnup-PuquQ/v-deo.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
you can be in intern. And then go up from there.@@CAPS_AMERICA
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!
YOU PERFECTLY EXPLAINED FRAMEWORKS AND LIBRARIES IN 30 SECONDS! omg thank you.
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.
The best roadmap for full-stack development on UA-cam.
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.
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!
There’s a wealth of advice here. Thank you Conner.
Glad you liked it!
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?
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 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.
😮😮
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.
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!
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...
That will be. So be ready
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...
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!!
The buffering really got me haha, thanks Conner a great, organized video!
Gottem 😂
And thanks! Glad you liked the video!
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!
Short, Precise, and understandable. Subscribed.
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!
Indefinitely one of the best roadmaps on youtube
i did, html, css, php, developper tools, vc code terminal, now going into js
1st I am seeing your video and you gave the best road map on UA-cam. You earn my subscribe.
Thanks! Glad you enjoyed it 😀
will come back after doing a project. Just finished basics of HTML and CSS
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 🙌
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
I wish I saw this when I began newly. Now, I am fixed at a confused state. Thank you for this video
Quality video mate. Concise and perfect path to learn front end dev!
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?
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?
So far so good,i have learnt html ,css ,js and now learning node.js then go to react
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
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.
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.
You simply overwhelmed me with a millions things you just listed.
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 👍
Nicely explained in layman language.
Thanks ,Conner !!
Just gone through this video and it was amazing to me. Wow.
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.
Wao! Amazing! Finally a good video about this topic! thank you!
I just subscribed to your channel. It's an honor brother. Cheers
Starting from today. Will daily update on how I am accomplishing these.
Bruh? Where's the update
I was confused which roadmap should i select among many,and I think this one makes sense to me,because you are experienced developer❤️
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 👍👍👍
This is so helpful on so many levels. Thank you
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.
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 are super underrated!!!
This channel deserve more subs
Thanks! 🚀
thanks Conner this is so helpful
Great effort with great explanation, Thank you!
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.
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
Thank you so much for making this! I'm seem to be starting in the right order! I'm not crazy!
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! 😂
This is actually easy to understand. Other videos on this topic intimidated me a bit :p
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 😂😂
Truly amazing and easy to understand, thank you
HTML, css (grid), vanilla JavaScript plus fetch,PHP,MySQL,cron jobs json python
This edit is on fire!! thanks for the content
It's wonderful video.the way of explaining is awasome.easy to understand with effective examples
learning how to code found this at exact right time thanks yt algorithm and thanks to you
Thank you you explained everything, I enjoyed watching this video
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!!!
Very clear, thank you
This is one of the best roadmap videos for web development I've ever seen.
Nice one! Thanks for sharing!
Actually i feel this is a practical one in the 1st 3 min itself!
Thanks a lot
Amazing, made me understand a lot better then I was bed watching this video.
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.
Awesome video! Super insightful and helpful.
What is the roadmap for someone interested in learning frontend development instead of pursuing full-stack development, considering its difficulty for many?
This video is golden
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
Clear and concise video, thanks 👍
Thanks buddy, Your video is very good. I really appreciate it.
Thanks. Make another detailed tutorial on web development
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
The pictures used in this video conveys a lot. thank you conner
Nice roadmap. I am gonna start the journey soon 😊
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.
Excellent Roadmap❤
Excellent roadmap
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.
What's the timing for each subject?
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.
This is perfect thanks
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 😅
Hey Conner I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.
What free application do you recommend to practice coding languages?
Full detailed course would be great on this topic
Which was your wrong way? Tell me to avoid.
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 😃