[Projeto] Exercicio 3 - CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

body { background-color: rgb(27, 5, 34); color: rgb(251, 178, 243); } header {color: white;} h1{color: rgb(253, 209, 246);} h1{text-align: center;} p{color: rgb(241, 234, 243);} p{text-align: unset;} a:link{color: blueviolet;}

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>English with Tech</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <h1> No site <strong> inglês com tecnologia </strong> você vai encontrar muita novidade e aprendizado sobre o mundo Tec, curiosidades e exercícios de inglês para aprimorar seu aprendizado!! </h1> <p> Olá! Sou Alexandra Oliveira! Pedagoga, Professora de inglês e desenvolvedora Front-end.</p> <p>Resolvi criar esse site como fonte de informação e aprendizado para meus alunos e à todos que buscam conhecimento sobre tecnologia e inglês</p> <header> <img src="WhatsApp Image 2024-09-10 at 19.45.02.jpeg" alt="foto da professora Alexandra nod ia da formatura, vestida com beca, capello e atrás uma bandeira do Brasil e outra do Rj"></header> </main> <footer>Contatos:<a href="https://www.instagram.com/prof.ale.oliveira/">Instagram</a> <a href="https://github.com/Prof-ale-oliveira">Github</a> </footer> </body> </html>

Boa noite Alexandra, muito bom seu projeto, mas vou te passar algunas dicas para melhorar ele, pode ser?

body {
    background-color: rgb(27, 5, 34);
    color: rgb(251, 178, 243);
    margin: 0 auto;
    max-width: 1120px;
}

No body adicionei mais duas propriedades para melhorar a forma de visualizar seu projeto, elas faram ter um limite maximo de largura e fara ficar centralizado o conteúdo.

Uma segunda dica que dou é com respeito dos declarações no CSS, sei que são declaradas somente uma propriedade em cada tag, mas você irá encontrar no mundo real e sendo a melhor forma de ler o CSS é da seguinte forma:

body {
    background-color: rgb(27, 5, 34);
    color: rgb(251, 178, 243);
    margin: 0 auto;
    max-width: 1120px;
}

header {
    color: white;
}

h1 {
    color: rgb(253, 209, 246);
}

h1 {
    text-align: center;
}

p {
    color: rgb(241, 234, 243);
}

p {
    text-align: unset;
}

a:link {
    color: blueviolet;
}

Não se preocupe com o tamanho do CSS, normalmente quando vamos mandar o projeto para produção, temos um passo no processo em que minificamos os nossos códigos, onde o nosso CSS também passa por esse processo.

Você verá muito alguns arquivos com a nomenclatura style.min.css, onde todo o código estará somente em uma única linha.