Responsive design is the approach of designing webpages that can adapt to different screen sizes and devices, ensuring a consistent user experience. This is important because users access websites on various devices, such as smartphones, tablets, and desktop computers.
In this lesson, you will learn the basics of responsive design and create a webpage that adapts to different screen sizes.
First, let's set up a basic HTML structure for our webpage. Create a new HTML file and add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
</head>
<body>
<h1>Welcome to My Responsive Webpage</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
xxxxxxxxxx
In this step, we will add some CSS to style our webpage. We will set the font for the entire body, add a background color and text color to the heading, and add padding to the paragraph. Add the following CSS code:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #f1c40f;
color: #ffffff;
padding: 20px;
}
p {
padding: 20px;
}
xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
</head>
<body>
<h1>Welcome to My Responsive Webpage</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
xxxxxxxxxx
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #f1c40f;
color: #ffffff;
padding: 20px;
}
p {
padding: 20px;
}
In this step, we will create a container to hold our webpage content. This container will help us control the layout of our content on different screen sizes. Update your code so that <h1>
and <p>
tags are inside the new <div>
tag.
<div class="container">
<h1>Welcome to My Responsive Webpage</h1>
<p>This is a paragraph of text.</p>
</div>
xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
</head>
<body>
<h1>Welcome to My Responsive Webpage</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
xxxxxxxxxx
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #f1c40f;
color: #ffffff;
padding: 20px;
}
p {
padding: 20px;
}
In this step, we will style the container to give it a maximum width, center it on the page, and add some padding on the sides. This will help our webpage look good on different screen sizes.
Add the following code to your CSS:
.container {
max-width: 400px;
margin: 0 auto; /*this will make it go into the center*/
padding: 0 20px;
border: 1px solid #000;
}
xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
</head>
<body>
<div class="container">
<h1>Welcome to My Responsive Webpage</h1>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>
xxxxxxxxxx
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #f1c40f;
color: #ffffff;
padding: 20px;
}
p {
padding: 20px;
}
max-width
, margin
and padding
values to different sizes to see the effect it has.