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
Articles by Shubham Vora
Page 27 of 80
Prime CSS Marketing Buttons Animated Arrow Symbol
Let’s start the tutorial by understanding what is marking buttons and when we should use them. For a moment, think that you are an owner of the company and building a software product, and also, you don’t have any users or customers. Is it worth of product? The answer is no. To get customers, you must market your product; it is all about attracting your customer. So, developers can create a marketing button with an animated arrow icon to attract users and grow your product. In this tutorial, we will use the primer CSS framework to create marketing buttons with ...
Read MorePagination using Datatables
We can use the pagination technique to show large amounts of data in smaller chunks. For example, online stores like Amazon and Flipkart list millions of products. So, if they don’t use the pagination technique to show data, users need to scroll through the end of the web page to check the last product. Now, think how much scrolling is required to reach the last product in a total of millions of products. In the Pagination technique, we show a particular amount of data on a single page. For example, if we set the 100 as a page length, users ...
Read MoreMovie Web Application with ReactJS
Nowadays, OTT platforms are becoming more popular, and people are buying subscriptions to various OTT platforms to watch movies, TV shows, or services. Maybe, you can also start any OTT application. In this tutorial, we will learn to create a movie web application using React JS. However, We will learn to write only the basic code of movie applications. If users want, they can start with the below code and make improvements to create an advanced version of the movie web application. Users should follow the steps below to start with the movie web application. Step 1 − In ...
Read MorejQuery lose focus event
The jQuery allows developers to write readable code than JavaScript. We can decrease the 10’s of lines of JavaScript code into the 3 to 4 lines using jQuery. Sometimes, we need to use jQuery to perform some operation whenever an element loses focus. We can use jQuery's focusOut() and blur() methods to trigger the loose focus event. Mainly, developers require to use it with the inputs, checkboxes, radio buttons, etc., to give the validation feedback to the users once a user completes the input. Generally, we use the focusout() and blur() methods with the focus() method, which focuses on the ...
Read MorejQuery Jcrop Plugin
Jquery contains various plugins providing different functionalities, like the NPM package, and Jcrop is one of them. The Jcrop plugin allows developers to add functionalities related to image cropping in the application. Sometimes, we require to allow users to crop images. For example, if we build an extension or application that takes a screenshot of a selected portion, we require users to choose the screen portion and take screenshots. The Jcrop plugin allows users to select an element and crop it. Also, we can use parameters with the Jcrop plugin to customize the cropping functionality. Syntax Users can follow the ...
Read MorejQuery BlockUI Plugin
Nowadays, asynchronous JavaScript is becoming more popular as we don’t require to reload the web page to update the data of the web page. We can use the AJAX request to fetch data from the database and update it on the web page without reloading it. However, it always takes some minimal time to update the data, which can be either in milliseconds or seconds. It can be irritating for users to see the app is updating data, and users can think that the app is hanging while the app is fetching the data. So, In such cases, we can ...
Read MoreMinification of CSS files
If your app takes more than 3 seconds to load, you lose 50% of visitors. So, a slow-loading website can be frustrating for users, and they can navigate away from your site. However, there can be many causes for the slow website, but one of them is larger CSS files. In real applications, we need to write lots of CSS to style different web pages. So, we can minify the CSS files to reduce the size of CSS files. When we minify the CSS files, it removes the whitespaces, comments, etc., from the file, decreasing the size of the CSS ...
Read MoreLiquid Layout in CSS
As the name suggests, the meaning of the liquid layout is flooding layout. It changes the dimensions of the HTML elements according to the screen dimensions. Whenever we use the hard-coded dimension values for HTML elements, it creates a fixed layout with a 90% chance of overflow. So, it is best practice to use a liquid layout so the web can be compatible with every device. In this tutorial, we will learn to create a liquid layout using CSS. Syntax Users can follow the syntax below to create a liquid layout in CSS. Selector_1 { Width: 60%; ...
Read MoreModern CSS Cards
Nowadays, creating cards on a website is very important to show various data on the website. For example, on the home page of TutorialsPoint’s website, you will find different courses in the card format, and when you click on the card, it redirects you to the particular page of the course. Furthermore, if you go to any e-commerce store such as Amazon or Flipkart, they show products in the card format. The main benefit of creating a card is that we can show short information about the product with an image and full information on the product page. In this ...
Read MoreNeon Text Display Using HTML & CSS
Nowadays, creating Neon text on the web page is a trend to make it attractive. We can create a Neon text on the web page to generate an eye-catching effect and draw a user’s attention towards the important information that the web page contains. We can use neon texts with logos, heading, advertisements, etc., to highlight them. In this tutorial, we will customize the values of the text-shadow CSS property to create neon text. Syntax Users can follow the syntax below to create neon text using HTML and CSS. text-shadow: 0 0 1.5rem white; We used the ‘text-shadow’ CSS ...
Read More