In this post, I will show you a couple of examples to create space between flex items. Also, I will show you how to offset the space on mobile devices. Let’s get started. How to create space between flexbox items? To create space between flexbox items, you can use flex-basis which is very similar to the width property. As you see in the above screenshot, I have two items in the flexbox container. Before I write or explain any CSS, let’s see the HTML markup for the above layout. To create space between the items, I have flex-basis of 48% […]
Read More →
In this post, I will show how you can align an image on the right side of a div using CSS. You will also learn to align the image on the top-right, middle-right & bottom-right corners. Let’s get started. How to align an image on the right side? When we say about the right-aligned image, we generally mean to place it on the right-hand side and want the image to consume the full available height. But there are some cases, in which you may also need to arrange the image on the top, middle & bottom right. This is what […]
Read More →
To reverse columns on mobile or any other screens, you can use flexbox & its order property. If this does not make sense, I will show you now. But when actually do you need to reverse columns? I am happy to ask because this is exactly what I will show you now. Let’s imagine you have the following layout on a large device. As you see in the above screenshot, I have two rows. Each row contains two columns. Each of the right columns contains images. You will see this kind of layout a lot. Even you may have built […]
Read More →
There are hundreds of ways to create a preloader for your website. But in this post, I will show you how to create a gorgeous preload spinner only using HTML, CSS & a few lines of JavaScript. However, you can also convert/implement this preloader on a WordPress website. First, let’s see the preloader that we are going to build. In the live preview/example, the preloader loads for 3 seconds to show you. But on a real website, we want the preloader to disappear after the page finishes loading. And this time is not fixed or static. This DOM loading time […]
Read More →
In this post, I will show you a couple of cards that I made with HTML & CSS. You can use any of the card CSS or designs that you like. Let’s explore them one by one. Example 1: simple card design with HTML CSS In this example, I have an image on top, a card title, a description & a link/button. This card also has some other hover styles that you’ll find on the live demo. See its HTML & CSS below. HTML Don’t forget to replace the image path. CSS Example 2: card with list items & two […]
Read More →
The background slider is very useful when you want to create a hero section on your web page. You can create a slider with background images in many different ways. Such as using slider plugins, jQuery libraries, frameworks, etc. However, in this post, I will show you how to create a background slider only using HTML, CSS & JavaScript. To create this slider, I did not use any dependencies. So you do not need any plugins, JavaScript libraries, or any help from 3rd party sources. See the live preview of the slider in the link below. End of this post, […]
Read More →
In this post, I will show you how to create a computer science portfolio website. Also, I will explain what important things you need to include in your portfolio. And give you a perfectly designed template that has been created especially for computer engineers & computer science students. End of this post, you will find an option to download this template. It’s free and always will be. Before you dive in, let’s see a finished website that you can download for free. You’re also free to edit & customize the template and use it as your portfolio. Things you should […]
Read More →
There is no exact text-wrap CSS property but there are white-space & word-wrap that can make certain text wrap or show them in a single line. If this is not clear to you yet, see the examples and CSS below for more clarification. See their respective output below: word-wrap: normal ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis default value word-wrap: break-word ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis Allows long words to break in the next line word-wrap: initial ↓ The longest word in English pneumonoultramicroscopicsilicovolcanoconiosis This also comes from default value word-wrap: inherit ↓ The longest word in English […]
Read More →
A portfolio website is a collection of past works. Most clients may want to see related work samples before hiring someone. So the client can be assured that they are getting their job done by a person who has the required skill set. If you’re the person who wants to get clients, then you need to organize your accomplishments in such a way that the target customers get inspired to hire you. And this is what a portfolio is. Not to mention, it can be defined from various perspectives such as service, investment, education, etc. But in this post, we […]
Read More →
The <hr> is an HTML tag that stands for “Horizontal Rule.” To change the hr color, you need to write some CSS. By default, it gets style from the browser. In this post, I will show you how to change <hr> tag color, how to add a gradient border to it, and how to increase its thickness. Let’s get started. How to style the <hr> tag using CSS? There are various ways you can make a custom style for this <hr> tag. See a couple of them below. Change the color of the hr tag Lorem ipsum dolor sit amet […]
Read More →