If you’re a web designer or a front-end developer, you probably spend a lot of time writing mark-up. Fortunatly, there are some great tools and projects on the web that can improve your next project easily and quickly.
Today we have tracked down 20 brilliant free online tools for developers. We’ve included everything from mark-up organizers, grid systems, jQuery plugins, gradient generators and much more.
Enjoy!
1. CSSmatic Gradient Generator
CSSmatic can create any type of gradient, no matter how complex! A great tool for any web designer.
2, Retinise.js
Retinise.js is a really simple jQuery plugin which 'retinises' your inline images, and because it uses 'data-src' instead of 'src' it means it only ever serves up the image you need, saving you and your users bandwidth.
3. Pure
A set of small, responsive CSS modules that you can use in every web project.
4. Colourco
Pick colours based on hsl. Scheme-mode with monochromatic, analogic, complement, triad and quad colours.
5. Snap.SVG
SNAP SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM..
6. ProCSSo
ProCSSor is hands-down the best free online CSS beautifier. It has host of awesome features so your mark-up gets formatted just the way you like it.
7. Foundation
Foundation is probably the most widely used responsive front-end development framework for developers.
8. CSS3 Maker
CSS3 Maker has a number of free online tools. It’s all GUI based an outputs the code with all major vendor prefixes. It’s also a great way to learn how to create various effects.
9. Query Function Builder
Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.
10. Free Formatter
If you need to convert HTML to JSON or convert something to escaped format, or pretty much any Web Dev related conversion, freeformatters.com has a whole bunch of tools ready for the job.
11, Glyph Search
Glyph Search let’s you search a number of free online glyph icon libraries.
13. CSS3 Animation Cheat Sheet
The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
14. Pre Composed Touch Gestures
A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations.
15. IcoMelon
IcoMelon is a free online library and generator for SVG based web icons.
16. UI Cloud
UI Cloud is the largest online database of user interface designs, letting you search through almost 50,000 designs.
17. Raw
Raw let’s you easily and quickly turn spreadsheet data into SVG web visualizations.
18. Bento
Bento is an online resource for learning web development, all links are categorized into various mark-up languages.
19. FlatIcon
FlatIcon is a free online database of over 25, 000 vector icons.
20. Script src.net
Script src is a simple website for all the most current and widely used script tags.
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.
Related Posts
Understanding LCP, CLS, FID. All about Core Web Vitals in Google Search Console
A few months ago we talked about certain Google metrics that were displayed in Search Console. The reason for writing another post on this topic is that Google has changed…
Validating HTML forms using BULMA and vanilla JavaScript
Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…
How to use Parallax.js effect on your website
Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…
How to make the website's dark mode persistent with Local Storage, CSS and JS
Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…
Dark Web: the creepy side of the Internet is not as dark as believed
People who surf the Dark Web are not necessarily looking for something illegal. Most people want to protect their privacy. And according to a recent study, 93 percent only use…
Cross cultural challenges in web design, an overview
The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…
Website Traffic Getting Low? 4 Immediate Action to Take
If you have created a website, I am sure your end objective is to create a strong brand presence, boost engagement, and multiply revenue. An interesting statistic showed that there were…
The easiest way to align items using flexbox
With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…
Dark Mode on website using CSS and JavaScript
In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…
JavaScript: Spread and Rest operators
In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…
How To Add Filter Effects to Images with CSS
To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…
Why You Should Hire Node.js Developer for Your Backend Development
When developers are building a new website, they mainly focus on both frontend and backend development. The frontend code helps create the interfaces through which the app interacts with the…