Front End Web Dev Online Tools
While I was cleaning up my bookmarks I remembered lots of nifty online tools I have used over the previous years while developing web applications. You will probably know many of these tools already, or have the same functionality built-in in your favorite text editor, but it is always useful to have a quick alternative just in case.
Code creation and testing on the browser
- CodePen – Front End Developer Playground & Code Editor in the Browser.
Responsive Design & Cross-Browser Testing
- BrowserStack – Test your website for cross browser compatibility on real browsers. Instant access to multiple desktop and mobile browsers.
- Modern IE – Free browser testing tools, cross platform testing tools and virtual machines from the Microsoft Internet Explorer team.
- Screenify by Quirk Tools – Test your website on any screen size including desktops, tablets, televisions, and mobile phones.
- Responsivator – View & share how sites look at different screen sizes.
- deCSS3 – A bookmarklet for testing your graceful degradation.
Color Scheme Designers & Color Pickers
- Paletton – The Color Scheme Designer
- Adobe Color CC – (Former: Adobe Kuler) Create color schemes with the color wheel or browse thousands of color combinations from the community.
- HSL Color Picker – Pick a color via its HSL values, get its HEX and RGB values too.
- Flat UI Colors – A click-and-copy collection of modern Flat UI colors.
- Initializr – Start an HTML5 Boilerplate project in 15 seconds!
- Patternify – CSS Pattern Generator.
- Stripe Generator – Stripes Background Designer (it produces PNG files).
- Mother Effing Text Shadow – CSS text shadow generator.
- Twitter Bootstrap Button Generator – Generate buttons for twitter bootstrap v3.
- CSS Triangle Generator – A generator for pure CSS triangle.
- Ultimate CSS Gradient Generator – A powerful Photoshop-like CSS gradient editor from ColorZilla.
- Grandientoo – Easy CSS3 Gradient Generator.
- Noise Texture Generator – Generate your noise texture pattern easy and fast within 3 steps!
- Ceaser – An interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.
- IcoMoon – It provides a package of vector icons, along with a free HTML5 app for making custom icon fonts. Browse among thousands of pixel perfect icons or import your own vectors.
- MapBuildr – Enrich your website with a Google Map.
- Bitmap to Vector Converter – Easily convert Bitmap images to clean vector art online.
- Compress PNG – Use this PNG compression and optimization tool to compress PNG images for your sites and applications. It will make your website running faster and use less bandwidth.
- Pixlr – Online Photo Editor
- VintageJS – Create stunning photos with a vintage effect.
- Web Developer Checklist – (+Chrome extension) The ultimate checklist for all serious web developers building modern websites.
- CSS Explain – Analyzes any css selector.
- MinifyCSS – Online CSS Compressor & Minifier.
In case you know any more tools that work just fine for you, please message me so I can further enrich the list.