Development

Adding a Gradient Hover Effect to Buttons with CSS

In this tutorial, we will learn how to create a gradient hover effect for a button using the CSS transition property. The transition property allows us to smoothly animate changes to CSS properties over a specified duration. In this case, we will use the transition property to animate the background color of the button when the user hovers over it. This effect can add visual interest to your buttons and make your website more engaging for users.

December 2, 2022 November 22, 2022

1 min Read

Animated Gradient Background with CSS

In this tutorial, we will learn how to create an animated gradient background with CSS using the @keyframes rule. The @keyframes rule allows us to create animations by defining a set of keyframes, or starting and ending states, for an animation. In this case, we will use the @keyframes rule to create an animation that gradually transitions between multiple colors to create a beautiful and dynamic gradient background.

December 2, 2022 November 22, 2022

1 min Read

How to Create a Hover Tooltip with JavaScript

In this tutorial, we will learn how to create a hover tooltip with JavaScript using the addEventListener method. The addEventListener method allows us to attach an event listener to an element, which will execute a specified function when the event occurs. In this case, we will use the addEventListener method to attach a mouseover event listener to an element, which will display a tooltip when the user hovers over the element. This can be a useful way to add additional information or context to your website or web application.

December 2, 2022 November 22, 2022

2 min Read

How to Enable/Disable a Form Button with JavaScript

In this tutorial, we will learn how to enable/disable a form button with JavaScript using the keyup event. The keyup event is triggered when the user releases a key on the keyboard. We can use this event to detect when the user has entered some text into a form field and enable/disable the form button accordingly. This can be useful for preventing users from submitting a form until all required fields are filled out.

December 2, 2022 November 22, 2022

2 min Read

Next.js Tutorial for Beginners

Next.js is a popular JavaScript framework that allows developers to create server-rendered React applications easily. In this comprehensive tutorial, we will cover everything you need to know to get started with Next.js and start building your own applications.

March 7, 2023 November 13, 2022

43 min Read

React UI Components: 15 Popular Libraries

React is the leading front-end framework, and continues to dominate the web development landscape. In this article, you'll find more than a dozen of the best React component libraries. The focus is primarily on complete libraries and kits, many of which include a design system. This way, you can choose one and begin working on a large-scale project from day one.

February 26, 2023 November 3, 2022

15 min Read

Next.js Component Libraries - Where Are They?

This article answers one simple question - how come there aren't any (or very few for that matter) explicit component libraries for Next.js? The short answer: React.

November 3, 2022

1 min Read

Tailwind CSS: 15 Component Libraries & UI Kits

Not only is Tailwind CSS one of the fastest rising CSS frameworks, it's been widely accepted as the golden standard in the current web development timeline. And in order to accelerate the pace of building functional websites and apps - it goes a long way to master a specific component library. This article covers the most popular Tailwind CSS component libraries and UI kits.

March 18, 2023 October 25, 2022

15 min Read

JavaScript Chart Libraries: 13 Popular Choices

In this article, we are going to take a look at the most popular libraries for creating charts with JavaScript. We'll also explore examples, consider language support (such as TypeScript), and whether the library has support for popular frameworks, such as React, Vue, and Angular.

October 21, 2022 September 9, 2022

11 min Read

Chrome DevTools: 10 Useful Tips & Tricks

Chrome DevTools is the ultimate swiss army knife for analyzing and understanding what happens on any page from the perspective of a web browser. And while a lot of the in-built features are intuitive and easy to understand, there are plenty of hidden gems that can further improve your debugging and optimization experience. As such, this article is focused on various tips and tricks to help you get the most out of Chrome DevTools.

October 21, 2022 July 6, 2022

8 min Read

How to Customize List Style for Each Item with CSS

In CSS, lists are known as either "ul" or "ol" - which are known as unordered lists and ordered lists, respectively. By default, an unordered list will use a "disc" icon next to each item, and ordered lists will use numbers. But, what if you wanted to change their style? In this article, I'm going to show you how to use the list-style and @counter-style properties to customize the appearance of your list items.

October 21, 2022 July 1, 2022

3 min Read

Tailwind CSS: Cheat Sheet (Chrome Extension)

Are you new to Tailwind CSS or maybe you're returning to give it a second try? In any case, having quick access to the Tailwind CSS cheat sheet is a fundamental part of working with the framework. Everyone knows Tailwind CSS has a peculiar syntax. The two most popular cheat sheets are either the official […]

June 29, 2022

1 min Read