The Best 222+ Free Effective Tools & Resources for Beginners to Advanced Web Developers & designers.



The Best 222+ Free Effective Tools & Resources for Beginners to Advanced Web Developers & designers. 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.

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.

[i] Colors Combination Tools & Resources


1. COLOURlovers: User created & shared color palette inspiration
2. ColorPicker: Online Color Picker Tool
3. Color Hex: A free color tool providing information about any color
4. Flat UI Colors: Web app helps you to copy the colors from Flat UI
5. Contrast Ratio: Easily calculate color contrast ratios
6. Color Safe: Color palettes based on WCAG Guidelines
7. Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.
8. Colllor: Color palette generator
9. Paletton: Tool for creating color combinations
10. Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.
11. Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.
12. Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.
13. Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.
14. SassMe: A Tool for Visualizing SASS Color Functions
15. HEX To RGB: Convert Hex color to RGB.
16. HSL to RGB: HSL to RGB / RGB to HSL converter.
17. 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.

[ii] CSS Generators Sites ,Tools & Resources


18. Ultimate CSS Gradient Generator: CSS gradient generator
19. Colorful CSS Gradient Background Generator: Generate CSS background
20. EnjoyCSS: All in one CSS generator
21. CSS MenuMaker: Create responsive website navigation
22. On/Off Flip switch: Generate CSS3 On/Off flip switches
23. CSSmatic: Gradient, border radius, box shadow & noise texture generator
24. Ajaxload: Ajax loading GIF generator.An important site, no doubt.
25. Ui Parade Live Tool: Button, Form, Icon, Ribbon builder.Please try without delay. 
26. CSS Table: CSS table generator
27. CSS Triangle: CSS triangle generator
28. CSS Arrow Please: CSS arrow generator
29. Patternify: A CSS Pattern Generator
30. CSS3 Patterns Gallery: CSS3 patterns gallery
32. Critical Path CSS Generator: Speed up your page render time
33. Button Generator: CSS button generator
34. Layout Generator: Create CSS layout
35. Tridiv: Web-based editor for creating 3D shapes in CSS
36. Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds
37. Delaunay Triangle: Triangle pattern maker that can be used as background
38. Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup
39. Stylie: A fun CSS animation tool

[iii] Calculators & Converters


40. CSS2Less: Convert old CSS files to LESS files
41. PXtoEM: Convert pixels to EM
42. RWD Calculator: Turn your pixel based designs to responsive
43. DPI Love: Find DPI/PPI of any screen
44. CSS Inliner: Automatically inline your email’s CSS
45. Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel
46. Density Buckets: Screen density converter for Android and iOS
47. Pixel Density Converter: Tells you how to scale graphics between four density groups.
48. Is This Retina?: DPI/PPI Display calculator
49. Specificity Calculator: A visual way to understand CSS specificity
50. NTH-Test: nth-child and nth-of-type Tester
51. Lessify: A configurable CSS to LESS converter and LESS learning tool.

[iv] Value of Typography & Fonts


52. Google Fonts: Open source web fonts
53. Font Squirrel: Hand picked free web fonts
54. Dafont: Archive of freely downloadable fonts
55. Font Space: Download free fonts
56. Type Genius: Find the perfect font combo
57. Golden Ratio Typography Calculator: Discover the perfect typography for your website
58. What Font Is: Identify font from a image
59. Typetester: Compare Web fonts from Adobe Edge, Google and Typekit
60. Tiff: Find out difference between Google fonts
61. Wordmark.it: Preview the output of fonts for a selected word
62. TypeWonder: Test web fonts on any live website
63. Fit Text: A jQuery plugin for inflating web type

[v]  Value of Icons

64. Font Awesome: Scalable vector icons that can instantly be customized
65. Material Design Icons: 750 glyphs Material Design system icons pack by Google Design
66. Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons
67. Marka: Beautiful transformable icons
68. Maki: Icon set for web cartography
69. Batch: 300+ icons for web and user interface design
70. Fontello: Icon font generator
71. Fontastic: Create your own icon font
72. Icon Melon: SVG icons library for web
73. Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce
74. Gemicon: 600+ Free icon set, comes in 3 different sizes (16px, 32px, 64px)
75. Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces
76. Iconmonstr: A large collection of glyph icons from a German artist
77. Octicons: Icon font launched by GitHub
78. GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons

[vi] Analyzing Websites’ Styles

79. Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing
80. StyleStats: Simple tool to collect CSS statistics of a website
81. Colours: Find out the most common colour or hue of a website
82. Type-o-matic: A browser extension that finds all the fonts on a page
83. SnappySnippet: Easily extract CSS and HTML from selected element

[vii] Editors Tools

84. CodePen: Show case of advanced techniques with editable source code
85. JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online
86. JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors
87. CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers
88. Dabblet: An interactive CSS playground and code sharing tool
89. Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers
90. Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes
91. webflow: Drag-and-drop website builder for creating professional responsive websites
92. Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS

[viii] Developers’ Tools & Resources

93. Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome
94. Grunt: The JavaScript Task Runner for automating tasks
95. LiveReload: CSS edits and image changes apply live without needing to hit refresh button
96. Bower: Solution to the problem of front-end package management
97. Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts
98. Can I Use: Up-to-date browser support tables for support of front-end web technologies
99. HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use
100. CSS Values: CSS Reference, Properties and Values
101. CSS Triggers: An invaluable reference on how CSS affects performance

[ix] Testing Tools & Resources

102. W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML
103. HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard
104. W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets
105. CSS Lint: Points out problems with your CSS code
106. JS Lint: JavaScript program that looks for problems in JavaScript programs
107. Pesticide: CSS layout debugging
108. PhantomCSS: Visual/CSS regression testing with PhantomJS
109. CSS Critic: Regression testing of CSS
110. DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup
111. QUnit: A JavaScript Unit Testing framework
112. Dromaeo: JavaScript Performance Testing
113. Browsershots: Cross platform browser test
114. Responsinator: Check how your site will look on the most popular devices
115. Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface

[x] Performances Tools & Resources

116. Pingdom Website Speed Test: Test & analyze the load time of a live page
117. WebPagetest: Website speed test from multiple locations around the globe
118. PageSpeed Insights: Analyzes website and suggest ways to make it load faster
119. GTmetrix: Grade site’s performance and provides recommendations to fix these issues
120. YSlow: Analyzes & offers suggestions for improving the page’s performance
121. Perfmap: A performance heatmap of resources loaded in the browser

[xi] Optimizations Tools & Resources

122. CSSCSS: Let you know which rulesets have duplicated declarations
123. Helium: javascript tool to scan your site and show unused CSS
124. CSS Tidy: Opensource CSS parser and optimiser
125. CSS Compressor: Compress your CSS to increase loading speed
126. CSS Dig: Take a look at all your CSS properties, their frequency and variations
127. JavaScript Minifier: Minify your JavaScript
128. FF Subsetter: Reduce the font file size to optimize bandwidth usage
129. Compressor.io: Reduce the size of your images while maintaining a high quality
130. Prefix free: add the current browser’s prefix to any CSS code only when it’s needed
131. Sprite Cow: Generate CSS for sprite sheets
132. TinyPNG: Advanced lossy compression for PNG images
133. Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images

[xii] Feedback Tools

134. Bounce: Add feedback on a design and share it with other people
135. Marqueed: Capture, annotate, Share and discuss images
136. Design Drop: A tool for collecting design feedback
137. Peek: See and hear a 5-minute video of a real person using your site

[xiii] Inspiration Tools

138. Call To Idea: Examples designs, components, ideas, logins, patterns, tabs, toggles, registers, lists, galleries, comings
139. Land Book: Cool landing page gallery
140. UX Archive: Most interesting user flows from iPhone 4S and iPhone 5
141. UI Parade: Online catalog of inspiration for UI designers
142. ZURB U: Find UI design inspiration
143. UX Porn: User Interface Design Patterns and Wireframe Templates
144. UI Patterns: User Interface Design patterns
145. Pttrns: A collection of mobile user interface patterns
146. TabPattern: Tablet UI Patterns
147. UICloud: User Interface Design Search Engine
148. Use Your Interface: Library of transitional interface and interaction design patterns
149. Niice: A search engine for finding design inspiration

[xiv] MOOC Tools

150. Intro to the Design of Everyday Things: Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike
151. Delft Design Approach: Introduction to fundamentals and methods of the Delft approach to designing meaningful products and services
152. Prototyping Interaction: Learn the different methods of prototyping by sketching, building and testing
153. Introduction to Graphic Design: Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.
154. Intro to HTML and CSS: Learn how to convert digital design mockups into static web pages
155. Web Development: Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.
156. Responsive Web Design Fundamentals: Learn the fundamentals of responsive web design with Google’s Pete LePage
157. Responsive Images: Learn how to work with images on the modern web, so that your images look great and load quickly on any device
158. 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.
159. Developing Android Apps: Learn how to build an Android app
160. JavaScript Basics: Learn the JavaScript programming fundamentals
161. 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.
162. JavaScript Design Patterns: Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way
163. JavaScript Testing: Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow
164. Building Mobile Web Experiences: Learn how to create great cross-device mobile web experiences.
165. UX Design for Mobile Developers: Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written
166. UIKit Fundamentals: Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components
167. Intro to jQuery: Learn how to read and make sense of jQuery’s documentation.
168. 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
169. Website Performance Optimization: Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.
170. Gamification Design: Learn the basics of Gamification with a highly practical approach

[xv] Mockups, Wireframes & Prototypes Tools

171. Origami: Free tool for designing modern user interfaces created by Facebook
172. Cacoo: Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram
173. Marvel: Turn your Drop box or desktop images into web and mobile app prototypes for any device and get feedback
174. Placeit: Create iPhone mockups and iPad mockups
175. MockFlow: Online services to Plan, Build and Share work for designers
176. Justinmind: Interactive wireframes for web and mobile
178. Wireframe.cc: Free minimal wire framing tool

[xvi] Tools of Design News & Communities

179. /r/web_design: Web design subreddit
180. /r/design: Design subreddit
181. /r/usability: User experience, Interface design, or Human Factors subreddit
182. /r/userexperience: User experience design subreddit
183. Stack Exchange: Graphic Design: Q&A for Graphic Design professionals, students, and enthusiasts
184. Stack Exchange: User Experience: Q&A for user experience researchers and experts
185. 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
186. Pineapple: Hub of Tutorials, Tools and Assets for developers and designers
187. Lockerdome: An interest-based social network
188. Designer News: A community of people in design and technology
189. DesignFloat: Web design news & tips
190. The Web Blend: A community for designers, developers and tech junkies
191. Design News: A site that features news articles, resources and tutorials written by designers and developers

[xvii] Portfolio Tools

192. Behance: The leading online platform to showcase & discover creative work
193. Dribbble: A place to show and tell, promote, discover, and explore design
194. Cargo: Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet
195. DeviantArt: An online community, showcasing various forms of user-made artwork

[xviii] WordPress Themes

196. Optimizer: An easy to customize multipurpose theme for people who don’t like to mess with code.
197. Pinnacle: Modern flat design with fully responsive theme.
198. Customizr: Customizable responsive theme with flat design. Well documented and easily extendable with hooks.
199. Asteria: A clean responsive theme with a beautiful slider, Narrow and Wide Layout Option.
200. Storefront: Designed and developed by Woo Themes for Woo Commerce projects.

[xix] Resources

201. Microjs: Discover Micro-Frameworks and Micro-Libraries
202. Vector Open Stock: Free vector graphics
203. Buttons: A CSS button library built with Sass & Compass
204. Bootflat: Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework
205. Animate.css: A cross-browser library of CSS animations
206. CSS Shake: CSS shake graphics and icons for your page or app
207. Subtle Patterns: Free tilable textured patterns
208. Placehold.it: image placeholders
209. Holder.js: Client side image placeholders
210. Hammer.js: Add multi-touch gestures to your webpage
211. Textillate: A simple plugin for CSS3 text animations
212. Timeline JS: Beautifully crafted timelines that are easy and intuitive to use
213. Modernizr: JavaScript library that detects HTML5 and CSS3 features in the user’s browser
214. Isotope: Create a filterable portfolio for your website
215. Polymer: Makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond
216. CodyHouse: A free library of HTML, CSS, JS nuggets
217. Cheetyr: Collection of cheat sheets and shortcuts for designers and developers
218. Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
219. Modest Maps: Free library for interactive maps
220.Templated: A collection of 846 free CSS and HTML5 site templates, designed & built by Cherry + AJ
221. GraphicBurger: Design resources offered for free to the community

[xx] 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:
222. 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.
223. 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.
224. 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.
225. 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.
226. 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.
227. 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. 
228. 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. 


Labels: