Faster, Simpler Code with Emmet

► 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

► Links used in the video:

► Social Media:

► Code & Projects:

[nilsnickname]

I didn't know Emmet before. It is very nice. Like HTML tryminim is explaining it most professional possible.

[lawrenceaprekuantwi]

Your tutorials have lessened the burden on learning and steeped my learning curve so far. I'm grateful to the algorithm that led me your way. Can't wait for the JavaScript Tutorials.

[audenbickel]

Super helpful. Have been using the shortcuts all day

[melovinpedida]

Best Emmet video on Youtube, period .

[petradanquah]

Great video. I appreciate this one so much and there is so many helpful shortcuts

[patttkaaa]

A very succint channel. You have pleasant tone of voice and you have the skills to transfer the knowledge. I'll definitely 'park' up here :-)

[marcusnoe]

Thanks Youtube for sending me this channel 🙏

[Naz-yibs]

Awesome video, thank you. I've got a question, @25:09 for the Emmet shortcut "ffa", we get,
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
within this font-stack, "Helvetica Neue", is in quotation marks and I'm wondering if that is because it's two words separated by space?

[ericrosales]

The best shortcut is "!" Have never build a html structure manually. Just hit "!"