Category: Tutorials

Don’t listen to those productivity gurus: why waking up at 6am won’t make you successful

If you want to be successful, many experts and life-hackers say you should wake up at 6 am, take a cold shower, exercise, meditate, journal and brainstorm, review and set goals, read news and industry sites, consume inspiring content, eat a protein-rich breakfast Whew. That’s a lot to accomplish before 8 am. I’m ...

Animated Fragment Slideshow

Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily. This will be the final resu...

CSS Glitch Effect

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was ...

Designing A Realistic Chronograph Watch In Sketch

    If you’re into wristwatches, like me, and are also a fan of the Sketch app (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustra...

An Introduction To Gravit Designer: Designing A Weather App (Part 2)

    Welcome back to the second part of this tutorial on Gravit Designer. In the first part we took a general look at Gravit and set everything up, created the background image in the weather app and the status bar, and then started t...

An Introduction To Gravit Designer: Designing A Weather App (Part 1)

    Being a designer at the moment is great because a wealth of modern design applications are available that let you easily bring your ideas to the screen: Sketch, Affinity Designer, Adobe XD (beta) and Figma, to name just a few (no...

Enhancing CSS Layout: From Floats To Flexbox To Grid

    Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive e...

Hackr.io Compiles Tons of Learning Material for Common Programming Languages

Learners Rejoice. Hackr.io unites 113 different topic areas on its landing page. Among them, you’ll find every more or less common programming language, as well as database technologies, and cloud services. For each of these subjects, the Hackr.io community collects the best learning material the worldwide web ha...

Getting Started With The JavaScript Web Animation API

Adding animations to web interfaces makes pages and apps feel more responsive and interactive. A side menu that smoothly slides out of view provides a much better user experience then a menu that just disappears when you close it. So far creating web animations was done either via CSS transitions, CSS keyframes, or an...

Handle Mouse And Touch Input With The Pointer Events API

With more and more people using their mobile phones and tablets for web browsing, we as developers have to make sure that our web interfaces are fully accessible via touch. Setting up click and hover event listeners sort of works, but it is clearly a leftover solution from the mouse era. Thankfully, there is a new API...