"almost nobody knows what the hell they're doing and we all just use google to figure things out on the fly" these words calm my anxiety better than therapy would

Have been doing web development for the past 5 years, but still found the video engaging enough to watch until the end.

Funny thing, I got promoted to a Full stack dev and my imposter syndrome kicked in 100000%. This video has helped me ground myself to reality. Thank you!

1. Internet 0:30 2. Internet Protocol (IP) Suite 0:46 3. IP Address 0:55 4. Transmission Control Protocol (TCP) 1:00 5. Packets and Data Link (Open Systems Interconnection(OSI) Model) 1:03 6. World Wide Web (WWW) 1:15 7. Hypertext Transfer Protocol (HTTP) 1:22 8. Uniform Resource Locator (URL) 1:26 9. Browser 1:31 10. Client 1:36 11. Server 1:41 12. HTTP Request 1:43 13. HTTP Response 1:45 14. HTTP Messages 1:48 15. Domain Name 1:52 16. Registrar 1:59 17. Internet Corporation for Assigned Names and Numbers (ICANN) 2:01 18. Domain Name System (DNS) 2:08 19. HyperText Markup Language (HTML) 2:18 20. Dev Tools 2:21 21. Code Editor 2:26 22. HTML Elements 2:30 23. HTML Forms 2:41 24. HTML Attributes 2:44 25. Anchor tag 2:56 26. Document Object Model (DOM) 3:05 27. Head 3:10 28. Body 2:14 29. Accessibility and Semantics 3:21 30. Div tag 3:38 31. Cascading Style Sheets (CSS) 3:51 32. Inline Style 4:01 33. CSS properties 4:04 34. Cascade 4:14 35. Style Tag 4:23 36. Selector 4:26 37. Class 4:35 38. CSS Specificity 4:45 39. External Stylesheet 4:56 40. Box Model 5:04 41. Block 5:12 42. Inline 5:20 43. Relative positioning 5:29 44. Absolute positioning 5:34 45. Fixed positioning 5:40 46. Responsive Layout 5:49 47. Media Query 6:00 48. Flexbox 6:10 49. Grid Layout 6:19 50. calc() function 6:28 51. Custom Properties 6:32 52. Syntactically Awesome Stylesheets (SASS) 6:39 53. JavaScript 6:47 54. Script Tag 6:56 55. Defer attribute 7:13 56. ECMAScript 7:19 57. Let keyword 7:25 58. Const keyword 7:28 59. Dynamically Typed 7:30 60. TypeScript 7:35 61. Events 7:43 62. Browser API 7:53 63. Event Listener 8:03 64. Functions and Data Structures 8:10 65. Array 8:13 66. Object 8:19 67. Primitive types 8:22 68. Prototypal Inheritance 8:29 69. Classes 8:38 70. Frontend Framework 8:53 71. Components 9:00 72. Declarative Code 9:11 73. Imperative Code 9:16 74. NodeJS 9:24 75. V8 Engine 9:35 76. Event Loop 9:39 77. Node Package Manager (NPM) 9:48 78. Module 9:50 79. Export statement 9:55 80. Import statement 9:57 81. Server-Side Rendering (SSR) 10:06 82 HTTP Methods 10:11 83. Status Code 10:28 84. 404 Not Found 10:36 85. Single-page application (SPA) 10:45 86. JavaScript Object Notation (JSON) 11:08 87. Static-Site Generation (SSG) 11:21 88. Hydration 11:32 89. First Contentful Paint (FCP) & Time to Interactive (TTI) 11:42 90. Fullstack Framework 11:48 91. Module Bundlers 11:57 92. Linter 12:05 93. Database 12:12 94. User Authentication 12:22 95. Web Server 12:27 96. Localhost 12:33 97. Cloud 12:39 98. Containers 12:41 99. Infrastructure as a service (IAAS) / Platform-as-a-Service (PAAS) / Backend-as-a-Service (BAAS) / Software as a service (SAAS) 12:49 100. World Wide Web-based on blockchain technology (Web3) 12:57 101. Google it! 13:07

A year ago I wouldn't have any idea of half of the things you mentioned. All of those 100 seconds videos helped a lot!

Bro this is so awesome. This is the sort of thing that has taken me years to learn. I was so confused by the internet as a system. And I've been trying to put it all together. And seeing this, it's telling me that my hard work has paid off, because I understood most of the video haha. But you do it in such a nice way. So clear, so purposeful. Man, I was like, "Ahh I want to send a tip to this guy!" and then found the button on top haha. Cheers!

You just took me through the last 3 years of my life in 13 minutes and 18 seconds

Being a front end developer for 5 years, now I understood what it takes to be a full stack developer. Trust me, even Google could not simplify in this way. Thanks 😍

I don't think I'm ever going to unsave this video from my list. This has already helped me so much in understanding the world of web development, and gets me excited to continue learning.

I think it's funny when people say real programmers need to know everything. I can't say I've met a single developer who doesn't have StackOverflow permanently opened on their screen while they're coding. Programming is both an art and a science. It isn't always about exactly what you know, but how you can apply the knowledge that you do have.

Started web dev 6 months back. If someone showed me this then. I would have saved 4 months. Especially on the SSR SPA and SSG part. Sometimes knowing something as a high level context helps in boosting confidence and learning more about it in depth and not be overwhelmed by it

“Everyone just uses google” is super true but ALSO keep in mind That’s not an excuse to be lazy and not bother learning, but it is great to know there’s a huge support system for when things slip your mind because let’s be honest. Web devs, software devs, ALL the devs are looking stuff up daily because there’s just so much out there to know. :)

I love seeing my months and years of hard work and understanding summarized into 13 minutes.

These videos are so incredibly valuable for us programmers that know the gist of these concepts, but maybe not the specific implementations or definitions of them. Keep up the good work!

4:45 that was really good

The first few minutes is one of the best explanations of the internet

Css contains a bunch of specificity rules that determines which style is relevant to an element in a way that is evident and elegant like a benevolent elephant. Best part of the video🔥🔥

I've been a web developer for years but still found this incredibly interesting! Something about the simplicity of it all :)

One of the best videos you've made, keep it up Jeff❤️

My god man!! this vid is awesome!! I was asking myself the whole time, "how much time this would take to put together". It's so well organized and explained!! so impressive and informative. I love it!!

Im slowly finishing my bachelors degree and its crazy to see how ive basically hit every point in this video in some way or the other. Definitely proud of myself:)

Is anyone else still watching this video knowing almost everything but still watching incase if they are left behind in anything?

Love it, bravo. I'm an experienced dev, and I literally always have at least a couple of google searches open and a couple of stackoverflow pages open. This job just wouldn't be possible without those two sites

This video made node modules so clear to me in like 20 seconds where hours upon hours of research has failed to do so. Thankyou so much

Great bottom-up overview! Love how you mention not only the basics, but also more advanced yet fundamental topics

Been doing this professionally for 4 years now after college and I finally understand all of this. Been laxer focused for 4 years. It takes a lot to learn all of this.

Wow. Expert level exposition in 13 minutes. Amazing. It's literally impossible to explain web development faster this, and you've made it fun. 100% complete with zero errors (except IPV6 which no one cares about ;) ) Awesome.

Just wanted to mention that I totally get the focus on the JS and Node based stack, but I would like to mention that Node based full stacks are relatively new and de-coupling your front-end and back-end using API's is what I personally would consider "new tech". By no means would I consider my self an old school dev, only been doing this professionally for 10 years, but fact is that most of the internet doesn't actually run on node based backends. PHP is by far the biggest and platforms like UKposts, Facebook, etc all use weird ass (as a php dev :')) other languages and stacks for their backends. So for the people that are watching this video and going "this is very helpful", please do keep in mind that in the actual industry there is a high likelyhood you'll run into monolithic applications (frontend and backend intertwined) and other stacks that some consider "legacy" these days. I get that it's a 101 course, so it's an introduction and you can't cover everything, but I do feel like this video doesn't entirely do justice to what it's out there in the field. Also I want to add that there's a big imbalance between the 4 pillars of full-stack in this video: Frontend, backend, server and database. I get it, this channel is based around JS and doing a lot of front-end or API work, so I don't blame Jeff here, but for the people watching this: Up to around the 10 minute mark is (roughly) front-end work. After that is a mix of predominantly server work (inc. API's and Networking), backend, some more frontend and a quick mention of the database pillar. Each of these pillars in and of their own are rich topics to explore with gigantic fields of research behind them that Jeff would never be able to cover here. But just know that each of these pillars, individually, is probably bigger than the entirety of frontend if you really want to dive deep. And I do understand what you tried to do here Jeff and I applaud you for trying, but I do think you could've done with less HTML, CSS and JS 101 and more time on the other pillars of Full Stack if you wanted to do a proper FullStack 101

Really appreciate this video as a beginner learning how to code 💯

The single best organized and comprehensive explanation you'll find anywhere!

Must watch for whom works in web.Precious content..Thanks Fireship for all put all togehter in just 10min.

Thanks I really enjoy your work!

Thank you! Now everything became clear-ish

Thank you for making this and listing all these into easy concept forms. It makes my learning dev. learning much easier! Cheers mate

This is so helpful on so many levels. Feels like I’ve just finished a course, I wish you did something like this but in more detail and with more concepts or diving a bit deeper in each area, so as to cover full stack development, touching basically all the concepts briefly. Would be very very cool. This is the first video I’ve seen that’s organized so well and concisely to give all the info in the most authentic and effective way possible. Thank you.

This is PACKED with great info

One of the biggest challenges web-developers face is CENTERING A DUCKING DIV. And then we can talk about the responsive layout. *pre-flex

Been binging this channel doing my first real client project and starting to hear your voice in my head randomly. Not mad about it.

I just love this channel, I almost completely stopped using UKposts for a while but this channel just got me back

Great video. I'd be super interested if you went into the networking side of this (basically the first 20 points) in depth in another video like this. I'd find that insanely helpful as every time I navigate networking issues I get confused :)

Man your Videos are so f*cking awesome :) I've never watched another Developer UKpostsr who commits so much information/knowledge in such an easy unterstandble way and short amount of time!!! Thank you!!

Thank you for the video! It's really satisfying to see that my 3 years of vocational edjucation combined with working in a dev department during my apprenticeship have given me a good start as a software developer. ^^

what a refresher 😄😄. Nice man keep going on...

No one’s gonna mention that clean rap?

It's videos like this that I wish I had when I was a beginner. Because of the wealth of information out there for each and every individual part mentioned in this vid, it's really hard to see the full picture at first. I'm definitely sharing this video with my younger CS friends!

Thank you so much, Jeff. I still need to learn more about these.

I was looking for a brief (but concise) overview or web dev and Holy shit...is it daunting in the beginning stages. I'll probably have to re-watch this video several times throughout my learning process just to keep a good bird's eye view of how all this ties together. Atm I often forget what all these programs are. what exactly they do, and why. That's the difficult part for me now, is having something like a road map to understand what options are available, what the best one may be, and why it's significant to me. Thank you so much for taking the time to make this video. Helps a lot.

Dude's summed up an entire college degree

just finished CS at uni and prefered field is web dev technologies and I almost was familiar with this all until point 98-100 lol

really really helpful to get a good foundation on WT... is happening. thank you man, I am really happy that I clicked on this video. and I should mentioned that you nailed your style with using GIFs memes and fast pace edit.

That was an excellent sum-up video, thanks sir !

honestly after realizing i have experience in 98/100 of these things i think im gonna get back to making that portfolio project

I've never done web dev excluding using the html5 canvas and javascript to make silly 2d video games but I still feel like I've understood everything in this video (mostly due to all your 100 seconds videos)! Also writing c++ 8 hours a day probably helps with my understanding xD In other words, when's the server-side Rust tutorial being uploaded!?

I like this very much, since it shows you a bird's eye view of the development process. I like that it is clearly explain what many of the popular frameworks actually do and what work they save us. I would like to see more videos like this for more specific topics.

Amazing video!!! What a way to summarise 100+ concepts in 13min... Jeff never disappoints 🙌🏼 (Btw, I would love to see a video of yours rapping about any content you feel like)

idk if anyone noticed, 2:12 - it's a polish phone book, with real street names and some working phone numbers

This was great. I used to be a C application programmer, and I always found it overwhelming the number of technologies that a web dev needs to know. I only knew C++. Its way easier to know just one language (and the pay, at least back then, was better). Thanks for creating such a nice run through of tools.

Legendary content, Jeff you deserve more followers

Wow, thank you for your time and effort good sir!

Jeff seems like an AI robot to speak in this video. Mind blowing. A million dollars content ❤️

Honestly while I'm still learning vanilla JS i feel like learning to Google is 90% of work, aside from few things that will repeat themselves in every project there is just too many little things to remember to the point it's more efficient to simply know where to look and what is possible then to write anything out of the memory, moment i stoped trying to learn everything and remember it all and instead just tried to grasp concept behind what is needed i noticed very quick improvement in my coding.

The only video I will point to someone when they're looking to learn about being a Fullstack Engineer. Great work Jeff! 🔥

Wow, that was fantastic. It filled in the blanks for me. Thank you for your hard work.

I learned more from this video than in the entirety of my network class.

Boomer: Dns, yes the phone book of the internet. Zoomer: what's a phone book?

Crazy video, so many brief content of so many huge topics. there is a lot to dive in ,thanks!

That's an insanely awesome, informative and useful summary of most tech used in JavaScript stack. Thank you!

2 years of webdev still learning

Damn I am so lucky to have this channel, I am about to start my WEBDEV journey and had many questions rolling on my brain , literally i was trying to learn from Very basics of HTML and this guy just taught me whole WEBDEV in 13 mins 👏🏼👏🏼👏🏼

I love your videos, so informative and engaging! Keep up the great work 🙏

Incredible video. This has to be one of the most helpful tech videos ever!

I love this series as I always have to learn things by putting them into perspective and associating them and this is extremely helpful

God damn bro you nailed it! I’m in business 7 years already, and have to say that I think I’m gonna suggest my company to use the video in our boot camps

Best Dev-Video (Web) on YT? WOW and Thanks ;)

Man your explanation and narration is fun to listen and watching your videos are fun to watch with all the edits and animations. Aside from all the jokes and fun, I even learn many new things from you with enjoyment. It has never been boring learning from your videos :) Keep It up and keep making such awesome content. GodSpeed!

Would love to see a video on the growing Rust ecosystem for Web Development. The potential performance improvements, a stronger compiler and new tools like Yew for the client and Actix-Web for servers have really peaked my interest as someone who has strictly used Typescript for a few years now. Love the content.

the css rap 👌

Bro you rock, every video is perfect!

Awesome overview - I also love your sense of humor :)

This is how Neo felt when learning Kung Fu

@4:45 Jeff be spittin’ bars🔥🔥

You just gained a subscriber brother That’s is a ton of information you’re giving in just one video 🔥

Thanks for sharing what else I need in order to be fullstack

About the statement, that Node is the most popular, as it relies on the same language as frontend - this is highly debatable. I'd argue, that depending on the place you are, it varies. Some companies will hire people with different skill sets for backend/frontend, which will lead to different stacks in both layers. Despite that, its really cool video! I liked how you laid down foundations with networking, html and moved into higher concepts.

Web development has changed so much compared to a few years ago. I remember in 2008-2010 when building a website all you need was to create a Css/JavaScript/images folder and a folder for any subpages. And upload it to the server with FTP.Now you need to create a whole project with 100+ folders and files, know at least 10+ frameworks and create your own routes in some cases

These long form videos are top notch. Keep it up

I wasn’t ready for them Barz bro. I rewind that shit like 5 times 😂 u got my sub fr

Said we passed web dev 101, but only taught 100 things. Still waiting for 1 that's left.

“… which styles are relevant to an element in a way that’s self-evident and elegant like a benevolent elephant.” I legit almost spit out my chick-fil-a from laughing when this dropped. 🤣

Jeff you are a madman genius, yet again!

Thank you so much bro... Appreciate this

What tool is used to display that graph for Vue at 12:15?

Your rap made me laugh our loud 🔥

best summary ever :) congrats!

Great video, man! You made them interesting even though I knew most of it if not all

4:46 - you are the king of web-dev-rap :-) .... genius!! thx for your work!

I wish I saw this video 10 years ago, so enlightening to get an overview of how it all fits together! Thank you for your awesome content Jeff 👊

Damn man, that's actually very engaging and interesting, the CSS rap part was funny as well.

Yup, this summarizes the basics you need to know to work as a fullstack web developer. I studied web development full time for five years and have worked as a full stack web dev for six years, and I’ve barely scratched the surface of the overwhelmingly amount of stuff you should know. Without stack overflow and the likes I don’t think I would’ve been able to work as a web dev.

For sure, I'm a Js - React developer and I love coding ❤ This is a guide for everyone