Videos where you go over common mistakes you see with beginners is gold. This is showing the how and why and the traps that devs easily fall into. Keep up the great work dude!
Understanding how useful inheritance can be is so underrated! An engineer came to my company recently & is responsible for implementing a utility first css framework to be used across dozens of our sites. He has 15+ years of experience doing front end and is definitely not stupid. But in his attempt to make this tailwind-ish utility first system, he reset LITERALLY EVERYTHING on EVERY element using the * selector. Meaning that every single div needs class names to define every part of it’s look. Then, for example if you had a parent and child div, and add a font size on the parent, the child won’t get that font size applied as well, which is so against how CSS is built to work. I pushed back on this decision early on, so we’re probably not going to go with such a heavy handed approach, but this was really disheartening to see that even fairly experienced devs completely disregard the inheritance/the cascade that makes css great. Not tailwind hate, I do enjoy tailwind sometimes.
You would have had to set various font-sizes for every element, coz everything was reset 😂 Even do like the following 😂 .parent { font-size: 18px; } .child { font-size: inherit; }
Sounds like a lot of unnecessary work for no reason. Did you mean UI library, like bootstrap? Because building a whole CSS framework from scratch is useless, no matter how you look at it. It is a lot faster and easier to take existing Tailwind(or Windi, or Uno) and extend it with custom rules for all your needs. Especially dozens of sites? I understand if it were some specific utilites that do not already exist anywhere(even though 99% of stuff exist in tailwind already), but for it to be reusable on *dozens* of sites it needs to be pretty generic. Very generic. So I can't comprehend why.
@@twothreeoneoneseventwoonefour5 Giant projects, especially with design teams, need to abstract things semantically and name it a class to reuse, instead of composing all of the styles every time. Tailwind is imperative, so programmers love it. It steps on designers' toes.
Reading a comment that said he begins with "Frontend Friends" has changed my life. I always thought it was Friend and Friends. And now every video I notice something I didn't notice forever. Please tell me it's not just me
I don't struggle with CSS per se but where it becomes troublesome (for me anyway) is when I add micro interactions or micro animations these are elements that clients might not consider important but in terms of design and layout they can set my designs apart from my competitors. I'm getting there and keep a web kit for reference! :)
An in-depth look at viewport units would be super helpful! Pros, cons, best usage scenarios (if there are some). I've only dabbled with them here and there, mainly for heights and I've run into issues. Which could very well be me using them completely wrong 🤣.
Came to complain about under-investment in initial design, as well as needing to satisfy naive or unsettled client/management expectations. But mainly the problem is the CSS language, or at least the dev tools. Maintaining a CSS code base is a nightmare: no widely adopted tree-shaking refactoring profiling or effect tracing tools.
Thanks, @Kevin. And I absolutely agree the frameworks are not really helping: sass, scss, css in JS, css modules, web components... They dive deeper into the noise rather than helping us rise above it. Semantic HTML is a revelation; maybe its time for a better descriptive language above/around/about visual/accessible presentation.
CSS is one of those skills where every FE dev I’ve met doesn’t think it needs to be taken seriously because it is so “easy”. I’m glad I learned from you instead of going with the status quo. I’m pretty much the CSS guru at my job, even the staff engineer and the lead designer lean on my skills, and I’m basically a junior.
I just realized I've been doing bandaid solutions for years. I have done some crack head type CSS lmao. I'm so happy I found this channel and will be binge watching to improve. Can't wait for the SCSS course
This man is a legend. Getting better at CSS is not a joke. He just explained things just like an artist. Writing quality CSS is an art and how do you get better at art? practice, practice, practice until it gets as your second nature. There is no shortcut
Wow, you have put it in the best elegant way that one possibly could ! Fantastic examples and very inspiring arguments here ! Just a small note albeit no excuse really. I am now 48 and been coding web sites on and off on a semi-professional way (last one I built was in 2007 and I am now back on the roll once again). By watching your videos I have come to realize that CSS is another coding universe on its own and I know strongly question whoever comes to me and claims that "I know CSS too". I think its all coming down to what you are saying, if you 've kept doing 'stuff that just works' all this time what is done is done, we all need to allow for some extra study time to re-study properly and methodically and try to feeel the point of existence of every aspect of CSS. Great material, thank you so much for everything !
I think some of this comes from having to support IE and most tutorials are when we had to do that. Example: Remember using VW's when having to support for IE and early responsive. Stackoverflow for example has a lot of old stuff for CSS, JS, and HTML also. Which is where I guess ChatGPT got most of it's knowledge.
I like the idea of going back to the fundamentals, I have implemented this into my learning something also known as spaced repitition. I also agree that it makes a huge difference even if you feel that you are far beyond that level. From my own experience using inheritance to my advantage allows me to write much simpler CSS and much more maintainable and readable code.
These are some powerful suggestions and tips, thank you! I would just say that it is not only about planning big picture from the beginning, but also MOST of the time taking a step back to reevaluate what we have since code is being constantly added in a process of development ( I don't mean those one page portfolio sites but mid to enterprise lvl applications)
Always the hardest part for sure. Just because something is working, does it mean it was the best way to do it??? Best is if you can find someone who's willing to give feedback, but that can be hard to find 😕
Most problems I see with viewport units come from one of the first things you talk about here - forcing heights. I think there are proper ways to design for the viewport, but the issues go all the way back to when designers laid out websites as if they were 8.5x11" pieces of paper filled with the perfect amount of lorem ipsum. The maxim that made me better at CSS was: if you declare width and height at the same time, you better declare how much content can appear inside.
Mate you don't need clickbait titles. You provide good info. Whoever wants to learn CSS will click this video and watch. Others who clicked cause of clickbait will leave in 10 sec which is bad for CZcams algorithm.
Code review! When I had my first code review, I was already pretty senior but I was also a bit scared. After a while, I’ve come to really appreciate it and even invite it from my junior teammates. It’s a great way to overcome perceptual/inattentional blindness and just learn a bunch of new things.
I do appreciate the work you put into these videos and they sure help me and a lot of developers to improve their skills. But I'd like to bring some awareness to devs' mental health. There are a lot of devs out there suffering from impostor syndrome and other stuff (myself included)... As soon as I saw the notification pop up I thought "shit, I already suck at this and that...." 🥴 I think the community could really use of some positiveness. Maybe titling your video as "Why you could do better at CSS". Thanks mate!
Having recently adopted Astro and components, I see the best practices changing a bit. Although, If I were really hardcore, the holistic view can be applied to one's components. But it takes more work and up front thought to go too far in genericizing one's components.
As to that final note about viewport units, in my experience they do have their place. Don't get me wrong: I wouldn't advocate for a widespread usage of them, but here and there, as long as I test it on all screen sizes, giving something a small viewport unit, particularly small margins on the sides of the screen or something, really can work like that "magic number," exactly what I was looking to do at the time.
It's not that. It's because after over a decade of casual usage and 4 years of professional development I still find out things like vertical-align stretching my buttons (would you thing that align has to do anything with height? I didn't) or body background doing something weird, different than background on other elements. It's such esoteric aspects that make me want to ragequit
I really like these sorts of videos; getting an idea where to minimise duplicating CSS or just condense everything into a simpler fashion whilst getting the same output. I'd probably be super critical of what I write CSS-wise anyway, but it's good to get someone else's perspective on the code you write, like this.
Hey Kevin, thank you for the reminder of all the years of growing pains I went through and still sometimes go through with styling websites lol Today, I find it much easier to create template styling classes to be used all throughout whatever site/app I'm working on. And lately, I have been working on creating template styling variables which is making things even easier. Wish I would have gotten into these habits years ago. Salute !
Another (possibly somewhat contraversal point) - is using BEM really a good idea? If you ask me, BEM classes (e.g. middle-section__left-part), while providing isolation, greatly reduce the usefulness of cascading. I think this comes from the world of imperative programming languages, where modularization is a very useful and reasonable thing to do. On the other hand, in the WYSIWYM world of the web, it is not. I would much rather have simple class names, like "middle" and "left-part", and then use a selector like "section.middle .left-part p", if I want to target specifically this part. This allows me to do a common layout for e.g. ".container .left-part" whereever they appear.
Hi Kevin, I haven't said this enough: I LOVE YOUR WORK. You are so crucial to our learning journey, and we appreciate you so much. This will be my first criticism, and I hope you can take it constructively. The name of this video can stoke a lot of negative feelings to both new developers, but also those who are experienced with CSS. I know that may garner view counts, but I doubt that's your intent. Please consider the title can be very off-putting to some folks.
Before watching this video, I revised the basics of css like selectors etc. Then, I practiced my skills some and I feel like I have more control on writing css now. as you said, going back and understanding fundamentals helped me a lot. I even diagnosed the problems in the css you showed us ! But I realized that I need to study responsive layout, thanks for the video CSS KING !
Speaking of cascading and inheritance. I remember there were frameworks/concepts some time ago explicitly designed NOT to use those two CSS aspects. Weird times ...
This is the very first video of you that i watched right now, and you already got a like and a subscribe. Well done. If i may give you a small feedback: I really missed your code suggestion for number 3. Its always nice to see the way someone deep into it would have done it. Guess i check out your channel now and watch another video 😊
The other two categories of inherited properties apart from typography are: lists and table borders. list-style and list-style-* properties; border-collapse and border-spacing. Of course nested lists and nested tables are really rare, so we generally don't need to think about these.
There's nothing wrong with multiple H1's on a page. Google doesn't ding you for this, although it's important to be used in ways that makes semantic sense for a document. What I would _definitely_ say is a hard *"DON'T EVER DO THIS"* is, multiple H1's within a document section. So for example, you would probably have an H1 for a page's main content, then H1's inside tags, etc. I'm not a big fan of convoluted class names, so I'd personally advocate targeting with existing elements where possible instead of classes, such as "article h1 {...}" instead of "h1.middle_section_teaser {...} ", etc.
I wouldn’t rely to much on using same classes all over the place. Because it’s is way to common issue when you change some class properties for this particular item but when you are about to see result - instead of one thing it changes tones of things on website.
I took a look into the conquering responsive layouts 21 day challenge and i find it awesome.. But there is one problem can u please open all the challenges and lessons so we don't have to wait 21 days to finish it
Trying to set specific 'heights' for elements, at various viewport widths will get you into a lot code maintenance hell. Best to leave the heights alone.... Also using vw units for gaps, margins, paddings is crazy. I didn't even know vw units prevents zooming in/out causing accessibility issues. I used vw with clamp e.g. font-size: clamp(32px, 4vw, 48px); Where the 4vw part is some magic number that needs to be tweaked 😂
A couple of other things that I reckon make me not very good at it (yet) is I keep forgetting stuff and tend to write very chaotic code. I'm working on the second part and hoping that the constant practice will help with the first.
my problem is that when i see a white page and i think “i want to position x in this random place on the screen” i don’t know why. i learned position, flexbox and grid but i feel like it doesn’t allow me to put things anywhere i would want.
Actually, I watch this video because I think that I already have a black belt in CSS and wonder if there's something I might have missed to attain the hidden gold belt in CSS ;-)
I’ve been working on a web app game project, it’s a card game: I need the board to fill up the whole view port I need the whole board visible and not scroll off the screen. It seems this is an ideal use case for dvw and dvh. One other side who does something similar has defined everything using pixels and then transforms it at the end to fit the view port. What would you recommend for an “app” like this as opposed for content sites?
Can you do something fluid responsive design. Last night I was thinking that basically any full-screen background image can be made fully responsive for any screen if sufficiently dynamic proportions and clamp functions are imposed on it. And given a normal ratio, that same css could be applied to any other image. It's a task you only need to figure out once and it applies to all websites.
If you want a background image that isn't pixelated on an ultrawide screen, that image will eat up the RAM on mobile phones (and their internet connection). You should use media queries to suit at least two different dimensions: mobile and desktop.
3:07 In this case it looks like this developer is abusing H1s but its not a problem having multiple H1s per page in HTML5 as long as they're used semantically. For example an archive page might have an H1 "Posts Archive" followed by a list of posts in tags, each containing the H1 for that post. I'd go as far as to say that *not* doing it that way is wrong!
One of the things I've never seen clearly explained, which makes css seem confusing, is the distinction between the cases, when the size of a child influences the size of a parent and when the size of a parent influences the size of a child. One can always find this out for any specific case, by looking into a particular size unit, display value and other relevant properties such as flex-grow, of course. But isn't there any general set of rules, which explains how this all works as a unified system?
Some comments in the video are obvious with hindsight. Those similar sections that could all have been done the same way could well have been coded months apart following additional customer input. Some might review the entire website following any new addition that uses the latest supported CSS options but I suspect that most do not. I am not sure that a customer would want to pay for it, either.
I have learning in css one month but still I have struggling in margin,padding margin auto,then 4 values in padding and margin, then top left. What should I learn your vide o any tips please.animation also
The thing that annoys me about CSS is that there never seems to be one way to do things. Attempting to blend published solutions to problems (like say, setting up a nested hamburger menu) because no single solution you've found does everything needed just seems to lead to disaster. And by the way, why are we still dealing with kludges to make something as common as a hamburger menu work? (Rhetorical question.)
I'm stuck on following your "Responsive navbar tutorial using HTML CSS & JS" because some CSS just isn't working and you post this video... I'm certainly watching it before I go back to banging my head against the wall because background: url() isn't working!
@@KevinPowell Intellisense in VS Code is finishing the paths so it should be valid. The file is there. I've tried full path ../../../assets/img/image.png, I've tried short path /assets/img/image.png, I've tried with quotes, without quotes... nothing is working. If I hover on the image name in DevTools, it shows me the image is there, I just can't seem to see it on the page. I'm sure I'm doing something wrong, I'll just retrace my steps again. Thanks for this video. Reminds me of the quote "Perfection is achieved when there is nothing left to take away." Simplify the solution. The trick is to know how to simplify and I'd say that comes with the experience of making a lot of mistakes. Edit: All path options were fine. My image size was way too large. Shrinking it down worked.
How do you recommend that I practice CSS? I am a beginner and when I look at designs that I want to re-create, I either instantly know how to do it because maybe I've seen something similar in a video or have created something similar, or I just have no idea how to even begin approaching the design. But then I read other people's code for the design and everything makes sense and then it feels like I am just dumb.
People struggle with CSS because it's terribly implemented lanaguage and there are almost no tools that address the issues you discuss. There's almost 0 truly worthwhile design-time tooling to help beginners (or anyone for that matter). Curently the ONLY way to become even mildly proficient at CSS is doing things over and over and over and over and over. Which for CSS is boring AF! Thanks for the video YOU are awesome! More awesomer than CSS! :)
Is there a way to split a list of 200 names coming from a database into multiple dynamic columns using css grid. I can't seem to find any help on this issue. If you can, I'd really appreciate any help.
No, the reason I struggle with CSS is because there seem to be endless options and details and interactions and I don't have a good understanding of the norms and idioms. I can follow a tutorial. I can go and apply a specific solution. I can't look at a problem and have some idea of what usual approach fits it. And none of that accounts for having some idea what kind of layouts I should pick and why before I even start trying to build HTML/CSS/JavaScript. Maybe my problem is a lack of experience, but I don't know how to get that experience without a professional problem, and I don't want to sell my services to someone knowing I'm going to do a crappy job due to lack of experience.
Why you are bad at CSS. ???? ans: It is just because of you(Kelvin Powell). Every time I watched your videos and feel like dude! I know nothing about CSS. How this guy Every time came up with new property and more attracting method!!! ;).
Kevin, I feel your css videos are getting more and more complicated. Can't you go back to some more basic stuff rather than use css functionality just for the sake of it?
Me too. Haven’t even watched the video yet, but it’s Kevin. I know it’s going to be good. Instantly clicking like out of habit
Q
Kevin is awesome 👌
Videos where you go over common mistakes you see with beginners is gold. This is showing the how and why and the traps that devs easily fall into. Keep up the great work dude!
Understanding how useful inheritance can be is so underrated!
An engineer came to my company recently & is responsible for implementing a utility first css framework to be used across dozens of our sites. He has 15+ years of experience doing front end and is definitely not stupid. But in his attempt to make this tailwind-ish utility first system, he reset LITERALLY EVERYTHING on EVERY element using the * selector. Meaning that every single div needs class names to define every part of it’s look. Then, for example if you had a parent and child div, and add a font size on the parent, the child won’t get that font size applied as well, which is so against how CSS is built to work. I pushed back on this decision early on, so we’re probably not going to go with such a heavy handed approach, but this was really disheartening to see that even fairly experienced devs completely disregard the inheritance/the cascade that makes css great. Not tailwind hate, I do enjoy tailwind sometimes.
You would have had to set various font-sizes for every element, coz everything was reset 😂
Even do like the following 😂
.parent {
font-size: 18px;
}
.child {
font-size: inherit;
}
Sounds like a lot of unnecessary work for no reason.
Did you mean UI library, like bootstrap? Because building a whole CSS framework from scratch is useless, no matter how you look at it. It is a lot faster and easier to take existing Tailwind(or Windi, or Uno) and extend it with custom rules for all your needs.
Especially dozens of sites? I understand if it were some specific utilites that do not already exist anywhere(even though 99% of stuff exist in tailwind already), but for it to be reusable on *dozens* of sites it needs to be pretty generic. Very generic. So I can't comprehend why.
So happy to know I'm not the only one frustrated with big project devs trying to Tailwind an enterprise app.
@@dripcaraybbx what's wrong with that? I am not really for or against that, just wanted to ask.
@@twothreeoneoneseventwoonefour5 Giant projects, especially with design teams, need to abstract things semantically and name it a class to reuse, instead of composing all of the styles every time. Tailwind is imperative, so programmers love it. It steps on designers' toes.
Reading a comment that said he begins with "Frontend Friends" has changed my life. I always thought it was Friend and Friends. And now every video I notice something I didn't notice forever. Please tell me it's not just me
It's almost everyone 😅
I don't struggle with CSS per se but where it becomes troublesome (for me anyway) is when I add micro interactions or micro animations these are elements that clients might not consider important but in terms of design and layout they can set my designs apart from my competitors. I'm getting there and keep a web kit for reference! :)
An in-depth look at viewport units would be super helpful! Pros, cons, best usage scenarios (if there are some). I've only dabbled with them here and there, mainly for heights and I've run into issues. Which could very well be me using them completely wrong 🤣.
Came to complain about under-investment in initial design, as well as needing to satisfy naive or unsettled client/management expectations. But mainly the problem is the CSS language, or at least the dev tools. Maintaining a CSS code base is a nightmare: no widely adopted tree-shaking refactoring profiling or effect tracing tools.
Thanks, @Kevin. And I absolutely agree the frameworks are not really helping: sass, scss, css in JS, css modules, web components... They dive deeper into the noise rather than helping us rise above it. Semantic HTML is a revelation; maybe its time for a better descriptive language above/around/about visual/accessible presentation.
CSS is one of those skills where every FE dev I’ve met doesn’t think it needs to be taken seriously because it is so “easy”.
I’m glad I learned from you instead of going with the status quo. I’m pretty much the CSS guru at my job, even the staff engineer and the lead designer lean on my skills, and I’m basically a junior.
I didn't know that's how FE devs saw it. The more I see about CSS the more I'm lovin it and getting into it, especially seeing these videos.
I’m struggling with CSS but I clicked to support 😊
I just realized I've been doing bandaid solutions for years. I have done some crack head type CSS lmao. I'm so happy I found this channel and will be binge watching to improve. Can't wait for the SCSS course
This man is a legend. Getting better at CSS is not a joke. He just explained things just like an artist. Writing quality CSS is an art and how do you get better at art? practice, practice, practice until it gets as your second nature. There is no shortcut
Wow, you have put it in the best elegant way that one possibly could ! Fantastic examples and very inspiring arguments here ! Just a small note albeit no excuse really. I am now 48 and been coding web sites on and off on a semi-professional way (last one I built was in 2007 and I am now back on the roll once again). By watching your videos I have come to realize that CSS is another coding universe on its own and I know strongly question whoever comes to me and claims that "I know CSS too". I think its all coming down to what you are saying, if you 've kept doing 'stuff that just works' all this time what is done is done, we all need to allow for some extra study time to re-study properly and methodically and try to feeel the point of existence of every aspect of CSS. Great material, thank you so much for everything !
I like how you investigate and dig into those small but troublesome details.
I don't struggle with css and don't get anxiety attacks 😂. Just enjoy watching your videos.
In the strategy gaming world we call what you did 'saving disaster savegames'. More of this please.
That could be a fun type of tutorial exercise, huh? Here's a disaster page, here's the original design...fix it!
@@bumbleguppy absolutely, those are my thoughts exactly
I think a good topic for a video would be to how to think when breaking down a layout, from an image file, into workable (and repeatable) CSS.
I think some of this comes from having to support IE and most tutorials are when we had to do that.
Example: Remember using VW's when having to support for IE and early responsive.
Stackoverflow for example has a lot of old stuff for CSS, JS, and HTML also. Which is where I guess ChatGPT got most of it's knowledge.
thanks to YOU mainly I'm not struggling with css ...I just can't miss any of your videos!!! Much Love!!!
I like the idea of going back to the fundamentals, I have implemented this into my learning something also known as spaced repitition. I also agree that it makes a huge difference even if you feel that you are far beyond that level. From my own experience using inheritance to my advantage allows me to write much simpler CSS and much more maintainable and readable code.
These are some powerful suggestions and tips, thank you! I would just say that it is not only about planning big picture from the beginning, but also MOST of the time taking a step back to reevaluate what we have since code is being constantly added in a process of development ( I don't mean those one page portfolio sites but mid to enterprise lvl applications)
My biggest issue is that i often don't know if my code is right how can i make sure that im on the right path
Always the hardest part for sure. Just because something is working, does it mean it was the best way to do it??? Best is if you can find someone who's willing to give feedback, but that can be hard to find 😕
5:25 SASS mixins ♥
Most problems I see with viewport units come from one of the first things you talk about here - forcing heights. I think there are proper ways to design for the viewport, but the issues go all the way back to when designers laid out websites as if they were 8.5x11" pieces of paper filled with the perfect amount of lorem ipsum. The maxim that made me better at CSS was: if you declare width and height at the same time, you better declare how much content can appear inside.
Your videos has really help my career in tech........ thanks 👍
CSS is a nightmare even as a senior dev.
There’s a reason why most companies don’t use “vanilla css” and use a framework or other tools instead.
Thank you. Extremally valuable as usual.
☺
Mate you don't need clickbait titles. You provide good info. Whoever wants to learn CSS will click this video and watch. Others who clicked cause of clickbait will leave in 10 sec which is bad for CZcams algorithm.
Code review! When I had my first code review, I was already pretty senior but I was also a bit scared. After a while, I’ve come to really appreciate it and even invite it from my junior teammates. It’s a great way to overcome perceptual/inattentional blindness and just learn a bunch of new things.
I do appreciate the work you put into these videos and they sure help me and a lot of developers to improve their skills.
But I'd like to bring some awareness to devs' mental health. There are a lot of devs out there suffering from impostor syndrome and other stuff (myself included)... As soon as I saw the notification pop up I thought "shit, I already suck at this and that...." 🥴
I think the community could really use of some positiveness. Maybe titling your video as "Why you could do better at CSS".
Thanks mate!
Having recently adopted Astro and components, I see the best practices changing a bit. Although, If I were really hardcore, the holistic view can be applied to one's components. But it takes more work and up front thought to go too far in genericizing one's components.
i learned alot from ur old video and take ur advices thnx for everything
Wow kevin you have over 700k subs now Congrats 👏. I remember watching your stuff when you were at 130. Keep up the good work.
As to that final note about viewport units, in my experience they do have their place. Don't get me wrong: I wouldn't advocate for a widespread usage of them, but here and there, as long as I test it on all screen sizes, giving something a small viewport unit, particularly small margins on the sides of the screen or something, really can work like that "magic number," exactly what I was looking to do at the time.
Solid tips as always ❤️ We really should embrace defaults more. It's good for a11y. I hope UI designers make that move as well.
hi kevin, sorry for my english, tell me about the pinegrow application.
It's not that. It's because after over a decade of casual usage and 4 years of professional development I still find out things like vertical-align stretching my buttons (would you thing that align has to do anything with height? I didn't) or body background doing something weird, different than background on other elements. It's such esoteric aspects that make me want to ragequit
I really like these sorts of videos; getting an idea where to minimise duplicating CSS or just condense everything into a simpler fashion whilst getting the same output.
I'd probably be super critical of what I write CSS-wise anyway, but it's good to get someone else's perspective on the code you write, like this.
Hey Kevin, thank you for the reminder of all the years of growing pains I went through and still sometimes go through with styling websites lol Today, I find it much easier to create template styling classes to be used all throughout whatever site/app I'm working on. And lately, I have been working on creating template styling variables which is making things even easier. Wish I would have gotten into these habits years ago. Salute !
Another (possibly somewhat contraversal point) - is using BEM really a good idea? If you ask me, BEM classes (e.g. middle-section__left-part), while providing isolation, greatly reduce the usefulness of cascading. I think this comes from the world of imperative programming languages, where modularization is a very useful and reasonable thing to do. On the other hand, in the WYSIWYM world of the web, it is not.
I would much rather have simple class names, like "middle" and "left-part", and then use a selector like "section.middle .left-part p", if I want to target specifically this part. This allows me to do a common layout for e.g. ".container .left-part" whereever they appear.
Videos on TailwindCSS would be highly appreciated
Hi Kevin,
I haven't said this enough: I LOVE YOUR WORK. You are so crucial to our learning journey, and we appreciate you so much.
This will be my first criticism, and I hope you can take it constructively. The name of this video can stoke a lot of negative feelings to both new developers, but also those who are experienced with CSS. I know that may garner view counts, but I doubt that's your intent. Please consider the title can be very off-putting to some folks.
Hey man
I write plain CSS without using any CSS frameworks. I'm wondering if I'm doing this right.
I get comfortable writing CSS pure.
No framework is the best framework 😅
@@KevinPowellThanks man.
Before watching this video, I revised the basics of css like selectors etc. Then, I practiced my skills some and I feel like I have more control on writing css now. as you said, going back and understanding fundamentals helped me a lot. I even diagnosed the problems in the css you showed us ! But I realized that I need to study responsive layout, thanks for the video CSS KING !
Thats why i am choosing tailwind css to write full responsive websites.
Does it have magical button "make responsive"?
@@amy_lio not a magic one.
Speaking of cascading and inheritance. I remember there were frameworks/concepts some time ago explicitly designed NOT to use those two CSS aspects. Weird times ...
This is the very first video of you that i watched right now, and you already got a like and a subscribe. Well done.
If i may give you a small feedback: I really missed your code suggestion for number 3. Its always nice to see the way someone deep into it would have done it.
Guess i check out your channel now and watch another video 😊
As a full-stack dev that definitely glossed over CSS, I really appreciate these videos.
The other two categories of inherited properties apart from typography are: lists and table borders. list-style and list-style-* properties; border-collapse and border-spacing. Of course nested lists and nested tables are really rare, so we generally don't need to think about these.
Thank you, Kevin! Mega valuable for me to get a better grasp at CSS for sure :D
I clicked on it because it’s Kevin. Pretty much the only reason
i struggle right now after learning a little i am lost 😢 wish me luck starting over and trying to improve
I'd love to see a video of your thoughts on tailwind
I get why people like it, but it's not for me 🙂
this is the ultimate question. the answer is probably I'm just suck at making things beautiful
Improvinng css, and you find you are lacking with problem solving skills. My god, will this pain ever go away😢
There's nothing wrong with multiple H1's on a page. Google doesn't ding you for this, although it's important to be used in ways that makes semantic sense for a document. What I would _definitely_ say is a hard *"DON'T EVER DO THIS"* is, multiple H1's within a document section. So for example, you would probably have an H1 for a page's main content, then H1's inside tags, etc. I'm not a big fan of convoluted class names, so I'd personally advocate targeting with existing elements where possible instead of classes, such as "article h1 {...}" instead of "h1.middle_section_teaser {...} ", etc.
I wouldn’t rely to much on using same classes all over the place. Because it’s is way to common issue when you change some class properties for this particular item but when you are about to see result - instead of one thing it changes tones of things on website.
@ᴋᴇᴠɪɴ ᴘᴏᴡᴇʟʟAnd why would anyone fall for this scam?
Thank you.
i wish there was a javascript 21 days challenge out there
This is the best!!!
I took a look into the conquering responsive layouts 21 day challenge and i find it awesome.. But there is one problem can u please open all the challenges and lessons so we don't have to wait 21 days to finish it
Trying to set specific 'heights' for elements, at various viewport widths will get you into a lot code maintenance hell. Best to leave the heights alone....
Also using vw units for gaps, margins, paddings is crazy. I didn't even know vw units prevents zooming in/out causing accessibility issues.
I used vw with clamp e.g. font-size: clamp(32px, 4vw, 48px);
Where the 4vw part is some magic number that needs to be tweaked 😂
A couple of other things that I reckon make me not very good at it (yet) is I keep forgetting stuff and tend to write very chaotic code. I'm working on the second part and hoping that the constant practice will help with the first.
my problem is that when i see a white page and i think “i want to position x in this random place on the screen” i don’t know why. i learned position, flexbox and grid but i feel like it doesn’t allow me to put things anywhere i would want.
Hoping there's a video on the issues with viewport units...Maybe in the style of Jerry Seinfeld , "What's the deal with viewport units?"
Actually, I watch this video because I think that I already have a black belt in CSS and wonder if there's something I might have missed to attain the hidden gold belt in CSS ;-)
I’ve been working on a web app game project, it’s a card game:
I need the board to fill up the whole view port
I need the whole board visible and not scroll off the screen.
It seems this is an ideal use case for dvw and dvh. One other side who does something similar has defined everything using pixels and then transforms it at the end to fit the view port. What would you recommend for an “app” like this as opposed for content sites?
Can you do something fluid responsive design. Last night I was thinking that basically any full-screen background image can be made fully responsive for any screen if sufficiently dynamic proportions and clamp functions are imposed on it. And given a normal ratio, that same css could be applied to any other image. It's a task you only need to figure out once and it applies to all websites.
If you want a background image that isn't pixelated on an ultrawide screen, that image will eat up the RAM on mobile phones (and their internet connection). You should use media queries to suit at least two different dimensions: mobile and desktop.
3:07 In this case it looks like this developer is abusing H1s but its not a problem having multiple H1s per page in HTML5 as long as they're used semantically. For example an archive page might have an H1 "Posts Archive" followed by a list of posts in tags, each containing the H1 for that post. I'd go as far as to say that *not* doing it that way is wrong!
One of the things I've never seen clearly explained, which makes css seem confusing, is the distinction between the cases, when the size of a child influences the size of a parent and when the size of a parent influences the size of a child.
One can always find this out for any specific case, by looking into a particular size unit, display value and other relevant properties such as flex-grow, of course. But isn't there any general set of rules, which explains how this all works as a unified system?
Some comments in the video are obvious with hindsight. Those similar sections that could all have been done the same way could well have been coded months apart following additional customer input. Some might review the entire website following any new addition that uses the latest supported CSS options but I suspect that most do not. I am not sure that a customer would want to pay for it, either.
Sir Have a nice day 😀🤗😊🤗😊
I have learning in css one month but still I have struggling in margin,padding margin auto,then 4 values in padding and margin, then top left. What should I learn your vide o any tips please.animation also
@KevinPowell- thank you sir
I think sometimes people forget of code reusability in CSS
The thing that annoys me about CSS is that there never seems to be one way to do things. Attempting to blend published solutions to problems (like say, setting up a nested hamburger menu) because no single solution you've found does everything needed just seems to lead to disaster.
And by the way, why are we still dealing with kludges to make something as common as a hamburger menu work? (Rhetorical question.)
I'm stuck on following your "Responsive navbar tutorial using HTML CSS & JS" because some CSS just isn't working and you post this video... I'm certainly watching it before I go back to banging my head against the wall because background: url() isn't working!
Probably something to do with the path to the image?
@@KevinPowell Intellisense in VS Code is finishing the paths so it should be valid. The file is there. I've tried full path ../../../assets/img/image.png, I've tried short path /assets/img/image.png, I've tried with quotes, without quotes... nothing is working. If I hover on the image name in DevTools, it shows me the image is there, I just can't seem to see it on the page.
I'm sure I'm doing something wrong, I'll just retrace my steps again.
Thanks for this video. Reminds me of the quote "Perfection is achieved when there is nothing left to take away." Simplify the solution. The trick is to know how to simplify and I'd say that comes with the experience of making a lot of mistakes.
Edit: All path options were fine. My image size was way too large. Shrinking it down worked.
Great content like always
Hey Kevin, so you recommend not to using Tailwind right? Pure css is best right?
Wellp, yes by kevin
The most wholesome emotional damage that I have ever take. Thanks again for the great video
Hello!
Can you please guide "active" navigation using only css? and do not use subpages!
I clicked this video cos you're one of the best and so I'm always happy hear and see what you have to tell us
How do you recommend that I practice CSS? I am a beginner and when I look at designs that I want to re-create, I either instantly know how to do it because maybe I've seen something similar in a video or have created something similar, or I just have no idea how to even begin approaching the design. But then I read other people's code for the design and everything makes sense and then it feels like I am just dumb.
Where do u find those designs?
Try answer [css] topics on Stack Overflow. That's what I use to iterate my knowledge, and learn from other solutions.
@@souloftradition5555 websites like frontend mentor and such, sometimes I even try to copy designs from my peers or my seniors at Uni.
Is it better to finish my html first before proceeding with css ?
Do u have any course? Which we can opt for?
A couple linked at the top of the description, and of you scroll down a bit, there's a link to a page with all my courses 🙂
@@KevinPowell thank you
People struggle with CSS because it's terribly implemented lanaguage and there are almost no tools that address the issues you discuss. There's almost 0 truly worthwhile design-time tooling to help beginners (or anyone for that matter). Curently the ONLY way to become even mildly proficient at CSS is doing things over and over and over and over and over. Which for CSS is boring AF!
Thanks for the video YOU are awesome! More awesomer than CSS! :)
more videos like this 😁really learned alot
Is there a way to split a list of 200 names coming from a database into multiple dynamic columns using css grid. I can't seem to find any help on this issue. If you can, I'd really appreciate any help.
Is clickbait really a must to survive on this platform? Kevin, sir, you too? Why am I bad at CSS? Am I?
00:08 because i love you videos. And i am bad at all Web-Stuff. ;)
As a beginner I recommend Frontend Mentor :)
No, the reason I struggle with CSS is because there seem to be endless options and details and interactions and I don't have a good understanding of the norms and idioms. I can follow a tutorial. I can go and apply a specific solution. I can't look at a problem and have some idea of what usual approach fits it. And none of that accounts for having some idea what kind of layouts I should pick and why before I even start trying to build HTML/CSS/JavaScript. Maybe my problem is a lack of experience, but I don't know how to get that experience without a professional problem, and I don't want to sell my services to someone knowing I'm going to do a crappy job due to lack of experience.
Free course link not working please
My name is Gary, and I'm an over-coder...
"I'm sure you clicked on this video for a specific reason"
Yes, I am bad at CSS
I am not bad in css, I am bad in writing clean css.
Thats crazy because my name is omer moshe too😂
Why you are bad at CSS. ????
ans: It is just because of you(Kelvin Powell). Every time I watched your videos and feel like dude! I know nothing about CSS. How this guy Every time came up with new property and more attracting method!!! ;).
I feel attacked haha
Gonna be a long video.
Go simple. Go find the simplest solution out there.
Kevin, I feel your css videos are getting more and more complicated. Can't you go back to some more basic stuff rather than use css functionality just for the sake of it?
Why is he always say "hello friend and friends"? I don't get it.