Ngoding jadi lebih mudah dengan emmet, tutorial menginstal emmet pada bracket

Apa itu emmet?

Emmet adalah sebuah plug-in yang di instal pada aplikasi text editor yang berfungsi untuk memudahkan programmer dalam membuat sebuah code dalam HTML, CSS, dan lainnya.

Contoh penggunaan emmet

1. Syntax membuat tag dengan menambah class atau id

div.header

div#footer

Output :

<div class="header">
 tag dengan class
</div>

<div id="footer">
 tag dengan id
</div>

2. Child : >

nav>ul>li>a

Output :

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

3. Sibling : +

div+p+span

Output :

<div></div>
<p></p>
<span></span>

dan masih banyak lagi syntax pada emmet yang bisa diterapkan pada HTML dan CSS. untuk lebih lengkapnya, anda bisa mendownload document pdf di bagian akhir artikel

Cara menginstal emmet

Untuk aplikasi text editor nya saya menyarankan anda untuk menginstal aplikasi yang namanya Bracket. mengapa Bracket? pendapat saya sendiri, Bracket adalah aplikasi text editor yang mudah digunakan juga sangat ramah untuk komputer atau laptop low end seperti saya ini. download Bracket disini

Setelah mendownload dan menginstal aplikasi Bracket, selanjutnya buka aplikasi Bracket kemudian klik File > Extension Manager

Pada Search ketikkan kata kunci "Emmet" kemudian instal Emmet yang terdapat deskripsi High-speed HTML and CSS workflow, dan tunggu beberapa saat hingga proses instalasi selesai

Setelah selesai menginstal, sekarang emmet sudah bisa digunakan pada text editor Bracket. untuk panduan lengkap cheat sheet yang ada pada emmet, silahkan anda download document berikut ini (Download)