<!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>
6Title
Display vs Visibility
Description
Full Code
<!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>
7Title
Margin vs Padding
Description
Full Code
<!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>
8Title
Responsive Web Design Example
Description
Full Code
<!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>
9Title
Types of Box Model
Description
Full Code
<!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>
10Title
Pseudo-Classes vs Pseudo-Elements
Description
Full Code
<!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 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>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>
16Title
Absolute and Relative URLs
Description
Full Code
<!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>
17Title
Types of Lists
Description
Full Code
<!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>
