Entrar Ainda não tem acesso?
1
resposta

[Projeto] Exercicio 3 - CSS

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Estilizando o projeto com CSS e atividade Lista de exercícios

por ALEXANDRA DE OLIVEIRA
| 7.5k xp | 9 posts
professora de inglês

CSS

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;}

HTML

<!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>

RESULTADO DO MEU SITE COM CSS Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Danilo Thiago Alves de Oliveira
| 47.5k xp | 70 posts
Desenvolvedor Fullstack Sr

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.