This is where I was 30 years ago. I've been advocating "know the basics" since then. Often against the grain. And it's still actual. History keeps repeating itself. Good to see someone more popular than me say it out loud. Thank you master Kevin. Another lesson well taught.
In my opinion, this is probably the most important video you have made. I have been writing software since 1985 and could not agree with you more strongly!! Well Done Kevin!!
I'm 56 semi retired truck driver and just recently decided to learn some html/css/js and am seeing many frameworks recommended but I keep plugging away at the basics because I was taught a good base is needed for everything else to be built on top of it no matter what you are doing.
This is so important for everyone starting out and you articulated that so well. Even if you, as a beginner, don't see the value in that, take it from someone who has experience and follow their advice
Completely on your side. I tried learning react first and as soon as I faced a problem I had no idea if I was on Js land or react land and made it a pain to solve problems. I took a step back and did a Discord clone with php, js and css and now I feel like I can tackle any problem and learn any framework.
I have said this for years, and it is so nice to see someone high profile say it. I have answered the question "I am a new programmer, what should I learn first, React or Vue?" Javascript. And oddly enough I fell into the same trap of learning jQuery before really diving into JS. I really value your videos because they focus on the core and I have learned lots from you. Keep it up!
I'm 100% with you on that. When I first started to create websites (around 2000-2001), jQuery, LESS and SASS weren't even a thing. So I had no choice but to learn to crawl, before I could walk and walk before I could run. Nowadays, I do almost every project with VueJS and SASS. But all these younger people have always had the more advanced stuff at their disposal, so it's hard not to skip any steps in the process then. It's basically decades of catching up they have to do.
This is exactly how I started dipping my toes into frontend development! I noticed I was watching React tutorials here and there and I wasn't entirely sure what code was React specific and what was html and css specific. So I promised myself I would stay away from frameworks until I could comfortably logic my way through a solution using html, css and JavaScript. SET A STRONG FOUNDATION FOR YOURSELF! There's no rush, give yourself time 😌
So true. I've tried learning frameworks such as react and vue also dabbled a bit with bootstrap back when i first started because they were "cooler" and that base css and js was too "lame". I never knew why i was doing what i was doing until i decided to strenghten my core css,js skills. After that it just clicked and now im enjoying programming more than ever
Great to hear this first thing in the morning, especially after all the pressure I'm getting to jump to React instead of sticking to the html, css and js vanilla for a little longer. I've learned a lot from you, ever since you & Kyle from WBS did the CSS battles. I'm very grateful! Keep up the great content.
After stepping back and really taking the time to learn CSS, I now have whole new respect for CSS frameworks and what they can do for you. I also realized why I didn't really need them at all.
Very much agree. The only thing I'd add from a personal perspective is that using Tailwind is what finally made many CSS concepts click for me. It was immensely helpful learning core CSS concepts
I agree, I took that long route of learning vanilla things first and now I'm learning frameworks and the learning curve / debugging is much easier when u know the Core languages. Thank you kevin, you helped me a lot learning CSS.
This is really close to my heart. When I try finding answers to basic javascript questions, there is so much on stackoverflow where the accepted answer unfortunately uses jquery. Quite often doing it in vanilla js is both shorter and a more long lasting skill.
Before subscribing to this channel I only used bootstrap and had only a basic understanding of css. I took the time to learn JavaScript/Typescript in depth but I always thought that css was not that important to do a web app and bootstrap with a few css lines was enough. But man, I lost so much time trying to do basic stuff because I didn't know grid, flexbox, etc. Because of this channel, I have a better understanding of css (still so much to learn) and it's so much easier to build stuff. So thanks !
This is great! I agree with you 100% on this. One my coworkers actually has only ever used Bootstrap. And we are using tailwind now on a project. He is struggling with tailwind because he does not have the basics of CSS down.
It is amazing how often I'm consulted by more senior devs about css! Learning base css that everything else boils down into and understanding how to use the browser to work with css truly makes a difference.
Thank You SOOOO much for posting this video! I received this via your newsletter and this video gives me a place to respond (I don't use Twitter or Discord). When I first read this, I was surprised because I agree with your approach 150% and I figured I was one of the few who viewed things in the manner you do. Of course, I haven't mastered HTML or CSS, but from a philosophical standpoint, I share your views and apply the "it's good to know the fundamentals" mindset to many things in life (at least in my life). So, it was quite refreshing to read your thoughts on this. You are my absolute #1 resource for all things CSS and I appreciate you, your knowledge, and your efforts to help make the web better for all. U R D Man!!!!!! :)
@@JakubSK you need to write less in Tailwind than in CSS (like class "flex" vs "display: flex"), don't need to worry about optimalization, easier to understand for more developers. Btw I don't know why someone cannot write good CSS, that's why I didn't use Tailwind first, but now for my own project I use it, because it's easier.
I have kind of the opposite problem - I learned HTML/CSS/JS ages ago and feel very at home with it, but I've never gotten too familiar with all the new frameworks, understood exactly how they abstract from the basics, and I'm even still kind of stumbling around the whole Node.js ecosystem.
I've recently started learning nodejs and it's been a bit of a struggle for me. I found that the issue for me is most resources out there tell you to download 6 or 7 different frameworks to do something as simple as process a pathname request from a client and completely ignore the vanilla nodejs modules. The explanation for why tutorials do this is "it's easy and saves time" but the code ends up being so abstract that it goes completely over my head and I have no idea what any of the code is doing. It took a while before I realized I needed to ignore anything with the words "npm install" in it (along with reading the official npm documentation) so I can understand how requests and responses and http methods work. Then, after learning the more verbose way of doing things stuff like express js makes sense and I can appreciate the time it saves me.
Try to build a websocket with rust if you want to learn more about the underlying stuff, I personally think that once you learn a little bit of Rust using actix is much easier and faster than nodejs
when I got the newsletter, I was like Aha ok right, actually so right. Because I have heared the advice from so many people but did not know why, but there is another intersting thing that I thought about, which is seeing professionals (like you) using the basics only which made me think (subconsciously) that it is the only way to go. therefore, I stuck at the basics. After seeing the letter, I tried to expand my knowledge into Vue and Nuxt.
I appreciate your use of vanilla css/html/js so much. For the longest time, when a new browser API was released, I'd find many tutorials on it with titles like "How to use [new API] with X, Y, and Z!" (X, Y, and Z being some mishmash of frameworks and / or libraries that I might or might not be familiar with). The difficult thing was always trying to understand where the new API ended and the framework / libs began, and how they _truly_ worked on their own. You make it a lot easier to actually understand the core feature you're demonstrating, which then makes it easier to use with whichever setup I have.
I think that's the issue here, I love working with JS, CSS and HTML, and if i had an option to ditch any framework I would do, but the job market forces you to work with certain technologies :/
Thank you, Kevin. Really well put, in a respectful tone. I think many need to be reminded of this regularly, those who learn as well as those who teach.
I support Kevin here, the basics are everything. I am a front-end developer self taught a year and a half, no job yet. I always wrote vanilla css bootstrap was just weird then tailwind too had issues in setting up the .config file. I had to go back to vanilla css. I don't regret it and that's my boy Kevin to support me.
Very good point. At the same time, learning a modern framework allows you to build things easier and make progress faster. That could make things less overwhelming and give you a smaller chance of giving up. Once you’re hooked, you’ll gladly learn and dig deep into the fundamentals. Well, at least that’s how it worked for me.
i am really happy that i took like 2 years to pick up a frontend framework. the best thing to happen to my productivity using various frontend frameworks was the time i spent not using them. i am a much better react developer thanks to my relucancy to pick it up in the first place. don't rush yourself, id force yourself to at least 2 or 3 large projects in vanilla before you pick up a framework of any kind.
This is probably one of the most important videos for people starting their frontend journey to watch on all of TH-cam. And probably one a lot of experienced frontend devs need to watch (and understand) as well. This shouldn't even be a point of debate. But sadly, it is. Thank you, Kevin!
Thank you, Kevin. As someone struggling in a bootcamp just now I'm just at the point, where to focus on. (It is probably inherent to bootcamps to race through the subject matter, to be confronted with React and Next while still contemplating arrays and loops, while parts of the brain still linger in fascination with the multitude of possibilities of CSS). Your video provides me with a guiding light and also the excitement for further learning after this bootcamp. However, to be fair, the bootcamp at least enables me to understand what you are talking about. I am a complete beginner and hope to experience moments of enthusiasm again and again.
Spot on, I have been working on the Fullstack Web ecosystem for a while, mainly React, and I got to a point where the line between React/Frameworks/SPAs gibberish was too far from native browser modules and behavior. I'm trying to work with vanilla a lot more since it seems like a better investment of my time. At the end of the day we write stuff that is rendered by a web browser and should stick to that.
I totally agree with the sentiments. Basically the video is a great summary of the Law of Leaky Abstraction. I don't come from a web dev background. I am primarily an application developer, thanks to school and great teachers and later university I learned all the way from assembler to high level languages. The law of leaky abstraction still applies and knowing the basics often helped find hard-to-track bugs in any project or framework. I often work on finding difficult bugs, performance optimization, refactoring legacy code into more modern variants besides adding new features or building new projects. I don't code assembler, but the knowledge still helps a lot.
Inheriting a site from a previous developer who heavily used bootstrap and jquery made me loooaathe those frameworks so much. So I really appreciate as much stuff being in vanilla as possible.
Agreed. I’m learning Angular right now and my biggest pain point is CSS. Still don’t fully understand grid and flex which made my app super card to build. Back to the basics!
Couldn't agree more. And I am so happy to have learned the web before any of these frameworks came along, even before CSS was a thing. And most of the time, even when using any of these frameworks, I try my best to stay as close to Vanilla as possible (especially the CSS part).
Brilliant video! It's always shocking when I have to school "senior" React frontend devs because they don't know how to solve a DOM/Javascript issue without installing yet another package. Interestingly, I find the same issue when devs avoid learning SQL by using ORMs.
Very true, and even without react going away major changes can happen, my framework of choice for a while has been next, and with ver 13 lots of changes have been made, among which is that css-in-js isn't really viable with server components, but it made me realize that using that solution in the first place was actually limiting, since migrating those styles to a different framework would require a complete rewrite. This convinced me to switch back to sass and honestly, it's more convenient and flexible.
Best advice! I’ve been building for the web since the late nineties. Hard lessons have made me very wary of using *any* large libraries for HTML or CSS or JS*. It’s oh soo sweet to begin with. * does not apply to backend frameworks in my experience.
Thank you for saying it!! Vanilla is everything. Been in the job for 15 years and I'm glad I had to start with the core languages. It makes learning React, Bootstrap, jQuery and Angular soooo easy.
vanilla all the way, I've been doing this professionaly for a year and stuck to vanilla at work while others that have been there for 2+ years working on react projects have a very clear disadvantage, theres so many "basic" things in vanilla that I see these guys struggling on because they're so stuck in frameworks, when you're good at vanilla everything is so much easier to understand
@@jj-big-slay-yo from the lean ones I'd rather use svelte as its a bit more popular and I personally really like it but a dev should always do some work in vanilla to maintain understanding and learn whats new
I had to rewrite an Angular app in Vanilla Js/html/css to make it easier for the backend team to attach objects without dealing with 5 cryptic classes. Personally, I find it cleaner and a little more time consuming.
Fully agree and appreciate your approach. Thanks for doing what you do!
ปีที่แล้ว
Totally wholeheartedly agree! Even using a simple CSS framework like bootstrap keeps you locked in and in the end eliminates all the progress you had in the beginning. I made that error myself. Better stick to the roots. CSS has become so infinitely better that there is no real need to lock yourself in a toxic relationship. Frameworks and libraries will betray you. SCSS is the next on my list to eliminate.
Also, the most important part. You are master of HTML/CSS/JS, and in my opinion, the top of the top TH-camrs in CSS content. I believe most of us looking up your videos for this reason. I'm sure you could teach React decently well too, but there might be others who are better in that specific library. There is nothing bad about specialising on something as a content creator.
I am a hobbyist web dev (I am a developer by profession but not web, I work in data), however one of the "quirks" of being me is my desire to understand everything from the flat basics. If a pipe is leaking I don't just want to know what will make it stop, I want to understand the flow, the structure, why it could have even ended up leaking etc. This can be an issue in a lot of ways because it means I don't just do a 5 minute job, I take several hours learning seemingly irrelevant things just to make something basic. Whilst there's people out there with several finished website, my website is still Under Construction as has been for a long time. However, one big benefit is exactly what you take about here, I understand coding logic really well (a mix of wanting to learn everything and also doing around 10 different coding languages). I'm incredibly good at recalling specific info and debugging within a language. I've had several practising web developers be stuck on a project in something I've never used, but with my knowledge of base JS I was able to logic it out and solve it for them within a few minutes, it's one of my big strengths despite all the weaknesses of this approach. And I think that's why learning these basics is so important, because I can just look at the code and know what it does. Then once I was doing a React course, I absolutely flew through it because I already knew the logic, I just needed to know the React syntax. I'm not saying things are easy for me, there's still some deeply complex logic that I have to sit and untangle, but at least the language is never the problem. If I was asked to create a React component to do something, I would know which bits need to be regular JS and which bits are React syntax. And I think exactly the advice you give here is the reason I can so quickly pick up things now, because I put in that massive chunk of extra time early on when everyone else just wanted to pump out finished projects. I think you still need a balance (unless you're a hobbyist projects still need to be completed after all) and you can absolutely specialise in a framework if you wish, but please make sure you learn the basics first so you don't have the issue of just copy-pasting code, not understanding what it actually does and then having to try debug something you don't get.
It's nice to know I'm not alone. All I here about are frameworks for every thing and their plugins. It doesn't make any sense. I can understand, but I can't agree. I feel so comfortable with HTML, CSS and JS/TS. I use Nuxt for certain projects but they are the exception, when I need something more complex. Thank you for your content. I'm a fan 🙂🙏
I cannot agree more, i get asked all the time for these things, and you gave the best possible answer, i will use it from now on, because it is better than mine xD similar in message but much better explained.
Way I see it -- What Kevin makes can be applied to anything. Like mentioned in the video -- it's the core basics. I have say taken CSS principles (in Kevins demo's) and applied them to frontends that used say Material UI, Tailwind or whatever as a framework for styling mixed with say Vue or React or whatever stack I am working with or inherited. Once you understand the core -- things like React can easily be broken down it is barebone principles (hope this might help a newer developer)
When teaching I think this is the correct approach. I can't tell the number of times I've watched a tutorial or quick how-to video and get disappointed at the amount of time wasted on configuring or fiddling with totally irrelevant (for the context of that video) things, for example a video on css grids where 3/4ths of it were about setting up bootstrap and a vscode theme.
Agree with everything. When I started programming I was making sorting algorithms and asking for memory allocation in C, then I just typed .sort and left the garbage collector to work it's magic. Now I just ask ChatGPT what to do XD. I don't miss those days but I'm glad I started there to get a better grasp of what's underneath.
EXACTLY. I learned jQuery first, and now I am learning JavaScript. I would have been much better learning JavaScript from the beginning. What makes JavaScript so hard for me now is I am so used to keywords in jQuery that when thinking/learning JavaScript I am mixing the two languages up. So it takes me twice as long to learn JavaScript as I have to unlearn Jquery.
Love this! I think it’s sad that so many developers tout using Tailwind. I get it… it makes things a little faster. But I love making my own design systems from scratch. I love the craft. It’s the same reason I didn’t ride my bike with training wheels when I was a kid. Sure, you’ll fall and get hurt, but each of those moments (hopefully) teaches a valuable lesson.
Oh my goodness! Finally, someone said it! Thank you, Kevin, for saying it! Every DEV on every team on every program on every project on every invading UFO from every alien planet everywhere needs to hear what you just said (and wrote in your news letter). Seriously, bro. This should be required reading/listening/watching for every DEV class worth paying for. Remember 'Macromedia' Flash/ActionScript? Really fun making all those cool (inaccessible) Flash intros... but they all went the way of the Dodo because they were dependency based (not native to the browser). Thus replaceable with the next shiny object and promises of DEV nirvana... Hmmm... sort of how JS frameworks are replaceable today. Just sayin... want your code to last? Go native! Great post. Wish I could like, follow, and sign up for the news letter more than twice...
I totally agree. I even think that using these frameworks bugs me with more effort in learning things that vanilla, with a little bit more elbow grease, already provides.
JQuery did actually have some completion in the early days from Mootools. It was a bit like the VHS vs Betamax wars (for those of us older to remember). I went with Mootools for many years and still maintain it on legacy projects.
Great takes, Kevin. These could fall under the "common sense" category but the noise and hype around new tech are overwhelming. Hope this video reaches people on their early education! Thanks for the content.
This is the reason I stopped using tailwind - I felt like I wasn't learning CSS. Same w/ jQuery. I learned to use it; then did a deep dive into JS and wondered why I ever used jQuery.
I have trained some devs now and I always make sure that the basics are solid. Let them Code a small website in plain js, etc. so many people don’t understand how JS actually works, it’s scary
Well, I still use JavaScript almost exclusively for DOM manipulation, and when I started out vanilla JS just confused me. A coworker then told me something along the lines of „just use jQuery“ and so I did. I found it to be much more readable and understandable and it helped a great deal to understand how to use JavaScript in general. Some time ago I switched back to vanilla JS know how to do everything I need. But all in all I would say that I took the right path for me by learning jQuery first 😅
I also made the mistake by jumping into jQuery and Bootstrap too early. Then one day I decided "Hey, I'll build a website without jQuery and Bootstrap just to see what I can do" and I just failed miserably. I realized I couldn't even do something simple as adding/removing a class from an element when something is clicked or just create simple elements and layouts. I had to jump into MDN and Stackoverflow for every little thing and it sucked. Good thing I realized that and started working on my "vanilla" skills. These days when I mentor junior developers I see the same issues. People do few basic HTML/CSS/JS tutorials without actually building anything and then jump into React because it's so popular. One problem is that many resources online also say "don't worry about skipping Javascript, you'll pick it up as you go", but the issue is people don't always pick up lot of things as they go and it also puts way more burden on mentors and companies where these people work because they skipped the basics. I do like React and I use it regularly, but it's pretty obvious when some "React/Vue/Angular developer" has skipped JS basics. Just throw them on a vanilla project that is a simple 2-3 page website and they won't even know how to include an external CSS/JS file or select elements on the page to attach event handlers to them because that was always handled for them automatically.
100% I developed my first website using 100% vanilla stuff. Even then, I"m still having a lot of difficulties with some of the less well known logic-ish stuff. Imagine if I went in blind for frameworks since, well, they're "easier" to use according to my professors. They probably forgot to include that it's easier for people who know what to do with it lmao.
Yeah, I remember getting "trapped" by jQuery for a while, not really knowing how to write plain js. But then I got really tired of it and I also realised it was less and less necessary once the oldest IE versions were retired. One day I looked into all the code I wrote regularly, to see how much of jQuery I really was using; and while the $-functions had infected most of the code, almost all of it was really using it for getting an element by id or getting elements by classname, and also the ajax method. I realised I could with a small amount of rewrites replace all of jQuery in my code with just two one-line util-functions for getting elements and one util method for doing ajax calls (basically a vanilla rewrite of the jQuery method but without support for old IE < 6 or something). The two getting elements functions were basically just an alias for document.getElementById and document.getElemementsByClassName (or whatever their overly verbose names are) so that I didn't have to write all that everywhere and so that that massive function name which were (is?) not possible to minify were written only once in my code and everywhere else it would be minified to a single letter function call. After a few years my util collection had grown to 6 or 7 functions I think; but it was still so short that I just kept copy pasting it into every new project. I retired it a few years ago since the ajax util method were no longer useful because of the much simpler fetch api's and I realised document.querySelector now had a good enough performance to be used for almost everything. Besides I'm now working mostly in React (because that's what the project were using before I started), where you almost never interact directly with the dom anyway (and React itself automatically includes several hundred KB of mandatory bloat anyway; so saving a few characters here and there is rather pointless).
Something that you didn't say but I think really stands out in your content is how pedagogical it is and how distracting it would be to introduce a tool in these videos. It can actually be a problem. People learn for example to couple the UI layer and the data layer when watching tutorials on state management in React, because introducing the indirections necessary to avoid coupling would be a distraction (the learner is already learning something new, they are already confused, why confuse them even more by having to explain more code?), but because the learners do not spend the time learning the basics of computer science, they never learn how to do things "properly".
Frameworks are only a tool to make your work easier, but in the end it's still *you* who has to do the work. If you don't know web technologies, React will not help you, the same way buying an expensive car won't teach you how to drive (and will only bring regrets when you crash it). When you learn the basics of the craft, it will be really easy to pick up the tools, but when you learn the tool, it will be hard to learn the craft itself.
Makes sense. Core languages are so so important
This is where I was 30 years ago. I've been advocating "know the basics" since then. Often against the grain. And it's still actual. History keeps repeating itself.
Good to see someone more popular than me say it out loud.
Thank you master Kevin. Another lesson well taught.
"Often against the grain"... very well stated!
As usual, spot on, Kevin. Knowing the foundations and pillars of front-end web development is the only way to properly learn any framework.
In my opinion, this is probably the most important video you have made. I have been writing software since 1985 and could not agree with you more strongly!! Well Done Kevin!!
I'm 56 semi retired truck driver and just recently decided to learn some html/css/js and am seeing many frameworks recommended but I keep plugging away at the basics because I was taught a good base is needed for everything else to be built on top of it no matter what you are doing.
I like that you don't focus on frameworks, makes it really easy to tweak stuff as you need to.
That’s the best feeling when you have full control.
Yeah, agreed
@@obelisk.5890 yet impossible to build anything real
This is so important for everyone starting out and you articulated that so well. Even if you, as a beginner, don't see the value in that, take it from someone who has experience and follow their advice
Completely on your side. I tried learning react first and as soon as I faced a problem I had no idea if I was on Js land or react land and made it a pain to solve problems. I took a step back and did a Discord clone with php, js and css and now I feel like I can tackle any problem and learn any framework.
I have said this for years, and it is so nice to see someone high profile say it. I have answered the question "I am a new programmer, what should I learn first, React or Vue?" Javascript. And oddly enough I fell into the same trap of learning jQuery before really diving into JS. I really value your videos because they focus on the core and I have learned lots from you. Keep it up!
I'm 100% with you on that. When I first started to create websites (around 2000-2001), jQuery, LESS and SASS weren't even a thing. So I had no choice but to learn to crawl, before I could walk and walk before I could run. Nowadays, I do almost every project with VueJS and SASS. But all these younger people have always had the more advanced stuff at their disposal, so it's hard not to skip any steps in the process then. It's basically decades of catching up they have to do.
This is exactly how I started dipping my toes into frontend development! I noticed I was watching React tutorials here and there and I wasn't entirely sure what code was React specific and what was html and css specific. So I promised myself I would stay away from frameworks until I could comfortably logic my way through a solution using html, css and JavaScript.
SET A STRONG FOUNDATION FOR YOURSELF! There's no rush, give yourself time 😌
So true. I've tried learning frameworks such as react and vue also dabbled a bit with bootstrap back when i first started because they were "cooler" and that base css and js was too "lame". I never knew why i was doing what i was doing until i decided to strenghten my core css,js skills. After that it just clicked and now im enjoying programming more than ever
Great to hear this first thing in the morning, especially after all the pressure I'm getting to jump to React instead of sticking to the html, css and js vanilla for a little longer.
I've learned a lot from you, ever since you & Kyle from WBS did the CSS battles. I'm very grateful! Keep up the great content.
After stepping back and really taking the time to learn CSS, I now have whole new respect for CSS frameworks and what they can do for you. I also realized why I didn't really need them at all.
Very much agree. The only thing I'd add from a personal perspective is that using Tailwind is what finally made many CSS concepts click for me. It was immensely helpful learning core CSS concepts
Do you know some tailwind courses?
@@emmanuelmantilla1465 you don't really need a course if you understand css, just read the docs
@@emmanuelmantilla1465 Net Ninja did a solid Tailwind course.
I agree, I took that long route of learning vanilla things first and now I'm learning frameworks and the learning curve / debugging is much easier when u know the Core languages.
Thank you kevin, you helped me a lot learning CSS.
This is really close to my heart. When I try finding answers to basic javascript questions, there is so much on stackoverflow where the accepted answer unfortunately uses jquery. Quite often doing it in vanilla js is both shorter and a more long lasting skill.
Before subscribing to this channel I only used bootstrap and had only a basic understanding of css. I took the time to learn JavaScript/Typescript in depth but I always thought that css was not that important to do a web app and bootstrap with a few css lines was enough. But man, I lost so much time trying to do basic stuff because I didn't know grid, flexbox, etc. Because of this channel, I have a better understanding of css (still so much to learn) and it's so much easier to build stuff. So thanks !
This is great! I agree with you 100% on this. One my coworkers actually has only ever used Bootstrap. And we are using tailwind now on a project. He is struggling with tailwind because he does not have the basics of CSS down.
It is amazing how often I'm consulted by more senior devs about css! Learning base css that everything else boils down into and understanding how to use the browser to work with css truly makes a difference.
Thank You SOOOO much for posting this video! I received this via your newsletter and this video gives me a place to respond (I don't use Twitter or Discord). When I first read this, I was surprised because I agree with your approach 150% and I figured I was one of the few who viewed things in the manner you do. Of course, I haven't mastered HTML or CSS, but from a philosophical standpoint, I share your views and apply the "it's good to know the fundamentals" mindset to many things in life (at least in my life). So, it was quite refreshing to read your thoughts on this. You are my absolute #1 resource for all things CSS and I appreciate you, your knowledge, and your efforts to help make the web better for all. U R D Man!!!!!! :)
You're absolutely right. Nowadays, there are too many strange frameworks, and it only adds to the confusion.
There are, but some makes web dev easier like Tailwind.
Makes you feel dumb because you don’t know the latest fashionable framework with a snazzy sounding name.
@@mezesadam1997 I don't understand how it makes it easier tbh
@@JakubSK you need to write less in Tailwind than in CSS (like class "flex" vs "display: flex"), don't need to worry about optimalization, easier to understand for more developers. Btw I don't know why someone cannot write good CSS, that's why I didn't use Tailwind first, but now for my own project I use it, because it's easier.
@@mezesadam1997 I’ve used Tailwind on many projects. No thank you.
I have kind of the opposite problem - I learned HTML/CSS/JS ages ago and feel very at home with it, but I've never gotten too familiar with all the new frameworks, understood exactly how they abstract from the basics, and I'm even still kind of stumbling around the whole Node.js ecosystem.
I've recently started learning nodejs and it's been a bit of a struggle for me. I found that the issue for me is most resources out there tell you to download 6 or 7 different frameworks to do something as simple as process a pathname request from a client and completely ignore the vanilla nodejs modules. The explanation for why tutorials do this is "it's easy and saves time" but the code ends up being so abstract that it goes completely over my head and I have no idea what any of the code is doing. It took a while before I realized I needed to ignore anything with the words "npm install" in it (along with reading the official npm documentation) so I can understand how requests and responses and http methods work. Then, after learning the more verbose way of doing things stuff like express js makes sense and I can appreciate the time it saves me.
Try to build a websocket with rust if you want to learn more about the underlying stuff, I personally think that once you learn a little bit of Rust using actix is much easier and faster than nodejs
when I got the newsletter, I was like Aha ok right, actually so right. Because I have heared the advice from so many people but did not know why, but there is another intersting thing that I thought about, which is seeing professionals (like you) using the basics only which made me think (subconsciously) that it is the only way to go. therefore, I stuck at the basics. After seeing the letter, I tried to expand my knowledge into Vue and Nuxt.
I appreciate your use of vanilla css/html/js so much. For the longest time, when a new browser API was released, I'd find many tutorials on it with titles like "How to use [new API] with X, Y, and Z!" (X, Y, and Z being some mishmash of frameworks and / or libraries that I might or might not be familiar with). The difficult thing was always trying to understand where the new API ended and the framework / libs began, and how they _truly_ worked on their own.
You make it a lot easier to actually understand the core feature you're demonstrating, which then makes it easier to use with whichever setup I have.
As a JS, CSS and HTML Vanilla frontend developer, i can say that is a bit hard to find jobs only knowing vanilla languages
I think that's the issue here, I love working with JS, CSS and HTML, and if i had an option to ditch any framework I would do, but the job market forces you to work with certain technologies :/
Using vanilla stuff is why I still comeback to your channel. Good work Kevin
Thank you, Kevin. Really well put, in a respectful tone. I think many need to be reminded of this regularly, those who learn as well as those who teach.
I support Kevin here, the basics are everything. I am a front-end developer self taught a year and a half, no job yet. I always wrote vanilla css bootstrap was just weird then tailwind too had issues in setting up the .config file. I had to go back to vanilla css. I don't regret it and that's my boy Kevin to support me.
i fell for this..just discovered u recently with another full long length video and i wanted to thank you for putting this out there.
Very good point. At the same time, learning a modern framework allows you to build things easier and make progress faster. That could make things less overwhelming and give you a smaller chance of giving up. Once you’re hooked, you’ll gladly learn and dig deep into the fundamentals. Well, at least that’s how it worked for me.
i am really happy that i took like 2 years to pick up a frontend framework. the best thing to happen to my productivity using various frontend frameworks was the time i spent not using them. i am a much better react developer thanks to my relucancy to pick it up in the first place. don't rush yourself, id force yourself to at least 2 or 3 large projects in vanilla before you pick up a framework of any kind.
This is probably one of the most important videos for people starting their frontend journey to watch on all of TH-cam. And probably one a lot of experienced frontend devs need to watch (and understand) as well. This shouldn't even be a point of debate. But sadly, it is. Thank you, Kevin!
Keep it vanilla, you don’t how much you have helped me in my career. Thank you.
Thank you, Kevin. As someone struggling in a bootcamp just now I'm just at the point, where to focus on. (It is probably inherent to bootcamps to race through the subject matter, to be confronted with React and Next while still contemplating arrays and loops, while parts of the brain still linger in fascination with the multitude of possibilities of CSS).
Your video provides me with a guiding light and also the excitement for further learning after this bootcamp. However, to be fair, the bootcamp at least enables me to understand what you are talking about. I am a complete beginner and hope to experience moments of enthusiasm again and again.
You are the best, after working for year in it. thanks to you I started to like css
Spot on as always. You really stand out on youtube.
Spot on, I have been working on the Fullstack Web ecosystem for a while, mainly React, and I got to a point where the line between React/Frameworks/SPAs gibberish was too far from native browser modules and behavior. I'm trying to work with vanilla a lot more since it seems like a better investment of my time. At the end of the day we write stuff that is rendered by a web browser and should stick to that.
I totally agree with the sentiments. Basically the video is a great summary of the Law of Leaky Abstraction.
I don't come from a web dev background. I am primarily an application developer, thanks to school and great teachers and later university I learned all the way from assembler to high level languages. The law of leaky abstraction still applies and knowing the basics often helped find hard-to-track bugs in any project or framework.
I often work on finding difficult bugs, performance optimization, refactoring legacy code into more modern variants besides adding new features or building new projects. I don't code assembler, but the knowledge still helps a lot.
I wish I could shake your hand! I am so grateful for everything you teach, and the principles with which you do so.
Exactly! Thanks a lot for bringing up these points, Kevin.
I totally agree. But deep down we also want to see tech stacks you work with and your opinion on latest new frameworks
Inheriting a site from a previous developer who heavily used bootstrap and jquery made me loooaathe those frameworks so much. So I really appreciate as much stuff being in vanilla as possible.
Agreed. I’m learning Angular right now and my biggest pain point is CSS. Still don’t fully understand grid and flex which made my app super card to build. Back to the basics!
Couldn't agree more. And I am so happy to have learned the web before any of these frameworks came along, even before CSS was a thing.
And most of the time, even when using any of these frameworks, I try my best to stay as close to Vanilla as possible (especially the CSS part).
Spittin’ facts 💯
Brilliant video! It's always shocking when I have to school "senior" React frontend devs because they don't know how to solve a DOM/Javascript issue without installing yet another package. Interestingly, I find the same issue when devs avoid learning SQL by using ORMs.
SQL? The answer surely must be MongoDB.
Very true, and even without react going away major changes can happen, my framework of choice for a while has been next, and with ver 13 lots of changes have been made, among which is that css-in-js isn't really viable with server components, but it made me realize that using that solution in the first place was actually limiting, since migrating those styles to a different framework would require a complete rewrite. This convinced me to switch back to sass and honestly, it's more convenient and flexible.
Best advice!
I’ve been building for the web since the late nineties. Hard lessons have made me very wary of using *any* large libraries for HTML or CSS or JS*. It’s oh soo sweet to begin with.
* does not apply to backend frameworks in my experience.
Thank you for saying it!! Vanilla is everything. Been in the job for 15 years and I'm glad I had to start with the core languages. It makes learning React, Bootstrap, jQuery and Angular soooo easy.
Nice explaination! Keep it on!
Sadly, more and more people is becoming frameworkers, and not actual programmers.
Some of them make the work easier. I'm saying this because I'm one of them
vanilla all the way, I've been doing this professionaly for a year and stuck to vanilla at work while others that have been there for 2+ years working on react projects have a very clear disadvantage, theres so many "basic" things in vanilla that I see these guys struggling on because they're so stuck in frameworks, when you're good at vanilla everything is so much easier to understand
for jobs, i use react
Or you could just use a lean framework like preact, or solid-js.
@@jj-big-slay-yo from the lean ones I'd rather use svelte as its a bit more popular and I personally really like it but a dev should always do some work in vanilla to maintain understanding and learn whats new
Wholeheartedly agree. Learning the underlying language of any framework, help you to more fully understand the framework.
Brilliant! Makes perfect sense - thanks for sharing
I had to rewrite an Angular app in Vanilla Js/html/css to make it easier for the backend team to attach objects without dealing with 5 cryptic classes. Personally, I find it cleaner and a little more time consuming.
What do you mean by cryptic classes.
Wut? This comment makes no sense at all.
Like learning Flutter before understanding Dart. Great content Kevin
Can't be any more accurate, thanks Kevin!
Hey Kevin, You're amazing. Thanks for being you. Thanks for sharing your knowledge.
Fully agree and appreciate your approach. Thanks for doing what you do!
Totally wholeheartedly agree! Even using a simple CSS framework like bootstrap keeps you locked in and in the end eliminates all the progress you had in the beginning. I made that error myself. Better stick to the roots. CSS has become so infinitely better that there is no real need to lock yourself in a toxic relationship.
Frameworks and libraries will betray you.
SCSS is the next on my list to eliminate.
Also, the most important part. You are master of HTML/CSS/JS, and in my opinion, the top of the top TH-camrs in CSS content. I believe most of us looking up your videos for this reason. I'm sure you could teach React decently well too, but there might be others who are better in that specific library. There is nothing bad about specialising on something as a content creator.
Always appreciate your videos, love to see more js videos from a mentor like you.
Great points. Please keep it this way :)
I am a hobbyist web dev (I am a developer by profession but not web, I work in data), however one of the "quirks" of being me is my desire to understand everything from the flat basics. If a pipe is leaking I don't just want to know what will make it stop, I want to understand the flow, the structure, why it could have even ended up leaking etc. This can be an issue in a lot of ways because it means I don't just do a 5 minute job, I take several hours learning seemingly irrelevant things just to make something basic. Whilst there's people out there with several finished website, my website is still Under Construction as has been for a long time.
However, one big benefit is exactly what you take about here, I understand coding logic really well (a mix of wanting to learn everything and also doing around 10 different coding languages). I'm incredibly good at recalling specific info and debugging within a language. I've had several practising web developers be stuck on a project in something I've never used, but with my knowledge of base JS I was able to logic it out and solve it for them within a few minutes, it's one of my big strengths despite all the weaknesses of this approach. And I think that's why learning these basics is so important, because I can just look at the code and know what it does. Then once I was doing a React course, I absolutely flew through it because I already knew the logic, I just needed to know the React syntax.
I'm not saying things are easy for me, there's still some deeply complex logic that I have to sit and untangle, but at least the language is never the problem. If I was asked to create a React component to do something, I would know which bits need to be regular JS and which bits are React syntax. And I think exactly the advice you give here is the reason I can so quickly pick up things now, because I put in that massive chunk of extra time early on when everyone else just wanted to pump out finished projects. I think you still need a balance (unless you're a hobbyist projects still need to be completed after all) and you can absolutely specialise in a framework if you wish, but please make sure you learn the basics first so you don't have the issue of just copy-pasting code, not understanding what it actually does and then having to try debug something you don't get.
I learned the jQuery lesson in another way but what you say is absolutely right! The core concepts are, well the core.
Thanks for this video, reached me just in time.😊
Great message and video!
The reason I watch your channel is because you teach this way.
Your content is awesome and I was surprised how many people are not familiar with CSS...
It's nice to know I'm not alone. All I here about are frameworks for every thing and their plugins. It doesn't make any sense. I can understand, but I can't agree. I feel so comfortable with HTML, CSS and JS/TS. I use Nuxt for certain projects but they are the exception, when I need something more complex. Thank you for your content. I'm a fan 🙂🙏
I cannot agree more, i get asked all the time for these things, and you gave the best possible answer, i will use it from now on, because it is better than mine xD similar in message but much better explained.
Way I see it -- What Kevin makes can be applied to anything. Like mentioned in the video -- it's the core basics. I have say taken CSS principles (in Kevins demo's) and applied them to frontends that used say Material UI, Tailwind or whatever as a framework for styling mixed with say Vue or React or whatever stack I am working with or inherited.
Once you understand the core -- things like React can easily be broken down it is barebone principles (hope this might help a newer developer)
a great teacher! ❤ thanks for standing tall 🔥
When teaching I think this is the correct approach. I can't tell the number of times I've watched a tutorial or quick how-to video and get disappointed at the amount of time wasted on configuring or fiddling with totally irrelevant (for the context of that video) things, for example a video on css grids where 3/4ths of it were about setting up bootstrap and a vscode theme.
Agree with everything. When I started programming I was making sorting algorithms and asking for memory allocation in C, then I just typed .sort and left the garbage collector to work it's magic. Now I just ask ChatGPT what to do XD. I don't miss those days but I'm glad I started there to get a better grasp of what's underneath.
True, it's easy to port vanilla css to other frameworks but not vice-versa.
EXACTLY. I learned jQuery first, and now I am learning JavaScript. I would have been much better learning JavaScript from the beginning. What makes JavaScript so hard for me now is I am so used to keywords in jQuery that when thinking/learning JavaScript I am mixing the two languages up. So it takes me twice as long to learn JavaScript as I have to unlearn Jquery.
I spent some time learning vanilla CSS, and now I am able to help my colleagues with that easily
Love this! I think it’s sad that so many developers tout using Tailwind. I get it… it makes things a little faster. But I love making my own design systems from scratch. I love the craft. It’s the same reason I didn’t ride my bike with training wheels when I was a kid. Sure, you’ll fall and get hurt, but each of those moments (hopefully) teaches a valuable lesson.
thanks for doing it the way you do!
Oh my goodness! Finally, someone said it! Thank you, Kevin, for saying it!
Every DEV on every team on every program on every project on every invading UFO from every alien planet everywhere needs to hear what you just said (and wrote in your news letter).
Seriously, bro. This should be required reading/listening/watching for every DEV class worth paying for.
Remember 'Macromedia' Flash/ActionScript? Really fun making all those cool (inaccessible) Flash intros... but they all went the way of the Dodo because they were dependency based (not native to the browser). Thus replaceable with the next shiny object and promises of DEV nirvana...
Hmmm... sort of how JS frameworks are replaceable today.
Just sayin... want your code to last? Go native!
Great post. Wish I could like, follow, and sign up for the news letter more than twice...
I totally agree. I even think that using these frameworks bugs me with more effort in learning things that vanilla, with a little bit more elbow grease, already provides.
JQuery did actually have some completion in the early days from Mootools. It was a bit like the VHS vs Betamax wars (for those of us older to remember). I went with Mootools for many years and still maintain it on legacy projects.
And this is the reason I love your channel
because you are an awesome teacher which focuses on basics 😀.
Great takes, Kevin.
These could fall under the "common sense" category but the noise and hype around new tech are overwhelming.
Hope this video reaches people on their early education!
Thanks for the content.
This is the reason I stopped using tailwind - I felt like I wasn't learning CSS. Same w/ jQuery. I learned to use it; then did a deep dive into JS and wondered why I ever used jQuery.
I have trained some devs now and I always make sure that the basics are solid. Let them Code a small website in plain js, etc. so many people don’t understand how JS actually works, it’s scary
Well, I still use JavaScript almost exclusively for DOM manipulation, and when I started out vanilla JS just confused me. A coworker then told me something along the lines of „just use jQuery“ and so I did. I found it to be much more readable and understandable and it helped a great deal to understand how to use JavaScript in general. Some time ago I switched back to vanilla JS know how to do everything I need. But all in all I would say that I took the right path for me by learning jQuery first 😅
Great video. Thank you for sharing.
I also made the mistake by jumping into jQuery and Bootstrap too early. Then one day I decided "Hey, I'll build a website without jQuery and Bootstrap just to see what I can do" and I just failed miserably. I realized I couldn't even do something simple as adding/removing a class from an element when something is clicked or just create simple elements and layouts. I had to jump into MDN and Stackoverflow for every little thing and it sucked. Good thing I realized that and started working on my "vanilla" skills.
These days when I mentor junior developers I see the same issues. People do few basic HTML/CSS/JS tutorials without actually building anything and then jump into React because it's so popular. One problem is that many resources online also say "don't worry about skipping Javascript, you'll pick it up as you go", but the issue is people don't always pick up lot of things as they go and it also puts way more burden on mentors and companies where these people work because they skipped the basics. I do like React and I use it regularly, but it's pretty obvious when some "React/Vue/Angular developer" has skipped JS basics. Just throw them on a vanilla project that is a simple 2-3 page website and they won't even know how to include an external CSS/JS file or select elements on the page to attach event handlers to them because that was always handled for them automatically.
Sir. You speak much truth. Thank you.
I totally respect that, and I'm on that side of the team.
You are correct I appereciate you. your content is awesome. I watch your every video and It is always incredible
100% I developed my first website using 100% vanilla stuff. Even then, I"m still having a lot of difficulties with some of the less well known logic-ish stuff. Imagine if I went in blind for frameworks since, well, they're "easier" to use according to my professors. They probably forgot to include that it's easier for people who know what to do with it lmao.
Yeah, I remember getting "trapped" by jQuery for a while, not really knowing how to write plain js. But then I got really tired of it and I also realised it was less and less necessary once the oldest IE versions were retired. One day I looked into all the code I wrote regularly, to see how much of jQuery I really was using; and while the $-functions had infected most of the code, almost all of it was really using it for getting an element by id or getting elements by classname, and also the ajax method. I realised I could with a small amount of rewrites replace all of jQuery in my code with just two one-line util-functions for getting elements and one util method for doing ajax calls (basically a vanilla rewrite of the jQuery method but without support for old IE < 6 or something). The two getting elements functions were basically just an alias for document.getElementById and document.getElemementsByClassName (or whatever their overly verbose names are) so that I didn't have to write all that everywhere and so that that massive function name which were (is?) not possible to minify were written only once in my code and everywhere else it would be minified to a single letter function call.
After a few years my util collection had grown to 6 or 7 functions I think; but it was still so short that I just kept copy pasting it into every new project. I retired it a few years ago since the ajax util method were no longer useful because of the much simpler fetch api's and I realised document.querySelector now had a good enough performance to be used for almost everything. Besides I'm now working mostly in React (because that's what the project were using before I started), where you almost never interact directly with the dom anyway (and React itself automatically includes several hundred KB of mandatory bloat anyway; so saving a few characters here and there is rather pointless).
Spot on 👍
Something that you didn't say but I think really stands out in your content is how pedagogical it is and how distracting it would be to introduce a tool in these videos.
It can actually be a problem. People learn for example to couple the UI layer and the data layer when watching tutorials on state management in React, because introducing the indirections necessary to avoid coupling would be a distraction (the learner is already learning something new, they are already confused, why confuse them even more by having to explain more code?), but because the learners do not spend the time learning the basics of computer science, they never learn how to do things "properly".
Frameworks are only a tool to make your work easier, but in the end it's still *you* who has to do the work. If you don't know web technologies, React will not help you, the same way buying an expensive car won't teach you how to drive (and will only bring regrets when you crash it). When you learn the basics of the craft, it will be really easy to pick up the tools, but when you learn the tool, it will be hard to learn the craft itself.