Emmet: Fast and Efficient Web Coding
2h 42mAdvanced2021-03-22
Authors
Emily Kay
Web Developer and Graphic Designer
Course details
Looking for a tool to make you a faster and more efficient programmer? Take a look at Emmet, a free add-on for a variety of text editors. It provides a shortcut language for writing HTML and CSS, based on an abbreviation structure most developers already use that expands into full-fledged HTML markup and CSS rules. In this course, instructor Emily Kay shows you how to uses the convenient shortcuts in Emmet for making copies of elements; comments, filters, and numbering; matching tags; and even complex CSS features like gradients. Emily also includes details on how to use Emmet with Visual Studio Code.
Skills covered
EmmetVisual Studio CodeWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceMicrosoftDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Emmet speeds up your work
- 02 - What you should know
- 03 - Exercise files
1. Getting Started with Emmet
- 04 - What is Emmet
- 05 - What does Emmet work with
- 06 - Installing Emmet
2. Get Up and Running with Emmet
- 07 - Overview of how Emmet works
- 08 - Basic Emmet syntax
- 09 - Understanding selectors
- 10 - Generating DOCTYPEs
- 11 - Adding style sheets and scripts tags
- 12 - Customizing Emmet
3. Emmet Fundamentals
- 13 - ID and class selectors
- 14 - Navigating the document tree
- 15 - Replication
- 16 - Adding lorem ipsum
4. Emmet and HTML
- 17 - Comments
- 18 - Numbering
- 19 - Adding attributes
- 20 - HTML5 semantic tags
- 21 - Building forms
- 22 - Time-saving actions
- 23 - Wrap with abbreviation action
- 24 - Filters
5. Emmet and CSS
- 25 - Emmet and CSS
- 26 - CSS shortcuts and fuzzy search
- 27 - Incorporating values
- 28 - Multiple values
- 29 - Gradients
- 30 - Animation
- 31 - CSS reflect value
- 32 - CSS flexbox
- 33 - Customize CSS snippets
6. Emmet and Visual Studio Code
- 34 - Working with Emmet in Visual Studio Code
- 35 - Emmet in VSC problems
- 36 - Creating custom keyboard shortcuts
7. Emmet Challenge
- 37 - How fast can you code this
- 38 - Challenge solution
Conclusion
- 39 - Next steps