Top Worthwhile Tutorials of the Week – #6

written by aext on August 1, 2010 in Roundup and Top Of The Week with 5 comments

This collection is hand-picked from our feed subscription, and from other feeds. This tutorial collection focuses on web design, development and digital art from around the web that were published within the past week. We try to find great tutorials which have been buried in the mass of tutorials available today. Hope you enjoy this collection!

How To Beat Form Spam With Just CSS

The author shows us how to avoid spamming by using only few CSS code. The trick is adding a special field which is hidden by CSS. The spam filter will catch spam bot if this field was filled in. According to the author’s experience, this method will still work with human spammers; See this tutorial here.

CSS3 Multiple Background Images Lesson

This tutorial was written in a easy way to read and understand the Multiple Background Images feature of CSS3. The tutorial was explained very good how to use this technique.

CSS3 Multiple Background Image

See this here.

Object Oriented JavaScript: Creating an Window Box

Window Box

This is a short tutorial about Object Oriented Programming in JavaScript, in which we are going to create an object called JSWinbox that simulates a window in our browser. See here.

Using cookies with jQuery

This is an complete tutorial which describes how to handle cookie using jQuery. The author is using free jQuery Cookie plugin that specifically deals with cookie storage, aptly named…. This is a simple plugin with only one function: Cookie(). With this function you will write, get and delete cookies on your computer.

Using cookie with jQuery

You can see this great tutorial here.

Create an iPod Nano in Illustrator

I don’t usually include the graphic design tutorial in this series, but this is so great which can help you to best use Rectangle Tool and the Ellipse Tool. The tutorial shows how to make an simple iPod Nano step by step.

iPod Nano Illustration

This is really a nice tut for beginners easy to follow and the outcome is just great and realistic. Check itout.

Design an Email Newsletter in Photoshop

Like creating the website design, this tutorial will help you to design the final layout for email in Photoshop. The author shows us the design process of creating an email newsletter which is very detail.

You can follow this design process here.

Quick and Easy jQuery Font Resizer

If you think we don’t need font resizer for our design since browsers has the zoom in and zoom out functionality, you should think it again. That’s because we don’t want to resize all parts of our designs. The following little script could be helpful to resize some sections of your text instead of everything.

jQuery Font Resizer

This tutorial focuses more on the javascript, so the HTML and CSS are really basic. Check it here.

Making a Custom YouTube Video Player With YouTube’s APIs

Follow this great jQuery tutorial to customize the control of Youtube player. The author explains how to use chromeless player (a stripped down version of the regular embeddable player), which allow you to build and style your own custom controls. Really nice, right? I love to embed Youtube video to my website, but I really don’t want to use its default style control. Now, I can!!!

Youtube API jQuery Custom Control

Check out this awesomeness here.

Customizable Mac Dock With CSS3 Only

We know out there in the web design and web development community, there are bunch of tutorials teach us how to create The Apple Dock using jQuery, pure Javascript, CSS… Again, in this tutorial, the author will continue to show us how to create a customizable Mac like Dockbar using only CSS3. I’m not kidding!


Check out his tutorial here.

Optimizing javascript/jQuery loading time

This following tutorial will help you to optimize your javascript to load 2 or 3 times faster with some great free tools. It’s really nice when we can reduce the load time of our front-end to gain more credibilities from visitors.

You can check it here.

Start Experimenting With CSS3 Keyframe Animations

An useful article with nice code examples and best practices help us to understand the CSS3 animation . Not too much information from this one, but you can learn and start using this awesome feature of CSS3 in case you haven’t worked with it. Check it here.

In case you missed: Slide Down Box Menu with jQuery and CSS3

“In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.”

Slide Down Box Menu with jQuery and CSS3

It’s a nice tutorial. The demonstration looks impressive. This another way to design the navigation is extremely great for inspiration. We should try it and implement it in several projects. The tutorial can be found here.