Emmet = Faster HTML & CSS Workflow!

Channel:
United States codeSTACKr
Subscribers:
295,000
Published on ● Video Link: https://www.youtube.com/watch?v=EzGWXTASWWo


Duration: 20:11
46,776 views
2,240

πŸ‘‰ 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



Other Videos By codeSTACKr


2020-01-04JavaScript IIFE ? In 90 Seconds #JavaScriptJanuary
2020-01-03JavaScript Null vs Undefined - #JavaScriptJanuary
2020-01-02JavaScript Equality in 90 Seconds #JavaScriptJanuary
2020-01-01JavaScript in 90 Seconds #JavaScriptJanuary
2019-12-30Channel Update 2020 - The Future of codeSTACKr
2019-12-21JavaScript this Keyword Explained In 3 Minutes
2019-12-11CSS Position Explained In 6 Minutes
2019-11-29Web Developer Roadmap 2020 | A Guide To Starting A Career In Web Development
2019-11-20JavaScript Loops Made Easy
2019-11-15CSS Units of Measurement [rem, em, vw, vh, px, %]
2019-11-06Emmet = Faster HTML & CSS Workflow!
2019-11-01Animated Social Media Buttons 3 Ways | HTML & CSS
2019-10-19Top 10 Best VS Code Extensions
2019-10-11Fetch API Explained - Working with Data & APIs in JavaScript
2019-10-02Animated Responsive Navbar with Mobile Mega Menu Tutorial - (SCSS)
2019-09-27Backtick Template Literals Slower? - JavaScript String Testing
2019-09-24Transparent Login Form - HTML & CSS ONLY
2019-09-20Before and After Pseudo Elements Easily Explained [CSS]
2019-09-13Responsive CSS iPhone 11 Product Card Tutorial
2019-09-11Animated Hamburger Menu Tutorial - CSS Effects
2019-09-06Async JavaScript - Callbacks, Promises, Async/Await


Tags:
emmet tutorial
emmet plugin
emmet brackets
emmet atom
emmet vs code
emmet visual studio code
emmet extension
emmet course
emmet.io
emmet
html emmet
html emmet tutorial
emmet html
emmet css
web development tool
visual studio code emmet
visual studio code emmet tutorial
visual studio code tutorial
visual studio code
snippets
web development
web dev
introduction to emmet
tips and tricks
atom editor
brackets editor
visual code
sublime text