Responsive Square, Circle with CSS only

CSS

Here is a simple technique to create responsive shapes like a square, circle or rectangle (maintaining it’s aspect ratio) with the help of CSS only. DEMO See the Pen Responsive Square with CSS by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

How to maintain aspect ration of YouTube videos with CSS

CSS

Hey, you can create responsive YouTube videos with the help of CSS only and maintain its aspect ratio without needing any third-party JavaScript library. The easiest and quickest way to do it is with the following CSS. HTML <div class=”container”>...

Props vs State in REACT Components

React

Here is an image that lists differences between props and state in REACT Components.

Content loading animation via CSS

CSS Animations

Here is a simple content-loading animation I created in one of my freelance projects that looks similar to the other content-loading animations you might have seen on other websites like Facebook. The logic is to animate the background gradient from left to right in...

Simple CSS blinking cursor

CSS

Here is an example of simple CSS only blinking cursor that you can use and modify according to your needs. I have used keyframes to introduce infinite blinking animation to the cursor. See the Pen Simple CSS Blinking Cursor by Puneet Sharma (@webdevpuneet) on...

How to prevent automatic filing of Username and Password in input fields?

HTML

Use autocomplete=”new-password” in you input used for password. <div class=”form-group”> <label>Password</label> <input class=”form-control” autocomplete=”new-password” type=”password”...

How to detect search input clear event with jQuery

jQuery

I use “keyup change search” in event listner like the following code below. $(“#filterCards”).on(‘keyup change search’, function() { // Do something… });