100+ Web Development Things you Should Know

1,439,575
0
2022-06-14に共有
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

Web Dev Basics developer.mozilla.org/en-US/docs/Learn
Fullstack tutorials fireship.io/lessons/
Computer Science 101    • 100+ Computer Science Concepts Explained  
10 Fullatack Web Apps    • I built 10 web apps... with 10 differ...  

📚 Chapters

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at fireship.io/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 begi

コメント (21)
  • @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
  • @mateja176
    Have been doing web development for the past 5 years, but still found the video engaging enough to watch until the end.
  • 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
  • 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!
  • 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!
  • @elierh442
    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!
  • @RealKered
    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 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 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.
  • Is anyone else still watching this video knowing almost everything but still watching incase if they are left behind in anything?
  • 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🔥🔥
  • @Jb67912
    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!
  • @a_ghoul
    The first few minutes is one of the best explanations of the internet
  • One of the best videos you've made, keep it up Jeff❤️