Blogs

I've been writing online since 2021, mostly about web development and tech careers. In total, I've written 68 articles till now.

All Posts (68)

CSS Icon: Google Photos

Sep 18, 20221 min read

CSS Icon: Google Photos

I will create the Google Photos icon in this article using HTML & CSS. Let's look at how we do that.

Detect When Users Switch Tabs using JavaScript

September 07, 20222 min read

Detect When Users Switch Tabs using JavaScript

In this article, I'll show you how to find out when users change tabs in browsers using JavaScript. It's going to be fun, it's helpful to see how often the user loses his attention. You can even use it to add the data to the database

CSS Battle: #15 - Overlap

September 04, 20222 min read

CSS Battle: #15 - Overlap

In this article, I will solve a CSS Challenge called "Overlap" at cssbattle.dev

Chrome Extensions of the Month - August 2022

August 31, 20226 min read

Chrome Extensions of the Month - August 2022

In this article, we are going to look at some of the best extensions of August that you need to install for better productivity. So without further due, let's get into it.

I made all countries' flags using HTML & CSS

August 28, 20227 min read

I made all countries' flags using HTML & CSS

In this article, I have made all (195) countries' flags by just using HTML and CSS. At the end of the article. You will have a special Bonus (you have to reach the end of the article to see it).

CSS Battle: #14 - Web Maker Logo

August 21, 20222 min read

CSS Battle: #14 - Web Maker Logo

In this article, I will solve a Totally Triangle CSS Challenge on CSS Battle.

Windows Commands Cheat Sheet

Aug 17, 202213 min read

Windows Commands Cheat Sheet

This is the Cheat Sheet of Windows Commands. It gives you all the commands and a short description of the command. I've also attached the documentation link for further reading.

CSS Flag: India

Aug 15, 20225 min read

CSS Flag: India

On the occasion of Independence day of India, I am starting a new series called CSS Flag. This is the first post where I'll create an Indian Flag using CSS.

CSS Icon: Google Pay

Aug 12, 20223 min read

CSS Icon: Google Pay

I will create the Google Pay icon in this article using CSS only. Let's look at how we do that.

CSS Battle: #13 - Totally Triangle

Aug 09, 20222 min read

CSS Battle: #13 - Totally Triangle

In this article, I will solve a Totally Triangle CSS Challenge on CSS Battle.

CSS Battle: #12 - Wiggly Moustache

Aug 04, 20222 min read

CSS Battle: #12 - Wiggly Moustache

In this article, I will solve a Wiggly Moustache CSS Challenge on CSS Battle.

CSS Battle: #11 - Eye of Sauron

Aug 01, 20222 min read

CSS Battle: #11 - Eye of Sauron

In this article, I will solve a Eye of Sauron CSS Challenge on CSS Battle.

Chrome Extensions of the Month - July 2022

July 31, 20225 min read

Chrome Extensions of the Month - July 2022

In this article, we are going to look at some of the best extensions of July that you need to install for better productivity. So without further due, let's get into it.

CSS Battle: #10 - Cloaked Spirits

July 27, 20222 min read

CSS Battle: #10 - Cloaked Spirits

In this article, I will solve a `Cloaked Spirits` CSS Challenge on CSS Battle.

CSS Battle: #9 - Tesseract

July 23, 20222 min read

CSS Battle: #9 - Tesseract

In this article, I will solve a `Tesseract` CSS Challenge on CSS Battle.

CSS Battle: #8 - Forking Crazy

July 21, 20222 min read

CSS Battle: #8 - Forking Crazy

In this article, I will solve a `Forking Crazy` CSS Challenge on CSS Battle.

CSS Battle: #7 - Leafy Trail

July 20, 20222 min read

CSS Battle: #7 - Leafy Trail

In this article, I will solve a `Leafy Trail` CSS Challenge on CSS Battle.

CSS Icon: Android

July 18, 20222 min read

CSS Icon: Android

In this article, I will create a Android icon by using CSS only. Let's look at how we do that.

CSS Battle: #6 - Missing Slice

July 10, 20223 min read

CSS Battle: #6 - Missing Slice

In this article, I have solved an Missing Slice CSS Challenge on CSS Battle. It contains two ways by which you can solve this challenge.

IP Address & Classes

July 06, 20227 min read

IP Address & Classes

In this article, I have solved an `Acid Rain` CSS Challenge on CSS Battle. It contains two ways by which you can solve this challenge.

CSS Battle: #5 - Acid Rain

July 03, 20223 min read

CSS Battle: #5 - Acid Rain

In this article, I have solved an `Acid Rain` CSS Challenge on CSS Battle. It contains two ways by which you can solve this challenge.

Chrome Extensions of the Month - June

June 30, 20224 min read

Chrome Extensions of the Month - June

In this article, we are going to look at some of the best extensions of June that you need to install for better productivity. So without further due, let's get into it.

CSS Battle: #4 - Ups n Downs

June 28, 20222 min read

CSS Battle: #4 - Ups n Downs

In this article, I will solve a `Ups n Downs` CSS Challenge on CSS Battle.

CSS Battle: #3 - Push Button

June 27, 20222 min read

CSS Battle: #3 - Push Button

In this article, I will solve a `Push Button` CSS Challenge on CSS Battle.

CSS Icon: Microsoft

June 26, 20222 min read

CSS Icon: Microsoft

In this article, I will create a Microsoft icon by using CSS only.

CSS Battle: #2 - Carrom

June 26, 20221 min read

CSS Battle: #2 - Carrom

In this article, I will solve a `Carrom` CSS Challenge on CSS Battle.

CSS Battle: #1 - Simply Square

June 25, 20222 min read

CSS Battle: #1 - Simply Square

In this article, I will solve a `Simply Square` CSS Challenge on CSS Battle.

Preview File before uploading in React

June 04, 20227 min read

Preview File before uploading in React

This article will explain how you can build a file previewer in React that works for images and videos. With this article's help, you can create your own and make support for other files.

Active Navbar with Next.js Routes

May 26, 20224 min read

Active Navbar with Next.js Routes

This is the walkthrough of how you can make an active navigation bar by using Next.js router and it'll highlight the current page user visiting in the navbar.

Truncate String with CSS

May 19, 20222 min read

Truncate String with CSS

In this article, I am going to cover how you can create truncate strings or paragraphs by just using CSS.

How to add RSS feed in Next.js Blog

May 16, 20229 min read

How to add RSS feed in Next.js Blog

In this article, I will explain how you can create an RSS feed for your Next.js application in XML and JSON format.

How to use Spotify API with Next.js

May 12, 20227 min read

How to use Spotify API with Next.js

In this article, I am going to explain how you can use the Spotify API to fetch the data of your account using Next.js API routes.

Paths and Comments in Bash

May 09, 20223 min read

Paths and Comments in Bash

In this article, I've discussed about the Absolute and Relative paths and how you can use them and also how you can write the Single and Multiline comments in the bash script.

Chrome Extensions of the Month - April

Apr 26, 20223 min read

Chrome Extensions of the Month - April

In this article, we are going to look at some of the best extensions that you need to install for better productivity. So without further due, let's get into it.

Create Bash Script & File Permissions

Apr 22, 20224 min read

Create Bash Script & File Permissions

In this article, I have talked about how you can create a bash script and what are the permission for the files, and how you can manipulate those permissions.

Getting Started with Bash

Apr 13, 20224 min read

Getting Started with Bash

In this article we are going to learn about what is bash and how we are going to install in windows?

Scroll to the top with JS

Mar 09, 20224 min read

Scroll to the top with JS

You may have seen various types of website in that there is a button that takes you to the top of the page. Have you ever wondered how it actually works? Well, it's not rocket science or something it's very easy to do and after reading this article I am sure your website will have that button too. So without further due, let's get into it.

Google Docs with Next.js

Feb 20, 20227 min read

Google Docs with Next.js

In this article, we are going to build a notification panel style with CSS and will toggle the button with JS. It's very simple to do.

JavaScript Cheat Sheet that you should bookmark

Feb 01, 202248 min read

JavaScript Cheat Sheet that you should bookmark

This is the Cheat Sheet of JavaScript. It contains explanations, code examples, basic and important operators, functions, principles, methods, and many more. It provides a good overview of the language.

Notification Panel

Jan 23, 20222 min read

Notification Panel

In this article, we are going to build a notification panel style with CSS and will toggle the button with JS. It's very simple to do.

6 ways to center a div

Jan 20, 20223 min read

6 ways to center a div

This article show how you can make Center a child div vertically and horizontally respect to it's parent. There are many ways to do it. These ways are the best to use.

Image Slider with Vanila JS

Dec 31, 20219 min read

Image Slider with Vanila JS

In this article, we are going to make an Image Slider also known as carousel with a clean UI. It can slide the images with awesome animation and it will track the current image which you can see via dots on the bottom. First, Let's see what are we building.

Colorful Rain with JS

Dec 15, 20212 min read

Colorful Rain with JS

In this article, we are going to build a container that generates rain by using JS. And it is a colorful rain with random colors. You can play with colors however you want.

Why I ditched chrome for Edge?

Dec 12, 20218 min read

Why I ditched chrome for Edge?

I've been using google chrome for a long time I love the extensions and the look and feel of chrome but then I realized that all these extensions now work on the new Microsoft edge plus edge got a bunch of additional features. That I always wish chrome had let's take a look at why edge may be the better choice.

Creative Hover Menu with CSS

Dec 11, 20213 min read

Creative Hover Menu with CSS

In this article, we are going to make the navigation menu, but it will be in the verticle form, I'll recommend you to use this as the full page menu.first-letter

Typing Effect with typed.js

Dec 09, 20212 min read

Typing Effect with typed.js

This article show how you can make typing effect using Typed.js, In this you can pass array as argument and it will iterate over that and will show you the result in the typing form.

Countdown Loading with JS

Dec 07, 20212 min read

Countdown Loading with JS

In this article, we are building a countdown with the help of Javascript and CSS. It can also be used as the loading countdown.

How to use Battery Status API?

Dec 06, 20214 min read

How to use Battery Status API?

In this article, we are gonna build a Battery Informer which will display the battery status and the other information along with it such as the charging status, charging level and the discharging time.

Typing Effect by using CSS

Dec 03, 20212 min read

Typing Effect by using CSS

As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do and you can do it with just CSS only, not without using JS.

Clean Loading Animation

Dec 02, 20211 min read

Clean Loading Animation

In this article, we are going to build another loading animation with pure CSS.

Curved Timeline in CSS

Nov 28, 20213 min read

Curved Timeline in CSS

In this article, we are gonna build a curved timeline for your website which you can use later on in your portfolio to display your work history or maybe something else you want.

How to use Web Storage API?

Nov 19, 20217 min read

How to use Web Storage API?

In this article, we are going to look at the different types of web storage such as Local Storage, Session Storage, and Cookies to be more precise

Video as Text background using CSS

Nov 13, 20212 min read

Video as Text background using CSS

In this article, we will use any video as the background of the text. As you may have already know you cannot use directly video as the text background.

Timeline with CSS

Nov 10, 20212 min read

Timeline with CSS

In this article, we are gonna build a timeline for your website which you can use later on in your portfolio to display your work history or maybe something else you want.

Fully functional google search with next.js

Nov 04, 20212 min read

Fully functional google search with next.js

In this article, we are gonna build a Battery Informer which will display the battery status and the other information along with it such as the charging status, charging level and the discharging time.

Glassmorphism Circle Loading Animation

Nov 2, 20212 min read

Glassmorphism Circle Loading Animation

In this article we are gonna build a loading spinner with the glassmorphism with transform rotations

Prevent Heroku Server from Sleeping for FREE

Oct 31, 20212 min read

Prevent Heroku Server from Sleeping for FREE

In this article, I am gonna tell you about how you can run the Heroku server free for a lifetime. So let's get into it.

How to share anything from your website by Web Share API

Oct 29, 20213 min read

How to share anything from your website by Web Share API

In this article we are going to look at Web Share API. With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-specific apps.

5 very useful chrome/edge extensions for developers

Oct 28, 20212 min read

5 very useful chrome/edge extensions for developers

In this article we are going to look at some useful chrome extension which can be very handy as a developer.

Glassmorphism Loading Animation

Oct 27, 20212 min read

Glassmorphism Loading Animation

In this article we are gonna build a loading spinner with the glassmorphism UI.

Some Strange Concept of JavaScript

Oct 25, 20215 min read

Some Strange Concept of JavaScript

In this article, we are going to look at some weird and strange concepts of Javascript, Some of which you may know and some may not. So stay tuned till the end.

10 CSS Resources that you should bookmark

Oct 24, 20213 min read

10 CSS Resources that you should bookmark

In this article we are going to look at some awesome resource for you that can improve your productivity.

How to use ::before and ::after in Tailwind CSS

Oct 22, 20212 min read

How to use ::before and ::after in Tailwind CSS

This article explains how you can use `::before` and `::after` selectors in Tailwind CSS

CSS Gradient Loading Animation

Oct 22, 20211 min read

CSS Gradient Loading Animation

In this article we are gonna build a loading spinner for you website. which is in the gradient form you can customize that as you want.

Some Javascript Methods you should know

Oct 21, 20214 min read

Some Javascript Methods you should know

This article exlains some javascript methods that you should know, such as concat, split, join etc.

10 Git Commands everybody should know

Oct 20, 20218 min read

10 Git Commands everybody should know

In this article there are 10 git commands which will help you in your projects

Convert Next.js app to PWA

Oct 19, 20214 min read

Convert Next.js app to PWA

In this article it is explained that how you can turn your next.js web app to Progressive Web App.

How to use the dev.to API?

Oct 19, 20212 min read

How to use the dev.to API?

This article is the breif documentation about how you can fetch the data from the dev.to API