Emmet Series1🎉- Boost your productivity
Tags: webdev, html, css, productivity
Published: 2022-01-10 13:37:19

Hey There, Header seems weird right😵. Don't panic it's not heavy handed. Sometimes feel getting infuriated to structuring our markup😩 and we have plenty of styles waiting to make website look pretty neat. Start to take advantage of <b>emmet</b> which bring off what they promise, you can use short expressions to generate HTML markup, CSS. So, Get this show on the road🎉.

> <em>📝<b>Note:</b> I hold on to series. Desire to take you from overwhelmed and make feel consistent. We just Start uncomplicated to little complicated level.</em>

### Table Of Contents
* [Generating HTML Skeleton](#chapter-1)
* [Generating Child Element](#chapter-2)
* [Generating Sibling Element](#chapter-3)
* [Grouping the elements](#chapter-4)
* [Replicate the elements](#chapter-5)
* [Bonus info🎉🎉](#chapter-6)

### Generating HTML Skeleton<a name="chapter-1"></a>
Often need to create new <code>.html</code> file, Every time we can't write the starter code. At that frustrating level, can't explain in words😵.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iavndtlxjkrm8wf4t6of.gif) 
Uh, we are in emmet world which changed the pain points by just type <code><b>!</b></code> or <code><b>doc</b></code> and hit <code>enter</code> or <code>tab</code>. Hurray🎉, which grant starter code in a seconds.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enw1iuzhjko1n4oke2fg.png)
### Generating Child Element<a name="chapter-2"></a>
In Markup, All are in <b>parent-child relationship</b>. In simple words, Building nested elements By using <code>></code> symbol.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znl5t9ywufskj121912w.png)
Hope you grasped the idea💡behind the <code>></code>.

For instance,
```CSS
nav>ul>li>a
```
After typing in IDE (<em>In the fullness of time, I love Visual Studio Code💖</em>), hit <code>enter</code> or <code>tab</code>. whoopee, Emmet guy done their job in a light speed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz9zpii25p7oka2mliqg.png)
I can get your question. Incase of child or parent have sibling then how can I do in Emmet. Uh, That's also possible which means we can generating sibling element also.

### Generating Sibling Element<a name="chapter-3"></a>
Simply, Use <code>+</code> symbol for sibling guys.
```css
header+main+footer
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwq16p0t2q8hlw6nskh6.png)
### Grouping the elements.<a name="chapter-4"></a>
Grouping idea is outstanding and really handy in plenty of places.
Just group the element by using <code>()</code> irrespective of relationships.  
```css
(header>nav>ul>li>a)+main+footer
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2kn5wim38os8f48rwzn.png)

### Replicate the elements<a name="chapter-5"></a>
In some situations, Requirement to duplicate the elements by the time, Often press <code>ctrl + c</code> then <code>ctrl + v</code> or <code>shift+alt+down-arrow</code>.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03r8xztu1bpnpgpcllm4.gif)
Just chill, Not a big deal. Emmet guy already grant the multiplication <code>*</code> symbol which <b>multiply the elements like the way you want</b>.
```css
nav>ul>(li>a)*5
```
> <em>Just hit <code>enter</code> or <code>tab</code>. whoopee, Emmet guy done their job already, you didn't noticed it below😉.</em>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnw6ye36sjz76bowvlgh.png)

Wow, Still with me which proof again and again that's you are big fan of learning new things. Proud of you man👏🏻👏🏻. Then It's my pleasure to give you a bonus info(keep it secret😉).

### Bonus Info🎉🎉<a name="chapter-6"></a>
We can <b>order that duplicated items</b> which is really costly💰. Haha, Just use <code>$</code> to order.

> <em>Note: <code>$</code> is only applicable when multiplication <code>*</code> implemented in end</em>

Before see the instance. One more info, use <code><b>.</b></code> for <b>class</b> and <code><b>#</b></code> for <b>id</b>
```css
ul>li.link$*5
```
Results really make painless feel.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/344fzkciurnf8j0w2mqx.png)

If you order in <b>decreasing order</b>, that also possible😎 by using <code>@-</code> beside the <code>$</code>. Seems weird, You will get my point by instance below.

```css
 ul>li.link$@-*5
```
See the magic🪄

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psvb9grq1kgr1lum9vl1.png)

><em>Hope we will meet on upcoming series😊</em>

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

If you not experiment with <b><a href="https://dev.to/preethi_dev/a-new-two-value-syntax-for-display-property-1p1e">A new two-value syntax for <code>display</code> property</a></b>, Start to explore now.

Thanks for Reading!!
<a href="https://dev.to/preethi_dev"><b>Preethi</b></a>
<em>- Make your CSS life easier</em>