Responsiveness for a complete beginner in programming [closed]

/* Estiliza o corpo da página */body {    font-family: Arial, sans-serif;     line-height: 1.5;     margin: 0;     padding: 0;     background-color: #f4f4f4; }/* Estiliza o cabeçalho da página */header {    background: #333;    color: #fff;     padding: 20px;     text-align: center; }/* Estiliza o conteúdo principal da página */main {    padding: 20px;}/* Estiliza cada seção da página */section {    margin: 20px;     padding: 20px;     background: #fff;     border-radius: 10px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }/* Estiliza os artigos dentro das seções */article {    margin-bottom: 20px;}/* Estiliza as tabelas */table {    width: 100%;     border-collapse: collapse;      margin-bottom: 20px;}/* Estiliza as células da tabela (cabeçalhos e dados) */th, td {    border: 1px solid #ddd;     padding: 8px;     text-align: left; }/* Estiliza o cabeçalho da tabela */thead {    background: #333;     color: #fff; }/* Estiliza o formulário */form {    background: #fff;     padding: 20px;     border: 1px solid #ddd; }/* Estiliza os rótulos (labels) dos campos de entrada */label {    display: block;     margin-bottom: 5px; }/* Estiliza os campos de entrada de texto, email e a área de texto (textarea) */input[type="text"], input[type="email"], textarea {    width: calc(100% - 22px);     padding: 10px;     border: 1px solid #ddd;     border-radius: 4px;}/* Estiliza o botão de envio do formulário */input[type="submit"] {    background: #333;     color: #fff;     border: none;    padding: 10px 20px;     cursor: pointer;     border-radius: 4px; }/* Estiliza o botão de envio quando o usuário passa o cursor sobre ele */input[type="submit"]:hover {    background: #555; }/* Estiliza os fieldsets (grupos de campos de formulário) */fieldset {    border: 1px solid #ddd;     padding: 10px;     margin-bottom: 20px; }/* Estiliza o texto do legend dentro dos fieldsets */legend {    font-weight: bold;     margin-bottom: 10px; }/* Estiliza os checkboxes e radio buttons */input[type="checkbox"], input[type="radio"] {    margin-right: 10px;     vertical-align: middle; }/* Ajusta o alinhamento dos labels com checkboxes e radio buttons */label {    display: inline-block;    margin-bottom: 10px; }/* Estiliza o rodapé da página */footer {    text-align: center;     padding: 10px 0;     background: #333;     color: #fff;}

<header><h1>Bem-vindo ao Meu Projeto Web</h1><p>Esta é a primeira página que estou construindo em HTML!</p></header><main><section><h2>Seções de Títulos</h2><article><h3>Subtítulo 1</h3><p>Este é um parágrafo explicando o subtítulo 1.</p></article><article><h3>Subtítulo 2</h3><p>Este é um parágrafo explicando o subtítulo 2.</p><p>Visite o <a href="https://www.google.com" target="_blank">Google</a> para mais informações.</p></article></section><section><h2>Imagens</h2><figure><picture><source srcset="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg" media="(min-width: 1200px)"><source srcset="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg" media="(min-width: 600px)"><img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg" alt="Imagem de uma borboleta" width="300"></picture><figcaption>Essa é uma imagem de exemplo de uma borboleta.</figcaption></figure></section><section><h2>Listas</h2><article><h3>Lista Não Ordenada</h3><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></article><article><h3>Lista Ordenada</h3><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol></article></section><section><h2>Tabela de Exemplo</h2><table><thead><tr><th>Nome</th><th>Idade</th><th>Profissão</th></tr></thead><tbody><tr><td>Ana</td><td>28</td><td>Engenheira</td></tr><tr><td>Bruno</td><td>32</td><td>Designer</td></tr><tr><td>Carla</td><td>25</td><td>Desenvolvedora</td></tr></tbody></table></section><section><h2>Formulário de Contato</h2><form action="#" method="POST"><label for="nome">Nome:</label><br><input type="text" id="nome" name="nome" placeholder="Digite seu nome"><br><br><label for="email">Email:</label><br><input type="email" id="email" name="email" placeholder="Digite seu email"><br><br><label for="mensagem">Mensagem:</label><br><textarea id="mensagem" name="mensagem" rows="4" cols="50" placeholder="Escreva sua mensagem"></textarea><br><br><input type="submit" value="Enviar"></form></section><section><h2>Preferências</h2><form action="#" method="POST"><fieldset><legend>Selecione sua faixa etária:</legend><input type="radio" id="faixa1" name="faixa_etaria" value="18-25"><label for="faixa1">18-25</label><br><input type="radio" id="faixa2" name="faixa_etaria" value="26-35"><label for="faixa2">26-35</label><br><input type="radio" id="faixa3" name="faixa_etaria" value="36-45"><label for="faixa3">36-45</label><br><br></fieldset><fieldset><legend>Escolha seus interesses:</legend><input type="checkbox" id="interesse1" name="interesses" value="Tecnologia"><label for="interesse1">Tecnologia</label><br><input type="checkbox" id="interesse2" name="interesses" value="Desenvolvimento"><label for="interesse2">Desenvolvimento</label><br><input type="checkbox" id="interesse3" name="interesses" value="Design"><label for="interesse3">Design</label><br><br></fieldset><input type="submit" value="Enviar Preferências"></form></section></main>        <footer><p>© 2024 Meu Projeto Web. Todos os direitos reservados.</p></footer>