Show Description

We're talking Emmet - a handy toolkit of shortcuts for developers. CodePen just pushed version 2 live (with some customizations!) so we thought we'd talk about how and why we're using Emmet on CodePen.

Show Links


  • Ahullinger

    Great Episode! And I wanted to +1 Tim’s opinion on its value to “beginners”. In my classes, I only make students “type-out” HTML and CSS during the first day’s lecture – then we move straight into Emmet.

    I believe that as soon as a student “intellectually” understands the syntax of tags there is no reason to torture them with typos. Most students have never gained strong keyboarding skills. There are some keys they simply have never attempted to type ( especially “mustache” braces :^)

    Emmet is the perfect companion for “pens” as a teaching platform – especially for beginners – that allows them to focus on just the core grammar of each language and get immediate feedback as they create with code.

    As Chris mentioned, using Emmet does change the way you think about problem solving. I am finding that my students write better, cleaner, more concise, semantic HTML because they are thinking about the elements they need instead of chasing “closing” tags that they may have forgotten (or just making everything a div :^)

    And when it comes to CSS, Emmet is actively reinforcing their understanding of properties ( why isn’t it font-color? :^), appropriate values, “shorthand” variations, and sparking their curiosity to explore more advanced, verbose, and jargon-y CSS like text shadow, flexbox, and grid.

    While it’s true that most students love the “speed” of it. I see the how it becomes a mnemonic teaching tool for them, removing frustration, rewarding their effort, and growing their confidence.

  • Christer Waters

    I would really love more discussions like the ones you dug up and “out” of at the end. Conversations is what people learn from, even just listening to them.

  • ben

    wow i need to listen to more of these. this is the first one, i have checked out. didnt know about lorem ipsum emmet command. cool.