<style>
.flag {
width: 200px;
height: 150px;
background: linear-gradient(to bottom,
red 33.33%,
green 33.33%,
green 66.66%,
blue 66.66%
);
border: 1px solid black;
}
</style>
<div class="flag"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex and Grid Layout</title>
<style>
/* Flexbox container */
.flex-container {
display: flex;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
flex: 1;
text-align: center;
}
/* Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #e0e0e0;
padding: 20px;
margin-top: 20px;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<!-- Flexbox Layout -->
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
<!-- Grid Layout -->
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
<div class="grid-item">Grid Item 5</div>
<div class="grid-item">Grid Item 6</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabindex Example</title>
<style>
.focusable {
padding: 10px;
margin: 5px;
border: 1px solid #4CAF50;
}
.focusable:focus {
outline: 2px solid #FF5722;
}
</style>
</head>
<body>
<h2>Tabindex Example</h2>
<!-- Tabindex Example -->
<div tabindex="1" class="focusable">Item 1 (tabindex="1")</div>
<div tabindex="3" class="focusable">Item 3 (tabindex="3")</div>
<div tabindex="2" class="focusable">Item 2 (tabindex="2")</div>
<h3>Default Tab Order</h3>
<button class="focusable">Button 1 (No tabindex)</button>
<button class="focusable">Button 2 (No tabindex)</button>
<h3>Non-Focusable Element</h3>
<p tabindex="-1">This paragraph is skipped in tab order (tabindex="-1").</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed, Relative, and Absolute Positioning</title>
<style>
/* Container to demonstrate positioning */
.container {
position: relative;
width: 100%;
height: 300px;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 20px;
margin-top: 20px;
}
/* Relative positioning */
.relative-box {
position: relative;
width: 150px;
height: 100px;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px;
}
/* Absolute positioning inside the relative box */
.absolute-box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 50px;
background-color: #FF5722;
color: white;
padding: 10px;
text-align: center;
}
/* Fixed positioning */
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
width: 200px;
background-color: #2196F3;
color: white;
padding: 10px;
text-align: center;
border-radius: 4px;
z-index: 1000; /* Ensures it stays on top */
}
</style>
</head>
<body>
<h2>Fixed, Relative, and Absolute Positioning</h2>
<!-- Container for positioning demonstration -->
<div class="container">
<div class="relative-box">
Relative Box
<div class="absolute-box">
Absolute Box
</div>
</div>
</div>
<!-- Fixed element that stays on screen while scrolling -->
<div class="fixed-box">
Fixed Box
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block vs Inline Elements</title>
<style>
.block-element {
display: block; /* Makes the element occupy the full width and start on a new line */
background-color: #4CAF50; /* Sets a green background color */
color: white; /* Sets text color to white */
padding: 10px; /* Adds padding inside the element */
margin: 5px 0; /* Adds margin above and below the element */
}
.inline-element {
display: inline; /* Keeps the element inline with other elements */
background-color: #2196F3; /* Sets a blue background color */
color: white; /* Sets text color to white */
padding: 5px; /* Adds padding inside the element */
margin: 0 5px; /* Adds margin on the left and right of the element */
}
</style>
</head>
<body>
<!-- Section for block elements demonstration -->
<h2>Block Element Example</h2>
<div class="block-element">Block Element 1</div>
<div class="block-element">Block Element 2</div>
<div class="block-element">Block Element 3</div>
<!-- Section for inline elements demonstration -->
<h2>Inline Element Example</h2>
<span class="inline-element">Inline Element 1</span>
<span class="inline-element">Inline Element 2</span>
<span class="inline-element">Inline Element 3</span>
</body>
</html>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Display vs Visibility</title>
<style>
.display-none { display: none; }
.display-block { display: block; background-color: lightblue; padding: 10px; margin-bottom: 10px; }
.visibility-hidden { visibility: hidden; background-color: lightcoral; padding: 10px; margin-bottom: 10px; }
.visibility-visible { visibility: visible; background-color: lightgreen; padding: 10px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Display vs Visibility</h1>
<div class='display-block'>This is a block element with display: block</div>
<div class='display-none'>This element is hidden with display: none</div>
<p>'display: none' removes the element from the layout completely, so it is neither visible nor does it occupy space.</p>
<div class='visibility-visible'>This is a visible element with visibility: visible</div>
<div class='visibility-hidden'>This element is hidden with visibility: hidden but still occupies space</div>
<p>'visibility: hidden' makes the element invisible, but it still occupies its space in the layout.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin vs Padding</title>
<style>
.margin-example {
margin: 20px; /* Creates space outside the border of the element */
background-color: lightblue;
padding: 10px;
border: 2px solid darkblue;
}
.padding-example {
padding: 20px; /* Creates space inside the border of the element */
background-color: lightgreen;
border: 2px solid darkgreen;
}
</style>
</head>
<body>
<h1>Margin vs Padding</h1>
<!-- Margin Example -->
<div class="margin-example">This box has a margin of 20px.</div>
<p>Margin creates space outside the element's border, pushing the element away from its surrounding elements.</p>
<!-- Padding Example -->
<div class="padding-example">This box has a padding of 20px.</div>
<p>Padding creates space inside the element's border, increasing the distance between the content and the border.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design Example</title>
<style>
/* Basic Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.box {
background-color: lightblue;
padding: 20px;
margin: 10px;
flex: 1 1 45%;
box-sizing: border-box;
text-align: center;
}
/* Responsive Layout: For screens less than 768px */
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.box {
flex: 1 1 80%;
}
}
/* Responsive Layout: For screens less than 480px */
@media screen and (max-width: 480px) {
header {
font-size: 18px;
}
.box {
flex: 1 1 100%;
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Design Example</h1>
</header>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
<p>This example demonstrates a responsive web design layout using flexbox. The layout adjusts based on screen sizes:
- For screens less than 768px wide, the boxes stack vertically and are aligned in the center.
- For screens smaller than 480px wide, the font size is reduced, and the boxes take up the full width of the screen.
This ensures that the design is adaptable to various screen sizes, making the content accessible and user-friendly on different devices.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of Box Model</title>
<style>
/* Content-Box (default) */
.content-box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box; /* Default value */
background-color: lightblue;
margin-bottom: 20px;
}
/* Border-Box */
.border-box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightgreen;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Types of Box Model</h1>
<!-- Content-Box Model -->
<div class="content-box">
Content-Box Model: The total width is the content width + padding + border.
</div>
<p>The Content-Box model (default value) means that the width and height of an element apply to the content area only. Padding and borders are added outside the content box, increasing the overall size of the element. In this example, the width of 200px applies only to the content, and padding and borders are added on top of that.</p>
<!-- Border-Box Model -->
<div class="border-box">
Border-Box Model: The total width includes padding and border.
</div>
<p>The Border-Box model includes padding and borders within the specified width and height. This means the content area shrinks to fit the total size, including padding and borders. In this example, the total width remains 200px, and the padding and borders are contained within this width.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Classes vs Pseudo-Elements</title>
<style>
/* Pseudo-Class Example */
* {
font-size: large;
}
a:hover {
color: red;
text-decoration: underline;
}
/* Pseudo-Element Example */
p::first-line {
font-weight: bold;
color: blue;
}
p::after {
content: " (This is added using a pseudo-element)";
color: gray;
}
</style>
</head>
<body>
<h1>Pseudo-Classes vs Pseudo-Elements</h1>
<p>Pseudo-classes are used to define the special state of an element, such as when a user hovers over a link or
selects a specific child element.</p>
<a href="#">Hover over this link to see a pseudo-class in action.</a>
<p>Pseudo-elements are used to style specific parts of an element, such as the first line or the first letter. They
can also add content to an element.</p>
<p>This paragraph demonstrates the use of pseudo-elements.<br /></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample webpage.</p>
<img height="" width="" src="image.jpg">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with Latest HTML Elements</title>
</head>
<body>
<h1>Modern Form Example</h1>
<form action="/submit" method="POST">
<!-- Name -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Phone -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required><br><br>
<!-- URL -->
<label for="website">Website:</label>
<input type="url" id="website" name="website"><br><br>
<!-- Date -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<!-- Time -->
<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment"><br><br>
<!-- Range -->
<label for="experience">Experience (0-10 years):</label>
<input type="range" id="experience" name="experience" min="0" max="10"><br><br>
<!-- Color -->
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor"><br><br>
<!-- Number -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100"><br><br>
<!-- File -->
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" accept=".pdf, .docx"><br><br>
<!-- Checkbox -->
<label for="agree">
<input type="checkbox" id="agree" name="agree" required>
I agree to the terms and conditions
</label><br><br>
<!-- Radio -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<!-- Select -->
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select</option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<!-- Textarea -->
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>
<!-- Submit -->
<button type="submit">Submit</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section vs Article</title>
</head>
<body>
<h1>Understanding Section and Article Tags</h1>
<!-- Section Example -->
<section>
<h2>About Us</h2>
<p>This section contains information about our company.</p>
<p>We aim to provide quality services to our customers.</p>
</section>
<!-- Article Example -->
<article>
<h2>Latest News</h2>
<p>The new product launch has been a great success.</p>
<p>Stay tuned for more updates in our blog section.</p>
</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Attributes Example</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert(`User ID: ${button.dataset.userid}, Role: ${button.dataset.role}`);
});
});
</script>
</head>
<body>
<h1>Using Data Attributes</h1>
<button data-userid="12345" data-role="admin">Click Me</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation Methods</title>
<style>
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Create an element
const createBtn = document.querySelector('#createElement');
createBtn.addEventListener('click', () => {
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.querySelector('#output').appendChild(newElement);
});
// Modify an element
const modifyBtn = document.querySelector('#modifyElement');
modifyBtn.addEventListener('click', () => {
const firstElement = document.querySelector('#output p');
if (firstElement) {
firstElement.textContent = 'This paragraph has been modified.';
}
});
// Delete an element
const deleteBtn = document.querySelector('#deleteElement');
deleteBtn.addEventListener('click', () => {
const firstElement = document.querySelector('#output p');
if (firstElement) {
firstElement.remove();
}
});
// Read an element
const readBtn = document.querySelector('#readElement');
readBtn.addEventListener('click', () => {
const firstElement = document.querySelector('#output p');
if (firstElement) {
alert(`Text of first element: ${firstElement.textContent}`);
} else {
alert('No element to read.');
}
});
});
</script>
</head>
<body>
<h1>DOM Manipulation Methods</h1>
<button id="createElement">Create Element</button>
<button id="modifyElement">Modify Element</button>
<button id="deleteElement">Delete Element</button>
<button id="readElement">Read Element</button>
<div id="output">
<!-- Elements will appear here -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute and Relative URLs</title>
<style>
*{
font-size: large;
}
</style>
</head>
<body>
<h1>Absolute and Relative URLs</h1>
<!-- Absolute URL Example -->
<a href="https://www.example.com">Visit Example.com</a>
<p>An absolute URL contains the full address, starting with a protocol (e.g., https://), and it points to a resource on the web.</p>
<!-- Relative URL Example -->
<a href="/about.html">Visit About Page</a>
<p>A relative URL points to a resource relative to the current page's location, without including the domain name or protocol.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of Lists</title>
<style>
* {
font-size: large;
}
.list-container {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Types of Lists</h1>
<!-- Ordered List -->
<div class="list-container">
<h2>Ordered List (ol)</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<p>An ordered list displays items in a numbered sequence.</p>
</div>
<!-- Unordered List -->
<div class="list-container">
<h2>Unordered List (ul)</h2>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<p>An unordered list displays items with bullet points.</p>
</div>
<!-- Description List -->
<div class="list-container">
<h2>Description List (dl)</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language for structuring web content.</dd>
<dt>CSS</dt>
<dd>A style sheet language for designing web pages.</dd>
</dl>
<p>A description list contains terms and their descriptions. It uses dl for the list, dt for terms, and dd for descriptions.</p>
</div>
</body>
</html>