A hamburger menu is a classic UX feature present in countless websites. It works by showing and hiding a menu on click. It's especially popular in mobile design. In this tutorial, we'll create a hamburger menu in pure html, css and js.

( 24/02/2021 => full rewrite.)

Step 1: Adding a basic HTML

First, let's create a button with a class of ham and...

Easy hamburger menu with JS

The Intersection Observer (IO) detects when an element enters or leaves the viewport (or a parent element). It can be used to easily add animation on scroll without external libraries.

IO is asynchronous and much more performant than scroll listeners 👍.

Btw, if you learn better through videos, I highly suggest this youtube tutorial by Kewin Powe...

Introduction to scroll animations with Intersection Observer

The typing effect is a simple yet stylish animation used by many bloggers and web developers to introduce themselves in an elegant fashion.

This tutorial will show you how to create the typing effect with plain css and js (no libraries).

Let's start by creating a text holder p with a class of typeText.

We add a blinking cursor after our paragrap...

Simple typing effect with JS and CSS - Beginners

Scroll to top button is a very common UX feature in websites. It's goal is to prevent annoyance of users forced to scroll back up - especially on mobile devices. In this short tutorial, we'll see how to implement one with css and pure (vanilla) javascript.

The simplest way to get a scroll to top button is to have an html element at the top and a l...

Scroll to Top button for Beginners

So you want to animate with CSS? Great, let's get started 😄!

Most properties can be animated: width, color, opacity, transform, etc. In this tutorial, we are going to focus on transform.

With CSS transform we can rotate, scale, skew, or translate an html element.

Try hovering ( or clicking if you are on mobile) on the ninja images:

No animatio...

Introduction to CSS Animations

I put together this short tutorial on how to make a hamburger menu with no js in response to the feedback on my original Twitter post.

The trick is to use the CSS pseudo-class :target. I'm not the one who came up with that technique - saw it on stackOverflow or elsewhere.

Anyway, enjoy 😁!

:target

Have you heard of the CSS pseudo-class on :targ...

Hamburger menu with no JS - Beginners

Handling files is a pro feature in Codepen. Free users can't add local files like images to use them in the editor.

In this quick 3 steps tutorial, we'll learn to host an image on Github Pages and use it in Codepen.

Step 1: Upload an image to a new repository.

Click on the + button (top right) then New repository

Add a repository name (I've cal...

#hack

Hamburger menu with no JS - Beginners

A quick hack to use local images in Codepen