You can use Emmet with CSS!
ฝัง
- เผยแพร่เมื่อ 24 มี.ค. 2021
- My video on Emmet for HTML: • Use Emmet to up your H...
Emmet is awesome, and I use it for my HTML all the time. When I put up my Emmet video, a lot of commenters mentioned that we can use it for CSS too. I've known about it, but I haven't used it a ton... but the more I play with it, the more I like it!
The only drawback is there are a lot of properties to remember new shortcuts for!
Emmet's cheatsheet... use find for what you're looking for, there is a lot 😅 docs.emmet.io/cheat-sheet/
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
My CSS Professor has blessed me yet again.
Kevin Powell is a high quality sub for sure.
at 3:00 you can shorten it to "m0-a" it will translate to "margin: 0 auto;" as well 👍🏼
Cool!
@@Steel0079 Ctrl + movement keys
I love this, didn't know it existed for CSS as well
You really do churn out a lot of useful content at a rapid pace. Always good.
Thanks, glad you're enjoying it all!
@@KevinPowell At 5:45, you moved the cursor instantly to the start of the word "black", before deleting "#". It didn't look like it was a mouse movement. Is there a shortcut for doing that?
@@Steel0079 if you hold ctrl and use arrow keys, the cursor moves a word (or token) at a time. So ctrl + left arrow is what he did to get to the start of the word. This works with backspace and delete too, so to delete a word press ctrl + backspace.
at 6:07 that's called trigger suggest and in vscode you can press ctrl+space (or command+space in mac) to bring it up without having to hit backspace
it's not only for emmet snippets it also works for just about anything with intellisense
This is awesome! I did not now about this, and the cheat sheet is included!
Thank you again Kevin for continually providing the web dev community with premium content!
As a hand coded I have been using it mainly for table setups for data. Now I will use it more often for standard styles. Thanks soo much!
Bro, You changed my life!! I've been used the intellisence to type the props faster for so long, but now it comes to my mind to use it like that. Thank you! Keep going
Every time I hear Emmet, I think of Dr. Emmet Brown a.k.a. Doc from Back to the Future!
jajaj me too
And thanks to reading that, I probably will too 😅
I believe thats who its named after
"GREAT SCOTT!!"😯
Wow, I think of Emmet, the firearm guy from Gta SA, lmaoo
No, i haven't used it yet but I sure will from now on! Thank you so much, I think your videos and your responsive course has been the main reason I got good, or better and more comfortable with css (and scss).
this will definitely speed up my work flow. thanks Kevin 🎉
You are AWESOME as usual Kev.
Keep it up man. 👏
This blew my mind. Don't ever stop making these videos!
I didn't know about this. So happy to wach your video. I'm gonna try to include it from now (because sometimes the hand already is moving automatically when typing css). Thank you Kevin
Awesome :) I got many here. I was not thinking about Emmet but was already using it for many css properties. Now will play around it and have lots of fun. Cheers. Thanks Kevin.
This is so cool. I will start using this right away in my CSS styling. Thanks, Kevin. You're awesome :)
Hey...
I'm from Bangladesh right now I am learning JavaScript...
my Facebook Nigerian friend is learning css. I suggested him to follow your channel for CSS. You are the CSS king.
Thanks for sharing 😊
Welcome
Hands down Emmet has changed this game since it came , i remember using it on sublimetext and never going back since.
As usual great content, keep it up.
Each video of your channel is a gem...
I love all your videos and I've improved alot since I found this channel!
This is gold! Thank you very much Kevin!
*_This is Mind Blowing and very Useful ! Great ! 👍🏼_*
Wow. Love this and will start using immediately. Thank you
Thanks Kevin Sir it was a informative tutorial it has taken my css to next level
Your videos are the funniest I have ever seen. It's really nice to learn like this. Thanks a lot.
Didn't know about this but is so cool! Thanks again Kevin!!
Glad you liked the video 😃
I didn't know there was emmet for CSS. I'm gonna start using it now! Thank you Kevin! I love your content!
Never knew about this! Looks wonderful! Thanks for sharing! A cheat sheet would be awesome!
I'm falling in love with it too and your content! Thanks a million!
When I saw you do that first m0, Kevin, I had to immediately stop the video, pop open VSCode, and try it. And then scream: "OMG! IT'S BEEN HERE THE WHOLE TIME!!!!" So... thanks for the epiphany! I'll definitely be using this.
This is life changing for me, thanks!
I?ve been using it but not in combination with the plus sign. That is just awesome. As always Thanks million for your work Kevin!
Thank you for this video.
Although I used the Emmet plugin, I did not know about them, I learned.
Already using emmet on css, the multiple line trick and the shortcut for fxd:c are new for me 😲 Soooo coool 🤩 Thanks
Jeez!!!! I didn't know that. Thank you. Super excited
Never knew the "+" was there to combine multiple properties. Always did them one at a time. Thank you Kevin❤
Same. Ironically, it takes longer to connect them all. Each property would need its own tab/enter keystroke, but with combining, we need to press “shift” and “+”, plus the final tab/enter.
I didn't know it existed for CSS as well! I'm gonna give it a try. Thanks again!
I didn't know this was possible, this is so useful
I HAVE to start using emmet now, I never thought it would have this much power!
I have used it a little on CSS, but I did not know you could combine them. Another helpful and awesome video!
Glad you enjoyed it
Excellent video! Thanks for the information. I will give it a try.
Wonderful KP, Thanks for your kind work. 👍
MORE THAN AWESOME! As usual I should add :) Thank you soooo much Kevin! I really Love Your tutorials!
Very Useful thanks looking forward to see more videos of this playlist
I have started using emmet from now onwards a lot!!
Magic! Thanks alot, cheers from Norway!
Thank you so much, I didn't know about this, and I'll start using it right now 🌹
I didn't know of this, wow this really speeds up css. Thanks a love Kevin
Wow, this is awesome and will sure save me time. Didn't know emmet works with css even though I've been using some kind of shorthand without knowing the full potentials.
I am starting on this journey at 48 years old, totally a newbie. This little shorcuts are wonderful for me! Thanks so much!
Wow thanks much, I've been thinking about it for sometime now.
Hai kevin u always come with new strategy in css. Thanks
I never even considered that Emmett might work with CSS. Going to try it out tonight. Thanks!
Cool, I knew that existed in a different way, but this is way better
Just amazing! Thank you so much... I loved that video.
Exactly what I wanted! Thanks!
I haven't seen Emmet with css but now ... I'm gonna User it !
Really good!
I've used it before but not for multiple properties, that will be helpful
Great. Didn't know about it. Another level up on my skills 🥰. Thanks Kevin!
Glad you liked the video 😃
I'm definitely going to start using Emmet for both CSS ans HTML!
This is something you dont find in other Ytubers.
Interesting stuff, as always
As like as all your videos, Informative and useful.
Great stuff, thank you!
ty man, it's very useful for me
Thanks, if it wasn't because of this video it wouldn't have clicked...been using Emmet by accident whilst coding SCSS with basic stuff like m0 or p0 but I never got to make the connection.
This opens up a load of possibilities.
amazing stuff as usual!!
Thanks ☺️
Awesome man, thanks!!
There is something new you get to learn on this channel ❤️
I used only m0, p0, & bgc before your video but now I will try this all emment
Something new and useful before 8am. Cool!
Awesome video, awesome tool 3>
i love it , thank you so much
thanks for great content Kevin!
You're welcome 😊
That is so awesome! Wish there were something like that for SMIL - which I still prefer over CSS for its versatility, but oh boy is it superfluous.
Not tried so far css, interesting, i wil start using it
I was already using this. Things like
ffss (font-family sans-serif)
fz1.25rem (font-size 1.25rem)
df (display flex)
aic (align-items center)
jcc (justify-content center)
tac (text-align center)
bg#4 (background #444444)
c#a9 (color #a9a9a9)
bdrs50p (border-radius 50%)
b2 (bottom 2px)
fxdc (flex-direction column)
Thank you very much!
Wow, it's totally amazing and super fast.
Great video! I have an AWESOME suggestion that I think loads of people will agree with...Remake/clone cool websites and document how you would code it...It’s entertaining, fun, and super educational!
The king, very useful
👍
Really glad to know
im definitely gonna use emmet for usual codes
I am using VSCode for quite some time now and I never realized the integration of Emmet and its potential. Thank you for pointing that out!
Glad you liked the video 😃
keep up the good work 💪
never used before, I'm starting just now after your video.... as usual. ;)
Great video 👏🏾👏🏾
Your Chanel is the best
Thanks. This is awesome
omg! this is awesome!!!
I've been using emmet with CSS but I guess not efficiently. Thanks for making this video, now I can use it efficiently
Thanks, glad you enjoyed it :D
Awesome thanks bro 👍
You are literally carrying me in CSS. I am such a better CSS writer because of your videos! Thank you!
These are super awesome. Thanks a lot. May The Almighty bless you.
damn, this is amazing info, no wonder you have so many subs
Cheers for this.
Thank you!
This is amazing
Love it!
That looks like fun!
Takes some getting used to, but is really handy :)
What a master 🔥