🔹 Desafios
🔹 Deploy
Para praticar a essência do Front-end, foi proposto um desafio de 7 dias utilizando HTML e CSS. O desafio consistia em desenvolver uma página real a partir de um layout no Figma, algo que todo desenvolvedor terá que fazer no seu dia-a-dia no mercado. Para concluir esse desafio, foram utilizados conceitos básicos como div, section, inline para imagens, medidas responsivas em CSS, além de coisas mais avançados como Flexbox, Grid e muitos outros, coisas que qualquer pessoa entrando na área de Front-end precisa conhecer.
Dia 1
- Já no primeiro dia, você vai ser apresentado com o layout de uma página no Figma, analisá-lo e usá-lo para criar o cabeçalho da sua página, que contém um logo, links para outras páginas e alguns botões.
Dia 2
- Aqui você desenvolverá a segunda seção da página, que é um 'Sobre nós', algo muito básico e presente na maioria das páginas empresariais. Nessa seção, você terá diferentes partes de texto, cada uma com um tamanho, cor e alinhamento diferente.
Dia 3
- Nesse dia você vai precisar trabalhar bastante com alinhamento no CSS, e conhecimentos de Flexbox ou Grid vão facilitar muito a sua vida! A seção se chama 'Métricas e resultados' e contém 4 blocos de texto lado a lado, cada um com diferentes blocos internos.
Dia 4
- Chegou a hora de brincar com imagens, o pesadelo de muitas pessoas! Nessa seção, você terá algumas partes de texto e uma imagem ilustrativa que terá que ser alinhada corretamente. O uso de medidas responsivas é algo que poderá te ajudar bastante.
Dia 5
- Esse será provavelmente o dia mais desafiador, pois você desenvolverá a seção de 'Vagas' da página, que contém diferentes grupos de blocos agrupados e diversas informações sobre as vagas abertas.
Dia 6
- Chegando quase no final, você desenvolverá a seção de 'Depoimentos', que envolverá conhecimentos de mudança de cor de background, tamanho de fontes e alinhamento de texto e de imagens.
Dia 7
- No sétimo e último dia do desafio, você criará a parte mais inferior da página: o rodapé. Mas não é um rodapé qualquer, ele contém, entre outras coisas, um formulário para cadastro de e-mail com um valor pré-definido e também um botão, ambos perfeitamente alinhados. Você irá fechar com chave de ouro!
https://diegosxe.github.io/7DaysOfCode-OptimusTech-HTML5-CSS3/
HTML5
CSS3
Diego Borelli Dias |
---|