From the course: Emmet: Fast and Efficient Web Coding
What is Emmet?
- [Instructor] when you're coding out HTML and CSS, do you ever think to yourself, "how can I save time? This is a lot of typing. Why is this taking so long? There must be some kind of shortcut." Well I have just the thing for you. Emmet is going to change how you code. I guarantee one you get a handle on how to use it, you will significantly cut down the time it takes to develop your webpages. Emmet is a free add-on for your text editor. It allows you to type shortcuts that are then expanded into full pieces of code. By using Emmet, developers type less, they save both on keystrokes and time. Also relying on Emmet's auto completion means fewer typos and missing tags, leading to more robust and valid files. It's also open source, so if you are so inclined you can further customize it yourself. Emmet is available for a variety of editors, and it's built right into many editors. Once installed, Emmet allows you to type using abbreviated code that follows the same conventions used in HTML and CSS. Designers can type element names, add IDs and class selectors, and take advantage of Emmet's more advanced functions to speed up the coding process. You can even nest elements using the same child and sibling selectors found in plain CSS to quickly scaffold large blocks of code. Emmet has a ton of useful features, including functions to group items, it allows you to quickly navigate, remove tags, merge lines, and even add dummy text. While there are far too many features to discuss here, Emmet's online documentation is a great place to learn more. This course will start from teaching the instillation of Emmet on a variety of popular editors, and then we will move into understanding the syntax and the basics. We will cover little known productivity hacks and make sure that you feel comfortable with speedy coding techniques. We will explore the concepts of creating child's, siblings, and climbing up the tree to create DOM structure. We will learn the shortcuts for IDs and classes. Further, we will HTML tag generation. And then we'll move toward CSS and we will learn to link the CSS very quickly and also produce very fast CSS coded files. Furthermore, we will explore the margins, patting, and color shortcuts that all are part of Emmet. If you make a lot of HTML templates with nav bars, tables, and or multi-column layouts, you will find Emmet immensely helpful. Once you get use to the Emmet syntax, it will change your way of creating webpages. I assure you, you will love Emmet when you use it in your workflow. Emmet may well change your way of writing HTML and CSS code and make you super speedy. At first you will feel like a magician. And yes, it is very magical to write code at such a fast speed. So enough talking and let's get productive with Emmet.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.