In SASS, the directive is a special symbol that starts with the ‘@’ character. There are various kinds of directives that are used in the SCSS code, instructing the compiler to process the code in a particular way. In this tutorial, we will learn about the @error and @debug directives used to throw an error or debug the code, respectively. @error directive in SASS The error directive is represented like ‘@error’, and we can use it whenever we require to throw an error. For example, if some condition doesn’t meet, we require to throw an error. Syntax Users ... Read More

The shimmer effect is an animation effect, and many websites add the shimmer effect in the loading indicator. It is an illusion of movement in the web page or HTML element. We can create a shimmer effect using various CSS properties such as linear gradients, keyframes, animation, background position, transform, etc. Basically, the shimmer effect adds alternative light and dark moving lines. Here, we will learn to create a shimmer effect using CSS. Syntax Users can follow the syntax below to create a shimmer effect using the CSS. .shimmer-div { background: linear-gradient animation: ... Read More

While creating the responsive design for the application, it is also necessary to create a responsive card designs. Sometimes, developers require to add a hover effect on the card. So, when the user hovers over the card, it should change the style of the card. Here, we will learn to add a hover effect on the card and change the CSS whenever the user hovers over the card. Syntax Users can follow the syntax below to add the hover effect to the card. .card:hover { /* add css to set to element on hover */ ... Read More

To make a responsive design of the application, we also require to make an image responsive. If images are not responsive, overflow occurs in the app, and it looks worst. So, we also require to increase or decrease the images' dimensions proportional to the parent element's dimensions. Here, we will learn various ways to resize images proportionally with CSS. Syntax Users can follow the syntax below to resize the image proportionally using the ‘width’ CSS property. img { width: 100%; height: auto; } In the above syntax, we have set 100% width ... Read More

Sometimes, the task is to find the user’s current position and then to show the location coordinates on the webpage or show the location on a map. Using HTML and javascript code this process of getting the current location of the user in an HTML page is demonstrated in this article. This is shown by using two different examples. In the first example, the current location of the user can be fetched and then the location coordinates are displayed on the HTML page. In the second example, an open-source Leaflet map library is used to fetch and then display the ... Read More

Sometimes, the task is change the page themes and to use different CSS files on the same page content. In such tasks the need is to fetch a CSS and load it dynamically while selecting a theme. In this case the CSS file has to be accessed, loaded and even selected through a javascript program. Using HTML and javascript code this process of loading the CSS file is demonstrated in this article. This is shown by using two different examples. In the first example, a CSS file is selected on the windows load event. In the second example, two buttons ... Read More

Sometimes, the task is to click a link in one container and to display the content in another container. In HTML, iframes are used to easily show the content in specified area on the page. In this article, using two different examples, links are used to load an iframe using another iframe links. In example 1, the links in the upper Iframe are used to display two different pictures in the bottom iframe. In example 2, using the links in the upper iframe the video content is displayed both in the bottom iframe as well in the upper iframe. ... Read More

Sometimes, the task is to fetch a page from a subfolder and then to come back to the page in the parent folder. Using HTML code this process of providing a link to back out of a folder using a tags and href tags is demonstrated in this article. This is shown by using two different examples. In the first example, a text link with a relative path is used for coming back to the page of parent folder. In the second example, tag with the SVG link is used to back out of a folder. In this second ... Read More

Updating the state of a React component is an essential part of building interactive and dynamic web applications. State management can become challenging as components become more complex and nested. This article will cover how to update the state of React components using callback functions, providing you with two different approaches and working examples to make your development process smoother. Algorithm Understand the state management in React components Choose the right approach for updating the state Implement the chosen approach with code and explanations Provide working examples to demonstrate the usage of the approach Conclude with the benefits of ... Read More

When building web applications, developers often need to create buttons with dynamic styles. One of the most efficient ways to do this is by using the map() method in JavaScript. This method allows you to render multiple buttons with different styles based on their data. However, sometimes you might want to change the CSS class of a button dynamically based on user interaction or other events. In this article, we will discuss two different approaches to switch CSS class between buttons rendered with map() in JavaScript. Algorithm The algorithm to switch CSS class between buttons rendered with map() involves the ... Read More