UIDecoders
Krupesh M. Anadkat
JOIN 1000+ UIDECODERS AND NEVER MISS AN UPDATE TO THIS LIST 🎁
Browse Categories
I have tried to includes as many as possible Great Frontend Development Tools & Learning Resources for HTML, CSS, JS, Colors, Gradients, SEO, Icons, Images, Videos and much more to help you Build Websites.
Learning Paths
Every Section begins with Learning Resources like interactive platform or online free ebooks. These are NO Ordinary Resources! They are very popular in developer commmunity since years.
Development Tools
Most of these tools are opensource and free for use in personal & commercial projects. Just assure that you include respective Licenses and attribution wherever necessary in production environment.
Basic HTML5 - FreeCodeCamp.org
Head start and Interactive way to learn + Projects & Certificates. Definitely No. 1 Choice for Learning!
MDN HTML5 Reference
List of all HTML5 elements you will ever need for quick reference by Mozilla Developer Network.
HTML Cheat Sheet WebsiteSetup
A very handy and printable HTML elements cheat sheet to keep you reminded.
HTML 5 Professional Notes
For book readers. This is a great free ebook by Goalkicker and Stackoverflow community.
HTML Entities by key-shortcut
Check List of HTML Entities or Symbols like Copyright, Arrows, Arithmetic, etc.
W3 Markup Validation
A quick syntactical error finder. Must validate your site before deploying it to production.
HTML 5 Boiler Plate
The web’s most popular front-end template. I always use this as My Project Starter Kit.
W3schools Web Tutorials
W3Schools is complete Development Learning Package. It has amazing CSS Tutorial.
Getting To Know CSS - Shayhowe
It is like an Article of Introduction to CSS. Must Read Once you have started Learning.
cssreference.io - MUST Check
This is one of my favourites learning resources. Contains Properties, Box model, Animations, CSS Grid, Flexbox and much more.
CSS Reference - Codrops
Name any property, they have exaplined it pretty clearly here. Easy to navigate and read.
30 CSS Selectors - Jeffrey Way Tutsplus
This handy list of CSS Selectors would Save many Class/Id declarations. A very important resource.
Responsive Design - Shayhowe
Learn Media Queries and how to make your website responsive to variety of devices.
CSS GRID with WES BOS
Mozilla Develoment Network Sponsored Free Tutorial. The only tutorial required to learn CSS Grid.
CSS Flexbox - CSS Tricks
A Complete Guide to Flexbox. Watchout for other tutorial/articles, Second HOME for CSS.
Can I Use - Support Tables
Check for Properties if Available in Different Browsers of Various Platforms.
Animate.css - Daniel Eden
A very popular Animation css library, simple to implement. I use it in almost every project.
Hover.css - Ian Lunn
Collection of On-Hover animations. Not free for commercial projects. But Great for Reference.
Clippy - CSS clip-path maker
Clip Images/backgrounds in variety of shapes to give modern touch. Clip Path Code Generator
Eloquent JavaScript - Ebook/website
The only thing you will ever need, if you can learn by reading and practicing. No. 1 JS Resource.
The Modern Javascript Tutorial
Free web reading/learning site. From basics to advanced topics, simple & detailed explanations.
Javascript - Free Code Camp
Developer Community LOVES FreeCodeCamp.org Must Checkout the whole site. Real Treasure!
Javascript Foundations - Gymnasium
Free course, taught by industry expert. I learnt Js from here. Packed with Great Projects.
Learn Javascript - MDN
They have good content, divided into modules. I often come here for references & readings.
Javascript 30 - WES BOS
Another GREAT Free tutorial by Wes Bos, Packed with 30 projects. (Not for absolute beginners)
Slick - The Last Carousel
Starting with Plugins, Flexible & easy to use JavaScript plugin for Carousels.
Accordion - Semantic UI
Plugin for Exapnadable/Collapsable Section module. It has got many other modules too.
Lightbox by UIKit
With Little tinkering with its JS file, you can get this amazing LightBox Gallery plugin.
World of Plugins - Unheap
There are endless plugins, best ones are sorted for you @ Unheap. One of Personal Favourites
Flat UI Colors
My FIRST PLACE for color hunt. You can't get wrong colors from here. They've got all sorts of variety.
Adobe Color Palettes
Color Palettes made by Professionals. Imagine any Color Combinations, you would find it here.
Color Hunt Color Palettes
Collection of color Palettes. Similar to Adobe Color Palettes. Don't miss sorting options at top.
Colordot - Color Picker for Humans
Most fun way of picking GREAT colors, move your mouse and click. Try closing ur eyes & do that :P
Paletton - Color Picker
Another Color picker to try out. Helps quickly getting different shades of same color.
CSS Gradients Generator & Maker
Regular Visitor. Genrate Gradients and Grab css code! Watch out for Swatches they have.
Trianglify
Accidently bumped into it & i have become FAN! Generate Poly Pattern backgrounds like Google!
MegaTags - Meta Tags Generator
Plug in your site's information and generate social media meta tags. Used in every project of mine.
Search Engine Result Page - ZEO
Check how your website looks in Google Search Results based on Meta Information.
Website Preview Builder - Unfurls
Preview your live, production website for Google, Facebook & Twitter. Also helps with Meta tags.
Favicon Generator - Favicon.io
The only Favicon Genrator you will ever need! Generate from Text, Image & Emoji.
Feather Icons - Open Source
Beautiful Line Icons with downloadable svgs. I use icons from here in most of my projects (this site).
Material Icons by Google
All sorts of Professional icons found in Android, Public Places(restrooms - lol) and Google Websites.
Icons by Open Iconic
Light weight and Open Source Repository of 223 webfont, SVG and raster format icons.
Font awesomec
Font Awesome is the web's most popular icon set and toolkit. They've got free & paid icons.
DevIcons by Konpa
Icons of Every Programming Languages you will ever need. SVG, PNGs and Font version.
Make a README
I wrote my first readme online here, it has become my favorite place to start with markdown.
Readme.md Template
Every Developer needs to write Readme markdown atleast once in development profession.
Shield.io - Metadata Badges
Wondered seeing those Colorful badges on git readme, want one? Scroll to "Your Badge"
Unsplash Photos for Everyone
One of the most widely used free stock photos website. Free for commercial use.
Pixabay Stunning Free Images
Personal Favourite resource. They have Got Videos and Illustrations too.
Pixabay Free Stock Photos
Pexels provides high quality and completely free stock photos. Watch out for collections.
Coverr.co Free Videos
Got great collection of videos you want to keep as background of header in homepage.
Random User Generator
A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.
Emoji Copy
By now you might have seen many emojis on this website, It is just copy and paste from above link.
OpenSource
BootstrapBuild responsive, mobile-first projects on the web with the world’s most popular front end component library.
OpenSource(MIT)
UIKitA lightweight and modular front-end framework for developing fast and powerful web interfaces.
OpenSource
Bulma.ioBulma is Free, CSS framework based on Flexbox. 100% Responsive, Modular and Modern.
OpenSource
Semantic UIDevelopment framework that helps create beautiful, responsive layouts using human-friendly HTML.
