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

КОМЕНТАРІ • 346

  • @kajkajajkaa
    @kajkajajkaa 2 роки тому +680

    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 роки тому +311

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

  • @timemmanson8350
    @timemmanson8350 6 місяців тому +17

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

  • @odilsoncode
    @odilsoncode 9 місяців тому +13

    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!

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

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

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

  • @webdevtech7154
    @webdevtech7154 Рік тому +1

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

  • @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 роки тому +1

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

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

  • @EduardKaresli
    @EduardKaresli 4 роки тому +2

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

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

  • @noscreadur
    @noscreadur 2 роки тому

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

  • @marynguyen8559
    @marynguyen8559 4 роки тому +2

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

  • @ahmedAltariqi
    @ahmedAltariqi 4 роки тому +5

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

  • @albedesigns
    @albedesigns Рік тому

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

  • @abhishekvishwanath8278
    @abhishekvishwanath8278 4 роки тому +1

    Awesome man!! Thank you!!

  • @tfnsansu1727
    @tfnsansu1727 3 роки тому

    great work bro !!

  • @KnightToD5
    @KnightToD5 7 місяців тому

    Great content! Here from The Odin Project!

  • @kittieCoder
    @kittieCoder 4 роки тому +3

    Thanks. Really great. I love your channel.

  • @fragrantbloom
    @fragrantbloom 2 роки тому

    This was an amazing video! Thanks a lot Kyle!

  • @alejandronieto576
    @alejandronieto576 Рік тому

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

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

  • @ambitiousperson2298
    @ambitiousperson2298 3 роки тому

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

  • @TejaSwaroopArukoti
    @TejaSwaroopArukoti 4 роки тому +1

    Wonderful stuff I have learnt today. Thank you.

  • @ChristianPretorius
    @ChristianPretorius 4 роки тому +1

    Thanks Kyle! This is such a useful video!!

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

  • @adicide9070
    @adicide9070 3 роки тому +6

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

  • @simonroyjonesuk
    @simonroyjonesuk 3 місяці тому

    Really useful and clear, Thanks so much.

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

  • @learningstuff5679
    @learningstuff5679 Рік тому

    Awesome video. Instant subscribe.

  • @harag9
    @harag9 4 роки тому +1

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

  • @junedkhan8453
    @junedkhan8453 4 роки тому +2

    This is some awesome stuff.. Thanks :)

  • @AGSTRANGERTunisianAuthor
    @AGSTRANGERTunisianAuthor 4 роки тому +1

    This was very helpful! Very grateful :)

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

  • @FranciscoBourquin
    @FranciscoBourquin Рік тому

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

  • @python_programmer7983
    @python_programmer7983 Рік тому

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

  • @jemsync
    @jemsync Рік тому

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

  • @DungBui13
    @DungBui13 4 роки тому

    Awesome work !!! Thanks for sharing.

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

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

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

  • @orangegd224
    @orangegd224 Рік тому

    Really helped me with the speed, thanks :)

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

  • @codesiddhi
    @codesiddhi 3 роки тому

    Great vid! Well explained :)

  • @___-_-_-_-_-_-_-_-_-___
    @___-_-_-_-_-_-_-_-_-___ 4 роки тому +1

    Thx for sharing dude 👍🏻

  • @dylanking165
    @dylanking165 2 роки тому

    from the odin project. thanks for the great content.

  • @channelforambience
    @channelforambience Рік тому +1

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

  • @th1nhng0
    @th1nhng0 4 роки тому +2

    Im in love with ur videos

  • @muwongenicholas6281
    @muwongenicholas6281 4 роки тому +1

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

  • @razvanbugoi83
    @razvanbugoi83 2 роки тому +1

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

  • @jalapenohiway
    @jalapenohiway 4 роки тому +6

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

  • @ksrele
    @ksrele 4 роки тому +2

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

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

  • @user-bb3vi4qh4n
    @user-bb3vi4qh4n 5 місяців тому

    Realy nice video , thanks

  • @kerryd2060
    @kerryd2060 4 роки тому +1

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

  • @DaliborSavic
    @DaliborSavic 2 роки тому

    Thanks! Good video.

  • @Zephromonia
    @Zephromonia Рік тому

    Great content!

  • @PatrikRasch
    @PatrikRasch 2 роки тому

    Incredible. Thank you so much.

  • @nanthakumar7947
    @nanthakumar7947 Рік тому

    That's very useful ! Thumps Up ! :)

  • @milton7074
    @milton7074 2 роки тому

    Fantastic! Thank you!

  • @adriananin3150
    @adriananin3150 Рік тому

    Excellent video thanks

  • @sifatgamil4757
    @sifatgamil4757 3 роки тому

    Great job my dear

  • @kongzilla2897
    @kongzilla2897 4 роки тому

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

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

  • @user-uh9mm1ec5j
    @user-uh9mm1ec5j 2 роки тому

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

  • @guerra_dos_bichos
    @guerra_dos_bichos 7 місяців тому

    i'm in love
    with emmet

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

  • @BobCorraro
    @BobCorraro 4 роки тому

    Great tutorial, thanks a lot

  • @jagadeshmurugan5254
    @jagadeshmurugan5254 2 роки тому

    Thanks for the nice tutorial

  • @giancarlotuttone1222
    @giancarlotuttone1222 Рік тому

    Thank you! Really powerful! ;)

  • @fatehgill5656
    @fatehgill5656 Рік тому

    this video is really powerful

  • @promiseebuka6102
    @promiseebuka6102 Рік тому

    Thanks man, for this great tutorial😊😊

  • @PaulysGarage
    @PaulysGarage 2 роки тому

    What a great video👍

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

  • @godnonamesleft
    @godnonamesleft 2 роки тому

    This is so useful oh my goodness

  • @ankitagarwal4914
    @ankitagarwal4914 4 роки тому +1

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

  • @1222medi
    @1222medi Рік тому

    Great vid thank you

  • @tolicoenciclopedia9696
    @tolicoenciclopedia9696 5 місяців тому

    Nice video bro. Great hair too.

  • @parvejsolkar123
    @parvejsolkar123 4 роки тому

    Very cool... thanks for sharing 🙏

  • @curiosabouttech
    @curiosabouttech 3 роки тому

    Thank you so much man you're really wonderful.

  • @threeone6012
    @threeone6012 3 роки тому

    Where has this been all my life?

  • @rafiksalmi2826
    @rafiksalmi2826 Рік тому

    thanks so much for that treasure

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

  • @tks8964
    @tks8964 Рік тому +1

    I think it's really powerful

  • @Mind_exersice
    @Mind_exersice Рік тому

    Good job sir❤ thanks a lot for your appropriate explains

  • @ninobien
    @ninobien 2 роки тому

    Super-duper, thanx! :-)

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

  • @peter4722
    @peter4722 Рік тому

    Thank you for the video. What keyboard are you using? I like the sound of it.

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

  • @halakesserwan1445
    @halakesserwan1445 4 роки тому

    Thanks alot!!!

  • @fragon8597
    @fragon8597 Рік тому

    Thank you, sir