Overview
-
Learn how to use the handy shortcuts that Emmet offers to code faster and more efficiently.
Syllabus
-
Introduction
- Emmet speeds up your work
- What you should know
- Exercise files
- What is Emmet?
- What does Emmet work with?
- Installing Emmet
- Overview of how Emmet works
- Basic Emmet syntax
- Understanding selectors
- Generating DOCTYPEs
- Adding style sheets and scripts tags
- Customizing Emmet
- ID and class selectors
- Navigating the document tree
- Replication
- Adding lorem ipsum
- Comments
- Numbering
- Adding attributes
- HTML5 semantic tags
- Building forms
- Time-saving actions
- Wrap with abbreviation action
- Filters
- Emmet and CSS
- CSS shortcuts and fuzzy search
- Incorporating values
- Multiple values
- Gradients
- Animation
- CSS reflect value
- CSS flexbox
- Customize CSS snippets
- Working with Emmet in Visual Studio Code
- Emmet in VSC problems
- Creating custom keyboard shortcuts
- How fast can you code this?
- Challenge solution
- Next steps
