Oi, todo mundo.
Bem-vindo de volta, é hora de outro exemplo de lição de casa.
O que vamos fazer esta semana é adicionar ainda mais estilo
às páginas que você começou a desenhar na semana passada.
Então, mais uma vez o objetivo desta tarefa é que eu
não quero que você esteja mudando o html em tudo.
Quero que você crie uma nova folha de estilo ou atualize a folha de estilo da semana passada para
que ela possa ser usada em três arquivos html diferentes.
Quando você começar, é muito importante que você tenha completado a primeira
tarefa classificada por pares.
Eu vou assumir que você tem feito e então
quando eu falar neste vídeo sobre as diferentes mudanças que eu quero que você faça.
Você pode alterar essa tarefa de casa anterior, ou você realmente
pode começar completamente do zero se você não estava feliz com o seu trabalho anterior.
Então vamos dar uma olhada no antes e depois para
esta tarefa que eu quero que você tente alcançar.
Esta era a nossa página quando começamos.
No primeiro dever de casa, você levou daqui até aqui.
Ainda muito simples, mas muito mais limpo porque nós adicionamos alguma cor de fundo,
algumas fontes de cor, e nós nos livramos dessas imagens.
O que eu quero que você trabalhe nesta semana é realmente mudar as coisas e
torná-lo realmente estilizado em vez de apenas limpo.
Então vamos dar uma olhada no que eu gostaria que você trabalhasse na terceira semana.
Como você pode ver, este parece um site completamente diferente.
As imagens estão de volta, adicionei uma imagem de fundo para uma barra de navegação e
algo que não é necessariamente fácil de ver quando você está apenas olhando para o papel,
adicionei uma nova classe que destaca a página em que estamos agora.
Então, se você olhar,
o link inicial é destacado porque estamos na página inicial.
Se eu clicar no histórico, o link do histórico é como isso
porque estamos na página do histórico e, em seguida, da mesma forma, a página da equipe.
Então isso é o que chamamos de página atual que estamos olhando.
Então, você vai criar esse estilo para que os espectadores
saibam onde estão nesta página.
Então eu vou ir em frente e falar sobre cada uma das etiquetas
que eu quero que você olhe para a fim de completar esta tarefa.
Então, quando você começar, você vai deixar esse código HTML sozinho,
e você vai criar uma nova folha de estilo, ou você vai continuar e
atualizar o que você usou antes.
O que você vai precisar para trabalhar especificamente são esses elementos.
Você precisa trabalhar no corpo, o cabeçalho, o h um, os links, e
então eu tenho três classes chamadas ativo, esquerdo e direito, e finalmente, você vai
querer colocar essas imagens de volta no lado esquerdo da página.
Então, primeiro, vamos falar sobre o corpo.
Por padrão, seus navegadores colocam algum tipo de preenchimento e margem, mas eu quero que você
sobrescreva isso e coloque algo que pareça consistente em todos os navegadores.
Você também pode se sentir livre para ajustar o tamanho do texto, mas isso não é necessário.
Eu sei que fiz porque achei o texto um pouco pequeno demais.
Em seguida, vá para o cabeçalho.
O primeiro passo é mudar a cor de fundo e ver se você consegue fazer isso funcionar.
Em seguida, você vai querer adicionar uma imagem de fundo.
E para ser honesto,
esta será a parte mais complicada de toda a tarefa de casa.
Porque às vezes nem sempre é claro onde você pode encontrar as imagens e
onde você não pode, então
certifique-se de verificar alguns dos outros recursos se você ficar preso nesta parte.
Em seguida, eu quero que você altere a cor da fonte e
aumente o tamanho da fonte um pouco mais.
Agora aqui novamente está algo novo que você não aprendeu antes.
Eu quero que você estilize os links que estão na seção de navegação, mas
apenas esses links.
Nem todos os links na página.
Você não precisa recriar meu exemplo exatamente, mas
eu quero que seus links sejam bem espaçados,
eles devem ter alguma cor de fundo, bordas arredondadas e nenhum sublinhado.
Faça-os parecer bonitos.
Em seguida, certifique-se de que viu a aula ativa de que falei.
É assim que as pessoas serão capazes de saber qual página eles estão olhando
sem ter que olhar para o URL.
Agora outra coisa que você vai precisar trabalhar é esta idéia de que nossa página tem
uma classe esquerda e uma direita para ele.
Agora, a fim de obter as coisas para ir ao lado do outro, você vai precisar mexer com
a tela e possivelmente flutuar dependendo de como você implementar isso.
Portanto, certifique-se de alterá-los para que eles fiquem lado a lado e
altere essa cor de fundo para a classe esquerda.
Você pode já ter feito isso na lição de casa anterior, mas
se você não se certificar que ele é feito agora.
Finalmente, queremos voltar a essas imagens.
Primeiro, você precisa colocar as imagens de volta porque,
espero que no dever de casa um, você definiu a exibição deles para nenhum, o que significa que eles se foram.
Então coloque-os de volta em algo para que eles se acumulem um em cima do outro.
Em seguida, certifique-se de que eles estão centrados na classe esquerda.
Não quero que as fotos fiquem de um lado ou de outro.
E, enquanto você está centralizando eles, certifique-se de colocar algum espaço entre eles,
na parte superior e inferior, também.
Mais uma vez, usaremos o aluno para avaliar seu trabalho.
Ao contrário de antes, as notas serão baseadas no nível de conclusão e
um pouco mais na aparência da sua página.
Queremos ter certeza de que você não está colocando coisas que são difíceis de ler ou
que são realmente meio espremidas.
Portanto, se você tiver a chance,
certifique-se de executar sua página em alguns avaliadores de acessibilidade diferentes.
Então houve onda e tem teias.
Há lugares diferentes para onde você pode ir.
Mas esta é a parte realmente legal sobre a classificação de
pares, seus colegas podem dizer se as coisas não têm ou não o melhor contraste de cores.
Agora, mais uma vez, vão aplicar-se normas adequadas.
E isso é particularmente importante quando começamos a falar de seletores avançados.
Descobri que às vezes as pessoas jogam tudo o que podem pensar
em sua folha de estilo, e eles apenas esperam, esperança, esperança que funcione.
Nós vamos tirar pontos se você tentar fazer isso.
Agora, a última coisa que eu quero mencionar é que
eu sei que as pessoas estão codificando em diferentes dispositivos.
Então, quando você enviar seu código, certifique-se de estar à vontade para dizer que meu código
só fica bem em uma tela grande, ou em um telefone, ou algo assim.
Cuidar de diferentes tamanhos de tela é algo chamado design responsivo
que não tratamos neste curso específico.
Então eu não espero que você crie um site que parece ótimo em todas as plataformas.
O que eu espero que você faça é realmente possuir o código que você enviar desta vez.
Certifique-se de saber exatamente o que cada linha está fazendo e
se sinta confortável mudando pequenas peças e sentindo que sua página não vai quebrar.
Novamente, se você tiver problemas, certifique-se de bater nesses fóruns de discussão.
Você tem colegas de classe tem sido muito útil, e
eu realmente quero encorajar essa comunicação.
Boa sorte.