Emmet in Visual Studio Code: Accelerate your HTML workflow
4.5 (41 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,962 students enrolled

Emmet in Visual Studio Code: Accelerate your HTML workflow

Take your HTML coding to the next level with Emmet in VS Code
4.5 (41 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,962 students enrolled
Created by Sergey Shtyrlov
Last updated 8/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 15 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Requirements
  • The only requirement is to have a basic knowledge of HTML. If you know what the tag is and how to type it, you are good to go
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!

Who this course is for:
  • You want to be more productive writing HTML code
  • You do a lot of HTML work and never heard of Emmet
  • You are new to web development and already write some HTML
Course content
Expand all 30 lectures 02:37:06
+ Introduction
5 lectures 07:26

You can download the exercise files by using the following link - https://gitlab.com/Linxflasher/emmet-in-vs-code-exercise-files

Preview 02:09
+ Emmet: core features and operations
13 lectures 52:33
Emmet: Expand abbreviation
04:10
Emmet: Id and Class
04:23
Emmet: Nesting
03:54
Emmet: Add Sibling
02:49
Emmet: Multiply
03:24
We have learnt some of the most useful Emmet features and now is a perfect time for you to have a little bit of practice. That will help you to solid the gained knowledge.
Assignment 1
1 question
Emmet: Lorem Ipsum
03:41
Emmet: Climb level up
06:03
Emmet: Grouping
03:43
Emmet: Attributes
06:06
Emmet: Numbering
05:50
So far you have learned some new Emmet features and now is a perfect time for a little bit of practice. Let’s start our second assignment.
Assignment 2
1 question
Module summary
01:02
+ Emmet: useful commands
8 lectures 27:04
Module overview
00:33
Emmet: Wrap with Abbreviation
07:43
Emmet: Wrap individual lines with Abbreviation
04:26
Emmet: Update tag
05:03
Emmet: Remove tag
02:17
Emmet: Go to matching pair
02:32
Emmet: Merge and evaluate
03:34
It is time for us to have a little bit of practice with the new commands you have learned in this module.
Assignment 3
1 question
Module summary
00:56
+ Emmet: Final Examination
2 lectures 01:23
Module Introduction
00:38
it is time for you to take all the skills you have learned in the course and put them to the test.
Final Assignment
1 question
Module summary
00:45
+ Course wrap up
2 lectures 03:37
Congratulations and Advices for using Emmet
03:10
Course Wrap Up
00:27