This content originally appeared on DEV Community and was authored by David Asaolu
Hi there, welcome to this tutorial. Today, I will be discussing how you can improve your coding speed with a popular plugin called Emmet.
Emmet is a plugin for many popular text editors that greatly improve HTML and CSS workflow.
So let's jump right into how to increase your coding speed with Emmet.
Different Emmet Shortcuts that can increase your coding speed
Child >
When you type :
nav>ul>li
Emmet converts it to
<nav>
<ul>
<li></li>
</ul>
</nav>
">" is used when you need to nest elements within one another
Sibling +
When you type:
header+main+footer
Emmets converts it to
<header></header>
<main></main>
<footer></footer>
"+" can be used when you need write some elements next to each other
Multiplication
When you type:
ul>li*5
Emmet converts it to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
"*" is used when you need some elements to occur more than once.
Item numbering: $
When you type
ul>li.item$*5
Emmet converts it to
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
When "$" is used, Emmet automatically numbers the elements. Also "." means class, just like in CSS styling.
Thank you for reading thus far.
Would love to know more about the power of Emmet.
Click Here
This content originally appeared on DEV Community and was authored by David Asaolu
David Asaolu | Sciencx (2021-05-17T03:35:27+00:00) Increase your coding speed 10X with Emmet. Retrieved from https://www.scien.cx/2021/05/17/increase-your-coding-speed-10x-with-emmet/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.