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.