To create HTML anchor links that jump to another section of the page, you have to assign CSS ID for each section/element. And you have to use the ID followed by a “#” (hash) as the link. See the link pattern below. Note that each CSS ID should be unique and you can use the ID once on a page. However, you can use an ID multiple times on the same page when you don’t need linking behavior and when you need it for styling. But it’s a good practice to use a CSS class name when you need the […]
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 →
This post will give you a static template for your roofing website. I built this template from scratch. You can use it for free. Also, you can convert this template or create the same layout on WordPress, Squarespace, Wix, etc. This template is unique, mobile responsive, fast loading, easy to manage/edit & professional. This will be an inspiration for anyone who needs a roofing website. If you don’t have enough budget to buy a theme or template or if you don’t want to spend money, you can download this template and create your roofing website within half an hour. Moreover, […]
Read More →
This post will show you how to insert an image inside the button tag. Also, you’ll see different versions of it. Such as image & text (side by side) inside the button, button background image, positioning of the button text over the image, etc. You can check the live previews of the examples in the link below. Did you find your desired example in the live preview? Let’s get started. Insert an image inside the button I have excluded basic styles such as colors, font, border, etc from this post. This is just to make this post & concise. If […]
Read More →
In this post, I will show you how to center elements both vertically & horizontally using CSS Flexbox. Also, I will give multiple examples to solve problems in different scenarios. Before you start, please check the live demo of the examples that you’ll build. Let’s get started. Centering elements using Flexbox (both vertical & horizontal directions As mentioned earlier, I will give you multiple examples so you can solve problems in any circumstance. Let’s check them one by one. Example 1: Center alignment a collection of items that are stacked one after another As you see in the screenshot above, […]
Read More →
The link or anchor tag is an inline-level element (not block-level). So it may not be always center aligned only by assigning text-align to the center. In this post, I will show you how to perfectly center a link or anchor tag both in horizontal & vertical directions. See the demo of the all examples in the link below. Let’s get started. Centering a link horizontally To demonstrate the purpose, I have the following HTML. To center align the above link (anchor tag), you can change its element level from inline to block and align it to center (as you […]
Read More →
In this post, I will show you how to create mobile responsive tabs using HTML, CSS & JavaScript. I will give you two different layouts (designs). Also, you’ll get the source code for these tabs. See the screenshot of the 2 tabs that you’re going to build: Do you want to see the live preview? Click the button below. It contains both examples. Let’s get started. Project structure Before we dive in, let me show you the project structure. I have 3 files such as index.html, style.css & script.js (as you see in the infographic below). However, you may create […]
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 →
CSS gives you huge flexibility to select one or more HTML elements exactly the way you want. Using multiple classes & IDs and making a combination of both gives you the ability to do that. But you have to know how multiple CSS selectors work together to get the most out of it. In this post, I will show how you can use multiple classes & IDs in CSS, and make a combination of these two. Also, you’ll get some real-world code examples that will give you a clear concept of using them properly. How to use multiple CSS classes […]
Read More →
To break a line in HTML, the first option is to use the <br> tag. Also, you can create a new line using other ways. In this post, I will show how you can make a line break in HTML in a couple of different ways. Let’s get started. Create a new line in HTML using <br> tag Let’s say you want to break a line in a certain position in the paragraph. Write the <br> tag where you want to get a new line. See the HTML below. For the above HTML <br> tag, the last part of the […]
Read More →