Uma das melhores maneiras de adquirir habilidade é colocando em prática o conhecimento adquirido. Se você ainda não trabalha com TI, pode ser difícil ter ideias de como aplicar o que aprendeu. Uma das formas de colocar em prática é trabalhar em projetos por conta própria: isso não apenas aumentará sua confiança, mas também tornará progressivamente seu portfólio pronto para o trabalho.
Landing page
Um projeto bastante comum que você pode utilizar para praticar é criar uma landing page. Landing page é uma página estática utilizada para captura de leads, provavelmente você já deve ter visto muitas por aí. O legal deste projeto é que ele é muito completo e te ajuda a aprender o conceito de grids. Outra dica é deixar a página responsiva, ou seja, para que ela se adapte a diferentes formatos, seja na web, no celular ou em um tablet.
Formulário de Cadastro
Todo sistema tem um cadastro, então é bem importante você saber criar um. Você pode criar um sistema de cadastro que seja feito em etapas, assim você precisará levar dados de uma tela para outra, o que é ótimo para treinar. Depois do formulário pronto, você ainda pode fazer uma validação desse formulário. Crie validações como por exemplo, não deixar um campo em branco, apenas números, etc… onde a tela exibirá uma mensagem de erro para qualquer entrada ou saída incorreta.
Clone de interface
Construir um clone de um site é um excelente método pois você deve ser capaz de converter com precisão um design em uma página da web plenamente funcional. Você aprenderá mais sobre os fundamentos de estrutura de página, cores, fontes, mídias, tabelas, entre outros elementos de design. Para realizar essa cópia do original, seja fiel ao máximo de detalhes possíveis.
Uma vantagem é que você pode escolher o nível de complexidade que deseja para este desafio. Um site simples que simplesmente requer HTML e CSS é uma ótima opção para começar - se você for mais iniciante. Caso esteja mais avançado, pode utilizar JavaScript ou React.
Faz parte do dia a dia dos desenvolvedores front-end traduzir os protótipos em páginas da web. Sendo assim, é interessante mostrar suas habilidades de criar um código a partir de um design.
Construa seu próprio site de portfólio
Construir um site de portfólio pessoal é uma das ideias de projeto de front-end mais comuns, porém é bem efetiva. De início, você pode começar usando seu site como um currículo, onde você irá adicionar informações sobre você, suas experiências, habilidades e especializações.
Se quiser dar um toque mais avançado, tem diversos meios de incrementá-lo e deixá-lo interativo, utilizando CSS e JavaScript. Aqui é uma ótima maneira de caprichar no layout, aliás é o seu portfólio.
Consuma uma API
Muitos sites exigem algum tipo de comunicação com um servidor de back-end, onde são exibidos dados obtidos daquele servidor. Para isso, é necessário utilizar uma API. Uma API pode ser definida como um conjunto de padrões que permite a construção de aplicativos, onde ele conecta aplicações, podendo ser utilizada nos mais variados tipos de negócios.
Com a API você tem uma interface para que um sistema se comunique com outro sistema, compartilhando suas ações e ferramentas. A comunicação é feita através de vários códigos, definindo comportamentos específicos.
Um exemplo é a API do Google Maps. Se você está num site procurando um hotel, já deve ter percebido que aparece um mapa do Google Maps indicando onde é o local exatamente, e através deste mapa você consegue até mesmo navegar por ele.
Através das APIs você conseguirá coletar, modificar e excluir dados de um banco de dados no back-end. Por isso, criar um site que consome uma API para exibir dados é um ótimo projeto para se incluir no seu portfólio.
Concluindo…
Estas foram algumas ideias de projetos que abordam conceitos fundamentais para você exercitar suas habilidades e se desenvolver, mas você pode fazer qualquer outro projeto que tiver vontade, o importante é praticar.
Aqui na TreinaWeb temos um espaço específico de projetos práticos que vale a pena conhecer! =D
Até a próxima!
