01- Emmet
Work Flow - Styling
1. Nesting >
Example
ul>li>a ↔️
Result
<![CDATA[
<ul>
<li><a href=""></a></li>
</ul>
]]>
2. Silbing +
Example
section+header+nav ↔️
Result
<![CDATA[
<section></section>
<header></header>
<nav></nav>
]]>
3. Repeat *
Example
ul>li*3 ↔️
Result
<![CDATA[
<ul>
<li></li>
<li></li>
<li></li>
</ul>
]]>
4. Class >
Example
div.contenedor ↔️
.contenedor2 ↔️
Result
<![CDATA[
<div class="contenedor"></div>
]]>
5. Multiple Classes >
Example
div.clase1.clase2.clasen ↔️
Result
<![CDATA[
<div class="clase1 clase2 clasen"></div>
]]>
6. Attribute Identifier >
Example
nav#menu ↔️
Result
<![CDATA[
<nav id="menu"></nav>
]]>
7. Add text >
Example
div{Lorem Ipsum Dolor} ↔️
Result
<![CDATA[
<div>Lorem Ipsum Dolor</div>
]]>
8. Customize Attributes >
Example
a[href=www.google.com] ↔️
Result
<![CDATA[
<a href="www.google.com"></a>
]]>
9. Consecutive Numbers >
Example
ul>li.num$*3 ↔️
section>article.sec$$$*3 ↔️
Result
<![CDATA[
<ul>
<li class="num1"></li>
<li class="num2"></li>
<li class="num3"></li>
</ul>
]]>
10. Address Consecutive Numbers >
Example
ul>li.num$@-*3 ↔️
Result
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num2"></li>
<li class="num1"></li>
</ul>
]]>
11. Base Consecutive Numbers >
Example
ul>li.num$@3*4 ↔️
Result
<![CDATA[
<ul>
<li class="num3"></li>
<li class="num4"></li>
<li class="num5"></li>
<li class="num6"></li>
</ul>
]]>
12. Level Up >
Example
section>article>div^p ↔️
Result
<![CDATA[
<section>
<article>
<div></div>
<p></p>
</article>
</section>
]]>
13. Group Elements >
Example
(header>nav)(section>article) ↔️
Result
<![CDATA[
<header>
<nav></nav>
</header>
<section>
<article></article>
</section>
]]>
14. Generate “Lorem Ipsum Dolor” >
Example
lorem ↔️
lorem20 ↔️
lorem*5 ↔️
Result
<![CDATA[
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
]]>
15. HTML Documents >
Example
1. html:xs ↔️
2. html:xt ↔️
3. html:4st ↔️
4. html:4t ↔️
5. html:5 ↔️
Result
<![CDATA[
1. Documento xhtml 1.0 Strict <br>
2. Documento xhtml 1.0 Transitional <br>
3. Documento html 4.01 Strict <br>
4. Documento html 4.01 Transitional <br>
5. Documento html 5
]]>
16. Meta TAGS >
Example
meta:vp ↔️
Result
<![CDATA[
<meta name="viewport" content="width=device-width..">
]]>
17. Challenge >
Example
header#header>nav.navbar.navbar-inverse>div.container>div.navbar-header>button.navbar-toggle[type="button"]>(span.sr-only{Toggle navigation}+span.icon-bar*3)^a.navbar-brand[href="index.php"]>img[src="imgs/logo.png" alt=""]^^div.collapse>ul.nav.navbar-nav>li>a.link[href="index.html"]{Inicio}^li.active.link>a[href="login.html"]{Ingresar}^li>a.link[href="registro.html"]{Registrarse}^li>a.link[href="contacto.html"]{Contacto} ↔️
Result
<![CDATA[
<header id="header">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" class="navbar-brand">
<img src="imgs/logo.png" alt="">
</a>
</div>
<div class="collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html" class="link">Inicio</a>
</li>
<li class="active link">
<a href="login.html">Ingresar</a>
</li>
<li>
<a href="registro.html" class="link">Registrarse</a>
</li>
<li>
<a href="contacto.html" class="link">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
]]>