Is anyone else feeling the same relief having spent months working on chess and even more months on Ruby in general, that they didn't actually just forget all of HTML and CSS?? I was so concerned I'd have forgotten a lot, makes me feel like I might actually be able to do this stuff professionally some day 😅
If you hit Ctrl + i, you can trigger VS Code to suggest an Emmet snippet. If you're building a snippet and aren't getting a trigger, this will do it for you. 🙂
I started using VSCode because of you, I even converted my boss from using VIM that has never used any IDE or graphical editor to use this. Now you're showing me yet another trick in VSCode that I didn't know about. Thanks for this.
So happy to see other Odin students here! I looked up a few of your videos early on to learn JS when I found I needed an alternate teaching style to a few video tutorials the course recommended. Thank you so much for your content! Happy they officially linked you (finally)!
notes: Emmet shortcuts . class # div [] attributes {} values inside divs $ to give numbering, $$ to 0 padd .abc*5{item number $} div*5 = show 5 divs + for sibling e.g header+main+footer or (header>nav)+main+footer form:post (to create forms) form:post>(.group>label+input:text)+(group>label+input:number) Inside css position bg (background) bgc (background color) w10 or w10em or w10% (width of 10 px etc)
I hate I didn't know about this channel back then when I started learning code. This is Scam videos!! It didn't make me type HTML 2 times faster, but 5 times faster!!! Thank you for making this tutorial. Subscribed!!!
THIS! This is the kinda stuff I know VC can do but it's a pain to find and get used to. Thank you not just for teaching it, but for demonstrating it as well. 🙏
i've seen so many videos like this that are so boring that i can't retain anything, thanks for making one that's really clean and straightforward and easy to follow. most painless tutorial video i've seen in awhile
Who are the 10 assholes who DISLIKED this video?!! Thank you for this video. It's awesome like all your others. Fantastic quality. You are a real-life hero.
Comming from the brand new Intermediate HTML and CSS course of TheOdinProject, not sure if I would really need it. Damn was I wrong. This is really helpful and I'm abit ashamed finding out about this only now
was convinced to ditch VS code and try and learn VIM but there are just so many cool out of the box things you can do with VS code without the steep learning curve such as emmet. i will try learning VIM at some point because there are some cool keybindings, but even in VS code and other programs you can actually implement those bindings. VIM though, does allow for some cool things you can do right from the terminal but anyways, VS code is a great tool IMO for a beginner to get efficient much quicker
5:45 how can we select the child element in css like can we take a h1 inside a div and then enter the css for h1 as it will decrease my for creating a new div for h1 seperate que:- 6: 32 can we use something like ul*2>li*2 to create two ul with 2 li nested inside them
First of all I didnt even know of class and id stacking, and then you had attributes too? Why am I not using this a lot. This legit would save me 30 mins to an hour for creating new HTML, CSS, and JS projects
Not only that, it helps you avoid making typos. Emmet is really useful in js too when you for example have to write "getElementById" quickly and without errors
Hello to fellow Odin Project students 👋🏼😉
Fantastic video, thank you for the super clear and thorough explanation!
helloooo
Lol Hi
halu
😁😇
Is anyone else feeling the same relief having spent months working on chess and even more months on Ruby in general, that they didn't actually just forget all of HTML and CSS?? I was so concerned I'd have forgotten a lot, makes me feel like I might actually be able to do this stuff professionally some day 😅
Here from The Odin Project, great information and detailed explanation on the in and outs of Emmet. Thank you! :)
You finished the whole project ?
Hi
From the Odin Project. Hello to my fellow students.
Nice job. Crystal clear explanation!
Hello from Odin, I've been using Emmet for so long without even knowing it. Thank you for your video, it's very clear💯
If you hit Ctrl + i, you can trigger VS Code to suggest an Emmet snippet. If you're building a snippet and aren't getting a trigger, this will do it for you. 🙂
This is such an absolute banger of a tip! it's so nice to be able preview the outcome...Thank you!
Thanks for this. Ctrl + Space does the same thing. I find it easier to use this shortcut.
I thought the title was exaggerated, but man, this will TRIPLE my speed at writing HTML! Thanks for this awesome tutorial!
I started using VSCode because of you, I even converted my boss from using VIM that has never used any IDE or graphical editor to use this. Now you're showing me yet another trick in VSCode that I didn't know about. Thanks for this.
So happy to see other Odin students here! I looked up a few of your videos early on to learn JS when I found I needed an alternate teaching style to a few video tutorials the course recommended. Thank you so much for your content! Happy they officially linked you (finally)!
(Grouping) vs using the ^ is gold!!!! thank you so much Kyle another solid video!
You're welcome! I try to throw in those little nuggets of things that I find useful since hopefully others will find it useful as well.
notes:
Emmet shortcuts
. class
# div
[] attributes
{} values inside divs
$ to give numbering, $$ to 0 padd
.abc*5{item number $}
div*5 = show 5 divs
+ for sibling e.g header+main+footer
or (header>nav)+main+footer
form:post (to create forms)
form:post>(.group>label+input:text)+(group>label+input:number)
Inside css
position
bg (background)
bgc (background color)
w10 or w10em or w10% (width of 10 px etc)
My face lit up when you started showing off how we could shorthand classes and divs etc, this is such a time saver and is really exciting
I hate I didn't know about this channel back then when I started learning code.
This is Scam videos!!
It didn't make me type HTML 2 times faster, but 5 times faster!!!
Thank you for making this tutorial. Subscribed!!!
This is the single greatest thing I’ve learned so far, I hated doing all that stuff!! This makes me so happy!!
The best (and most really powerful) Emmet tutorial I have seen. Love your channel
infact, as a beginner i have decided to stop watching all other tutorials. you make things simply to my understanding. thank you
dude, I'm actually switching to JS from Java partly thanks to your vids!!! Super psyched.
java is useless
@@RR-et6zp ?
Yeap, i'm gere because of The Odin Project too!
Great video, very nice tips!
Let's goooo
THIS! This is the kinda stuff I know VC can do but it's a pain to find and get used to. Thank you not just for teaching it, but for demonstrating it as well. 🙏
i've seen so many videos like this that are so boring that i can't retain anything, thanks for making one that's really clean and straightforward and easy to follow. most painless tutorial video i've seen in awhile
This is really useful info for beginners like myself! Ty! Also, WHY...would anyone even "Thumbs down" this video???
They are just WDS haters, ignore them
by mistake, no other way they would hit dislike
You are so generous. Thanks, learnt a lot about how powerful is Emmet!
This is a great overview! Good luck to my fellow Odin Project students! 😊
hey im doing the odin project as well can we connect?
Dieses Video anzuschauen war eine sehr gute Zeitinvestition für mich. Danke sehr!!
Idk who Emmet is IRL but I love him
Who are the 10 assholes who DISLIKED this video?!! Thank you for this video. It's awesome like all your others. Fantastic quality. You are a real-life hero.
Thanks. Really great. I love your channel.
this was one of the best tutorials i have watched, straight to the point. thanks for the cheat sheet.
What a great video for my first day of my Full Stack JavaScript path on The Odin Project.
I knew the stuff until 8 minutes and then it blew my mind. Flabbergasted.
Comming from the brand new Intermediate HTML and CSS course of TheOdinProject, not sure if I would really need it. Damn was I wrong. This is really helpful and I'm abit ashamed finding out about this only now
I just finished foundations. Really lucky timing for me that they just reworked all this!
Very useful video, thank you!
The Odin Project brought me here by the way.
It’s insanely powerful!! It saves ton of time :)
This easy-mode life hack utility's been around for at least 4 years now!? Where was I all this time??? 😁 tyvm Kyle!
I'm an Emmet user, and I learned some new tricks in this excellent video. Cheers!
I'm definitely going to be using this from now on. Way better.
Jajaja, I'm seeing this video because I'm learning in The Odin Project and I found many people that is learning too, it's a pleasure.
This is working in Sublime Text too, thanks for this video.
this video..... That's POWERFUL! Thanks for all the power!
05:16&& "tab" for filling content shortcut🔥
9:40&& instead of increment emmet
02:10&& typing tag without bracket (shortcut)
Man I just started doing it as soon as I picked up vsc, I didn´t even notice that it had a name.
how do you turn Emmet on in VSC?
@@Patrick1985McMahon I dunno it´s just there. At least it should be.
@@Patrick1985McMahon prebuilt extension in vscode, it's already activated
@@ahurein1641 thank you. I will try that.
@@Patrick1985McMahon you're welcome
You can get it also for Atom Editor.
File > Settings > Install (search for emmet)
Emmit is the only framework you need, people should learn this instead of other garbage
I have been looking for something like this for a long time. Thank you!
This is the video I didn't know I needed to see!
Thanks Kyle!
This video has value of gold.
Nice work as usual.
Great content! Here from The Odin Project!
Your videos have been so helpful on my DIY journey lol. Thanks a ton.
I know Emmet it's amazing and work very quickly. I'm from Pakistan
Thanks Kyle! 🤯
You read my mind! I was practicing Emmet a few hours ago lol
I love you!. You just saved me a bunch of time XOXO from Argentina ♥
knew most of the stuff so skipped a lot. Emmet is really awesome.
And your explanations too.
Really helped me with the speed, thanks :)
well this definately saves me a lot of time :) I knew I had shortcuts and so on in my ide, but never knew I could do all this!
Awesome man!! Thank you!!
fantastic video packed with info. thank you!!
Wonderful stuff I have learnt today. Thank you.
Thanks. That was very useful! I'm a beginner and you made it very digestible and enjoyable :)
Wow.....thanks a lot man... this is so helpful
from the odin project. thanks for the great content.
nice trick kyle keep going !!!
The Odin Project user passing by!
a fellow odin project strawhat here
@@ashishkkrishna Nakama!
Really useful and clear, Thanks so much.
Thanks Kyle! This is such a useful video!!
This is some awesome stuff.. Thanks :)
This is SO cool!!! I used this and didn't realize it...or how powerful it was. PS. I came from the clock tutorial. :)
Im in love with ur videos
Okay Kyle, I got up early this whole week. Will try it next week too. (-:
I think it's really powerful
Thank you so much, man
your work is such pure gold
keep going & thank you again
Emmet - what a useful extension! This tutorial - what a concise pointer for use of vast ocean of Emmet! Thank you for sharing. 😃👍🌼
This was an amazing video! Thanks a lot Kyle!
Hello, I am here because I am taking up the Odin Project course :D
Mind blowing! Thank you!!
Great explanation.
Nice work man.
Can you please zoom the screen to the area we need to see. Watching on mobile is hard. Great info. Thanks
Awesome video. Instant subscribe.
was convinced to ditch VS code and try and learn VIM but there are just so many cool out of the box things you can do with VS code without the steep learning curve such as emmet.
i will try learning VIM at some point because there are some cool keybindings, but even in VS code and other programs you can actually implement those bindings. VIM though, does allow for some cool things you can do right from the terminal but anyways, VS code is a great tool IMO for a beginner to get efficient much quicker
Thank you again Kyle ..I am your new subscriber now😁
Wow it's really powerful, it's very powerful, really powerful, powerful
This was very helpful! Very grateful :)
bro this just made me pause the video and see how cool this shit is....man!! damn
*say
Fabulous! Thanks - well organized and great voice
Thank you!
I am lucky to know about emmet soon I started learning HTML.
That is lucky. I didn't find out about Emmet until years after I started programming HTML.
Thx for sharing dude 👍🏻
great work bro !!
Thank you Odin Project and peers
5:45 how can we select the child element in css
like can we take a h1 inside a div and then enter the css for h1 as it will decrease my for creating a new div for h1
seperate que:- 6: 32 can we use something like ul*2>li*2 to create two ul with 2 li nested inside them
Great video, always wondered what you used for the quick snippets. e.g. "script", "link" etc. Thanks!
Awesome work !!! Thanks for sharing.
First of all I didnt even know of class and id stacking, and then you had attributes too? Why am I not using this a lot. This legit would save me 30 mins to an hour for creating new HTML, CSS, and JS projects
Not only that, it helps you avoid making typos. Emmet is really useful in js too when you for example have to write "getElementById" quickly and without errors
T.O.P squad!
I thought Emmet from GTA San Andreas 😂😂
Great vid! Well explained :)
Incredible. Thank you so much.
Thanks man, for this great tutorial😊😊
Thank you! Really powerful! ;)
One of your best videos brothe thank you
Thank you so much!
When I was learning react.js, JSX was really a strange to me but later on I found emmet supports too.
Works on Webstorm/Phpstorm as well. Just hit Tab instead of Enter.
That's very useful ! Thumps Up ! :)
TOP led me here, thanks for the awesome video!
Fantastic! Thank you!