The Site Slinger

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

Here are 20 simple jQuery tricks to get you on your way to JavaScript bliss. The keyword here is “simple” so even if you’ve never used jQuery before, this is the perfect place to start!

Beginner Tutorials

Just to get you started off right, here are the beginner tutorials straight from jQuery.com.

#1 – jQuery Rounded Corners

A short post from “15 Days of jQuery” on using the wrap, prepend, and append functions to create a rounded corner effect.

#2 – Image Cross Fade Transition

3 Simple methods of cross fading one image into another using jQuery and CSS.

#3 – Fading Menu – Replacing Content

Chris Coyier provides some of the best free content out there for learning web design. Here’s one of many jQuery tutorials on his site.

#4 – Sexy Drop Down Menu w/ jQuery & CSS

Learn to create a slick, animated UI for your site with this step by step tutorial.

#5 – Tabbed Content Area using CSS & jQuery

An oldie but goodie, this was one of the first tutorials ever posted on NetTuts. This is where I first learned about jQuery!

#6 – jQuery Twitter Ticker

Learn how to use both the Twitter API and jQuery to create a great looking Twitter ticker.

#7 – Vertically Scrolling Menu

This article shows you how to create a really smooth, vertically scrolling menu. A great tutorial despite the fact that the author seemed to think it was a horizontally scrolling menu!

#8 – Easy Display Switch with CSS and jQuery

Mimic Abduzeedo’s new site and to create a switch for changing your content from list view to grid view.

#9 – Simple Toggle with CSS & jQuery

A great beginner’s tutorial describing how to use the toggle feature.

#10 – WordPress & jQuery Contact Form without a Plugin

A well written, in-depth look at creating a WordPress form without the need of an additional plugin.

#11 – jQuery Sequential List

Use jQuery to take the monotony out of coding sequential items.

#12 – Create a Fancy Share Box

Having social media share links on your site has quickly become a standard for most blogs. Use this tutorial to make yours standout.

#13 – Create a Slick and Accessible Slideshow Using jQuery

Use this stunning content slider to put a ton of content in a small space.

#14 – Using jQuery for Background Image Animations

Create eye-catching background animations with only a few lines of code.

#15 – Animated Menus Using jQuery

Similar in concept to #14 but with a subtler, more sophisticated effect.

#16 – “Outside the Box” Navigation with jQuery

An amazing technique for creating website navigation that mimics the OS X dock.

#17 – How to implement a news ticker with jQuery and ten lines of code

A quick and easy news ticker from Antonio Lupetti.

#18 – Create a Stunning Popup with jQuery

This tutorial shows you how to create a popup window and fade out the background.

#19 – jQUery Feed Menus

Learn to create simple and effective RSS feed menus like those in Safari.

#20 – Create a Funky Parallax Background Effect

This tutorials walks you through creating an incredibly unique sliding 3D background effect.

That’s All Folks

That concludes our roundup of simple jQuery tricks. Now go and use these techniques to create some amazing effects on your site. Leave a comment using the field below to share your favorite jQuery tricks and tutorials.

Any good web designer must know the basics of markup. Check out these nice and easy PSD to HTML slicing tutorials to understand how the process works and to broaden your skill-set.

From PSD to HTML, Building a Set of Website Designs Step by Step

This is a very lengthy but good step-by-step guide to converting PSD files into HTML/CSS code. The whole process is described in great detail with lots of screenshots and code samples. All source files are available as a free download, for your convenience.

Creating a CSS Layout from scratch

This is a highly recommended read for newbies. It gives a nice and simple description of how to create a fully functional CSS layout from scratch. If you think HTML is a complicated language, you will definitely change your mind after reading this tutorial.

Build a Sleek Portfolio Site from Scratch

This slicing tutorial is more advanced, mainly because the PSD sample contains more elements and blocks to code. The post is less detailed, but features some very clean code samples and screenshots.

Converting a Design From PSD to HTML

This is a detailed 54-minute long video tutorial, which shows the process of PSD to HTML conversion. There are no downloadable source codes because the template was intended to be sold on ThemeForest.

Slice and Dice that PSD

This is another great video tutorial by Jeffrey Way. The first 25 minutes contain a step-by-step guide on markup creation. The second part of the screencast is about CSS.

Coding Your 1st PSD Tutorial

This CSS tutorial will teach you how to code your PSD file into HTML and CSS. This one is not as detailed as articles above and it is designed for people who already have a basic knowledge of markup.

How to Convert a PSD to XHTML

This is a great playlist of detailed video tutorials, which show the process of PSD to HTML conversion. There are no downloadable source codes, but it will definitely be useful for beginners.

Tutorial:Coding a Layout

Here you will learn how to analyze your designs and find the best way of converting them into HTML code. This is a short guide that will be interesting for both beginners more advanced users.

Create a Simple Accordion Using HTML, CSS & jQuery

The problem with accordion scripts is that they are usually heavy and they don’t always work properly. This tutorial will help you learn how to create a lightweight accordion script using HTML, CSS and jQuery.

Coding a Rounded Corners Layout

You should always make sure your code is clean, short, and well structured. This collection of tricks and CSS tutorials will teach you how to easily create rounded corners and shapes.

Converting a Photoshop Mockup

Here’s an excellent video that will walk you through the process of converting an Adobe Photoshop mockup into a CSS-based website. There are three chapters; the first two describe how to code the header, main menu, and footer and the third deals with the main content area.

From PSD to CSS/HTML in Easy Steps

Here’s a nice series of tutorials on how to create a web page. All its source files, markup, and design templates are available for download. This guide also emphasizes the importance of preliminary analysis of your PSD files to determine possible problem areas that may arise during the markup stage.

CSS Template Tutorial

This is another in-depth tutorial if you want to learn markup. This article gives a lot of details and serves as a great introduction to CSS.

We hope this list of PSD to HTML tutorials comes in handy for you. If you need to get your designs hand-coded into the highest quality HTML/CSS code, TheSiteSlinger.com is always at your service!

Our experts use the most advanced CSS preprocessors and can deliver .scss or .less files. Should you need help with a PSD to WordPress theme conversion, we will be glad to do it for you.