Sites para se inspirar e construir projetos Front-End (para iniciantes)
Pensando em se aventurar pelo mundo Front-End, mas não sabe qual projeto fazer?
Acredita que já passei por essa mesma situação? Sentava em frente ao computador querendo programar algo legal (e que eu conseguisse fazer sozinha), mas não fazia ideia do que desenvolver.
Até porque quando você é iniciante nesse mundo, fica inviável pegar algo pesado logo de cara. Pois dependendo da complexidade, você acaba mais “arrancando os cabelos” tentando fazer o projeto do que aprendendo algo de fato sabe?
E por esse motivo, é crucial pesquisar projetos de acordo com a sua realidade e ir aumentando o grau de dificuldade a medida que você vai aprendendo dentro da sua Squad ou nos seus estudos.
Acontece que fazer essa pesquisa de ideias para iniciantes demora um tempinho certo?
E desse modo para economizar tempo, criei uma pequena listinha de referências que uso quando quero me inspirar para criar um projetinho Front-End. Bora conferir?
Dica 1: UpLabs
O UpLabs é um site para desenvolvedores e designers que querem compartilhar e encontrar projetos de sites e aplicativos.
Eu confesso que quando soube da existência desse site, não larguei mais. Pois lá você encontra uma infinidade de designs gratuitos e pagos que você pode baixar e se divertir construindo algo do zero.
Vamos ver alguns exemplos? Vou deixar logo abaixo uma “curadoria” de templates do UpLabs para você começar:
Página de Login
Esse é um projeto clássico do mundo Front-End, pois muitos sites hoje em dia, desde os mais simples até os complexos, utilizam páginas de login.
Essas páginas geralmente são bem simples e rápidas de serem feitas, o que é ótimo para exercitar.
No UpLabs você encontra diversas opções, mas aqui deixarei 2 que gostei bastante:
Ótimo projeto para aprender como colocar imagens de fundo, centralização, máscara nos campos de e-mail e senha, validações e combinar cores dos inputs com a da imagem escolhida.
Projeto muito bom para treinar divisão de layout, sendo de um lado a imagem e do outro os campos de input e botões (que podem ser com ou sem animação)
Página de Cadastro
Além da página de Login, um outro projeto clássico são as páginas de cadastro. Com elas, é possível treinar não só HTML, CSS, JS ou React, mas também como usar máscaras para formatar os campos e diferentes opções de entrada ao usuário (como login com Facebook, Google, etc)
No exemplo anterior, deixei algumas referências de projetos para web, porém para a páginas de cadastro, veremos inspirações mobile:
Ótimo inclusive para treinar 2 coisas em 1, no caso o login e o cadastro.
Esse design é ótimo para aprender a dimensionar várias opções em uma tela pequena, a colocar máscaras e validações nos campos a serem preenchidos, bem como, trabalhar com um layout clean e campos obrigatórios a serem preenchidos.
Dica 2: Comunidade do Figma
Você sabia que o Figma tem uma comunidade cheia de materiais e templates para usarmos de graça?
Basta você acessar o site da comunidade, digitar no campo de pesquisa o que deseja e pronto, milhares de opções vão surgir.
E falando em opções, vamos conferir um exemplo logo abaixo:
Com este template, é possível treinar tanto HTML e CSS puro como React. Para usar o modelo, basta clicar em “Get a Copy” para começar.
Dica 3: FrontEnd Mentor
Precisando de um “mentor” para os seus projetos Front-End? Agora tem um.
Esse site é simplesmente um achado real para desenvolver desde uma landing pages até sites e componentes avulsos.
O mais interessante é que no FrontEnd Mentor, você consegue achar opções desde o nível iniciante até o nível guru, que seria o mais difícil.
Todos os projetos possuem um template inicial que você pode pegar do Github, bem como, explicações iniciais contidas no Read.me como as features a serem trabalhadas.
As features nada mais são do que pré-requisitos que o projeto deve cumprir como responsividade, ações que usuário será capaz de fazer, entre outros.
Logo abaixo, você confere uma ideia bem bacana que achei por lá:
Essa atividade também é muito clássica, pois existe uma infinidade de e-commerces na internet, e logo, o uso de cards de produto é algo bem comum.
O exemplo abaixo inclusive, é ótimo para quem quer treinar HTML e CSS puros, além de começar a dar seus primeiros passos em projetos responsivos.
Bem, finalmente chegamos ao final do nosso post. Espero imensamente ter te ajudado a ter muitas inspirações para os seus próximos códigos e projetos.
Um abraço e até a próxima!
