The Ultimate List of Best Free Tools and Resources for Web Developers



Front-end development is the development of those elements of a website that the customer sees and interacts with directly. It is a combination of programming skills and aesthetics. The challenges associated with front-end developers is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

So I’ve gathered a list of tools and resources for front-end developers which falls into several categories: Colors, CSS Generators, Calculators & Converters, Typography & Fonts, Icons, Analyze Website Style, Editors, Developer Tools, Testing, Performance, Optimization, Feedback, Inspiration, MOOC, Wireframes, Mockups & Prototypes, Design News & Community, Portfolio, Resources

Colors

Color Hex

www.colorhexa.com
ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for your designs (such as complementary, analogous, triadic, tetradic or monochromatic colors schemes).

Simple Flat Colour Selector

www.color.koya.io
Compliment each other like colors.

ColorDrop

www.colordrop.io
Thousands of curated colors, palettes for use in your products.

Palettable

www.palettable.io
Generate beautiful color palettes using the knowledge of millions of designers.

ColorFavs

www.colorfavs.com
It is a great tool where you can easily create a color palette by dragging and dropping your image, inserting a URL or selecting random values.

Color Safe

www.colorsafe.co
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

COLORS

www.clrs.cc
Skinning your prototypes just got easier - colors.css is a collection of skin classes to use while prototyping in the browser.

SwatchMatic

www.appbaan.com/swatchmatic
A color picker for real-world objects. It lets you quickly build palettes on the fly using seed colors provided by Mother Nature herself. Point your mobile’s camera at a color you like and SwatchMatic tells you the color’s name (in multiple languages) and all the values you need to recreate it, plus it gives you five other colors that nicely match it.

uiGradients

www.uigradients.com
A handpicked collection of beautiful color gradients for designers and developers.

Web Color Data

www.webcolourdata.com
This project aims to answer questions like: What is the most common color/s or hue/s on the web? Do certain industries prefer certain colors over others? What colors are generally found together?

Material Design Colors

www.designskilz.com/colors
This small web app helps you visualize the material design colors and also easily copy the colors in different formats.

Material UI Colors

www.material.google.com/style/color.html
Google’s material UI color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

BADA55.io

www.bada55.io
BADA55.io is about finding the most badass leet words for your CSS hex colors.

Contrast Ratio

www.leaverou.github.io/contrast-ratio
Easily calculate color contrast ratios

COLOURlovers

www.colourlovers.com
COLOURlovers is a creative community where people from around the world create and share colors, palettes, and patterns, discuss the latest trends and explore colorful articles.

Colllor

www.colllor.com
Web color palette the right way. Create consistent color schemes. Generate color shades, tones and tints values.

Paletton

www.paletton.com
In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer.

Chrome Daltonize!

www.chrome.google.com/webstore/detail/chrome-daltonize/efeladnkafmoofnbagdbfaieabmejfcf
Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed

CSS Generator

CSS3 Generator

www.css3generator.com
It is both functional and nicely-designed generator. I think this is one of my favorites because the design and UI are so clean.

CSS3-Tricks Button Maker

www.css-tricks.com/examples/ButtonMaker
This one is almost entirely controllable by a drag and drop slider.

CSS3 Button.net

www.css3button.net
The design of this one may be lacking, but it offers a lot more choice than the previous one. It offers the ability to add multiple text shadows, inner-shadows, border, and font colors. It may be hard to figure out at first but you will get it if you just play with it for a few minutes.

Ultimate CSS Gradient Generator

www.colorzilla.com/gradient-editor
A powerful Photoshop-like CSS gradient editor from ColorZilla.

CSS3 Button Generator

www.css3buttongenerator.com
This one gives you one big button to manipulate shadow, border, color, and on top of that, it gives you the ability to edit the hover-over.

Border-Radius

www.border-radius.com
This is a minimal little tool, that is very practical and simple. All you do is simply set how much of a rounded edge you want on each corner. And then you just check off what sort of browser prefix you want to be included, and that’s it.

Colorful CSS Gradient Background Generator

www.webcore-it.com/colorful-background
Colorful CSS Gradient Background Generator

EnjoyCSS

www.enjoycss.com
EnjoyCSS is an advanced CSS3 generator that saves your time. Its handy and simple UI allows you to adjust rich graphical styles quickly and without coding.

CSS MenuMaker

www.cssmenumaker.com
Make Awesome Menus. Build & download HTML, CSS, & jQuery menus for desktop & mobile websites. Start Building. 65+ Menu Themes to Choose From. Drop Down; Responsive/Mobile; Accordion; Flyout; Bar.

On/Off Flip switch

www.proto.io/freebies/onoff
Generate pure CSS3 On/Off flip switches with animated transitions

CSSmatic

www.cssmatic.com
The ultimate CSS tools for web designers. Gradient Generator. Use multiple colors and opacity stops to get amazing gradients. These gradients can be used as background images of banners, wallpapers, buttons or tables and in many other applications. Border Radius. Super easy to use and a super time saver.

Ui Parade Live Tool

www.livetools.uiparade.com
Live Tools are a collection of free online design apps that allow you to easily create your own ui elements with very little coding knowledge. As well as being able to create custom elements, you can also download your creations for use in your websites and online applications.

CSS Arrow Please

www.cssarrowplease.com
CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.

CSS3 Patterns Gallery

www.lea.verou.me/css3patterns
The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets.

Layout Generator

www.cssportal.com/layout-generator
This generator will create either a fixed width or fluid width layout and can include a header, menu, and footer.

Tridiv

www.tridiv.com
Tridiv is a web-based editor for creating 3D shapes in CSS.

Calculators & Converters

DPI Love

www.dpi.lv
Will give DPI/PPI of any screen. In general, PPI is a bit more correct but DPI is more commonplace.

CSS Inliner

www.templates.mailchimp.com/resources/inline-css
Automatically inline your email’s CSS. Just paste your email's HTML, you'll get a more email-friendly version that's ready to send.

Code Beautify

www.codebeautify.org
Online Tools like Beautifiers, Editors, Viewers, Minifier, Validators, Converters for Developers: XML, JSON, CSS, JavaScript, Java, C#, MXML, SQL, CSV, Excel.

PXtoEM

www.pxtoem.com
One-click PX/EM/%/PT conversion tables, a custom conversion calculator, and generated reset CSS.

Density Buckets

www.density.brdrck.me
Screen density converter for Android and iOS

Density Converter

www.teehanlax.com/tools/density
a pixel density on-line calculator that tells you how to scale graphics between 4 density groups. It is useful when creating applications across different platforms & devices.

Is This Retina?

www.isthisretina.com
Calculate aspect ratio, DPI/PPI, and minimum Retina viewing distance. These simple tool is used by freelance designers and some of the best web design firms in the world alike and can provide a fantastic starting point for improving the overall online face of your company.

NTH-Test

www.nth-test.com
NTH-TEST is a quick and easy way to test your nth-child and nth-of-type

Typography & Fonts

Google Fonts

www.google.com/fonts
open source web fonts. Making the web more beautiful, fast, and open with great typography.

Fontspiration

www.sfcd.com/work/fontspiration
Fontspiration is a cool new app for iOS that makes it a little easier to appreciate them on the go. A building tool for creating fun, animated typographic masterpieces.

Gridlover

www.gridlover.net
Gridlover. Establish a typographic system with modular scale & vertical rhythm. It's always free.

Type Genius

www.typegenius.com or www.canva.com/font-combinations
Canva has taken the pain out of font pairing by putting together great font combos for your designs. Find the best matches to your favorite typeface.

Type Nugget

www.typenugget.com
Type Nugget is an online typesetting tool that gives you fine control over a robust base for hella fine web type — all via a pleasant user interface.

TypeWonder

www.typewonder.com
Helps you to test web fonts on any website on the fly. Enter the site URL and preview instantly the fonts without any hassle!

Fit Text

www.fittextjs.com
FitText. A jQuery plugin for inflating web type Download on Github. FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

PosterMaker

www.postermaker.com
PosterMaker.com is a free online Poster and Flyer Maker. Design and create your own posters, flyers, memes and typography design with ease.

Just My Type

www.justmytype.co
A collection of font pairings from Typekit and H&FJ

Typecast

www.typecast.com
Typecast is a free design tool for prototyping web type, web pages & RWD. Create visual & semantic designs. Check for readability & rendering. Hand over CSS & HTML.

Font Squirrel

www.fontsquirrel.com
Font Squirrel scours the internet for high quality, legitimately free fonts. Download thousands of completely legal, high quality, free fonts.

Dafont

www.dafont.com
Archive of freely downloadable fonts

Font Space

www.fontspace.com
FAST and FREE downloads of over 35000 fonts for personal or professional uses. Fonts for Pinterest projects, DIY wedding invitations, scrapbooking and web design.

What Font Is

www.whatfontis.com
Identify the font you are looking for! Font identify! - Find a font from a picture, Font identifies, find a font, identify fonts, identify a font by the image.

FontStruct

www.fontstruct.com
FontStruct is a free font-building tool sponsored by the world’s leading retailer of digital type, FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Flipping Typical

www.flippingtypical.com
A typography/design tool. Type in some words and they instantly display in the typefaces you have installed. Compare your fonts to make sure you choose the right one.

tinytype

www.jordanm.co.uk/tinytype
A compatibility table showing the available default system fonts across different mobile platforms.

Typetester

www.typetester.org
Typetester is an online tool for designing with web fonts. Test, compare, select and design with over 2800 web fonts from Adobe Edge, Adobe Typekit, and Google Fonts. Export your designs as fully responsive HTML and CSS snippets.

Tiff

www.tiff.herokuapp.com
Tiff, A type diff tool that visually contrasts the differences between two fonts. Currently supports fonts from the Google Web Fonts library and any system fonts.

Icons

Material Design Icons

www.github.com/google/material-design-icons
Material design icons are the official icon set by Google. 750 glyphs Material Design system icons pack by Google Design. The icons are designed under the material design guidelines.

Iconogen

www.iconogen.com
Iconogen Is A Free To Use Favicon, Windows 8 Tiles, Apple Touch Icon Generator and iOS Icon Generator.

Marka

www.fian.my.id/marka
Beautiful transformable icons built for the web. Marka currently has 36 icons ready to use and you can customize marka. CSS to pick icons based on your needs.

Font Awesome

www.fontawesome.io
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. One Font, 675 Icons. In a single collection, Font Awesome is a pictographic language of web-related actions. No JavaScript Required.

Maki

www.mapbox.com/maki
Maki is open source and CC0 licensed. Maki is an icon set made for map designers. Maki includes icons for common points of interest like parks, museums, and places of worship.

Batch

www.adamwhitcroft.com/batch
343+ icons for web and user interface designers by @adamwhitcroft.

Fontello

www.fontello.com
An easy way to create a custom icon font for your site. Select images from our large collection, and make a web font pack with one click

Fontastic

www.fontastic.me
Ready to go in seconds. Save time by easily generating custom icon fonts. Don't open photoshop each time you want to update an icon color. Easily create custom icon fonts with Fantastic! Your icons can be modified on the fly via CSS. Rescale, change color, add a shadow and more in just a jiffy

Iconmonstr

www.iconmonstr.com
iconmonstr - free, monstrously big and continuously growing source of simple icons. Discover 4115+ free icons in 296 collections of glyph icons from a German artist.

Octicons

www.octicons.github.com
A scalable icon font handcrafted with <3 by GitHub. Github Octicons has switched from providing an icon font to being a library for generating SVG markup for string templating engines

GlyphSearch

www.glyphsearch.com
Search for icons from Font Awesome, Foundation, Glyphicons, IcoMoon, Ionicons, Material Design, and Octicons.

Entypo

www.entypo.com
Entypo is a suite of 411 carefully crafted premium pictograms by Daniel Bruce.

Typicons

www.typicons.com
Typicons. 336 pixel perfect, all-purpose vector icons. Typicons are free-to-use vector icons embedded in a web font for easy use in your user interfaces, whether it be on the web or in a native application. The set of icons are available on Github, with everything included from the source files in the SVG format to the minified CSS.

Analyze Website Style

Stylify Me

www.stylifyme.com
Stylify Me was created to help designers quickly gain an overview of the style guide of a site, including colors, fonts, sizing and spacing.

StyleStats

www.stylestats.org
Simple tool to collect CSS statistics of a website

Colours

www.webcolourdata.com
Find out the most common color or hue any website

Type-o-matic

www.type-o-matic.net
A browser extension that finds all the fonts on a page

SnappySnippet

www.chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil?hl=en
Easily extract CSS and HTML from the selected element

Editors

CodePen

www.codepen.io
CodePen is a social development environment for front-end designers and developers.. It's the best place to build and deploy a website, show off your work, build test cases, and find inspiration.

JS Bin

www.jsbin.com
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more

CSSDeck

www.cssdeck.com
Collection of Awesome CSS and JS Creations to help out frontend developers and designers.

Dabblet

www.dabblet.com
An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing.

Liveweave

www.liveweave.com
Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers

Adobe Edge Reflow

www.creative.adobe.com/products/reflow
Start responsive designs faster and create high-fidelity prototypes through media query breakpoints, precise CSS layouts, grouping and more. Edge Reflow now connects directly to Adobe Photoshop CC, so you can go from static design to responsive comp in just one click.

webflow

www.webflow.com
Build responsive websites in your browser, then host with us or export your code to host wherever. Discover the professional website builder made for designers. Drag-and-drop website builder for creating professional responsive websites.

Macaw

www.macaw.co
Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool

Developer Tools

Chrome DevTools

www.developer.chrome.com/devtools
The Chrome Developer Tools are a set of web authoring and debugging tools built into Google Chrome. The Chrome Developer Tools provide web developers deep access into the internals of the browser and their web application.

Grunt

www.gruntjs.com
The JavaScript Task Runner for automating tasks with a minimum of effort.

LiveReload

www.livereload.com
CSS edits and image changes apply live without needing to hit the refresh button. LiveReload monitors changes in the file system. when you change a file the browser is updated instantly without reloading the page.

Bower

www.bower.io
A package manager for the web. Bower just installs the right versions of the packages you need and their dependencies.

Yeoman

www.yeoman.io
The web's scaffolding tool for modern web apps. A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts

Can I Use

www.caniuse.com
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

HTML5 Please

www.html5please.com
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

CSS Values

www.cssvalues.com
A quick-reference online resource for getting all possible values for every valid CSS property.

CSS Triggers

www.csstriggers.com
An invaluable reference on how CSS affects performance

Testing

W3C Markup Validation

www.validator.w3.org
W3C's easy-to-use markup validation service, based on SGML and XML parsers. Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML.

HTML_CodeSniffer

www.squizlabs.github.io/HTML_CodeSniffer
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs".

W3C CSS Validation

www.jigsaw.w3.org/css-validator
CSS Validation service, Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.

CSS Lint

www.csslint.net
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.

JS Lint

www.jslint.com
JSLint, The JavaScript Code Quality Tool. This file allows JSLint to be run from a web browser. It can accept a source program and analyze it without sending it over the network.

Pesticide

www.pesticide.io
A chrome plugin for quickly debugging CSS layout issues by toggling different colored outlines on every element.

PhantomCSS

www.github.com/Huddle/PhantomCSS
Visual/CSS regression testing with PhantomJS. PhantomCSS takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for RGB pixel differences. PhantomCSS then generates image diffs to help you find the cause.

QUnit

www.qunitjs.com
QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by jQuery, jQuery UI, jQuery Mobile and many other projects and is capable of testing any generic JavaScript code, including itself!

Browsershots

www.browsershots.org
Check Browser Compatibility, Cross Platform Browser Test - Browsershots

Responsinator

www.responsinator.com
The Responsinator is designed to test responsive websites on different device resolutions.

Opera Mobile Classic Emulator

www.opera.com/developer/mobile-emulator
Mobile debugging on your desktop. Developer luxury. Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop.

Performance

Pingdom Website Speed Test

www.tools.pingdom.com
Use this free Website Speed Test to analyze the load speed of your websites, and learn how to make them faster. Test & analyze the load time of a live page

WebPagetest

www.webpagetest.org
Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.

PageSpeed Insights

www.developers.google.com/speed/pagespeed/insights
Analyze and optimize your website with PageSpeed tools. Analyze with PageSpeed Insights. Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through PageSpeed Insights.

GTmetrix

www.gtmetrix.com
GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

YSlow

www.yslow.org
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high-performance web pages.

Perfmap

www.chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk?hl=en
A performance Heatmap of resources loaded in the browser using the Resource Timing API

Optimization

CSSCSS

www.zmoazeni.github.io/csscss
csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations.

Helium

www.github.com/geuis/helium-css
Helium is a javascript tool for discovering unused CSS across many pages on a website.

CSS Tidy

www.csstidy.sourceforge.net
CSSTidy is an opensource CSS parser and optimizer. no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

CSS Compressor

www.cssdrive.com/index.php/main/csscompressor
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

CSS Dig

www.cssdig.com
Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with.

JavaScript Minifier

www.javascript-minifier.com
Online JavaScript Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

FF Subsetter

www.subsetter.com
Reduce the font file size to optimize bandwidth usage

Compressor.io

www.compressor.io
Reduce the size of your images while maintaining a high quality. A selection of commonly used characters has been marked in the glyph table.

Prefix free

www.leaverou.github.io/prefixfree
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Sprite Cow

www.spritecow.com
Sprite Cow helps you get the background-position, width, and height of sprites within a spritesheet as a nice bit of copyable CSS.

TinyPNG

www.tinypng.com
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency.

Adaptive Images

www.adaptive-images.com
Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images

Feedback

Bounce

www.bounceapp.com
Submit your website URL to Bounce, It will generate your website screen-shot and then give back to you. then you can share this with other people.

Design Drop

www.designdrop.io
Fast and Easy Design Feedback. DesignDrop is the visual communication tool for uploading and sharing designs with your team and clients. No need to download anything or learn complicated products.

Inspiration

CoDrops

www.tympanus.net/codrops
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

amp; Web Design Resources

www.designrfix.com
Daily Inspiration and useful online Resources for Web Design and Graphic Design.

Magazine

www.onextrapixel.com
An online magazine for designers and developers, OXP shares tips, tutorials, tools, resources and other articles on design and development.

MonsterPost:

www.blog.templatemonster.com
TemplateMonster are mostly a templates company, but they also have a great blog going on. It’s not just about their own stuff too — they make sure they provide plenty of great web design stuff.

DesignShack

www.fromupnorth.com
Once again a wealth of resources is shared with the design community.

Vandelay Design

www.vandelaydesign.com
Lots and lots of excellent resources, freebies, articles, deals, WordPress stuff and lots more.

DesignM.ag

www.designm.ag
DesignM.ag is a community for designers, web designers and developers.

Reddit Web_design:

www.reddit.com/r/web_design
Not really a blog, it’s a subreddit. However, the upvoting reddit mechanics ensure that anything which rises to the top is essential reading for web designers. It’s very popular, one of the largest subreddits.

Abduzeedo — Design Inspiration and Tutorials

www.abduzeedo.com
Abduzeedo is another of those, where you’ll find design inspiration roundups which are a must see for the designer who wants to stay on top of trends and know what’s the latest and greatest stuff around.

development tutorials

www.abduzeedo.com
It is a tutorial magazine mostly for web development tutorials. The tutorials are well written and easy to follow.

eWebDesign

www.tutorialzine.com
eWebDesign is another source of the latest and greatest articles from web design experts. Features stories about web design, web development and tutorials. It’s actually a newsletter, so you get stuff directly into your inbox!

WebAppers

www.webappers.com
Lots of open source and free web resources.

Animation CSS Mania — CSS Galleries

www.webneel.com
This one is the most popular CSS showcase site. Again, a very good site to watch out for innovative web designs.

CSS Mania — CSS Galleries

www.cssmania.com
This one is the most popular CSS showcase site. Again, a very good site to watch out for innovative web designs.

MOOC

Intro to the Design of Everyday Things

www.udacity.com/course/design101
Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike

Prototyping Interaction

www.iversity.org/en/courses/prototyping-interaction
Learn the different methods of prototyping by sketching, building and testing

Introduction to Graphic Design

www.openlearning.com/canva/courses/IntroToGraphicDesign
Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.

Intro to HTML and CSS

www.udacity.com/course/ud304
Learn how to convert digital design mockups into static web pages

Web Development

www.udacity.com/course/cs253
Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.

Responsive Web Design Fundamentals

www.udacity.com/course/ud893
Learn the fundamentals of responsive web design with Google’s Pete LePage

Responsive Images

www.udacity.com/course/ud882
Learn how to work with images on the modern web, so that your images look great and load quickly on any device

HTML5 Canvas

www.udacity.com/course/ud292
Learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.

Object-Oriented JavaScript

www.udacity.com/course/ud015
Learn how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries.

JavaScript Design Patterns

www.udacity.com/course/ud549
Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way

JavaScript Testing

www.udacity.com/course/ud549
Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow

Building Mobile Web Experiences

www.udacity.com/course/cs256
Learn how to create great cross-device mobile web experiences.

UX Design for Mobile Developers

www.udacity.com/course/ud849
Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written

UIKit Fundamentals

www.udacity.com/course/ud788
Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components

Intro to jQuery

www.udacity.com/course/ud245
Learn how to read and make sense of jQuery’s documentation.

Intro to AJAX

www.udacity.com/course/ud110
Learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so

Website Performance Optimization

www.udacity.com/course/ud884
Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

Gamification Design

www.iversity.org/en/courses/gamification-design-2015
Learn the basics of Gamification with a highly practical approach

Wireframes, Mockups & Prototypes

Origami

www.origami.design
Free tool for designing modern user interfaces created by Facebook

Cacoo

www.cacoo.com
Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram

Marvel

www.marvelapp.com
Turn your Dropbox or desktop images into web and mobile app prototypes for any device and get feedback

Placeit

www.placeit.net
Create iPhone mockups and iPad mockups

MockFlow

www.mockflow.com
Online services to Plan, Build and Share work for designers

Justinmind

www.justinmind.com
Interactive wireframes for web and mobile

Wireframe.cc

www.wireframe.cc
Free minimal wireframing tool

Design News & Community

/r/web_design

www.reddit.com/r/web_design
Web design subreddit

/r/design

www.reddit.com/r/design
Design subreddit

/r/usability

www.reddit.com/r/usability
User experience, Interface design, or Human Factors subreddit

/r/userexperience

www.reddit.com/r/userexperience
User experience design subreddit

Stack Exchange - Graphic Design

www.graphicdesign.stackexchange.com
Q&A for Graphic Design professionals, students, and enthusiasts

Stack Exchange - User Experience

www.ux.stackexchange.com
Q&A for user experience researchers and experts

Front-end Front

www.frontendfront.com
A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community

Pineapple

www.pineapple.io
Hub of Tutorials, Tools and Assets for developers and designers

Lockerdome

www.lockerdome.com
An interest-based social network

Designer News

www.news.layervault.com
A community of people in design and technology

DesignFloat

www.designfloat.com
Web design news & tips

The Web Blend

www.thewebblend.com
A community for designers, developers and tech junkies

Design News

www.design-newz.com
A site that features news articles, resources and tutorials written by designers and developers

Portfolio

Behance

www.behance.net
The leading online platform to showcase & discover creative work

Dribbble

www.dribbble.com
A place to show and tell, promote, discover, and explore design

Cargo

www.cargocollective.com
Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet

DeviantArt

www.deviantart.com
An online community, showcasing various forms of user-made artwork

Resources

Vector Open Stock

www.vectoropenstock.com
Free vector graphics

Buttons

www.unicorn-ui.com/buttons/builder
A CSS button library built with Sass & Compass

Bootflat

www.bootflat.github.io
Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

Animate.css

www.daneden.github.io/animate.css
A cross-browser library of CSS animations

CSS Shake

www.elrumordelaluz.github.io/csshake
CSS shake graphics and icons for your page or app

Subtle Patterns

www.subtlepatterns.com
Free tilable textured patterns

Placehold.it

www.placehold.it
image placeholders

Holder.js

www.imsky.github.io/holder
Client side image placeholders

Hammer.js

www.hammerjs.github.io
Add multi-touch gestures to your webpage

Textillate

www.jschr.github.io/textillate
A simple plugin for CSS3 text animations

Timeline JS

www.timeline.knightlab.com
Beautifully crafted timelines that are easy and intuitive to use

Modernizr

www.modernizr.com
JavaScript library that detects HTML5 and CSS3 features in the user’s browser

Isotope

www.isotope.metafizzy.co
Create a filterable portfolio for your website

CodyHouse

www.codyhouse.co
A free library of HTML, CSS, JS nuggets

Cheetyr

www.cheetyr.com
Collection of cheat sheets and shortcuts for designers and developers

Leaflet

www.leafletjs.com
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Modest Maps

www.modestmaps.com
Free library for interactive maps

Templated

www.templated.co
A collection of 846 free CSS and HTML5 site templates, designed & built by Cherry + AJ

GraphicBurger

www.graphicburger.com
Design resources offered for free to the community


Comments

  1. Very knowledgeable Blog. Thanks for providing such a valuable Knowledge on Website Design and Development Services. I have learned many things with this blog. Keep sharing.

    ReplyDelete
  2. I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good.Thanks alot! best RGB and HEXA color picker tools

    ReplyDelete

Post a Comment