Emmet in Visual Studio Code: Accelerate your HTML workflow

Take your HTML coding to the next level with Emmet in VS Code

4.90 (58 reviews)
Udemy
platform
English
language
Other
category
instructor
7,072
students
2.5 hours
content
Aug 2020
last update
$54.99
regular price

What you will learn

Be more productive in writing HTML code. Type it fast and efficiently

Type and customize Emmet Abbreviations: from very simple to complex

Use Emmet's commands

Description

What's this course about?

In this course you will learn how to be very productive in writing your html code. For that purpose we will use Emmet. The code editor for the course is Visual Studio Code (although you can use any code editor that supports Emmet).


More details please!

If you have never heard of Emmet before, it is a special plugin that allows you to type html "on steroids". VS Code comes bundled with it so you can use it straight out of the box. The sole purpose of the plugin is to allow you to type html in a fast and efficient way, saving a tone of time. You type a small abbreviation and in a second it expands into a big table, list, complete form or whatever html structure you can think of.

Emmet comes prepacked with a lot of features. In this course we will talk about every feature that could benefit your html workflow. We will start from the very basics. I will show you its core features. Then we will explore some useful commands that it offers. I have also provided assignments for the course so that you could practice and better memorise Emmet’s features.

If you still write html the old way this course will probably change it. Let’s get started!


What should you know to take the course?

Very basic HTML knowledge would be enough


What's inside?

  • Expand abbreviation

  • Ids and Classes

  • Nesting elements

  • Sibling elements

  • Multiplication

  • Dummy text (lorem ipsum)

  • Climbing top in abbreviations

  • Grouping abbreviations

  • Attributes

  • Numbering elements

  • Wrap with abbreviation

  • Wrap individual lines with abbreviation

  • Update tag

  • Remove tag

  • Go to matching pair

  • Merge and evaluate

  • Assignments to test your knowledge of Emmet's features

Who is teaching you?

My name is Sergey Shtyrlov. I'm a frontend developer. I've been working with HTML and CSS on a daily basis for almost 7 years and continue doing it today. If you still write HTML without Emmet, you are wasting a lot of time!

Content

Introduction

Course introduction
Course prerequisites
Course structure and how to watch it
Tools
Exercise files

Emmet: core features and operations

Module overview
What is Emmet?
Emmet: Expand abbreviation
Emmet: Id and Class
Emmet: Nesting
Emmet: Add Sibling
Emmet: Multiply
Emmet: Lorem Ipsum
Emmet: Climb level up
Emmet: Grouping
Emmet: Attributes
Emmet: Numbering
Module summary

Emmet: useful commands

Module overview
Emmet: Wrap with Abbreviation
Emmet: Wrap individual lines with Abbreviation
Emmet: Update tag
Emmet: Remove tag
Emmet: Go to matching pair
Emmet: Merge and evaluate
Module summary

Emmet: Final Examination

Module Introduction
Module summary

Course wrap up

Congratulations and Advices for using Emmet
Final words and goodbye

Screenshots

Emmet in Visual Studio Code: Accelerate your HTML workflow - Screenshot_01Emmet in Visual Studio Code: Accelerate your HTML workflow - Screenshot_02Emmet in Visual Studio Code: Accelerate your HTML workflow - Screenshot_03Emmet in Visual Studio Code: Accelerate your HTML workflow - Screenshot_04

Reviews

Vaclav
August 26, 2023
Very good explanation of the Emmet tool features. May significantly shorten the web page building time.
Sipo
November 12, 2021
Exceptional instruction! Every detail was exact, precise, and practical. All lectures are structured in such a way that the student grasps the topics completely while also retaining the material. I strongly suggest this course to all students and practitioners, regardless of their ability. Indeed, this is an excellent value course, and I will certainly consider supporting the creator in future course endeavours.
Xunxiang
January 5, 2021
Good info, and course structure so far. Once I understand what Sergey's saying, it's very precise and to-the-point, but it is hard to understand through his accent. Good thing there are subtitles.
Johann
December 15, 2020
A lot of thought seems to have gone into the structuring and graphical presentation of the course. Sergey also introduces the subject matter slowly so as not to overwhelm new comers to Emmet
Tom
October 19, 2020
Great course - I used Emmet a little bit but didn't fully understand how to really streamline my workflow with it. This course has concisely worked through the full functionality.
Emmanuele
July 14, 2020
This is a really great little course for all developers even those that already use Emmet extensively. I highly recommend it as it is simple to follow, can be done in one afternoon and the material covers all is needed to become proficient. The couple of hours spent on learning Emmet will be recouped very quickly ... it is really a worth wile course for any serious developer!
Aparna
July 5, 2020
This is my first time using the Visual Studio code. This course made me to understand how to use and make it less complex than when we use the code in different pages
Carlos
June 9, 2020
Expandió mis expectativas con emmet, no lo conocía del todo, pese a que no domino el ingles, es muy especifico y se entiende la lección que brinda. Es un excelente curso.
Joseph
May 18, 2020
While his first language is not English he speaks clearly. Emmet is all about efficiency and he speaks clearly, clearly lays out the information and is one of the best when it comes to explaining how the different commands work. I only have one (1) critique of this program and that is that the exams don't have a solution code along he just goes to the next section. <-- This turned out to be my inability to see his code-along video. Update: I am unable to see the code-along video from Udemy. It is hardly bad as everything we do as programmers is about research and development. Thank you for a great course Sergey.
Kevin
December 28, 2019
A very nice experience, very clean and understandable explanations in no time, just what i wanted to speed up my workflow with html

Charts

Price

Emmet in Visual Studio Code: Accelerate your HTML workflow - Price chart

Rating

Emmet in Visual Studio Code: Accelerate your HTML workflow - Ratings chart

Enrollment distribution

Emmet in Visual Studio Code: Accelerate your HTML workflow - Distribution chart
2711134
udemy ID
12/18/2019
course created date
12/25/2019
course indexed date
Bot
course submited by