Home Tutorials Fonts Lists Feed RSS Advertising Contact Me

Saturday, August 9, 2008

25 Awesome tutorials for web designers

30 comments
Save to delicious 0 hits

Scriptaculous, MooTools, jQuery and much more: all you need to develop modern web interfaces and add new features to your website.
This is a collection of the best tutorials for web designers I found this month browsing some websites I often read. It also includes some of my post :) Take a look!


1. Most used CSS Tricks
A nice compilation of the most used CSS tricks in web design (rounded corners without images, style your order list, tableless forms, double blockquote, gradient text effect, vertical centering with line-height and more...)

2. Simple, Powerful Product Highlighter with MooTools
How to create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.

3. Timeframe: Prototype date range component
Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is "Click-draggable. Range-makeable. A better calendar."

4. Rating Boxes with Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

5. Navigation bar with tabs using CSS and sliding doors effect
This tutorial illustrates how to design a navigation bar with tabs using CSS and status effects (active, hover, link).

6. Create beautiful tooltips with ease
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

7. Solving 5 Common CSS Headaches
CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we'll demystify five of the most head thumping issues that you'll encounter when building web applications.

8. Lazily load functionality via Unobtrusive Scripts
David Kees has written about Using Prototype to Load Javascript Files, which is an implementation of the general technique of loading functionality via scripts based on the availability of DOM elements.

9. Nice calendar with date-pickers
Calendar is a Javascript class ready to use that adds accessible and unobtrusive date-pickers to your form elements.

10. Fantastic News Ticker Newsvine-like using Mootools
This tutorial explains how to implement a "News" Ticker, with vertical scrolling, using mootools. It's very simple and quick to implement in your web projects.

11. Ajax Forms with jQuery
Travor Davis illustrates how easy it is to turn a regular form into a AJAX form.

12.Sexy Sliding JavaScript Side Bar Menu Using Mootools
A simple animated sidebar using mootools ready to use in your web projects.

13. Pure CSS Animated Progress Bar
Here's a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.

14. Drag & Drop Sortable Lists with JavaScript and CSS
In Web applications I've seen numerous, and personally implemented a few, ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo.

15. PHP components: Autosuggest
I published this simple "PHP component", ready to use, to implement a search form with an autosuggest feature using PHP and MySQL. For all ajax beginners this is the most simple way to implement it (just with 8Kb) and the only thing you have to do is modify some parameters. Take a look at this post for all related infos.

16. Slick Tabbed Content Area using CSS & jQuery
One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library.

17. Multiple File Upload Magic With Unobtrusive Javascript
This tutorial illustrates how to upload multiple file with one ore several file inputs using jQuery.

18. Add grunge effect to text using simple CSS
In this short tutorial you will see how to add grunge effect to your text using just CSS and one image

19. Creating a fading header
A simple tutorial which explains how to create a fading header graphic using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.

20. Accessible unobtrusive content scroller
This tutorial explains how to implement an unobtrusive content scroller.

21. How to Display Your RSS Count in a Cool Tooltip
How to display the current subscriber count using a combination of an extremely simple jQuery script and a PHP snippet.

22. Ext Accordion Widget Example
This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page.

23. LightboxXL -prototype plugin
Lightbox functionality that you're used to with embed Flash movies using prototype.

24. Change form elements appearance using FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It's accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

25. FORM elements design using CSS and list (ul and dl)
This tutorial explains how to design a pure CSS FORM using lists <ul>.

If you have other interesting links to suggest, please share them adding a comment!

Related Content
Woork table of contents
Scriptaculous effects compilation ready to use
Mootools effects compilation

Sponsored Links
Share this post
Share on Facebook
Share on Twitter
Share on StumbleUpon
Share on Delicious
Share on Reddit
Share on Digg
Share on DesignFloat
Share on Technorati
Feeds RSS Subscribe to Feeds RSS
Comments
30 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to my feeds | Subscribe comments feeds
Anonymous said...

Thanks for this list, very useful!

Anonymous said...

The prototype date picker has the wrong URL associated with it.

Antonio said...

@anonymous (2): thanks! I changed the link!

Roland said...

Thanks again for a nice collection of tutorials, Antonio. You earned a place in my feeds. ;-)

Anonymous said...

Excellent list! Many thanks!

Abdul Akbar said...

Thanks for the excellent resources! I particularly enjoy your fading and ajax menu tutorials. Would be nice to have a list of your best creations in one post for easy bookmarking and future reference.
I learn alot from you Antonio. Thanks once again!

Abdul 'AK'

Tommy M said...

Great post.

The best part about having top 10/15/etc tutorials is it shows you other websites that could potentially have even more resources/tutorials.

annieone said...

cool, thx for quite a delicious list!

Janko said...

Antonio, thanks for listing my article!!

Dejan said...

Thanks for the mention Antonio, i appreciate it!

dai said...

wow!
Amazing cool-ection.

I am deliciousing it!

acms said...

Thanks for this list.

Jagan said...

Thanks for the list. A very useful resource.. :)

Uruno-kun said...

Great links. Thank you.

Anonymous said...

Great list, thank you as google indexed pages ;)

Marvin said...

very nice post.
most of them are well-known, but its a verynice summary :)

Lara said...

gracias por este aporte, es muy útil :)

Tom Ross said...

Great list, thanks for sharing :)

rafasilva said...

Thanks a lot!
I'd never seen this tutorials before

Anonymous said...

thank you so much !

'web designer' Kathaperumal said...

Incomparable collection! great job. As a web designer and owner of a web development company this article helps me lot and i used this as a reference tool

Johnny said...

Great article, can't wait to see more lists like this on your Blog. Thank you.

Anonymous said...

Thanks for the great information. I have a blog discussing web site design tips and usabilty. If you want to take a look.
How to make a website. Again thanks for the info!

teknobakis said...

Thanks a lot great list

Anonymous said...

thx a lot buddy..
thats really cool that is why i could find this site in Turkish sites.

Small business website design said...

u r blog Is very nice

Professional Lab said...

Tutorials are so much tough and critical for me! :) Loved your work, but I may never can do it. Sad. :(

Tommaso said...

ottimo lavoro...

sto utilizzando il tuo ticker da un pò ed è proprio quello che mi serviva... unica cosa che vorrei evitare ma non ci riesco è il primo scattino che fa lo script sulle news appena carico la pagina.. facendo così in evidenza mi finisce il secondo blocco e non il primo.. fammi sapere se c'è una soluzione.. ho provato ad usare il paramento Onstart, ma non ne conosco i valori associabili...

grazie mille

Tommaso

Kally said...

Really great list, thank you for sharing this very informative and knowledgeable article with us.

akiresahotome said...

thanks

About Me

I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted. Rome, IT.
Feeds RSS Contact Me

SubscribeLatest posts

SubscribeHot Links

Subscribe Design News

Ecoki Eco Green Product Reviews
Apple Reviews and News
CSSRockstars - You Design, We Code. Your PSD to HTML/CSS for just $149