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! 😉🔥
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)
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 🙏
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.
Hey man the video is really amazing; I hope to see more about the CSS features in the future. really simple but really easy to understand. Thanks for the video, man. can't wait to try it myself.
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.)
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.
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
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é
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!
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.
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
I'm happy to hear that, all the best for your journey! 😉 (PS: Because you just started webdev, my latest video should be also very helpful for you ...)
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; }
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. 😉
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)
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..❤
Don't worry, I know that feeling too ... 😄 Thanks for your feedback, I really appreciate it. And yes, it is... but you still need to use it for that approach and as far as I am aware, currently there is still no better way to truncate text in CSS. 😉
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!
Can you name the extension which you've using to highlight the code blocks line ... That yellow line when the code is getting bigger for better code sections division!?
That's not an extension, that's a built-in feature from VS Code ... 😉 Just add the following to your settings.json file: "editor.guides.bracketPairs": "active",
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.
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! 😉
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! 😉
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. 😉
Hey man the video is really amazing; I hope to see more about the CSS features in the future. really simple but really easy to understand. Thanks for the video, man. can't wait to try it myself.
Thank you for your feedback! I’m really glad you like it! 😀
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.)
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.
Very nice and informative yet with easy explanation video. I hope to see more videos on building actual projects with these features.
Thanks for your feedback, I really appreciate it! 😉
PS: You will, soon. I'm currently working on a big project ...
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.
This Video is a Must Have!!! Thanks for sharing!!! I'm SUBSCRIBED!!!
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! 😉
Nice video... Saved for later purposes. Thanks Lukas!
My pleasure, buddy! I’m glad it's helpful and appreciate your feedback! 😉
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 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é
A lot of useful tricks to keep in mind, thanks!!!
My pleasure! I'm happy to hear that and I really appreciate your feedback! 😉
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! 😉
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. 🤩
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. 😉
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!! 😉
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! 😉
Great video here's my subscription !!!!
Awesome! Thank you very much, this really means a lot to me. 🤩
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.
that's nice video dude
we'll need more of it
Thanks for your feedback, I appreciate it!
I'm on 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. 😉
Superb video, thank for lot.
My pleasure! I'm glad you like it. 😉
Very helpful video and clearly explained all the features without complicating things . Thanks!
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
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 ... 😉
Thank you so much for this content ❤
You're welcome! Thanks for your feedback, I appreciate it! 😉
Awesome video.. Great information
Thank Lukas for your great and very clear way of teaching!
Just started learning web development and this video was very helpful
I'm happy to hear that, all the best for your journey! 😉
(PS: Because you just started webdev, my latest video should be also very helpful for you ...)
One of the best CSS Videos I've seen in 2023
Thank you, this really means a lot to me! 🤩
I am thrilled. Thank you very much!
My pleasure, buddy! Thank you for your feedback. 😉
I totally forgot about line-clamp, thanks for reminding.
My pleasure! 😉
It's very much helpful. Take love from Bangladesh.
Thank you so much for your feedback, I'm happy to hear that! 😉
Buen video Lukas, me suscribo!
Muchas gracias te lo agradezco mucho! 🤩
Useful and interesting content - thank you! 🙏
Thanks for your feedback! I appreciate it. 😀
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.
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! 😉
Great video, Thanks!
Nicely done! Keep 'em coming!😀
Thank you! Will do. 😉
nice one mate!
Thanks for your feedback, it means a lot to me! 🤩
Very well explained !!! Thanks pal
My pleasure! I’m glad you like it. 😉
Nice video!
Thanks, I’m glad you like it. 😉
Keep Going !! that's great
Will do! 😉
Thank you so much 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 ... 🔥
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;
}
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 ...🤙
Awesome. Thank you for your job
Great. I start follow you. 👍
Great video 🎉
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 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.
Love this type of video, subbed!
Thanks! I appreciate it. 😉
U suddenly appeared on my utube and cleared my all doubts which bother me everyday ❤️🔥❤️🔥
Thanks that's helps a lot ❤
My pleasure! I’m happy to hear that. 😉
Thanks 💜💜💜
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
nice css tricks Lukas
Thank you buddy, I really appreciate the feedback! 😉
Great video - Are all these safe to use cross browser i.e. have full browser support?
awesome, thank you!
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
This content is great learned lot of new things.
wow realy usful 🤩
thank you 🙏
I'm more than happy to hear that! My Pleasure, thanks for your feedback. 😉
Bundle Of Thanks Man❤
Great video, keep going..
Will do! 😉
Thank you so much for your feedback, I really appreciate it. ✌
Awesome 👌
Thanks! I'm glad you 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. 😉
Amazing !
I'm glad you like it, thanks for your feedback! 😉
Thank you, how great is it.
God bless u
very informative, thx
Thanks for the video Lukas. I am kinda confused in a part. What is difference between “div h2” and “div :has(h2)”?
Thank you for sharing 🙏😊❤
You're welcome! I'm happy to help. 😉
Thank you very much!
You're welcome! I’m glad you like it! 😉
thank u very much that was helpful
My pleasure, I'm happy to hear that! 😉
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.
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)
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..❤
sometimes I think that I know css well.. then I meet these kind of videos :D
btw., isn't box-orient deprecated?
Don't worry, I know that feeling too ... 😄
Thanks for your feedback, I really appreciate it. And yes, it is... but you still need to use it for that approach and as far as I am aware, currently there is still no better way to truncate text in CSS. 😉
Quick question, how do you scroll horizontally ? do you just use your (vertical) scroll wheel, or do you use a modifier key ?
Nice Features, in CSS ist soviel möglich!
Thnx alot bro ❤
My pleasure! 😉
Thanks for such an informative video.
You're welcome! I really appreciate your feedback. 😉
Very helpful
Thanks for your feedback, I am happy to hear that! 😉
Great 🌹🔥🔥
Thanks, I really appreciate it! 😉
Sir thanks for this video super amazing….
My pleasure! I’m glad you like it and appreciate your feedback! 😉
Can you please tell me about the cursor in your vs code ❓ also how does it highlight the ( ) parenthesis ❓
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! 😉
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!
nice video, thank u
perfect dude!
Hi , what app you use to write your codes?
I'm using the free Source Code Editor "Visual Studio Code" ... 😉
Can you name the extension which you've using to highlight the code blocks line ...
That yellow line when the code is getting bigger for better code sections division!?
That's not an extension, that's a built-in feature from VS Code ... 😉
Just add the following to your settings.json file: "editor.guides.bracketPairs": "active",
@@lukas.webdev tried but not working can you specify or recommend me a video for that
@@ajnabishaqs8067 Sorry, you also have to add: "editor.bracketPairColorization.enabled": true,
Does it work? 😉
@@lukas.webdev yeah
Thankyou. 👍🏿👍
Great video.
Thanks! I really appreciate it. 😉
You are very cool brother, thank you. Live long and prosper 🖖
Thanks for the feedback buddy, I really appreciate it. 😉🖖
In the second tip.can we use transition?
Love this thanks
My pleasure! I'm glad you like it. 😃
17:40, wait what would we target this way? All items inside of the container, or all containers, which contain items?
All containers, which contain items.
With the :has pseudo class you target all containers, which contain items.
Sorry for that! I just realized this now ...
@@lukas.webdev Please, stop saying you're sorry, it sounds like a chatGPT response (yeah, you should now appologize for appologizes though) :)