6 Emmet Tricks For Aspiring Frontend Web Developers

Hello Everyone, good to see you; also, best of luck to you on your journey if you are an aspiring front-end web developer or any person at all** 😊

Let's rent some inspiration from Rumi in case you feel Low. 💜

Before we dig any further, let's first take some time to understand what "Emmet" is exactly and how does it make our lives easier :)

Emmet (formerly Zen Coding) is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. (Source: Wikipedia)

Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Basically, we write CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation.

Let's understand this with some examples:

• You type this in the code editor: nav>a*3 and press Tab or Enter as per your code editor configuration.

  Note that we've made use of two emmet operators > (child) and * (multiplication).

  You get:

   <nav>
     <a href=""></a>
     <a href=""></a>
     <a href=""></a>
   </nav>
  

• You type this in the code editor: div.module*2>p*2>lorem5 and press Tab or Enter as per your code editor configuration.

    <div class="module">
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Enim, praesentium? Obcaecati, consequatur iusto.</p>
    </div>
    <div class="module">
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Inventore molestias est nihil? Laborum.</p>
    </div>
  

  That's cool and should already make some things clear for you, but this is just the beginning. Hold on and read till the end to know how to make a great deal of things easier for you and save tons of your time.

  Also give everything above and below a try, visit 👉🏽 Codepen

• Use of Grouping Operator ( )

You type: div>(header>ul>li*2>a)*2 and press Tab or Enter as per your code editor configuration.

You Get:

    <div>
      <header>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </header>
      <header>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </header>
    </div>

• Text Operator { } And Numbering Operator $

  You type:

  .feature.feature__${Feature $}*3

  You Get

    <div class="feature feature__1">Feature 1</div>
    <div class="feature feature__2">Feature 2</div>
    <div class="feature feature__3">Feature 3</div>
  

  What happened here?

  1. The grouping operator grouped the specific items so that we could have them inside an element.
  2. The numbering operator serial numbered the items and the text operator was used to put some test text inside our HTML elements.

• Use of Attribute operator [ ]

  You Type:

  img.gallery__img[src="img/gal-$.jpeg"][alt="Gallery Image $"]*3

  You get:

  <img src="img/gal-1.jpeg" alt="Gallery Image 1" class="gal__img">
  <img src="img/gal-2.jpeg" alt="Gallery Image 2" class="gal__img">
  <img src="img/gal-3.jpeg" alt="Gallery Image 3" class="gal__img">
  

  What happened here?

  1. We made use of attribute operator [ ] and numbering operator $ together.
  2. We used it twice to set dynamically set the src and alt attribute of an image.

Conclusion:

1. We learnt/talked/tried Six Emmet Abbreviation Syntaxes:

   • Multiplication Operator *
   • Child Operator >
   • Grouping Operator ( )
   • Numbering Operator $
   • Attribute Operator [ ]
   • Text Operator { }

2. To play around with all we learnt here visit my codepen (p.s. don't forget to press tab)

That's all guys, thanks for reading till the end :) I didn't fill this article with a lot of emmet tricks as that would be overwhelming for beginners.

I suppose that this is all the emmet you'll need more often as this all of what I have been using since a long time now, But I encourage you to go ahead and dig deeper into Emmet if you'll want to.

Also, if you think there was something essential that I missed in this tutorial I request you to put your suggestion in the comments so that I can put them in this article later.

Other articles of mine I recommend you to read:

1. 5 Tips on How to write productively on Hashnode
2. Benefits of an education email.

Thank you, for reading till the end, make sure to share it if you find it useful, and keep learning, you're a genius.