Emmet Tools for Web Developers
description
Transcript of Emmet Tools for Web Developers
![Page 1: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/1.jpg)
EmmetTools for Web Developers
![Page 2: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/2.jpg)
Emmet for Sublime
“Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow”
Adds tons of shortcuts to make writing html very fast
emmet.io
![Page 3: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/3.jpg)
Emmet for Sublime
Available for many editors Sublime
Eclipse
Coda
Notepad++
Dreamweaver
Brackets
Codepen
JsFiddle
And more
![Page 4: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/4.jpg)
Emmet for Sublime
How does it work? You simply type in a shortcut
div Then press tab, it becomes
<div></div>
![Page 5: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/5.jpg)
Emmet for Sublime
You can even do multiples div*3 becomes
<div></div> <div></div> <div></div>
![Page 6: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/6.jpg)
Emmet for Sublime
You can add a class div.this becomes
<div class='this'></div>
You can add an id too
div#this becomes
<div id='this'></div>
![Page 7: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/7.jpg)
Emmet for Sublime
These can be combined to
be even more complex div.these*3 becomes
<div class='these'></div> <div class='these'></div> <div class='these'></div>
![Page 8: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/8.jpg)
Emmet for Sublime
Use > to designate child elements ul>li#item*3 becomes
<ul> <li id='item'></li> <li id='item'></li> <li id='item'></li>
</ul>
![Page 9: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/9.jpg)
Emmet for Sublime
But wait, the ids are the same! We can
Increment using $ ul>li#item$*3 becomes
<ul> <li id='item1'></li> <li id='item2'></li> <li id='item3'></li>
</ul>
![Page 10: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/10.jpg)
Emmet for Sublime
We can put inner text using {} p{This is text.} becomes
<p>This is text.</p>
We can also do attributes with []
img[src='image.jpg'] becomes
<img src='image.jpg'></img>
![Page 11: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/11.jpg)
Emmet for Sublime
You can make siblings with the + div>h1+ul>li*3 becomes
<div> <h1></h1> <ul>
<li></li> <li></li> <li></li>
</ul> </div>
![Page 12: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/12.jpg)
Emmet for Sublime
Sublime also has a feature where you can leave
off the tag and it assumes which you want .this becomes
<div class='this'></div>
ul>.this*3 becomes
<ul>
<li class='this'><li class='this'><li class='this'>
</ul>
![Page 13: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/13.jpg)
Emmet for Sublime
When building a table, it assumes the row
AND data cell table>.row>.col becomes
<table> <tr class="row">
<td class="col"></td> </tr>
</table>
![Page 14: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/14.jpg)
Emmet for Sublime
Handy Shortcuts ! or doc creates a full html5 skeleton input:radio creates a full radio input button link:css creates a link tag with the css info meta:utf creates a meta tag with the full utf info meta:vp creates a meta tag with viewport info form:post creates a POST form
![Page 15: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/15.jpg)
Emmet for Sublime
Css is handled a bit differently because it would be hard to remember all of the shortcuts for css attributes (although they still have them if you want to use them).
Instead, they have something called fuzzy search.
The way it works is that you can type whatever you like, and emmet guesses which you meant.
If you wanted overflow:hidden; you could type ovh, ov:h, ov-h, or even oh.
![Page 16: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/16.jpg)
Emmet for Sublime
The full list of commands is available at http://docs.emmet.io/cheat-sheet/
![Page 17: Emmet Tools for Web Developers](https://reader035.fdocuments.net/reader035/viewer/2022062408/56813cd8550346895da67cfa/html5/thumbnails/17.jpg)
Emmet for SublimeQuestions
Write a valid line of Emmet code for an unordered list with three list items, each having an incremental id (item1, item 2, item 3).
How can you create the skeleton of a web page quickly using one character in Emmet?
What is 'fuzzy search', and why is it useful?
List three editors that Emmet is available for.