How To Build an HD Photo Gallery using Schema Microdata

by Jake Rocheleau
on January 28, 2013

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

There are plenty of benefits for developers who add Microformats or Microdata into their HTML markup. Search engines like Google or Yahoo! often look for this extra metadata when crawling new webpages. You can offer helpful attributes for text and media on the page, along with other information about people, businesses, ideas, projects, practically anything.

In this tutorial I would like to introduce Schema microdata as applied into an HTML5 image gallery. The dynamic content is powered by a small bit of jQuery so we can display thumbnails and the full-scale image as well. The codes here may be copied and ported into various other layouts for displaying lightboxes or streaming video. It’s a fun topic and offers a lot to those interested in learning!

schema microdata html5 photo gallery tutorial preview

Read More

Creating Semantic 2-Column and 3-Column CSS Layouts

by Jake Rocheleau
on December 27, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

Single-Page Ajax Portfolio Update Panel with jQuery

by Jake Rocheleau
on November 28, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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

DeviantArt API Instant Search App using Ajax & PHP

by Jake Rocheleau
on October 28, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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
Page 5 of 25« First...34567...Last »