Join Ray Villalobos for an in-depth discussion in this video What is Emmet?, part of Coding Faster with Emmet.
So, maybe you're asking yourself. What is Emmet, and how can it possibly help me code faster? Emmet is a plugin for code editors for Sublime Text, Coda, Text Made, and others, that makes it easier to write HTML and CSS code. It uses the CSS selector syntax, so it's super easy to learn. So, for example if you type something like this in your text editor, it'll get converted to something like this. So, you can see that the expansion corresponds very well to the abbreviation. So, here I'm asking for an h1 with a class of main. You can see the class right here.
And then an id of first, which is what I have here. And, then, I want a paragraph after that, which is what I get down here. So, if you're familiar with how CSS works, Emmet is really going to to be a breeze for you to pick up. In most editors, simply hitting the Tab key is going to expand your shortcuts. So, once it's set up, it'll feel like it's part of your current editor. You can add new snippets to customize the experience by adding a simple JSON file and Emmet adds additional shortcuts and command to your editor. So, that you can do things like easily expand the selection up and down the dom, convert text to comments.
And add Greek text when you're laying out your pages. Because it works with different editors, it can provide a consistent workflow. Once you learn the commands for Emmet in one editor, you can easily pick them up if you switch to another of the supported editors. Trust me, once you start using Emmet, it'll become second nature. And after a while, you won't want to code HTML or CSS in any other way.