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.

Live Demo – Download Source Code

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

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.

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.

Live Demo – Download Source Code

It can take a lot of additional effort to build mobile-specific website templates. HTML and CSS have come a long way but there are still plenty of standards and loopholes to jump through. And with the mounting increase of various mobile devices there are more platforms now than ever before.

In this guide I would like to share some of the most common tips when designing for mobile screens. The web is a fluid beast constantly changing with the times. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs. The learning process is devious but after a bit of practice you’ll pickup mobile design very quickly.

The year 2012 has kicked off with a booming design and web industry. More developers are entering the web than ever before and it’s the perfect time to brush up on your coding. These tutorials I’ve added below are fresh off the presses and will help you catch up on all the latest HTML5 & CSS3 trends. With just a bit of practice you can pickup on all these skills and really improve the quality of your coding standards.

Create A Minimal Single Page Portfolio With HTML5/CSS3

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices.

It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place.

Download Source Code

In this roundup we have collected 45 outstanding Photoshop tutorials released in 2011. If you like these photoshop tutorials you might also want to check out some of our previous posts below. Enjoy!

35 Amazing Photo Effect Photoshop Tutorials

30 Awesome Photoshop Text Effect Tutorials

Create a Powerful Human Disintegration Effect in Photoshop

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

In this roundup we have collected 44 outstanding photoshop tutorials. Enjoy these over your holiday!

Design a creative portfolio in Photoshop