Deepstash

STASHED IN:

4

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.

STASHED IN:

2 Comments

MORE IDEAS FROM The Best Google Chrome Extensions for Web Development & Design

Chrome Extensions Hacks

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing

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.

STASHED IN:

4

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.

1

STASHED IN:

4

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.

STASHED IN:

4

Extension 5: GoFullPage

GoFullpage is an image tool that can help you in taking full-page screenshots of any webpage.

Many imaging tools are buggy when it comes to taking clear full-page screenshots. With GoFullPage, you can capture the entire page quickly and easily.

The free version allows you to download screenshots in PNG and PDF formats. With the paid version, you can crop, edit, annotate and export the pictures.

STASHED IN:

4

Extension 6: Grammarly

Webpages are incomplete without good content. The design might be top-notch, but if not backed with good content, all your effort can go in vain. Grammarly is an excellent tool to use for content development.

It keeps an eye out for all grammatical errors and prompts you to change them. You can install the app on Microsoft Word as well. The free version catches all the basic grammar mistakes. The paid version offers more – like suggestions to improve the clarity of a sentence.

STASHED IN:

4

STASHED IN:

4

STASHED IN:

4

Extension 4: CSS Viewer

CSS Viewer is for all design enthusiasts! It is a nifty little extension that you can use to deep dive into the CSS styling of a webpage.

Once enabled, you can point at any UI element on the screen to get its property values. You can see the following details for any UI element:

  • 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.

STASHED IN:

4

  • 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.

STASHED IN:

4

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

STASHED IN:

4

Extension 3: WindowResizer

WindowResizer is useful if you need to resize your browser screen to various resolutions to check your website/application compatibility. Once enabled, you can view various resolutions (like the standard iPhone, iPad, laptop, desktop resolutions) on its options list. Choose the one per your requirement.

You can also create a custom screen size or preset and save the new values to your list by going to the "Settings" page.

STASHED IN:

4

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA

Web Design Agencies Nowadays

With billions of internet users worldwide spending several hours online each day, the online presence of brands is now a necessary avenue for building, boosting, and maintaining positive value and attracting and interacting with customers. 

This has created increasing pressure for web design agencies when creating and managing websites. This pressure is multiplied by all the projects that web design agencies have to handle at one time. This is because different clients demand different things for their websites, whether it’s a signature feature or specialized functionality. 

2

STASHED IN:

10

SEO Tools

There’s a lot of overlap between SEO tools, which is why it can be so difficult to figure out which is the best to use. To simplify things.

You already have a ton of tools in your web design toolbox which is why I’m reluctant to write this post the way I would for copywriters and SEO pros. Why? Well, because there are literally dozens of SEO tools you could add to your workflow. Unless you’re promising clients that their websites will go to #1 in search results for every keyword they want to win, there’s no reason to add that kind of complexity to your life.

STASHED IN:

4

Productivity hangups

It is quite understandable that not all productivity apps will work for everyone.

You might add a list of tasks to an app, tell yourself you'll use it, and then forget to open the app again. Instead, you might use a sticky note to keep track of your tasks. This means the app did not work for you. You should not feel guilty about using a different system that works for you.

6

STASHED IN:

110