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):
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
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 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.
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.
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 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 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 😃
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.
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.
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 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!
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.
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.
Clear and concise video, thanks 👍
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 😊
This edit is on fire!! thanks for the content
This is so helpful on so many levels. Thank you
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 👍
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...
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 😅
You simply overwhelmed me with a millions things you just listed.
The buffering really got me haha, thanks Conner a great, organized video!
Gottem 😂
And thanks! Glad you liked the video!
Nicely explained in layman language.
Thanks ,Conner !!
Great effort with great explanation, Thank you!
Actually i feel this is a practical one in the 1st 3 min itself!
Thanks a lot
Just gone through this video and it was amazing to me. Wow.
Truly amazing and easy to understand, thank you
will come back after doing a project. Just finished basics of HTML and CSS
I just subscribed to your channel. It's an honor brother. Cheers
Nice video currently learning javascript and data structure and algorithms
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! 👊
Very clear, thank you
i did, html, css, php, developper tools, vc code terminal, now going into js
Wao! Amazing! Finally a good video about this topic! thank you!
Thank you so much❤
Nice one! Thanks for sharing!
This is actually easy to understand. Other videos on this topic intimidated me a bit :p
Awesome video! Super insightful and helpful.
Thanks Bro👍great stuff
very helpful, thanks
This is one of the best roadmap videos for web development I've ever seen.
It's wonderful video.the way of explaining is awasome.easy to understand with effective examples
This video is golden
Nice roadmap. I am gonna start the journey soon 😊
Amazing, made me understand a lot better then I was bed watching this video.
This guy reminded me of my whole CS engineering life
oky this is the best explained video lve come across in this platform thank you!!!
Best explanation i love it
Thanks buddy, Your video is very good. I really appreciate it.
learning how to code found this at exact right time thanks yt algorithm and thanks to you
Full detailed course would be great on this topic
Thank you 🙌
Im on it!!!❤
Thanks. Make another detailed tutorial on web development
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?
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
Thank you bro
Excellent roadmap
Excellent Roadmap❤
I started my web development journey thanks for this roadmap
Love that, good luck 🙌
Almost what i have done except that l learnt Tailwind lately. All in all I agree with this roadmap.
Great content 👍
You are super underrated!!!
This channel deserve more subs
Thanks! 🚀
Really good video for biggeners 🎉, really impressive sir
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
thank you sir ! this is exactly what i needed !
Now that regenerative AI is becoming the norm as the personal tutor and automated reference manual of programmers, would you still recommend the same?
The pictures used in this video conveys a lot. thank you conner
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
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
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
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 😀
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.
Great content, just subscribed. I would like to learn.
Do you run any Tutorial class for newbies??
Spot on.
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 ?
Nice video, I'm learning about databases. Its lots of fun :D
Thanks! And that’s awesome to hear you’re enjoying it! 🙌
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 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
HTML, css (grid), vanilla JavaScript plus fetch,PHP,MySQL,cron jobs json python
thank you for sharing. How long will it take to learn these things? seems like an eternity
This video is super legit, great job!
Thanks!
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 👌
subscribed => very helpful and informative
This is a great map
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 😃
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! 😂
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
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.
What a great video Conner, new sub here!!!
Thanks! Glad you enjoyed it 😃
Hello i am doing a project for school.
I need to create a website for web and android. I need to use Database for my data.(SQL? MAYBE)
Wich program do you suggest that i use to build the website.
I need to have a admin system, where he changes data and a client system.
Thank you!
I love flexbox
What about UI and UX to design the website?