Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

Поделиться
HTML-код
  • Опубликовано: 27 июл 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

Комментарии • 347

  • @kajkajajkaa
    @kajkajajkaa 2 года назад +686

    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 года назад +315

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

  • @timemmanson8350
    @timemmanson8350 6 месяцев назад +18

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

  • @odilsoncode
    @odilsoncode 9 месяцев назад +16

    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 года назад +51

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

  • @craigburton4447
    @craigburton4447 3 года назад +5

    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.

  • @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 10 месяцев назад +1

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

  • @vampbat
    @vampbat Год назад +22

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

  • @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 года назад +3

    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.

  • @RichardJNeo
    @RichardJNeo 2 года назад +1

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

  • @b1mind
    @b1mind 4 года назад +5

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

    • @WebDevSimplified
      @WebDevSimplified  4 года назад +7

      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

  • @Tabbystripes
    @Tabbystripes 4 года назад

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

  • @kharChehre
    @kharChehre 4 года назад +2

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

  • @ambitiousperson2298
    @ambitiousperson2298 3 года назад

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

  • @ahmedAltariqi
    @ahmedAltariqi 4 года назад +5

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

  • @TejaSwaroopArukoti
    @TejaSwaroopArukoti 4 года назад +1

    Wonderful stuff I have learnt today. Thank you.

  • @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. 😃👍🌼

  • @noscreadur
    @noscreadur 2 года назад

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

  • @fragrantbloom
    @fragrantbloom 2 года назад

    This was an amazing video! Thanks a lot Kyle!

  • @ChristianPretorius
    @ChristianPretorius 4 года назад +1

    Thanks Kyle! This is such a useful video!!

  • @kittieCoder
    @kittieCoder 4 года назад +3

    Thanks. Really great. I love your channel.

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

  • @AGSTRANGERTunisianAuthor
    @AGSTRANGERTunisianAuthor 4 года назад +1

    This was very helpful! Very grateful :)

  • @harag9
    @harag9 4 года назад +1

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

  • @headwaystudio
    @headwaystudio Год назад

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

  • @madhavkwatra5888
    @madhavkwatra5888 2 года назад

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

  • @jemsync
    @jemsync Год назад

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

  • @abhishekvishwanath8278
    @abhishekvishwanath8278 4 года назад +1

    Awesome man!! Thank you!!

  • @DungBui13
    @DungBui13 4 года назад

    Awesome work !!! Thanks for sharing.

  • @junedkhan8453
    @junedkhan8453 4 года назад +2

    This is some awesome stuff.. Thanks :)

  • @simonroyjonesuk
    @simonroyjonesuk 3 месяца назад

    Really useful and clear, Thanks so much.

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

  • @pravinkumarone
    @pravinkumarone 9 месяцев назад

    I learned some new Emmets, thanks for sharing

  • @ajlebeau
    @ajlebeau Год назад

    Mind blowing! Thank you!!

  • @sofianebm7492
    @sofianebm7492 4 года назад

    nice trick kyle keep going !!!

  • @user-uh9mm1ec5j
    @user-uh9mm1ec5j 2 года назад

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

  • @orangegd224
    @orangegd224 Год назад

    Really helped me with the speed, thanks :)

  • @codesiddhi
    @codesiddhi 3 года назад

    Great vid! Well explained :)

  • @th1nhng0
    @th1nhng0 4 года назад +2

    Im in love with ur videos

  • @FranciscoBourquin
    @FranciscoBourquin Год назад

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

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

  • @PatrikRasch
    @PatrikRasch 2 года назад

    Incredible. Thank you so much.

  • @___-_-_-_-_-_-_-_-_-___
    @___-_-_-_-_-_-_-_-_-___ 4 года назад +1

    Thx for sharing dude 👍🏻

  • @ksrele
    @ksrele 4 года назад +2

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

  • @adicide9070
    @adicide9070 3 года назад +6

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

  • @learningstuff5679
    @learningstuff5679 2 года назад

    Awesome video. Instant subscribe.

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

  • @kongzilla2897
    @kongzilla2897 4 года назад

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

  • @razvanbugoi83
    @razvanbugoi83 2 года назад +1

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

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

  • @muwongenicholas6281
    @muwongenicholas6281 4 года назад +1

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

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

  • @promiseebuka6102
    @promiseebuka6102 Год назад

    Thanks man, for this great tutorial😊😊

  • @tfnsansu1727
    @tfnsansu1727 3 года назад

    great work bro !!

  • @BobCorraro
    @BobCorraro 4 года назад

    Great tutorial, thanks a lot

  • @python_programmer7983
    @python_programmer7983 Год назад

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

  • @kerryd2060
    @kerryd2060 4 года назад +1

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

  • @milton7074
    @milton7074 2 года назад

    Fantastic! Thank you!

  • @Mind_exersice
    @Mind_exersice Год назад

    Good job sir❤ thanks a lot for your appropriate explains

  • @ShermanSitter
    @ShermanSitter 4 года назад

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

  • @giancarlotuttone1222
    @giancarlotuttone1222 Год назад

    Thank you! Really powerful! ;)

  • @curiosabouttech
    @curiosabouttech 3 года назад

    Thank you so much man you're really wonderful.

  • @DaliborSavic
    @DaliborSavic 2 года назад

    Thanks! Good video.

  • @KnightToD5
    @KnightToD5 7 месяцев назад

    Great content! Here from The Odin Project!

  • @adriananin3150
    @adriananin3150 Год назад

    Excellent video thanks

  • @user-bb3vi4qh4n
    @user-bb3vi4qh4n 5 месяцев назад

    Realy nice video , thanks

  • @dylanking165
    @dylanking165 2 года назад

    from the odin project. thanks for the great content.

  • @mathiasonu4936
    @mathiasonu4936 4 года назад +1

    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!

  • @parvejsolkar123
    @parvejsolkar123 4 года назад

    Very cool... thanks for sharing 🙏

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

  • @nanthakumar7947
    @nanthakumar7947 Год назад

    That's very useful ! Thumps Up ! :)

  • @jalapenohiway
    @jalapenohiway 4 года назад +6

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

  • @Zephromonia
    @Zephromonia Год назад

    Great content!

  • @jagadeshmurugan5254
    @jagadeshmurugan5254 2 года назад

    Thanks for the nice tutorial

  • @channelforambience
    @channelforambience Год назад +1

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

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

  • @suvrotica
    @suvrotica Год назад

    Very good and helpful 👍

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

  • @1222medi
    @1222medi Год назад

    Great vid thank you

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

  • @UNKNWN96
    @UNKNWN96 Год назад

    TOP led me here, thanks for the awesome video!

  • @PaulysGarage
    @PaulysGarage 2 года назад

    What a great video👍

  • @sifatgamil4757
    @sifatgamil4757 3 года назад

    Great job my dear

  • @lankeshprabhashwarap.a.d.373
    @lankeshprabhashwarap.a.d.373 4 года назад

    Very helpful!

  • @fatehgill5656
    @fatehgill5656 Год назад

    this video is really powerful

  • @guerra_dos_bichos
    @guerra_dos_bichos 7 месяцев назад

    i'm in love
    with emmet

  • @godnonamesleft
    @godnonamesleft 2 года назад

    This is so useful oh my goodness

  • @halakesserwan1445
    @halakesserwan1445 4 года назад

    Thanks alot!!!

  • @ankitagarwal4914
    @ankitagarwal4914 4 года назад +1

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

  • @mananwebandall1203
    @mananwebandall1203 4 года назад +1

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

  • @fragon8597
    @fragon8597 Год назад

    Thank you, sir

  • @valentineemmanuel6337
    @valentineemmanuel6337 4 года назад

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

  • @threeone6012
    @threeone6012 3 года назад

    Where has this been all my life?

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