Emmet: Fast and Efficient Web Coding

Learn how to use the handy shortcuts that Emmet offers to code faster and more efficiently.

Introduction

• Emmet speeds up your work
• What you should know
• Exercise files

1. Getting Started with Emmet

• What is Emmet?
• What does Emmet work with?
• Installing Emmet

2. Get Up and Running with Emmet

• Overview of how Emmet works
• Basic Emmet syntax
• Understanding selectors
• Generating DOCTYPEs
• Adding style sheets and scripts tags
• Customizing Emmet

3. Emmet Fundamentals

• ID and class selectors
• Navigating the document tree
• Replication
• Adding lorem ipsum

4. Emmet and HTML

• Comments
• Numbering
• Adding attributes
• HTML5 semantic tags
• Building forms
• Time-saving actions
• Wrap with abbreviation action
• Filters

5. Emmet and CSS

• Emmet and CSS
• CSS shortcuts and fuzzy search
• Incorporating values
• Multiple values
• Gradients
• Animation
• CSS reflect value
• CSS flexbox
• Customize CSS snippets

6. Emmet and Visual Studio Code

• Working with Emmet in Visual Studio Code
• Emmet in VSC problems
• Creating custom keyboard shortcuts

7. Emmet Challenge

• How fast can you code this?
• Challenge solution

Conclusion

• Next steps