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
Front End Technology Articles
Page 486 of 652
How to create a list grid view with CSS and JavaScript?
A list grid view allows users to switch between displaying content in a grid layout (multiple columns) or a list layout (single column). This is commonly used in dashboards, galleries, and data presentation interfaces where users need different viewing options. Syntax /* Grid Layout */ .column { float: left; width: 50%; } /* List Layout */ .column { width: 100%; } Example: Interactive List Grid View The following example creates a switchable list/grid view with JavaScript − ...
Read MoreHow to create an expanding grid with CSS and JavaScript?
An expanding grid is a dynamic layout that displays a compact grid of columns initially, then expands to show detailed content when a column is clicked. This creates an interactive user experience where users can explore content without navigating to different pages. Syntax /* Basic grid column structure */ .column { float: left; width: 33.33%; cursor: pointer; } /* Expanded content area */ .expanded-content { display: none; width: 100%; } HTML Structure Create ...
Read MoreHow to create a 2-column layout grid with CSS?
A 2-column layout grid divides the webpage into two equal sections, typically positioned side by side. This layout is commonly used for creating sidebars, comparison layouts, or split-screen designs using CSS positioning or modern layout techniques. Syntax .column { width: 50%; float: left; /* or use flexbox/grid */ } Method 1: Using Fixed Positioning This method uses fixed positioning to create two columns that stay in place when scrolling − body { ...
Read MoreHow to style a header with CSS?
To style a header with CSS, we can use various CSS properties to make it look attractive. Headers are important elements that define the structure and visual hierarchy of a webpage. Syntax header { background-color: value; color: value; font-family: value; text-align: value; padding: value; } Common CSS Properties for Header Styling PropertyDescription background-colorSets the background color of the header colorChanges the text color font-familySpecifies the font type text-alignAligns text horizontally paddingAdds space inside ...
Read MoreHow to create a responsive contact section for web pages?
A responsive contact section is a crucial component of any website that allows visitors to reach out through a form while maintaining proper layout across all device sizes. This section typically includes contact form fields and an accompanying image that adapts seamlessly when the browser is resized. Syntax /* Basic structure for responsive contact section */ .contact-container { display: flex; max-width: 1200px; margin: 0 auto; } @media screen and (max-width: 768px) { .contact-container { ...
Read MoreHow to center your website horizontally with CSS?
To center your website horizontally with CSS, set a div where all the content of the website will be placed. Align it in a way to center it horizontally. For that, we will use the margin and max-width property. Syntax .container { max-width: value; margin: auto; } Set the Website's Main div Set a div and within that some elements to make it somewhat look like a sample website − Center website horizontally example Lorem ...
Read MoreHow to create a responsive website that will work on all devices, PC, laptop, tablet, and phone?
A responsive website adapts to different screen sizes and works seamlessly across all devices including desktops, tablets, and mobile phones. The key technique for creating responsive designs is using CSS Media Queries along with flexible layouts. Syntax @media screen and (max-width: value) { /* CSS rules for smaller screens */ } Method 1: Using Media Queries Media queries allow you to apply different CSS styles based on screen size. Here's how to create a complete responsive website − ...
Read MoreHow to use media queries for common device breakpoints with CSS?
Media queries are used on web pages to create responsive designs by applying different styles based on screen sizes. They allow you to target specific devices like phones, tablets, and desktop computers with custom CSS rules. Syntax @media media-type and (condition) { /* CSS rules */ } Common Device Breakpoints The standard device breakpoints used in responsive web design are − DeviceScreen WidthMedia Query Mobile PhonesLess than 768pxmax-width: 767px Tablets768px to 991pxmin-width: 768px Small Laptops992px to 1199pxmin-width: 992px Large Screens1200px and abovemin-width: 1200px Example: Responsive Background ...
Read MoreHow to create a quotes slideshow with CSS and JavaScript?
A quotes slideshow is an interactive component that displays inspirational quotes with smooth navigation controls. It combines HTML structure, CSS styling, and JavaScript functionality to create an engaging user experience with previous/next buttons and clickable dot indicators. Syntax .slideContainer { position: relative; max-width: value; } .Slide { display: none; /* Hide all slides by default */ } .prevBtn, .nextBtn { position: absolute; top: 50%; } HTML Structure First, create the HTML structure ...
Read MoreHow to create a popup chat window with CSS and JavaScript?
On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on website hosting websites. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS and JavaScript. Let us see how. Syntax .chat-button { position: fixed; bottom: value; right: value; display: block; } .chat-window { position: fixed; display: ...
Read More