5 incredible online tools to kick-start your front-end development

by Matt Barlow  07 Jun, 2019

Improve your website development with these free tools and resources. I used them on top of my Bulma starter kit to build this site.


Glide.Js

Glide.Js is a dependency free JavaScript ES6 slider and carousel. It's lightweight, flexible and fast. I've used it on this site to build the mini-slider on the home page. I installed Glide.Js via NPM into my front-end project, it's simple then to hook up a slider into your razor views.

Download Glide.Js

Glide.Js, easy to integrate into SASS and webpack. It's dependency free and runs at ~23kb, it's written with vanilla JavaScript without any dependencies.

  Download Glide.Js

Smartmockups

This is a great tool for quickly generating mockup images without the need for any Photoshop knowledge. All you need to do is pick your mockup then upload your images. There are plenty of free mockups to choose from, there are also good value subscription plans that give you access to all of the mockup's including premium versions.

Visit Smartmockups

Use Smartmockups and start creating your free mockups, choose from technology, print, packaging or apparel options. 

  Visit Smartmockups

uiGradients

Need some swish looking gradients? then uiGradients have you covered. Choose from hundreds of cool looking gradients, then simply copy the styles into your style sheet. My personal favourites are "Kye Meh" gradient and "Moonlit Asteroid"

Visit uiGradients

Go to uiGradients and choose from multiple stylish gradients and give your website or app an awesome modern feel.

  Visit uiGradients

Color Space

Don't waste time picking the perfect color palette for your site, enter a single color and let Color Space generate color palettes for you. 

Visit Color Space

Head over to Color Space and start generating your color palette options, save time and choose from great unique color palettes.

  Visit Color Space

AOS - Animate On Scroll

This is simple dependency free library to add animations to page elements as you scroll. I've used it on this site to add a some stylish animate in options. It's really simple to use, just use NPM to install the library, then decorate you elements with data attributes.

Download AOS - Animate On Scroll

Add stylish animation effects to your html elements quickly with the JavaScript AOS library.

  Download AOS - Animate On Scroll

I hope that you enjoy using the above tools as much as I did when creating this website. Advanced warning though, you can spend hours and hours tweaking and modifying your site using these tools, so make sure you have a cup of tea handy before you begin! As always, thanks for visiting Jacker, and if you have any comments or suggests then please get in touch.

Happy Umbracoing!

-- Matt

About

About Matt Barlow

Matt is a full-stack C# developer specialising in Umbraco, he works in London and is the creator of Jacker.io.