Learn Emmet In 15 Minutes - Double Your HTML Coding Speed

SdĂ­let
VloĆŸit
  • čas pƙidĂĄn 11. 07. 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

Komentáƙe • 346

  • @kajkajajkaa
    @kajkajajkaa Pƙed 2 lety +674

    Hello to fellow Odin Project students đŸ‘‹đŸŒđŸ˜‰
    Fantastic video, thank you for the super clear and thorough explanation!

    • @robs257
      @robs257 Pƙed 2 lety +7

      helloooo

    • @victornta8796
      @victornta8796 Pƙed 2 lety +5

      Lol Hi

    • @apprentice-tech
      @apprentice-tech Pƙed rokem +1

      halu

    • @gintoki_sakata__
      @gintoki_sakata__ Pƙed rokem

      😁😇

    • @chestermartin2356
      @chestermartin2356 Pƙed rokem +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 Pƙed 2 lety +309

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

  • @timemmanson8350
    @timemmanson8350 Pƙed 6 měsĂ­ci +15

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

  • @odilsoncode
    @odilsoncode Pƙed 8 měsĂ­ci +11

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

  • @aydanwessels761
    @aydanwessels761 Pƙed rokem +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 Pƙed 10 měsĂ­ci +1

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

  • @Bitrey
    @Bitrey Pƙed 4 lety +51

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

  • @vampbat
    @vampbat Pƙed rokem +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 Pƙed 3 lety +5

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

  • @ldt_
    @ldt_ Pƙed 4 lety +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 Pƙed rokem +1

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

  • @b1mind
    @b1mind Pƙed 4 lety +5

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

    • @WebDevSimplified
      @WebDevSimplified  Pƙed 4 lety +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.

  • @deemon710
    @deemon710 Pƙed 2 lety +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. 🙏

  • @RichardJNeo
    @RichardJNeo Pƙed 2 lety +1

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

  • @EduardKaresli
    @EduardKaresli Pƙed 4 lety +2

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

  • @KamomeGakuen
    @KamomeGakuen Pƙed rokem

    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

  • @marynguyen8559
    @marynguyen8559 Pƙed 4 lety +2

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

  • @ahmedAltariqi
    @ahmedAltariqi Pƙed 4 lety +5

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

  • @Tabbystripes
    @Tabbystripes Pƙed 4 lety

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

  • @kharChehre
    @kharChehre Pƙed 4 lety +2

    Thanks Kyle! đŸ€Ż
    You read my mind! I was practicing Emmet a few hours ago lol

  • @kittieCoder
    @kittieCoder Pƙed 4 lety +3

    Thanks. Really great. I love your channel.

  • @ambitiousperson2298
    @ambitiousperson2298 Pƙed 3 lety

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

  • @noscreadur
    @noscreadur Pƙed 2 lety

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

  • @fragrantbloom
    @fragrantbloom Pƙed 2 lety

    This was an amazing video! Thanks a lot Kyle!

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 Pƙed 4 lety

    Emmet - what a useful extension! This tutorial - what a concise pointer for use of vast ocean of Emmet! Thank you for sharing. đŸ˜ƒđŸ‘đŸŒŒ

  • @TejaSwaroopArukoti
    @TejaSwaroopArukoti Pƙed 4 lety +1

    Wonderful stuff I have learnt today. Thank you.

  • @abhishekvishwanath8278
    @abhishekvishwanath8278 Pƙed 4 lety +1

    Awesome man!! Thank you!!

  • @TheRastaDan
    @TheRastaDan Pƙed 2 lety +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 Pƙed 2 lety +1

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

  • @ChristianPretorius
    @ChristianPretorius Pƙed 4 lety +1

    Thanks Kyle! This is such a useful video!!

  • @sofianebm7492
    @sofianebm7492 Pƙed 4 lety

    nice trick kyle keep going !!!

  • @madhavkwatra5888
    @madhavkwatra5888 Pƙed 2 lety

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

  • @ajlebeau
    @ajlebeau Pƙed rokem

    Mind blowing! Thank you!!

  • @headwaystudio
    @headwaystudio Pƙed 11 měsĂ­ci

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

  • @Jonathan-lg1xw
    @Jonathan-lg1xw Pƙed 2 lety

    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!

  • @simonroyjonesuk
    @simonroyjonesuk Pƙed 3 měsĂ­ci

    Really useful and clear, Thanks so much.

  • @albedesigns
    @albedesigns Pƙed rokem

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

  • @adicide9070
    @adicide9070 Pƙed 3 lety +6

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

  • @jemsync
    @jemsync Pƙed rokem

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

  • @AGSTRANGERTunisianAuthor
    @AGSTRANGERTunisianAuthor Pƙed 4 lety +1

    This was very helpful! Very grateful :)

  • @junedkhan8453
    @junedkhan8453 Pƙed 4 lety +2

    This is some awesome stuff.. Thanks :)

  • @pravinkumarone
    @pravinkumarone Pƙed 8 měsĂ­ci

    I learned some new Emmets, thanks for sharing

  • @th1nhng0
    @th1nhng0 Pƙed 4 lety +2

    Im in love with ur videos

  • @tfnsansu1727
    @tfnsansu1727 Pƙed 3 lety

    great work bro !!

  • @FranciscoBourquin
    @FranciscoBourquin Pƙed rokem

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

  • @alejandronieto576
    @alejandronieto576 Pƙed rokem

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

  • @DungBui13
    @DungBui13 Pƙed 4 lety

    Awesome work !!! Thanks for sharing.

  • @muwongenicholas6281
    @muwongenicholas6281 Pƙed 4 lety +1

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

  • @orangegd224
    @orangegd224 Pƙed rokem

    Really helped me with the speed, thanks :)

  • @___-_-_-_-_-_-_-_-_-___
    @___-_-_-_-_-_-_-_-_-___ Pƙed 4 lety +1

    Thx for sharing dude đŸ‘đŸ»

  • @learningstuff5679
    @learningstuff5679 Pƙed rokem

    Awesome video. Instant subscribe.

  • @jalapenohiway
    @jalapenohiway Pƙed 4 lety +6

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

  • @Sabrecho
    @Sabrecho Pƙed 5 měsĂ­ci

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

  • @kongzilla2897
    @kongzilla2897 Pƙed 4 lety

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

  • @codesiddhi
    @codesiddhi Pƙed 3 lety

    Great vid! Well explained :)

  • @ScileSc
    @ScileSc Pƙed 4 lety +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 Pƙed 4 lety

      how do you turn Emmet on in VSC?

    • @ScileSc
      @ScileSc Pƙed 4 lety +1

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

    • @ahurein1641
      @ahurein1641 Pƙed 4 lety +1

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

    • @Patrick1985McMahon
      @Patrick1985McMahon Pƙed 4 lety

      @@ahurein1641 thank you. I will try that.

    • @ahurein1641
      @ahurein1641 Pƙed 4 lety

      @@Patrick1985McMahon you're welcome

  • @paprika_ame
    @paprika_ame Pƙed 2 lety +4

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

    • @omkarshendge5438
      @omkarshendge5438 Pƙed 2 lety +1

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

  • @razvanbugoi83
    @razvanbugoi83 Pƙed 2 lety +1

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

  • @ksrele
    @ksrele Pƙed 4 lety +2

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

  • @KnightToD5
    @KnightToD5 Pƙed 7 měsĂ­ci

    Great content! Here from The Odin Project!

  • @milton7074
    @milton7074 Pƙed 2 lety

    Fantastic! Thank you!

  • @user-uh9mm1ec5j
    @user-uh9mm1ec5j Pƙed 2 lety

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

  • @PatrikRasch
    @PatrikRasch Pƙed 2 lety

    Incredible. Thank you so much.

  • @promiseebuka6102
    @promiseebuka6102 Pƙed rokem

    Thanks man, for this great tutorial😊😊

  • @python_programmer7983
    @python_programmer7983 Pƙed rokem

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

  • @BobCorraro
    @BobCorraro Pƙed 4 lety

    Great tutorial, thanks a lot

  • @Zephromonia
    @Zephromonia Pƙed rokem

    Great content!

  • @harag9
    @harag9 Pƙed 4 lety +1

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

  • @giancarlotuttone1222
    @giancarlotuttone1222 Pƙed rokem

    Thank you! Really powerful! ;)

  • @adriananin3150
    @adriananin3150 Pƙed rokem

    Excellent video thanks

  • @Mind_exersice
    @Mind_exersice Pƙed rokem

    Good job sir❀ thanks a lot for your appropriate explains

  • @user-bb3vi4qh4n
    @user-bb3vi4qh4n Pƙed 4 měsĂ­ci

    Realy nice video , thanks

  • @sashatv138
    @sashatv138 Pƙed 4 lety

    Very useful video. Thank you!

    • @yassinetakeddine3721
      @yassinetakeddine3721 Pƙed 4 lety +1

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

  • @dylanking165
    @dylanking165 Pƙed 2 lety

    from the odin project. thanks for the great content.

  • @kerryd2060
    @kerryd2060 Pƙed 4 lety +1

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

  • @channelforambience
    @channelforambience Pƙed rokem +1

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

  • @ShermanSitter
    @ShermanSitter Pƙed 3 lety

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

  • @DaliborSavic
    @DaliborSavic Pƙed 2 lety

    Thanks! Good video.

  • @nanthakumar7947
    @nanthakumar7947 Pƙed rokem

    That's very useful ! Thumps Up ! :)

  • @MythicalMaestro69
    @MythicalMaestro69 Pƙed 4 lety +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!!!

  • @parvejsolkar123
    @parvejsolkar123 Pƙed 4 lety

    Very cool... thanks for sharing 🙏

  • @curiosabouttech
    @curiosabouttech Pƙed 3 lety

    Thank you so much man you're really wonderful.

  • @jagadeshmurugan5254
    @jagadeshmurugan5254 Pƙed 2 lety

    Thanks for the nice tutorial

  • @PaulysGarage
    @PaulysGarage Pƙed 2 lety

    What a great video👍

  • @1222medi
    @1222medi Pƙed rokem

    Great vid thank you

  • @suvrotica
    @suvrotica Pƙed rokem

    Very good and helpful 👍

  • @sifatgamil4757
    @sifatgamil4757 Pƙed 3 lety

    Great job my dear

  • @lankeshprabhashwarap.a.d.373

    Very helpful!

  • @mananwebandall1203
    @mananwebandall1203 Pƙed 4 lety +1

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

  • @mshamilna
    @mshamilna Pƙed 4 lety

    One of your best videos brothe thank you

    • @WebDevSimplified
      @WebDevSimplified  Pƙed 4 lety

      Thank you so much!

    • @md7071
      @md7071 Pƙed 4 lety

      When I was learning react.js, JSX was really a strange to me but later on I found emmet supports too.

  • @halakesserwan1445
    @halakesserwan1445 Pƙed 4 lety

    Thanks alot!!!

  • @fragon8597
    @fragon8597 Pƙed rokem

    Thank you, sir

  • @godnonamesleft
    @godnonamesleft Pƙed 2 lety

    This is so useful oh my goodness

  • @guerra_dos_bichos
    @guerra_dos_bichos Pƙed 7 měsĂ­ci

    i'm in love
    with emmet

  • @UNKNWN96
    @UNKNWN96 Pƙed rokem

    TOP led me here, thanks for the awesome video!

  • @ankitagarwal4914
    @ankitagarwal4914 Pƙed 4 lety +1

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

  • @ninobien
    @ninobien Pƙed 2 lety

    Super-duper, thanx! :-)

  • @fatehgill5656
    @fatehgill5656 Pƙed rokem

    this video is really powerful

  • @UmarAlFarooq
    @UmarAlFarooq Pƙed 4 lety

    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.

  • @debjitkarmakar5523
    @debjitkarmakar5523 Pƙed 4 lety +22

    I thought Emmet from GTA San Andreas 😂😂

  • @Kotovar
    @Kotovar Pƙed 10 měsĂ­ci

    Thanks!

  • @travisheldreth5021
    @travisheldreth5021 Pƙed 6 měsĂ­ci

    Thank you!!!!!