Time-saving tool for lazy (but efficient) developers.

Are you tired of wasting your precious time typing out long repetitive lines of HTML/CSS code? Or rather dread the feeling of carpal tunnel set in after hours of coding? Well, look no further, for Emmet is here to save the day (and your hands).

As requested by some peers, I will be making a quick guide on the basics of Emmet and how it can improve your workflow tremendously.

Let's get straight into it.

You might not already know it yet, but you might be already using emmet! In the first practical, you might remember a short hand of initialising a html template using !.

Pressing Enter should generate the following text:

To create element tags, simply write the tags without the brackets.

As seen, some common attributes for certain tags have been already initialised for you. Simply press the Tab key to edit them instantly after creating the emmet expression.

Classes and ids can be added with a "." or "#" respectively, after the element tags.

You can also mix and match classes and id together. For div containers, the tag name is not required.

Add multiple classes.

Add custom attributes with square brackets []:

Reminder: After making the emmet expression and pressing Enter, press Tab to quickly edit the details and text content of the element tag.

Make nested elements with > (parent > child).

Add neighbouring elements with +.

Note: Neighbouring elements are not the same as nested elems. If confused, I recommend you to review Nell's lecture on html.

Create multiple copies with *.

The sky's the limit for creating expressions and this is where Emmet especially shines.

You can also add text content to these elements directly from the expressions using {}. For lists, you can use $ to number them correspondingly. So for our previous example:

Whew. Imagine writing these out manually.

Personally, I code with emmet in short successive bursts rather than a long one-liner (like the one above), but I find it really useful for the layering and identifier-naming shenanigans in my code. It also prevents potential opening and closing bracket bugs in your HTML code.

If you're using a commonly recognised attribute, you can also use :.

So far, I've been only displaying the powers of Emmet in HTML but you can also use emmet expressions in CSS. But because this guide is getting too long, here's a quick example:

I encourage you to get used to Emmet as it allows you to not worry as much of the HTML/CSS syntax, but rather the logic and implementation in the design of your website.

With Emmet, you'll be spitting out HTML and CSS faster than a caffeinated squirrel on a keyboard.

So far, I've covered what I do 80% of the time with emmet but this barely scratches the surface of what Emmet has to offer. But if you want to learn more:

These are the docs for, what I think, the most useful keyboard shortcuts with Emmet:

https://docs.emmet.io/actions/wrap-with-abbreviation/

https://docs.emmet.io/actions/remove-tag/

Here's a cheatsheet for you to reference back to: https://docs.emmet.io/actions/remove-tag/

Let me know if you want to learn more useful tips and tricks for HTML/CSS/Js in the future of this course. Any questions, let me know in the comments.

Thanks @Iuliia Drugova for allowing me to post this.