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 - Наука та технологія
"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
@@peterebode true, but they will use Bing or any other search engine.
@@okokok867 If an aspiring web developer uses bing, they may as well give up now
I'm one of the few people who DOES know what I'm doing*
*kinda
So true:)
Lmaoo I just did that today at work!
Have been doing web development for the past 5 years, but still found the video engaging enough to watch until the end.
Jeff never disappoint us
He always makes good vids that everyone can relate
I can resonate with those words on a spiritual level.
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.
Front ili back? Firma ili freelancing?
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!
sus
sus
big oof
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.
@@Keithen Is the pay good at least?
You just took me through the last 3 years of my life in 13 minutes and 18 seconds
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 😃
@@mazharansari7813 50k a year. Not the best
@@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
@@RealKered ohh okay 👍🏽
@@camiscooked wow that's amazing thanks for sharing i highly appreciate it 🙏🏽🙏🏽
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
pro touch some grass
props to you i guess for actually taking your time to make the timeline?
That's dedication
I'm thankful thanks for adding this. Ignore the haters.
Bro, you deserve a love react. Love you.
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!
Samesies, I'd be goosed without fireship
Same
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 😍
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!
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.
@David McGuigan call my mummy I need my mummy, help! Scooby do be do.
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.
@@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.
@David McGuigan i have like 230+ stack tabs open...
@David McGuigan i didnt say Chrome was running well :D
“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. :)
"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
@@ko-Daegu honestly this. So much this
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.
@@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
@@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.
Dude's summed up an entire college degree
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
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
Can u give resourses to learn dev.
@@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!
@@dzshop4788 what dev?
@@ggff2269 web dev
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?
I love seeing my months and years of hard work and understanding summarized into 13 minutes.
😂😂
Emotional damage
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!
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🔥🔥
4:45 that was really good
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:)
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.
I've been a web developer for years but still found this incredibly interesting! Something about the simplicity of it all :)
Great bottom-up overview! Love how you mention not only the basics, but also more advanced yet fundamental topics
The first few minutes is one of the best explanations of the internet
Agreed. Then the internet really starts to appear over-engineered after approximately item 75.
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
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
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!!
One of the best videos you've made, keep it up Jeff❤️
Yep, it is a masterpiece. Lots of information condensed in less than 15 minutes in a comprehensible and humored way.
The single best organized and comprehensive explanation you'll find anywhere!
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 UA-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
i agree with you 100%
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.
@@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
@@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.
@@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
One of the biggest challenges web-developers face is CENTERING A DUCKING DIV. And then we can talk about the responsive layout.
*pre-flex
margin: 50%
@@akj3344 you wish.
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.
margin: auto;
@@yes-vy6bn *margin: 0 auto;
0 for top and bottom then auto for left and right
Been binging this channel doing my first real client project and starting to hear your voice in my head randomly. Not mad about it.
Really appreciate this video as a beginner learning how to code 💯
This is PACKED with great info
Thank you for making this and listing all these into easy concept forms. It makes my learning dev. learning much easier! Cheers mate
I just love this channel, I almost completely stopped using UA-cam for a while but this channel just got me back
Thank you! Now everything became clear-ish
honestly after realizing i have experience in 98/100 of these things i think im gonna get back to making that portfolio project
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. ^^
Must watch for whom works in web.Precious content..Thanks Fireship for all put all togehter in just 10min.
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!
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
@@aleksanderdahle1038 lmao, true! 😝
Thanks I really enjoy your work!
thanks for donating
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.
The only video I will point to someone when they're looking to learn about being a Fullstack Engineer. Great work Jeff! 🔥
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 :)
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.
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.
Thank you so much, Jeff. I still need to learn more about these.
Man your Videos are so f*cking awesome :)
I've never watched another Developer UA-camr who commits so much information/knowledge in such an easy unterstandble way and short amount of time!!! Thank you!!
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
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.
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.
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!?
Turboautistic
omg
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.
Oh, the webdev pay is so good these days.
@@2bitnerd but too much competition right?
Yeah. The web is pretty much pure cancer and everyone only does it for the money. No other reason to give a fuck...
Really, you see c++ development easier?
That's an insanely awesome, informative and useful summary of most tech used in JavaScript stack. Thank you!
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.
Boomer: Dns, yes the phone book of the internet.
Zoomer: what's a phone book?
Jeff seems like an AI robot to speak in this video. Mind blowing. A million dollars content ❤️
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.
Crazy video, so many brief content of so many huge topics. there is a lot to dive in ,thanks!
No one’s gonna mention that clean rap?
This is how Neo felt when learning Kung Fu
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)
i just started with html and css, hoping to become a front end developer sometime in the future and this video gives me hope
idk if anyone noticed,
2:12 - it's a polish phone book, with real street names and some working phone numbers
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
My first video on UA-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.
That was a great refresher of how much i actually don’t know.
2 years of webdev still learning
I learned more from this video than in the entirety of my network class.
Lel
15 years of web development. It's given me more opportunities than I could ever have imagined.
These long form videos are top notch. Keep it up
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.
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
I love this series as I always have to learn things by putting them into perspective and associating them and this is extremely helpful
As as full-stack developer I must say that this video is gold!
Wow, thank you for your time and effort good sir!
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 👏🏼👏🏼👏🏼
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.
Yep, like a language called Java, for example.
Great video, man! You made them interesting even though I knew most of it if not all
Incredible video. This has to be one of the most helpful tech videos ever!
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
yep. but websites look great nowadays.
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.
the css rap 👌
Dude. This video is the best thing ever. I learned more from this video than I ever have anywhere else
Thanks for sharing what else I need in order to be fullstack
Said we passed web dev 101, but only taught 100 things. Still waiting for 1 that's left.
For sure, I'm a Js - React developer and I love coding ❤ This is a guide for everyone
That was an excellent sum-up video, thanks sir !
I love your videos, so informative and engaging! Keep up the great work 🙏
@4:45 Jeff be spittin’ bars🔥🔥
What tool is used to display that graph for Vue at 12:15?
It looks a lot like a Jetbrains product
@@Lmfaorofl17 ¿Webstorm? Rider has a similar tool, but the styling is quite different.
This video is beautiful. Connects all the dots. That’s all I have to say
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” 😂😅
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.
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
I see what you're saying but are const variables?
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
they are variables.
🤓
“… 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. 🤣
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
Your rap made me laugh our loud 🔥
Waiting for that 1 guy who will make a list of all the 100 things in the comments
This reminded me of my first primary days of web development
i have a web dev position interview in less than an hour. thanks for this
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 👊
Before some major web frameworks existed