Do you need to create an analog clock with date and time using HTML and CSS? Well, you are in the right place. Here we are going to create an analog clock widget in CSS and functionalize it using JavaScript. … Read More
In this tutorial, we are going to design a simple digital clock widget using CSS and JavaScript. The basic requirement for a digital clock is to display the time in digits in 12/24 hours time format. So, in JavaScript, we … Read More
When we talk about consistent web design, the very first thing that comes to mind is lightweight and easy-to-navigate pages. So, the menu navigation is the first element to browse the website content. In a consistent design, the navigation system … Read More
Basically, HTML5 audio player can’t be styled if we used the “controls” attribute inside the audio tag. But, we can easily customize the player interface if we have a custom controls function. If you have tried to style the HTML5 … Read More
A 3D carousel is one of the most important components of a creative visual interface. It not only enhances the user experience but also attracts the user to stay longer on the page. There are many jQuery/JavaScript plugins to create … Read More
A few months ago, we created a tutorial to arrange your images side by side with the caption text below them. Today, we are again come back with the relevant tutorial to create a responsive image grid with hover effects. … Read More
Do you want to create 3D hover effects on images? If yes, then you are absolutely in the right place. Here I’m going to share a jQuery code snippet to create mindblowing 3D thumbnail hover effects with step by step … Read More
Drop-down navigation is the most common element of a website to navigate the site content. In such navigation, the basic links appear in a bar and if a link has more list then it is shown in the dropdown. In … Read More
In this tutorial, we are going to create a simple popover that displays on hover using pure CSS. Basically, it’s a simple content container that may contain any HTML element that you want to show on hover. So, you can … Read More
Are you looking for an accordion with open / close arrows created in CSS? well! here is a step by step guide to creating accordion with arrow icons. In this accordion tutorial, we’ll use only HTML and CSS to develop … Read More
There are many effects for the sticky header menu that can be revealed on scroll event. A shrinking header animation is one of the best of these animations to shrink a thick header and fixed it on the top of … Read More
Sometimes, we need to calculate the age of users from their date of birth for various purposes. Whether you want to display the age of a user on a profile page or want to validate a user registration form for … Read More
The world map is used for various purposes on a webpage. It is widely used in admin dashboards, analytics and to visualize the data around the globe. Basically, there are many plugins and services to embed a world map on … Read More
Are you working on a school/college website project and looking for a student profile page? Well! you are in the right place. Here I’m going to share HTML code for student profile page design with step by step implementation guide. … Read More
The CSS animations are one of the most important elements of a creative UI design. These animations attract users and enhance the user experience while browsing the site’s content. This tutorial explains how you can create a wave animation using … Read More
The stylish input fields attract the users while filling out the form element. We can make the input stylish by defining color and shadow as well as placing an icon inside it. So, this tutorial explains how you can place … Read More
In this tutorial, I’m going to share a pack of cool CSS border animation for the HTML input element. These border animations play on focus event. You can apply these border effects on all types of input except checkbox or … Read More
A speech bubble is a visual element that shows the quote or special text that points to something. In web design, it is used in the testimonial to indicate the reviews, tooltips, and text chat interface. Besides this, speech bubbles … Read More
A number badge over the notification icon is one of the useful elements in a user-friendly interface. This badge alerts the users to read their unread notifications as well as shows the number of notifications. So, in this tutorial, we’ll … Read More
In this tutorial, you’ll come to know the easy way to build a simple mobile navigation menu using HTML and CSS. Basically, this is a responsive menu project that comes with an animated hamburger toggle menu icon. When a user … Read More