June 25, 2020, 6:53 p.m.

How to Code Faster - Efficient way of writing HTML and CSS

In this article, I walk you through how we can write faster HTML and CSS code. Now I can understand your frustration that as a beginner or intermediate level of web developer it's kind of a hard thing. At first, it looks yeah!! we need to learn syntax about open up the HTML tag, close the HTML tag, open the head tag, close the head tag and so and so forth.

Sometimes it's a little bit frustrating as you move on into other web development skill because you already know that every tag needs to be closed there and these tags are sometimes time-consuming. One of the very classic examples is you have a paragraph and I want to fill that paragraph with some filler text. You move on to the lorem ipsum text you copy the text and paste into your paragraph tag. Yes, it does the job and its ok, its completely fine but it's a little bit less productive. You can be a little bit more efficient in writing webdev code.

So in this article I'll give you one simple productivity hack so that you can write your HTML and CSS code a lot more faster.


Problem Formulation I see this situation quite a lot when people jump into learning web development maybe HTML and CSS or it's their first time getting attracted with HTML and CSS. At first, they think that hey!! we need to learn this hard way. All the tag like HTML, body tag, head tag, paragraph tags, unordered list, ordered list all of that.

Now I don't say that it's bad but it's completely right that you write all of these tags manually at first so that you get an idea how can I debug the application or how all these tags behave. But eventually, there will be a time there will be a point that you will realise that... and I know these tags, I don't want to just write them again and again and it's a little bit time-consuming.


Solution So let's talk about the solution of such problem. Solution of this problem is Emmet . Now Emmet is not a new editor that you have to switch on or neither it's a new software that you have to install. It's kind of a plugin and basically it's just a plugin.

So now again you don't have to worry Emmet is a free plugin that you can install. It's almost similar to kind of a plugin that you install in your IDE for additional support & it's just like a simple plugin that you install in your Chrome browser or Firefox browser to do various kinds of things. I hope you don't use Internet Explorer but if you do use hey!! Best OF Luck for you.

The best part about this Emmet is you don't have to leave your favourite editor. It's available for most of the editors that are around, like sublime text, Atom, bracket whatever is your favourite editor. Chances are high that this plugin is already available for you. You just have to download it install it and processor already mentioned at their website.
It's super easy and this is A Remarkable plugin. You will enjoy that every single moment. What this plugin does it allows you to have a lot of shortcuts. Now in case, you do you remember in the Sublime text or editors like Atom, there are a couple of shortcuts available to you to just fill up the kind of boilerplate code for the HTML websites in just like that. This is almost similar but a little bit advanced. It gives you a lot of variety list of shortcuts that you can learn a little bit on the go and can use them in your daily life.


image not found


Now I have a amazing resource to get started with the Emmet and can increase your productivity here. Writing the HTML and CSS part is so much fun with Emmet . You don't have to look around for lorem ipsum text its solve a lot of things for you.

I can understand that the shortcuts at first are not the easiest one to take around but I am pretty sure that eventually with just a couple of times you will realise that Hey!! it's so much fun and I am gonna spend some time to learn that.

And how can I forget the best part about the Emmet that it's free, It's Simple, and I don't have to leave my favourite editor. If I am a big fan of sublime text or Atom I can just stay there. I really love this Emmet , I know I can understand a lot of intermediate web developer or advanced web developer will say that a much faster in writing the code manually than installing these plugins. NO!! no, my dear friend, you are a little bit wrong there. All I am saying is just be a little open-minded and just try it out. I am sure once you get the habit to emmet, it's hard to avoid it any time soon.

Just select your IDE before downloading emmet and install the plugin for your desired IDE.

image not found

With just this single plugin your productivity will increase upto 20% to 30% .
Here is a link by the help of which you can learn the keyboard shortcuts for emmet :
Emmet Shortcuts








Some recent posts



Complete process of changing database from SQLite to MySQL - How to migrat...

" How to download a file in django | Making a large file downloadable from ...

How to use proxy in python requests | http & https proxies - Scraping...

Top Django Querysets, How to filter records | Fetching data from database e...

How to change base url or domain in sitemap - Django ...

How to Make a Website - Everything you should know about web development...

What is Javascript - Features and usages ...

Top 5 Interview Questions : Tips for HR round ...

How to get job in IT : Perfect resume guide for IT job ...

Programming vs coding | difference between programming and coding ...



View all...