Faster HTML And CSS Creation with Emmet

Emmet is a tool designed to help developers save time while writing and by encapsulating pieces of code and loading them with the help of easy shortcuts, here's an example: HTML CSS Lets say you are beginning a new HTML project, the first thing you do is create an index.html file, with the help of Emmet you can instantly have at your disposition an HTML boilerplate with the " ! " shortcut: ! Then we press the TAB key to expand the code and voila! Document html lang "en" head meta charset "UTF-8" meta name "viewport" content "width=device-width, initial-scale=1.0" meta http-equiv "X-UA-Compatible" content "ie=edge" title title head body body html Emmet includes abbreviations for every tag: HTML div expands to a expands to br expands to div div a href "" a br Emmet comes pre-equipped with abbreviations as well, here are a few examples: CSS pos = position bg = background m = margin c = color fl:l = float-left fl:r = float-right Chain Abbreviations You can also chain abbreviations with a CSS look-alike syntax, Lets imagine we are going to create a form with an email as input: form:post#sample-form>label[for=email]+input#email+button:s This creates a with and , we pass the character to create child elements, the first one is a label, then we add an with and a with : form method="post" id="sample-form" > input id="email" button type="submit" form action "" method "post" id "sample-form" label for "email" label input type "text" id "email" button type "submit" button form Creating an enumerated list with this chained abbreviations #wrapper>ul#sample-list>li.item-$*3>{Item $} Here creates a div element with then we pass the character to reference children elements, then we create an unordered list or element with and then we pass the character again to create list-item or elements inside the , to end things we give every li element a where becomes respectively: #wrapper id="wrapper" > #wrapper ul id="sample-list" > li ul class="item-(1,2,3)" $ (1,2,3) Item 1 Item 2 Item 3 div id "wrapper" ul id "sample-list" li class "item-1" li li class "item-2" li li class "item-3" li ul div Setup / Installation Fortunately Emmet is already built into some of the most used text editors, if your favorite text editor doesn't come with it, you can also download it as a plugin and check for specific instructions from their website. Links Emmet Download https://emmet.io/download/ Emmet Documentation https://docs.emmet.io/ Cheat Sheet https://docs.emmet.io/cheat-sheet/ If you made it this far i hope this article helped you in one way or another, thanks for reading!

Faster HTML And CSS Creation with Emmet

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@noomdalv

RELATED STORIES