Learn how to create advanced layouts and sort and filter items in a webpage using Isotope.js in this video tutorial.
- [Instructor] To make it easy to follow along I've created exercise files for this course. You can download those files directly from the course page and place them anywhere on a computer. Here we can see they are on my desktop. For chapters two, three, and four, you can also follow along in the learn to code environment, directly on the site. The exercise files are provided in individual folders for each movie. So here you can see they are named based on the chapter, and then the movie. So chapter two, movie number one, is 02_01, and so on. You'll also notice that for the end of each chapter I have two folders.
One, 02_08, and one 02_08_finished. That's because when you start with the 02_08 files, you'll have beginning points of movie 02_08 and I also provide the end results in the finished folders, so you can see exactly what happened at the end of that chapter. For the three first chapters, so 02, 03, and 04, you use the exercise files by simply opening the folder, and editing the files inside the exercise files themselves. Each of these folders contains a fully functioning webpage, with all the functionality you need, and you can open it directly in any browser, and it just works.
Chapter five is a little bit different. In this chapter we'll focus on how to use Isotope in content management systems, and the example is a wordpress theme. So in each of these folders, you'll find a completed version of a wordpress theme, so all these folders are actually exactly the same. Inside each of the folders, you'll find another folder called isotopeinwp, and as I'll explain later on in the course, to get this to work you just have to add this folder to the themes folder inside your wordpress install, and you can follow along from there.
The reason I'm providing the same files in each of these folders, is simply that you can choose to slot in at any time in the course, maybe 05_04 will be your first entry point, and from here you'll still have the correct files to work with. So for chapters 2, 3, and 4, just work in the folders to get from the exercise files, and from 05_01 and onwards, simply download the exercise file, place the theme folder inside the theme folders of your wordpress install, and leave it alone for the rest of the chapter.
- What is Isotope.js?
- Installing Isotope and jQuery
- Configuring layout modes
- Setting parameters
- Making layouts responsive
- Filtering and sorting
- Creating URL hashes
- Filtering and sorting with hashes
- Filtering and sorting in WordPress