Build a Wonky Grid Portfolio Site

Discover how to make this award-winning ‘wonky’ grid slideshow in an easy, and impressive way.

Taught by

Rik Lomas

In this beginner-friendly tutorial, you’ll learn how The Studio built its award-winning 'wonky' grid slideshow using HTML, CSS, and Javascript. It's a fantastic effect for a modern and sleek portfolio or product site. While it seems like it could be days of work, it's actually more straightforward than you may imagine.

What you’ll learn:

Setting up your HTML + CSS structure
Making a grid layout with fractions
How to use hidden overflow to hide parts of the slideshow
Using Javascript to fade in/out items on click or timer

… and much more.

Links + downloads

demo site

4.4mb

assets.zip

4.3mb

Effect based on The Studio, photos by Daniel Farò, and taken from Death to Stock, the typeface is Supreme

Get access to Build a Wonky Grid Portfolio Site

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Founder + CEO at SuperHi

Rik has taught technical skills to tens of thousands of people worldwide. In this workshop, he'll teach you a fantastic ‘wonky’ effect

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

Email Discord