Design, CG Graphics & Inspiration
18 Fresh jQuery Tutorials

18 Fresh jQuery Tutorials

The great majority of people reading our blog know that jQuery is a light Javascript library, which simplifies the interaction between Javascript and HTML. It has a lot of useful Ajax and JavaScript features to allow you enhance semantic coding and user experience. Some of the tutorials presented here combine both jQuery and CSS which helps to achieve the wanted result. So why don’t you choose any of these nice tutorials and follow the motto “write less, do more”?

15 Powerful jQuery Tips and Tricks for Developers

In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features.
15 Powerful jQuery Tips and Tricks for Developers in 18 Fresh jQuery Tutorials

FrameWarp – jQuery plugin for displaying pages in a neat overlay

FrameWarp – jQuery plugin for displaying pages in a neat overlay in 18 Fresh jQuery Tutorials
Demo

Let’s Make a Drawing Game with Node.js

By now you have probably heard of node.js. It is an asynchronous web server built ontop of Google’s V8 JavaScript engine (the same one that makes Chrome lighning fast). Using node, you can write scalable web services in JavaScript, that can handle a huge number of simultaneous connections, which makes it perfect as the backend of games, web chats and other real time tasks.
Let’s Make a Drawing Game with Node.js in 18 Fresh jQuery Tutorials
Demo

3D Flipping Circle with CSS3 and jQuery

In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
3D Flipping Circle with CSS3 and jQuery in 18 Fresh jQuery Tutorials
Demo

Swatch Book with CSS3 and jQuery

A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.
Swatch Book with CSS3 and jQuery in 18 Fresh jQuery Tutorials
Demo

Triple Panel Image Slider

In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel. We’ll be using CSS 3D Transforms with perspective and CSS Transitions.
Triple Panel Image Slider in 18 Fresh jQuery Tutorials
Demo

3D Thumbnail Hover Effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.
3D Thumbnail Hover Effects in 18 Fresh jQuery Tutorials
Demo

Fullscreen Slit Slider with jQuery and CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.
Fullscreen Slit Slider with jQuery and CSS3 in 18 Fresh jQuery Tutorials
Demo

Vertical Showcase Slider with jQuery and CSS Transitions

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.
Vertical Showcase Slider with jQuery and CSS Transitions in 18 Fresh jQuery Tutorials
Demo

Real-Time Geolocation Service with Node.js

A tutorial about how to create a simple real-time application that shows the locations of visitors on an interactive map using Node.js and the HTML5 Geolocation API.
Real-Time Geolocation Service with Node.js in 18 Fresh jQuery Tutorials
Demo

Multiple Area Charts with D3.js

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.
Multiple Area Charts with D3.js in 18 Fresh jQuery Tutorials
Demo

Fullscreen Video Slideshow with BigVideo.js

A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.
Fullscreen Video Slideshow with BigVideo.js in 18 Fresh jQuery Tutorials
Demo

Creative Web Typography Styles

Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.
Creative Web Typography Styles in 18 Fresh jQuery Tutorials
Demo

Create a Parallax Scrolling Website Using Stellar.js

In this tutorial I’m going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.
Create a Parallax Scrolling Website Using Stellar.js in 18 Fresh jQuery Tutorials
Demo

Step by step from jQuery to Backbone

n this tutorial I will gradually refactor a bit of code from how I used to write JavaScript before, into proper Backbone.js code using models, collections, views and events. Hopefully this process will give you a firm understanding of the core abstractions in Backbone.js.
Step by step from jQuery to Backbone in 18 Fresh jQuery Tutorials

Building Web Presentations Using jQuery Mobile

jQuery mobile framework provides easily themeable, HTML5-based interface with support for pages transitions, therefore it would be very easy to create simple web presentations that will work on all popular smartphone and desktop platforms.
Building Web Presentations Using jQuery Mobile in 18 Fresh jQuery Tutorials
Demo

Get started with jQuery Masonry

Luke Shumard provides a crash-course in David DeSandro’s Masonry, a jQuery plug-in that’s ideal for both novice and intermediate web designers.
Get started with jQuery Masonry in 18 Fresh jQuery Tutorials
Demo

JavaScript-Turbo: Head.js Speeds Up Your Website

Head.js is a JavaScript tool that calls itself the only script you need. We have put it to the test and found out that Head.js can really boost the performance on websites with several scripts.
JavaScript-Turbo: Head.js Speeds Up Your Website in 18 Fresh jQuery Tutorials

You might also be interested in..

16 New jQuery Tutorials
jQuery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made Solutions

  • AndrewG,
  • November 8, 2012

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.