[FREE] How to code 10 times faster with Emmet

Name: [FREE] How to code 10 times faster with Emmet
Rating: 4.5 (14 reviews)

Master the life-changing extension

Created byEnzo Ustariz - Web School

Last updated 1/2025

English

English [Auto],

What you'll learn

Improve your productivity
Use the Emmet extension
Coding web application content faster
How to manipulate code content with useful "actions"

Course content

4 sections • 18 lectures • 1h 12m total length

Introduction1:27
Master Emmet shortcuts to generate HTML, CSS, and JavaScript content quickly in VS Code and other IDEs, with examples like div.container and h1 with an id.
Source code3:10
Download the source code and set up Emmet in VS Code, enable tab-triggered expansions, and explore starter files, chapters, and lessons on abbreviations, CSS, JS, and frameworks.

Basic abbreviations7:15
Learn basic emmet abbreviations to speed up HTML, JavaScript, and coding (React, Vue, Angular, Next) with tag shortcuts, doctype, meta, class and id, attributes, and element multiplication in VS Code.
Basic abbreviations part II3:11
Master advanced emmet abbreviations, including curly brace content, h1 dot container, the dollar index and asterix syntax, and learn to mix classes with content to generate HTML quickly.
Advanced abbreviations5:27
Explore advanced Emmet abbreviations to build complex HTML structures with nesting, grouping, and multiplication. Compare parentheses and caret shortcuts, toggle live previews with Ctrl-space, and choose readable patterns.
Implicit tags and lorem ipsum4:19
Learn how emmet uses implicit tags and lorem ipsum to generate context-aware html elements—divs in body, spans in inline contexts, lis in lists, and tr/td in tables.
It's your turn, complete these exercises !1:03
Practice the fourth lesson exercises by reproducing each code snippet using image shortcuts, commenting the shortcut above the code, and filling in missing pieces to sharpen Emmet speed.
Exercises review9:58
reviewing emmet shortcuts to breeze through html exercises, building divs, headers, navs, lists, modals, and responsive layouts with a focus on syntax and refactoring.

Wrap with abbreviation7:27
Master emmet's wrap with abbreviation in VSCode to surround text with HTML elements, configure the Alt+M shortcut, and quickly create links, spans, classes, and attributes.
Balance inward/outward4:26
Balance inward and outward in VS Code to quickly select content or elements. Configure shortcuts with control shift P and use ctrl alt q to navigate inward and outward selections.
Go to matching pair1:26
Use the go to matching pair action to jump between opening and closing tags by placing the cursor inside a tag and configuring VS Code shortcuts.
Select item1:07
Master select item actions in Emmet by using select next item and select previous item to move the cursor through end of tag, next tag, and attribute values.
Remove tag0:42
Discover how the remove tag action deletes both tags from an element without removing its content, with examples like removing a header while preserving inner content.
Add image's width and height2:12
Discover the update image size action to automatically add width and height attributes, preventing cumulative layout shifts and improving page stability and search ranking.
Evaluate math expressions1:59
Explore Emmet's evaluate math expression action to compute simple math, such as 10×10 equals 100, and use increment and decrement with keyboard shortcuts to adjust values.

Emmet with CSS10:49
Learn to use emmet with css to write properties and values faster via first-letter abbreviations, unit shortcuts, and integrate VS Code intellisense and fuzzy search for quick coding.
Emmet with JavaScript6:03
Learn to use Emmet with JavaScript across vanilla JS and frameworks like React and Next.js, enabling HTML-like syntax in .js files to speed up element creation.
What's next ?0:03

Requirements

A computer
An IDE (code editor)

Description

Hello everyone and welcome to this complete Emmet course.

Emmet is a life-changing extension, it makes it much easier to code in HTML but also in JSX, Vue templates, with Svelte and all other JS frameworks.

It is available on all modern code editors, and we will use VS CODE for this course.

The goal is to use shortcuts called "abbreviations" like this: div.container>ul.list>li.item*6

Once written, all you have to do is press 'enter' or 'tab' to execute them.

<div class="container">

<ul class="list">

<li class="item"></li>

</ul>

</div>

Great, isn't it?

There is also a whole range of actions, which make it easier to manipulate the code:
- Surround text with a, span, and tags
- Select content more easily
- Delete tags without deleting the content
- Teleport to the closing/opening tag
- And many other things

Finally, we can also use Emmet in CSS, which allows us:
- To write properties much faster: m => margin, p10 => padding: 10px, bgc#0 => background-color: #000, etc…
- To use shortcuts, just like in HTML: p10+m10+w100%+bg#0 =>

padding: 10px;

margin: 10px;

width: 100%;

background: #000;

At the end of this course, we will see together how to make Emmet work in JavaScript, and in particular with all current JS Frameworks.

It is an extremely simple and quick skill to acquire, which is quite rare in web development.

See you on the other side,
Enzo.

Who this course is for:

Web developer
Front/back developer
Student
Person in retraining
Web dev enthusiast

[FREE] How to code 10 times faster with Emmet

What you'll learn

Explore related topics

Course content

Introduction and source code2 lectures • 5min

Emmet abbreviations6 lectures • 31min

Emmet actions7 lectures • 19min

Emmet with CSS and JavaScript3 lectures • 17min

Requirements

Description

Who this course is for: