10 Useful Plugins for Front-End Web Developer

Written by : ibnu shodiqin in web design / January 9, 2017

Back To Journal

Most of Front-End web developer job list would never be separated from a wide variety of plugins that can help development process. It’s because the plugins already available on internet, and the developers only needs to modify them according to their needs, so it does not need to make it from scratch. Until this second there are hundreds and even thousands of plugins have been uploaded on many sites that you can access via internet. Especially for you, we summarize the 10 plugins which are frequently used by many front-end web developer. Here’s a list of the ten plugins you can enjoy with:


Animate is a CSS plugins developed by Daniel Eden, product designer of famous social media startup, Facebook. By using Animate you can create animated element with adding the animate.css file and add class to your HTML element, simple isn’t it? There are 75 types of animation that provided by this plugin, and you can use it for free. Feeling curious? Visit the https://daneden.github.io/animate.css/ site to see the demo. Not only it’s very simple to use, it makes a great impression for your website.


You need a lot of customizable icons? FontAwesome is all you need. This plugins that contains various vector icons and easily to customized either the size, color, shadow, and other CSS code. The icons also supports high resolutions screen without any Javascript code. Here we provide a sneak-peek of FontAwesome icons.


Check out more about these awesome icons in http://fontawesome.io/icons/ and customize it on your own! Let’s make customizable icons!

Bootstrap Table

Although Bootstrap framework has provided a qualified feature for Front-End Web developer when designing the tables on the web page, Bootstrap Table provides additional features. Those features are single and multiple delete row, single and multiple select row, add new row, sorting row, show or hidden column, export table, etc. This plugin developed by Wenzhixin also support responsive web design. So, you don’t need to worry when you want to make your table be responsive. If you need the services of this plugin, visit the site on http://bootstrap-table.wenzhixin.net.cn/ to read the documentation. Also check out http://issues.wenzhixin.net.cn/bootstrap-table/ to see bootstrap table show off.



Got stuck with form validation? Nguyen Huu Phoc provides solution through FormValidation Plugin. This plugin have 51 types of validation with different functions from one to another. You can use this plugin to validate the text, numbers, phone numbers, files to upload, email, ISBN, URL, etc. Another benefit which offered by this plugin is the ability to be combined with some frameworks, such as Bootstrap, Foundation, Pure, Semantic, and UIKit. If you want to know more about this plugins, type http://formvalidation.io/ on your browser and enter it.



Do you like a proportional, neat, but beautifully arranged gallery for your website? Now you can do it using Isotope Plugin.


As you can see the image appears more proportionate, although with different height. If you want your gallery page like the image above, use Isotope. A plugin which combines CSS, javascript, and HTML to produce a proportional and responsive grid element, so even though the size of the elements is different, it can still appear with appropriate scale. This plugin will certainly helpful when you confused with the variety of image size. If you require more detailed explanation, please visit http://isotope.metafizzy.co/.


Chosen Select

Multiple selection items, removable selection items, search the item before select it, there are some of features offered by Chosen Select. Chosen Select will change your simple selection in to useful selection which managed to do various things above. If you want to use chosen select on your HTML code you need to add the CSS and JS file from this plugin, also add class to your HTML select code. You can see one of the example below.


Excited to use this plugin? Kindly visit the demo in https://harvesthq.github.io/chosen/.

Eonasdan Date Picker

Want to show date time picker so your users don’t need to type the date manually? Eonasdan Date Picker is the right choice. You only need to put your focus to a textfield and it will show you the date and time picker. By adding a simple HTML code, the text field on your web page now :

Simple, right? If you want to use this plugin visit Eonasdan Date Picker at https://eonasdan.github.io/bootstrap-datetimepicker/.


BigSpottedDog Scroll-to-Fixed

Do you ever find a menu, sidebar, or content to fixed in his current position when the page scrolling? If not, maybe you need to take a look at the demo in http://bigspotteddog.github.io/ScrollToFixed/.


This plugin will make you have another imagination about menu or sidebar that you already created. Plugin which developed by Josep Cava-Lynch is able to create element remains in its position when the page scrolled down or up. It’s easier for users now to see the menu without scrolling up the page. You can implement this plugin on your web page with seeing more details in https://github.com/bigspotteddog/ScrollToFixed.

js from Axial


Retina.js is important plugin when you need the image in your page support with high resolution device. As described in this plugin site, this plugin work with:

  1. Automatically swapping out “src” paths on “img” tags.
  2. Automatically swapping out background image URLs in inline styles.
  3. Manually specifying the location of a high-res image variant.
  4. Automatically creating media queries for CSS background images.

For a front-end web developer, this plugin would be very helpful when we get web page design which supports retina display. Find out more about this plugin in https://imulus.github.io/retinajs/, and get ready to use it!


Basically, there are a lot of plugin which can make your image in the website available to zoom. But for this time we will specifically tell you about the work form Jack Moore, jQueryZoom. This plugin has four kinds of technique in displaying the enlarged image: mouse hover, grab, click, and toggle. See the demo in http://www.jacklmoore.com/zoom/.


Love to work with us? Let's talk about your great idea!

Talk With Us