Santander Coders 2023

Exercício 1:

Código HTML que use apenas parágrafos e quebra de linhas (sem usar a tag < br >).

Exercício 2:

Crie um código HTML com 2 imagens das linguagens de programação que você gosta e adicionar favicons.

Exercício 3:

Você deverá criar um código HTML com várias imagens, parágrafos, favicons e quebras de linhas das linguagens de programação que você gosta.

Exercício 4:

Você deverá criar um código HTML com vários emojis de sua preferência.

Exercício 5:

Você deverá criar um código HTML que contenha uma foto sua e uma breve descrição da sua atuação profissional. Como bônus, pode adicionar links para suas redes sociais ou GitHub.

Exercício 6:

Você deverá criar um código HTML que contenha links para outras páginas HTML do seu projeto,e links para páginas da web.

Exercício 7:

Agora, você deve criar um formulário HTML de cadastro de pessoas em uma loja virtual. Nesse formulário, você deve solicitar as seguintes informações ao usuário:

• Nome
• E-mail
• CPF
• Gênero
• Data de Nascimento
• Telefone
• Quer ou não receber notificações por WhatsApp
• Quer ou não receber notificações por E-mail

Exercício 8:

Crie um código HTML que contenha uma tabela com o mesmo conteúdo contido na tabela presente neste link.

Exercício 9:

Reproduza a tabela ilustrada pela imagem deste link utilizando um código HTML.

Exercício 10:

Você deverá criar um código HTML que contenha listas ordenadas e listas não ordenadas. Além disso, aproveite para utilizar listas não ordenadas para criar uma barra de navegação na sua página.

Exercício 1

Você deverá criar um código HTML com CSS que contenha texto e no body seja Verdana, tamanho Médio, preto, com fundo amarelo e sem margens. Faça todas as fontes de título Georgia, e faça Heading 1 xx-large e cardinal red.

Exercício 2

Você deverá criar um código HTML com CSS que contenha texto e crie uma classe chamada renda e torne-a uma cor de fundo de #0ff. Crie uma classe chamada despesas e faça com que a cor de fundo seja #f0f. Crie uma classe chamada lucro e torne-a uma cor de fundo de #f00. Ao longo do documento, qualquer texto que menciona receitas, despesas ou lucros, anexou a classe apropriada a esse pedaço de texto.

Exercício 3

Você deverá criar um código HTML com CSS para alterar a tag li para ter as seguintes propriedades:

• Um status de exibição de inline
• Uma borda preta média com duas linhas
• Nenhum tipo de estilo de lista

Exercício 4

Você deverá criar um código HTML com CSS para adicionar as seguintes propriedades no estilo da tag li:

• Margem de 5px;
• Preenchimento de 10px para cima, 20px para a direita, 10px para baixo e 20px para a esquerda.

Exercício 5

Você deverá criar um código HTML com CSS para adicionar uma regra avançada de p:first-letter e crie as seguintes propriedades para esta regra:

• Tamanho da fonte de 36px
• Peso da fonte em negrito

Exercício 6

Estilize a página de um sumário para se assemelhar ao modelo abaixo. Atente para os requisitos principais:

• As cores de fundo dos tópicos devem se alternar entre a cor definida por --separator-color e #fff
• Utilize variáveis do CSS para colorir as tags de tecnologias e garanta que o 1o e 6o elementos tenham a cor definida na --tag-color-1, 2o e 7o com a --tag-color-2, 3o e 8o com a --tag-color-3 e assim por diante
• Garanta que a tag de tecnologia numerada fique fixa ao fazer scroll até encontrar a próxima (dica: use display sticky)

Exercício 7

Adicione regras nos locais indicados do arquivo styles.css para fazer uma visualização em lista, cards ou destaques segundo as imagens abaixo:

• A visualização de lista deve ter apenas um item por linha e os itens devem ter espaçamento vertical de 2rem;
• A visualização de cards deve ter 3 cards por linha de mesmo tamanho e os itens devem ter espaçamento horizontal e vertical de 5rem;
• A visualização de destaques deve ter o primeiro e sexto elementos com tamanho maior até 4 vezes maior em relação a cards da mesma linha e os itens devem ter espaçamento horizontal e vertical de 5rem.

Exercício 8

Faça o layout mobile para a página da loja do exercício 7 da seguinte forma:

• Permita que apenas sejam selecionados os modos de visualização de cards e lista
• Na visão de cards devem ter 2 cards por linha
• Garanta que os botões para troca de visualização apareçam fixos no topo da tela com position fixed ou sticky

Exercício 9

Adicione apenas uma propriedade grid-template-areas na classe react-card sem fazer mais nenhuma modificação para deixar o layout similar à imagem abaixo:

Exercício 10

Faça um overlay para esmaecer a imagem de capa abaixo, utilizando apenas 2 pseudo elementos para isso (::after e ::before), da seguinte forma:

• Overlay no ::before com fundo #000, opacidade 0.6 e cobrindo toda a imagem de capa
• Texto no ::after de cor #fff sem ser afetado pelo overlay, com conteúdo "O mundo como você nunca viu", largura máxima de 30rem, tamanho de 8rem, altura de linha 7rem e posicionado à 3rem da borda esquerda sobre o overlay e imagem.
• Faça uma animação para que o ícone da seta se desloque para baixo em 0.5rem e retorne para a posição inicial após 2 segundos

Exercício 1

Faça um programa que peça a temperatura em graus Fahrenheit (°F), transforme e mostre a temperatura em graus Celsius (°C).

Exercício 2

Faça um programa que leia as coordenadas de 2 (dois) pontos em um plano cartesiano 2D: a coordenada x do primeiro ponto (x_1), a coordenada y do primeiro ponto (y_1), a coordenada x do segundo ponto (x_2) e a coordenada y do segundo ponto (y_2). Em seguida, calcule a distância euclidiana entre os pontos.

Exercício 3

Crie um programa que leia um valor qualquer e apresente uma mensagem dizendo em qual dos seguintes intervalos ([0,25], (25,50], (50,75], (75,100]) este valor se encontra. Caso o valor não esteja em nenhum destes intervalos, deverá ser impressa a mensagem “Fora de intervalo”.

Exercício 4

Crie o jogo “Pedra, Papel, Tesoura” por meio de um código em JavaScript. Para isso, solicite que o primeiro jogador informe a sua escolha e depois o mesmo para o segundo jogador. Por fim, utilize os if’s para saber quem seria o vencedor.

Exercício 5

Faça um programa, usando loops, que peça para o usuário digitar vários números, um após outro, e que só finaliza quando o usuário digitar 0. Ao final imprima a soma de todos os números digitados.

Exercício 6

Faça um programa que imprima a tabuada do 9 (de 9 x 1 a 9 x 10) usando loops.

Exercício 7

Crie uma função que recebe o valor do raio de um círculo como parâmetro e retorna o valor da área desse círculo.

Exercício 8

Faça um programa que dados dois arrays de mesmo tamanho, imprima o produto escalar entre eles.

Exercício 9

Vamos fazer um programa para verificar quem é o assassino de um crime. Para descobrir o assassino, a polícia faz um pequeno questionário com 5 perguntas onde a resposta só pode ser sim ou não:

1. Mora perto da vítima?
2. Já trabalhou com a vítima?
3. Telefonou para a vítima?
4. Esteve no local do crime?
5. Devia para a vítima?

Cada resposta “sim” dá um ponto para o suspeito. A polícia considera que os suspeitos com 5 pontos são os assassinos, com 4 a 3 pontos são cúmplices e 2 pontos são apenas suspeitos, necessitando de outras investigações. Valores abaixo de 2 são liberados. No seu programa, você deve fazer essas perguntas e, de acordo com as respostas do usuário, informar como a polícia o considera.

Exercício 10

Faça um programa que fique pedindo uma resposta do usuário, entre 1, 2 e 3. Se o usuário digitar 1, o programa deve cadastrar um novo usuário, solicitando nome, idade, e-mail e CPF, guardando esse cadastro em um objeto, e cada objeto devo ser adicionado em um array. Quando o usuário digitar 2, o programa deve imprimir os usuários cadastrados; e se o usuário digitar 3, o programa deve encerrar.