Useful Tools To Make Working on HTML and CSS Easier

Programmers and Developers are lazy people, they always want to make their jobs easy. They do not want manual and repetitive tasks. They want to automate tasks.

image taken from https://www.azquotes.com/quote/483576

They will always find a shortcut to things.

image taken from https://www.azquotes.com/quote/570105

As a Web Developer working on HTML and CSS, most of our work will be done using a text editor. My text editor of choice is VS Code because of its Git and GitHub Integration. 

To make our life easier. I am recommending the following VS Code Extensions.

1) Prettier - Code formatter

After a few hundred lines of code, your code will look like spaghetti. You don't need to worry about your indentation anymore. Just press CMD/CTRL + Shift + P to automatically format your HTML.

2) Auto Close Tag

Automatically type in the closing tag.

3) Style Lint Plus

Automatically look for CSS errors.

4) Color Highlight

Display the colors in your text editor.

5) Live Server

Live Preview of your HTML.

6) Emmet

This one is built-in in VS Code, no need to install. It lets you type in multiple HTML elements quickly.

My Browser of choice as a Web Developer is Google Chrome because of its developer tools. 

The Chrome developer tools are very useful for inspecting each HTML and CSS element and also for checking the responsiveness of a webpage.

Although you can check your screen resolution using the developer tools in Chrome. I also use resizemybrowser.com to compare screen resolutions. It is also very useful to test if there are horizontal scroll bars on your page.

Going back to the browser, to make our life easier. I am recommending the following Browser Extensions.

1) Pesticide

It outlines each element to better see the placement on the page.

2) Colorzilla 

Copy colors on any point in your browser, then paste the color code in your text editor.

3) Whatfont

Identify fonts on any webpage.

And last but not the least of useful tools while working with on HTML and CSS is the screen capture tool. On a Mac there is a built-in screenshot tool, the command to use it is CMD + SHIFT + 4 then select the portion of the screen that you wish to copy. On Windows you should use the built-in

Snipping Tool in Windows

The screen capture tool is very useful for grabbing an image and saving it as an image file.

I hope these tools will help you while working on HTML and CSS, it did make my life easier.

Follow me on Github LinkedIn Twitter