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 by Souvik Chakraborty
13 articles
Tic Tac Toe Game with HTML, CSS, and JavaScript
Tic Tac Toe is a well-known two-player board game where players take turns placing their marks (X or O) on a 3x3 grid. The first player to get three marks in a row horizontally, vertically, or diagonally wins. If all cells are filled without a winner, the game ends in a draw. In this article, we will build a complete Tic Tac Toe game using HTML, CSS, and JavaScript. The game includes features like reset, undo, sound effects, and a responsive design. Game Features HTML Structure − Creates a 3x3 grid using div elements where each ...
Read MoreLearn how to generate a Resume with HTML and CSS
Creating a professional resume with HTML and CSS allows you to build an attractive, customizable document that can be easily shared digitally. A well-structured resume showcases your skills and experience effectively while maintaining a professional appearance across different devices. Syntax /* Basic Resume Layout Structure */ .container { display: grid; grid-template-columns: 1fr 2fr; max-width: 1000px; margin: 0 auto; } .left-section { background-color: #333; color: white; padding: 20px; } ...
Read MoreHow to Show a Word Document in an HTML Page Using JavaScript?
To show a Word document in an HTML page using JavaScript is important where you are required to read Word documents within your browser. This article will discuss three approaches to accomplishing this in JavaScript, allowing you to load .docx files and display them on your webpage to the user. In this article, our task is to show a word document in an HTML page using JavaScript. We will be either using a .docx file from our system or using URL. Approaches to Show Documents in HTML Using Mammoth.js Library Using iFrame with Microsoft Office Viewer ...
Read MoreHow to Set an HTML Date Picker Max Date to Today?
In HTML, a date picker is a useful input control that enables users to select specific dates on websites or forms. By default, date pickers accept any date, but you can limit the selectable date range using the max attribute to restrict selection to today or earlier dates. Syntax What is a Date Picker? A date picker is a user interface component that allows users to select dates through a calendar interface. It's commonly used in forms for applications like reservation systems, scheduling software, or collecting birthdates. Setting Max Date to Today ...
Read MoreHow to repair broken pictures in HTML?
Images play an important role in increasing user interest in content and enriching the appearance of websites. However, broken images can occur due to wrong links, missing files, or server problems, which negatively affects user experience. In this article, we will explore how to repair broken pictures in HTML using different approaches to ensure graceful handling of image loading failures. Approaches to Repair Broken Pictures Using alt Attribute Using onerror Event Using CSS Fallback Using alt Attribute The alt attribute provides alternative text that displays when an image cannot be loaded. This text ...
Read MoreHow to Hide Scrollbar Using CSS?
To hide scrollbar using CSS, we will understand different approaches. Scrollbars are core components of web browsers that allow users to navigate content areas larger than the viewable window. We can hide scrollbars while maintaining scrolling functionality using the overflow property. Syntax selector { overflow-x: value; overflow-y: value; } /* Or shorthand */ selector { overflow: value; } Possible Values ValueDescription visibleContent is not clipped, may render outside the element hiddenContent is clipped and scrollbars are hidden scrollContent is clipped but ...
Read MoreHow to Separate Header from Body in HTML?
To separate header from body in HTML, you can create visual and structural distinction between the header section and the main content. The header typically contains navigation, titles, and introductory elements, while the body holds the primary content of the webpage. In this article, we will explore different approaches to effectively separate the header from the body content using HTML structure and CSS styling. Approaches to Separate Header from Body Using Semantic HTML Tags Using CSS Styling Using Multiple Headers Method 1: Using Semantic HTML Tags HTML5 provides semantic tags that help create ...
Read MoreHow to Decompile an HTML File?
Decompiling an HTML file refers to examining and understanding the source code that creates a webpage. Unlike compiled programming languages, HTML is already in human-readable format, making it easily accessible for analysis and learning purposes. In this article, we will explore various methods to examine and work with HTML file content. Method 1: Viewing Source Code in Browser The most straightforward approach to examine HTML code is through your web browser's built-in source viewing feature. Steps Navigate to the webpage you want to examine Right-click anywhere on the page and select "View Page Source" ...
Read MoreHow to Compare Two HTML Elements?
Comparing HTML elements in JavaScript is a common requirement when building dynamic web applications. You might need to check if two elements have the same tag name, classes, content, or other properties. This article explores two effective methods for comparing HTML elements using JavaScript. Method 1: Manual Element Comparison Manual comparison gives you complete control over which properties to compare. This method directly checks specific attributes like tag name, class name, and content − Manual HTML Elements Comparison ...
Read MoreHow do I CSS transition a modal dialog element when it opens?
CSS transitions can significantly improve the user experience of modal dialogs by providing smooth animations when they open and close. Using the modern HTML element combined with CSS transitions creates professional-looking modals that feel responsive and polished. Syntax dialog { transition: property duration timing-function delay; } Basic Modal Structure First, create the HTML structure with a button to trigger the modal and the dialog element itself − button { padding: 10px ...
Read More