Tutorials

Creating Semantic 2-Column and 3-Column CSS Layouts

Website layouts are not the most difficult part of coding a typical design. But unfortunately there are still not many standards set in stone for creating multiple column-based layouts. These are often put together through various CSS methods, but the most supported designs are using fluid width containers.

In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. Most common websites will utilize 2 or 3 columns at most, so that is what we’ll be focusing on. Along with these ideas you should feel comfortable trying out other CSS codes. There are new standards being written so frequently it can be difficult to gauge the best possible solution.

Read more
Tutorials

Single-Page Ajax Portfolio Update Panel with jQuery

Building your own custom portfolio website can be tough. Freelancers are often stuck looking for work and trying to land projects without prior experience to showcase. But if you can put together even a simple gallery of practice works, your potential clients will be a lot more impressed.

In this tutorial I want to explain how we can build a simple portfolio update panel using jQuery. For this demonstration I am using some beautiful illustrations from Nidhi Chanani. You will notice the webpage itself is very bare aside from the effect. This will make it easier to embed a similar page widget into any portfolio layout.

Preview screenshot portfolio jQuery live update panel graphics artwork

Read more
Tutorials

DeviantArt API Instant Search App using Ajax & PHP

The digital art community for DeviantArt is very popular and full of talented artists. Creative designers can publish any of their works to DA and share them to gather feedback and comments from other members. I love the community and have always been interested in digital artwork for online forums – avatars and signature banners.

So in this tutorial I want to explain how we can build a DeviantArt Instant Search app which searches through all the most popular banner signatures ever submitted to the website. You can enter some search terms and the app will pull results to display after you finish typing. This is a really cool application for designers who are looking for inspiration, or even for people who love DeviantArt and want a better way to search.

Preview screenshot DeviantArt Instant Search webapp forum signatures

Read more
Tutorials

28 Beginner’s Tutorials for Learning about MySQL Databases

Developing and programming with databases is a huge step onto a large plateau of information. Nobody starts out with MySQL and masters the software in a week. Not only do you need to learn setting up DBs and tables, but also the SQL language itself.

This rough road was very difficult to traverse maybe 5 or 10 years ago. But there is much more information online today which is generally very helpful. Thus I have scoured through Google and put together 28 of my personal favorite MySQL tutorials for newbies. You can learn all the basics of setting up a database and connecting into your own application. But additionally if you have any questions or comments on the gallery, feel free to share with us in the discussion below.

Pagination SQL Server vs MySQL

Read more
Tutorials

Code a Mobile-Friendly HTML5 Video Stream with Multiple Sources

New media on the Internet has gone through a rigorous process of quality control and best practices for web developers. Back just a few years ago Flash video was the most prominent solution. But with HTML5 support in all modern browsers the solution to embedding audio/video media has become a lot less complicated.

In this tutorial I want to explore how we can build a very simple webpage for embedding mobile-responsive HTML5 video. I have included two versions of the page – one with standard HTML5 video and the other using Video.js. The HTML is almost identical which shows how much progress HTML video has made in a few short years. But you can check out a demo of both pages from the links I’ve included below.

Preview Screen HTML5 Video Stream MP4/WebM

Read more
Tutorials

Dynamic TinyURL Links Generator using jQuery

There are so many web applications available for shortening URLs to share online. TinyURL is one of the originals and has been around longer than I can even remember. Their service is always online and it works perfectly for translating into tweets or posts on Facebook.

In this tutorial I want to build a mini-app which will generate tiny URLs right from your web browser. You could install this script on any domain and you’ll be able to generate dynamic links using Ajax without even refreshing the page! Their service doesn’t have a detailed API but it’s enough that we can pass a full URL and get the tiny version back as a result. And that’s just enough functionality for this app to hold some value when hosted on a 3rd party website.

TinyURL Links Generator with Ajax - preview

Read more