Narendra Dhami

My Site

25 Awesome tutorials for web designers

Posted by Narendra Dhami on August 12, 2008

This is a collection of the best tutorials for web designers 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

6 Responses to “25 Awesome tutorials for web designers”

  1. Good day! Do you know if they make any plugins to protect against hackers?

    I’m kinda paranoid about losing everything I’ve worked hard
    on. Any tips?

  2. Every weekend i used to pay a visit this web site, for the reason that i want enjoyment, for
    the reason that this this web page conations genuinely nice funny data too.

  3. Excellent write-up. I definitely love this website. Keep writing!

  4. This design is spectacular! You certainly know how to
    keep a reader entertained. Between your wit and your
    videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job.
    I really enjoyed what you had to say, and more than that, how
    you presented it. Too cool!

  5. This website was… how do you say it? Relevant!!
    Finally I have found something that helped me.
    Thanks a lot!

  6. Envision a tiny sphere of pale blue light originating
    from the area where your coronary heart is. His
    style consisted of an addition of astrological ascriptions
    and some Egyptian motifs to the cards.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: