Hey guys! Today we have a guest post from our friend Aditya Kanodia. This post is so cool that you can code a whole HTML page with just a single line of code, no exaggeration!. So keep on reading below! ~ Mike
Have you ever wished to code your websites really fast? If yes, then Emmet is just the right thing for you! Emmet is an extension made for your code editors to simplify your coding work.
So, in this article I will be showing how to get Emmet for your favorite editor and work with it.
1.0 Downloading Emmet
To download Emmet, visit the download page and choose your favorite editor. Here, I am choosing bracket as my code editor.
2.0 Working With Emmet
Working with Emmet is quite an easy task. We just have to wite the abbreviations and expand it by pressing Ctrl + Alt + Enter (Only in Brackets, for other please check the settings of your code editor.)
Let’s start with a simple example. Write the following code in brackets:
Ul>li*4>img
Now press Ctrl + Alt + Enter to expand, make sure your cursor is at the end of this line. After you have expanded it, the result will be something like this:
<ul> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul>
Boom! Are you amazed? It generates list items under unordered lists and also creates image tags for each li with alt attribute. This was really quick.
Now, let’s specify an "id" for our ul and make the HTML Markup for a random navigation. In Brackets, write the following code:
ul#nav>li*5>a{Page $}
In this case we write #nav as our id of ul tag. You might have noticed that I used {Page $} after anchor tag, that is because I want to make random names for my list items, where “PAGE” will remain constant and the numbers will increase from 1 to 5. Now expand this. And we get something like this:
<ul id="nav"> <li><a href="">Page 1</a></li> <li><a href="">Page 2</a></li> <li><a href="">Page 3</a></li> <li><a href="">Page 4</a></li> <li><a href="">Page 5</a></li> </ul>
So! That was cool, wasn’t it? Play around with different tags and use Emmet to the fullest.
3.0 The Ultimate Magic
Ok, here is the ultimate magic!
What if you want to make the HTML code for the whole page which has all the normal elements including logo, navigation and footer?
Surprise! I have the code which I made after researching and playing around with Emmet. And here it is:
html:5>div#container>div#header>div.mainLogo+ul#navigation>li*5>a{Page $}^^^+div#mainContent>h1+p*4^div#footer
Before we expand, let me explain a couple of things.
Html:5 is used to define the html 5 doctype. We have used + operator between mainLogo and ul and a couple of more times to place the tags on the same level. We have used ^^^ to shift the level of different ids slightly above. To make it clear play around with these and test what happens when you reduce or increase the number of exponents. Now, let’s expand our abbreviation. So here is how our HTML code looks after expanding:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="container"> <div id="header"> <div class="mainLogo"></div> <ul id="navigation"> <li><a href="">Page 1</a></li> <li><a href="">Page 2</a></li> <li><a href="">Page 3</a></li> <li><a href="">Page 4</a></li> <li><a href="">Page 5</a></li> </ul> </div> <div id="mainContent"> <h1></h1> <p></p> <p></p> <p></p> <p></p> </div> <div id="footer"></div> </div> </body> </html>
Cool isn’t it? You can change the ids according to your need and add or subtract the elements as per your choice. So good luck with Emmet and hope you code faster from now onwards!
4.0 Video Resource
For FREE programming tutorials, click the red button below and subscribe! :)
website