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! 😉🔥
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é
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.
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
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.
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'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.
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.)
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.
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.
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'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 ...)
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.
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
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)
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. 😉
"Flexbox" is the actual name of the layout model and with "display: flex" you create a flex container. "display: flexbox" would do absolutely nothing, becuase "flexbox" is not a valid display value. I hope this helps! 😉
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. 😉
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; }
Sorry for my late response ... You're absolutely right, but if I would just use abbreviations, then it would be even harder for Beginners, to follow along and understand what I try to show in the videos ... 😉
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",
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. ✌
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!
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..❤
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.
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é
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. 😉
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. 🤩
Nice video... Saved for later purposes. Thanks Lukas!
My pleasure, buddy! I’m glad it's helpful and appreciate your feedback! 😉
Can you please tell me about the cursor in your vs code ❓ also how does it highlight the ( ) parenthesis ❓
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 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! 😉
A lot of useful tricks to keep in mind, thanks!!!
My pleasure! I'm happy to hear that and I really appreciate your feedback! 😉
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 ...
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! 😀
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! 😉
This Video is a Must Have!!! Thanks for sharing!!! I'm SUBSCRIBED!!!
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. 😉
that's nice video dude
we'll need more of it
Thanks for your feedback, I appreciate it!
I'm on 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
Yeah, CSS is awesome. 😉
I'm glad I could help, thanks for the feedback.
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! 😉
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.)
I totally forgot about line-clamp, thanks for reminding.
My pleasure! 😉
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. 😉
Very helpful video and clearly explained all the features without complicating things . Thanks!
Thank you so much for this content ❤
You're welcome! Thanks for your feedback, I appreciate it! 😉
Superb video, thank for lot.
My pleasure! I'm glad you like it. 😉
Thank Lukas for your great and very clear way of teaching!
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.
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.
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!! 😉
Great video - Are all these safe to use cross browser i.e. have full browser support?
I am thrilled. Thank you very much!
My pleasure, buddy! Thank you for your feedback. 😉
It's very much helpful. Take love from Bangladesh.
Thank you so much for your feedback, I'm happy to hear that! 😉
One of the best CSS Videos I've seen in 2023
Thank you, this really means a lot to me! 🤩
Great video here's my subscription !!!!
Awesome! Thank you very much, this really means a lot to me. 🤩
Keep Going !! that's great
Will do! 😉
Thank you so much for your feedback.
Buen video Lukas, me suscribo!
Muchas gracias te lo agradezco mucho! 🤩
Awesome video.. Great information
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.
Very well explained !!! Thanks pal
My pleasure! I’m glad you like it. 😉
nice one mate!
Thanks for your feedback, it means a lot to me! 🤩
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 ...)
Awesome. Thank you for your job
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 ... 😉
U suddenly appeared on my utube and cleared my all doubts which bother me everyday ❤️🔥❤️🔥
Great video, Thanks!
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) :)
Hi , what app you use to write your codes?
I'm using the free Source Code Editor "Visual Studio Code" ... 😉
Thanks that's helps a lot ❤
My pleasure! I’m happy to hear that. 😉
This content is great learned lot of new things.
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.
Thanks for the video Lukas. I am kinda confused in a part. What is difference between “div h2” and “div :has(h2)”?
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.
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.
awesome, thank you!
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
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! 😉
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, how great is it.
God bless u
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! 😉
Amazing !
I'm glad you like it, thanks for your feedback! 😉
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 ...🤙
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)
Bundle Of Thanks Man❤
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! 😉
Great. I start follow you. 👍
Useful and interesting content - thank you! 🙏
Thanks for your feedback! I appreciate it. 😀
In the second tip.can we use transition?
Thanks 💜💜💜
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
wow realy usful 🤩
thank you 🙏
I'm more than happy to hear that! My Pleasure, thanks for your feedback. 😉
Nicely done! Keep 'em coming!😀
Thank you! Will do. 😉
Great video 🎉
Thank you for sharing 🙏😊❤
You're welcome! I'm happy to help. 😉
Quick question, how do you scroll horizontally ? do you just use your (vertical) scroll wheel, or do you use a modifier key ?
Awesome 👌
Thanks! I'm glad you like it. 😉
thank u very much that was helpful
My pleasure, I'm happy to hear that! 😉
Love this type of video, subbed!
Thanks! I appreciate it. 😉
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. 😉
Thank you very much!
You're welcome! I’m glad you like it! 😉
Nice video!
Thanks, I’m glad you like it. 😉
Thnx alot bro ❤
My pleasure! 😉
Great video, keep going..
Will do! 😉
Thank you so much for your feedback, I really appreciate it. ✌
Whats the difference between display: flex; and display: flexbox; ?
"Flexbox" is the actual name of the layout model and with "display: flex" you create a flex container.
"display: flexbox" would do absolutely nothing, becuase "flexbox" is not a valid display value. I hope this helps! 😉
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. 😉
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;
}
Why typing all those letters when you can use abbreviations:
For width just press w and enter px value and is done.
h: height
df:display-flex, etc..
Sorry for my late response ...
You're absolutely right, but if I would just use abbreviations, then it would be even harder for Beginners, to follow along and understand what I try to show in the videos ... 😉
very informative, thx
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
nice css tricks Lukas
Thank you buddy, I really appreciate the feedback! 😉
Nice Features, in CSS ist soviel möglich!
Sir thanks for this video super amazing….
My pleasure! I’m glad you like it and appreciate your feedback! 😉
perfect dude!
You are very cool brother, thank you. Live long and prosper 🖖
Thanks for the feedback buddy, I really appreciate it. 😉🖖
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. ✌
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! 😉
Great 🌹🔥🔥
Thanks, I really appreciate it! 😉
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!
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! 😉
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..❤
How do you get that smooth animation for the blinking cursor? or is that OS dependent?
Just found it under VS Code preferences. Called "Expand".
@@nelsonherrero170 Awesome! Yes, that's it. 😉
This feature is called "Cursor Blinking" - it is "blink" by default and I change it to "expand" ...
I'm not even a minute into the video yet and I've already set messing with my cursor preferences for 15 mins
@@Pshock13y Been there...😄