Sugestão/Avaliação de melhoria no meu código

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sugestões</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div id="container"> <h1>Caixa de sugestões</h1> <input type="text" name="" id="input-sugestao" placeholder="Escreva sua sugestão"> <button id="botao-enviar">Enviar</button> </div> </main> </body> </html>

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); *{ box-sizing: border-box; padding: 0; margin: 0; } :root{ --cor-roxa: #9353FF; --cor-placeholder: #6C757D; --fonte-principal: "Inter", sans-serif; } body{ display: flex; flex-direction: column; align-items: center; } main{ height: 100vh;; display: flex; justify-content: center; align-items: center; } div{ display: flex; flex-direction: column; align-items: center; gap: 16px; width: 729px; padding: 40px; border: 2px solid #000000; } h1{ font-size: 20px; font-family: var(--fonte-principal); } #input-sugestao{ padding: 7px 15px; } #input-sugestao::placeholder{ font-family: var(--fonte-principal); font-size: 16px; color: var(--cor-placeholder); } #botao-enviar{ border: none; background-color: var(--cor-roxa); color: #FFFFFF; padding: 9px 18px; }

Boa tarde Estudante, cara é um código simples mas que conseguimos sim dar uma melhorada nele. Vou dar algumas sugestões.

HTML:

Dar uma fechada no seu elemento <input type="text" name="" id="input-sugestao" placeholder="Escreva sua sugestão"/> Não impacta em nada do seu código, mas quando você começar a trabalhar com algum framework, já estará acostumado com esse detalhe que aí sim terá a diferença.

CSS:

Remover o style do body esse não faz difença para o código, só está ocupando espaço no CSS.
Um outro ponto importante é saber aproveitar as declarações já utilizadas, ou seja, veja que tanto no main quanto no div você utiliza algumas propriedades em ambas: (display e align-items), nesse caso em projetos grandes, podemos seguir por 2 caminhos:

2.1. Criar classes agrupando o que se repete e utilizar elas no HTML.

CSS:
main {
    height: 100vh;;
    justify-content: center;
}
div {
    flex-direction: column;
    gap: 16px;
    width: 729px;
    padding: 40px;
}
.center {
    display: flex;
    align-items: center;
}

HTML:
<body>
    <main class="center">
        <div id="container" class="center">
            <h1>Caixa de sugestões</h1>
            <input type="text" name="" id="input-sugestao" placeholder="Escreva sua sugestão" />
            <button id="botao-enviar">Enviar</button>
        </div>
    </main>
</body>

2.2. Ou criar classes para cada propriedade:

CSS:
main {
    height: 100vh;
}

div {
    gap: 16px;
    width: 729px;
    padding: 40px;
    border: 2px solid #000000;
}

.d-flex {
    display: flex;
}

.justify-center {
    justify-content: center;
} 

.align-center {
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

HTML:
<body>
    <main class="d-flex justify-center align-center">
        <div id="container" class="d-flex flex-column align-center">
            <h1>Caixa de sugestões</h1>
            <input type="text" name="" id="input-sugestao" placeholder="Escreva sua sugestão" />
            <button id="botao-enviar">Enviar</button>
        </div>
    </main>
</body>

Você verá muito desse tipo de estilização quando começar a usar também frameworks de CSS, como por exemplo o Tailwind ou Bootstrap.

Como mencionado, nenhuma dessas sugestões impacta no seu código, é mais dica para se acostumar com o que vem pela frente. Qualquer dúvida, não exite em perguntar, estarei a disposição.

Mergulhe em programação