👉 Become A VS Code SuperHero Today: https://vsCodeHero.com

In this video, I’m going to give you a quick crash course into using Emmet. Emmet allows you to dramatically speed up your HTML & CSS workflow! In a single line using Emmet’s abbreviation syntax, you can save yourself from writing hundreds of characters and multiple lines of code. We will cover the basics including siblings, nesting, multiplication, grouping, and much more.

Emmet is built into Visual Studio Code (VS Code), but it is not exclusive to VS Code. It can be used with Sublime Text, Atom, and many other popular code editors. Visit the link to Emmet’s website to download it for your editor.

Emmet:
https://emmet.io/

Emmet Cheat Sheet:
https://docs.emmet.io/cheat-sheet/

Timestamps:
00:00 – Introduction to Emmet
01:00 – HTML Boilerplate
01:35 – Basic Tags
02:25 – Classes
03:03 – Id’s
03:24 – Content
03:41 – Siblings
03:57 – Nesting
05:05 – Climb Up
06:02 – Grouping
07:02 – Multiplication
07:22 – Numbering
08:45 – Attributes
09:36 – Implicit Tags
10:37 – Forms & Inputs
11:26 – Lorem Ipsum
12:15 – Advanced Structures
12:50 – CSS Abbreviations
16:21 – Custom Emmet Snippets
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #Emmet #learntocode

source