I have a soft spot for hand-drawn illustrations and flowcharts over computer-generated ones. There’s something inviting about hand-drawn designs that impart a human touch, unlike the sterile, precise lines of computer-made diagrams. While tidy flowcharts with perfectly straight lines look organized, they often lack that personal, hand-drawn vibe that connects with people. That’s one reason … Read more
Excalidraw’s main strength lies in its simplicity. It doesn’t overwhelm you with a load of features or options. It’s easy to pick up and get started with, allowing you to create impressive drawings within just a few minutes. However, it’s easy to be fooled by its simplicity and minimalism into thinking it’s lacking in features. … Read more
Using vector programs like Excalidraw can be a bit of a hassle without keyboard shortcuts. Clicking and dragging the mouse to select and draw things can get tiring after a while. What takes the mouse a few seconds to do can be done instantly with a keyboard shortcut. So, it’s a good idea to learn … Read more
Online vector-based drawing programs like Excalidraw give you an infinite canvas to draw on. While it’s great for freehand doodling, it’s not ideal when it comes to drawing things in proportion to each other. For example, you cannot give an aspect ratio to its canvas, which is kind of a bummer if you are doing … Read more
Do you want to learn how to create an FAQ accordion with VueJS? Frequently Asked Questions (FAQ) accordion is a common feature on many websites. Frameworks like Bootstrap implement FAQ accordion but most of them use jQuery. FAQ accordion is a simple enough task that can be implemented well with vanilla JavaScript but creating it … Read more
In this article, you will learn how to create a Chessboard pattern in pure CSS. We will only use HTML and CSS, even for the Chess pieces. We will show you three different approaches to creating a chessboard. Each method has its pluses and minuses, but they all offer something valuable to learn. If you … Read more
Margin in CSS is the blank space outside of an element that separates it from other elements. Margins are different from padding which creates space within the element. In this comprehensive guide, we cover everything – margin declaration syntax, margin shorthand property, negative margins, collapsing margins, the difference between CSS Margin and Padding, and some … Read more
The CSS padding property is used to create transparent space between the content and borders of an element. Padding is different from the margin, which is used to create transparent space between an element and other elements. Padding is used to make page elements visually appealing and aesthetic. For example, when we create a heading … Read more
In this article, I will show you (step-by-step) how you can create a power button effect in CSS without using any JavaScript. At the end of the article, I have also included a Codepen so that you can see my full code in action. I strongly suggest you follow along with this tutorial. Click here … Read more
In this article, I will explain (step by step) how you can make the radar scanner animation in CSS without using any JavaScript. At the end of this tutorial, I have also added a Codepen block with complete code so that you can play around with it. I strongly suggest you open a new Codepen … Read more