EMMET

Introduction

Installation

Usage

HTML

Generating HTML 5 DOCTYPE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

Child items

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

Sibling Items

<html>
<head></head>
<body>
</body>
</html>

Multiplication

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

Grouping

<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<t></t>
<t></t>
<t></t>
<t></t>
<t></t>
</tr>
</table>

Class and ID

<div class="heading"></div>
<div id="heading"></div>
<div id="heading" class="center"></div>

Adding Content inside tags

<h1>Emmet is awesome</h1>
<h2>Every front end developers should use this</h2>
<p>This is paragraph</p>
<p>This is paragraph</p>

Attributes inside HTML tags

<a href="https://?google.com" data-toggle="something" target="_blank"></a>

Numbering

<h1>This is so awesome 1</h1>
<h2>This is so awesome 2</h2>
<h3>This is so awesome 3</h3>
<h4>This is so awesome 4</h4>
<h5>This is so awesome 5</h5>
<h6>This is so awesome 6</h6>
<img src="image05.jpg" alt="">
<img src="image04.jpg" alt="">
<img src="image03.jpg" alt="">
<img src="image02.jpg" alt="">
<img src="image01.jpg" alt="">
<img src="emmet100.jpg" alt="">
<img src="emmet101.jpg" alt="">
<img src="emmet102.jpg" alt="">
<img src="emmet103.jpg" alt="">
<img src="emmet104.jpg" alt="">

Tips

<input type="date" name="" id="">
<form action="" method="post"></form>
<link rel="stylesheet" href="style.css">
<div class="navbar">
<ul>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</div>

CSS

float: left;
position: absolute;
display: inline-block;
@font-face {
font-family:;
src:url();
}

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

Web Developer, Electrical Engineer @ https://best-celery-b2d7c.netlify.app/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store