Which of those features are your favorites, which did you already knew or which one’s are definitely missing here? 🧐 I would love to get your take on this ranking! 😉🔥
Speed, pace, way of telling, simplicity and easy to understand - if those were the categories to rate this video then I will rate 100 out of 10...! You just lighten up the areas where I was afraid of going due to darkness... Thanks 🙏
Found these extremely useful: Top set vertical or horizontal spacing Before: margin: 10px 0; Now: margin-block: 10px; first qualifier can be replaced with padding, border as well To set variable width/height till a threshold value is reached Before: width: 70%; max-width: 500px; Now: width: min(70%, 500px)
Industry practice or best practice. 1. Best practice for body copy in responsive design. 2. Best practice for header and footer. 3. Best practice for components like cards etc. a complete guide would be great. I think you have the deep knowledge. You could help millions of UI designers.
i was first offended by the code monkey remark ,then i was like yeah that is what is actually happening (especially at a junior dev level) , touché lukas touché
Really great video, Lukas! It would be even better if you have a better mic as the vox come through kind of echoey/tinny. Content is excellent, however - keep it up!
Thank you, I really appreciate your feedback! Happy to hear that you like it. Sorry for that, but if you check out my latest videos, you'll recognize that I'm having a mic now... 😉 (still need to figure out the best settings and stuff, but it will get better with every new video.)
Oh my God, I simply didn't know the scroll-snap, I already need to use this but I didn't know how, this is amazing, every day being impressioned by the amazing features of CSS
Nice video. Thanks! Regarding the logical properties, there are also the "-start" and "-end" suffixes. Also the logic properties relative to the selected language on the page that is an awesome feature for those who care about many translations.
The reading direction is the reason for those properties, there’s nothing “logical” about them. I don’t know where he got this naming from. In general you should use them instead of left, right, top and bottom always, they are straight up modern substitutes. The older ones only still exist for backwards compatibility.
Nice list! But I would want to caution people when using -inline and -block, for example margin-inline. The reason for that caution is that the semantics are slightly different than using margin-left and margin-right. If you write margin-left, the margin will always be on the left side regardless of writing mode (left-to-right, right-to-left, top-to-bottom or bottom-to-top), but with margin-inline, which is a shorthand for margin-inline-start and margin-inline-end, writing mode is taken into account, so in a right-to-left display language, the margin you intended to be on the left side will now be on the right side, which might not be what you intended.
That’s actually makes margin-inline even more useful, you will not have to update the styles when switching from ltr to rtl languages: in most cases it requires to flip the website horizontally, and if you use margin-inline, all you have to do is just change “direction” property. But if you specify different margin values for left and right, you’ll have to override them as well.
@@AlexanderKontsevoy I agree, and that is why these properties were added. And that's why it's important to know what your intent is. If your intent is to have a margin in the beginning of the text (regardless of text direction), you should use -inline. But if your intent is to always have the margin on the left side regardless of text direction, you should use -left. It all depends on the situation. So my comment was not to say that -inline isn't useful; it was to alert people to the slight difference of semantics so they won't be surprised if that thing that should always have a left margin suddenly has its margin on the right for e.g. Arabic readers. But I agree with you, if only applied to paragraphs, figures and such, -inline is very nice to not have to override everything all the time.
I understand wanting to raise this difference, though I think it's important to make developers more aware about different writing modes/accessibility in general so they can develop and design for them without accessibility seeming like this daunting arcane task
I'm new to coding and this is really helpful. I always do some things manually like the position of the context but now here I found there's and easier way to do it.
I subscribed to your channel and will always support you. Your video is amazing! CSS is very advanced. I would like you to post more videos related to CSS for better designing. May be a video for best practices. Thanks.
Starting webdev here. Learned a lot from this video. Perhaps the biggest one of all is one you showed without mentioning: box-sizing: border-box. That one is going to make my life a lot easier! Thanks!
As many others have said: very nice video. Those section title cards, though... let them hang out for a couple of seconds! There is neither time to read them nor time to pause if you care to read them. But again, great content and keep it up!
thanks man, i hope one day i become as good at css as you or kevin powell, i have always hated css and focused at other things but im in a situation that i have to learn it, and since i started to get deeper and deeper at css i started to actually like it
Never rlly realized till now that am missing out alot on easier code writing. Ive been using notepads to qrite codes 😂. Vscode seems alot easier to use
Yes, you should definitely start to use VS Code instead of Notepad! 😂 You can download it for free and it will make everything easier. PS:I have a video about the top 5 Extensions in VS Code - that should be also very helpful for you, make sure to check that out. 😉
Hey. I’m a web developer with a solid experience. And I did like this short and condensed review of new features. Thank you. The only thing I would ask to add to similar videos in the future Is the compatibility limitations to be aware about. That was a huge throwback for me when people already used flex box but it was not supported by “favourite” IE, so I could not use it or make a fallback extra. I’m asking this because of the prefixed CSS you used and it is obvious that it is not a standard yet :) Anyways thanks, and subscribing to be updated with your videos.
You're very welcome, I'm glad you like it and thanks for subscribing! 😉 Good point, thanks for mentioning - I'll keep that in mind. 👍 (But if I'm not mistaken, all the features of this video are already fully supported by every major browser - except for :has(), but I mentioned that in the video ...)
Amazing vedio can u just make one vedio in which you can give some tips and tricks which u have learnd from you experience to make site responsible.. and how with a cord or think in a way that we can make responsive with less code
Thank you for your feedback, I really appreciate it! 😉 I am currently working on a video about Responsive Design with Tailwind CSS, maybe this is also helpful for you... Anyways thanks for your suggestions, I'll see what I can do. ✌
12:20 there is still another way to write it.. since css goes from top to bottom you could simply override what was set before. In this example I would rather write p { padding: 12px; padding-left: 8px; padding-right: 8px; } the first line is the base rule, the others are the exceptions.
@@harag9 In this case it works but 1) this is also mentioned in the video at 12:20 2) what if only 1 value is off and the rest is not? You can put every setting in one line of code in simple terms of minification. But he showed alternative ways of doing this and I just wanted to add that there is another way (mentioned above)
Рік тому+2
Maybe you should add that it's always better to also add the non-prefixed version as well.
If you want to make a animation for a div, then @keyframes demo (which is name of your animation) { from { Start animation } to { End animation } } And the object #demodiv { animation: seconds, animation name from keyframes, how many times the animation is gonna run; }
11:19 Emmm, not 100% correct, where inline ≠ left & right and block ≠ top & bottom. This is only true if your writing mode is horizontal. If it is vertical, they become opposite then.
Your Video is really usefull bro. Thanks. My kind request, give a clear idea about position properties (abosolute,relatice,sticky,fixed) and sometime the Letters are looking blur in website. I don't know why.. it is because of font family or font weight or any css missing. So clear this too.. Thanks in advance..❤
Thanks for your feedback, I'm happy to hear that!! 😉 But what exactly is misleading here, the title or the thumbnail? Would be helpful if you could give me more details ...
Which of those features are your favorites, which did you already knew or which one’s are definitely missing here? 🧐
I would love to get your take on this ranking! 😉🔥
Thank you for helping me
@@mdibrahimkhalil2847 My pleasure, buddy! 😉
😊😢😂😅😢😂❤😊😅
Is()
@@mikelexx2542 You're right. That's also a very important CSS Trick - thanks for mentioning! 😉
You’re teaching at the exactly the pace that is needed to understand and memorise . Works really well for me
Yeah it is a bit easier to follow than Kevin, though I think Kevin shows a lot more passion for CSS and teaching it.
Speed, pace, way of telling, simplicity and easy to understand - if those were the categories to rate this video then I will rate 100 out of 10...!
You just lighten up the areas where I was afraid of going due to darkness... Thanks 🙏
Thank you so much for your feedback, this really means the world to me! 🤩
I'm glad you like it and I really appreciate your feedback! 😉
Found these extremely useful:
Top set vertical or horizontal spacing
Before:
margin: 10px 0;
Now:
margin-block: 10px;
first qualifier can be replaced with padding, border as well
To set variable width/height till a threshold value is reached
Before:
width: 70%;
max-width: 500px;
Now:
width: min(70%, 500px)
Yes, me too! Thanks for sharing! 😉
Industry practice or best practice.
1. Best practice for body copy in responsive design.
2. Best practice for header and footer.
3. Best practice for components like cards etc.
a complete guide would be great. I think you have the deep knowledge. You could help millions of UI designers.
Thanks for your request, John! Sounds like an interesting idea to me - I’ll think about it. 😉
i was first offended by the code monkey remark ,then i was like yeah that is what is actually happening (especially at a junior dev level) , touché lukas touché
Really great video, Lukas! It would be even better if you have a better mic as the vox come through kind of echoey/tinny. Content is excellent, however - keep it up!
Thank you, I really appreciate your feedback!
Happy to hear that you like it. Sorry for that, but if you check out my latest videos, you'll recognize that I'm having a mic now... 😉
(still need to figure out the best settings and stuff, but it will get better with every new video.)
Oh my God, I simply didn't know the scroll-snap, I already need to use this but I didn't know how, this is amazing, every day being impressioned by the amazing features of CSS
Yeah, CSS is awesome. 😉
I'm glad I could help, thanks for the feedback.
I totally forgot about line-clamp, thanks for reminding.
My pleasure! 😉
Nice video. Thanks! Regarding the logical properties, there are also the "-start" and "-end" suffixes. Also the logic properties relative to the selected language on the page that is an awesome feature for those who care about many translations.
Thanks for sharing, Zakir. I'm glad you like the video and appreciate your feedback! 😉
The reading direction is the reason for those properties, there’s nothing “logical” about them. I don’t know where he got this naming from. In general you should use them instead of left, right, top and bottom always, they are straight up modern substitutes. The older ones only still exist for backwards compatibility.
Thanks a lot Lukas. I have finally understood :is(), inline vs block, and how to use line-clamp. And I love your style! 👏👏👏👏👏
Thank you Pablo, this really means a lot to me!
I'm happy to hear that and I appreciate your feedback! 😉
Nice list! But I would want to caution people when using -inline and -block, for example margin-inline. The reason for that caution is that the semantics are slightly different than using margin-left and margin-right.
If you write margin-left, the margin will always be on the left side regardless of writing mode (left-to-right, right-to-left, top-to-bottom or bottom-to-top), but with margin-inline, which is a shorthand for margin-inline-start and margin-inline-end, writing mode is taken into account, so in a right-to-left display language, the margin you intended to be on the left side will now be on the right side, which might not be what you intended.
I'm glad you like it! 😉
You're absolutely right about that. Thanks for mentioning and for this great explanation!
That’s actually makes margin-inline even more useful, you will not have to update the styles when switching from ltr to rtl languages: in most cases it requires to flip the website horizontally, and if you use margin-inline, all you have to do is just change “direction” property. But if you specify different margin values for left and right, you’ll have to override them as well.
@@AlexanderKontsevoy I agree, and that is why these properties were added. And that's why it's important to know what your intent is. If your intent is to have a margin in the beginning of the text (regardless of text direction), you should use -inline. But if your intent is to always have the margin on the left side regardless of text direction, you should use -left. It all depends on the situation.
So my comment was not to say that -inline isn't useful; it was to alert people to the slight difference of semantics so they won't be surprised if that thing that should always have a left margin suddenly has its margin on the right for e.g. Arabic readers. But I agree with you, if only applied to paragraphs, figures and such, -inline is very nice to not have to override everything all the time.
I understand wanting to raise this difference, though I think it's important to make developers more aware about different writing modes/accessibility in general so they can develop and design for them without accessibility seeming like this daunting arcane task
What drives me crazy though is the multi valued forms don’t follow.
margin : 1rem 2rem 3rem 4rem;
That TRBL even in RTL mode.
That’s a spec error.
I'm new to coding and this is really helpful. I always do some things manually like the position of the context but now here I found there's and easier way to do it.
Thanks! I'm happy to hear that and I appreciate your feedback! 😉
I subscribed to your channel and will always support you. Your video is amazing! CSS is very advanced. I would like you to post more videos related to CSS for better designing. May be a video for best practices. Thanks.
Thank you very much, this really means a lot to me! 🤩
I'm happy to hear that and thanks for the video idea.
Starting webdev here. Learned a lot from this video. Perhaps the biggest one of all is one you showed without mentioning: box-sizing: border-box. That one is going to make my life a lot easier! Thanks!
Thank you very much! 🤩
Okay, I watched the video to the end and now I can say I love you!
My pleasure, buddy! Thank you for your feedback, this really means a lot to me. 🤩
Superb video, thank for lot.
My pleasure! I'm glad you like it. 😉
A lot of useful tricks to keep in mind, thanks!!!
My pleasure! I'm happy to hear that and I really appreciate your feedback! 😉
U suddenly appeared on my utube and cleared my all doubts which bother me everyday ❤️🔥❤️🔥
I am thrilled. Thank you very much!
My pleasure, buddy! Thank you for your feedback. 😉
Bro, the stuff I used React components from libraries for in the past, you program using plain HTML & CSS. Damn!
Sure 😜. Plain HTML & CSS is actually pretty powerful ... 🔥
Thank you so much for this content ❤
You're welcome! Thanks for your feedback, I appreciate it! 😉
Good stuff, bro. Very useful. I haven't been using any of those but will implement them in the future.
I'm happy to hear that, Tomas. Thanks for the feedback, I really appreciate it! 😉
One of the best CSS Videos I've seen in 2023
Thank you, this really means a lot to me! 🤩
kindly make a course of all the properties and tags of CSS and teach us like in this video , i just love your way of learning.
Great video here's my subscription !!!!
Awesome! Thank you very much, this really means a lot to me. 🤩
that's nice video dude
we'll need more of it
Thanks for your feedback, I appreciate it!
I'm on it! 😉
As many others have said: very nice video. Those section title cards, though... let them hang out for a couple of seconds! There is neither time to read them nor time to pause if you care to read them. But again, great content and keep it up!
Will do! Thanks for the tip and I'm glad you like it!! 😉
Thanks 💜💜💜
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
Dang, these ...-block and ...-inline are useful! I always used padding: XX% 0; and padding: 0 XX%;
Thank you a lot!
My pleasure, I'm happy to hear that! 😉
Muito bom seu inglês, estava achando que era um vídeo gringo até ouvir "xau" 😂 aí fui ver o nome do canal e não tive dúvidas. Parabéns pelo conteúdo.
Fico contente por ouvir isso. ... 😄
Obrigado pelos comentários, Eu agradeço sua atenção! 😉
nice one mate!
Thanks for your feedback, it means a lot to me! 🤩
thanks man, i hope one day i become as good at css as you or kevin powell, i have always hated css and focused at other things but im in a situation that i have to learn it, and since i started to get deeper and deeper at css i started to actually like it
Good job Lukas, very helpful. (has and is) are my top tips.
Yeah, they're awesome! Thanks for you feedback, I'm glad to hear that. 😉
Nice video... Saved for later purposes. Thanks Lukas!
My pleasure, buddy! I’m glad it's helpful and appreciate your feedback! 😉
i love this video so much ,
please keep making videos like this .
best of luck for you my friend .
Will do, buddy! Thank you so much for your feedback, I really appreciate it and I'm very happy to hear that. 😉
awesome, thank you!
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
Awesome video.. Great information
this was really very helpful hopefully see more css features in the future ❤❤
Thank you for your feedback! I'm on it - subscribe to get notified ... 😉
Nice video!
Thanks, I’m glad you like it. 😉
nice 1 sir good explanation :) next javascript thanks sir :)
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
That's a great idea, thanks.
Thank you, how great is it.
God bless u
Very helpful video and clearly explained all the features without complicating things . Thanks!
Wow, aprendí mucho, en verdad muchas gracias, empezaré a implementar estos temas en mis próximos proyectos. 😊
Gracias por tus respuestas, me alegra oír eso! 😉
Never rlly realized till now that am missing out alot on easier code writing. Ive been using notepads to qrite codes 😂. Vscode seems alot easier to use
Yes, you should definitely start to use VS Code instead of Notepad! 😂
You can download it for free and it will make everything easier. PS:I have a video about the top 5 Extensions in VS Code - that should be also very helpful for you, make sure to check that out. 😉
Thank Lukas for your great and very clear way of teaching!
Great 👍 you have earned a subscriber today ❤ please keep making tutorials ❤
Thank you very much. I really appreciate it! 😉
Don't worry, I'm just getting started ...🤙
Amazing !
I'm glad you like it, thanks for your feedback! 😉
Useful and interesting content - thank you! 🙏
Thanks for your feedback! I appreciate it. 😀
Sir thanks for this video super amazing….
My pleasure! I’m glad you like it and appreciate your feedback! 😉
This is really a helpful „Code-Monkey“ video. I was able to learn something new. Thank you so much. 😎
You're very welcome! I am happy to hear that 😉
This Video is a Must Have!!! Thanks for sharing!!! I'm SUBSCRIBED!!!
Thank you for sharing 🙏😊❤
You're welcome! I'm happy to help. 😉
thank u very much that was helpful
My pleasure, I'm happy to hear that! 😉
Very well explained !!! Thanks pal
My pleasure! I’m glad you like it. 😉
Great video, Thanks!
nice css tricks Lukas
Thank you buddy, I really appreciate the feedback! 😉
Thnx alot bro ❤
My pleasure! 😉
This content is great learned lot of new things.
Keep Going !! that's great
Will do! 😉
Thank you so much for your feedback.
Hey. I’m a web developer with a solid experience. And I did like this short and condensed review of new features. Thank you.
The only thing I would ask to add to similar videos in the future Is the compatibility limitations to be aware about. That was a huge throwback for me when people already used flex box but it was not supported by “favourite” IE, so I could not use it or make a fallback extra.
I’m asking this because of the prefixed CSS you used and it is obvious that it is not a standard yet :)
Anyways thanks, and subscribing to be updated with your videos.
Use sth like PostCss or even better a Preprocessor and dont care about browser support
@@heiniger92 the main idea is about native support, because it is usually(…) de facto more performant :)
You're very welcome, I'm glad you like it and thanks for subscribing! 😉
Good point, thanks for mentioning - I'll keep that in mind. 👍
(But if I'm not mistaken, all the features of this video are already fully supported by every major browser - except for :has(), but I mentioned that in the video ...)
Bundle Of Thanks Man❤
Great video, keep going..
Will do! 😉
Thank you so much for your feedback, I really appreciate it. ✌
wow realy usful 🤩
thank you 🙏
I'm more than happy to hear that! My Pleasure, thanks for your feedback. 😉
Thanks that's helps a lot ❤
My pleasure! I’m happy to hear that. 😉
You are very cool brother, thank you. Live long and prosper 🖖
Thanks for the feedback buddy, I really appreciate it. 😉🖖
Very helpful
Thanks for your feedback, I am happy to hear that! 😉
Nicely done! Keep 'em coming!😀
Thank you! Will do. 😉
Amazing vedio can u just make one vedio in which you can give some tips and tricks which u have learnd from you experience to make site responsible.. and how with a cord or think in a way that we can make responsive with less code
Thank you for your feedback, I really appreciate it! 😉
I am currently working on a video about Responsive Design with Tailwind CSS, maybe this is also helpful for you... Anyways thanks for your suggestions, I'll see what I can do. ✌
Great. I start follow you. 👍
Love this type of video, subbed!
Thanks! I appreciate it. 😉
Buen video Lukas, me suscribo!
Muchas gracias te lo agradezco mucho! 🤩
Great 🌹🔥🔥
Thanks, I really appreciate it! 😉
Thanks ~ 💞
My pleasure! I’m glad you enjoyed it and I appreciate your feedback. 😉
12:20 there is still another way to write it.. since css goes from top to bottom you could simply override what was set before. In this example I would rather write
p {
padding: 12px;
padding-left: 8px;
padding-right: 8px;
}
the first line is the base rule, the others are the exceptions.
Why write 3 lines when one will do with just - padding: 12px 8px; ???
@@harag9 In this case it works but
1) this is also mentioned in the video at 12:20
2) what if only 1 value is off and the rest is not?
You can put every setting in one line of code in simple terms of minification. But he showed alternative ways of doing this and I just wanted to add that there is another way (mentioned above)
Maybe you should add that it's always better to also add the non-prefixed version as well.
Great point, thanks for pointing this out! 😉
Nice Features, in CSS ist soviel möglich!
very informative, thx
Awesome. Thank you for your job
Good 👍
Thanks! I appreciate it. 😉
Thank You, Sir
Thank you so much, Sir 🙂
I am really inspired by your video🙏❤🙏
My pleasure! I am very happy to hear that, thank you for your feedback! 😉
perfect dude!
If you want to make a animation for a div, then
@keyframes demo (which is name of your animation) {
from {
Start animation
}
to {
End animation
}
}
And the object
#demodiv {
animation: seconds, animation name from keyframes, how many times the animation is gonna run;
}
Thankyou. 👍🏿👍
Bro.. Plz... Upload more videos on css...by developing any live websites
Will do, buddy! Thanks for your feedback. 😉
This is the best video
Thank you very much! I’m glad you like it. 😉
thx!
My pleasure! 😉
Thank you
Thanks for such an informative video.
You're welcome! I really appreciate your feedback. 😉
I did not know about scroll snap.
11:19 Emmm, not 100% correct, where inline ≠ left & right and block ≠ top & bottom. This is only true if your writing mode is horizontal. If it is vertical, they become opposite then.
I don't know about you, but I don't really use/change the writing-mode in my projects too often ...
But you're right, thanks for mentioning! 😉
@@lukas.webdev Yeah, I seldom use this property as well, but I think it is still important to know this minor difference haha
@@oliver139 Yeah, you're actually absolutely right about that. Thanks! 😉
@@lukas.webdev It's main use is for languages that write horizontal right-to-left like Arabic or vertical right-to-left like Japanese.
nice video, thank u
Great video - Are all these safe to use cross browser i.e. have full browser support?
Thanks❤
Love this thanks
My pleasure! I'm glad you like it. 😃
Your Video is really usefull bro. Thanks. My kind request, give a clear idea about position properties (abosolute,relatice,sticky,fixed) and sometime the Letters are looking blur in website. I don't know why.. it is because of font family or font weight or any css missing. So clear this too.. Thanks in advance..❤
❤Thanks Sir!
You're welcome! Thanks for your feedback. 😉
clickbait but will really help to boost the productivity!!
Thanks for your feedback, I'm happy to hear that!! 😉
But what exactly is misleading here, the title or the thumbnail? Would be helpful if you could give me more details ...
very cool, ty