Artigo original: 5 Coding Projects You Should Include in Your Front End Portfolio
Um portfólio é uma ótima maneira de exibir suas habilidades para empregadores em potencial. Também é especialmente útil para desenvolvedores novatos que podem ainda não ter experiência profissional de trabalho.
No entanto, um problema comum que você pode ter ao criar um portfólio é saber o que incluir nele.
A página simples da web que você criou para um curso é boa o bastante para colocar no seu site da web? Você tem de incluir apenas projetos para os quais você foi pago ou pode incluir projetos "menores"? Existe um número "certo" de projetos para incluir no portfólio?
A finalidade deste artigo é fornecer algumas orientações sobre como preencher seu portfólio de desenvolvedor de front-end, por meio de projetos de exemplo.
Aqui temos um breve resumo dos projetos que veremos neste artigo:
- Um site de portfólio
- Um site de clone
- Uma aplicação de CRUD para a web
- Um site conectado a uma API
- Um site da web de "pontuação perfeita"
Observação: isso não significa que você precisa criar todos esses projetos. Essa lista visa apenas fornecer a você ideias sobre o tipo de projetos que você pode criar.
Além disso, esses projetos são direcionados a desenvolvedores novatos que conhecem o básico de desenvolvimento para front-end e agora estão procurando por projetos um pouco mais avançados.
1. Criar um site de portfólio
Contanto que você crie seu site de portfólio por conta própria, não há problema algum em inclui-lo em sua lista de projetos. Se você costuma mudar o design do seu portfólio com frequência, também pode incluir as versões anteriores.
Ao incluir um projeto no seu portfólio, você não apenas estará exibindo suas habilidades, mas também explicando a mentalidade por trás do design. Isso é algo no qual empregadores em potencial geralmente se interessam.
Para desenvolvedores de front-end, explicar como você chegou no layout escolhido é tão importante quanto ter um design esteticamente chamativo.
Você pode ir ainda mais longe e descrever as etapas pelas quais você passou para que o site seguisse as orientações das práticas recomendadas para os desenvolvedores. Por exemplo, compartilhe o foco na melhoria da SEO e do desempenho de seu site.
Recursos e exemplos: este artigo de Laurence Bradford fornece mais informações sobre a estrutura de um portfólio e inclui exemplos de portfólios de desenvolvedores para a web incríveis e que você pode usar como inspiração.
Tecnologia recomendada: para os iniciantes, eu recomendo usar HTML, CSS e JavaScript puro para criar um portfólio, especialmente se essa é a primeira vez.
2. Criar o clone de um site
Ser capaz de converter com precisão um design em uma página da web plenamente funcional é uma habilidade que todo desenvolvedor de front-end deve ter.
Para fazer isso, você precisa ter um olho apurado para o layout e para as cores. Você também precisa de conhecimento baseado em experiências, como conhecer a melhor propriedade do CSS para exibição de conteúdo que corresponda ou seja capaz de renderizar uma animação de acordo com as especificações.
Na maioria das organizações, os desenvolvedores de front-end são responsáveis por traduzir os mockups e protótipos em páginas da web. Por isso, é uma boa ideia mostrar em seu portfólio suas habilidades de criar um código a partir de um design. Criar o clone de um site é um bom modo de fazer isso.
Há dois modos de se criar o clone de um site:
Primeiro, você pode recriar um site da web existente. Um desafio comum para desenvolvedores juniores é clonar a página inicial do Google (em inglês).
Este método é particularmente útil para entender aplicações na vida real de escolhas de estilo em sites da web populares. Você pode inspecionar os elementos na página e tentar entender os métodos usados para o box-model, para o posicionamento e para a exibição.
Em segundo lugar, você pode recriar um design do zero. Para um projeto mais desafiador, você pode procurar por designs no Dribble ou no Behance e tentar traduzir o design para código.
Para tornar esse método um pouco mais amigável, tente recriar uma página ou recurso simples, como um formulário de login ou um app de previsão do tempo.
Tecnologia recomendada: clonar o design de um site da web não exige qualquer funcionalidade. Assim, usar apenas HTML e CSS pode ser o suficiente. Você pode aproveitar esse momento para se familiarizar com um framework de CSS ou com um pré-processador, como o SASS.
Observação: todos os designs enviados para essas plataformas estão protegidos pelos direitos autorais de seus proprietários. Desse modo, você não tem a permissão de os utilizar para fins comerciais. No entanto, se enviar para eles um e-mail ou deixar um comentário pedindo permissão para recriar o design para fins não comerciais, o designer pode dar abertura para que você recrie seus designs gratuitamente.
Também é importante especificar no seu portfólio que o projeto é um trabalho clonado ou uma recriação do design de outra pessoa.
3. Uma aplicação de CRUD para a web
Realizar operações de CRUD (criar, ler, atualizar e excluir, em inglês) é um recurso muito comum para a maioria dos sites da web (como blogs, comércio eletrônico, painéis e assim por diante), sendo algo com que você tem de se acostumar a criar se pretende ser um desenvolvedor de front-end.
Uma forma básica de aplicação de CRUD é uma lista de afazeres (To-do list, em inglês) ou uma página de anotações para a web. Ter um projeto desses no seu site mostra suas habilidades na manipulação das estruturas de dados. Também é uma boa oportunidade para exibir seu trabalho com um framework de front-end.
O artigo de Tania Rascia sobre como trabalhar com o armazenamento local (texto em inglês) é uma ótima introdução à criação de aplicações de CRUD para a web com JavaScript puro. Se quiser um artigo mais específico para frameworks, confira o artigo da mesma autora, intitulado Building A Crud App with React Hooks (em inglês).
Tecnologia recomendada: aplicações com CRUD exigem o uso de componentes reutilizáveis. Assim, é uma boa ideia criá-los usando um framework como o React ou o Vue, dependendo de sua familiaridade com um deles.
Site de exemplo: React CRUD App with Hooks
4. Um site conectado a uma API
Muitos projetos de grande escala exigem algum tipo de comunicação com um servidor de back-end e exibição de dados obtidos daquele servidor. Isso exige o uso de uma Interface de Programação de Aplicações (ou API, texto em inglês) na maioria dos casos.
Uma API é... gosto de imaginar uma API como se fosse um bibliotecário digital. Imagine que você tem livros guardados em uma biblioteca e precisa usar esses livros em um relatório.
Você vai até o bibliotecário e pede um livro. Você precisa informar a ele algumas palavras-chave (digamos, por exemplo, o nome do livro e o autor) e precisa obter a autorização certa (neste caso, ter um cartão da biblioteca) para conseguir o livro.
Agora, substitua "biblioteca" por "servidor", "livros" por "dados", "relatório" por "site da web" e "bibliotecário" por "API".
As APIs permitem que os desenvolvedores de front-end coletem, modifiquem e excluam dados de um banco de dados no back-end. Criar um site que consome uma API para exibir dados é um ótimo projeto para se incluir no seu portfólio.
Sites de exemplo: você pode escolher criar um site de exibição de dados (por exemplo, um site da web que se conecte a uma API de previsão do tempo e exibir o tempo e a temperatura no momento). Se quiser um projeto mais desafiador, você pode configurar a API RESTful e realizar as operações em seu site da web.
5. Um site da web de "pontuação perfeita"
Um site da web com pontuação perfeita é aquele que tem a pontuação de 100% em todas as categorias do relatório de auditoria do Chrome Lighthouse. Criar um site da web que atenda a todos os recursos exigidos mostra sua habilidade em seguir as práticas recomendadas e de garantir projetos de alta qualidade.
Você pode ler a respeito de como otimizar seu site da web em termos de desempenho e acessibilidade para obter uma pontuação perfeita no Lighthouse neste artigo: How I Built My Perfect Score Portfolio Website (em inglês).
Conclusão
Aí estão: 5 projetos que você pode incluir em seu portfólio de front-end. Além disso, eles não precisam ser todos projetos em separado. Você pode criar um site com pontuação perfeita e clonado ou uma aplicação de CRUD que usa uma API para obter dados de um arquivo JSON.
Agora, siga em frente e comece a criar. Feliz programação :)
Se achou este artigo útil ou se tiver perguntas sobre ele, informe a autora pelo Twitter.