SuperLibrary

Come for the courses, stay for the creative insights and helpful advice. Our ever-expanding collection of articles and tutorials will help you make, build, learn and grow your career.

Working

Code

Design

Project Management

All

Code

AdviceArticleInterviewTutorialAll types

Ask a Designer #12: Shall I Change My Career Path to Save My Creativity?

Nika offers advice to a creatively-deprived developer pondering a career change to product design.

How to Build a Greener Web

What does it mean to build a sustainable website? Nika spotlights two founders who are taking an eco approach.

Ask a Designer #8: How do I Keep Up With Changing Software and Jargon?

Nika writes about how to keep up with the fast-changing tools in design.

How to Add a Dynamic Social Share Image to a Shopify Theme

Learn how to add social share images to Shopify themes!

Ready to Learn to Code? How to Get Started, Get Unstuck and Stay Motivated

Plus, learn what the five common mistakes people make when learning to code are.

A Quickstart Guide to Programming Languages and How to Choose the Right One

Digital projects depend heavily on the correct choice of coding language, so learn to pick the right ones.

Calling All Creatives: Why You Should (And Shouldn't) Learn to Code

There's a secret in the tech industry. Even though the internet has become more complex and noisy, learning to code is a lot easier than you think.

Ask a Coder #1: How Do I Do Well in a Coding Test?

SuperHi's CEO Rik Lomas dishes on how to do well in a coding interview.

How Coding Became My Self Care

Maybe it's not about balance: maybe self care is about whatever you need to keep going, to keep doing, to say all the things you want to say.

Intermediate

27:37

How to Make a 3d Waving Flag Using Three.js, WebGL and Javascript

In this tutorial, we add a moving 3d flag, as seen on Yuta Takahashi's website, using the Javascript library, Three.js, to our website.

Beginner

22:40

How to Let Users Change the Color Scheme of Your Website

In this tutorial, we'll let our users change the background color of our portfolio website using HTML, CSS + JS as seen on the SVA Masters of Branding website

Ask a Project Manager #1: What Should Developers Know About Project Management?

Rachel walks us through how developers need to know about project management to run healthier, happier projects.

Beginner

17:48

How to Make an AR Fashion Filter for Instagram

In this tutorial, we'll talk about how to work with Spark AR, Facebook's tool for making a fashion-style filter mask for Instagram and Facebook camera. No code needed!

Intermediate

31:46

Mouse Move Glitch Collage Using HTML Canvas

As seen on the Azab site (or when you win at Solitaire), it's fairly straight forward to create a glitch-style collage that draws the image again and again whenever your user moves their mouse. In this video, we build up how to make a site that has a HTML canvas slideshow that reveals each image on click and has a tweening movement.

Beginner

05:07

How to Turn Any Web Page into an App with Nativefier

Sometimes it'd be nice to have an app instead of a browser tab for a web service, but that site may not have a native Mac or Windows app. Using Nativefier command line tool, we can make our own app in just a few minutes!

Beginner

02:58

Parallax Overlapping Sections Using Sticky Positioning

On the Friends With Benefits site, there's a great effect where each section sticks to the top of the page and other sections overlap it in a parallax style. In this tutorial, we talk about how it was achieved.

Intermediate

17:39

Smooth Movements with Javascript

When we're working with CSS and Javascript, sometimes we want to be able to add smooth movements that feel more natural. In this tutorial, we talk about how to rethink your Javascript code to create a weighted speed so any moving object feels a lot more natural and real

Intermediate

18:34

How to Make an Interactive Rotating 3d Cube with CSS and Javascript

In the ideology.press site, there's a floating 3d book that rotates and follows your mouse around the page. Using six flat images, we talk about how to turn those images into a digital interactive cube.

Beginner

11:06

How to Make a Cut out Design Effect with CSS Blend Modes

On the Ways Of Knowing Cities site, there's a clever cut out style effect where the background shows through text. We talk how about to make your own similar effect, firstly using a normal design program, then by using CSS's screen blend mode.

Beginner

14:50

How to Make an Album Art Generator

Kanye's new album Ye was announced recently alongside a site that let you to make your own version of the album cover. In the past, my friend Simon and I made two unofficial album art generators that received several million views and mainstream press coverage. They took us 30 minutes to make each. I'll show you how we made The Life of Pablol, If You're Typing This It's Too Late and how to make your own Yenerator.

Intermediate

17:05

How to Make Reactive Type as Seen on the Airbnb Cereal Site

On the new showcase for Airbnb's new typeface, Cereal, there's a great way that they show off the different sizes and weights of the face by making individual letters respond to mouse movements. We talk about how to achieve this effect (and more) using a few lines of Javascript and a little math.

Intermediate

25:39

How I Got 181,000 Followers on Twitter with 35 Lines of Ruby Code

In this tutorial, I talk about how to build a Twitter bot, based on the @newsycombinator bot, that scrapes content from the web and posts on Twitter hourly. We write a Ruby script which we get on to hosting service Heroku and set up to run automatically once an hour.

Beginner

15:24

How to Make a Split Screen Site with Sticky Sides

On the Bao London site, there's a lovely design effect of the screen split in two as you scroll with one side staying in place. Today, we build a whole site from scratch using a similar technique.

Beginner

20:55

Making a Clickable Digital Collage with Javascript

One popular digital design technique at the moment is the ability to click on a site to add a new image – in this tutorial we talk about how to let users click to reveal a new image wherever the mouse is

Beginner

08:24

Sticky Overlays With CSS Positioning

On the beautiful concreterep.com site, there's lots of clever design techniques that they use through the site. We take apart two: a floating logo and captions that sticky to photo overlays. Both effects use CSS only and are both positioning tricks.

Beginner

14:51

Simple Animated Page Transitions with jQuery and Javascript

One of the most requested tutorials we've had is about page transitions. There's plenty of Javascript libraries that do them but how can you roll your own? We show you!

Intermediate

12:44

How to Make a Clock with Javascript

In this tutorial, we talk about how to work Javascript's date and time features to make the hands of an analog clock.

Intermediate

14:30

How to Draw and Animate an SVG Wave Using Javascript

In this tutorial, we talk about how to make your own SVG images from scratch using HTML and CSS and then use Javascript to animate the contents of your image

Beginner

08:19

Pixelated Image Lazy Loading Effect as Seen on Teenage Engineering

In this tutorial we look at how to build the image lazy loading effect used on the Teenage Engineering site. We'll start with a lo-res pixelated image before replacing it with the full-res version.

Beginner

05:19

Playing and Pausing a Video on Hover

On webpages like the Animade portfolio, they're using an effect where, instead of using an animated GIF, they're using a video that plays when your mouse goes over it, and pauses when your mouse moves away. This play and pause effect is pretty simple to add into any site.

Beginner

07:23

How to Make Rotate Text in CSS

Today, we talk about how to add the graphic design technique of having text around the edges of your page. Using a quick rotation and setting the origin for the rotation, we can place text as we want it quickly and easily.

Jump to page:

12 3