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
Page 5 of 6
How 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 MoreHow to center a table with CSS?
Centering a table with CSS is an important aspect of web design that enhances the visual appeal and readability of your content. This tutorial will show you three effective methods to center a table using CSS. Syntax /* Method 1: Using margin auto */ table { margin-left: auto; margin-right: auto; } /* Method 2: Using CSS Grid */ body { display: grid; place-items: center; } /* Method 3: Using Flexbox */ body { display: flex; ...
Read MoreHow to Build a Bounce Ball with HTML, CSS, and JavaScript?
Creating animated bouncing balls is a popular technique to make web pages more visually appealing. While HTML provides the structure, CSS keyframes and JavaScript offer different approaches to create smooth bouncing animations. CSS keyframes provide declarative animations, while JavaScript offers programmatic control for more complex interactions. This article will demonstrate how to build bouncing ball effects using both CSS keyframes and JavaScript animations. Syntax @keyframes animation-name { 0% { transform: translateY(start-position); } 50% { transform: translateY(middle-position); } 100% { transform: translateY(end-position); } } ...
Read MoreHow to bind an animation to a division element using CSS?
Division elements () are commonly used for grouping HTML elements, and CSS allows us to bind animations to them for enhanced visual effects. This article demonstrates how to apply animations to division elements using CSS. Syntax selector { animation: animation-name duration timing-function delay iteration-count direction; } @keyframes animation-name { 0% { /* initial state */ } 100% { /* final state */ } } Method 1: Using @keyframes Animation The @keyframes method is the most commonly used approach to create animation ...
Read MoreHow to Design Half-Page Carousel in Bootstrap?
Carousel is a popular web designing technique used by web developers. This is a way to show a series of images or any other media content in an interactive way. These carousels are important design elements in several kinds of websites like traveling websites, Educational websites, etc., where we need to attract users using the images. The half-page carousel is a slight variation where the carousel takes only half of the entire page. This article will teach us how to design a half-page carousel in Bootstrap. Use The Grid System The bootstrap grid system allows us to create responsive and ...
Read MoreHow to design form controls for mobiles using jQuery Mobile Square-UI Theme plugin?
Making web pages mobile-friendly is a challenging task for the customs form control. jQuery gives us many options to perform the task conveniently. Since smartphones are very popular devices nowadays, it is important to be able to create custom form controls which visually appealing interfaces. jQuery library of JavaScript can help in building both responsive and engaging designs. In this article, we shall learn how to design form control for mobile using jQuery mobile Square-UI Theme plugin. Example This code demonstrates how to design mobile forms using the jQuery Query Mobile Square-UI Theme plugin. We first included the necessary libraries ...
Read MoreHow to call web services in HTML5?
Introduction Calling web services is one of the most commonly used services over the web. It refers to the way of communicating with the software systems. This communication can be between the clients with the server, peer-to-peer, etc. HTML5, the latest version of HTML, provides A LOT OF WAYS LIKE XMLHttpRequest object, APIs like Axios and fetch, WebSockets, etc. This API allows the users to get dynamic static, real-time, or dynamic content depending upon the requirement. In this article, we shall learn how to call web services by using different methods like calling APIs, web sockets, etc. XMLHttpRequest is a ...
Read MoreHow to design combo grids using jQuery EasyUI?
jQuery EasyUI is a powerful and user-friendly JavaScript library that can be used to create various UI components, including combo grids. Combo grids are a combination of drop-down lists and data grids, which allow users to select data from a list with a grid-like interface. In this article, we will go over the steps to design combo grids using jQuery EasyUI. Example Combo Grids with jQuery EasyUI #combo-grid ...
Read MoreHow to Design Color Picker using jQuery UI?
A color picker is a graphical user interface component used to select colors. It is a valuable tool in web development and graphic design as it allows users to choose and customize colors for various design elements such as backgrounds, text, and borders. In this article, we will explore how to design a color picker using jQuery UI. Design A Color Picker Using jQuery UI jQuery allows us to create a color picker with the help of the libraries associated with it. To create a color picker we can follow the following steps − First import the jquery script ...
Read MoreHow to design a checkbox selection for a webpage using jQuery EasyUI?
jQuery EasyUI is a popular open-source JavaScript library that provides a simple way to create user interfaces for web applications. One of the key features of EasyUI is the ability to create a variety of input elements, including check boxes. In this article, we will explore how to design a checkbox selection for a webpage using jQuery EasyUI. Example Checkbox Example body { font-family: Arial, sans-serif; ...
Read More