Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Asif Rahaman
52 articles
How to avoid a new line with a tag?
When working with HTML tags, browsers typically display them as block-level elements, meaning each div starts on a new line. However, there are situations where you need multiple divs to appear on the same line, such as creating navigation menus, horizontal layouts, or side-by-side content sections. This article demonstrates three effective methods to prevent div elements from creating new lines: using the display: inline property, display: inline-block property, and CSS Flexbox. Understanding Block vs Inline Behavior By default, elements have display: block, which means they − Take up the full width available Start ...
Read MoreHow to Become a Full-Stack Web Developer in 2023?
Becoming a full-stack developer is the dream of many engineering students. Full stack development means building complete web applications with dynamic frontend interfaces and robust backend systems, including databases, APIs, and server management. This article will discuss the essential skills and roadmap to become a full-stack web developer in 2023. Learn The Basics Of Web Development The first and foremost important step to becoming a full-stack developer is to master the fundamental languages which form the foundation of all web applications. Frontend Technology Stack HTML5 Structure ...
Read MoreHow to Build a Card component using Tailwind CSS?
The card component is a versatile UI element in Tailwind CSS used to display content in a structured, visually appealing format. Cards are essential building blocks for modern websites, especially e-commerce platforms, blogs, portfolios, and dashboards. Tailwind CSS provides utility classes that make creating responsive, customizable cards straightforward and efficient. Syntax Following is the basic syntax for creating a card component using Tailwind CSS − The core classes used are − bg-white − Sets white background color rounded-lg − Applies rounded corners shadow-lg − Adds drop ...
Read MoreHow to automatically transfer visitors to a new web page?
As a website owner or developer, there may be times when you need to automatically transfer visitors to a new web page. Whether it's because you've moved a page to a new URL or want to redirect visitors to a different section of your site, there are several different methods you can use to achieve this. In this article, we'll explore the different types of client-side redirects you can use to automatically transfer visitors to a new web page, and provide examples of how to implement each one. Meta Refresh Redirects One of the easiest ways to ...
Read MoreHow to build custom form controls using HTML?
Custom form controls allow developers to create unique, styled form elements that match their website's design and provide enhanced user experiences. While HTML provides standard form elements like checkboxes, radio buttons, and input fields, building custom controls gives you complete control over appearance and behavior. Syntax Following is the basic syntax for creating custom form controls − Control Label The pattern uses a label wrapper, hidden input element, custom visual indicator, and descriptive text. CSS provides the styling and pseudo-elements handle ...
Read MoreHow to Design Digital Clock using JavaScript?
Dealing with time is one of the most common concepts of web developers. Whether to schedule time for the subscription period or schedule email sending requires developers to deal with the time. In this article, we will learn how to design a digital clock using JavaScript. Get The Time On Clicking The Button We can achieve the same operation using multiple logic and codes. First, in this section, we shall learn how to design a digital clock that shows the time when the user clicks on the button. Follow the steps to achieve the step − ...
Read MoreHow to break a line without using br tag in HTML / CSS?
To break a line without using br tag in HTML/CSS is useful when you want to create line breaks while preserving the semantic structure of your content. This approach gives you more control over text formatting without cluttering HTML with presentation tags. Syntax /* Method 1: Using white-space property */ selector { white-space: pre; } /* Method 2: Using HTML pre tag */ text content Method 1: Using white-space Property The CSS white-space property controls how whitespace and line breaks are handled inside an element. Using white-space: pre preserves ...
Read MoreHow to blend elements in CSS?
Blending elements in CSS is a technique used to create interesting visual effects and enhance the design of a web page. With the mix-blend-mode property in CSS, you can control how an element blends with the content below it. Syntax selector { mix-blend-mode: blend-mode; } Understanding Mix-Blend-Mode mix-blend-mode is a CSS property that allows you to set the blending mode for an element. Blending modes determine how two elements blend together, with different modes producing different visual effects. By default, an element in CSS will have a blending mode ...
Read MoreHow to center a using the Flexbox property of CSS?
To center a div using flexbox property of CSS, we use CSS flexbox and its properties. In this article, we will understand and perform following three methods to center a div using the Flexbox property of CSS: Center div Using flexbox on Horizontal Axis Center div Using flexbox on Both Axes Center Multiple Items Using Flexbox Syntax .container { display: flex; justify-content: center; /* horizontal centering */ align-items: center; ...
Read MoreHow to center a using CSS grid Property?
To center a div using CSS grid property, we will be using CSS grid layout and its properties. CSS grid is one of the most widely used layout systems in CSS which is similar to flexbox. CSS grids are two-dimensional layout systems on the web that allow us to place elements in rows, columns, or both. In this article, we shall understand how to center a div using the CSS grid property with three different approaches. Syntax /* Method 1: Using place-items */ .container { display: grid; place-items: ...
Read More