Advertisement
Complete Websites

Build a Filterable Portfolio Using jQuery Isotope: Premium

by

We have a new Premium tutorial for you today, during which we'll be building an adaptive portfolio page to show off your work. We'll harness the power of the jQuery Isotope plugin in order to make the portfolio items filterable - plenty to get stuck into!


Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

You'll Learn How to:

  • Use CSS properties to convert a PSD into a working layout in the browser
  • Handle adaptive media queries
  • Use isotope.js to filter elements on the fly

..and a whole load more besides..


Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can't afford to provide the service for free, it's only $19 a month - less than you'd spend on dinner.

We hope you'll consider checking it out! In addition to learning a huge variety of new skills, it's also a fantastic way to say thank you to Webdesigntuts+.

Related Posts
  • Web Design
    HTML/CSS
    Build a Responsive, Single Page Portfolio with Sass and Compass - New on PremiumDribbble preview
    There's a lot that goes into creating a web site these days. We're now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this Premium tutorial, we'll build a single page portfolio that covers aspects of all these techniques.Read More…
  • Web Design
    HTML/CSS
    Responsive Navigation: Toggle Patterns - New on PremiumNav patterns preview
    Welcome to the third in a Premium series which looks at responsive navigation patterns. This tutorial will walk you through three patterns where navigation is toggled on and off to conserve space at the top of the page. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation: Footer Patterns – New on PremiumPreview
    Welcome to the second in a Premium series which looks at responsive navigation patterns. This article will walk you through four patterns where navigation moves to the footer, conserving space at the top of the page. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…
  • Web Design
    HTML/CSS
    Examining Responsive Navigation Patterns - New on PremiumPreview
    As web designers create more and more responsive sites, patterns continually emerge for how we handle global navigation. This is the first in a series of posts focused on how to develop some of those patterns. It's time to stop copying and pasting - check out today's Premium tutorial and start understanding!Read More…
  • Web Design
    HTML/CSS
    Hi-Performance Web Design with Data URIs – New on PremiumPreview
    In today's Premium tutorial, we're going to be taking some of the theory covered in our Data URI introductory article, building upon some of the examples used to develop a fully realized user interface. Just to keep things interesting, we'll also be making our design responsive and we'll be using the Dribbble API and jQuery to pull in some images from the Envato Dribbble feed.Read More…
  • Web Design
    Complete Websites
    Going Off Canvas with Zurb Foundation 3.0: New on PremiumOffcanvas preview
    We have a new Premium tutorial for you! Today we're going to be diving head first into the newest RWD pattern on the block, off-canvas layouts — a very clever approach from the team at Zurb.Read More…