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.
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.
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.
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.
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.
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.
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.
In part 4 of 5 of our series, we talk about how to get your Rails code from just being on your computer to being hosted by Heroku where everyone in the world can view your work. We talk about how to use Git to deploy our code and making your code's configuration safe with secrets.
In this 5-part series, we talk about how to make an image bookmarking web application using Ruby on Rails, Sass, Git, Amazon S3 and Heroku. If you've ever wanted to make your own custom web software, this is the series for you.