When people buy something on our website or subscribe to the newsletter, we generally redirect them to a “Thank You” page. It’s a great opportunity to engage with our audience more closely & build business relationships. In this post, I will give you a thank you page template. And I will show you how I created this only using HTML & CSS. This template is fully mobile responsive, fast loading & well-structured. When I say well-structured, it means that I used semantic HTML where/when necessary and I did not even include a wrapper <div> just for the sake of limiting […]
Read More →
In this post, you’ll see how to create a mobile responsive “Contact Us” page design using HTML & CSS. I will give you all the source code for the template. Before you dive in, let’s see the demo of the finished page you will build. In this template (live preview), I also have two optional parts such as the header navigation & footer. But you can ignore that if you already have them in your existing template. I commented out both in HTML & CSS files so you can easily understand which code does what specific things. Let’s start building […]
Read More →
By the word “Interactive” here I meant the two-way flow of information. I am referring to a team page where the visitors will get the full information in two steps. In the first step, the visitors will see the list of all team members in your company (their photo & name). If they (visitors) choose to get more details about a specific team member, they will click on the photo or name of the person in the second step. And it will show the full detail about a team member. If this is not clear yet, please see a live […]
Read More →
The footer is a global element of any website (just like the header navigation bar). This same element is visible on all pages. Just like the <section>, <div>, <main>, <article>, the <footer> is also an HTML tag that contains the entire bottom element of a website. When you include a <footer> tag on a file, search engines also understand that it’s the bottom or last part of the document/page. Not to mention, The <footer> is known as an HTML tag, and the entire bottom element is also known as the footer. To create a footer, you can write anything or […]
Read More →
In this post, you’ll see how to create an analog clock using only HTML, CSS & JavaScript. This clock will display the current time in your location no matter where you live. Before we start, let’s see the live demo of the finished product that we are going to build in this post. If this is what you want, let’s follow the guideline. Template for the analog clock In the project root folder, create the following three files: Not to mention, you need to link the style.css & script.js in your index.html. To connect the stylesheet or style.css file, write […]
Read More →
0 If you want to start over, click the “Reset” button below. Reset Similar tool: Spacebar counter This is a keyboard counter that counts every keystroke you press. Start typing and see the total count on the fly. However, the only exception is the “Tab” key. That means, it does not count the “Tab” key. I intentionally excluded it from the total hits because of accessibility reasons. So any screen readers will get the same output as you do.
Read More →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 →
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 →