A new religion for the modern era
(+ a beginner’s guide to Emmet shortcuts)
Chapter 1: Life Before Emmet (Typety-Type-Type)
Having spent the last 10 years of my life in Academia and Academic Publishing I moved to Toronto in May looking for a new challenge and hoping to kickstart a change of career with some super-fly new hard skills in Tech and Design.
This led me to Hackeryou. I started on the Design course which I loved and after grappling with Illustrator for 3 months I was hooked and eager to start learning how to move designs into the real/electronic world. I decided to apply for the full-time Front-End Development bootcamp.
I started out with absolutely no idea how to code anything so turned to the great universal mother Google for advice on how to complete the pre-coursework. I started working on Treehouse and for two weeks my dreams were filled with matrix style coding gibberish and my fingers worn down to nubs.
Determined to clear a path through the fog of p-tags, curly braces and exasperated comments that littered my poor sickly code I took an Introductory course at Hackeryou for a few weeks and was introduced to the idea of DRY and WET code:
DRY: Don’t Repeat Yourself
WET: We Enjoy Typing
and the reality of my situation captured by the catchy acronym below…
IDWTTABIDKHTS: I Don’t Want To Type Anymore But I Don’t Know How To Stop:(
(this may need some work before it goes viral)
Chapter 2: Life after Emmet: (a whole new world)
Imagine my delight when in my first week of bootcamp I learned that Emmet can do more that just rustle up a quick p-tag! On day one I witnessed the miracle of “.wrapper + tab” and choirs of angels emerged bugling from the clouds.
But the problem with shortcuts is that it’s easy to learn a couple, incorporate them into your coding routine and then totally forget about them when you get distracted by bigger shiner things. (change the case of text in MS Word anyone?… Shift+F3)
I realised it was time to take the plunge and get intimate with Emmet…
Chapter 3: Finally getting down and dirty with Emmet shortcuts
Here are some of the shortcuts I have found most useful in my brief time Subliming…
Shortcut + TAB:
Create Siblings: +
Create Multiple elements: *x
Add sequential numbering: $
Create an element with an ID: #id
(Note that #id creates a div element by default. When another element is required you need to specify the element before #id)
Create an element with a CLASS/CLASSES: .class
Note that .class creates a div element by default. When another element is required specify the element before .class
<p class=”class1 class2 class3"></p>
Create an element with both a CLASS and an ID: element#ID.class
<p id=”search” class=”wide”></p>
Create children: >
Implied child type:
Certain elements have an implied child type associated with them (e.g. ul>li) meaning you do not have to specify the child type in the shortcut:
And don’t forget…
CTRL/CMD + LEFT CLICK to input multiple cursors!
If you want to really nerd out you can access the full cheat-sheet on the Emmet site here.
You can also learn how to customize Emmet here.