The Secret Weapon to Increase Your Front End Coding Productivity

July 22, 2015 Vova Kovalenko

Naturally, developers spend a lot of time writing code. How many times have you asked yourself how to write your code more efficiently and elegantly than you usually do? Have you looked for different ways as how to increase your speed of coding and, at the same time, not to lose its quality?

I want to let you in on my little secret on you how you can write your HTML/CSS code much faster.

A lot of different code editors/ IDEs have support for Emmet.  Emmet is a plugin for editors/ IDEs which greatly improves HTML & CSS workflow.

Personally, I prefer using the PHPStorm IDE as it includes a lot of other cool features that would be interesting for web developers. 

Let’s Dive In

Here, I’ve created a new HTML l file. Now I want to generate a typical HTML5 structure. Just type “!” and press “tab”:

As a result, you will see the following nicely formatted document structure without having to write it from scratch:

Nice, isn’t it? Emmet has just generated this HTML5 structure for us.  Usually we need some basic HTML elements like header, content, or footer. So, let’s type this code and press “tab”:

You will get the following nested structure:

What if you want to generate menu that contains five elements, and each of them has a link inside?

It's a breeze if you use Emmet:


Besides, Emmet provides amazing support within CSS styles. Using Emmet, you can write your CSS code much  faster. I am going to show you several examples of how you can use Emmet in some common situations.

Let's try Border-radius with Emmet:


Here's how you'd do a Border shadow:


Let's try adding Opacity for Internet Explorer:


As you can see, we can write HTML and CSS much more efficiently with Emmet's abbreviations allowing you to take out the repetitiveness of writing HTML or CSS from scratch.

What tips or tricks do you have up your sleeve that makes you happier or more productive as a developer?

About the Author

Vova Kovalenko

Volodymyr is a software developer at Uberflip who works both on front and back end. He is always eager to learn up to date technologies and implement them in his work. In his spare time he likes watching movies, as well as playing basketball and soccer.

More Content by Vova Kovalenko
Previous Article
How to use oAuth or SAML with Hub Authentication
How to use oAuth or SAML with Hub Authentication

Learn how to convert Hub Authentication into any login system of choice.

Next Article
The Best Practices For Incident Response Management Part 2 of 2
The Best Practices For Incident Response Management Part 2 of 2

In the first part of this series, we introduced incident response, defined incidents, and covered ownership...


Get our latest content delivered straight to your inbox!

First Name
Error - something went wrong!