Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 มิ.ย. 2024
  • 🚨 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

ความคิดเห็น • 345

  • @kajkajajkaa
    @kajkajajkaa 2 ปีที่แล้ว +660

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

    • @robs257
      @robs257 2 ปีที่แล้ว +7

      helloooo

    • @victornta8796
      @victornta8796 2 ปีที่แล้ว +5

      Lol Hi

    • @apprentice-tech
      @apprentice-tech ปีที่แล้ว +1

      halu

    • @gintoki_sakata__
      @gintoki_sakata__ ปีที่แล้ว

      😁😇

    • @chestermartin2356
      @chestermartin2356 ปีที่แล้ว +5

      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
    @andrewdutson7137 2 ปีที่แล้ว +304

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

    • @freguenshoodjean5841
      @freguenshoodjean5841 11 หลายเดือนก่อน +1

      You finished the whole project ?

    • @crysre
      @crysre หลายเดือนก่อน

      Hi

  • @timemmanson8350
    @timemmanson8350 5 หลายเดือนก่อน +12

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

  • @odilsoncode
    @odilsoncode 8 หลายเดือนก่อน +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
    @Bitrey 4 ปีที่แล้ว +49

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

  • @vampbat
    @vampbat ปีที่แล้ว +21

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

  • @craigburton4447
    @craigburton4447 3 ปีที่แล้ว +4

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

  • @ldt_
    @ldt_ 4 ปีที่แล้ว +21

    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.

  • @webdevtech7154
    @webdevtech7154 ปีที่แล้ว +1

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

  • @deemon710
    @deemon710 2 ปีที่แล้ว +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. 🙏

  • @EduardKaresli
    @EduardKaresli 4 ปีที่แล้ว +2

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

  • @b1mind
    @b1mind 4 ปีที่แล้ว +5

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

    • @WebDevSimplified
      @WebDevSimplified  4 ปีที่แล้ว +6

      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.

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

  • @RichardJNeo
    @RichardJNeo 2 ปีที่แล้ว

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

  • @marynguyen8559
    @marynguyen8559 4 ปีที่แล้ว +2

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

  • @aydanwessels761
    @aydanwessels761 ปีที่แล้ว +23

    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 หลายเดือนก่อน +1

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

  • @kharChehre
    @kharChehre 4 ปีที่แล้ว +2

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

  • @charlottegary5572
    @charlottegary5572 4 ปีที่แล้ว

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

  • @noscreadur
    @noscreadur 2 ปีที่แล้ว

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

  • @ScileSc
    @ScileSc 4 ปีที่แล้ว +25

    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 ปีที่แล้ว +1

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

    • @ahurein1641
      @ahurein1641 4 ปีที่แล้ว +1

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

  • @TejaSwaroopArukoti
    @TejaSwaroopArukoti 4 ปีที่แล้ว +1

    Wonderful stuff I have learnt today. Thank you.

  • @fragrantbloom
    @fragrantbloom 2 ปีที่แล้ว

    This was an amazing video! Thanks a lot Kyle!

  • @AGSTRANGERTunisianAuthor
    @AGSTRANGERTunisianAuthor 4 ปีที่แล้ว +1

    This was very helpful! Very grateful :)

  • @jemsync
    @jemsync ปีที่แล้ว

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

  • @ChristianPretorius
    @ChristianPretorius 4 ปีที่แล้ว +1

    Thanks Kyle! This is such a useful video!!

  • @ahmedAltariqi
    @ahmedAltariqi 4 ปีที่แล้ว +5

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

  • @ambitiousperson2298
    @ambitiousperson2298 3 ปีที่แล้ว

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

  • @DungBui13
    @DungBui13 4 ปีที่แล้ว

    Awesome work !!! Thanks for sharing.

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 4 ปีที่แล้ว

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

  • @headwaystudio
    @headwaystudio 11 หลายเดือนก่อน

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

  • @abhishekvishwanath8278
    @abhishekvishwanath8278 4 ปีที่แล้ว +1

    Awesome man!! Thank you!!

  • @kittieCoder
    @kittieCoder 4 ปีที่แล้ว +3

    Thanks. Really great. I love your channel.

  • @TheRastaDan
    @TheRastaDan 2 ปีที่แล้ว +9

    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 ปีที่แล้ว +1

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

  • @PatrikRasch
    @PatrikRasch 2 ปีที่แล้ว

    Incredible. Thank you so much.

  • @sofianebm7492
    @sofianebm7492 4 ปีที่แล้ว

    nice trick kyle keep going !!!

  • @codesiddhi
    @codesiddhi 3 ปีที่แล้ว

    Great vid! Well explained :)

  • @pravinkumarone
    @pravinkumarone 8 หลายเดือนก่อน

    I learned some new Emmets, thanks for sharing

  • @ajlebeau
    @ajlebeau ปีที่แล้ว

    Mind blowing! Thank you!!

  • @alejandronieto576
    @alejandronieto576 ปีที่แล้ว

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

  • @albedesigns
    @albedesigns ปีที่แล้ว

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

  • @ksrele
    @ksrele 4 ปีที่แล้ว +2

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

  • @simonroyjonesuk
    @simonroyjonesuk 2 หลายเดือนก่อน

    Really useful and clear, Thanks so much.

  • @junedkhan8453
    @junedkhan8453 4 ปีที่แล้ว +2

    This is some awesome stuff.. Thanks :)

  • @Jonathan-lg1xw
    @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!

  • @tfnsansu1727
    @tfnsansu1727 3 ปีที่แล้ว

    great work bro !!

  • @madhavkwatra5888
    @madhavkwatra5888 2 ปีที่แล้ว

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

  • @orangegd224
    @orangegd224 ปีที่แล้ว

    Really helped me with the speed, thanks :)

  • @___-_-_-_-_-_-_-_-_-___
    @___-_-_-_-_-_-_-_-_-___ 4 ปีที่แล้ว +1

    Thx for sharing dude 👍🏻

  • @milton7074
    @milton7074 2 ปีที่แล้ว

    Fantastic! Thank you!

  • @adicide9070
    @adicide9070 3 ปีที่แล้ว +6

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

  • @harag9
    @harag9 4 ปีที่แล้ว +1

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

  • @learningstuff5679
    @learningstuff5679 ปีที่แล้ว

    Awesome video. Instant subscribe.

  • @user-uh9mm1ec5j
    @user-uh9mm1ec5j 2 ปีที่แล้ว

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

  • @muwongenicholas6281
    @muwongenicholas6281 4 ปีที่แล้ว +1

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

  • @MythicalMaestro69
    @MythicalMaestro69 4 ปีที่แล้ว +9

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

  • @promiseebuka6102
    @promiseebuka6102 ปีที่แล้ว

    Thanks man, for this great tutorial😊😊

  • @th1nhng0
    @th1nhng0 4 ปีที่แล้ว +2

    Im in love with ur videos

  • @DaliborSavic
    @DaliborSavic 2 ปีที่แล้ว

    Thanks! Good video.

  • @Sabrecho
    @Sabrecho 4 หลายเดือนก่อน

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

  • @KnightToD5
    @KnightToD5 6 หลายเดือนก่อน

    Great content! Here from The Odin Project!

  • @BobCorraro
    @BobCorraro 4 ปีที่แล้ว

    Great tutorial, thanks a lot

  • @giancarlotuttone1222
    @giancarlotuttone1222 ปีที่แล้ว

    Thank you! Really powerful! ;)

  • @kongzilla2897
    @kongzilla2897 4 ปีที่แล้ว

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

  • @curiosabouttech
    @curiosabouttech 2 ปีที่แล้ว

    Thank you so much man you're really wonderful.

  • @python_programmer7983
    @python_programmer7983 ปีที่แล้ว

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

  • @razvanbugoi83
    @razvanbugoi83 2 ปีที่แล้ว +1

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

  • @user-bb3vi4qh4n
    @user-bb3vi4qh4n 4 หลายเดือนก่อน

    Realy nice video , thanks

  • @adriananin3150
    @adriananin3150 ปีที่แล้ว

    Excellent video thanks

  • @Mind_exersice
    @Mind_exersice ปีที่แล้ว

    Good job sir❤ thanks a lot for your appropriate explains

  • @dylanking165
    @dylanking165 2 ปีที่แล้ว

    from the odin project. thanks for the great content.

  • @parvejsolkar123
    @parvejsolkar123 4 ปีที่แล้ว

    Very cool... thanks for sharing 🙏

  • @FranciscoBourquin
    @FranciscoBourquin ปีที่แล้ว

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

  • @jalapenohiway
    @jalapenohiway 4 ปีที่แล้ว +6

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

  • @sashatv138
    @sashatv138 4 ปีที่แล้ว

    Very useful video. Thank you!

    • @yassinetakeddine3721
      @yassinetakeddine3721 4 ปีที่แล้ว +1

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

  • @Zephromonia
    @Zephromonia ปีที่แล้ว

    Great content!

  • @kerryd2060
    @kerryd2060 4 ปีที่แล้ว +1

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

  • @ankitagarwal4914
    @ankitagarwal4914 4 ปีที่แล้ว +1

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

  • @paprika_ame
    @paprika_ame 2 ปีที่แล้ว +4

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

    • @omkarshendge5438
      @omkarshendge5438 2 ปีที่แล้ว +1

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

  • @jagadeshmurugan5254
    @jagadeshmurugan5254 2 ปีที่แล้ว

    Thanks for the nice tutorial

  • @nanthakumar7947
    @nanthakumar7947 11 หลายเดือนก่อน

    That's very useful ! Thumps Up ! :)

  • @ShermanSitter
    @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. :)

  • @suvrotica
    @suvrotica ปีที่แล้ว

    Very good and helpful 👍

  • @1222medi
    @1222medi ปีที่แล้ว

    Great vid thank you

  • @guerra_dos_bichos
    @guerra_dos_bichos 6 หลายเดือนก่อน

    i'm in love
    with emmet

  • @channelforambience
    @channelforambience ปีที่แล้ว +1

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

  • @lankeshprabhashwarap.a.d.373
    @lankeshprabhashwarap.a.d.373 4 ปีที่แล้ว

    Very helpful!

  • @franciscojavierruizhernand3772
    @franciscojavierruizhernand3772 4 หลายเดือนก่อน

    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.

  • @sifatgamil4757
    @sifatgamil4757 3 ปีที่แล้ว

    Great job my dear

  • @paulkensmoe8371
    @paulkensmoe8371 2 ปีที่แล้ว

    What a great video👍

  • @UNKNWN96
    @UNKNWN96 ปีที่แล้ว

    TOP led me here, thanks for the awesome video!

  • @halakesserwan1445
    @halakesserwan1445 4 ปีที่แล้ว

    Thanks alot!!!

  • @fatehgill5656
    @fatehgill5656 ปีที่แล้ว

    this video is really powerful

  • @MMABeijing
    @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?

  • @lisaweber9446
    @lisaweber9446 4 ปีที่แล้ว +5

    Fabulous! Thanks - well organized and great voice

  • @godnonamesleft
    @godnonamesleft 2 ปีที่แล้ว

    This is so useful oh my goodness

  • @fragon8597
    @fragon8597 ปีที่แล้ว

    Thank you, sir

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

  • @rustyshackleford8022
    @rustyshackleford8022 3 หลายเดือนก่อน

    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

  • @mananwebandall1203
    @mananwebandall1203 4 ปีที่แล้ว +1

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

  • @Kotovar
    @Kotovar 9 หลายเดือนก่อน

    Thanks!