You are the only person on the internet who uses the best practices for pretty much everything in CSS. It's really inspired me to write good CSS. Thanks Kevin
haven't used CSS for years, was a huge web developer and designer when html5 just came out, this video was recommended so I checked it out, man, CSS is so advanced, it's almost a programming language I mean this is crazy, makes me wanna go back to develop websites.
Man, thanks for this! The margin shorthand overwriting other margins is an issue I've had so many times. Always ended up having to scroll through my scss files to find the issue... The margin-inline will save so much time!
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
I know first hand the problems having these languages can create when writing code. Logical properties will certainly help me going forward. keep up the excellent work, as always :-)
I only recently discovered this channel and I am loving it. For a decade now I had to use a CMS that restricts most of my attempts to use CSS (and almost all of HTML). For that reason I am pretty unfamiliar with recent trends and now I feel like I am re-learning CSS thanks to your channel. I hate to nitpick on my very first comment here, but at 18:42 you used margin-block-end: 1rem; to separate the sections, however margin-bottom would have been appropriate here, since if you look at the Japanese section, the margin was applied on the left instead of at the bottom. If there was a section after that there would have been no separation.
I consider myself an og css pro, but this made me realize how much useful newer css is around that I’m not really familiar with because of having old IE support requirements for so damn long.
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
That is the coolest intro to any video I have watched, :) :), "Hello my friend and friends", its so css (Cool Sounding Stuff), Thanks for the video, very helpful
THis is amazing content! Thanks for sharing! Can't wait for these logical properties to come to all the browsers. I've definitely faced the issue you mentioned with margin: 0 auto; So using the solution you suggested will make things much simpler and cleaner. Thanks again!
as usual and like many here, i cant thanks you enough for all your work and video in general with css. I always learn so much with you, so i always write better and cleaner css ( so with a correct though process ) ! I which there could be a "Kevin Powel" for every language xD
🤯 wow awesome, I feel like I now nothing about CSS after watching this. I'm totally going to check out all your CSS videos after holiday mode 👀 🧠✨ thnx for sharing, love your content so far!
Hi Kevin, I started learning frontend web development recently and your CSS videos are so informative. Can you help me understand why doing some stuff in CSS is better when we have javascript or bootstrap and many other options which are capable of doing the same work.
15:56 should probably be margin-block-start instead of margin-top, I think. If you don't understand the utility of these logical properties outside of writing modes, then you've missed out on a lot.
Tou one of the best who learn us good and best coding and I hope one day meet you ❤ I need you make video about js I learn and learn js and still stick in it . I don't know what I do or what I use with js can you help me . Sorry for my English 😀😣
Thank you very much, Kevin. So helpful. May I trouble you a bit more, please. So sorry to, please. My website html tag Language attribute is like this: . When I use logical properties in CSS, how does the page know the User's writing mode? Whether ltr, rtl, vertical-rtl, etc?
I'm currently working on hebrew site template(rtl direction), which later will be used for more sites, which will be with ltr direction. But sadly I cant use all these cool features, because the client wants to support IE11(and IE11 doesnt support all this cool stuff), so me and my coleague have to make the site the hard way. We have two classess for both directions and we have to manage margin, padding, positioning and everyth for every direction. It would be so much easier if we could use these new and cool direction props, but sadly we cant. Anyway great video!
Any way you can convince them not to bother with ie11? I understand for some, they still have users on it, but some want support for the sake of it, without even knowing how many users are on it.
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
Hello Kevin, how are you doing Since these properties are flow relative, don't you think that calling them relative properties rather than logical will be more justifiable?
TBH just discovering locical properties, but is there any other scenario besides text-direction, in which they are really neccessary and better than the old ones?
@13:54 the japanese section is appearing to be (inline) wider than the other two. Look at the red border and you'll see that it's not aligned with the section edge like the rest. Why is that?
Taiwanese keeps much ancient Chinese culture and usage. But it has been hardly written in words due to words & meaning lost in past centuries. Most of people were illiteracy in long tern so that inheritance became so difficult surely. Still thanks for mention our language😘
google translate has gone a long way, hasn't it? my native language is russian and google translate translates it almost flawlessly! compared to google translate from like 2014-2015 when it was atrocious, it did come a long way
Edge does. If Chrome supports something, so does Edge. If ever a compatibility chart says it doesn't, it's out of date or a bit behind. IE on the other hand...
Hey Kevin, can I plz ask you whoch VSCODE theme and font you use. i really like the theme and font.I know this is Codepen but in previous videos I have seen you using. SO plz tell.
*Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
Hello I just discovered your channel few days ago and its been amazing. 1 thing I would love to see you do is how to edit scroll bars with css only. Like if you put overflow-y: scroll. How do you modify the scroll bar that pops up in all browsers especially Firefox.
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
@@KevinPowell Ahhh, the old vertical monitor trick! Nice. Have you tried 4 screen yet? That's my dream set-up for design and dev. btw, keep up the good work. I've been doing this for 21yrs and cant keep up with it all, so your my 'New CSS specs how-to' guy, ha! No pressure!!!
Width: 70%; /normal way to set width/ But for right to left how to set width i used margin-left:30%; Is there any other ways to set width in direction rtl.... ????
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
I have zero interest in building sites in any other languages, apart from English. So I was put off from watching this video. Do logical properties etc apply to purely English websites?
@@KevinPowell haha, I meant that I have to overwrite eg. flex-direction: row with row-reverse, because caniuse says that justify-content: start or end support is not that good yet :D
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
Glad that you're enthusiastic and getting in early, but I keep the pinned comments for corrections to something in a video, or other things like that :)
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
You are the only person on the internet who uses the best practices for pretty much everything in CSS. It's really inspired me to write good CSS. Thanks Kevin
I'm loving CSS because of him
Same !
Bro, I'm from Medellín, CO, and your content is helpul AF, incredibly the way you use to make CSS so understable.
haven't used CSS for years, was a huge web developer and designer when html5 just came out, this video was recommended so I checked it out, man, CSS is so advanced, it's almost a programming language I mean this is crazy, makes me wanna go back to develop websites.
You should check out things like calc(), min(), max(), and clamp() of you really want your mind blown 😊
Man, thanks for this! The margin shorthand overwriting other margins is an issue I've had so many times. Always ended up having to scroll through my scss files to find the issue... The margin-inline will save so much time!
Yeah, same here, really happy we have this now!
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
* It is my first time to see Arabic text.
The way to write the Arabic language, the shapes of fonts and letters is really awesome
If TH-cam allows me, I'd like your videos thousand times!!
Great job man, you're a life saver.
Thank you so much
I know first hand the problems having these languages can create when writing code. Logical properties will certainly help me going forward. keep up the excellent work, as always :-)
I only recently discovered this channel and I am loving it. For a decade now I had to use a CMS that restricts most of my attempts to use CSS (and almost all of HTML). For that reason I am pretty unfamiliar with recent trends and now I feel like I am re-learning CSS thanks to your channel.
I hate to nitpick on my very first comment here, but at 18:42 you used margin-block-end: 1rem; to separate the sections, however margin-bottom would have been appropriate here, since if you look at the Japanese section, the margin was applied on the left instead of at the bottom. If there was a section after that there would have been no separation.
Please continue with your good energy and vibes and never stop to drop those amazings classes. Thank you for real
I consider myself an og css pro, but this made me realize how much useful newer css is around that I’m not really familiar with because of having old IE support requirements for so damn long.
You’re in good company. ;-)
Same! It's such a relief that that need is getting smaller and smaller.
One of the most important CSS videos I've ever seen. Thank you!!!!!
I don't comment videos often but this one's just a diamond! Thank you for your work.
So glad that you enjoyed it!
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
This channel is legit gold mine.
That is the coolest intro to any video I have watched, :) :), "Hello my friend and friends", its so css (Cool Sounding Stuff), Thanks for the video, very helpful
My the Best teacher thanks. İ learn a lot of things from you. Also free))😊😊
I swear I was just looking for direction properties, THANK YOU SO MUCH
This is one of the most fruitful 20 mins of my life.
So glad that you enjoyed it
THis is amazing content! Thanks for sharing! Can't wait for these logical properties to come to all the browsers. I've definitely faced the issue you mentioned with margin: 0 auto;
So using the solution you suggested will make things much simpler and cleaner.
Thanks again!
You're a great teacher love your videos!
Super awesome Kevin, thanks
I like the new directions you took with this video Kevin 😏
Thank you . I really appreciate and respect the way you explain things.
as usual and like many here, i cant thanks you enough for all your work and video in general with css. I always learn so much with you, so i always write better and cleaner css ( so with a correct though process ) !
I which there could be a "Kevin Powel" for every language xD
You are my inspiration 😊
Awesome Kevin ♥️
Immense quality for, like, a millionth time! #tonsOfRespect
🤯 wow awesome, I feel like I now nothing about CSS after watching this. I'm totally going to check out all your CSS videos after holiday mode 👀 🧠✨
thnx for sharing, love your content so far!
FYI the technical term for the "dialects" like US vs UK English is _locale._
Wow, you helped me saving a lot of time, thanks a lot.
OMG, This save my life. Thank you King CSS
Great content...I'm learning a lot from this channel
Once again Thank you Kevin.
Kevin Your Website got into Gary Simon's latest Video
Hi Kevin, I started learning frontend web development recently and your CSS videos are so informative. Can you help me understand why doing some stuff in CSS is better when we have javascript or bootstrap and many other options which are capable of doing the same work.
superb video! very well explained
Please make a video about CSS counters.
Wonderful trick bro...Love you man❤❤
Thank you so much, every video is a treasure
15:56 should probably be margin-block-start instead of margin-top, I think. If you don't understand the utility of these logical properties outside of writing modes, then you've missed out on a lot.
uhh man, You are amazing ! 💜
your efforts just make me like your video before watching it😊
Tou one of the best who learn us good and best coding and I hope one day meet you ❤
I need you make video about js I learn and learn js and still stick in it .
I don't know what I do or what I use with js can you help me . Sorry for my English 😀😣
Thank you very much, Kevin.
So helpful.
May I trouble you a bit more, please. So sorry to, please.
My website html tag Language attribute is like this: .
When I use logical properties in CSS, how does the page know the User's writing mode? Whether ltr, rtl, vertical-rtl, etc?
I'm currently working on hebrew site template(rtl direction), which later will be used for more sites, which will be with ltr direction. But sadly I cant use all these cool features, because the client wants to support IE11(and IE11 doesnt support all this cool stuff), so me and my coleague have to make the site the hard way. We have two classess for both directions and we have to manage margin, padding, positioning and everyth for every direction. It would be so much easier if we could use these new and cool direction props, but sadly we cant. Anyway great video!
Any way you can convince them not to bother with ie11? I understand for some, they still have users on it, but some want support for the sake of it, without even knowing how many users are on it.
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
this is a game changer
Hello Kevin, how are you doing
Since these properties are flow relative, don't you think that calling them relative properties rather than logical will be more justifiable?
super interesting mighty stuff
TBH just discovering locical properties, but is there any other scenario besides text-direction, in which they are really neccessary and better than the old ones?
Please provide some context WHY, when you make a declarative statement like "dont/always do this"
Really awesome
@13:54 the japanese section is appearing to be (inline) wider than the other two. Look at the red border and you'll see that it's not aligned with the section edge like the rest. Why is that?
Taiwanese keeps much ancient Chinese culture and usage. But it has been hardly written in words due to words & meaning lost in past centuries. Most of people were illiteracy in long tern so that inheritance became so difficult surely. Still thanks for mention our language😘
The Arabic was not bad for a auto translation. Great video, keep it up.
google translate has gone a long way, hasn't it? my native language is russian and google translate translates it almost flawlessly! compared to google translate from like 2014-2015 when it was atrocious, it did come a long way
@@Kitulous very true, I have seen that Google translate can produce really great results if you write the first language grammatically correct.
5:19 Shout out from Taiwan!!
margin, padding, border-inline and block are so cool, but so sad that Edge have not support it yet
Edge does. If Chrome supports something, so does Edge. If ever a compatibility chart says it doesn't, it's out of date or a bit behind.
IE on the other hand...
@@KevinPowell ohh thanks. I think I will use this more often.
Hey Kevin, can I plz ask you whoch VSCODE theme and font you use. i really like the theme and font.I know this is Codepen but in previous videos I have seen you using. SO plz tell.
Atom One Dark
It's Atom One Dark :)
*Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
Awesome 😀
You're a god🙏
Me before watching : heh css ..
After watching : *imposter syndrome anxiety kicks in*
Heh, I know the feeling! imposter syndrome gets us all :)
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
Hello I just discovered your channel few days ago and its been amazing. 1 thing I would love to see you do is how to edit scroll bars with css only. Like if you put overflow-y: scroll. How do you modify the scroll bar that pops up in all browsers especially Firefox.
Firefox has pretty limited styling for scrollbars, but yeah, I probab6 should do a video on that
@@KevinPowellThanks alot! Will be on the look for it
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
What's your monitor set-up? That's looking large!
The one you can see when I'm talking at the intro is a vertical, 24" screen I have to my left. In front of me, I have a 27" screen :)
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
@@KevinPowell Ahhh, the old vertical monitor trick! Nice. Have you tried 4 screen yet? That's my dream set-up for design and dev.
btw, keep up the good work. I've been doing this for 21yrs and cant keep up with it all, so your my 'New CSS specs how-to' guy, ha! No pressure!!!
Width: 70%; /normal way to set width/
But for right to left how to set width i used
margin-left:30%;
Is there any other ways to set width in direction rtl.... ????
Width should work fine? In my example everything goes to the left, but if the html had dir="rtl" they would have lined up on the right side instead.
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
good one
How about background-position? no logical values supported 😭
What's the browser support for these features? would be nice to know what these are when discussing/showcasing them.
Supported in all modern browsers. I only mention browser support when there are issues with it, like I did with the floats 😊
I just discovered these early this week but didn't have idea how were they called
I can use it on my Chrome on my macOS Big Sure too :D I think this works since months :P
Someone kindly direct me to Kevin's video where he talks about padding-inline, border-inline, etc.
Pretty cool, but man I need a dictionary these days to look up CSS properties lol wish they would get rid of the old ones we no longer use....
You are the best
Brilliant
I have zero interest in building sites in any other languages, apart from English.
So I was put off from watching this video.
Do logical properties etc apply to purely English websites?
margin-inline: ♥;
i read all these properties in docs and thought why it exists,
now i know😂🤦
But... we still should do stuff like 8:50 with flex, right?
Anyway its a great video, I will definitely share it :D
Using flex for the border?
@@KevinPowell haha, I meant that I have to overwrite eg. flex-direction: row with row-reverse, because caniuse says that justify-content: start or end support is not that good yet :D
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
amazing
Word on your tShirt speaks about what you are in css
very interesting wohoo
This is nice, but I think it's in everyone's best interest if I just stick to English
Japanese newspapers use vertical-rl.
Kevin is not the king of CSS.... he is the GOD of CSS!!!
Browser compatibility, uhm.
It's pretty good for all of these other than the float one
Maybe the thumbnail was made with css? who knows 🤷♂️
Kevin, enough bs.
Let's have one on video background web pages.
I've done it already th-cam.com/video/RIDA6elhmBU/w-d-xo.html
4th but can u pin now plz
Glad that you're enthusiastic and getting in early, but I keep the pinned comments for corrections to something in a video, or other things like that :)
@@KevinPowell :( First Time i Am watching u more then 3 months
@@KevinPowell *Can you please make a video building clone of image slider on **rog.asus.com**, because that looks pretty aweeome ? I tried but I was not able to make that progress bar in the slider. So please help me sir.*
4th comment