Front-end development artifact: Emmet, front-end development God emmet
Emmet (formerly Zen Coding) is an artifact that can greatly improve front-end development efficiency, allowing you to write HTML and CSS code.
Official Website: http://docs.emet.io/
1.> indicates the descendant
ul>li>a
<ul><li><a href=""></a></li></ul>
2. + indicates brother
div>h2+p
<div>
3. # id attribute
div#nav
<div id="nav"></div>
4. class Attribute
div.nav
<div class="nav"></div>
5. ^ indicates the upper level
div>p>span^a
<div><p><span></span></p><a href=""></a></div>
6. * Indicates multiplication.
ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li></ul>
7. [] indicates Custom Attributes
div>a[title="hello world"]*3
<div><a href="" title="hello world"></a><a href="" title="hello world"></a><a href="" title="hello world"></a></div>
8. {} indicates text
div>a[title="hello world"]{Hello World}*3
<div><a href="" title="hello world">Hello World</a><a href="" title="hello world">Hello World</a><a href="" title="hello world">Hello World</a></div>
9. () indicates the group.
div>(ul>li>a)*5+p{Hello World}
<div><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><ul><li><a href=""></a></li></ul><p>Hello World</p></div>
10. $ indicates auto-Increment
ul>li.item$*3
<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li></ul>
ul>li.item$$*3
<ul><li class="item01"></li><li class="item02"></li><li class="item03"></li></ul>
ul>li.item$@3*3
<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>
ul>li.item$@-*3
<ul><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>
11. More? See
What software is used for web Front-end development?
If you are a beginner, use editplus. This helps you understand the code and use dreamwaver again.
What are the most useful front-end development tools?
I just tried Microsoft's Modern. IE front end. It feels good.