How Emmet Make Life Simple??

How Emmet Make Life Simple??

Learn Emmet Is very simple..

What emmet is?

Emmet is a plugin/extension for text editors that allows you to write HTML and CSS faster by using abbreviations that expand into full code.

Features of emmet..?

  1. Abbreviation expansion

  2. Code formatting

  3. Code snippets

  4. Customization

  5. Cross editor compatibility

Advantages of Emmet.

  1. It saves time to code

  2. helps you write more consistent code

  3. improve productiviity

  4. widely support

  5. easy to learn

Now learn how to use emmet

Shortcut 1: Adding ID and Class attributes

to add a class or id to an HTML element using emmet you can use the following syntax: write a syntax and then click on the tab key to write full code.

.classname
#idname

you can also use custom attributes. and also add text by using curly brackets.

p{i am good boy} and then click on the tab.

<p> i am good boy </p>

Shortcut 2: create Parent-child grouping.

  1. parent-child

    write p>h1>div and then tap. for⬇️

<p>
    <h1>
        <div></div>
    </h1>
</p>
  1. adding sibling

    write h1>p+p+p and tap. for⬇️

<!-- Adding sibling using emmet -->

<h1>
    <p></p>
    <P></P>
    <P></P>
</h1>
  1. Multiplication

    writes p*3 and tap. for⬇️

<!-- multiplication -->

<p></p>
<p></p>
<p></p>
  1. Grouping

    write p>div>(p*3.class1)+footer

<!-- grouping -->
<p>
    <div>
        <p class="class1"></p>
        <p class="class1"></p>
        <p class="class1"></p>
        <footer></footer>
    </div>
</p>
  1. To active boiler code

Write ! and tap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>