If you are new to HTML and CSS, you need tools that can help you speed your front-end development process. This is more evident if you are trying to clone an existing website or matching a few of its features. This article is the result of my recent experience as a student at Microverse. I will present a few tools I used to: (1) pick up or match the exact colors of websites I cloned (2) pick up or match the exact fonts of websites I cloned (3) resize the browser’s windows to match the different resolutions, and (4) view and edit the HTML & CSS of web content. Anyway, the tools I will present and discuss in this article are indicative only. There are plenty of similar tools on the internet that you can pick up and use. This article can serve as a starting point. 1 – Pick Up the exact color During my HTML & CSS training at Microverse, I cloned 8 websites. I did most of them in pairs with other students, but I had to do some of them alone as a solo project. I tried to guess the right colors of the original project I was cloning, with little success. I needed the help of an adequate tool. I then discovered ColorZilla. It is a free tool that helped me speed this process with total accuracy. ColorZilla helped me to pick the exact color I wanted to match. ColorZilla is a Mozilla extension. It assists web developers and graphic designers with color related and other tasks. This tool allows getting a color reading from any point in the browser. Then, it adjusts this color and pastes it into another program, such as Visual Basic Code. It also allows zooming web pages and measuring distances between any two points on the page. ColorZilla also includes a CSS gradient builder that you can use at your will. For more information about CollorZilla, please follow the following link: https://www.colorzilla.com/ 2 – Pick Up the Right Fonts Guessing the exact font of a web page is another hard and ineffective task. But Font Picker is also a free tool that can ease this task with much accuracy. Font Picker is a clean and simple tool for identifying fonts and their details on any website. After installation, you will have the ability to right-click on any text and view its font details. Clicking the "Font Details" option will open up a pop up with all the information you need about that font. This method is much faster and nicer than having to go and inspect the source code. For further information about Font Picker, please refer to the following web page: https://chrome.google.com/webstore/detail/font-picker/mmjbimgpcbaegjiieojddickpjbdkeej 3 – Resize the browser’s window It’s a good practice to build and test your website in different screen sizes or resolutions. There are several ways to do it. You can resize your browser to match each screen size yourself. You can test your website by accessing it on different devices. Or you can use a window’s resizing tool such as the Windows Resizer. This extension re-sizes the browser's window to emulate various resolutions. It is particularly useful for web designers and developers. It helps them test their layouts on different browser resolutions. You can set the window's width and height, position, or preset icon (phone, tablet, laptop, desktop). For further information about Window Resizer, please refer to the following web page: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-PT 4- Inspect an element Inspect Element is a browser tool that lets you view and edit the HTML & CSS of web content. But any edits you make will only appear on your personal screen and last until you exit out. That is, you're not making any permanent changes to a website. You're able to adjust it for the time being. The internet is full of articles and discussions about this tool. If you want to know more information, please visit the following pages: https://blog.hubspot.com/marketing/inspect-element-screenshots-ht https://blog.hubspot.com/marketing/inspect-element-screenshots-ht https://www.hostinger.com/tutorials/website/how-to-inspect-and-change-style-using-google-chrome https://www.wikihow.com/Inspect-Element-on-Chrome Conclusion: The above-discussed tools are useful whether you are: - building a website from scratch - applying best practices - cloning a website or testing your project in different resolutions - picking the right colors or fonts, viewing and editing CSS or HTML content or - resizing browser’s windows to match different resolutions. Doing these tasks can be time-consuming and ineffective. You can speed the process and be more effective if you use some or all the tools described above. They are simple and free tools, but very effective. From my personal experience, they were very helpful. Anyway, the tools I presented and discussed in this article are indicative only. There are plenty of similar tools on the internet that you can pick up and use. This article can serve as a starting point.
