Learn how to speed up your HTML and CSS coding processes through the powerful features of Emmet, a tool integrated within VS Code, in this comprehensive tutorial.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
About Emmet
Emmet (which is built into VS Code) lets you type HTML and CSS code faster.
Its main feature is expandable code abbreviations. You type a few characters and Emmet expands the abbreviation into the full code.
It also has commands (which don’t have keystrokes by default, although you can assign them) to make it easier and faster to code HTML and CSS.
Emmet Documentation
Visit emmet.io for lots of good info and demos. It also has a great Cheat Sheet listing all the abbreviations and what they expand to: docs.emmet.io/cheat-sheet
For more information on Emmet in VS Code, visit code.visualstudio.com/docs/editor/emmet