Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
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: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#WebDevelopment #WDS #Emmet

Пікірлер: 346

  • @kajkajajkaa
    @kajkajajkaa2 жыл бұрын

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

  • @robs257

    @robs257

    2 жыл бұрын

    helloooo

  • @victornta8796

    @victornta8796

    2 жыл бұрын

    Lol Hi

  • @apprentice-tech

    @apprentice-tech

    Жыл бұрын

    halu

  • @gintoki_sakata__

    @gintoki_sakata__

    Жыл бұрын

    😁😇

  • @chestermartin2356

    @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
    @andrewdutson71372 жыл бұрын

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

  • @freguenshoodjean5841

    @freguenshoodjean5841

    11 ай бұрын

    You finished the whole project ?

  • @crysre

    @crysre

    Ай бұрын

    Hi

  • @timemmanson8350
    @timemmanson83505 ай бұрын

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

  • @odilsoncode
    @odilsoncode8 ай бұрын

    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
    @Bitrey4 жыл бұрын

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

  • @aydanwessels761
    @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

    @chonk7221

    9 ай бұрын

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

  • @vampbat
    @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)!

  • @ldt_
    @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
    @craigburton44473 жыл бұрын

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

  • @webdevtech7154
    @webdevtech7154 Жыл бұрын

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

  • @deemon710
    @deemon7102 жыл бұрын

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

  • @RichardJNeo
    @RichardJNeo2 жыл бұрын

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

  • @KamomeGakuen
    @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

  • @EduardKaresli
    @EduardKaresli4 жыл бұрын

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

  • @b1mind
    @b1mind4 жыл бұрын

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

  • @WebDevSimplified

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

  • @charlottegary5572
    @charlottegary55724 жыл бұрын

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

  • @marynguyen8559
    @marynguyen85594 жыл бұрын

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

  • @ahmedAltariqi
    @ahmedAltariqi4 жыл бұрын

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

  • @kharChehre
    @kharChehre4 жыл бұрын

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

  • @noscreadur
    @noscreadur2 жыл бұрын

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

  • @jemsync
    @jemsync Жыл бұрын

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

  • @fragrantbloom
    @fragrantbloom2 жыл бұрын

    This was an amazing video! Thanks a lot Kyle!

  • @ambitiousperson2298
    @ambitiousperson22983 жыл бұрын

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

  • @TejaSwaroopArukoti
    @TejaSwaroopArukoti4 жыл бұрын

    Wonderful stuff I have learnt today. Thank you.

  • @ChristianPretorius
    @ChristianPretorius4 жыл бұрын

    Thanks Kyle! This is such a useful video!!

  • @abhishekvishwanath8278
    @abhishekvishwanath82784 жыл бұрын

    Awesome man!! Thank you!!

  • @AGSTRANGERTunisianAuthor
    @AGSTRANGERTunisianAuthor4 жыл бұрын

    This was very helpful! Very grateful :)

  • @albedesigns
    @albedesigns Жыл бұрын

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

  • @kittieCoder
    @kittieCoder4 жыл бұрын

    Thanks. Really great. I love your channel.

  • @nizamuddinshaikh3185
    @nizamuddinshaikh31854 жыл бұрын

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

  • @headwaystudio
    @headwaystudio11 ай бұрын

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

  • @DungBui13
    @DungBui134 жыл бұрын

    Awesome work !!! Thanks for sharing.

  • @alejandronieto576
    @alejandronieto576 Жыл бұрын

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

  • @pravinkumarone
    @pravinkumarone8 ай бұрын

    I learned some new Emmets, thanks for sharing

  • @codesiddhi
    @codesiddhi3 жыл бұрын

    Great vid! Well explained :)

  • @Jonathan-lg1xw
    @Jonathan-lg1xw2 жыл бұрын

    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!

  • @junedkhan8453
    @junedkhan84534 жыл бұрын

    This is some awesome stuff.. Thanks :)

  • @sofianebm7492
    @sofianebm74924 жыл бұрын

    nice trick kyle keep going !!!

  • @madhavkwatra5888
    @madhavkwatra58882 жыл бұрын

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

  • @MMABeijing
    @MMABeijing4 жыл бұрын

    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?

  • @ksrele
    @ksrele4 жыл бұрын

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

  • @harag9
    @harag94 жыл бұрын

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

  • @adicide9070
    @adicide90703 жыл бұрын

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

  • @RR-et6zp

    @RR-et6zp

    2 жыл бұрын

    java is useless

  • @dontbetoxic4387

    @dontbetoxic4387

    Жыл бұрын

    @@RR-et6zp ?

  • @PatrikRasch
    @PatrikRasch2 жыл бұрын

    Incredible. Thank you so much.

  • @Sabrecho
    @Sabrecho4 ай бұрын

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

  • @orangegd224
    @orangegd224 Жыл бұрын

    Really helped me with the speed, thanks :)

  • @ajlebeau
    @ajlebeau Жыл бұрын

    Mind blowing! Thank you!!

  • @simonroyjonesuk
    @simonroyjonesuk2 ай бұрын

    Really useful and clear, Thanks so much.

  • @___-_-_-_-_-_-_-_-_-___
    @___-_-_-_-_-_-_-_-_-___4 жыл бұрын

    Thx for sharing dude 👍🏻

  • @th1nhng0
    @th1nhng04 жыл бұрын

    Im in love with ur videos

  • @ScileSc
    @ScileSc4 жыл бұрын

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

  • @Patrick1985McMahon

    @Patrick1985McMahon

    4 жыл бұрын

    how do you turn Emmet on in VSC?

  • @ScileSc

    @ScileSc

    4 жыл бұрын

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

  • @ahurein1641

    @ahurein1641

    4 жыл бұрын

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

  • @Patrick1985McMahon

    @Patrick1985McMahon

    4 жыл бұрын

    @@ahurein1641 thank you. I will try that.

  • @ahurein1641

    @ahurein1641

    4 жыл бұрын

    @@Patrick1985McMahon you're welcome

  • @muwongenicholas6281
    @muwongenicholas62814 жыл бұрын

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

  • @tfnsansu1727
    @tfnsansu17273 жыл бұрын

    great work bro !!

  • @TheRastaDan
    @TheRastaDan2 жыл бұрын

    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

    @kaseymurdoch9974

    2 жыл бұрын

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

  • @milton7074
    @milton70742 жыл бұрын

    Fantastic! Thank you!

  • @user-uh9mm1ec5j
    @user-uh9mm1ec5j2 жыл бұрын

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

  • @learningstuff5679
    @learningstuff5679 Жыл бұрын

    Awesome video. Instant subscribe.

  • @razvanbugoi83
    @razvanbugoi832 жыл бұрын

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

  • @KnightToD5
    @KnightToD56 ай бұрын

    Great content! Here from The Odin Project!

  • @giancarlotuttone1222
    @giancarlotuttone1222 Жыл бұрын

    Thank you! Really powerful! ;)

  • @BobCorraro
    @BobCorraro4 жыл бұрын

    Great tutorial, thanks a lot

  • @FranciscoBourquin
    @FranciscoBourquin Жыл бұрын

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

  • @promiseebuka6102
    @promiseebuka6102 Жыл бұрын

    Thanks man, for this great tutorial😊😊

  • @kerryd2060
    @kerryd20604 жыл бұрын

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

  • @python_programmer7983
    @python_programmer7983 Жыл бұрын

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

  • @curiosabouttech
    @curiosabouttech3 жыл бұрын

    Thank you so much man you're really wonderful.

  • @MythicalMaestro69
    @MythicalMaestro694 жыл бұрын

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

  • @kongzilla2897
    @kongzilla28974 жыл бұрын

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

  • @DaliborSavic
    @DaliborSavic2 жыл бұрын

    Thanks! Good video.

  • @nanthakumar7947
    @nanthakumar7947 Жыл бұрын

    That's very useful ! Thumps Up ! :)

  • @user-bb3vi4qh4n
    @user-bb3vi4qh4n4 ай бұрын

    Realy nice video , thanks

  • @parvejsolkar123
    @parvejsolkar1234 жыл бұрын

    Very cool... thanks for sharing 🙏

  • @UmarAlFarooq
    @UmarAlFarooq4 жыл бұрын

    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.

  • @ankitagarwal4914
    @ankitagarwal49144 жыл бұрын

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

  • @Zephromonia
    @Zephromonia Жыл бұрын

    Great content!

  • @Mind_exersice
    @Mind_exersice Жыл бұрын

    Good job sir❤ thanks a lot for your appropriate explains

  • @ShermanSitter
    @ShermanSitter3 жыл бұрын

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

  • @paprika_ame
    @paprika_ame2 жыл бұрын

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

  • @omkarshendge5438

    @omkarshendge5438

    2 жыл бұрын

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

  • @sashatv138
    @sashatv1384 жыл бұрын

    Very useful video. Thank you!

  • @yassinetakeddine3721

    @yassinetakeddine3721

    4 жыл бұрын

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

  • @guerra_dos_bichos
    @guerra_dos_bichos6 ай бұрын

    i'm in love with emmet

  • @adriananin3150
    @adriananin3150 Жыл бұрын

    Excellent video thanks

  • @dylanking165
    @dylanking1652 жыл бұрын

    from the odin project. thanks for the great content.

  • @suvrotica
    @suvrotica Жыл бұрын

    Very good and helpful 👍

  • @lankeshprabhashwarap.a.d.373
    @lankeshprabhashwarap.a.d.3734 жыл бұрын

    Very helpful!

  • @jalapenohiway
    @jalapenohiway4 жыл бұрын

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

  • @deansprivatearchive

    @deansprivatearchive

    3 жыл бұрын

    They are just WDS haters, ignore them

  • @rafatrashidrahi9353

    @rafatrashidrahi9353

    3 жыл бұрын

    by mistake, no other way they would hit dislike

  • @channelforambience
    @channelforambience Жыл бұрын

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

  • @jagadeshmurugan5254
    @jagadeshmurugan52542 жыл бұрын

    Thanks for the nice tutorial

  • @debjitkarmakar5523
    @debjitkarmakar55234 жыл бұрын

    I thought Emmet from GTA San Andreas 😂😂

  • @mathiasonu4936
    @mathiasonu49364 жыл бұрын

    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!

  • @1222medi
    @1222medi Жыл бұрын

    Great vid thank you

  • @PaulysGarage
    @PaulysGarage2 жыл бұрын

    What a great video👍

  • @daemon491
    @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

  • @mananwebandall1203
    @mananwebandall12034 жыл бұрын

    you aRe just awesome budy... i ❤ u 3000

  • @UNKNWN96
    @UNKNWN96 Жыл бұрын

    TOP led me here, thanks for the awesome video!

  • @godnonamesleft
    @godnonamesleft2 жыл бұрын

    This is so useful oh my goodness

  • @halakesserwan1445
    @halakesserwan14454 жыл бұрын

    Thanks alot!!!

  • @valentineemmanuel6337
    @valentineemmanuel63374 жыл бұрын

    Another great video... What tool do you use in making your videos

  • @CheshireElex
    @CheshireElex4 жыл бұрын

    Works on Webstorm/Phpstorm as well. Just hit Tab instead of Enter.

  • @sifatgamil4757
    @sifatgamil47573 жыл бұрын

    Great job my dear

  • @ninobien
    @ninobien2 жыл бұрын

    Super-duper, thanx! :-)