Experience and Knowledge are always going high and high. So, to keep pace with the web high ways one should need more and more skills. Here is a list of 222+ tools and tips as well as Resources.
Colors Combination Tools & Resources
COLOURlovers: User created &
shared color palette inspiration
ColorPicker: Online Color Picker Tool
Color Hex: A free color tool providing
information about any color
Flat UI Colors: Web app helps you to
copy the colors from Flat UI
Contrast Ratio: Easily
calculate color contrast ratios
Color Safe: Color palettes based on WCAG
Guidelines
Color Contrast Checker:
Check color contrast by analyzing difference between foreground and a
background color.
Colllor: Color palette generator
Paletton: Tool for creating color
combinations
Colorpeek: Quickly preview, share and
convert one or more CSS colors, including hex, RGB, HSL, RGBA and color
keywords.
Colourcode: Online designer tool, which
allows you to easily and intuitively combine colours.
Chrome Daltonize!:
Daltonization is a technique of exposing details to color-blind users, allowing
them to see what they otherwise would have missed.
Flat UI Color Picker: Flat Color
Picker which gives you the perfect colors for flat designs.
SassMe: A Tool for Visualizing SASS
Color Functions
HEX To RGB: Convert Hex color to RGB.
HSL to RGB: HSL to RGB
/ RGB to HSL converter.
Colour Scheme
Calculator: Choose a starter color to calculate its color wheel
including triad, complementary, analogous, and split complementary colours,
plus saturation and lightness variations.
CSS Generators Sites ,Tools & Resources
Ultimate CSS Gradient Generator: CSS
gradient generator
Colorful CSS
Gradient Background Generator: Generate CSS background
EnjoyCSS: All in one CSS generator
CSS MenuMaker: Create responsive
website navigation
On/Off Flip switch: Generate CSS3
On/Off flip switches
CSSmatic: Gradient, border
radius, box shadow & noise texture generator
Ajaxload: Ajax loading GIF
generator.An important site, no doubt.
Ui Parade Live Tool: Button,
Form, Icon, Ribbon builder.Please try without delay.
CSS Table: CSS table generator
CSS Triangle: CSS
triangle generator
CSS Arrow Please: CSS arrow generator
Patternify: A CSS Pattern Generator
CSS3 Patterns Gallery: CSS3 patterns
gallery
Critical Path CSS
Generator: Speed up your page render time
Button Generator: CSS
button generator
Layout Generator: Create
CSS layout
Tridiv: Web-based editor for creating 3D
shapes in CSS
Trianglify: Generate colorful triangle
meshes that can be used as SVG images and CSS backgrounds
Delaunay Triangle:
Triangle pattern maker that can be used as background
Bear CSS: Generates a CSS template
containing all the HTML elements, classes & IDs defined in your markup
Stylie: A fun CSS
animation tool
Calculators & Converters
CSS2Less: Convert old CSS files
to LESS files
PXtoEM: Convert pixels to EM
RWD Calculator: Turn your pixel
based designs to responsive
DPI Love: Find DPI/PPI of any screen
CSS Inliner: Automatically
inline your email’s CSS
Code Beautify: Beautify,
Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML,
Excel
Density Buckets: Screen density
converter for Android and iOS
Pixel Density Converter:
Tells you how to scale graphics between four density groups.
Is This Retina?: DPI/PPI Display
calculator
Specificity Calculator: A
visual way to understand CSS specificity
NTH-Test: nth-child and nth-of-type
Tester
Lessify: A configurable CSS to LESS converter
and LESS learning tool.
Value of Typography & Fonts
Google Fonts: Open source web
fonts
Font Squirrel: Hand picked free
web fonts
Dafont: Archive of freely downloadable
fonts
Font Space: Download free fonts
Type Genius: Find the perfect font
combo
Golden Ratio Typography Calculator: Discover
the perfect typography for your website
What Font Is: Identify font from
a image
Typetester: Compare Web fonts
from Adobe Edge, Google and Typekit
Tiff: Find out difference between
Google fonts
Wordmark.it: Preview the output of
fonts for a selected word
TypeWonder: Test web fonts on any live
website
Fit Text: A jQuery plugin for
inflating web type
Value of Icons
Font Awesome: Scalable vector icons
that can instantly be customized
Material Design
Icons: 750 glyphs Material Design system icons pack by Google
Design
Iconogen: Generate favicons, Windows 8
Tiles, Apple Touch icons, Android and iOS icons
Marka: Beautiful transformable icons
Maki: Icon set for web
cartography
Batch: 300+ icons for web and
user interface design
Fontello: Icon font generator
Fontastic: Create your own icon font
Icon Melon: SVG icons library for web
Entypo: A suite of 411 carefully crafted
premium pictograms by Daniel Bruce
Gemicon: 600+ Free icon set, comes in 3
different sizes (16px, 32px, 64px)
Typicons: Free-to-use vector icons embedded
in a webfont for easy use in your user interfaces
Iconmonstr: A large collection of glyph
icons from a German artist
Octicons: Icon font launched by GitHub
GlyphSearch: Search for icons from Font
Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons
Analyzing Websites’ Styles
Stylify Me: Overview of the style guide of
a site, including colors, fonts, sizing and spacing
StyleStats: Simple tool to collect CSS
statistics of a website
Colours: Find out the most common
colour or hue of a website
Type-o-matic: A browser extension that
finds all the fonts on a page
SnappySnippet:
Easily extract CSS and HTML from selected element
Editors Tools
CodePen: Show case of advanced techniques
with editable source code
JSFiddle: Test and share JavaScript, CSS,
HTML or CoffeeScript online
JS Bin: A live pastebin for HTML, CSS &
JavaScript and a range of processors
CSSDeck: Collection of Awesome CSS and JS
Creations to help out frontend developers and designers
Dabblet: An interactive CSS playground and
code sharing tool
Liveweave: Liveweave is a HTML5, CSS3 &
JavaScript playground for web designers and developers
Adobe Edge Reflow:
Design tool that supplements your design workflow to help you create beautiful
responsive designs for all screen sizes
webflow: Drag-and-drop website builder for
creating professional responsive websites
Macaw: Provides the same flexibility as
your favorite image editor but also writes semantic HTML and remarkably
succinct CSS
Developers’ Tools & Resources
Chrome DevTools: Set
of web authoring and debugging tools built into Google Chrome
Grunt: The JavaScript Task Runner for
automating tasks
LiveReload: CSS edits and image changes
apply live without needing to hit refresh button
Bower: Solution to the problem of front-end
package management
Yeoman: A generator ecosystem, basically a
plugin that can be run with the `yo` command to scaffold complete projects or
useful parts
Can I Use: Up-to-date browser support
tables for support of front-end web technologies
HTML5 Please: Look up HTML5, CSS3 &
find out if they are ready for use
CSS Values: CSS Reference, Properties and
Values
CSS Triggers: An invaluable reference on
how CSS affects performance
Testing Tools & Resources
W3C Markup Validation: Checks the
markup validity of Web documents in HTML, XHTML, SMIL, MathML
HTML_CodeSniffer:
Checks HTML source code and detects violations of a defined coding standard
W3C CSS Validation:
Check (CSS) and (X)HTML documents with style sheets
CSS Lint: Points out problems with your CSS
code
JS Lint: JavaScript program that looks for
problems in JavaScript programs
Pesticide: CSS layout debugging
PhantomCSS: Visual/CSS
regression testing with PhantomJS
CSS Critic: Regression
testing of CSS
DiagnostiCSS: Visually detect any
potentially invalid or inaccessible HTML markup
QUnit: A JavaScript Unit Testing framework
Dromaeo: JavaScript Performance Testing
Browsershots: Cross platform browser
test
Responsinator: Check how your site
will look on the most popular devices
Opera Mobile
Classic Emulator: Use the profile selector to spawn multiple
Opera Mobile Classic instances with a defined resolution, pixel density, user
interface
Performances Tools & Resources
Pingdom Website Speed Test: Test
& analyze the load time of a live page
WebPagetest: Website speed test from
multiple locations around the globe
PageSpeed Insights:
Analyzes website and suggest ways to make it load faster
GTmetrix: Grade site’s performance and
provides recommendations to fix these issues
YSlow: Analyzes & offers suggestions
for improving the page’s performance
Perfmap: A
performance heatmap of resources loaded in the browser
Optimizations Tools & Resources
CSSCSS: Let you know
which rulesets have duplicated declarations
Helium: javascript
tool to scan your site and show unused CSS
CSS Tidy: Opensource CSS parser and
optimiser
CSS Compressor:
Compress your CSS to increase loading speed
CSS Dig: Take a look at all your CSS
properties, their frequency and variations
JavaScript Minifier: Minify your
JavaScript
FF Subsetter: Reduce the font file
size to optimize bandwidth usage
Compressor.io: Reduce the size of your
images while maintaining a high quality
Prefix free: add the
current browser’s prefix to any CSS code only when it’s needed
Sprite Cow: Generate CSS for sprite
sheets
TinyPNG: Advanced lossy compression for PNG
images
Adaptive Images: Detects your
visitor’s screen size and automatically creates, caches, and delivers device
appropriate re-scaled versions of images
Feedback Tools
Bounce: Add feedback on a design and
share it with other people
Marqueed: Capture, annotate, Share and
discuss images
Design Drop: A tool for collecting
design feedback
Peek: See and hear a 5-minute video of
a real person using your site
Inspiration Tools
Call To Idea: Examples designs,
components, ideas, logins, patterns, tabs, toggles, registers, lists,
galleries, comings
Land Book: Cool landing page gallery
UX Archive: Most interesting user flows
from iPhone 4S and iPhone 5
UI Parade: Online catalog of
inspiration for UI designers
ZURB U: Find UI design
inspiration
UX Porn: User Interface Design Patterns
and Wireframe Templates
UI Patterns: User Interface Design patterns
Pttrns: A collection of mobile user
interface patterns
TabPattern: Tablet UI Patterns
UICloud: User Interface Design Search
Engine
Use Your Interface: Library of
transitional interface and interaction design patterns
Niice: A search engine for finding design
inspiration
MOOC Tools
Intro to the Design of Everyday
Things: Informative for anyone curious about design: everyday
people, technical people, designers, and non-designers alike
Delft Design
Approach: Introduction to fundamentals and methods of the Delft
approach to designing meaningful products and services
Prototyping
Interaction: Learn the different methods of prototyping by
sketching, building and testing
Introduction to
Graphic Design: Learn foundational graphic design principles
(fonts, colors, images, backgrounds, and layouts) and how to apply them.
Intro to HTML and CSS:
Learn how to convert digital design mockups into static web pages
Web Development: Learn
core web development concepts from Reddit & Hipmunk co-founder Steve
Huffman.
Responsive Web Design Fundamentals:
Learn the fundamentals of responsive web design with Google’s Pete LePage
Responsive Images:
Learn how to work with images on the modern web, so that your images look great
and load quickly on any device
HTML5 Canvas: 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.
Developing Android Apps:
Learn how to build an Android app
JavaScript Basics:
Learn the JavaScript programming fundamentals
Object-Oriented JavaScript:
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:
Learn the importance of separating concerns when writing JavaScript, gaining
hands-on experience along the way
JavaScript Testing:
Learn how to write JavaScript applications with confidence, using the
red-green-refactor workflow
Building Mobile Web Experiences:
Learn how to create great cross-device mobile web experiences.
UX Design for Mobile Developers:
Dive into the techniques that great designers use to plan and prototype amazing
apps before any code is written
UIKit Fundamentals:
Build a series of simple apps to become more comfortable with the UIKit
framework and master its most widely used components
Intro to jQuery: Learn
how to read and make sense of jQuery’s documentation.
Intro to AJAX: 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:
Learn how to optimize any website for speed by diving into the details of how
mobile and desktop browsers render pages.
Gamification Design:
Learn the basics of Gamification with a highly practical approach
Mockups, Wireframes & Prototypes Tools
Origami: Free tool for
designing modern user interfaces created by Facebook
Cacoo: Create a diagrams, site map,
flowchart, mind map, wire frame, UML diagram and network diagram
Marvel: Turn your Drop box or desktop
images into web and mobile app prototypes for any device and get feedback
Placeit: Create iPhone mockups and iPad
mockups
MockFlow: Online services to Plan,
Build and Share work for designers
Justinmind: Interactive wireframes for
web and mobile
Wireframe.cc: Free minimal wire framing
tool
Tools of Design News & Communities
/r/web_design: Web
design subreddit
/r/design: Design subreddit
/r/usability: User
experience, Interface design, or Human Factors subreddit
/r/userexperience: User
experience design subreddit
Stack Exchange: Graphic Design:
Q&A for Graphic Design professionals, students, and enthusiasts
Stack Exchange: User Experience:
Q&A for user experience researchers and experts
Front-end Front: A place where
front-end developers can ask questions, share interesting links, and show their
work to the rest of the community
Pineapple: Hub of Tutorials, Tools and
Assets for developers and designers
Lockerdome: An interest-based social
network
Designer News: A community of people
in design and technology
DesignFloat: Web design news &
tips
The Web Blend: A community for designers,
developers and tech junkies
Design News: A site that features news
articles, resources and tutorials written by designers and developers
Portfolio Tools
Behance: The leading online platform
to showcase & discover creative work
Dribbble: A place to show and tell,
promote, discover, and explore design
Cargo: Personal publishing platform
aimed at creating accessible tools and a networked context to enhance the
exposure of talented individuals on the Internet
DeviantArt: An online community,
showcasing various forms of user-made artwork
WordPress Themes
Optimizer: An easy to
customize multipurpose theme for people who don’t like to mess with code.
Pinnacle: Modern flat
design with fully responsive theme.
Customizr:
Customizable responsive theme with flat design. Well documented and easily
extendable with hooks.
Asteria: A clean
responsive theme with a beautiful slider, Narrow and Wide Layout Option.
Storefront: Designed
and developed by Woo Themes for Woo Commerce projects.
Resources
Microjs: Discover Micro-Frameworks and
Micro-Libraries
Vector Open Stock: Free vector
graphics
Buttons: A CSS button
library built with Sass & Compass
Bootflat: Open source Flat UI KIT
based on Bootstrap 3.3.0 CSS framework
Animate.css: A
cross-browser library of CSS animations
CSS Shake: CSS shake
graphics and icons for your page or app
Subtle Patterns: Free tilable textured
patterns
Placehold.it: image placeholders
Holder.js: Client side image placeholders
Hammer.js: Add multi-touch gestures to
your webpage
Textillate: A simple
plugin for CSS3 text animations
Timeline JS: Beautifully crafted
timelines that are easy and intuitive to use
Modernizr: JavaScript library that detects
HTML5 and CSS3 features in the user’s browser
Isotope: Create a filterable portfolio
for your website
Polymer: Makes it
easier and faster to create anything from a button to a complete application
across desktop, mobile, and beyond
CodyHouse: A free library of HTML, CSS, JS
nuggets
Cheetyr: Collection of cheat sheets and
shortcuts for designers and developers
Leaflet: An Open-Source JavaScript Library
for Mobile-Friendly Interactive Maps
Modest Maps: Free library for interactive
maps
Templated: A collection of 846 free CSS and
HTML5 site templates, designed & built by Cherry + AJ
GraphicBurger: Design resources
offered for free to the community
Tips for Writing an Effective Bid:
With thousands of freelancers competing for jobs and perhaps a
hundred or more bidding on the same job, how do you make your bid stand out
from the rest? The fact is each employer is as altered as each freelancer, so
there truly isn’t a “magic formula” that tasks for every bid. There are,
however some significant stages you can take to growth of the chances that a
prospective employer will consider your bid extremely. Here are ten simple tips
for writing an effective bid:
1. Reading the project description
carefully is required. After all, if the employer doesn’t feel you understand
the project, you’re not likely to win the bidding. Besides, many employers will
ask for specific details that you need to be aware of. In fact, employers often
include a phrase that must be included in your bid in order to have it
considered. The bottom line is, you should always take the time to go through
the description thoroughly.
2. If you have questions, use the Project Clarification
Board. Winning a project without knowing exactly what you’re getting into isn’t
a good situation for you or the service buyer.
3. Keeping your bid clear, concise and to
the point. Remember that the employer may have dozens or even hundreds of bids
to consider. It’s very likely that every word of every bid isn’t going to be
read. Bids with unnecessarily long descriptions may be skipped over completely.
Don’t invite the employer to ignore your bid by making it too wordy.
4. Stating your terms clearly and specially.
Using the project description as a guide, be as precise as possible in stating
exactly what you’ll provide, how much it will cost, and how long it will take
to deliver. Being vague about your terms implies a lack of confidence. If
you’re not confident in yourself, the employer won’t be, either. As we’ve
already mentioned, use the Project Clarification Board to ask the employer
questions if you need more details.
5. If the employer contacts you through a
private message, be sure to responding promptly. Most employers award projects
within the first 24 hours of posting, so ensure you keep yourself available for
contacts.
6. It’s always a good idea of uploading
samples with your private message or providing links to online examples. Be
sure, however, that your examples are appropriate for the job and represent
your best tasks. Quality, not quantity is usually the rule of thumb when
submitting samples.
7. A word of precaution: Unless you’re
prepared to give your work away, any samples you provide should bear a
watermark or other means of identification or at the very least your name and a
statement of copyright.
8. Be economical with your pricing. Note
that this doesn't essentially mean you need to be the lowest bidder. Bidding in
a world-wide market types for tough competition, but if your work is truly
above average, you may find that employers are eager to pay above average rates.
On the other hand, if you’re comparatively new to freelancing, you may want to form
a status first. A little common intelligence will go a long way here.
9. Don’t oversell yourself. A little self-possession
is a good thing, but over-the-top privileges perhaps won’t impress anyone.
Being frank and honest about your skills will get you much farther than a lot
of propaganda.
10. Last, but surely not least, correct
your bid before you submit it. Is it inscribed undoubtedly? Are there
misspellings? No matter what kind of project you’re bidding on, a poorly
written proposal suggests a lack of interest and poor work habits and
experience. Neither of those is going to work in your favor.
