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>

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

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>