In this episode, we're diving into Emmet, a must-have toolkit for web developers that seriously speeds up your HTML and CSS workflow. If you haven't already, you'll want to download and install Emmet on your favorite text editor (Sublime Text is used for the demo, but it supports most editors!).
The episode starts by showing off how Emmet turns shortcuts into full HTML (like typing div
and hitting Tab to expand it), and then quickly moves to more powerful stuff. You'll see how to spin up whole page skeletons, create nested elements (like navs, lists, and items), add classes and IDs just like in CSS, and even generate repeating structures super quickly.
We look at how to add real content inside elements, use numbering with the dollar sign (think: creating item1
, item2
, etc.), and set custom attributes right from your Emmet abbreviation. The episode also covers handling multiple classes, implied attributes (like every <a>
getting an href automatically), and working with common tags like images, forms, and textareas.
For more complex structures, like forms and tables, you'll learn grouping, sibling selectors, and a cool way to "climb up" the element chain to get your markup structure just right. Through some big real-world examples, including nav menus, logins, and tables, you'll see just how much markup you can blast out with just a few keystrokes.
All in, this episode runs through the most useful Emmet features and offers plenty of tips to become lightning-fast at writing markup. If you've ever felt like hand-coding basic HTML is a chore, Emmet will be your new best friend!