In today’s time, when you right click on any web page there will be a list of some with some options and functionality pops up. This popup menu is also known as the context menu which is a default popup menu given by browser. The items in the list of this menu varies in different browsers. Some browsers provide more functionality while some provides limited. But here’s a way to add your own custom context menu or the right click menu on your web page with as much as options as you want. But before adding the custom context menu, ... Read More

In CSS or the Cascading Style Sheet, there are many units available to represent the values of different properties in different ways according to the need. The CSS properties like: font-size, height, width and line-height etc are used to define the different properties to a container. The values of these properties can be assigned in the form of different units. In this article, we are going to learn about the different CSS units in details and implement them practically to understand use of each one of them. There are many CSS units available in CSS, but in this article ... Read More

SASS is a CSS pre-processor, that stands for Syntactically Awesome Style Sheet. The SASS code is written just like a scripting language like JavaScript, but at the time of compilation it is converted into CSS and compiled as CSS in the browser. SASS can be used with any version of CSS. It is used to enhance and advance the way of writing the code in normal CSS. In normal workspace, we are used to of writing the whole code in one single file only, that makes our code complex to read and understand for any other developer. SASS allow us ... Read More

In this article, we will learn the different utility classes in Materialize CSS, but before proceeding, let's know what Materialize CSS is. Materialize CSS is a popular front-end development framework that offers various features and utilities to create responsive and appealing web applications. One of the essential components of Materialize CSS is its utility classes which offer an easy and efficient approach to adding styles to HTML elements Utility classes are predefined CSS classes that can be applied to any HTML element to achieve a particular styling. Here are Some Utility Classes that you can use Color utility classes ... Read More

CSS :even and :odd psuedo classes are used to select or target the alternative child elements. CSS even and odd psuedo class is used with list items to create alternate style like text color, background which increases the readability. In this article, we are having an unordered list. We will be understanding use of :even and :odd pseudo-classes with list items. CSS odd Psuedo-Class CSS even Psuedo-Class CSS odd Psuedo-Class The :odd pseudo-class is used to select the HTML elements which are at odd positions. We can use the :odd ... Read More

It is crucial to know about viewport in the visual formatting model for any web developer to develop a responsive website. The viewport is an area that is visible in the browser window or mobile device screen. In this tutorial, we will learn about the role of viewport in visual formatting models with examples. What is a Visual Formatting Model? The visual formatting model allows web browsers to decide how to show the HTML content on the web page. It provides the visualization for the content. The visual formatting model shows the content on the web page according to the ... Read More

In today's web development landscape, creating a website that works well across different devices and platforms is essential. This is where Progressive Enhancement comes in. Progressive Enhancement is a web design philosophy that focuses on building a website or application with a basic, functional version that works on all devices and browsers, and then gradually enhancing the website's features for more capable devices and browsers. In this tutorial, we will discuss what Progressive Enhancement is, why it is important, and how to implement it in our web design process. Core Principles of Progressive Enhancement The core principles of Progressive Enhancement ... Read More

The primer CSS is a framework allowing users to add pre-defined styles to the HTML elements. We can use primer CSS to style the various HTML elements such as buttons, links, forms, etc. In this tutorial, we will learn to style the HTML links with various colors using the primer CSS. Syntax Users can follow the syntax below to use the primer CSS to style the HTML link. Primary Link In the above syntax, we used the ‘Link-primary’ class with the ‘a’ tag to style it. Example 1 We can style HTML links using the various class names ... Read More

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 More

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 More