7 days of code

Alura

Titulo projeto: MyLinkedin

Objetivo: Criar um site estático, semelhante ao Linkedin a partir de conceitos de html5 e css. As etapas de criação são entregues diariamente, ao longo de sete dias pela Natália F. Dev, Desenvolvedora Front-end e Alura Star.

Detalhes do projeto

Figma completo do projeto

Storyline do desafio

✅ Day 1 - sessão de perfil ---

Essa seção contém a imagem de capa, a foto de perfil, nome, título, informações de contato, informações da carreira e, no final da seção, botões de ação.

Obs: nessa imagem de perfil usei da propriedade position (absolute / relative) para sobrepor e definir o ponto de referência para movimentação.

✅✅ Day 2 - Navbar ---

O navbar contém dois blocos de elementos. No lado esquerdo, a imagem com a logo do LinkedIn e uma barra de pesquisa. No lado direito, um conjunto de links levando para outras áreas da rede social, sendo eles: Início, Minha rede, Vagas, Mensagens, Notificações, e Soluções.

✅✅✅ Day 3 - Publicações em Destaque

O objetivo consiste em mostrar três cards que representam os resumos de algumas publicações, contendo: imagem da publicação, legenda, quantidade de reações e de comentários.

✅✅✅✅ Day 4 - implementar duas partes da tela : a seção de “Atividades recentes” e a seção “Sobre”

Seção de “Atividades recentes” é muito parecida com o que você já fez na seção “Publicações em Destaque”. A diferença é que a imagem é exibida em escala menor e alinhada ao lado esquerdo; a descrição da publicação ocupa mais espaço do que antes; e a parte inferior da seção possui um link para visualizar mais atividades (redireciona para a própria página).

“Sobre” é bem mais simples em questão de estrutura e estilização. Apenas um título e um parágrafo de texto justificado.

✅✅✅✅✅ Day 5 - Seção Experiências

Lista de experiências, exibindo o nome da empresa, tempo total de serviço na empresa, cargos, tipo de cargo, duração, e por fim, o local da mesma.


✅✅✅✅✅✅ Day 6 - Seções Formação acadêmica e Idiomas

As duas seções que estão faltando na réplica são “Formação acadêmica” e “Idiomas”. Então, a tarefa de hoje foi basicamente codificar cada uma delas.


✅✅✅✅✅✅✅ Day 7 - Seção de Sugestões

As duas são realmente muito similares, se diferenciando apenas no título e no texto dos botões.Uma delas possui o título “As pessoas também viram” e os botões possuem o texto “Enviar mensagem”