The Best Google Chrome Extensions for Web Development & Design
- Get link
- X
- Other Apps
These extensions will help you to understand how web development works. I stumbled on many resources online because of my interest in HTML, CSS, and Javascript. Some of them were in the form of Chrome extensions. The beauty of these Chrome extensions is that anyone can use them. The tools are not just for professionals. They can help you achieve the desired look and feel for your website, blog, page, or project.
Why and When Should You Use The Chrome Extensions?
Consider this scenario: you are browsing, and you suddenly see a website you love. Everything looks well put together, and the colors and fonts complement each other. You want to recreate this for your page. But how do you get the colors?"How do you find out which font type the web pages are using?"
This kind of situation is where Chrome extensions can come to your rescue. In a matter of seconds, you can now figure out the styling done by the website developers. Installing a Chrome extension is easy. You can scroll down to the section named "How to Install a Chrome Extension" to learn the process.
Extension 1: ColorZilla
ColorZilla helps you to find out the colors a webpage is using.
When you download and enable this Chrome extension, you can pick a color from any webpage using the inbuilt page color picker. You can point and click on a color displayed on the page. It shows the hexadecimal color value as well as the RGB value.
Extension 2: WhatFont
WhatFont, as the name implies, can be used to identify the fonts on a webpage. When the extension is enabled, you can point your cursor on any text on the page to view its font. The font name gets automatically displayed like a tooltip.
Additionally, WhatFont reveals the following details for the font:
- font family
- style
- weight
- size
- line-height
- color
Extension 3: WindowResizer
Extension 4: CSS Viewer
- size
- width
- height
- padding
- font size
- font family
- text-decoration
- position
- transform/transition
- outline effects
- You can press the "C" key to copy-paste the CSS code.
Extension 5: GoFullPage
Extension 6: Grammarly
- Get link
- X
- Other Apps
Comments
Post a Comment