30:00 Reset Enable Sound Disable Sound Your browser does not support the audio element. This is a 30-minute timer that starts to countdown right away and as soon as the page loads. You also have the option to reset this timer by clicking the “Reset” button. The countdown timer starts without any sound. But if you wish to play a clock TikTok, click the “Enable Sound” button. Also, you can pause/stop the sound by clicking the “Disable Sound” button. You can switch back and forth with the timer sound. Once the 30-minute countdown finishes, the timer will turn from green […]
Read More →
In this post, you’ll see how to create a two-column layout in HTML CSS. Also, you’ll learn how to make this layout mobile responsive. That means the layout will automatically break into one column on small screens. I will give you all the source code for this column layout & the link to my GitHub repository. Before you start, let’s see the live template that we’re going to build in this post. In this post, I will show you three different ways to create a two-column layout. Use any of the approaches that you like the most. Let’s get started. […]
Read More →
In this post, you’ll see how to create a mobile responsive & equal-width 3-column layout in HTML & CSS. Also, you’ll learn how to do it in three different ways such as CSS flexbox, grid & float. End of this post, I will give my opinion about the best method that you should use. Not to mention, I will also give you the source code of the column layouts. End of the post, you’ll also find my GitHub repository URL to clone the entire template. See the live preview of what we are going to build in this post. Some […]
Read More →
In this post, I will show how you can create a simple back-to-top button only using HTML, CSS & pure JavaScript. Also, I will give you the sample code (source code) so that you can implement this exact back-to-top button on your projects. Please see the demo of the finished product that you’re going to build in this post. Lastly, I will show how you can customize my code so that it matches your own project. Back to top button sample code In this section, I will give you all the HTML, CSS & JavaScript. And then I will explain […]
Read More →
In this post, I will give you some progress bar examples that have been created in HTML, CSS & JavaScript. Let’s see the live examples below. Live preview of the progress bars For the above progress bars, I have the following HTML, CSS & JavaScript. HTML CSS JavaScript How to edit these progress bars? Aside from the color, background, etc, you may also need to change the text/label and percentage of the progress bars. And this is what I am going to show you here. Change the text or label To change the labels such as Python, JavaScript, and TypeScript, […]
Read More →
I created other card examples in the past that you can check here but in this post, you’ll get some animated cards along with their HTML & CSS. Let’s see the animated card examples below: Live preview of the animated cards Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio dolores nesciunt nisi veniam eos quo magni illum odio possimus earum. Details Contact agent Sit amet consectetur lorem ipsum dolor adipisicing elit. Optio dolores earum nesciunt nisi veniam eos quo magni illum odio possimus. Details Contact agent Discover the world of adventure Lorem ipsum dolor, sit amet consectetur adipisicing elit. […]
Read More →
There are many use cases of CSS hover. In this post, I will show how you can create an image hover animation effect using only CSS. Here I made 7 different examples that you will see by hovering over each image. You’ll get all the HTML & CSS after the examples. Before I give you the code, see the live examples below. Live preview of image hover animation effect EXAMPLE 1 (Fade animation):Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet totam molestias accusantium at hic atque corrupti labore, ducimus aliquam doloremque? EXAMPLE 2 (Zoom in):Lorem ipsum dolor sit amet […]
Read More →
To create a circle using CSS, you need to apply 50% border-radius to all four corners and the element should be equal in width & height (square). Not to mention, there are some exceptions that I will explain as we go through the examples. In this post, I will show how you can create different types of circles with CSS. Let’s get started. How to create a circle border in CSS? To create a circle border (hollow) as you see in the above example (blue), you need to specify the exact/same width & height and add a 50% border-radius. It’s […]
Read More →
An adjacent sibling combinator is a way to select an HTML element that immediately comes after the first selector in CSS. This is the simplistic explanation that I can give you. But I will explain this CSS combinator in more detail, and give you code examples, pictures, and everything you need to understand the adjacent sibling combinator. It looks very complex based on the definition. But this is one of the most simple CSS selectors that you may have ignored in the past because you took it the hard way. Bear with me to understand it clearly for the rest […]
Read More →
Spacer HTML code is a deprecated tag that was used to create space back in old days. But nowadays it’s not in use in all major web browsers. In this post, I will show you how it was working in the past and its alternatives in these modern days. How spacer HTML code was working in the past? The <spacer> tag was creating space horizontally & vertically using type attribute (also within a block). See the HTML below for more clarification. Now you know how the <spacer> tag was working. However, according to MDN documentation, it’s no longer a valid […]
Read More →