How to Code a jQuery Rolodex-Style Countdown Ticker

by Jake Rocheleau
on May 17, 2012

in Tutorials

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

I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect.

More specifically I have seen a couple countdown widgets on landing pages. These are numbering systems for websites which count down to a specific launch date. You could alternatively use this code to create a live clock on your website – there are so many uses available! Check out my simple tutorial below and see if you can implement a similar ticker into any future web projects.

jQuery Rolodex count down timer ticker - demo screenshot

Read More

21 Best Websites for Teaching Yourself Web Development

by Jake Rocheleau
on May 14, 2012

in Tutorials

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

I remember how popular web design was even 5 or 10 years ago. Kids in high school were teaching themselves HTML and building small web pages from scratch. And nowadays this is possible because of the thousands of free tutorials and code online. Open source has dramatically shaped an industry of high-tech and high demand.

But it can still be difficult pinpointing exactly what you want to learn. Beyond straight HTML/CSS there is jQuery for frontend animation, PHP/RoR for backend web apps, and even Java/Objective-C for mobile apps. With this collection you should be able to track down a few tutorials in whatever topic catches your interest. If you notice we’ve missed a resource feel free to share with us in the post discussion area below.

Pixel2Life

Read More

Building an E-mail Request Invite Form with jQuery

by Jake Rocheleau
on April 30, 2012

in Tutorials

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

Using jQuery we can build some incredible web-based applications. The animations and manipulation of DOM elements using jQuery are much more intuitive than coding regular JavaScript. Because the syntax is so minimalist it’s possible to scale a very complex idea within a few hours time.

In this tutorial I’ll demonstrate how we can build an HTML5 invite form and check the results through jQuery. I haven’t gone into any backend PHP as this isn’t always the best solution for an invitation system. You may want to tie into another e-mail campaign such as MailChimp or Campaign Monitor. But with this technique running the frontend you can quickly implement a backend language to manage the e-mail submissions.

jQuery email invite form tutorial - demo screenshot

Read More

Using CSS3 Animations to Build a Sleek Box UI

by Jake Rocheleau
on April 1, 2012

in Tutorials

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

Back just a few years ago it was required for web developers use JavaScript/jQuery to perform animated effects in-browser. CSS3 has dramatically changed the rules of the game where you can animate any standard property of an HTML element. This opens up a whole new room of effects you can put together in just 15-20 minutes of tinkering with code.

My example below uses a few Dribbble shots as a demo of how you can setup animated box effects. The style appears when you hover over each image to display some further information such as the title, description, and publication date. I’ll be explaining how to build a similar effect on your own website using nothing but HTML5 and CSS3 techniques.

CSS3 hover box animation effects demo page

Read More
Page 8 of 23« First...678910...Last »