Olá a todos bem-vindos de volta.
Está na hora de começarmos a codificar.
Uma das coisas que notei nos últimos anos de ensino
é que os alunos realmente diferem na maneira como eles entram e
lidam com diferentes tipos de classes de codificação.
Alguns vão se sentar no computador, nunca ler o livro e apenas hackear,
hackear e hackear.
Alguns de vocês podem ser um pouco culpados de fazer todas as leituras, ouvir todas
as palestras, mas nunca realmente experimentar qualquer uma das coisas que falamos.
Então é para isso que servem estes trabalhos de casa.
Uma chance para você finalmente passar e colocar um pouco desse código e
ver o que acontece quando você tenta aplicar estilo ao seu HTML.
Então o objetivo para este trabalho de casa é para você me mostrar que você
pode escrever um arquivo CSS que pode ir e estilo três arquivos HTML diferentes.
Vou mostrar alguns exemplos do nosso antes e depois para
esta missão.
Eu coloquei os links aqui do lado,
mas vai ficar muito mais claro quando eu mostrar o dever de casa em ação.
Então vamos dar uma olhada nisso.
Quando começarmos,
vou lhe dar três arquivos HTML que realmente não são bem estilizados.
Eles começam,
eles têm uma navegação, eles têm três imagens muito grandes, alguns são menores.
E então eles têm o conteúdo.
Todas as três páginas que você verá, a casa, as equipes e o histórico têm conteúdo diferente.
O que eu quero que você faça é escrever suas próprias regras CSS que vão pegar
esse tipo de páginas, e transformá-lo em algo que se parece com isso.
Sei que não é um grande salto, mas
é exatamente assim que quero que comece a codificar.
Eu quero que você faça pequenas mudanças incrementais que podem levá-lo de algo
que é difícil de ler para algo que é muito mais fácil de ler.
Então vamos em frente e passo através das diferentes coisas que você precisará
mudar para alcançar esse visual separado.
A coisa mais importante a entender é que você deve deixar o HTML sozinho.
Eu não quero que você mude, em
vez disso, eu só quero que você estilize as coisas e edite as coisas dentro da folha de estilos.
E as coisas que você precisará adicionar são estilos para
o cabeçalho, os títulos, a seção, os links e as imagens.
Então, deixa-me passar e mostrar-te exactamente o que precisas de ver.
Para o seu cabeçalho, é bastante simples.
Eu quero que você entre e eu quero que você adicione uma cor de fundo.
Para seus títulos, h1 e h2, quero que você mude a cor da fonte.
Agora lembre-se, isso é diferente da cor de fundo.
É a cor em que o texto aparece.
Em seguida, quero que você se certifique de que todos os títulos são exibidos em letras maiúsculas.
Então, se você voltar, vamos dar uma olhada rápida.
Você pode ver que relógio sua cabeça e frisbee final estão em letras maiúsculas,
enquanto na versão HTML original, eles estão em minúsculas.
Então eu quero que você use CSS para fazer essa mudança.
A próxima coisa que eu quero que você faça é apenas para
o cabeçalho h1 Eu quero que você centralize o texto.
Em seguida, faça uma alteração rápida na parte da seção do seu HTML.
Quero que você estilize a seção diferente para que
ela tenha uma cor de fundo diferente dos outros elementos em sua página.
Em seguida, vamos dar uma olhada nos links.
As mudanças que você vai fazer aqui são muito sutis.
Eles não são muito óbvios se eu não disse especificamente o que
você está procurando.
E o que eu quero que você faça é que eu quero que você mude a cor de fundo, e
a cor da fonte, para seus links.
Depois de fazer isso, entre e centralize o texto,
semelhante à maneira como você está indo para o centro dos textos para os títulos h1.
Finalmente, a última coisa que realmente meio que bagunça nosso exemplo inicial de página HTML são
essas imagens enormes que apenas ficam no caminho.
Então, por enquanto, já que não falamos sobre a melhor maneira de estilizar imagens,
eu quero que você apenas as remova da página.
Mas lembre-se, esta pode ser a parte mais complicada de toda a tarefa porque eu
não quero que você mude o html.
Quero que as fotos estejam lá.
Só quero que use CSS3 para removê-los da página.
Então eu espero que entre olhar este exemplo e olhar on-line, e olhar para
minhas fotos antes e depois, você será capaz de fazer este trabalho de casa.
Quando acabares, vamos usar a classificação de pares.
Quando fizermos isso, as notas serão baseadas no quão bem você foi capaz de
terminar o que estávamos fazendo.
Quando eu falo sobre estética,
eu estou falando sobre você escolher cores de fundo bonitas e cores de fonte.
Nós realmente não nos importamos com isso.
Esta é a nossa primeira tarefa de casa.
Eu realmente só quero que você sinta apenas sucesso.
No entanto, aplicam-se normas adequadas.
E o que quero dizer com isso é não usar nomes de cores, usar hexadecimal ou
RGB, e não colocar todas as suas regras em uma linha.
Certifique-se de que sua folha de estilos CSS é fácil de ler.
Além dos estilos que eu listei, por favor, não mude outras coisas para agora.
Torna muito mais difícil classificar.
Mas não se preocupe.
À medida que passamos por este curso, você terá a chance de colocar em seus próprios
looks únicos como seus elementos de estilo.
Por enquanto, tudo o que posso dizer é boa sorte e
certifique-se de ir àqueles fóruns de discussão se tiver alguma dúvida.