► Writing code is much more efficient when done with Emmet. We can improve our workflow by using snippets or shortcodes that Emmet expands out into full sections of HTML & CSS code.
These abbreviated snippets speed up our coding and also completely remove the possibility of human error - which is likely the number one cause of bugs in web applications.
► Timestamps:
0:00 Start
1:42 What is Emmet?
3:52 HTML boilerplate shortcut
4:03 Link a stylesheet
4:33 Create an HTML element
6:00 Lorem Ipsum
8:23 Classes & IDs
12:58 Nesting child elements
13:48 $ numerical placeholder
15:11 Creating sibling elements
16:32 Grouping elements
17:08 Linking scripts
17:37 Start of CSS shortcuts
17:49 Color
18:27 Background
19:18 Display
20:20 Margin & Padding
22:06 Sizing
23:55 Borders
24:39 Fonts
26:26 Text
27:02 Commenting
28:35 Emmet Cheat Sheet
► Get the code: https://github.com/craigabourne/emmet (Use the green button to download a zip file or clone the repo if you know Git)
► Links used in the video:
Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/
Emmet in VS Code: https://code.visualstudio.com/docs/ed...
► This video is part of the Tools, Tips & Tricks for Developers Playlist: • Developer Tools
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Watch video Faster, Simpler Code with Emmet online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 21 January 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,783 once and liked it 110 people.