You can change an image on CSS hover. In this example, I will do it in a two-step process. In the first step, I will place an image over another. Finally, in the second step, I will use the hover event & opacity property to hide & show the image. Hover your mouse on the image below to see the final product we are going to build. Let’s see how you can change the images on hover. Change image on hover using CSS Step 1: stack/place an image over another It’s important to see my HTML markup before we write […]
Read More →
To add a link in HTML, take an anchor tag <a> and insert the path into the “href” attribute. See the linking pattern below. In the above code, you see that I have 7 different linking examples. You will see all sorts of HTML linking methods step by step. Also, you’ll learn some new things about HTML links that you may have not seen before. Example 1 In the above example, you see how to create a link in HTML. The clickable text is known as anchor text as you see in “Example 1.” Example 2 In “Example 2“, you […]
Read More →
This post will show you how to create a testimonial slider using only HTML, CSS & Javascript. The full source is available to download. So you can upload this slider to your own projects. A few keynotes about this slider: Before we dive in, let’s see the testimonial slider in action. So you’ll know what to expect. Create the testimonial slider step by step 1 / 3 Aspernatur modi quisquam autem illo sapiente reprehenderit. Tpsume dolor sit amet consectetur adipisicing elit. Consectetur voluptates sit consequuntur quasi eum veniam earum enim nam vitae dolore praesentium minima commodi. Voluptates sit consequuntur sit […]
Read More →
HTML <ul> tag is one of the most commonly used items on many web pages. The <ul> tag stands for unordered lists. The name itself is self-explanatory. However, you can’t use this tag alone. To make the actual list of items, you have to use <li> tags inside the <ul>. In this post, I will show you how to create a bullet list (unordered), numbered list (ordered), and nested list. Also, you’ll learn how to remove bullet points, replace default bullet points with custom images, etc. Let’s get stared. How to make a bulleted list? The output of the above […]
Read More →
To create an HTML navigation bar, you also need a few lines of CSS to make it attractive. However, this post will give you a couple of navigation bars to choose from. Also, I will link to other posts that will show you how to make the navigation bar responsive. These are the examples that I used on many projects and you can use them too. Let’s get started. Create navigation bars using only HTML & CSS Before creating any navigation menu, wrap them in a <nav> tag. This is the best practice and helpful for SEO because the search […]
Read More →
To add a border in the HTML table, target the <td> tag in your CSS and assign a border value for it. See the following CSS below. I have the following HTML for the table. With the above one line of CSS, my table looks like the following: Column 1 Column 2 Column 3 Column 4 Apple Bicycle Carrot Dog Elephant Fire Giraffe House Ice Jelly Kite Lemon In the above table, you see that there is a little gap between cells. This gap is coming from the web browser. To get around this default gap, specify the border-spacing for […]
Read More →In this post, I will show you 3 different ways to make text bold in HTML. End of this post, I will also show you how to do it in CSS. Let’s get started. Make text bold in HTML There are different HTML tags that you can use to bold certain words or sentences. Let me show you all of them. Using strong tag To make text bold in HTML use the <strong> tag as you see below. Here is the output below: Repudiandae dolores molestias necessitatibus soluta eveniet magnam mollitia Using b tag To make a text bold, you […]
Read More →
Sometimes HTML tables may get borders automatically from your web browsers or other parts of your website. So, the “border: none” value may not work always. In this post, I will show you a couple of solutions to remove borders. Different ways to remove borders in tables I have a demo table below but I did not write any CSS for it. Column 1 Column 2 Column 3 Column 4 Apple Bicycle Carrot Dog Elephant Fire Giraffe House Ice Jelly Kite Lemon Moon Night Orange Pineapple And I have the following HTML for the above table: I didn’t even write […]
Read More →There is a couple of HTML code, hex code, Unicode, and even CSS code that you can use to add an info symbol to your web page. First, let’s see what type of info symbols you will get in this post. ⓘ ℹ ℹ 🛈 The second & third icon looks the same. However, their entities are different. End of this post, I will also show you how to add a mouseover help text once you hover the mouse on the info icon. Let’s see a demo below (hover your mouse to see the output). This is an example text […]
Read More →In this post, I will show you how to output the name of the last month and the last 2 & 3 months. I will use JavaScript to get the month names and output in HTML. Not to mention, these names of the months will automatically change based on the current month. For example, if the current month is June, then the output will be March, April & May. If the current month is January, then the output will be October, November & December. You got the idea. You can also output the month names on WordPress, Elementor, Divi, etc. […]
Read More →