mobile menu trigger, icon

Category: Web Development


Center an image in various directions & methods

In this post, I will show how you can center-align an image in various directions & using different methods (CSS). Any HTML element can be centered horizontally, vertically & both. Also, a horizontally centered image can be aligned at the top & bottom. In the same vein, a vertically centered image can be aligned at the left & right. If this doesn’t make sense, see the infographic below. Please take a look at all the live examples in the link below. Center align an image in all the possible directions If you take a closer look at the above infographic, […]

Read More →

Background image size (full-width, responsive, full-screen, etc)

In this post, I will show you a couple of examples based on the background-size property. After reading it, you’ll learn how to make a full-width background image, how to make it responsive for all devices, full-screen background on any screen, custom size, etc. Before you start, you can also check the live demo of the finished examples that you’re going to build. You’ll get all the code samples and all the source code that powers the live preview template. Let’s get started. Examples of background image size Throughout the examples, I am only using plain text/paragraphs but you can […]

Read More →

How to center align text vertically?

The text-align: center can make any text horizontally centered. But if you need to make the text vertically centered, you have to do it differently. In this post, I will show you how to center-align text vertically. Also, I will give you multiple examples & use cases. After reading this post, you’ll be able to vertically center align text from various directions. Last but not least, you’ll get all the code samples and GitHub repo. Before you dive in, check the live previews of the finished products that you’re going to build. Let’s get started. Examples of vertically center-aligned text […]

Read More →

How to use SASS/SCSS in VSCode and its difference from regular CSS?

How to use SASS in VSCode

SASS is a tool that allows you to write & organize CSS more precisely & very easily. And SCSS is an extension of SASS. For example- style.scss, _header.scss, _footer.scss, and so on and so forth. On the other hand, CSS refers to ‘Cascading Style Sheets‘ that are executable by web browsers. Note: CSS is not a programming language, it’s a stylesheet language. In this post, I will show you how you can configure (set up) your VSCode editor for using SASS/SCSS. Also, I will explain & distinguish between SASS & CSS. Last but not least, I will also give you […]

Read More →

Web hosting price comparison among 13 companies

Web hosting costs may seem confusing sometimes. Although the final goal is ultimately the same—building a website—the cost depends on various factors, including marketing policy. In this post, I will compare the prices & go through reputable hosting companies, from the lowest price to the highest. But before I get into that see my top 3 picks (I am not affiliated with anyone). Best for WordPress WP Engine Speed up website performance. Best suits for those who have more than 10,000 monthly visitors. $300 per year Read review ↓ Performance & Security SiteGround Easy and affordable web hosting that guarantees […]

Read More →