54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

Advertisement

When a roundup of tutorials is done, they usual focus on one specific area of design, development or coding. However we at Pelfusion know that a lot of our web developers have their fingers in more then one area of development. So, we’ve dedicated this article to the development of fantastic blogs and website.

We have focused on finding articles based on the following areas of web development:

CSS 3

WordPress

Jquery

Whether you have just started in web development or if you’re a pro, or if you want to just improve your skills, then these tutorials are for you. We, at Pelfusion, believe that 2010 is the year for all of us to go beyond our boundaries and really focus on working on our skills. CSS 3 and Jquery are the tools you need to take your web design skills and really boost them to the next level. For wordpress, we’ve included all of the tricks of the trade you need to give your blog that cutting edge that is demanded in this new year.

This article focuses on the BEST tutorials for each field, so we hope you enjoy it and if you have any other tutorials to suggest, please feel free to let us know.

CSS 3 Tutorials

1. The New Hotness: Using CSS3 Visual Effects

Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome.

css visual effects 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

2. Stronger, Better, Faster Design with CSS3

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff).

fast css 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

3. Liquid Columns with Background Size

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns.

bg size 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

4. Pushing your buttons with practical CSS3

In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

super css buttons 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

5. Push your web design into the future with CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design.

6. CSS Trick Hidden Messages

Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection.

7. A look at some of the new selectors introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes.

8. Rounded Corner Boxes

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation.

9. A mock up interface using CSS3 colour

“I’ve included quite a lot of other CSS3 into the mix. There is liberal use of box-shadow to give the allusion of depth on the windows and title bar. Rounded corners have been added to windows.”

css colour 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

10. Creating a Polaroid Photo Viewer with CSS3 & Jquery

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create.

polaroid css 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

11. Styling Forms with attribute selectors

In this article, the first of a two-part series, we will look at attribute selectors and how do they allow us to better style portions of a Web documents.

12. Old School Clock with CSS3

Transform:rotate is a new feature of CSS 3 which lets you… well, rotate stuff. Transform will also allow you to scale, skew and translate (move) objects in your web page.

13. The CSS3 Border Radius Property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

border radius 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

14. How to create a sexy vertical sliding panel using jquery and css3

First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel.

15. 11 Classic CSS techniques made simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming.

16. 3 Easy and fast CSS techniques for faux images

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

17. Create a letterpress effect with css text shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

css letterpress effect 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

18. Text Embossing techniques with CSS

I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.

19. CSS Text Gradients

Text Gradient is a simple css trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.

WordPress Tutorials

20. WordPress hack creating a dynamic sticky

For our blog, MaxPower, we needed to have certain articles ’stay at the top’ longer than others.

21. How to make a wordpress plugin

A short video tutorial on how to make a wordpress plugin.

22. How to make a random post button

Ever wanted to have a “Random Post” link or button in your sidebar but you don’t know where to start? Well, today I’m going to show you how to do it.

23. Create an auto stats page for advertisers

I’m going to show you how to sell more ad spaces by adding stats to your WordPress blog’s Advertise page.

24. Multiple WordPress Page Layouts in one single template

Multiple layouts can always be achieved with custom page templates, but to keep things clean and economical, it’s much better to rely on one global template (”page.php”) if you can get away with it. So how will it work?

multiple page layout 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

25. WordPress Hack: Create a custom error 404 page

In this “Wordpress Hack” you’ll learn how to create a custom 404 Error page for your blog. It’s helps your visitors find what they need, and also helps you not lose visitors!

26. Translating your blog

Your blog is online accessible to anyone in the world. Translating blog posts and pages increases your audience and monetization capabilities by at least ten-fold!

27. Styling WordPress Comments

A fun part of customizing WordPress themes is designing a comments format which complements the rest of the site.

wordpress comments 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

28. WordPress Hack: How to setup a post series in wordpress

Organize your wordpress blog by setting up a post series people can follow for specific topics.

29. How to: List scheduled posts

Here’s a good idea to make your readers visit your blog more often, or suscribe to your rss feed: What about listing the title of your scheduled posts? If you’re interested to do so, just read this recipe.

30. Create a peel away effect on your blog or website

If you are wondering how some webmasters or bloggers create this little peel away effect on the top right corner of their website.

peel effect 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

31. Custom Login Page

It’s cool to have the WordPress login page customized to fit your own website branding.

32. Highlight wordpress category when on a single post tutorial

While making the redesign for this blog I wanted to highlight the category in the navigation when browsing the specified category as well as keeping it highlighted when on the a single post added to that category.

category highlight 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

33. How to add gravatars to wordpress themes

Add Gravatars to your WordPress theme. Gravatars are a quick way to add a personal touch to your blog comments by displaying the avatar of the commenter alongside their comment.

34. How to hack together a user contrributed link feed with wordpress comments

Although WordPress has a *very* extensive plug-in collection, now and again things come up for which there are no suitable plug-ins available (yet).

35. Blog Posts in different columns

Recently I had my blog posts divided into three columns with different blog posts appearing in each one. I’ve now switched back to two columns, putting my blog design/tech posts in one and my personal/life posts in the other.

36. Highlight author comments in wordpress

If a commenter knows the email address of the blog author, she could use the blog owner’s email address in her comment and get her own comment highlighted.

37. How to add adsense between your blog posts

To display Google AdSense ads (image ads or text ads) between your posts, log into your WordPress dashboard, go into your theme editor screen (see the red circle on the left in the image above to find your editor screen).

Jquery Tutorials

37. How to load in and animate content with jquery

In this tutorial we will be taking your average everyday website and enhancing it with jQuery.

38. Create a cool animated navigation with CSS & Jquery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website.

cool animated navigation 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

39. Creating a dynamic poll qith jquery and php

In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

40. Face-book style Lightbox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

41. Creating a filterable portfolio with jquery

In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

portfolio tutorial 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

42. Building a jquery powered tag cloud

Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well.

43. Jquery Hover Subtag Cloud

Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce “Hover Sub Tags” under each main Tag.

jquery clouds 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

44. Fading Menu – Replacing Content

The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is.

jquery menu 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

45. Create a photo admin site using php & jquery

I’m pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery, and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover

46. Create an amazon.com books widget with jquery and xml

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

47. jQuery Style Switcher

In this tutorial I will be showing you how to create a style switcher using jQuery and PHP.

48. Build a top panel login with jquery

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page.

49. Adding form validation to wordpress comments using jquery

In this tutorial I’ll show you how to use jQuery to do some instant checking on an example comment form.

50. Improved Current Field Highlighting in forms

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.

51. Developing a Jquery Plugin

First of all, you might ask yourself why you’d want to develop a plugin. The first and best reason is the ability to maintain chainability.

52. Build a better tooltip with jquery awesomeness

In this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

53. Crafting an animated postcard with Jquery

In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere.

post card 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer

54. 60. How to build an animated header in jquery

We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.

Advertisement

There are 18 comments for this article
  1. wparena at 12:41 pm

    It’s really easy to find CSS tutorials through this post, the list is immediately wag your finger on right direction, keep it up looking for more resources

  2. DJaVuPixel at 1:17 pm

    The title of the article says it all! Bookmarked too! :)

  3. Pingback: tripwire magazine | tripwire magazine
  4. amac44 at 6:22 pm

    Awesome. But – the link is wrong for #19 — it has the same link as #18. As much as I like embossing …

  5. Pingback: CSS Brigit | 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer
  6. scott at 11:27 pm

    I absolutely love this stuff. Always handy to go back to when you have spare time. Much thanks.

  7. Pingback: 54 Awesome Tutorials - Tim Gleeson
  8. Pingback: 54 Awesome Tutorials To Satisfy The Appetite Of Any Web Developer
  9. Pingback: 165+Need To Check Out Fresh Articles for Designers and Developers | tripwire magazine
  10. Pingback: 10 tempting titles surely make you crave for content | Web Developer Juice
  11. Pingback: 80+ Incredible Collection Of Inspirations, Tutorials And Resources For Designers To Discover The Best Of The Web In February @ SmashingApps