以下の図のように作る

responsive.gif

sample.jpg

手順

  1. reset.cssを読み込む(https://andy-bell.co.uk/a-more-modern-css-reset/)
  2. sample.jpgをダウンロードする
  3. divタグを書き、クラスboxを付加する
  4. クラスboxの中に、imgタグとpタグを書く
  5. クラスboxに、以下のCSSを付加する

    1. セレクタ：.box

      padding-left 5%
      padding-right 5%
      max-width 1000px
      margin-left auto
      margin-right auto
  6. 画像に対して以下のCSSを付加する

    1. セレクタ：.box img

      margin-bottom 16px
  7. 画面幅が576px以上の時に以下のCSSを付加する

    1. セレクタ：.box

      display flex
      align-items start
      gap 40px

    2. セレクタ：.box img

      width 50%
      max-widh 400px
  8. 画面幅が1000px以上の時に以下のCSSを付加する

    1. セレクタ：.box

      padding 0

解答例

https://www.youtube.com/embed/ag5d7c3JVek?si=ZISxWCJhRyTBUxke

作成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="box">
        <img src="sample.jpg" alt="">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
</body>

</html>

.box {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.box img {
    margin-bottom: 16px;
}

@media screen and (min-width:576px) {
    .box {
        display: flex;
        align-items: start;
        gap: 40px;
    }

    .box img {
        width: 50%;
        max-width: 400px;
    }

    /*========min-width:576px============*/
}

@media screen and (min-width:1000px) {
    .box {
        padding: 0;
    }

    /*========min-width:100px============*/
}