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 on Trending Technologies
Technical articles with clear explanations and examples
How to create a split button dropdown with CSS?
A split button dropdown combines a primary action button with a secondary dropdown arrow button. This creates two clickable areas within the same button component - the main button for the primary action and the arrow for accessing additional options. Syntax .split-button { display: inline-flex; } .dropdown:hover .dropdown-content { display: block; } Creating the Button Structure First, create the HTML structure with two buttons side by side − .split-button { ...
Read MoreHow to style outline buttons with CSS?
Outline buttons are styled with borders and transparent backgrounds. The button text matches the border color, creating a clean, minimalist appearance. When hovered, these buttons typically fill with color for better user feedback. Syntax button { border: 2px solid color; background-color: transparent; color: border-color; } button:hover { background-color: fill-color; color: white; } Basic Outline Button Structure Outline buttons use the element with specific CSS classes for different button types − Success ...
Read MoreDTH Sensor Programming
DHT11 and DHT22 sensors are digital sensors that can measure temperature and humidity. The DHT22 is more expensive but offers better accuracy and wider temperature ranges compared to DHT11. These sensors communicate with microcontrollers like ESP32 using a single−wire digital protocol. Syntax #include "DHT.h" #define DHT_PIN pin_number #define DHT_TYPE DHT11 // or DHT22 DHT sensor_object(DHT_PIN, DHT_TYPE); DHT11 Specifications Parameter DHT11 DHT22 Temperature Range 0°C to 50°C −40°C to 80°C Humidity Range 20% to 80% 0% to 100% Temperature Accuracy ±2°C ±0.5°C Humidity Accuracy ...
Read MoreHow to create an image to zoom with CSS and JavaScript?
Image zoom effects allow users to see enlarged details of an image by hovering over different areas. This is commonly used in e-commerce websites and galleries to provide better product viewing experience. Syntax The image zoom effect combines CSS positioning and JavaScript event handling − .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; } .img-zoom-result { background-image: url(image.jpg); background-size: calculated-size; background-position: calculated-position; } ...
Read MoreThe Adafruit.io
Adafruit.io is a cloud-based IoT platform that enables real-time data visualization and device control through web dashboards. It provides free service with an intuitive interface for connecting IoT devices via WiFi, using authentication keys and feeds to manage data flow between devices and dashboards. In this article, we demonstrate how to connect an ESP32 microcontroller with a BMP180 sensor to an Adafruit.io dashboard for monitoring environmental data and controlling an LED remotely. Required Components ESP32 development board BMP180 sensor (temperature, pressure, altitude) Blue LED Breadboard and jumper wires Adafruit.io account Circuit Connections Connect ...
Read MoreHow to create a responsive portfolio gallery grid with CSS?
If you are a shutterbug and love photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily using CSS Grid or Flexbox. Syntax .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } Method 1: Using CSS Grid CSS Grid provides an efficient way to create responsive gallery layouts. The auto-fit and minmax() functions automatically adjust the number ...
Read MoreThe First IOT Program
To start learning IoT, first, it is important to learn how to make circuits using a breadboard and a microcontroller. Then it is important to control that circuit using a program. There are some simulators available to make the beginner of IoT learn both these concepts without even having the IoT devices available. However, to get real results, using the circuit components and making the actual circuit is important. In this article, using two different examples, the way to start IoT programming is given. In example 1, the Wokwi simulator is used and in example 2, the actual circuit using ...
Read MoreHow to add a border to an image with CSS?
To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc. Syntax img { border: width style color; } Basic Border Example The following example adds a solid border to an image − img { ...
Read MoreHow to create a thumbnail image CSS?
A thumbnail image in CSS is a small, clickable preview of a larger image that typically opens the full-size version when clicked. Thumbnails are commonly used in galleries, portfolios, and product listings to save space while providing visual previews. Syntax img { width: value; height: value; border: width style color; border-radius: value; } img:hover { box-shadow: values; transform: scale(value); } Example: Basic Thumbnail with Hover Effect The following example ...
Read MoreHow to create a responsive image with CSS?
Responsive images automatically scale with the screen size, ensuring optimal display across all devices. The key CSS properties for creating responsive images are width, max-width, and height. Syntax img { max-width: 100%; height: auto; } Method 1: Using max-width Property The most common approach uses max-width: 100% to ensure the image never exceeds its container width − .responsive-img { max-width: 100%; ...
Read More