I was writing HTML, and it was taking a lot of time. I was thinking, What can I do to write HTML faster and save plenty of time.
It is very much possible that you can write HTML faster with the help of numeric techniques, and these techniques not even save your time but also makes you master in the language writing. Moreover, by following some rules you will generate some habits which will help in future as well.
I have found some valuable tips for you to help you become a good and faster HTML writer.
Make A Plan Of Your Website Structure
I have seen that anything you try to achieve in your life depends on how you plan that. The same rule implies writing HTML.
It is very crucial that you know what you want to achieve with your code. I mean to say that you should know the structure about any web application that you want to make.
By structure means that you should know where my header will come from, where I will start my body of the website and where I will make different columns.
For Example, you can make a wireframe of a website structure on a paper and try to accomplish it with HTML.
Make Your Own Group Of HTML Elements
When you are trying to learn HTML elements, you learn about various HTML elements. You also understand how they function separately. However, You do not know that you can combine them.
You can save plenty of time if you will make your group of HTML elements which all together create a small section of a website or a web application and reuse that component of HTML while making any other website or a project.
All you have to do is save these group of elements somewhere on your computer, and when you need these, copy and paste them to the other projects.
For example I have made a navbar which I can reuse it anywhere.
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</nav> Get Familiar With Your Code Editor
It is common practice that you need to use a code editor to write code. There are numerous code editors in the market, and most of them are free to use, but do you know how to use these code editors.
You can choose any code editor, but you should know the functionality of that editor. If you know the tricks such as how to use shortcuts, debug the code, how to save the file or nesting the files, and which plugin will help you write faster in the code editor. By doing this, your task of writing HTML more quickly will be accomplished.
I am using a visual studio code editor, and I am providing you with a YouTube link to a crash course on learning Visual Studio Code from freecodecamp.
Learn From Frameworks
Various frameworks provide you with the basic HTML structure of many components essential to making a website. The frameworks such as bootstrap and foundation are CSS frameworks, but you can visit their websites, and see how they have created the HTML components.
You will learn how they premade the HTML components and apply CSS to these components.
Instead of copying and pasting these components from a framework, I recommend you practice these yourself and find out what mistakes you are making.
Try To Debug The Code While Writing
When you are writing code, and as a beginner, you don’t know that you are making mistakes in the code, and it is too late by the time you come to know it.
If you find a mistake or a bug in the code very early, you can save a lot of time. For that, you can even use the browser’s developer tools.
To open a web developer tool, you can click on the three dots on the right side corner of the browser, then from the pop-up window, select more tools and select the developer’s tool. You can also use a keyboard shortcut ALT+SHIFT+I.
You can see in the screenshot image below the html elements rendered by the browser. Here you can find out your mistakes and correct them quickly.
Use Emmet Plugin In The Code Editor
All the code editors come with plenty of plugins, making your writing job more manageable. Emmet plugin is one of them.
Emmet plugin is very popular and powerful plugin. It provides you shortcuts to write the HTML faster by typing a few characters. You have to select it from the code editors plugin library to enable this plugin.
Some of the shortcuts are so easy to use. For example, to make a boilerplate of the beginning of the website page, you have to write the exclamation sign (!) and then press the tab button from the keyboard.
You will see the following result of HTML code in the editor:-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
All you have to do is remember these shortcuts and to learn more about Emmet shortcuts I will recommend you one short course write HTML faster with Emmet
Practice What You Have Learned
It is the most crucial concept that you should remember what you are learning and this is only possible if you are practising every day.
The only way to memorise the tags of HTML is to write the HTML every day, and once you will familiar with the major tags of HTML, it will be easy to write the HTML, and you will write it fast without making any mistakes.
There are few online editors where you can write the HTML without downloading them, and you can do the experiments with your code.
I am using codepen a lot, and I recommend you use it for practice.
