Use Emmet to up your HTML game
Vložit
- čas přidán 5. 08. 2024
- Get your Emmet cheat sheet here: kevin-powell.ck.page/f197c78a95
Emmet is one of those things that I honestly struggle to work without these days, and is something that many don't use to its full potential, so in this video, I cover some of the most useful features that it has :).
//// Chapters
00:00 - Introduction
00:39 - HTML5 Boilerplate
01:32 - Basic tags
02:15 - Classes and IDs
04:17 - Nest elements
05:02 - Multiply elements
06:35 - Sibling elements
08:46 - Link to CSS
09:11 - Filler text
10:52 - Outro
#html
--
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 CZcams 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!
One more thing to add which is one of my favourites is adding a $ which increments each item by 1. For example, ".colors$*5" will give you 5 divs each with their own classname (color1, color2, color3, color4, color5)
This is in the cheatsheet👍
So nice too, great 👌
that's nice
oh you meant (colors1, colors2, colors3, colors4, colors5)?
I LOVE Emmet. It cuts down on the tedium of hand writing HTML. Imagine using it with voice recognition. Now you're the programmer of the future, baby.
sounds really awesome but tbh I feel to lazy to talk abd rather type :D
Imagine a person beside you in the office or a coffee shop constantly talking to his computer 😋 and occasionally yells at it 😂
this channel is gold. you deserve a long life kevin!
You can also do
ul>li*3>a[text here]
To add filler text
Didn't know this one! Thank you
Wrong u have to use curly braces for inner text!
Square brackets give you attributes, curlies give you text content, and you don't need the li, since emmet knows what goes in a ul.
ul>.item$*3>a[href=#]{text here} gives you li's with numbered class names, placeholders for link urls and text inside.
@@PaulMcCannWebBuilder Nice one, thanks!
a[text here] -
a[attribute="value"]{text} - text
li*3>a[href="#$" title="its $ link"]{$} -
1
2
3
I learn web development for 3 years in Vocational High School, and never ever my teacher teach me this at ALL, and I wonder why I'm so serious about school lessons/projects while I can learn better on youtube. imagine having a teacher like you in my school, probably could launch my own website company with 3 years of your teaching. Thank you so much, u might be my dad on my web dev journey! xD
My friends have been recommended to your channel, so I really grateful for that.
I have been using Emmet for a long while without knowing that I could just hit the Tab button to move inside the elements. You just taught me something really valuable. Thank you!
I don't get tired of saying that you're AMAZING! Thank you!
Kept forgetting about that Lorem Ipsum "trick". I'm just a "hobby web designer", so I always learn something from you. Thank you and keep up the good work!
I noticed how quick you were able to add the tags in one of your last videos, so this video is much appreciated! I tried typing 'html' after watching your sass video at the start of a VS file (without any extension loaded I know of) and it came up with the declaration. I have learnt so much from this new video. You are so cool. I am headed to your courses.
Hi Kevin,
First of all thank your for this video. I'm new with VSCode and it will help me a lot.
I really admire your knowledge and love your calm and relaxing presentation style. I started one of your courses on Scrimba and that's brilliant too. I know a lot of the topic but my knowledge is outdated. You fill up the missing parts and help putting it together.
Thank you!
I just love your videos, Kevin!! - Thank you for putting out such great, hight quality, content.
Love the video. It has what I needed since I am still working on my skills but time is the essence to get project done. Thank you.
Great! Didn't know about emmet at all :) To those who are also wondering (like me) why it doesn't work out of the box... You don't have to install any plugin/extension. Just make sure you save your empty file as HTML file first - then it's working ;)
Fantastic video, Kevin! Love using Emmet, it really saves time!
Thanks, this is super helpful, and getting a cheat sheet too is just the cherry on top!
That GLASS looks cool, Kevin! :) Awesome tut!!
Wish I could hit the like button more than once! Thank you for such clear and kind teaching!
One thing that i like about emmet is that i may have a wrapper div and inside that div i make a nav like .wrapper>nav>ul>li*5>a but then below the nav tag i may want to have a div.container and inside that i may want a div.content. I can use parentheses like this .wrapper>(nav>ul>li*5>a)+.container>.content>img*5 so that is even more advanced but it is so useful. I love emmet
i also really love that it works for css so i can just write bg and hit tab and it completes it and make background #000; for me. Or i can do pos:abs and hit tab and it makes position:absolute; or i can write w for width or h for height and so on
Btw, if someone just wants to try emmet before downloading it, you can try on codepen. They have emmet implemented already :)
Nice refresher.
Amazing "Kevin" and "Emmet", I love you both.
MIND BLOWN...
Thanks for the amazing content man!
Awesome video!!!! Currently learning html5 /css/js. Save me so much time!!
Looks really powerful. I will def use this in the future when my html and css are more productive
I have been following you since I started learning programming, thumbs up!!!
Dude, this was super valuable! Thanks!
Great video Kevin! I'm sure this video will save hours of my time, as well as many other people's time. Thanks! 🤩👍🏽
Wow. This is so handy! Your videos are so fantastic. Thank you!
That's very cool bro! Absolutely wonderful!!!
Thank you so much for this video, This is super helpful!
Life changing. Something I always knew of but always ignored. Thanks.
I had the same reaction you did on the code gen. This is awesome.
Awesome!!! TQVM!! Emmet makes programming fun.
You are just brilliant Kevin
WOW. Really great and will help a lot. Thank you very much for this video.😊😊😊
Awesome , extremely helpful
Very interesting and easy to follow , thank you ❤️❤️
Really Amazing to learn all these shorthand tricks .....Thank you, sir ... Looking for more such tips and tricks
Dude! you rock! This is gold
Awesome video Kevin. Emmett is fantastic.
When I learned about emmet some years back…
I have never been the same again.
Fabulous. You are my hero!
Wow! That's super helpful!
Kevin, you are the man, man.
Thank you for these tips on Emmet -- definitely time savers. One request -- could you do a video on how to use snippets in VS Code. Would be great time saver to have HTML & CSS snippets for the (1) logo and right-aligned nav , (2) hero section with bg image with titles and buttons, (3) row with three or four column flexbox (&/or css grid) layout, and (4) four column footer layout using flexbox (&/or css grid).
perfect combo with Tabnine (AI auto completion extention)
Nice video !
that was bloody amazing
it is an amazing and educative video.
Thanks a lot for the wonderful tips.
I would love you to make a series of designing a whole website from scratch.
This way, we can follow along and learn the tricks necessary for us to keep in mind regarding design in general and also, learn some new tips about CSS and how to make our page responsive and control its responsiveness.
If you can achieve that series, I will be in debt to you forever brother..
I think you are the best that has ever explained CSS, HTML, and bootstrap so far.
Very useful video~!!!! so clear and help me a lot
thanks you!
Keeping your cheatsheet behind a email newsletter aye...
I see you know your Judo well!
Subscribed 👍
Get your hands off my p-tags!
One of the usefull thing I set up in Vscode is the "editor.emmet.action.wrapWithAbbreviation"keyboard shortcut ,
so I can make a selection, or multi selection or place the cursor wherever I want(even in non html files), hit the shortcut, and wrap or insert my emmet generated html in place.
Yup, wrap with Emmet Abbreviation is the best :D
Yes, I saw Kevin using this in a video, and added my own shortcut key for it also. Love it!
Wow! love this!
Wow. I really wished I knew this earlier. Thanks for this!
This makes you look like a pro 😎
Thanks 👍
Thanks Kevin, very helpful
WOW!! Thank you!! This is awesome ! SOOOOOOO FAST!!!
So cool, so handy, I love this so much.
Thank you for this video!
awesome video. thanks man. you are amazing
lol first time in history i know this all lmao
Great video. Very helpful. 😉
U saved me so much time ty
Kevin You'r a saviour :) thankx
you are a hero!!!!
My mind is blown! I have been coding HTML for 9 years, and I didn't know it could be this easy.
wow that Lorem thing got me....how many times did i google lorem ipsum :D the other ones I already knew thanks to you :D
this is sooo awesome!
Love this!
Cool. I love your videos. Thx
Outstanding!
Mind blown!! WOW!!!
Emmet has other 'implicit' tag completions too. div>.classname will give you a child div but a>.classname will give you a span (since a is inline, only inline elements should go inside it). ul>.classname gives you a li, and table tags build themselves. Something like:
table>.row$*4>.first+[colspan=2] gives you all the proper nested html.
Oh, that's a great point Paul! I forgot about that to be honest, I always write span when I need one. Something for part 2!
Thank you!
Thank you Kevin, now I can make full website with one line of code
Yes, I learnt something new today.😊
Amazing!
That's awesome ☺️👌. I got to learn about making siblings in this. Thanks sir.💯
That was awesome
Thanks for making me better at css
Thank You so much You are Great
very useful 👌
You are the king
Thank you as always : ) .
A random question : do you recommend using Bulma as a CSS framework ?
OMG This is awesome
You're the best sir 😇👍🏻
I use enter key like you use tab, but no matter which one I press when typing the name or value in a tag or attribute, it doesn't jump to the next place like you'r yours is jumping at 5:57, instead, it puts in spaces between words (when used tab key) or switch to a new like (when using enter key), do I need to set up something first?
So, we all love Emmet. Anyone named their son that yet? 😂😂
Emmet Brown (I've look it up and the name really is Emmett. You can look how many in wikipedia en.wikipedia.org/wiki/Emmett_(name))
@@SRG-Learn you, sir or ma’am, are why I love the internet haha. Thanks 😊🙏🏽✨
Then you can just tell your kid to EF (or normal people would say Eat Food)
My college professor is named Emmet lol.
Hahah Its cool name btw
its amazing kevin keeeeeeeeeeeeep going
Why am I just finding this out?!!!!🤩
super awesome💪💪🔥🔥
Wow, awesome
whenever you type, there is a dropdown list of options. Is this built in the Emmet? I have installed Emmet, but I don't have this dropdown list when typing.
Thank you
Lorem*15 is fifteen paragraphs of Lorem ipsum 😂😂😂🚀🚀
As a beginner it's awesome to know this
Hey, how do you get emmet to use a car-return new line after each item rather than everything going one a single line?
Can you link the used Emmet extension ? like in the other videos ? Since emmet is not delivered as official extension there are several with different aproach.
Thanks a lot
Your magical man. Thanks so much!!!!
what is the theme names that u're using in vscode?