Aqui estão 6 desafios de front-end para o código
Você é capaz de codificar esses desafios de front-end?
Se você apoia esse conteúdo por favor siga o autor original e leia o conteúdo original:
https://betterprogramming.pub/here-are-6-frontend-challenges-to-code-9952190c97cc
Foto de Olav Ahrens Røtne no Unsplash
O desenvolvimento de front-end é estressante e difícil — mas com prática, pode-se dominar o ofício. Se você estiver disposto a colocar o trabalho e esforço nisso, poderá se tornar um solucionador de problemas proficiente no cenário de desenvolvimento de front-end. Uma maneira eficaz de se tornar um grande desenvolvedor front-end é simplesmente criar e resolver o máximo de desafios possível.
Aqui estão seis desafios que você pode começar a resolver hoje para se tornar um mestre no desenvolvimento de front-end. Sem mais delongas, aqui estão os seis desafios que você provavelmente deve codificar.
Torne-se um Membro Médio para apoiar diretamente o meu trabalho . Você também terá acesso total a todas as histórias no Medium. Desde já, obrigado!
1. Formulário de cartão de crédito
Uma forma fantástica de cartão de crédito com micro-interações suaves e doces. Inclui formatação de número, validação e detecção automática do tipo de cartão. Ele é construído com Vue.js e também é totalmente responsivo.
Veja ao vivo aqui .
formulário de cartão de crédito — https://github.com/muhammederdem/credit-card-form
O que você aprenderá resolvendo o desafio
- Tratamento e validação de formulários
- Lidar com ouvintes de eventos (por exemplo, quando os campos mudam, os valores são impressos no cartão de crédito)
- Compreender como exibir e posicionar elementos na página, especialmente o cartão de crédito sobreposto ao formulário
2. Gráfico de barras do zero
Um gráfico de barras ou gráfico de barras é um gráfico ou gráfico que apresenta dados categóricos com barras retangulares com alturas ou comprimentos proporcionais aos valores que representam.
As barras podem ser traçadas verticalmente ou horizontalmente. Um gráfico de barras verticais às vezes é chamado de gráfico de linha.
O que você aprenderá resolvendo o desafio
- Exibir dados de maneira estruturada e facilmente compreensível
- Opcional: Aprenda como usar o
<canvas>elemento e como desenhar elementos com ele
Você pode encontrar os dados da população mundial por ano aqui .
População Mundial por Ano
O crescimento populacional ao longo da história de 5.000 aC até o ano atual (2019) para toda a população do mundo
3. Twitter Heart Animation
Em 2016, o Twitter apresentou esta animação incrível para seus tweet curtir. Em 2019, ainda parecia fantástico, então por que não criar um você mesmo?
Twitter tweet como animação
O que você aprenderá resolvendo o desafio
- Como
keyframesfunciona o atributo CSS - Como manipular e animar elementos HTML
- Como combinar JavaScript, HTML e CSS
4. Repositórios GitHub com funcionalidade de pesquisa
Nada fora do mundo aqui — os repositórios do GitHub são basicamente apenas uma lista glorificada.
A tarefa é exibir os repositórios e permitir que o usuário filtre os repositórios. Use a API oficial do GitHub para buscar repositórios por usuário.
Página de perfil do GitHub — https://github.com/indreklasn
O que você aprenderá resolvendo o desafio
- Como buscar dados de uma API
- Como exibir os dados da API
- Como filtrar e mostrar os dados relevantes para cada pesquisa
- Opcional: se você estiver pronto para o desafio, use a API v4 , que é construída usando GraphQL. Se você quiser aprender GraphQL, vá para um dos meus artigos anteriores .
Como configurar uma API poderosa com GraphQL, Koa e MongoDB
Construir uma API é divertido!
5. Salas de bate-papo estilo Reddit
As salas de chat são uma forma popular de comunicação, pois são fáceis e divertidas de usar. Mas o que realmente alimenta as salas de bate-papo dos dias modernos? WebSockets!
O que você aprenderá resolvendo o desafio
- Como usar WebSockets e comunicação em tempo real e atualizações de dados
- Como funcionam os níveis de permissão do usuário (por exemplo, o proprietário de um canal de bate-papo tem a função de
admin, enquanto outros na sala têm a função deuser) - Validação e tratamento do formulário — lembre-se, a caixa de bate-papo para enviar uma mensagem é um
inputelemento - Como criar e entrar em diferentes salas de chat
- Mensagens diretas e como funcionam. Os usuários podem se comunicar com outros usuários de forma privada. Essencialmente, você estabelecerá uma conexão WebSocket entre dois usuários.
6. Navegação Stripe-Style
O que é único nessa navegação é a modificação do contêiner popover para se ajustar ao conteúdo. Há uma elegância nessa transição em relação ao comportamento tradicional de abrir e fechar um novo popover inteiramente.
Stripe Navigation
O que você aprenderá resolvendo o desafio
- Como combinar animações CSS com transições
- Fading cruzado o conteúdo e aplicando a
activeclasse para o elemento que está sendo pairado
Tente fazer você mesmo primeiro, mas se precisar de ajuda, confira este post para obter um guia passo a passo.
Conclusão
Obrigado pela leitura — espero que você tenha encontrado algo interessante para codificar.
PS: Procurando mais ideias de codificação? Nunca mais fique sem ideias de codificação, nunca mais. Tenha acesso aqui a vários desafios de front-end meus.
Lembre-se de que não há atalhos quando se trata de se tornar bom em codificação.
