Nada melhor para crescer como desenvolvedor do que construir projetos. Tutoriais também são uma outra ótima forma, mas muitas pessoas ficam sem inspiração ou ideias, então para ajudar vocês hoje vou mostrar 5 projetos frontend para melhorar suas habilidades todos de nível iniciante.
Todos os projetos mostrados aqui tem os designs das versões desktop e mobile no link logo após a explicação de cada projeto.
Além disso, cada projeto conta com um guia de estilos com as fontes e cores usadas além de ter uma introdução e até algumas dicas.
Vale lembrar que todos os projetos contam também com todas as imagens usadas.
Então você fica responsável só por programar, e não tem que se preocupar em achar e otimizar as imagens.
A ideia desse post não é dizer com o que desenvolver.
Então se você quer praticar React, Vue, Angular, Sass, Less, vá em frente afinal a ideia aqui é aprender e praticar.
Para ajudar você pode usar a plataforma do Frontend Mentor, que aliás eu recomendo muito a plataforma deles.
Se você quer criar seus projetos de forma mais fácil eu sugiro o uso do codepen.
Pois com ele você não vai precisar instalar nada para começar a desenvolver os projetos.
Além de conseguir testa-los de maneira simples direto no navegador.
Sem mais enrolação vamos aos projetos.
5 projetos frontend para melhorar suas habilidades – Lista
1 – Grid de Preços
Esse é o desafio ideal para começar.
Pois ao invés de montar uma landing page toda você vai começar só pela Grid de Preços.
Afinal ela é mais simples, então também é mais fácil de construir.
Linguagens usadas: HTML e CSS
Passos Extras:
Primeiramente otimize o tamanho do componente a partir do tamanho da tela do dispositivo.
Igualmente não deixe de conferir como fica o comportamento do componente em telas de celulares.
Implemente o hover do botão Sign Up a fim de que o botão tenha maior destaque.
Aprendizados Esperados:
Por menor que seja o projeto, o projeto tem alguns desafios de layout e será uma ótima oportunidade para praticar Flexbox ou CSS Grid, vai aprender também o básico de responsividade além disso o básico de HTML e CSS já vão estar cobertos com esse pequeno desafio.
Dica:
Pense em dividir o espaço em 3 caixas, uma maior na parte de cima e duas menores na parte de baixo, onde a soma delas tem o tamanho da primeira.
Para deixar responsivo pense em deixar as 3 caixas do mesmo tamanho, uma abaixo da outra.
2 – Seção com quatro cards de features
Nesse segundo projeto a ideia é explorar um pouco mais sobre o posicionamento dos elementos na tela.
O desafio maior aqui vai ser a forma de posicionar os elementos no desktop, uma vez que no mobile eles ficaram um abaixo do outro.
Linguagens usadas: HTML e CSS
3 – Landing Page com área de introdução
Esse é o terceiro passo, nele você vai aprender ainda mais sobre disposição de elementos na tela de maneira responsiva além de treinar as iterações de botões.
Mas não ache que é um projeto muito simples, pois tem algumas animações legais nos botões.
Linguagens usadas: HTML e CSS
Dica:
Use o CSS Grid para alinhar todos os elementos no mobile.
Use também as Media Queries para separar os tamanhos de quebra de layout.
4 – Tela de cadastro de Email
Uma vez que já conseguiu colocar os elementos de forma segura então chegou a hora de criar uma tela de cadastro de email.
Fique atento ao posicionamento dos elementos na tela no mobile e faça a validação para checar se o campo foi preenchido e se o email é válido, ademais fique atento(a) ao funcionamento da tela em telas menores (Dica: Coloque um acima do outro).
Linguagens usadas: HTML, CSS e Javascript
Dica:
Por mais que no layout de desktop os dois blocos tenham larguras diferentes tome cuidado para que o mesmo não ocorra em celulares ou tablets.
5 – Tela de captura de Lead
Já que fez a validação de um campo porque não fazer a construção de um formulário completo?
Faça as validações de campos vazios ou email válido.
Por mais que seja uma tela simples fique atento ao comportamento responsivo, pense como deseja que a tela funcione em um celular ou tablet.
Linguagens usadas: HTML, CSS e Javascript
Dica:
Para a validar o email é legal usar uma expressão regular.
Tente colocar todas as validações em uma função só, disparada a partir do click do botão.
5 projetos frontend para melhorar suas habilidades – Conclusão
Os projetos mostrados acima te darão uma boa noção inicial de frontend.
Por mais que sejam simples, depois de fazer esses projetos você será capaz de posicionar elementos nas páginas.
Além de conseguir fazer ajustes de responsividade e até mesmo fazer algumas validações de formulários.
Fico a disposição nos comentários para ajudar nas dúvidas que tiverem.
E se gostaram desse tipo de conteúdo e queiram algo mais avançado é só deixar ai nos comentários que eu ficarei feliz em continuar.
Agora se você quer aprender criando projetos então confira o curso Programador Full Stack JavaScript dos nossos parceiros da One Bit Code.
Confira aqui mais dicas.
ESTOU COMECANDO A ESTUDAR FRONT END E ADOREI ESSA EXPLICACAO SHOW
Valeu Wellington, precisando de alguma coisa só deixar nos comentários aqui, ou no insta @devporai que ficarei feliz em ajudar.
Muito bom essas dicas. <3
Podemos publicar no github quando concluirmos ou tem problema com direitos autoriais?
Publica lá, tudo que foi colocado no post está livre de direitos autorais, quando publicar me manda lá no instagram @devporai pra eu compartilhar com o pessoal.