[Projeto] Colocando em pratica | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Aproveitei a oportunidade do projeto amigo secreto e estou adaptando ao meu estilo.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Amigo Secreto</title>
        <link href="css/style.css" rel="stylesheet">
    </head>

    <body>
        <img src="img/amigos.avif" alt="Imagem de quatro pessoas se abraçando">
        <h1>Desafio do amigo secreto</h1>
            <h2>Digite o nome dos seus amigos, mas não esqueça de clicar no botão "Adicionar"!</h2>
            
        <form>
            <label for="nome"></label>
            <input type="text">
            <button id="adicionar" type="button" onclick="adicionarAmigo()">Adicionar</button>
            
            <p>Lista de amigos:</p>
            <p id="aviso" class="aviso"></p>
            <ul id="listaAmigos" class="name-list" aria-labelledby="listaAmigos" role="list"></ul>
            <ul id="resultado" class="result-list"></ul>

            <div class="button-container">          
            <button id="sortear" type="button">Sortear Amigo</button>
            </div>
        </form>
        <p id="resultadoSorteio" class="resultado-sorteio"></p>
        <p id="avisoSorteio" class="aviso-sorteio"></p>
        <p id="avisoErro" class="aviso-erro"></p>
        <script src="js/script.js"></script>
        <footer>
            <p>Desafio do Amigo Secreto - Desenvolvido por Rebeca</p>
    </body>

</html>

Insira aqui a descrição dessa imagem para ajudar na acessibilidade