[FRONT-END] Projéto no Figma para praticar HTML e CSS (e talvez JavaScript)

Introdução

Fala galera do tab, tranquilo?

Hoje venho ajudar (ou ao menos tentar) o pessoal que ta começando a trilhar a famosa tríade da web, mais como conhecida também com HTML, CSS e JavaScript.

Lembro de quando comecei a estudar ambos os três a um tempo atrás e de como era difícil encontrar formas de praticar aquilo que eu estava aprendendo que fossem diferente do exemplo do curso/aula que eu estava fazendo pois, existiam sim muitos exemplos na web porém, a maioria eram apenas imagens ou projetos já lançados e eu sempre terminava tendo que adivinhar tamanho de padding, margin, tendo problema com qualidade de imagem e afins.

Vendo que não tinha muito saída a não ser desenvolver projetos 'própios', comecei a pegar exemplos no Behance e replicá-los no Figma, tornando mais fácil a visualização e construção do projeto como um todo a partir do momento que eu tinha em mãos informações essencias do mesmo.

Enfim, o que eu venho trazer hoje é um pequeno (talvez não tanto) projeto que fiz uma vez no Figma que pode ajudar bastante quem está começando a praticar criação/estilização e interação de um site abrindo espaço pra usar todo tipo técnica que existe por ai.

O projeto no Figma pode ser encontrado aqui ou logo no final da publicação.

O Projéto

O projeto em si tem como base um site de um time específico de League of Legends (infelizmente perdi o link do projeto original e não consigo por a fonte aqui) e conta com diversas secções que propõem diferentes desafios tanto de estrutura HTML como de posicionamento com CSS (a parte de JavaScript é totalmente opcional já que o projeto foi feito antes mesmo de eu saber usar a linguagem.)

• A fonte do projéto é totalmente gratúita e pode ser encontrada no Google Fonts.
• As imagens usadas no projéto foram tiradas todas do Google e pode ou não conter direitos autorais dos respectivos donos.
• O projeto tem fins totalmente educativo/informativo e de forma nenhuma é recomendado usar/distribuír com fins lucrativos.

Parte Inicial.

Posicionamento de elementos com imagens é sempre uma coisa dolorosa (ainda mais na hora do responsivo) e, acredito que só esse início pode te ajudar muito a encontrar a melhor forma de fazer isso!

Parte de equipamentos.

Uma ótima secção para exercitar grid/flex-box, ou float pros mais corajosos.

Parte da loja.

Mais uma secção para treinar posicionamento de elementos.

Parte de slider.

Essa e uma das partes que é opcional usar ou não JavaScript para mudar os elementos na tela, caso não for usar, escolha um dos equipamentos na esquerda e faça apenas um deles (no projeto do Figma, os três estão propositalmente na tela para informar que ali seria um slider de três itens porém, no projeto final seria mostrado apenas um conforme o usuário apertasse no botão).]

Parte do footer.

Secção de newsletter e footer, ótima também para praticar posicionamente de elementos na tela.

Conclusão

O projeto em si é bem maior do que foi mostrado nessa públicação, você pode visualizá-lo e caso ache melhor, duplicar e ter maior controle aqui, todo conteúdo de mídia (ícones, imagens e fundos) podem ser exportados do projeto para uso na hora da construção do código, a versão mobile também se encontra no projeto.

Caso não consiga prosseguir em alguma etapa do projéto, sinta-se a vontade para voltar aqui e pedir ajudar, nem mesmo eu quando tentei pela primeira vez consegui, apenas na terceira tentativa que deu certo, o segredo é insistir!

Enfim, se você chegou até aqui obrigado e espero ter ajudado a seja lá quem esteja trilhando a mesma jornada que trilhei a um tempo atrás, até mais!