Emmet: Write HTML+CSS Like a Ninja

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
55 Lessons (1h 4m)
    • 1. Class Introduction

      0:52
    • 2. // GETTING GOING

      0:39
    • 3. Quick Theory

      0:20
    • 4. Install Emmet

      0:24
    • 5. Emmet Installation in Sublime

      1:28
    • 6. // CSS ABBREVIATIONS

      2:01
    • 7. Abbreviations With Values

      1:56
    • 8. What Is The Abbreviation?

      1:45
    • 9. Gradients

      1:05
    • 10. Multiple Rules

      1:23
    • 11. Extra Info

      1:15
    • 12. Vendor Prefixes

      1:43
    • 13. Cool Abbreviations

      2:42
    • 14. // CSS SHORTCUTS

      0:12
    • 15. Increment Decrement Number

      1:03
    • 16. Math On The Fly

      0:48
    • 17. Reflect CSS Value

      0:33
    • 18. Toggle Comments

      0:29
    • 19. CSS Preprocessors

      0:52
    • 20. // HTML ABBREVIATIONS

      1:55
    • 21. Multiple Classes and IDs

      0:58
    • 22. Tag Types

      1:05
    • 23. HTML Attributes

      1:08
    • 24. Children, Multiplication and Incremental Numbers

      3:07
    • 25. Siblings And Groups

      1:34
    • 26. Climb Up

      1:13
    • 27. HTML Text

      0:44
    • 28. Lorem Ipsum

      0:53
    • 29. Unknown Abbreviations

      1:30
    • 30. Favorite Abbreviations

      1:14
    • 31. BEM Naming

      1:25
    • 32. Adding It All Together

      0:35
    • 33. // HTML SHORTCUTS

      0:14
    • 34. Balance Tags

      1:28
    • 35. Split Join Tag

      0:32
    • 36. Jump to Content Edit Point

      0:29
    • 37. Select Next & Previous Item

      0:19
    • 38. Remove Tag

      0:25
    • 39. Rename Tag

      1:12
    • 40. Goto Matching Pair

      0:43
    • 41. Wrap With Abbreviation

      1:18
    • 42. Toggle Comment

      1:32
    • 43. Update Image Size

      0:52
    • 44. // MORE AWESOME EMMET THINGS

      0:13
    • 45. Encode Image To Data

      1:29
    • 46. Merge lines

      1:13
    • 47. The Command Palette

      0:31
    • 48. Emmet Settings

      1:00
    • 49. Filters

      1:17
    • 50. // PRODUCTIVITY WITH SUBLIME

      0:14
    • 51. Without a Mouse

      5:55
    • 52. Split Into Lines

      0:52
    • 53. Tab Navigation

      0:59
    • 54. Emoji Picker

      0:47
    • 55. // CONCLUSION

      1:11
22 students are watching this class

Project Description

Let’s have some with the class project! If you’re up for it, there are 2 tasks I have for you:

  • I want you to write a website in a single HTML abbreviation, and post that expression in your project gallery. Then others can copy, paste, and expand!
  • Please tell us what you plan to do with the extra time you’ll be saving after beginning to use Emmet.

Resources(1)

Student Projects