You’ll see different types of symbols in a URL such as “? # & %.” They have different meanings & purposes. In this post, I will explain what they are, how & when to use them, and give you practical examples. So you can understand these symbols in this context and use the right one at the right time. Also, I will show you different types of URL structures. Let’s get started. What is “?” (question mark) in a URL? The question mark symbol “?” is a query parameter in a URL. It simply represents an interrogation or asking for […]
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 →
When you browse a website or navigate through the links in the software, it does not load immediately. It takes a couple of seconds to fully load the content. And while the content is loading, a page may look distorted. And this is where a preloader comes into play. A preloader is a loading spinner that hides the actual page content initially and disappears when the page finishes loading. It helps software and website owners to provide a better user experience. At the same time, visitors or users don’t see the broken layout during the loading period. Also, there are […]
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 →