01- EMMET
Workflow - Markup & Styling
Nesting
Exampleul>li>a 🔷⇥
Result<ul>
<li><a href=""></a></li>
</ul>
Sibling
Examplesection+header+nav 🔷⇥
Result<section></section>
<header></header>
<nav></nav>
Multiplication
Exampleul>li*3 🔷⇥
Result<ul>
<li></li>
<li></li>
<li></li>
</ul>
Class
Examplediv.contenedor 🔷⇥
Result<div class="contenedor"></div>
Classes
Examplediv.clase1.clase2.clasen 🔷⇥
Result<div class="clase1 clase2 clasen"></div>
Id
Examplenav#menu 🔷⇥
Result<nav id="menu"></nav>
Text
Examplediv{Lorem Ipsum Dolor} 🔷⇥
Result<div>Lorem Ipsum Dolor</div>
Custom Attribute
Examplea[href=www.google.com] 🔷⇥
Result<a href="www.google.com"></a>
Item Numbering
Exampleul>li.num$*3 🔷⇥
Result<ul>
<li class="num1"></li>
<li class="num2"></li>
<li class="num3"></li>
</ul>
Reverse Numbering
Exampleul>li.num$@-*3 🔷⇥
Result<ul>
<li class="num3"></li>
<li class="num2"></li>
<li class="num1"></li>
</ul>
Base Numbering
Exampleul>li.num$@3*4 🔷⇥
Result<ul>
<li class="num3"></li>
<li class="num4"></li>
<li class="num5"></li>
<li class="num6"></li>
</ul>
Climb Up
Examplesection>article>div^p 🔷⇥
Result<section>
<article>
<div></div>
</article>
<p></p>
</section>
Grouping
Example(header>nav)(section>article) 🔷⇥
Result<header>
<nav></nav>
</header>
<section>
<article></article>
</section>
Lorem
Examplelorem 🔷⇥
ResultLorem ipsum dolor sit amet, consectetur adipiscing elit...
HTML Documents
Examplehtml:5 🔷⇥
Result<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Meta Tags
Examplemeta:vp 🔷⇥
Result<meta name="viewport" content="width=device-width, initial-scale=1.0">
CHALLENGE
Códigoheader#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})
Resultado
<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>