The best tutorials combining HTML,CSS,PHP and JQuery

Here is list of  tutorials combining HTML,CSS,PHP and JQuery, including demo page and download page on tutorial source.

trans The best tutorials combining HTML,CSS,PHP and JQuery

Nice & Clean Sliding Login Panel built with jQuery

sliding login panel jquery 500x208 The best tutorials combining HTML,CSS,PHP and JQuery

Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but with jQuery this time.

view tutorial
view demo

How to implement a Post-to-Wall Facebook-like using PHP and jQuery

wall The best tutorials combining HTML,CSS,PHP and JQuery

In the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.

view tutorial

Create a Fun Tweet Counter With jQuery

widget final preview The best tutorials combining HTML,CSS,PHP and JQuery

In this tutorial, we will look at using jQuery to call Twitter’s API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.

view tutorial

Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite

news ticker The best tutorials combining HTML,CSS,PHP and JQueryNews Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.

view tutorial
view demo

Sexy Drop Down Menu w/ jQuery & CSS

image1 500x291 The best tutorials combining HTML,CSS,PHP and JQueryIn this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

view tutorial
view demo

A jQuery inline form validation, because validation is a mess
img form 300x199 The best tutorials combining HTML,CSS,PHP and JQuery

When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. When validating on submit , every errors will appear in absolute position above the input in question, and slide the scroll bar to this first error (diminish your browser window if you don’t see the effect).

view tutorial
view demo

Introduction to jQuery Events

jqueryevents 300x150 The best tutorials combining HTML,CSS,PHP and JQueryOne of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event. So I thought I would share with you an introduction to jQuery Events.

view tutorial
view demo

iPhone-like password fields using jQuery

iphone password The best tutorials combining HTML,CSS,PHP and JQueryOf course Nielsen is right when he talks about users making more errors and feeling less confident when they can’t see what they’re typing while filling in forms. That may have been the reason why Apple developed implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text.

view tutorial

Animate Curtains Opening with jQuery

curtain 300x80 The best tutorials combining HTML,CSS,PHP and JQuery

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.

view tutorial
view demo

Create A Tabbed Content Rotator Using jQuery

Picture 1 300x197 The best tutorials combining HTML,CSS,PHP and JQuery

I also have a tutorial on coding up a professional menu in case rotating content with tabs is not your thing. You can view a working demo of this tutorial in case you’re curious and feel free to download the source files for reference.

view tutorial
view demo

Creating a Keyboard with CSS and jQuery

final 300x215 The best tutorials combining HTML,CSS,PHP and JQueryI thought it might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked.

view tutorial
view demo

How to make your own simple and nice Slider with jQuery

jquery slider demo 300x38 The best tutorials combining HTML,CSS,PHP and JQuery

Well, this is not new and can be easily found on jQuery UI but you will have to download jQuery UI and use it as if it is a plugin. But for my case, i wanted to find out and construct an easy and nice slider for myself.

view tutorial
view demo

Learning jQuery: Fading Menu – Replacing Content

fadingmenu 300x59 The best tutorials combining HTML,CSS,PHP and JQuery

The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is. From a design perspective, the syntax for jQuery is:

So now instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.

view tutorial
view demo

jQuery Dropdown Search Panel

jquerysearch 300x37 The best tutorials combining HTML,CSS,PHP and JQueryFor one of my projects recently I was playing about with search boxes and came up with a cool drop down search panel. So I thought I would share with you how I made the panel using some jQuery and CSS sprites.

view tutorial
view demo

How to Load In and Animate Content with jQuery

1 300x146 The best tutorials combining HTML,CSS,PHP and JQuery
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

view tutorial
view demo

jQuery Comment Preview

Picture 2 300x217 The best tutorials combining HTML,CSS,PHP and JQuery

I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I’ll use the exact same CSS and HTML as yesterday.

view tutorial
view demo

Dynamic Drag’n Drop With jQuery And PHP

jquery drag n drop 300x84 The best tutorials combining HTML,CSS,PHP and JQuery

After publishing ScheduledTweets yesterday, I received e-mails asking “how the drag’n drop & saving the new positions to the database was working”.

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

view tutorial
view demo

Creating a polaroid photo viewer with CSS3 and jQuery

polaroid css3 jquery 300x130 The best tutorials combining HTML,CSS,PHP and JQueryItaly. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

view tutorial
view demo

Incoming search terms for the article:

Related Posts

How To Create A Basic Social Sharing Button

eBag Toolkit

Convert PSD Files to HTML and CSS with PSDSlicing

Twitter Cards PHP 1.1

1 Comment

  1. Andar Sevenfold

    01.01.2010

    hi friend….thanks for the share, i’m gonna try it…

    happy new year :D don’t forget to visit me at IT Skill isn’t enough
    Andar Sevenfold´s last blog ..Green websites, save the environment online ! My ComLuv Profile