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 web developer, it's kind of a hard thing. At first, it looks like yeah!! we need to learn syntax about opening up the HTML tag, closing the HTML tag, opening the head tag, closing the head tag, and so so forth.

Sometimes it's a little bit frustrating as you move on to other web development skills 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 copy the text and paste it into your paragraph tag. Yes, it does the job, and it's okay, it's completely fine but it's a little bit less productive. You can be a little bit more efficient in writing web dev 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 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 to HTML and CSS. At first, they think that hey!! we need to learn this hard way. All the tags like HTML, body tags, head tags, paragraph tags, unordered lists, ordered lists 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 of 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 realize 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 to such a problem. The solution to 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 the 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 favorite editor. It's available for most of the editors that are around, like sublime text, Atom, bracket whatever your favorite editor is. Chances are high that this plugin is already available for you. You just have to download it install it and the processor is already mentioned on their website.
It's super easy and this is A Remarkable plugin. You will enjoy every single moment. What this plugin does is allow you to have a lot of shortcuts. Now in case, you do remember in 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 in your daily life.

Now I have an amazing resource to get started with 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 it solves a lot of things for you.

I can understand that the shortcuts at first are not the easiest ones to take around but I am pretty sure that eventually with just a couple of times, you will realize 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 favorite 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 developers or advanced web developers will say that it a much faster in writing the code manually than install these plugins. NO!! no, my dear friend, you are a little bit wrong there. All I am saying is just to be a little open-minded and just try it out. I am sure once you get the habit of 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.

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