100+ Web Development Things you Should Know

WebDev 101 is a complete introduction into the world of web development. Learn the basic concepts and skills required to build fullstack web apps with HTML, CSS, and JavaScript.

#webdevelopment #learntocode #programming
🔗 Resources

📚 Chapters

🔥 Get More Content - Upgrade to PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Web Development roa
- HTML and CSS Tutorial
- How to get started in web development?
- Web development roadmap for 2022
- Intro to web development for beginners

[pazzoeo]

"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

[mateja]

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

[select_from_users]

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

[gabrielrodriguez]

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

[elierh]

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!

[OnionKnight]

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!

[RealKered]

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

[pokharkarpankaj]

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 😍

[sehrishzarin]

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

[alexwolfeboy]

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.

[troyharris]

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.

[connoremerick]

“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. :)

[ramonmaximiliano]

Dude's summed up an entire college degree

[AkshatRamanathan]

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

[Jb]

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

[NickInRealLife]

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!

[ericsigne]

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🔥🔥

[wolfdude]

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

[a_ghoul]

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

[BWSSoldya]

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 YouTube, 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