01-Emmet

Work flow - markup & styling

Emmet

1. Nesting >

Example

ul>li>a ↔️

Result

ul> <li><a href=""></a></li> /ul>

2. Sibling +

Example

section+header+nav ↔️

Result

<section></section> <header></header> <nav></nav>

3. Repart *

Example

ul>li*3 ↔️

Result

<ul> <li></li> <li></li> <li></li> </ul>

4. Classes .

Example

div.contenedor ↔️

.contenedor ↔️

Result

<div class="contenedor"></div>

5. Multiples Classes ...

Example

div.clase1.clase2.clasen ↔️

Result

<div class="clase1 clase2 clasen"></div>

6. ID #

Example

nav#menu ↔️

Result

<nav id="menu"></nav>

7. Text {}

Example

div{Lorem Ipsum Dolor} ↔️

a{Click Aquí} ↔️

Result

<div>Lorem Ipsum Dolor</div> <a href=“”>Click Aquí</a>

8. Custom Altr []

Example

a[href=www.google.com] ↔️

Result

<a href="www.google.com"></a>

9. Numbering $

Example

ul>li.num$*3 ↔️

section>article.sec$$$*3 ↔️

Result

<ul> <li class="num1"></li> <li class="num2"></li> <li class="num3"></li> </ul>

10. Dummy Text lorem

Example

lorem ↔️

Result

lorem*5 lorem lorem lorem lorem lorem

11. Invert Numbs @

Example

ul>li.num$@-*3 ↔️

Result

<ul> <li class="num3"></li> <li class="num2"></li> <li class="num1"></li> </ul>

12. Base Numb @n

Example

ul>li.num$@3*4 ↔️

Result

<ul> <li class="num3"></li> <li class="num4"></li> <li class=“num5"></li> <li class=“num6"></li> </ul>

13. Leveling ^

Example

section>article>div^p ↔️

Result

<section> <article> <div></div> </article> <p></p> </section>

14. Grouping ()

Example

(header>nav)(section>article) ↔️

Result

<header> <nav></nav> </header> <section> <article></article> </section>

15. Documents HTML

Example

html:xs ↔️

html:xt ↔️

html:4s ↔️

html:4t ↔️

html:5 ↔️

Result

Documento xhtml 1.0 Strict Documento xhtml 1.0 Transitional Documento html 4.01 Strict Documento html 4.01 Transitional Documento html 5

16. Meta TAGS

Example

meta:vp ↔️

Result

<meta name="viewport" content=“width=device-width...>
<>

17. Challenge

Code

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"]))))((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"]{Registrar})(li>a.link[href="contacto.html"]{Contacto}))))

Result

<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> <a href="index.php" class="navbar-brand"> <img src="imgs/logo.png" alt=""> </button> </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">Registrar</a> </li> <li> <a href="contacto.html" class="link">Contacto</a> </li> </ul> </div> </div> </nav> </header>