In my LICEcap animated Gif screen recorder tutorial I published 4 days ago, I embedded an animated gif visualizing me typing in HTML code. However, I didn't "just" code barebones HTML there, but instead, I typed in CSS-like expressions that expanded into valid HTML code. Not only does that work way faster, it's also cleaner and less error-prone to bugs (for example forgetting to properly indent and / or writing mal-formed HTML because of missing closing tags).
The tool I used to "Speed-Code HTML" is called Emmet. Emmet is a very cool open source extension for your code editor and it can really improve HTML workflow. (Although Emmet can also be used with other programming languages as well, in this tutorial I only show how to use Emmet for dynamically parsing CSS-like expressions into valid HTML code).
Atom > Preferences (or use the shortcut keys CMD , on Mac and Ctrl , on Windows / Linux), to enter the Settings tab,Settings menu click + Install, in the search bar type Emmet and then press Enter of click on Packages. Depending on your current internet speed it may take a second to a couple of seconds to retrieve all packages matching your search,If everything went just as I've described, you are good to go!
index.html. This way your code editor is told you are editing an HTML file and the Emmet extension "knows" that it should interpret your CSS-style expressions and expand those to valid HTML,<div class="active"></div>. Then in CSS you can assign a blue background color to it via div.active { background-color: blue; }. Emmet works exactly the other way around using the same CSS-syntax: you create that HTML exact code via Emmet by typing, inside your index.html file, this:div.active
TAB key on your keyboard.-1 In this first example, we are filling the index.html file with a barebones bootstrap including the HTML5 doctype declaration, an <html>, <head> and <body> statement, and some HTML meta-data, by just typing in an exclamation mark ! and hitting the TAB key, like so:
-2- Next, go inside the <body> element and type section#top follow by a TAB key press, to create <section id=top></section>. Remember: in CSS selectors, section is the referred element and # refers to an id HTML attribute, with - in this case top as the id name:
-3- Inside <section id=top></section> we want to insert a <div> with class="wrapper">, so we just type div.wrapper and then hit the TAB key again:
-4- Emmet also allows for "nesting" operators to position abbreviated elements inside generated DOM (Document Object Model) elements. So inside <div class="wrapper"> we now want to place another <div> with id="topnav" and inside that we want to place an unordered list element <ul>, via the Emmet syntax: div#topnav>ul, where in this case ul is a child element of div#topnav. The most important take-away here is that you should use the > (greater than) sign to insert child elements:
-5- Using the * multiplication operator you can define the frequency of an inserted element. If we want to now insert 6 <li> elements inside the <ul>, and let each <li> contain one <a> then we type: li*6>a and hit the TAB key, like so:
-6- You can also insert "sibling" elements via the + (plus) sign, for example let's add two more sections below <section id="top>"> via section#content+section#news:
-7- We can also add text inside an element using {} Curly Braces, for example to add the text "Hello World!" inside an <h1> element inside a <div class="wrapper"> inside <section id="content"> we type:
div.wrapper>h1{Hello World!}and hit the TAB key again:
-8- We can create complex expressions by grouping them inside ( ) Parentheses, for example, to top it all of, let's add a complete FAQ and Footer section including HTML structure and content, in one big Emmet expression, like so:
(section#faq>div.wrapper>div.col*2>p)+(footer>div.wrapper>(div.col>h5{Contact us})+(div.col*2>p))
I just love it! Emmet can really speed up your HTML development and personally, I use it all the time. I hope this tutorial inspired you to start using Emmet as well! Have fun with it!
