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
HTML Articles
Page 140 of 151
Creating a Quiz Tool: A Complete Beginner\'s Guide
Creating a quiz tool is a great way to learn web development fundamentals. This guide will walk you through building an interactive quiz application using HTML for structure, CSS for styling, and JavaScript for functionality. Project Overview Our quiz tool will include the following features − Question Display: Show one question at a time with multiple choice options User Interaction: Allow users to select answers using radio buttons Score Tracking: Keep track of correct answers and display final score Navigation: ...
Read MoreBuild a Technical Documentation Website Using HTML and CSS
Learn how to design a technical documentation website using HTML and CSS. This layout is optimized for programming documentation with user-friendly navigation and clean content organization. HTML provides the semantic structure while CSS handles styling and responsive design, creating a professional documentation experience similar to popular programming references. Navigation What is C++ Objects & Classes Inheritance Polymorphism Main Documentation Content Documentation sections with detailed explanations Code examples with syntax highlighting Structured content with proper typography #include using namespace std; int main() { cout
Read MoreHow to Resize SVG in HTML?
Every HTML document can contain different image formats, such as PNG, JPEG, SVG, GIF, etc. that can be adjusted according to your needs. This article will explore various ways to resize an SVG image in HTML. What is SVG? SVG (Scalable Vector Graphics) is an XML-based image format used in web development. It can be scaled to any size without losing quality, making it ideal for logos and icons. These images are resolution-independent, meaning they maintain crisp edges at any size. Syntax /* CSS approach */ svg { width: value; ...
Read MoreHow to Apply Global Font to the Entire HTML Document?
Sometimes we want to set a base attribute to everything and allow more specific selectors to adjust it for certain elements as needed. There are also cases, especially when doing brief temporary testing, where we want a font to apply to all text no matter what. Syntax /* Universal selector approach */ * { font-family: font-name; } /* With !important for absolute priority */ * { font-family: font-name !important; } Method 1: Using Universal Selector We can use the CSS universal selector (*) to select ...
Read MoreNeumorphism Loading Spinner in HTML & CSS
In this article, we will create a Neumorphism Loading Spinner using HTML and CSS. The loading spinner is a common UI element used to indicate a process in progress, such as loading content or waiting for data from the server. We'll add a modern touch to it using the Neumorphism design technique. Neumorphic designs give a 3D look by combining highlights and shadows around elements, making them appear to protrude or sink into the surface. Syntax .neumorphic-element { box-shadow: positive-x positive-y blur-radius dark-color, ...
Read MoreHow to Create Glassmorphism Sidebar in HTML and CSS?
Glassmorphism is a design trend that makes elements appear translucent on the user interface, resembling frosted glass. This effect creates depth and visual hierarchy by making elements appear to float above the background with a semi-transparent, blurred appearance. Key Properties for Glassmorphism The glassmorphic effect is achieved using these CSS properties − backdrop-filter: blur() − Creates the frosted glass blur effect background-color with alpha − Provides semi-transparency border − Adds subtle borders for definition box-shadow − Creates depth and elevation ...
Read MoreHTML and CSS Projects
To build your career in front-end development, projects are essential and you should start with HTML and CSS. Before starting these projects, we recommend creating basic components like layouts, lists, tables, and forms. HTML Structure CSS Styling Projects ...
Read MoreHow to add a Login Form to an Image using HTML and CSS?
A login form on an image creates an attractive, modern website design commonly used by restaurants, event organizers, and businesses. This approach overlays a functional login form on a background image, making the website more visually appealing than standard forms. Syntax .container { background-image: url('image-path'); background-size: cover; position: relative; } form { position: absolute; /* positioning and styling properties */ } Approach To create a login form on an image, follow these steps ...
Read MoreCreate a Circular Progress Bar using HTML and CSS
A progress bar displays the status of a procedure within an application. A progress bar shows how much of the process has already been completed and how much is still left to do. The various components of the progress bar will be designed using HTML, and the progress bar itself may be modified using CSS properties. Progress bars are frequently used on websites to highlight particular data in a more appealing way for users. One advantage of employing a circle progress bar over a standard (horizontal) progress bar is that you can accommodate more progress bars in one row, ...
Read MoreCreate a Search Bar using HTML and CSS
To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. A search box is one of the most commonly used components in a website which makes navigation easier for users. Syntax /* Basic search bar structure */ .search-container { display: flex; align-items: center; } input[type="text"] { padding: value; border: value; border-radius: value; } button { padding: value; background-color: ...
Read More