There are various ways to create an HTML sitemap for a WordPress website. Also, there are numerous plugins that you can use to create a sitemap. But I am not going to use any plugin at this moment because I know how to make it properly and style it exactly the way I want. In this post, I will show you how to create a dynamic sitemap for a WordPress website without any plugins. I said “Dynamic” because this sitemap will update automatically after you create a new post or page. Create a sitemap for your WordPress website without any […]
Read More →
In this post, I will show you how to create an accordion with HTML, CSS & JavaScript. Also, I will give you the source code of a beautifully designed accordion that you can use on your projects. I used no CSS or JavaScript framework to create this accordion. See the demo of the accordion below. Consectetur adipisicing elittaque quaerat nostrum esse? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, ea. Illum autem quae dolore labore! Voluptate sed debitis consequatur esse rerum nemo ratione, veritatis quo quis blanditiis enim nisi molestiae. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut […]
Read More →The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS. In this post, I will explain & show a couple of ways to create a horizontal list with CSS. Let’s get started. Different ways to create a horizontal list with CSS In these examples, you will see different CSS properties that can be used to make a horizontal list, such as display, flex, float, etc. Throughout this post, I will use the following HTML for the list items until I introduce a new markup. So keep that in […]
Read More →
CSS gradient border is a great opportunity to make your content stand out. Throughout my website, I used gradient borders that helped me to focus on important parts of a web page. And you can do the same using them. In this post, I will give you some examples of CSS gradient borders. Also, I will show how you can create your own border styles. Let’s get started. Examples of CSS gradient border From the examples listed below, you can copy-paste my CSS and change the color values exactly the way you want. Let’s see some of the cool gradient […]
Read More →
It’s easy to add borders to a table but making the table rounded is a bit trickier. Wood-made rounded tables are very common but it’s rare when it comes to making them with HTML & CSS. I used the “border-radius” property to make the rounded corners but it did not work. So I took a deep dive and come up with a couple of solutions to make a table rounded with CSS (not wood). In this post, I will show you a couple of ways to make rounded tables with CSS. Also, I will show you different types of rounded […]
Read More →You can rotate text, images, and other HTML elements using the CSS transition property. The transition has a “rotate” function that can make rotation an element clockwise or anticlockwise. In this post, I will try to make you understand the CSS rotate function in depth. And will give you some real examples. So you can take these ideas to implement on your project without much spending time on it. Let’s start. Rotate a text using CSS In order to rotate a text, your first instinct should be to give it a class or ID so you can target it easily […]
Read More →
Recently (February 2023) I encountered a situation where the Yoast SEO breadcrumb shows IP instead of my domain name. I have been using AWS Lightsail as the hosting. You may already know that it’s tough to get access to the phpMyAdmin or MySQL Database on AWS. You have to go through PuTTY (3rd party software) to get access to your database. From there, you have to fix the database locally and then transfer it back to AWS. There are lots of belts & whistles you have to tie. There are valid reasons for hardening this access, especially for security reasons. […]
Read More →
There is no href attribute for the div. So to make an entire div a link, you have to wrap it inside an anchor tag. See the example HTML below. In the above code, you see that I have a couple of HTML elements such as a heading, image & paragraph. All these elements live inside a <div>. And this whole div is wrapped by an anchor tag (<a>). This is how you can make a whole div a link. If you click anywhere in the div no matter if it’s a heading, image, paragraph, button, or something else, it […]
Read More →There are a couple of ways you can align text to the bottom of a div using CSS. In this post, I will show you a couple of ways to do it. CSS for aligning text to the bottom The first and easiest way is using flexbox. Only two lines of CSS can make it happen. I have a CSS class of container for the div and that’s why I used the selector above. See my HTML markup below. Example 2: Using CSS position In this example, I will use the same HTML markup. And align the text to the […]
Read More →There are two main ways you can position text over an image. Such as: (1) Placing the text over the image using the CSS position property, (2) Creating a background image for the text. In this post, I will show you both ways to place the text over an image. Also, I will answer some of the related questions that you need to know. Let’s get started. How to place text with an image using the CSS position property? To demonstrate the purpose, I have the following HTML. Using the above HTML, my image and text look like the screenshot […]
Read More →