Essential Emmet shortcuts that every web developer should know about.
❤ Subscribe: http://bit.ly/SubscribeDPT
In this tutorial, I will show you how to use the built-in Emmet extension is VS Code or your favorite editor (see https://emmet.io/download/ to get Emmet for Sublime, Atom, Coda, Notepad++, NetBeans, and many more editors).
Emmet has many shortcuts to type complex HTML structures and CSS properties with only a few characters. This tutorial covers the basic snippet syntax you need to know to get started with Emmet. Everything that is not covered in this tutorial can be found in the Emmet docs.
Emmet documentation: https://docs.emmet.io/
Emmet cheat sheet: https://docs.emmet.io/cheat-sheet/
📺 In this video:
0:00 – Intro
0:21 – HTML shortcuts
1:04 – Tags
1:21 – Classes and IDs
2:15 – Adding content
2:30 – Nesting
2:48 – Multiplication
3:18 – Numbering
3:57 – Siblings
4:20 – Climbing up
5:07 – Grouping
7:14 – Attributes
8:38 – Lorem Ipsum
9:20 – CSS shortcuts
12:10 – Emmet Cheat Sheet
12:46 – Coming up
12:59 – Conclusion
Next week I will show you how to easily make your own shortcuts so you can get the code you type a lot in the fastest way possible.
I will be using Windows 10 with Visual Studio Code text editor (http://bit.ly/get-vscode) and Brave Browser (https://bit.ly/get-brave-browser). I use Brave Browser because it’s just like Chrome but it removes ads and trackers so you can browse privately and ad-free.
🖥 More Web Development tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J
👨💻 More VS Code Tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFGfI5CTIuhKgTLcWY4m1ZaO
💻 More tutorials
► https://www.youtube.com/playlist?list=PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9
🙋♂️ Find me on other channels
Reddit 👽 https://www.reddit.com/r/DevProTips/
Twitter ✍ https://twitter.com/DenverCoder1
Github 👨💻 https://github.com/DenverCoder1
Sponsor 💞 https://github.com/sponsors/DenverCoder1
Buy me a coffee ☕ https://ko-fi.com/jlawrence
💖 SPONSORS 💖
Get your username or a link to your channel here by sponsoring on Github
▶ https://github.com/sponsors/DenverCoder1
🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS
► https://bit.ly/jlawrencepromos
source