Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

Рет қаралды 207,378

4 жыл бұрын

🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.net/webdevsimplified
Use code KYLE for an additional $50
Emmet is an incredibly powerful tool that allows me to write HTML and CSS at least twice as fast as I could before. Emmet is full of snippets for HTML and CSS which allow you to write a small line of code that will generate a bunch of HTML or CSS based on the Emmet code you wrote. It is built into VSCode and is something that you have most likely used without even realizing it. In this video I go in depth into how you can use Emmet and all the different snippets and syntax that you need to know.
📚 Materials/References:
Emmet Cheat Sheet: docs.emmet.io/cheat-sheet
🧠 Concepts Covered:
- What Emmet is
- How to use Emmet
- The most important concepts in Emmet
- How to use Emmet in CSS
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: www.patreon.com/WebDevSimplified
Twitter: DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#WebDevelopment #WDS #Emmet

Пікірлер: 346

@kajkajajkaa 2 жыл бұрын

Hello to fellow Odin Project students 👋🏼😉 Fantastic video, thank you for the super clear and thorough explanation!

@robs257 2 жыл бұрын

helloooo

@victornta8796 2 жыл бұрын

Lol Hi

@apprentice-tech Жыл бұрын

halu

@gintoki_sakata__ Жыл бұрын

😁😇

@chestermartin2356 Жыл бұрын

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 😅

@andrewdutson7137 2 жыл бұрын

Here from The Odin Project, great information and detailed explanation on the in and outs of Emmet. Thank you! :)

@freguenshoodjean5841 Жыл бұрын

You finished the whole project ?

@crysre 2 ай бұрын

@timemmanson8350 6 ай бұрын

From the Odin Project. Hello to my fellow students. Nice job. Crystal clear explanation!

@odilsoncode 9 ай бұрын

Hello from Odin, I've been using Emmet for so long without even knowing it. Thank you for your video, it's very clear💯

@Bitrey 4 жыл бұрын

I thought the title was exaggerated, but man, this will TRIPLE my speed at writing HTML! Thanks for this awesome tutorial!

@vampbat Жыл бұрын

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)!

@aydanwessels761 Жыл бұрын

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. 🙂

@chonk7221 10 ай бұрын

This is such an absolute banger of a tip! it's so nice to be able preview the outcome...Thank you!

@ldt_ 4 жыл бұрын

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.

@craigburton4447 3 жыл бұрын

The best (and most really powerful) Emmet tutorial I have seen. Love your channel

@webdevtech7154 Жыл бұрын

this was one of the best tutorials i have watched, straight to the point. thanks for the cheat sheet.

@deemon710 2 жыл бұрын

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. 🙏

@b1mind 4 жыл бұрын

(Grouping) vs using the ^ is gold!!!! thank you so much Kyle another solid video!

@WebDevSimplified 4 жыл бұрын

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.

@RichardJNeo 2 жыл бұрын

This is the single greatest thing I’ve learned so far, I hated doing all that stuff!! This makes me so happy!!

@EduardKaresli 4 жыл бұрын

Thanks Kyle! This video has value of gold. Nice work as usual.

@marynguyen8559 4 жыл бұрын

Thanks. That was very useful! I'm a beginner and you made it very digestible and enjoyable :)

@Tabbystripes 4 жыл бұрын

I have been looking for something like this for a long time. Thank you!

@KamomeGakuen Жыл бұрын

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

@kharChehre 4 жыл бұрын

Thanks Kyle! 🤯 You read my mind! I was practicing Emmet a few hours ago lol

@MythicalMaestro69 4 жыл бұрын

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!!!

@ambitiousperson2298 3 жыл бұрын

Thank you so much, man your work is such pure gold keep going & thank you again

@noscreadur 2 жыл бұрын

I'm an Emmet user, and I learned some new tricks in this excellent video. Cheers!

@TejaSwaroopArukoti 4 жыл бұрын

Wonderful stuff I have learnt today. Thank you.

@nizamuddinshaikh3185 4 жыл бұрын

Emmet - what a useful extension! This tutorial - what a concise pointer for use of vast ocean of Emmet! Thank you for sharing. 😃👍🌼

@kittieCoder 4 жыл бұрын

Thanks. Really great. I love your channel.

@fragrantbloom 2 жыл бұрын

This was an amazing video! Thanks a lot Kyle!

@ahmedAltariqi 4 жыл бұрын

It’s insanely powerful!! It saves ton of time :)

@jemsync Жыл бұрын

What a great video for my first day of my Full Stack JavaScript path on The Odin Project.

@adicide9070 3 жыл бұрын

dude, I'm actually switching to JS from Java partly thanks to your vids!!! Super psyched.

@RR-et6zp 2 жыл бұрын

java is useless

@dontbetoxic4387 Жыл бұрын

@@RR-et6zp ?

@TheRastaDan 2 жыл бұрын

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

@kaseymurdoch9974 2 жыл бұрын

I just finished foundations. Really lucky timing for me that they just reworked all this!

@ChristianPretorius 4 жыл бұрын

Thanks Kyle! This is such a useful video!!

@harag9 4 жыл бұрын

Great video, always wondered what you used for the quick snippets. e.g. "script", "link" etc. Thanks!

@Jonathan-lg1xw 2 жыл бұрын

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!

@AGSTRANGERTunisianAuthor 4 жыл бұрын

This was very helpful! Very grateful :)

@ScileSc 4 жыл бұрын

Man I just started doing it as soon as I picked up vsc, I didn´t even notice that it had a name.

@Patrick1985McMahon 4 жыл бұрын

how do you turn Emmet on in VSC?

@ScileSc 4 жыл бұрын

@@Patrick1985McMahon I dunno it´s just there. At least it should be.

@ahurein1641 4 жыл бұрын

@@Patrick1985McMahon prebuilt extension in vscode, it's already activated

@Patrick1985McMahon 4 жыл бұрын

@@ahurein1641 thank you. I will try that.

@ahurein1641 4 жыл бұрын

@@Patrick1985McMahon you're welcome

@abhishekvishwanath8278 4 жыл бұрын

Awesome man!! Thank you!!

@madhavkwatra5888 2 жыл бұрын

knew most of the stuff so skipped a lot. Emmet is really awesome. And your explanations too.

@headwaystudio Жыл бұрын

Your videos have been so helpful on my DIY journey lol. Thanks a ton.

@DungBui13 4 жыл бұрын

Awesome work !!! Thanks for sharing.

@alejandronieto576 Жыл бұрын

Dieses Video anzuschauen war eine sehr gute Zeitinvestition für mich. Danke sehr!!

@simonroyjonesuk 3 ай бұрын

Really useful and clear, Thanks so much.

@pravinkumarone 9 ай бұрын

I learned some new Emmets, thanks for sharing

@ksrele 4 жыл бұрын

This is working in Sublime Text too, thanks for this video.

@albedesigns Жыл бұрын

This is the video I didn't know I needed to see!

@sofianebm7492 4 жыл бұрын

nice trick kyle keep going !!!

@junedkhan8453 4 жыл бұрын

This is some awesome stuff.. Thanks :)

@Sabrecho 5 ай бұрын

This easy-mode life hack utility's been around for at least 4 years now!? Where was I all this time??? 😁 tyvm Kyle!

@MMABeijing 4 жыл бұрын

Hello Kyle, thanks a lot for the video, amazingly short and to the point as usual! question: what software are you using to record and edit your video?

@jalapenohiway 4 жыл бұрын

This is really useful info for beginners like myself! Ty! Also, WHY...would anyone even "Thumbs down" this video???

@deansprivatearchive 3 жыл бұрын

They are just WDS haters, ignore them

@rafatrashidrahi9353 3 жыл бұрын

by mistake, no other way they would hit dislike

@ajlebeau Жыл бұрын

Mind blowing! Thank you!!

@tech_ashwinikumar 2 жыл бұрын

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)

@orangegd224 Жыл бұрын

Really helped me with the speed, thanks :)

@paprika_ame 2 жыл бұрын

This is a great overview! Good luck to my fellow Odin Project students! 😊

@omkarshendge5438 2 жыл бұрын

hey im doing the odin project as well can we connect?

@PatrikRasch 2 жыл бұрын

Incredible. Thank you so much.

@user-uh9mm1ec5j 2 жыл бұрын

great video! thank you so much it was so helpful :)

@rustyshackleford8022 4 ай бұрын

reading/listening to programming tutorials is the only thing that has ever made me think we need better mandatory english classes. take a shot every time you hear the word powerful

@codesiddhi 3 жыл бұрын

Great vid! Well explained :)

@razvanbugoi83 2 жыл бұрын

Very useful video, thank you! The Odin Project brought me here by the way.

@FranciscoBourquin Жыл бұрын

I love you!. You just saved me a bunch of time XOXO from Argentina ♥

@python_programmer7983 Жыл бұрын

I'm definitely going to be using this from now on. Way better.

@muwongenicholas6281 4 жыл бұрын

Wow.....thanks a lot man... this is so helpful

@learningstuff5679 Жыл бұрын

Awesome video. Instant subscribe.

@___-_-_-_-_-_-_-_-_-___ 4 жыл бұрын

Thx for sharing dude 👍🏻

@tfnsansu1727 3 жыл бұрын

great work bro !!

@ankitagarwal4914 4 жыл бұрын

I knew the stuff until 8 minutes and then it blew my mind. Flabbergasted.

@th1nhng0 4 жыл бұрын

Im in love with ur videos

@kerryd2060 4 жыл бұрын

Okay Kyle, I got up early this whole week. Will try it next week too. (-:

@promiseebuka6102 Жыл бұрын

Thanks man, for this great tutorial😊😊

@franciscojavierruizhernand3772 5 ай бұрын

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.

@kongzilla2897 4 жыл бұрын

Thank you again Kyle ..I am your new subscriber now😁

@curiosabouttech 3 жыл бұрын

Thank you so much man you're really wonderful.

@ShermanSitter 3 жыл бұрын

This is SO cool!!! I used this and didn't realize it...or how powerful it was. PS. I came from the clock tutorial. :)

@mathiasonu4936 4 жыл бұрын

Hi Kyle! Could you please do a video of how to code CSS faster? Thank you! Oh, also please continue to collab with Dev Ed!

@KnightToD5 7 ай бұрын

Great content! Here from The Odin Project!

@Mind_exersice Жыл бұрын

Good job sir❤ thanks a lot for your appropriate explains

@milton7074 2 жыл бұрын

Fantastic! Thank you!

@giancarlotuttone1222 Жыл бұрын

Thank you! Really powerful! ;)

@BobCorraro 4 жыл бұрын

Great tutorial, thanks a lot

@channelforambience Жыл бұрын

Yeap, i'm gere because of The Odin Project too! Great video, very nice tips! Let's goooo

@dylanking165 2 жыл бұрын

from the odin project. thanks for the great content.

@DaliborSavic 2 жыл бұрын

Thanks! Good video.

@UmarAlFarooq 4 жыл бұрын

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.

@sashatv138 4 жыл бұрын

Very useful video. Thank you!

@yassinetakeddine3721 4 жыл бұрын

to all people that are wealing to start JAVA complete course you're welcome in my channel !

@user-bb3vi4qh4n 5 ай бұрын

Realy nice video , thanks

@nanthakumar7947 Жыл бұрын

That's very useful ! Thumps Up ! :)

@parvejsolkar123 4 жыл бұрын

Very cool... thanks for sharing 🙏

@daemon491 Жыл бұрын

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

@adriananin3150 Жыл бұрын

Excellent video thanks

@Zephromonia Жыл бұрын

Great content!

@debjitkarmakar5523 4 жыл бұрын

I thought Emmet from GTA San Andreas 😂😂

@emonymph6911 2 жыл бұрын

Emmit is the only framework you need, people should learn this instead of other garbage

@littlebrotha123 2 жыл бұрын

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