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 because of its and Integration. VS Code Git GitHub 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 because of its developer tools. Google Chrome The are very useful for inspecting each HTML and CSS element and also for checking the responsiveness of a webpage. Chrome developer tools Although you can check your screen resolution using the developer tools in Chrome. I also use to compare screen resolutions. It is also very useful to test if there are horizontal scroll bars on your page. resizemybrowser.com 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 . 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 screen capture tool 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
