crayoncode articles - 24 total
Cycling Challenge Dashboard with HTML & CSS
In this video you'll see how to build a cycling challenge dashboard in HTML & CSS. In detail...
Building a vertical calendar with HTML, CSS & JS
Today let's build together a small vertical calendar using CSS grid layout, the tag and a little bit...
How to build 5 clip-path hover effects
Today let's build 5 awesome hover effects with CSS clip-path! Read the full article or watch me code...
Let's build a responsive navbar from scratch
Today let's build a responsive navbar, an animated burger icon and a beautiful uncovering effect from...
Let's build a layout from scratch
Today let's build the layout for an entire website from scratch using HTML, CSS, flexbox, grid layout...
3 Ways to create a Navbar (CSS Grid Layout)
Today let's build three different navbar layouts using the CSS grid layout and I'll show you, how eas...
Shiny Glass Hover Effect (Glassmorphism)
Today let's work with the backdrop-filter property and a skewed ::before element, to create a nice sh...
How to use CSS pseudo-classes for styling typographic elements
Today let's work with CSS pseudo-selectors like :first-letter, :last-of-type & :after to build ni...
![CSS Day Night Switch (CSS/HTML only) [PART 2]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcyp1y98d6w4xg5091fg7.png)
CSS Day Night Switch (CSS/HTML only) [PART 2]
Now let's get this finished by implementing the night state of our nice day-night-switch by implement...
![CSS Day Night Switch (CSS/HTML only) [PART 1]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fygh1xwpt5kcvaapxyv7i.png)
CSS Day Night Switch (CSS/HTML only) [PART 1]
Today let's build a nice little day night switch with sunset and sunrise and a lot of CSS transitions...
CSS Download Loading Animation (@keyframes, clip-path)
Today let's work with CSS animations & clip-path to create a nice little download animation with...
CSS Grid Layout Template Areas (Secrets of Painless Layout)
Today let's start getting to know CSS grid layout and bring some ease to handling grid positions thro...
Customizable traffic light with CSS (SASS @each/@for)
Today let's save a lot of typing by using SASS' @each and @for in combination with lists and maps in...
How to implement a generator function in JS (iteration protocols)
Quickly get a grasp on how to build a generator function in JS and how to use the yield keyword. Re...
CSS Loading Animation - Morphing Icons Effect (clip-path, @keyframes)
Today let's get creative by building a morphing loading animation with icons having only 8 points and...
CSS Loading Animation - Ripple Effect in Mosaic (keyframes, flex box)
Today let's work with CSS animations, delays and flex box in order to create a nice little ripple eff...
CSS morphable clip-path Ribbons
Today let's create some truly awesome ribbons by using the CSS clip-path property for exciting shapes...
![How to for..of with your own objects in JS (iterable & iterator protocol) [LET'S CODE]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fomtcpo6rysfyxtyioopr.png)
How to for..of with your own objects in JS (iterable & iterator protocol) [LET'S CODE]
Generally and theoretically an iterator is an object that produces a sequence of values. Practically,...
Managing pointers in a doubly linked list in a nutshell
How to code a doubly linked list Implementing a doubly linked list is all about consistent...
Let's code a fluent API (in a nutshell)
A fluent API (or fluent interface) allows you to chain methods one after another, optimally producing...
Let's code a Queue as a linked list (in a nutshell)
The shift() method of the Array type in JavaScript is quite an expensive operation, because by removi...
The Queue data structure in a nutshell
Let's take a look at the Queue data structure and see how it works, what FIFO means, and how you can...
Iterative nested object traversal
Recently I had this problem where I needed to traverse deeply nested objects. More specifically it wa...
Flood Fill algorithm: A graphical step-by-step explanation of the paint bucket
Finally (🎉🎆) I was able to put the idea of illustrating bits of my knowledge and create Youtube video...