45 Resources & Tutorials for designers and developers

With the web constantly changing and technology always improving it can be very difficult to keep up with everything especially if you’re a designer or developer. In this Article I have listed 45 tutorial & Resources for designers and developers that you might find useful. After this post you should have a good start or lead in the web development field. Enjoy



HTML 5 Cheat Sheets

Smashing Magazine has release a great HTML 5 cheat for designers and developers who looking forward to learning more about HMTL 5. This Cheat sheet will help you familiarize the latest HTML 5 tags,and new tags that are being brought into HTML .

HTML 5 Canvas Cheat Sheet Vol 1

Web Master Sucks
Check out this HTML 5 Cheat Sheet via Webmastersucks. Has a great layout and can teach you a ton. Check it out.

  • Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 – HTML5 is the future of web development but believe it or not you can start using it today…
  • Coding A HTML 5 Layout From Scratch – HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project….
  • How to Make an HTML5 iPhone App – You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.
  • Have a Field Day with HTML5 Forms – ere we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.
  • Designing a blog with html5 – Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages…



Creating a Slick Auto-Playing Featured Content Slider

Featured Content Slider
Create a slick auto playing featured content slider with Chris Coyier from Css-Tricks. Slider is great and can be used for many things.

  • Starbox Rating – 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
  • Using CSS and Mootools to simulate Flash horizontal navigation effect – I had a new “conversion” from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.
  • Coda Slider Effect – Create an amazing coda slider using Jquery. The code slider can be used for many things such as image galleries, content sliders, and much more. Go check it out.
  • Sliding Top Panel – This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript.
  • Scrollable – The main design goals of this tool are to provide visual customization, ease of use and programmability. The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.


WordPress Cheat Cheet

Wordpress Cheat Sheet
The number of WordPress functions can be dauntingly. Why not print a helpful cheat sheet for future reference? This one will do the trick!

  • How To: Create a Theme Options Page for Your WordPress Theme – Theme Options pages are growing in popularity among quality WordPress themes. They provide the user with greater customization control over their website without having to know a hint of HTML or CSS.
  • WordPress 2.7+ User Link Feed Submit Form and Widget – In this article tripwire magazine provides a mini-tutorial on how to setup a User Link/News Feed solution in WordPress 2.7+. I really think it is a nice feature as it gives a blog dynamic content and it it may actually drive traffic from bloggers looking for sources to get some easy and free traffic for their own site.
  • WordPress Multi-Level Drop Down menu using jQuery – As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.
  • PSD to WordPress Series Part 1 – I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.
  • Stylizing Threaded/Nested Comments in WordPress 2.7 – One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment,



Drupal Cheat Sheet

Drupal Theme Cheat Sheet
I put together a Drupal Theme Developer’s Cheat Sheet that includes some of the most handy reference information for themers. The cheat sheet is specific to PHPTemplate, the most common theme engine for Drupal. The two page cheat sheet includes information on available variables, file naming conventions, sample code, and more.

  • Drupal 6 & 7 Theme Guide – This handbook is about customizing the look and feel of a Drupal site. If you are developing a module that outputs presentation data, then please read the module developer’s guide Using the theme layer section.
  • PSD to Drupal Theme Conversion – This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.
  • Building a multi-language site – The following steps are for those who want to have a simple site available in different languages. The goal is to have content translated to two or more languages and the visitor to be able to choose any of them.
  • Building a Website with Drupal 6 – – I have decided to keep that website in Drupal 5 and create a whole new website in Drupal 6 for these series of tutorials because there is still sufficient interest in using Drupal 5. I will tag the tutorials “Drupal 6″ and “Drupal 5″ so that you can choose which ones you’re interested in
  • Organizing content with taxonomy – You can set up a taxonomy that allows users to add terms (also known as tags or metadata) to content. The taxonomy for a site contains one or more vocabularies and each vocabulary contains a set of terms.



CSS 3 Cheat Sheet

CSS 3 Cheat Sheet
In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.



PHP Cheat Sheet (V2)

PHP Cheat Sheet
The second version of the PHP Cheat Sheet, a quick reference guide for PHP, with functions references, a regular expression syntax guide and a reference for PHP’s date formatting functions.

  • Build a phpBB Forum in 5 Steps – If you’re thinking of setting up a forum for your Website, you need not start from scratch. The open-source script, phpBB, can easily be installed on most Web servers. This article will describe how to do it right, from downloading through to customisation.
  • PHP Login script tutorial – Learn to create a simple login system with php + mysql script, this tutorial easy to follow, teach you step by step.
  • Simple PHP Website tutorial – If you ever tried making a simple website with only a handful of pages, you probably noticed that once you need to edit some menu element, you have to edit all of your pages, which can be very irritating.
  • Creating a Mail Client, Part 1 – This tutorial is Part 1 of a series on creating a Mail Client. In Part 1, I will show you how to send mail. You may download and print this tutorial as necessary.
  • How to keep your website secure from hackers and attacks – Such as server “which are always on” is designed as a system for security is an important issue. Web servers are the backbone of the Internet. The basic services and functionality across the world billions of websites and therefore everyone’s personal information store that serves as the journey.

Other Resources


How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Vertical Sliding Panel Using jQuery And CSS3
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

CSS3 Dropdown Menu

CSS3 Dropdown Menu
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow.

  • Halftone Navigation Menu With jQuery & CSS3 – Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
  • Nice CSS3 Gradient Buttons – There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
  • Creating Modules for Drupal – This tutorial describes how to create a module for Drupal 6. It is an update to the tutorial for Drupal 5.
  • Delicious Recipes for WordPress Page Menus and Page Listings – There are so many awesome ways to display your WordPress pages. Out of the box, WordPress provides two different template tags for displaying lists of your site’s pages.
  • Drag and drop HTML 5 – As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.
  • Making a Mosaic Slideshow With jQuery & CSS – Today we are making a jQuery & CSS mosaic gallery, which will feature an interesting tile transition effect when moving from one slide to another.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply