100+ Web Development Things you Should Know

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 มิ.ย. 2022
  • 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/d...
    Fullstack tutorials fireship.io/lessons/
    Computer Science 101 • 100+ Computer Science ...
    10 Fullatack Web Apps • I built 10 web apps......
    📚 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 beginners
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 1.6K

  • @pazzoeo
    @pazzoeo ปีที่แล้ว +6277

    "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

    • @okokok867
      @okokok867 ปีที่แล้ว +36

      @@peterebode true, but they will use Bing or any other search engine.

    • @parkerhemming9388
      @parkerhemming9388 ปีที่แล้ว +218

      @@okokok867 If an aspiring web developer uses bing, they may as well give up now

    • @ofskittlez
      @ofskittlez ปีที่แล้ว +20

      I'm one of the few people who DOES know what I'm doing*
      *kinda

    • @harveykyle3690
      @harveykyle3690 ปีที่แล้ว +4

      So true:)

    • @kwaminaessuahmensah8920
      @kwaminaessuahmensah8920 ปีที่แล้ว +5

      Lmaoo I just did that today at work!

  • @mateja176
    @mateja176 ปีที่แล้ว +2488

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

    • @sguptzz
      @sguptzz ปีที่แล้ว +18

      Jeff never disappoint us

    • @harveykyle3690
      @harveykyle3690 ปีที่แล้ว +7

      He always makes good vids that everyone can relate

    • @daleryanaldover6545
      @daleryanaldover6545 ปีที่แล้ว +8

      I can resonate with those words on a spiritual level.

    • @ManuelBasiri
      @ManuelBasiri ปีที่แล้ว +6

      Very interesting quote. I'm also doing web development for the past 5 years and have the same to say about this video! Wonder how many other 5 years old web developers are watching this.

    • @UFO_808
      @UFO_808 ปีที่แล้ว +1

      Front ili back? Firma ili freelancing?

  • @select_from_users5842
    @select_from_users5842 ปีที่แล้ว +1445

    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!

    • @turolretar
      @turolretar ปีที่แล้ว +37

      sus

    • @chamarawijepala2021
      @chamarawijepala2021 ปีที่แล้ว +11

      sus

    • @iankalaghe2302
      @iankalaghe2302 ปีที่แล้ว +5

      big oof

    • @Keithen
      @Keithen ปีที่แล้ว +98

      I joined my current company as an Assistant Web Developer, but was mainly going to be the UX and Brand Designer. Well, my first day at work my manager quit... so my boss made me the manager, IT guy, designer, and full stack dev... It's been 8 months and I cry every week lol. I'm so burnt out all the time.

    • @muatring
      @muatring ปีที่แล้ว +18

      @@Keithen Is the pay good at least?

  • @gabrielrodriguez3665
    @gabrielrodriguez3665 ปีที่แล้ว +588

    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

    • @renderedits1829
      @renderedits1829 ปีที่แล้ว +25

      pro touch some grass

    • @4uffin
      @4uffin ปีที่แล้ว +5

      props to you i guess for actually taking your time to make the timeline?

    • @z4pd00
      @z4pd00 ปีที่แล้ว +10

      That's dedication

    • @keshi5541
      @keshi5541 ปีที่แล้ว +9

      I'm thankful thanks for adding this. Ignore the haters.

    • @raselkarim2731
      @raselkarim2731 ปีที่แล้ว +7

      Bro, you deserve a love react. Love you.

  • @OnionKnight541
    @OnionKnight541 ปีที่แล้ว +747

    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
    @RealKered ปีที่แล้ว +534

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

    • @mazharansari7813
      @mazharansari7813 ปีที่แล้ว +1

      Hey brother if you're comfortable to share your salary as a web developer then tell me if not you can simply say no i won't mind 😃

    • @camiscooked
      @camiscooked ปีที่แล้ว +8

      @@mazharansari7813 50k a year. Not the best

    • @RealKered
      @RealKered ปีที่แล้ว +11

      @@mazharansari7813 I have 2 jobs and neither are related to computers 😂 Im 16 and web development is just a hobby until I am ready for a real job

    • @mazharansari7813
      @mazharansari7813 ปีที่แล้ว

      @@RealKered ohh okay 👍🏽

    • @mazharansari7813
      @mazharansari7813 ปีที่แล้ว

      @@camiscooked wow that's amazing thanks for sharing i highly appreciate it 🙏🏽🙏🏽

  • @elierh442
    @elierh442 ปีที่แล้ว +297

    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!

    • @pjos6406
      @pjos6406 ปีที่แล้ว +2

      Samesies, I'd be goosed without fireship

    • @webr
      @webr ปีที่แล้ว +2

      Same

  • @pokharkarpankaj
    @pokharkarpankaj ปีที่แล้ว +346

    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 😍

  • @alexwolfeboy
    @alexwolfeboy ปีที่แล้ว +207

    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.

    • @zergling2621
      @zergling2621 ปีที่แล้ว +8

      @David McGuigan call my mummy I need my mummy, help! Scooby do be do.

    • @Maniac-007
      @Maniac-007 ปีที่แล้ว +8

      You haven’t met me my child.
      I only open SO for specific issues. Most of the time I’ll be going through the official documentation of the technology that I use instead.

    • @edgarcc9350
      @edgarcc9350 ปีที่แล้ว +2

      @@Maniac-007 me too, i use StackOverflow only for specefic issues cause you use a lot of libraries and you cant remember how works each library through atualizations.

    • @uncletrashero
      @uncletrashero ปีที่แล้ว

      @David McGuigan i have like 230+ stack tabs open...

    • @uncletrashero
      @uncletrashero ปีที่แล้ว

      @David McGuigan i didnt say Chrome was running well :D

  • @connoremerick7405
    @connoremerick7405 ปีที่แล้ว +330

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

    • @ko-Daegu
      @ko-Daegu ปีที่แล้ว +14

      "That’s not an excuse to be lazy and not bother learning," explaining how without learning you will be able to google even the right thing
      what he said is a jk not to be taken that seriously

    • @BiscuitZombies
      @BiscuitZombies ปีที่แล้ว +10

      @@ko-Daegu honestly this. So much this

    • @jijinxx
      @jijinxx ปีที่แล้ว +4

      I think what's more better in my opinion is, to have a pattern for everything or understand it, for example like a framework that connects one to another then have it named in a group or something. Then if you ever forget some terms you could always just Google it at least you understand it though. There's really no point memorizing something you can just look up and not that necessary, unless you're a surgeon or whatever.

    • @JoNarDLoLz
      @JoNarDLoLz ปีที่แล้ว +10

      @@jijinxx Atleast a surgeon does not have to deal with different anatomies, as everyone has more or less the same anatomy.
      Developers have to deal with multiple languages, frameworks, and ever-evolving technologies so Googling is more of a norm

    • @nicreven
      @nicreven ปีที่แล้ว +2

      @@JoNarDLoLz At the end of the day, as said by some dude whose name I unfortunately can't remember
      A good programmer doesn't know "all the magic words" ; A good programmer knows where to find them.

  • @AkshatRamanathan
    @AkshatRamanathan ปีที่แล้ว +154

    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

    • @carbon.neutral8716
      @carbon.neutral8716 ปีที่แล้ว +13

      it's crazy iv noticed the same, while being knee deep in u feel desperate, but after coming back after say 3 days its like u get it much faster

    • @dzshop4788
      @dzshop4788 ปีที่แล้ว +1

      Can u give resourses to learn dev.

    • @VivekPayasi
      @VivekPayasi ปีที่แล้ว

      @@dzshop4788 The Odin Project is hands down the best resource. Just put your head down and go through the courses, read all the material, do all the exercises and you will learn sooo much!

    • @ggff2269
      @ggff2269 ปีที่แล้ว

      ​@@dzshop4788 what dev?

    • @dzshop4788
      @dzshop4788 ปีที่แล้ว

      @@ggff2269 web dev

  • @troyharris279
    @troyharris279 ปีที่แล้ว +140

    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.

  • @Jb67912
    @Jb67912 ปีที่แล้ว +63

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

  • @ericsigne6575
    @ericsigne6575 ปีที่แล้ว +19

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

  • @NickInRealLife
    @NickInRealLife ปีที่แล้ว +39

    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!

  • @sehrishzarin2431
    @sehrishzarin2431 ปีที่แล้ว +12

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

    • @vodd123
      @vodd123 10 วันที่ผ่านมา +1

      I don't know a thing to begin with

  • @wolfdude511
    @wolfdude511 ปีที่แล้ว +69

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

    • @phpacos12
      @phpacos12 ปีที่แล้ว +1

      Yep, it is a masterpiece. Lots of information condensed in less than 15 minutes in a comprehensible and humored way.

  • @johanlindberg6216
    @johanlindberg6216 ปีที่แล้ว +12

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

  • @a_ghoul
    @a_ghoul ปีที่แล้ว +17

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

    • @alwinter
      @alwinter ปีที่แล้ว

      Agreed. Then the internet really starts to appear over-engineered after approximately item 75.

  • @musicwithcode1322
    @musicwithcode1322 ปีที่แล้ว +14

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

  • @roid1510
    @roid1510 ปีที่แล้ว +6

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

  • @dakotapearl0
    @dakotapearl0 ปีที่แล้ว +8

    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

  • @BWSSoldya
    @BWSSoldya ปีที่แล้ว +59

    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 TH-cam, 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

    • @aleksanderdahle1038
      @aleksanderdahle1038 ปีที่แล้ว

      i agree with you 100%

    • @edprince
      @edprince ปีที่แล้ว +6

      I get where you're coming from, but I think the idea was to be more congruent with the weighting of general web dev job opportunities (as laid out in the exposition) - and whilst there are plenty of other stacks in production all over the internet, there's not (to my knowledge) a bigger focus within hiring than a JS-oriented skillset.

    • @BWSSoldya
      @BWSSoldya ปีที่แล้ว +6

      @@edprince of course this might differ depending on where you're at. In silicon Valley I can see that being true, but a quick sampling of open job opportunities here (Netherlands) full stack tends to describe html, css, Javascript AND PHP and MySQL. Where Javascript is more along the lines of "make this popup modal appear".
      I get what you mean, and I do agree that Jeff mightve been thinking along those lines, but it's just not representative of the state of the world wide web and the jobs to build it

    • @edprince
      @edprince ปีที่แล้ว

      @@BWSSoldya Ah interesting - JS has definitely moved on from that in UK jobs listings generally. I'm really not that familiar with the rest of Europe's hiring, so was mostly basing on US and UK (as they are the boards I tend to look at).
      I do think there's a bit of a disconnect between the current state of the world wide web and the skills for opportunities at the moment. A massive amount of the web is no longer actively worked on, and so technologies 'in use' now are not so much in use by active companies that are hiring. I think a better metric to look at is the SO survey on what devs are using. 68% of professional devs are using JS, vs 22.5% using PHP as of 2021. (Also, I'm a PHP dev - not someone just looking to crap on it. I think it's got its merits, but overall, I'd still 1000% urge people to be learning JS). It's easy to transition into PHP from JS. I think it's much harder making the transition from PHP to Node.

    • @nodidog
      @nodidog ปีที่แล้ว

      @@edprince agreed - it's all Node and React in the UK. PHP stack is useful if you want to freelance, as there are so many existing sites that people still want to work on, but it doesn't carry much weight in the jobs market here

  • @coltonwilliams1565
    @coltonwilliams1565 ปีที่แล้ว +1

    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.

  • @DrShmuck
    @DrShmuck ปีที่แล้ว +8

    4:45 that was really good

  • @ezeeok
    @ezeeok ปีที่แล้ว +3

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

  • @ysammo214
    @ysammo214 ปีที่แล้ว

    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

  • @ianmacmoore-nk4vz
    @ianmacmoore-nk4vz 9 หลายเดือนก่อน

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

  • @tlalocman9260
    @tlalocman9260 ปีที่แล้ว +46

    Thanks I really enjoy your work!

    • @heheboi5473
      @heheboi5473 ปีที่แล้ว +6

      thanks for donating

  • @moses5407
    @moses5407 9 หลายเดือนก่อน

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

  • @kartikdesai3421
    @kartikdesai3421 ปีที่แล้ว +1

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

  • @anthonymcevans8191
    @anthonymcevans8191 ปีที่แล้ว +41

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

    • @akj3344
      @akj3344 ปีที่แล้ว +2

      margin: 50%

    • @anthonymcevans8191
      @anthonymcevans8191 ปีที่แล้ว +8

      @@akj3344 you wish.

    • @TheNewton
      @TheNewton ปีที่แล้ว

      Horizontally centering has multiple easily found and learned solutions. If it needs vertical & horizontal centering you might actually need to use either css-grid, CSS-flexbox, or display:table tricks.

    • @yes-vy6bn
      @yes-vy6bn ปีที่แล้ว

      margin: auto;

    • @daleryanaldover6545
      @daleryanaldover6545 ปีที่แล้ว +3

      @@yes-vy6bn *margin: 0 auto;
      0 for top and bottom then auto for left and right

  • @christianwhite6980
    @christianwhite6980 ปีที่แล้ว +4

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

  • @Tharushi_SM
    @Tharushi_SM 4 หลายเดือนก่อน +1

    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.

  • @Joserditosanto
    @Joserditosanto ปีที่แล้ว +1

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

  • @UselessDuckCompany
    @UselessDuckCompany ปีที่แล้ว +7

    This is PACKED with great info

  • @bogush31
    @bogush31 ปีที่แล้ว +3

    Thank you! Now everything became clear-ish

  • @johnohara4046
    @johnohara4046 3 หลายเดือนก่อน

    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.

  • @cosimocosner14
    @cosimocosner14 ปีที่แล้ว

    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. ^^

  • @joelleo5480
    @joelleo5480 ปีที่แล้ว +3

    Broooo, he’s a rapper, totally enjoyed this

  • @b_dawg_17
    @b_dawg_17 ปีที่แล้ว +3

    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!

    • @aleksanderdahle1038
      @aleksanderdahle1038 ปีที่แล้ว

      haha ill let you in on a secret! we are all still beginners hahaha xD dosent matter how long you have been developing for xD

    • @b_dawg_17
      @b_dawg_17 ปีที่แล้ว

      @@aleksanderdahle1038 lmao, true! 😝

  • @sircartier2260
    @sircartier2260 ปีที่แล้ว

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

  • @jamesfox8930
    @jamesfox8930 11 หลายเดือนก่อน

    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.

  • @arifulislam864
    @arifulislam864 ปีที่แล้ว +3

    2 years of webdev still learning

  • @ramonmaximiliano3557
    @ramonmaximiliano3557 5 หลายเดือนก่อน +4

    Dude's summed up an entire college degree

  • @GauravSingh-hh8bw
    @GauravSingh-hh8bw ปีที่แล้ว +2

    My first video on TH-cam that I've seen at 0.75x speed after he introduced Javascript. I'm new to the web dev world and hopefully one day I'll be able to know everything mentioned in this video and more.

  • @abhinav.sharma
    @abhinav.sharma ปีที่แล้ว

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

  • @mrmagic_man3027
    @mrmagic_man3027 ปีที่แล้ว +4

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

  • @sarimaleem460
    @sarimaleem460 ปีที่แล้ว +7

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

  • @stoyanmalinin8156
    @stoyanmalinin8156 6 หลายเดือนก่อน

    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.

  • @mikaelnilsson8041
    @mikaelnilsson8041 ปีที่แล้ว

    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.

  • @wykydytron
    @wykydytron ปีที่แล้ว +4

    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.

  • @thorsvenson3530
    @thorsvenson3530 ปีที่แล้ว +14

    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.

    • @2bitnerd
      @2bitnerd ปีที่แล้ว

      Oh, the webdev pay is so good these days.

    • @gamesboy123able
      @gamesboy123able ปีที่แล้ว +4

      @@2bitnerd but too much competition right?

    • @godnyx117
      @godnyx117 ปีที่แล้ว

      Yeah. The web is pretty much pure cancer and everyone only does it for the money. No other reason to give a fuck...

    • @leonardocastro742
      @leonardocastro742 ปีที่แล้ว +1

      Really, you see c++ development easier?

  • @khalidelgazzar
    @khalidelgazzar ปีที่แล้ว

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

  • @sajjadabouei6721
    @sajjadabouei6721 ปีที่แล้ว

    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.

  • @Big-Timbo
    @Big-Timbo ปีที่แล้ว +5

    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

  • @connor43057
    @connor43057 ปีที่แล้ว +14

    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!?

  • @achtube85
    @achtube85 ปีที่แล้ว

    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)

  • @reinhard_silaen
    @reinhard_silaen ปีที่แล้ว

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

  • @siruglymane8343
    @siruglymane8343 ปีที่แล้ว +4

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

  • @zhotpotrecipe
    @zhotpotrecipe ปีที่แล้ว +3

    Please add timestamps so I can refer it back easily

  • @hamzaa8571
    @hamzaa8571 11 หลายเดือนก่อน +1

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

  • @j-janz
    @j-janz 7 หลายเดือนก่อน

    I could relate to this video in 2 ways: 1) I'm a web development dinosaur, on it and up-to-date with it since 99 or 2000, so I've followed most of these come and go, along with studying basically all of these (or about them) through the years; and 2) I've had years, now far in the deep bottom of a burnout I'm long back from, where I'd possibily answer "what do you do for a living?" with a train of thought quite close to this video, back-to-back.

  • @risaverc1217
    @risaverc1217 ปีที่แล้ว +4

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

  • @siyabdev
    @siyabdev ปีที่แล้ว +3

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

  • @ultimateplayer9947
    @ultimateplayer9947 ปีที่แล้ว

    I could literally feel parts of my brain melting away listening to this, amazing explanation understood lot of stuff from it, keep up the gud work

  • @Trendykid
    @Trendykid 9 หลายเดือนก่อน

    You managed to clarify the concept of a pointer in just one sentence, which I couldn't grasp from a segment of the CS50 lecture explaining it.

  • @lubiezowie
    @lubiezowie ปีที่แล้ว +6

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

  • @ABHAY-hu9kw
    @ABHAY-hu9kw ปีที่แล้ว +3

    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 👏🏼👏🏼👏🏼

  • @evanwest4751
    @evanwest4751 ปีที่แล้ว

    I really appreciate how straight to the point and informative your videos are. It never feels like you're just padding out the video runtime to game the TH-cam algorithm, but just trying to make the most information-dense videos you can.

  • @Index6944
    @Index6944 ปีที่แล้ว

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

  • @noambergauz2806
    @noambergauz2806 ปีที่แล้ว +13

    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

  • @RomekRJM
    @RomekRJM ปีที่แล้ว +7

    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.

    • @andrewswan9103
      @andrewswan9103 ปีที่แล้ว +1

      Yep, like a language called Java, for example.

  • @0-Elias-0
    @0-Elias-0 4 หลายเดือนก่อน +1

    Props for this video; it's great, concise... ...and I can tell that you really put a lot of effort into producing it.
    Well, I'm amazed at the fact that:
    (a) I know 90% of this stuff; and
    (b) I didn't realize that I've been carrying around so much knowledge

  • @akashtripathi1729
    @akashtripathi1729 11 หลายเดือนก่อน +1

    4:47 - "which styles are relevant to an element in a way that's self-evident and elegant like a benevolent elephant .." man you got bars 🔥🔥

  • @Webdevelopmentya
    @Webdevelopmentya ปีที่แล้ว +4

    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

    • @rockoyhead
      @rockoyhead ปีที่แล้ว

      yep. but websites look great nowadays.

    • @BarisPalabiyik
      @BarisPalabiyik ปีที่แล้ว

      Yeah, that's why file based routing caught on, it just feels natural. Yes it changed, but when you get into it, you realize the benefits.

  • @GL1TCHEYB0Y5
    @GL1TCHEYB0Y5 ปีที่แล้ว +5

    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.

    • @alfredomenezes8814
      @alfredomenezes8814 ปีที่แล้ว +1

      Me too, I'm so interested in the Rust ecosystem, but there is fewer content and people to follow in the web to be aware of what's going on, different than other popular languages

  • @industrialvectors
    @industrialvectors ปีที่แล้ว

    During the 90s I borrowed a book on basic and wrote basic code but felt like a hacker.
    End of the 90s, I made actual web pages in HTML & css and got my mind blown by PHP.
    Early 00s javascript came into play it was dirty and obscure but it could do some super cool stuff!
    Mid 00s free hosting gained popularity, php & mysql was the hot stuff.
    All that was when I didn't even know IDE existed, basic text editors were the rage.
    Those bases took year to get in. I barely touched any code until 2016, coming back and hot with SQLservers.
    But then, all the rest just flew in naturally and rapidly.
    It's crazy how long it takes to get the hang of a new tool but then you can't really live without it, like an IDE, a properly tuned linter and automated tests.
    Now watching this video whose technologies I have all used at least once, trying to have a beginner's outlook, it sure looks daunting.
    But it really isn't, it just takes time to get the basics.
    Also mind blowing how most of the tech I use is less than 6 months old…

  • @kopilkaiser8991
    @kopilkaiser8991 3 หลายเดือนก่อน

    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!

  • @matthewabbott4683
    @matthewabbott4683 ปีที่แล้ว +12

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

  • @TheSammy2010
    @TheSammy2010 ปีที่แล้ว +8

    No one’s gonna mention that clean rap?

  • @morrisonak
    @morrisonak ปีที่แล้ว

    These long form videos are top notch. Keep it up

  • @deatho0ne587
    @deatho0ne587 ปีที่แล้ว

    Sort of wish
    was display: block;
    were display: inline; or display: flex/grid;
    And the fact that you had how to format at Date, recently had to take a package out that was breaking all builds it was intended for that exact thing. Please just use INTL

  • @maximumefficiency593
    @maximumefficiency593 ปีที่แล้ว +5

    This is how Neo felt when learning Kung Fu

  • @phonenaing1149
    @phonenaing1149 ปีที่แล้ว +66

    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 👊

    • @omri9325
      @omri9325 ปีที่แล้ว +7

      Before some major web frameworks existed

  • @MrBrian1876
    @MrBrian1876 หลายเดือนก่อน

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

  • @sa8452
    @sa8452 ปีที่แล้ว +1

    Jesus Christ - this is gold. I never share any yt videos with anyone, but just shared it with ~10 people! Also totally loved “this is only 0.01x of web development”, and “it’s okay to be overwhelmed cz we don’t know what the hell we’re doing anyway, and just Google crap” 😂😅

  • @Applepie931
    @Applepie931 ปีที่แล้ว +4

    @4:45 Jeff be spittin’ bars🔥🔥

  • @treysonsearle8441
    @treysonsearle8441 ปีที่แล้ว +6

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

  • @angrysnek4445
    @angrysnek4445 ปีที่แล้ว +1

    Legendary content, Jeff you deserve more followers

  • @vioen1676
    @vioen1676 ปีที่แล้ว

    The video I never knew I needed to see but wow, helped a lot. Just started learning Web Dev and this vid just gave me a general understanding of how everything works 🤣

  • @natedog1590
    @natedog1590 ปีที่แล้ว +12

    “… 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. 🤣

  • @piaere
    @piaere ปีที่แล้ว +3

    the css rap 👌

  • @mistah_mojo
    @mistah_mojo ปีที่แล้ว

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

  • @DavidRussellM
    @DavidRussellM ปีที่แล้ว +1

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

  • @universecode1101
    @universecode1101 ปีที่แล้ว +3

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

  • @randyyates8761
    @randyyates8761 ปีที่แล้ว +23

    It occurred to me around 7:20 that some people refer to a const as "a variable that can't be changed". You don't need to call it a variable because its value isn't "variable" so it can't change. It is simply a constant. It's a value that can't be changed whereas a variable declared with let or var is changeable, as the name implies. consts are not variables. They are constants. No hate. I just didn't know it was normal for people to call consts "variables". It's all over the internet. I've checked. So it's not just you.

    • @conrisc
      @conrisc ปีที่แล้ว +4

      and what's funny in case of js that a const can be modified in case of non-primitive values (arrays, objects), the only constant is the reference hold by the const

    • @Pepespizzeria1
      @Pepespizzeria1 ปีที่แล้ว +1

      I see what you're saying but are const variables?

    • @benjones6895
      @benjones6895 ปีที่แล้ว +1

      I think this depends on context... consts are still variable, just at a different time in the application e.g. they may change in the database but then they are fixed for that iteration. They are more variable than a string that is baked into the application

    • @wisdomelue
      @wisdomelue ปีที่แล้ว +1

      they are variables.

    • @mihai5085
      @mihai5085 ปีที่แล้ว

      🤓

  • @alexsorrells9603
    @alexsorrells9603 ปีที่แล้ว

    Dude. This video is the best thing ever. I learned more from this video than I ever have anywhere else

  • @jorget9179
    @jorget9179 ปีที่แล้ว +1

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

  • @Poroscik
    @Poroscik ปีที่แล้ว +96

    More knowledge in 13 min that the whole BootCamp together. Thanks man!