How To Code a Forrst API Webapp using JSON and jQuery

by Jake Rocheleau
on March 5, 2014

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Modern development APIs work like agents for sharing information to other 3rd party websites. I’ve written many past tutorials about API development to help anyone new to this process. There are so many web-based services that it’s tough picking something to grab people’s attention.

In this tutorial I want to demonstrate how we can access the Forrst API using jQuery. Some API wrappers actually require server-side code like PHP or Ruby. But it’s often easier to work with JSON objects instead. Then we can parse all the return data using client-side JavaScript. Take a look at my sample demo to see the final product.

forrst api tutorial howto preview screenshot

Read More

How To Code a Hidden Author Bio Display using jQuery

by Jake Rocheleau
on February 6, 2014

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Read More

How To Design Custom Pricing Plan Tables with HTML5 and CSS3

by Jake Rocheleau
on January 21, 2014

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.

For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

Read More

Easy Display Switch with CSS and jQuery

by Jake Rocheleau
on December 12, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Today, I would like to go over a quick and simple way to allow your users to switch page layouts by using CSS and jQuery.

Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

Read More
Page 1 of 2512345...Last »