In this post, I will show you how to create a two-column list in HTML & CSS. This could be an ordered or unordered list. Some of you may have tried to create a two-column at first and then put your list items separately on those divs. But this is not what I am going to do. Instead, I will write some CSS to automatically lay out the list items in two columns. Also, this will be mobile responsive. That means, on mobile & smaller screens, this will be one column list. And on the larger screens, this will be […]
Read More →In this post, I will show you how to center-align an HTML list using CSS. This could be an unordered or ordered list. And even this could be a custom bulleted list. The ultimate process is the same for centering any type of list items. Let’s get started. Make a list center-aligned To demonstrate the purpose, I have the following HTML for the list items: HTML To make it center-aligned including the bullet points, I have the following CSS: CSS The above CSS will make your list center-aligned including the bullet points (that you saw in Example 1). Make a […]
Read More →In this post, I will show you how to create video backgrounds in HTML & CSS. Here I will include multiple examples. Such as: In all these examples, the videos will have an autoplay feature (including YouTube). Before you start, let’s see the demo of the finished product (in the link below). Let’s get started. Create a banner section that has an autoplay video background To create this banner section with an autoplay video background, I have the following HTML & CSS. HTML As you see above, I included the video in the HTML instead of CSS. Normally, we add […]
Read More →Inserting a video in HTML is easy but centering it can be tricker sometimes. Here you’ll see how to center a video very easily in your HTML document. You can include a video in HTML from many different sources. Such as self-hosted videos, and embedding from YouTube, Vimeo, etc. Anyways, whatever the source you’re using, I will make sure that everyone can center their videos perfectly. You can see the demo of the finished products (in the link below) before diving in. Let’s get started. Centering a video in your HTML document In this section, I am using a self-hosted […]
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 you some exceptional animated backgrounds. I only used CSS to create those animations. There is no JavaScript involved. You’ll see all the demos and also you’ll get the code (HTML & CSS). There is an icon on the top-right edge of each code block. You can click this icon to copy the entire code block. Let’s get started. Animated background examples I used CSS keyframes & animation property to create the background animations. Some of the examples contain images that I created myself or I own them. If you like, you can use them […]
Read More →Throughout the years, I wrote a lot on CSS. This post contains all the resources that you should know to learn CSS from the ground up. It will take you from the very basic to a little further. At least, these will give you a rock-solid concept of CSS. All these posts contain source code, examples, and other necessary resources. Think of this post as a beginner guide to learning CSS. SL History & basic concept 1 What is CSS? 2 What is the difference between CSS and CSS3? 3 How to add a stylesheet to HTML? 4 Comment for […]
Read More →In this post, I will give you a list of HTML & CSS projects so you can practice & brush up on your skills. I built each of these projects from scratch. In these projects, you’ll build small websites, pages, templates, and single components like cards, navbar/header, footer, slider, etc. These are also real-world projects that will help you to create living breathing websites. Table of contents SL Detail project link 1 About us page 2 Portfolio website design 3 Computer science portfolio 4 Testimonial page 5 Team page 6 Contact us page 7 Multiple-page website 8 Thank You page […]
Read More →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 →