HTML CSS

Advanced

60 mins

Teacher/Student led

Learning Goals

Learning Outcomes

+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.

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>

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

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>

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>

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 on our learning platform.

Get started

Copyright Notice
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.

Your Answer or Description of Your Work

Project URL This can be a link to your project (e.g. a Scratch, Microbit, Arcade or CodePen URL link).

Upload File

You must be logged into Scratch to share your project, otherwise the link will not work.

To get the URL link of your Scratch project:

Make sure you're logged into Scratch.
Click on the Share button in the project editor.
Click on the Copy Link button.
Click on the Copy Link link. This will save the URL of your project page into your clipboard.

To get the URL link of your Microbit project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your Arcade project:

Click on the button in the project editor.
Click on the Publish Project button.
Click on the Copy button. This will save the URL of your project page into your clipboard.

To get the URL link of your CodePen project:

Make sure you're logged into CodePen.
Open your project in the editor.
Click on the Save button at the top of the editor.
Copy the link from the address bar in your web browser (e.g. https://codepen.io/Jane-Smith/pen/gOVXxBQ)