HTML CSS

Advanced

60 mins

Teacher/Student led

+105 XP

What you need:
Chromebook/Laptop/PC or iPad/Tablet

Introduction to Responsive Design

Learn the principles of responsive web design and create a webpage that adapts to different screen sizes.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Understanding Responsive Design
2 Setting Up the HTML Structure
3 Adding CSS
4 Creating a Container
5 Styling the Container
Quiz

1 - Understanding Responsive Design

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.

👇 Mark your steps as done as you complete them.

+10 XP

2 - Setting Up the HTML Structure

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
 
  

​x
 
​

👇 Mark your steps as done as you complete them.

+15 XP

3 - Adding CSS

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;
}

<!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
 
<!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>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}

p {
  padding: 20px;
}

xxxxxxxxxx
 
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
​
h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}
​
p {
  padding: 20px;
}

+15 XP

4 - Creating a Container

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>

<!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
 
<!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>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}

p {
  padding: 20px;
}

xxxxxxxxxx
 
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
​
h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}
​
p {
  padding: 20px;
}

+20 XP

5 - Styling the Container

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.

max-width: Sets the maximum width a box can be. Imagine stretching a rubber band; it has a limit before snapping.
margin: The space outside a box, like the garden around a house.
padding: The space inside a box's border, like cushions on a sofa.
border: The outline around a box, like the frame around a painting.

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;
}

<!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>
	<div class="container">
		<h1>Welcome to My Responsive Webpage</h1>
		<p>This is a paragraph of text.</p>
	</div>
</body>
</html>

xxxxxxxxxx
 
<!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>
    <div class="container">
        <h1>Welcome to My Responsive Webpage</h1>
        <p>This is a paragraph of text.</p>
    </div>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}

p {
  padding: 20px;
}

xxxxxxxxxx
 
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
​
h1 {
  background-color: #f1c40f;
  color: #ffffff;
  padding: 20px;
}
​
p {
  padding: 20px;
}

Try changing the max-width, margin and padding values to different sizes to see the effect it has.

+20 XP

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started