Emmet is very useful toolkit for some online services and plug in for text editors to write HTML and CSS code quickly and easily.
Emmet is available for some of the most popular and widely used Text editors, you can install it easily to make your HTML and CSS workflow much faster and simpler.
I have been using Emmet for long time and love it. Writing HTML and CSS was never simple and easy before Emmet. If you don’t know what is Emmet and how you can use it, don’t worry i have just published a video course on udemy Faster HTML & CSS workflow with Emmet + Bootstrap.
There are 16 video lectures to learn everything about Emmet. after watching this video course you will be able to write HTML and CSS quickly and easily with Emmet.
Emmet uses simple small abbreviations and allows you to press trigger key (for SublimeText and brackets it’s Tab) to expand abbreviation into complete HTML or CSS mark up.
For example if you will type ! or html:5 and hit tab, Emmet will generate following mark up for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
isn’t that simple and easy way to generate mark up quickly. Let me show you another example. navigation menus are very important part of websites and it takes a lot of time to type complete marl up for navigation.
Emmet’s wrap with abbreviation function is one of the most powerful function. Lets’ suppose you need 4 nav items for your navigation menu. Type the text of your nav items like following
home
blog
about
contact
press Ctrl+A to select all items and then press Ctrl+Alt+Enter keyboard shorcut, an small window will appear to enter your emmet abbreviation. Now type following abbraviation
nav.nav-main>ul>li.nav-item-$*>a[href=$#]{$#}
and press enter. With above abbreviation emmet will generate following mark up for you.
<nav class="nav-main">
<ul>
<li class="nav-item-1"><a href="home">home</a></li>
<li class="nav-item-2"><a href="blog">blog</a></li>
<li class="nav-item-3"><a href="about">about</a></li>
<li class="nav-item-4"><a href="contact">contact</a></li>
</ul>
</nav>
You see. how powerful emmet is. Emmet has a lot of great stuff for you. Just join my course on udemy 350+ students have enrolled for Faster HTML & CSS workflow with Emmet + Bootstrap course in a week.
What’s extra Bonus Stuff
You will not only how to use Emmet to make your HTML and CSS workflow faster and simpler but there are exclusive video lecture that will help you to learn how you can use Emmet and Bootstrap framework to create mark up for entire web pages quickly.
Enroll now for Emmet course
Faster HTML & CSS workflow with Emmet + Bootstrap
Don’t forget to share add your comments and review of you like my course.
Leave a Reply