Explanation: Responsive web design ensures that a web page looks great on all devices, from desktop computers to mobile phones. The key to responsive design is the use of the <meta name="viewport"> tag and media queries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: #ddd;
padding: 20px;
width: 30%;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.box {
width: 80%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Design Example</h1>
</header>
<main>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</main>
</body>
</html>Output: On desktop screens, three boxes will be displayed in a row. On smaller screens, the boxes will stack vertically.
Explanation: Flexbox and CSS Grid are powerful layout systems in CSS, allowing for more complex and flexible designs. Flexbox is a one-dimensional layout system, while Grid is a two-dimensional system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-around;
margin: 20px;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>Output: The boxes will be displayed horizontally, evenly spaced across the container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px;
}
.box {
background-color: #ff5722;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>Output: The boxes will be displayed in a 3-column grid layout.
Explanation: SVG is a vector image format that allows graphics to be scalable without losing quality. It is useful for icons and illustrations that need to remain crisp on any screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
</head>
<body>
<h2>SVG Circle Example</h2>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="yellow" />
</svg>
</body>
</html>Output: A yellow circle with a black border is displayed.
Explanation: HTML5 introduced several new input types, including search, tel, color, and datetime, which help improve user experience and validation in forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Input Types</title>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="search" id="search" placeholder="Enter search term"><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" placeholder="Enter phone number"><br><br>
<label for="color">Favorite Color:</label>
<input type="color" id="color"><br><br>
<label for="datetime">Choose a Date and Time:</label>
<input type="datetime-local" id="datetime"><br><br>
<label for="file">Upload File:</label>
<input type="file" id="file"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>Output: The form includes inputs for search, phone number, color picker, date/time, and file upload.