Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Tutorials’ Category

Modern websites are using so many effects that it can be tough keeping up with everything. The initial process of learning how to code CSS3 and jQuery is often confusing but fun. As you delve into more advanced topics you’ll bump into much bigger puzzle pieces to solve.

This gallery focuses on some amazing tutorials which demonstrate how to code advanced website interface features. Topics range from tabbed widgets to SVG animations and many other ideas in-between. Take a peek at these articles and see if anything catches your attention. With a bit of practice and volition you can learn how to build other exciting user interface effects.

Tilted Content Slideshow

tilted content slideshow tutorial

Read the rest of this entry »

Anyone who is familiar using WordPress should know it’s one of the most popular CMS engines to date. Learning the basics of theme development can be exciting and even quite fun. But with time even the brightest developers can hit a wall trying to learn everything. WordPress is a tremendous library and requires a lot of time to master.

Once you understand the the basics of WP development everything gets a whole lot more interesting. You can start to build very complex plugins, functions, interface features, and customizations for the backend admin panel. Check out these great tutorials which focus on more advanced WordPress topics for web developers.

Better WP APIs and Libraries

writing wordpress apis and libraries

Read the rest of this entry »

Have you ever wanted to jump into the backend world of PHP programming? Frontend web development uses a whole different set of skills to construct a website layout. But PHP tackles everything from form submissions to database queries. WordPress, Joomla!, Drupal, and many other CMS engines are built on PHP.

To get started all you need is some time and a bit of patience. WAMP and MAMP are free PHP-enabled local servers for Windows and Mac, respectively. Once you get this local environment setup it’s quite easy to dive right into PHP and start building fun dynamic web applications.

Read the rest of this entry »

If you have any practice with backend languages then you should know something about Rails. It’s often regarded as a cleaner language compared to PHP and is often faster to build working applications from scratch. Even if you have no experience doing backend work, this set of tutorials will provide a quick and easy starting point in the world of RoR.

Introduction to RoR

introduction slideshare presentation ruby on rails history

Read the rest of this entry »

It seems as though 3D is quickly becoming the new 2D in digital design. This pattern has moved from the big screen onto smaller screens for the web. With a growing number of CSS/JS libraries for animation it has become easier to render objects right within the browser.

These tutorials should provide an excellent introduction to CSS3 and JavaScript oriented animation. If you’ve never coded your own custom page animations then this will take a bit of practice. But with time the whole process will become like second nature.

Read the rest of this entry »

Remember when the original NES was released decades ago? I know the older readers can remember those days fondly. Graphics and coding techniques have improved dramatically over the past few decades. It’s remarkable how we can now build in-browser games without reliance on 3rd party companies. If you know anything about JavaScript and wish to delve further into game development, these tuts were made for you.

I’ve collected everything from getting started to more advanced JS libraries and general tips/tricks for browser game development. This post has something for everyone and it’s never been easier to get your toes wet in the proverbial pool of Internet gaming.

Read the rest of this entry »

Almost everyone can recognize good photography when we see it. But knowing which angles to shoot and how to capture light times practice. Anyone who loves photography can learn with a bit of effort. But where do you get started?

This gallery includes some very helpful articles and tutorials on digital photography. You’ll learn how to shoot and how to import your digital photographs. All you need is a few of these tutorials for guidance and some time for immersing your creative aspirations.

Read the rest of this entry »

Vector design is such a different concept in relation to bitmap graphics. Adobe Illustrator is often regarded as the premiere vector software for learning how to create icons, illustrations, and other flexible graphics. But getting started can be a real struggle when you’re a beginner.

Take a look over some of these tutorials and see if anything looks interesting. Many of these articles include free .ai files that you can download and play with. It’s a great way to get started illustrating scalable vectors when you don’t have much prior experience in the field.

Getting Started in Illustrator

getting started adobe illustrator tutorial

Read the rest of this entry »

Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.

In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.

It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).

For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result:


Let’s get started:

Step 1 -> Get the custom jQuery UI package

jQuery UI Custom Download

jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.

As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions.
Read the rest of this entry »

The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

Here is how the end result will look like:

Realtime Vistor Tracker using Pusher

Realitme Visitor Tracker Demo

For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

Here's the order in which we'll cover things:

  1. Get the basics out of the way
  2. Connect to Pusher
  3. Subscribe to new visitor page hits notifications
  4. Get the visitor's location using the HTML5 Geolocation API
  5. Broadcast the visitor location and page to all application visitors using Pusher
  6. Display the visitor location and page information on a Google map

Read the rest of this entry »

Uptime Robot