Emmet

<!-- 1) Element + class + id -->
div.card                          → <div class="card"></div>
div#hero                          → <div id="hero"></div>
div.btn.btn--primary              → <div class="btn btn--primary"></div>
p{Hello}                          → <p>Hello</p>
img                               → <img src="" alt="">
a[href=/]{Home}                   → <a href="/">Home</a>

<!-- 2) Children + siblings -->
ul>li                             → <ul><li></li></ul>
ul>li*3                           → <ul><li></li><li></li><li></li></ul>
header+main+footer                → <header></header><main></main><footer></footer>

<!-- 3) Numbering — $ is the index, $@N starts at N -->
ul>li.item-$*5
→ <ul><li class="item-1"></li><li class="item-2"></li>…<li class="item-5"></li></ul>

<!-- 4) Climb-up with ^ -->
section.row>div.col>span.label^^aside    
→ <section class="row">
    <div class="col">
        <span class="label"></span>
    </div>
</section>
<aside></aside>

<!-- 5) Group with () + repeat -->
(div.card>h3{Title $}+p)*3
→ <div class="card"><h3>Title 1</h3><p></p></div>
  <div class="card"><h3>Title 2</h3><p></p></div>
  <div class="card"><h3>Title 3</h3><p></p></div>

<!-- 6) Boilerplate -->
!                                 → full HTML5 doc skeleton
link:css                          → <link rel="stylesheet" href="style.css">
script:src                        → <script src=""></script>

<!-- 7) Lorem ipsum -->
lorem10                           → 10 words of lorem
p*3>lorem20                       → 3 paragraphs of 20 lorem words each

<!-- 8) CSS — abbreviations -->
m10                               → margin: 10px;
p20-10                            → padding: 20px 10px;
bgc#fafafa                        → background-color: #fafafa;
bd1-s-red                         → border: 1px solid red;
tac                               → text-align: center;
fxdr                              → flex-direction: row;
posa                              → position: absolute;

<!-- 9) JSX — add to settings.json -->
//  "emmet.includeLanguages": { "javascript": "javascriptreact" }
div.card>h3+p*3                   → JSX with className="card"

<!-- 10) Custom snippets — settings.json -->
//  "emmet.syntaxProfiles": {
//      "html": { "selfClosingStyle": "xhtml" }
//  },
//  "emmet.preferences": {
//      "output.indent": "    "
//  }

<!-- 11) Update class on an existing element — "Update Tag" -->
//   Cursor on <div>, run command "Emmet: Wrap with Abbreviation" → wrap it in something else
//   Or "Update Tag" → change <div> to <section> in one keystroke

// Type and press Tab in HTML / JSX:
// !            → HTML5 boilerplate
// ul>li.item*3 → <ul><li class="item"></li>×3</ul>
// .btn.primary → <div class="btn primary">