Projetos práticos para desenvolvedores front-end

O desenvolvimento de front-end, como qualquer outra habilidade, requer muito trabalho. Existem várias maneiras de enfrentar essa grande tarefa, algumas das quais seriam:

1. Trabalhe em uma agência como desenvolvedor front-end.
2. Estude em sua casa e construa projetos paralelos.
3. Trabalho como freelancer para clientes.

Cada um tem seus próprios pontos positivos e negativos, mas uma coisa permanece uma constante - quanto mais tarefas diversas você realiza, mais rápido você progride.

Neste artigo, veremos alguns projetos em potencial nos quais você pode trabalhar paralelamente e por conta própria, onde poderá aprender novas tecnologias, abordagens e, potencialmente, alguns “Aha!” momentos em sua carreira de front-end.

Todas as tarefas abaixo são repositórios muito bons para ter em seu perfil do GitHub, especialmente quando você decide se inscrever para uma posição de front-end.

Uma nota! Todos os exemplos abaixo são feitos por designers para produtos reais. NÃO estamos propondo que você os pegue, codifique e faça o que quiser. Tudo isso é um exemplo de elementos de interface do usuário nos quais você pode trabalhar sem distribuí-los ou vendê-los posteriormente.

1 - Uma biblioteca de interface de usuário

Dificuldade: Fácil-Média.

No entanto, não se deixe enganar pelo "fácil", porque como em qualquer projeto aqui, tanto um desenvolvedor júnior quanto um desenvolvedor sênior podem ter dificuldades, dependendo dos problemas que resolvem. Colocamos isso em uma escala fácil porque não consistirá em nenhum elemento de interface do usuário complexo e tudo pode ser encapsulado.

Você pode escolher um design existente como este, que se concentra em menus suspensos / botões:

Fonte

Ou você pode ir com um mais genérico como Bootstrap and Foundation. O que considerar:

• Convenção de nomenclatura bem definida.
• Uma apresentação dos componentes.
• Modificadores - a maioria das pessoas gosta de alterar elementos menores, então considere como aplicá-los. Exemplo - você deseja cores primárias e secundárias; sucesso, estados de erro etc.
• Mantenha-o “plug and play”. Seu objetivo é permitir que outro desenvolvedor use seu código sem ter que escrever nenhum CSS. Você também pode combiná-lo com um sistema de grade básico.

Uma boa arquitetura de tal biblioteca não é uma questão trivial. Você pode tentar essa mesma tarefa no início de sua carreira, ou alguns anos depois, e comparar o que aprendeu.

2 - Implementar IU de animações complexas

Dificuldade: Difícil

Esta tarefa envolve animações e desempenho elegantes. Mas, próximo a isso, você também teria que escrever alguns recursos visuais não tão genéricos. Veja o exemplo abaixo:

Você pode ver a animação completa aqui. Depois de desativar a IU, é hora de adicionar a interatividade. Nem todas as animações terão a aparência do design, pois não são feitas em um navegador, mas em outra ferramenta, mas isso não significa que você não possa chegar muito perto do original. Claro, vamos pular quaisquer efeitos de desfoque de movimento e deformações de forma estranhas, mas muito do resto é algo que você pode fazer. Existem também bibliotecas JS para ajudá-lo com o quadro-chave de tudo.

Esta tarefa pode levar apenas duas trocas de tela para mantê-la um pouco mais curta. Não há necessidade de trabalhar em visualizações móveis aqui, a menos que você tenha energia.

3 - Uma IU do jogo

Dificuldade: Difícil

Outra tarefa complicada! A maioria dos jogos tem um estilo de arte único que não é facilmente traduzível na web. Para tornar as coisas mais difíceis, há outra regra aqui - Não use nenhuma imagem / svgs para obter as formas na IU.

Fonte: StarCraft II

Escolhemos StarCraft 2 para esse propósito. Como você pode ver, há uma tonelada de pequenos detalhes aqui e ali que você deve considerar em sua implementação. Na verdade, aqui a regra “sem ativos” é o que torna isso difícil. Você terá que trabalhar com formas, recortes, magix de sombras, gradientes, bordas e muito mais. Claro, imagens para os retratos e o marinho à direita são necessárias.

Para tornar as coisas mais realistas, a borda superior direita do retrato pode ser trocada por uma da linha superior da próxima imagem:

Fonte: StarCraft II

Se você conseguiu fazer com que ele também tenha uma boa aparência em telas menores e em dispositivos móveis, você ganha pontos extras! Isso seria muito “Uau!” efeito do projeto no seu currículo.

4 - Um jogo de perguntas

Dificuldade: Média

Os jogos de questionário não são muito difíceis de construir em comparação com alguns dos designs acima, mas exigiriam algum JS escrito para fazê-los funcionar. Sim, até agora tínhamos apenas projetos baseados em CSS, para este você também teria que torná-lo interativo, para que as pessoas pudessem clicar, ver as respostas corretas / erradas e muito mais.

Se você fizer uma pesquisa por “Quiz” no Dribbble, poderá encontrar uma tonelada de exemplos, mas se achar difícil escolher um, você pode fazer o seguinte:

Fonte

Como você pode ver, existem apenas duas telas, o que significa que você terá que criar as demais com base no design acima.

Recursos para o teste:

• Conte as respostas corretas
• Resposta de N opções
• Mostrar respostas corretas / erradas após clicar
• Relatório pop-up de pergunta
• Volte para todos os questionários, escolha um questionário
• Mostrar pontuação final após o término do questionário

Você pode fazer muito mais do que os mencionados acima, se quiser. Este é geralmente um tipo de projeto de “uma tarde”.

5 - Escolha um site aleatório e torne-o para impressão

Dificuldade: fácil

A otimização para impressão tem suas peculiaridades. Especialmente quando você oculta qualquer elemento existente no site, limpa fundos, melhora a tipografia, trabalha com quebras de página e formata as páginas.

Para esta tarefa, você pode escolher um site na web, escolher uma página de artigo e começar a trabalhar nos estilos de impressão. Existem artigos longos escritos sobre o assunto, portanto, há muito para ajudá-lo.

Sites de exemplo que você pode usar:

• Uma página de venda da Amazon - concentre-se apenas nas informações importantes.
• Página de vendas do curso - do SitePoint.
• Outra página do curso

Sinta-se à vontade para escolher qualquer outro site que desejar. Você pode tornar isso fácil ou difícil para você mesmo. Se você quiser ver um exemplo de um bom estilo de impressão, dê uma olhada em https://www.smashingmagazine.com/, eles realmente acertaram em cheio.

6 - Um layout de estilo de revista complexo

Dificuldade: Insana

Este, além de difícil, também é complexo. E leva mais tempo em comparação com qualquer uma das outras tarefas mencionadas acima, então pode ser necessário liberar mais de 20-30 horas para isso.

Fonte

O design acima é uma reformulação do The New York Times de Slava Kornilov. No link você verá todos os designs que ele fez incluindo telões exibindo toda a página inicial.

Neste projeto, você precisará pensar em termos de componentes, definir o estilo de alguns elementos complexos da IU, como o vídeo saindo da janela de visualização (que deve continuar respondendo), as configurações de tipografia, os elementos sobrepostos e muito mais.

Até mesmo olhar para o fundo por trás do grande título no topo esconde algumas partes complicadas de sua implementação.

Ele projetou uma tonelada de elementos, então você pode passar mais de um ou dois meses aqui se quiser e haveria muito para aprender. Talvez você possa até fazer um vídeo de fundo, conforme mostrado abaixo:

Fonte

Para este, também estão acontecendo animações para as diferentes notícias que também podem ser implementadas. Você também deve considerar visualizações móveis aqui.

7 - O painel e seus gráficos

Dificuldade: Média-Difícil

Os painéis estão por toda parte. E quando os designers não sabem o que fazer à noite, às vezes eles simplesmente projetam outro. Só porque.
E, graças a isso, há muito por onde escolher. Em algum momento, você provavelmente terá que construir um verdadeiro para um produto real. E você pode ter o azar de obter uma dessas interfaces de “aparência incrível” com um milhão de animações no carregamento que simplesmente não fazem nenhum sentido.

Para se preparar para esse dia, aqui está um desafio para você:

Implemente o seguinte design:

Fonte

O que você precisa considerar aqui - os gráficos devem ser reais. Eles devem usar dados reais e você deve tentar torná-los parecidos com os que você vê no topo. Existem muitas bibliotecas que você pode usar e, provavelmente, você terá que ampliar / modificar muito.

Se você decidir incorporar algumas animações, pode ser ainda melhor. Isso ficaria muito bom em um currículo, certo?

No final:

Uma das melhores maneiras de aprender e se tornar um desenvolvedor melhor é simplesmente começar a escrever código e construir sites. Faça isso diariamente, basta codificar uma tonelada! Isso é útil, especialmente nos primeiros 3-4 anos de sua carreira.

Com essa experiência, você poderia facilmente preencher uma função mais sênior. Lá você poderia tomar decisões e liderar sua própria equipe de forma eficaz, usando a experiência adquirida em todos esses projetos e os problemas e questões que encontrou e superou ao longo do caminho. E lembre-se, sempre tente encontrar algo difícil para trabalhar!