List of resources for ARIA Development

Introduction to Web Accessibility

What is concept of Accessibility into Web. In simple words, we are allowing the web to be accessible by all, then may be it a person with a difficulty in reading or seeing. We used the modern browsers to read the content or speak-out actions of the page to the user. You can read more about it in detail here:

Tools for focusing on W3C ARIA Accessibility:

Contrast Ratio

Calculate the contrast ratio for color of text and background color used on your website. For a optimum contrast ratio value, your styling should score atleast 3:1. You can read more about Contrast Ratio here (


A global utility for tracking the current input method (mouse/pointer, keyboard or touch).

Training and Certification

Web Accessibility Checklist

Using ALT text on images properly

Color Blind Web Page Filter

Color Blind Simulator for Mac

Completely Free HTML/CSS Course for Beginners

Learning a completely new thing may be hard, but not impossible. If you have the right resources and will to learn, you will come-out being a Ninja . I don’t even remember, how I learned HTML/CSS, but now this helps me in earning my daily bread-butter.

If you are looking for a completely free course for learning HTML/CSS, there is this new website called InternetingIsHard. The website has been crafted very beautifully along with clear images and clean code examples. It almost covers all the sections of HTML/CSS and more is yet to come.

Go ahead and enjoy your learning.

Website Link:

A collection of 180 CSS Linear Gradients

A very useful website for web-developers. offers a wide range of ready-to-use 180 CSS gradients, which can used in developing websites.

The website looks pretty clean with Gradients appearing in a grid-layout. Look for your desired gradient, click on “Copy CSS”, it adds the CSS code to your Clipboard and then just paste it inside your website code.

Although the code provided by Web-Gradients does not provides the vendor prefixes for the code copied, but by using a website like Auto-Prefixer, you can get those missing vendor prefixes.

The website doesn’t end only there, you also get to use these gradients as a Photoshop/Sketch pack. You need to download it via GumRoad website You can make a good donation on GumRoad to show your support also.

They really have a very beautiful collection of gradients. And 180 is really a very good count. You can download it’s CSS file from GitHub and use it in your projects.

I’ve been looking for this from very long time and now will be using it on all my projects as well.

Web Gradients Link:

P.s.: When I tried downloading the PSD pack, it didn’t work for me, the download button wasn’t working. 🙁

Must have Atom Text Editor packages for Web Developers

Atom Text Editor – a completely hack-able editor is a free and open source code editor available for Windows, Mac and Linux. It can be completely modified using Node.js based plugins and community created themes.

If you’re familiar with Sublime-text editor, you’d love Atom Editor. You can modify the Atom Editor to completely resemble sublime text as well.

Below is the list of plugins, I’ve been using for my front-end development purpose.

Atom Auto Indent

This package allows you to auto-indent the code inside your current file. Use the auto-indent:apply command or you also do it from File Menu, go to Packages > Auto Indent > Apply

Bootstrap 3 Support for Atom

This package helps to write Bootstrap 3 code snippets faster using auto-completion. More to that, it also supports Glyphicons and Fontawesome.

Bootstrap 4 Support for Atom

This package is similar to Bootstrap 3 package, it also helps to write Bootstrap 4 code snippets faster using auto-completion. Just write the Bootstrap component tag and hit Tab key and the whole code snippet is appended instantly.

Atom HTML Preview

This package enables live preview for Atom Editor. Makes your coding behave real-time. Write inside the editor and see the live changes on the browser.

Auto Close HTML 

This package automatically adds closing tags when you complete the opening tag in your editor.

CSS Snippets

Provides Shorthand snippets for CSS, SCSS, Sass, and Less.

CanIuse Package

Allows you to quickly access the support tables in the editor itself.

W3C Validation

Allows you to Validate your HTML and CSS files using W3C validators in the editor itself.

SVG Preview

Helps to view the live rendered SVG to the right of the current editor.

Atom CSS Comb

CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS). You can easily write your own configuration to make your style sheets beautiful and consistent or use pre-defined configs like Yandex, Zen or CssComb.

Atom CSS Unit Converter

Performs conversions between different CSS length units. Can help you in converting font-sizes or other lengths units.


The famous tool-kit for developers to improve HTML & CSS workflow, which helps you in speeding up your code writing.

Open Terminal Here

Open the Terminal (OSX, Linux) or Command Prompt (Windows) in the given directory via context menu or keyboard shortcut.


Linter is a base linter provider for the Hackable Atom Editor.

Linter Bootlint

Lint your Bootstrap HTML on the fly. This package shows all your coding/structural errors created while working with Bootstrap framework.

Linter CSS Lint

Lint CSS on the fly. This package alerts you whenever you declare a wrong CSS property or make any typo inside your CSS file.

Linter SCSS Lint

This Linter plugin for Linter provides an interface to SCSS-lint. It will be used with files that have the “SCSS” syntax and it works the same way as above mentioned CSS lint.

Minimap Find And Replace

Mini-map bindings for the find and replace feature similar to Sublime-text editor.


Sublime Text-like n-column layout shortcuts. Use shortcuts or choose number of layouts from File Menu itself and divide your editor into n partitions.

Save Workspace

Work with few projects same time this plugin give you the opportunity to change your work-space faster. Save your work-space, all your opened tabs, cursor position, etc. for each task you are working with.

Atom Reveal File In Finder

Reveal file in Finder!(like sublime text). This plugin adds a option to reveal current file in the right click context menu.

Atomic Chrome

This is one of the very powerful features. Download this package and it’s Chrome extension. Once done, you can write inside any website’s textarea using Atom Editor. You can code or even write plain text directly from your editor.

Atom Monokai

If you are a Sublime Text fan, then this theme is for you, this theme package turns the view of editor almost similar to that of Sublime Text. Monokai syntax theme offers few options to choose from, like Atom Dark/light, One Dark/light, Seti UI and other.

File Icons

Assign file extension icons and colors for improved visual grepping in the Editor.



A very useful plugin if you work a lot with CSS. This package automatically adds vendor-prefix in your CSS and SCSS using Autoprefixer.