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)
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.
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!
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
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
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 ;)
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!
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!
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).
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.
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.
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.
Hi Kevin: I'm not sure if this is part of Emmet or not, but at 05:37, as your cursor is between the "", you can press the left "Alt" key (not the "Alt Gr" that's on the right) and hold the mouse button while dragging down, which lets you enter text in all those lines at the same time (in this case, you can put the # used as a placeholder while developing a website). Oh, don't forget to press the "Esc" key once finished to go back to normal. Hope that helps. Thanks & greets from Argentina (Hope it is from England someday) IDsign4U (Marcelo Miguel Bazan)
H$[Heading $]*6 This will create from h1 to h6 With text saying heading 1 till heading 6 , the $ sign count from 1 until desired number , this could be quite handy in some situations like classes or lists Ex Ul>li.list-item-$ *4
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.
Somehow this never caught on with me. I've known about emmet and used it occasionally since it appeared, but there's something about hand-crafting each and every HTML line by myself that really gets me thinking about structure, microformats/structured data, semantics, accessibility and ARIA properties and so on. It's somehow easier for me to write code manually, it's built into my workflow. And while this is rather suboptimal as far as speed goes, it just fits my obsessive-compulsive tendencies I think. :)
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?
I understand that we can go a level deeper with >. Is it possible to go level up? Let's say I do : .section>ul>li*5 and then I want to go back up and continue? Something like .section>ul>li*5
I have a question about section 9:29 of the video. I tried to use lorem , but when I do, it takes a whole one line instead of doing what happened to your video where it got divided into three lines.
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.
Is there no west go going into and element and doing some stuff and coming back out of the container to do some more stuff? Eg. H1>lorem5lorem20? Where < is coming back out of the h1 element
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.
2:00 "don't need alt text on a logo" - I was interested in your thinking here, would it not be helpful anyway to have an alt of "company/sitename logo" for accessibility? or are you planning on using another technology later to ignore the logo? thanks for the vids!
For decorative elements, a blank alt is the best practice. Knowing the logo is there or not there really has no use to someone who's on the site using an assistive technology. They aren't trying to visualize the site, but consume the content of that page/site. And actually, looks like I might have been a bit wrong on this. I was following advice I've heard from accessibility circles though, so I'll keep inquiring, but the a11yproject says to put the company's name there. www.a11yproject.com/posts/2013-01-14-alt-text/
alt="company/sitename logo" is wrong use. A blind person does not know how the logo looks like. You do need though an alt="" so that screen readers understand that it is decorative and not informative image and say nothing about it.
![Chino Pacas - Modo Capone (with Drake & JOP) [Video Visualizador Oficial]](http://i.ytimg.com/vi/Zoc75M8Swhc/mqdefault.jpg)
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)?
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 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!
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 :)
this channel is gold. you deserve a long life kevin!
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
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 😂
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 ;)
My friends have been recommended to your channel, so I really grateful for that.
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 don't get tired of saying that you're AMAZING! Thank you!
Life changing. Something I always knew of but always ignored. Thanks.
I have been following you since I started learning programming, thumbs up!!!
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!
That GLASS looks cool, Kevin! :) Awesome tut!!
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).
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.
Nice refresher.
I had the same reaction you did on the code gen. This is awesome.
Amazing "Kevin" and "Emmet", I love you both.
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!
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!
MIND BLOWN...
Thanks for the amazing content man!
Dude, this was super valuable! Thanks!
That's very cool bro! Absolutely wonderful!!!
Wish I could hit the like button more than once! Thank you for such clear and kind teaching!
You are just brilliant Kevin
Awesome!!! TQVM!! Emmet makes programming fun.
When I learned about emmet some years back…
I have never been the same again.
My mind is blown! I have been coding HTML for 9 years, and I didn't know it could be this easy.
Looks really powerful. I will def use this in the future when my html and css are more productive
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.
Wow. This is so handy! Your videos are so fantastic. Thank you!
I just love your videos, Kevin!! - Thank you for putting out such great, hight quality, content.
Dude! you rock! This is gold
perfect combo with Tabnine (AI auto completion extention)
Nice video !
Awesome video!!!! Currently learning html5 /css/js. Save me so much time!!
Hi Kevin:
I'm not sure if this is part of Emmet or not, but at 05:37, as your cursor is between the "", you can press the left "Alt" key (not the "Alt Gr" that's on the right) and hold the mouse button while dragging down, which lets you enter text in all those lines at the same time (in this case, you can put the # used as a placeholder while developing a website). Oh, don't forget to press the "Esc" key once finished to go back to normal.
Hope that helps.
Thanks & greets from Argentina (Hope it is from England someday)
IDsign4U (Marcelo Miguel Bazan)
Yes, that's a great way to speed things up even more :D
How did it go?
Fantastic video, Kevin! Love using Emmet, it really saves time!
Keeping your cheatsheet behind a email newsletter aye...
I see you know your Judo well!
Subscribed 👍
Get your hands off my p-tags!
Awesome , extremely helpful
Thanks for making me better at css
H$[Heading $]*6
This will create from h1 to h6
With text saying heading 1 till heading 6 , the $ sign count from 1 until desired number , this could be quite handy in some situations like classes or lists
Ex
Ul>li.list-item-$ *4
Really Amazing to learn all these shorthand tricks .....Thank you, sir ... Looking for more such tips and tricks
WOW. Really great and will help a lot. Thank you very much for this video.😊😊😊
Kevin, you are the man, man.
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.
Thanks, this is super helpful, and getting a cheat sheet too is just the cherry on top!
Thank you Kevin, now I can make full website with one line of code
Thank you as always : ) .
A random question : do you recommend using Bulma as a CSS framework ?
Wow. I really wished I knew this earlier. Thanks for this!
that was bloody amazing
Great video Kevin! I'm sure this video will save hours of my time, as well as many other people's time. Thanks! 🤩👍🏽
Awesome video Kevin. Emmett is fantastic.
Fabulous. You are my hero!
As a beginner it's awesome to know this
Very interesting and easy to follow , thank you ❤️❤️
you are a hero!!!!
This makes you look like a pro 😎
Thanks 👍
You can also name classes with numbers in order.. for example if you wanted etc... just type .container--$*2
Thank you so much for this video, This is super helpful!
Why am I just finding this out?!!!!🤩
Somehow this never caught on with me. I've known about emmet and used it occasionally since it appeared, but there's something about hand-crafting each and every HTML line by myself that really gets me thinking about structure, microformats/structured data, semantics, accessibility and ARIA properties and so on. It's somehow easier for me to write code manually, it's built into my workflow. And while this is rather suboptimal as far as speed goes, it just fits my obsessive-compulsive tendencies I think. :)
Thank you for this video!
Wow! That's super helpful!
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?
Yes, I learnt something new today.😊
Thanks Kevin, very helpful
Gonna try this on Brackets
I understand that we can go a level deeper with >. Is it possible to go level up? Let's say I do : .section>ul>li*5 and then I want to go back up and continue? Something like .section>ul>li*5
I think you might have just changed my life. Mostly the life of my shift-finger. How did I not know this.
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
So cool, so handy, I love this so much.
Very useful video~!!!! so clear and help me a lot
thanks you!
I have a question about section 9:29 of the video. I tried to use lorem , but when I do, it takes a whole one line instead of doing what happened to your video where it got divided into three lines.
Sounds like word wrap is off? View -> toggle word wrap
Wow! love this!
WOW!! Thank you!! This is awesome ! SOOOOOOO FAST!!!
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.
Mind blown!! WOW!!!
That's awesome ☺️👌. I got to learn about making siblings in this. Thanks sir.💯
Thx! Really useful!
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
awesome video. thanks man. you are amazing
I've installed the Emmet for Brackets. When I do the !Tab it seems to miss out the ?
Hrm, that's annoying. If you do the html:5 does it work?
@@KevinPowell Nope... Great video thought, very helpful 👍🏻
I’ll try installing Emmet in VS Code.
Thank you!
Kevin You'r a saviour :) thankx
Is there no west go going into and element and doing some stuff and coming back out of the container to do some more stuff?
Eg.
H1>lorem5lorem20?
Where < is coming back out of the h1 element
You are the king
U saved me so much time ty
lol first time in history i know this all lmao
Hey, how do you get emmet to use a car-return new line after each item rather than everything going one a single line?
this is sooo awesome!
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.
Lorem*15 is fifteen paragraphs of Lorem ipsum 😂😂😂🚀🚀
2:00 "don't need alt text on a logo" - I was interested in your thinking here, would it not be helpful anyway to have an alt of "company/sitename logo" for accessibility? or are you planning on using another technology later to ignore the logo?
thanks for the vids!
For decorative elements, a blank alt is the best practice. Knowing the logo is there or not there really has no use to someone who's on the site using an assistive technology. They aren't trying to visualize the site, but consume the content of that page/site.
And actually, looks like I might have been a bit wrong on this. I was following advice I've heard from accessibility circles though, so I'll keep inquiring, but the a11yproject says to put the company's name there. www.a11yproject.com/posts/2013-01-14-alt-text/
alt="company/sitename logo" is wrong use. A blind person does not know how the logo looks like. You do need though an alt="" so that screen readers understand that it is decorative and not informative image and say nothing about it.
Outstanding!
Great video. Very helpful. 😉
its amazing kevin keeeeeeeeeeeeep going
tq . we will rewind yiur video few time to understand more
Which Emmet do you use? Could you do a video on how to setup Visual studio code?