Aula 5: HTML e CSS
Caso ainda não tenha assistido à aula 4, clique aqui para acessar
Seja bem-vindo e bem-vinda à quinta aula da #QuarentenaDev! A espera acabou, vamos aprender como os programadores e programadoras apresentam e estilizam as informações que vemos nos sites todos os dia.
Compartilhe seus experimentos no nosso espaço de discussão no discord. Use o codepen, marque a @aluraonline no instagram, twitter e muito mais!
Usamos o comando prompt para pedir as informações da viagem e usamos document.write para exibir o resultado na tela.
distancia = prompt("Qual a distância que você andou com o passageiro ou passageira?")
tempo = prompt("Qual foi o tempo da viagem?")
valorcorrida = 2 + distancia * 1.4 + tempo * 0.26
document.write("O valor da sua corrida foi: R$ " + valorcorrida.toFixed(2))Estudar os capitulos introdutórios da documentação:
Ao invés de deixar apenas o fundo branco com a letras pretas, usar o document.write junto com css para estilizar a calculadora da aula passada da maneira que você quiser!!
Aprendemos algumas tags HTML e como estilizar essas tags usando css. Será que você é capaz de reproduzir o seguinte layout?
Vamos ter que fazer algumas pesquisas e interagir bastante no discord para resolver esse problema, vamos lá?
Dicas:
Temos links no HTML, quando eu clicar nele vou ir direto para o codepen onde você criou o exercicio.
Os links estão dentro de uma lista para ficar organizados
Essa borda mais grossa fazemos pelo css
Lembrando que a imagem, a largura, altura da imagem e espessura da borda não precisam ser exatamente igual!
Será que você consegue mudar a cor da pokebola de vermelho para roxo???
código da pokebola: https://codepen.io/omariosouto/pen/grRaqm
Cada tag é uma caixa.<div></div> é a nossa caixa e podemos aplicar efeitos nela. Um deles é o efeito de sombra com a propriedade box shadow.
div {
box-shadow: tamanho tamanho tamanho tamanho cor
}
div {
0px 0px 0px 0px green;
}Essa propriedade permite que várias sombras possam ser declaradas para a mesma tag. Não é por ser sombra que ela tem que ser esfumaçada e transparente, podemos fazer sombras nítidas e sólidas!
Se você conseguiu trocar a cor da pokebola, será que você consegue criar a sua?
Por último, aqui está o material sobre vscode que o mário mostrou no video