HTML CSS
Advanced
60 mins
Teacher/Student led
+155 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

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.


    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>

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

    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>

    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;
    }
    Try changing the max-width, margin and padding values to different sizes to see the effect it has.

    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.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more