day #10 : Web Development Journey

Today’s Topic is Emmet.

What is Emmet?

Emmet is a plugin available in most modern code editors (like Visual Studio Code, Sublime Text, and Atom). It allows you to write short abbreviations that expand into complete HTML and CSS code snippets. Think of it as shorthand for your code that saves time and reduces errors.

---

Why Use Emmet?

1. Speed: Write complex HTML structures in seconds.

2. Efficiency: Eliminate the need to type repetitive boilerplate code.

3. Readability: Use simple abbreviations to generate complex structures, keeping your workspace clean.

4. Focus: Spend more time on logic and design rather than syntax.

---

Getting Started with Emmet

Step 1: Enable Emmet

Most modern editors have Emmet built-in. If you're using VS Code, it’s enabled by default. To verify:

1. Go to Settings → Search for "Emmet".

2. Ensure it's turned on for HTML and CSS.

Step 2: Basic Syntax

Emmet uses a CSS-like syntax to create HTML structures. Here’s the basic flow:

element.class#id>child^sibling

Step 3: Expanding Abbreviations

Type your Emmet abbreviation and press Tab (or Ctrl + E in some editors) to expand it into full code.

---

Emmet Cheat Sheet

1. Creating Elements

• div → <div></div>

• p → <p></p>

• a → <a href=""></a>

2. Adding Classes and IDs

• .class → <div class="class"></div>

• #id → <div id="id"></div>

• div.class#id → <div class="class" id="id"></div>

3. Nesting Elements

• ul>li →

    <ul>
        <li></li>
    </ul>
  

4. Adding Multiple Children

• ul>li*3 →

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  

5. Siblings

• div+p →

    <div></div>
    <p></p>
  

6. Grouping

• (header>nav)+footer →

    <header>
        <nav></nav>
    </header>
    <footer></footer>
  

7. Custom Attributes

• input[type="text"] → <input type="text">

• a[href="https://example.com"] → <a href="https://example.com"></a>

---

Advanced Features

1. Lorem Ipsum

Generate placeholder text with the lorem keyword.

• p>lorem10 → A <p> tag with 10 words of Lorem Ipsum text.

2. Multiplication with Item Indexing

• ul>li.item-$*3 →

    <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
    </ul>
  

3. Inline CSS

• div[style="color:red;width:100px"] → <div style="color:red;width:100px"></div>

Thank you…😊