Assignments Of Class 24: Introduction to Responsive Design
Assignment 1: Create a Fluid Layout for a Web Page
Objective: Build a webpage with a fluid layout that adjusts to different screen sizes.
Steps:
1. Create an HTML page with a header, navigation bar, main content area, and footer.
2. Set the width of the header and footer to 100%
.
3. Set the width of the navigation bar to 100%
, but make the links inside it display horizontally.
4. Ensure that the main content area adjusts its width based on the browser size, using percentage values.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fluid Layout
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Fluid Layout Website
</h1>
</header>
<nav>
<ul>
<li><a href="#">Home
</a></li>
<li><a href="#">About
</a></li>
<li><a href="#">Contact
</a></li>
</ul>
</nav>
<main>
<section class="content">
<p>This is a fluid layout where the width adjusts automatically based on the screen size.
</p>
</section>
</main>
<footer>
<p>© 2024 Fluid Layout
</p>
</footer>
</body>
</html>
css
body {
margin:
0;
padding:
0;
font-family: Arial, sans-serif;
}
header,
footer {
width:
100%;
text-align: center;
background-color: lightblue;
padding:
10px
0;
}
nav
ul {
list-style: none;
padding:
0;
text-align: center;
}
nav
ul
li {
display: inline;
margin-right:
20px;
}
.content {
width:
100%;
padding:
20px;
text-align: center;
}
Assignment 2: Create a Responsive Navigation Menu
Objective: Design a navigation menu that adjusts for both desktop and mobile views.
Steps:
1. Create a basic HTML structure with a navigation menu.
2. Style the navigation bar so that it displays horizontally on desktop screens and as a dropdown menu on smaller screens.
3. Use media queries to hide the menu items on small screens and display a hamburger icon instead.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Menu
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div class="menu">
<ul class="nav-links">
<li><a href="#">Home
</a></li>
<li><a href="#">About
</a></li>
<li><a href="#">Services
</a></li>
<li><a href="#">Contact
</a></li>
</ul>
<div class="hamburger">☰</div>
</div>
</nav>
</body>
</html>
css
body {
font-family: Arial, sans-serif;
margin:
0;
padding:
0;
}
nav {
background-color:
#333;
padding:
10px;
}
.nav-links {
list-style-type: none;
padding:
0;
text-align: center;
}
.nav-links
li {
display: inline;
margin-right:
20px;
}
.nav-links
a {
color: white;
text-decoration: none;
}
.hamburger {
display: none;
font-size:
30px;
color: white;
cursor: pointer;
}
@media (
max-width:
768px) {
.nav-links {
display: none;
text-align: left;
width:
100%;
}
.nav-links
li {
display: block;
margin:
10px
0;
}
.hamburger {
display: block;
}
.hamburger.active +
.nav-links {
display: block;
}
}
Assignment 3: Implement a Responsive Grid Layout
Objective: Create a responsive grid layout that adapts based on screen size.
Steps:
1. Create an HTML page with multiple sections inside a main
element.
2. Use CSS Grid to display these sections in a 3-column layout on larger screens and a 1-column layout on smaller screens.
3. Implement media queries to adjust the grid layout based on screen width.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Grid Layout
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<section class="grid-item">Item 1
</section>
<section class="grid-item">Item 2
</section>
<section class="grid-item">Item 3
</section>
</main>
</body>
</html>
css
body {
font-family: Arial, sans-serif;
margin:
0;
padding:
0;
}
main {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
gap:
20px;
padding:
20px;
}
.grid-item {
background-color:
#ccc;
padding:
20px;
text-align: center;
}
@media (
max-width:
768px) {
main {
grid-template-columns:
1fr;
}
}
Assignment 4: Create a Mobile-First Layout
Objective: Design a mobile-first webpage that adjusts the layout for larger screens.
Steps:
1. Design a basic layout for mobile devices with a single column.
2. Use media queries to adjust the layout for tablets and desktops by adding additional columns.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile-First Layout
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Responsive Layout
</h1>
</header>
<main>
<section class="section">Content 1
</section>
<section class="section">Content 2
</section>
<section class="section">Content 3
</section>
</main>
</body>
</html>
css
body {
font-family: Arial, sans-serif;
margin:
0;
padding:
0;
}
header {
background-color:
#333;
color: white;
text-align: center;
padding:
10px;
}
main {
display: block;
padding:
20px;
}
.section {
background-color: lightgray;
margin:
10px
0;
padding:
20px;
text-align: center;
}
@media (
min-width:
768px) {
main {
display: grid;
grid-template-columns:
repeat(
2,
1fr);
}
}
@media (
min-width:
1024px) {
main {
grid-template-columns:
repeat(
3,
1fr);
}
}
Assignment 5: Create a Responsive Image Gallery
Objective: Build a responsive image gallery with different numbers of images per row based on screen size.
Steps:
1. Create an image gallery with multiple images in a grid layout.
2. Use media queries to display 3 images per row on desktop screens and 1 image per row on mobile screens.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Image Gallery
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
<img src="img4.jpg" alt="Image 4">
<img src="img5.jpg" alt="Image 5">
<img src="img6.jpg" alt="Image 6">
</div>
</body>
</html>
css
.gallery {
display: grid;
grid-template-columns:
repeat(
3,
1fr);
gap:
10px;
padding:
20px;
}
.gallery
img {
width:
100%;
height: auto;
}
@media (
max-width:
768px) {
.gallery {
grid-template-columns:
1fr;
}
}
Assignment 6: Create a Flexible Layout with Flexbox
Objective: Use Flexbox to create a flexible layout for a website.
Steps:
1. Create a basic layout with a header, navigation bar, content area, and footer.
2. Use Flexbox to arrange the elements so that they are aligned and spaced properly.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox Layout
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Responsive Flexbox Layout
</h1>
</header>
<nav>
<ul>
<li><a href="#">Home
</a></li>
<li><a href="#">About
</a></li>
<li><a href="#">Contact
</a></li>
</ul>
</nav>
<main>
<section class="content">Main Content
</section>
</main>
<footer>Footer Content
</footer>
</body>
</html>
css
body {
margin:
0;
padding:
0;
font-family: Arial, sans-serif;
}
header,
footer {
background-color:
#333;
color: white;
padding:
10px
0;
text-align: center;
}
nav
ul {
list-style-type: none;
padding:
0;
display: flex;
justify-content: center;
}
nav
ul
li {
margin:
0
10px;
}
main {
display: flex;
justify-content: center;
padding:
20px;
}
.content {
width:
60%;
padding:
20px;
background-color:
#f0f0f0;
}
These assignments are designed to practice and reinforce responsive design techniques using Fluid Layouts, Flexbox, CSS Grid, and media queries. Each solution provides step-by-step guidance to create adaptable layouts suitable for various screen sizes.
You said:
give rest 4
ChatGPT said:
ChatGPT
Here are the remaining 4 assignments related to Responsive Design:
Assignment 7: Create a Responsive Footer
Objective: Design a footer that adjusts based on screen size, with links aligned horizontally on larger screens and vertically on smaller screens.
Steps:
1. Create a footer with a list of links (e.g., Home, About, Services, Contact).
2. Use Flexbox to align the footer items horizontally by default.
3. Implement a media query to change the footer items' layout to vertical when the screen width is less than 768px.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Footer
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer>
<ul>
<li><a href="#">Home
</a></li>
<li><a href="#">About
</a></li>
<li><a href="#">Services
</a></li>
<li><a href="#">Contact
</a></li>
</ul>
</footer>
</body>
</html>
css
footer {
background-color:
#333;
padding:
20px;
text-align: center;
}
footer
ul {
list-style-type: none;
padding:
0;
display: flex;
justify-content: center;
}
footer
ul
li {
margin-right:
20px;
}
footer
ul
li
a {
color: white;
text-decoration: none;
}
@media (
max-width:
768px) {
footer
ul {
display: block;
}
footer
ul
li {
margin:
10px
0;
}
}
Assignment 8: Create a Responsive Text Layout
Objective: Adjust text sizes and layout to be more readable on different devices using media queries.
Steps:
1. Create a webpage with a large heading and a paragraph.
2. Use a media query to change the font size of the heading and the paragraph text based on the screen size.
3. Ensure the paragraph text is readable on smaller screens by adjusting its line height and font size.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Text Layout
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<h1>Responsive Text Layout
</h1>
<p>This is a paragraph of text that will adjust its size based on the screen width.
</p>
</section>
</body>
</html>
css
section {
padding:
20px;
}
h1 {
font-size:
2em;
text-align: center;
}
p {
font-size:
1.2em;
line-height:
1.5;
text-align: justify;
}
@media (
max-width:
768px) {
h1 {
font-size:
1.5em;
}
p {
font-size:
1em;
}
}
Assignment 9: Create a Responsive Form
Objective: Create a form that adjusts its layout for mobile, tablet, and desktop views.
Steps:
1. Create a simple contact form with fields like Name, Email, and Message.
2. Use Flexbox or Grid to align the form fields.
3. Implement media queries to adjust the layout: the form should display as a single column on small screens and have two columns on larger screens.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Form
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label for="name">Name:
</label>
<input type="text" id="name" name="name">
<label for="email">Email:
</label>
<input type="email" id="email" name="email">
<label for="message">Message:
</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit
</button>
</form>
</body>
</html>
css
form {
display: flex;
flex-direction: column;
max-width:
600px;
margin: auto;
}
form
label {
margin:
10px
0
5px;
}
form
input,
form
textarea,
form
button {
padding:
10px;
margin-bottom:
10px;
width:
100%;
}
@media (
min-width:
768px) {
form {
flex-direction: row;
justify-content: space-between;
}
form
label {
flex-basis:
20%;
}
form
input,
form
textarea,
form
button {
flex-grow:
1;
}
}
Assignment 10: Create a Responsive Image Slider
Objective: Build an image slider that adjusts its layout and functionality on different devices.
Steps:
1. Create an image slider using HTML, CSS, and JavaScript (or jQuery).
2. Ensure that the slider adjusts its size based on the screen width.
3. Use media queries to make the slider navigation (arrows and dots) easy to use on both desktop and mobile views.
Solution:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Image Slider
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider">
<div class="slide active">
<img src="img1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="img2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="img3.jpg" alt="Image 3">
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
<script src="script.js"></script>
</body>
</html>
css
.slider {
position: relative;
max-width:
100%;
margin: auto;
overflow: hidden;
}
.slide {
display: none;
}
.slide.active {
display: block;
}
img {
width:
100%;
height: auto;
}
button {
position: absolute;
top:
50%;
transform:
translateY(-
50%);
background-color:
rgba(
0,
0,
0,
0.5);
color: white;
border: none;
padding:
10px;
cursor: pointer;
}
button.prev {
left:
10px;
}
button.next {
right:
10px;
}
@media (
max-width:
768px) {
button {
padding:
5px;
}
}
javascript
// script.js
let currentIndex =
0;
const slides =
document.
querySelectorAll(
'.slide');
const totalSlides = slides.
length;
document.
querySelector(
'.next').
addEventListener(
'click',
function() {
currentIndex = (currentIndex +
1) % totalSlides;
updateSlides();
});
document.
querySelector(
'.prev').
addEventListener(
'click',
function() {
currentIndex = (currentIndex -
1 + totalSlides) % totalSlides;
updateSlides();
});
function
updateSlides() {
slides.
forEach(
(slide, index) => {
slide.
classList.
remove(
'active');
if (index === currentIndex) {
slide.
classList.
add(
'active');
}
});
}
These additional assignments will further enhance the students' ability to create responsive layouts using Flexbox, CSS Grid, media queries, and other responsive design techniques. Each task progressively increases in complexity, reinforcing core principles of responsive design while making web pages adaptable across a variety of devices and screen sizes.