Recursos legais pra te ajudar com o frontend

Caso você não me conheça e chegou aqui agora, gostaria que você soubesse que, apesar de arriscar um pouquinho com HTML, CSS e Javascript, eu sou 100% backend 😅

Por mais que eu tente, eu não consigo deixar as coisas do jeito que eu quero e, quando consigo, nem sempre fica tão bonito quanto eu imaginei. Tenho ZERO senso estético, de verdade. Prefiro bem mais fazer as coisas funcionarem por baixo dos panos.

Mas eu não me dou por vencida, e vez ou outra tento dar aquela praticada no frontend; mais pra não enferrujar de vez do que pra me tornar especialista.

Recentemente, fiz as aulas da Imersão CSS da Alura e me foi extremamente proveitoso. Percebi que tem MUITA coisa que é possível fazer somente com CSS e achei isso fantástico. E eu aprendi muito. Tanto que, até agora, estou dando prosseguimento no meu site, tentando deixá-lo o mais “eu” possível, com várias animações e seguindo o que aprendi: tudo com HTML e CSS.

É claro que vários dos elementos que coloquei no meu site eu não construí do zero, e peguei de algum lugar. Mas só de ter o poder e a noção de como customizá-los, eu já me sinto extremamente poderosa!

Durante a minha jornada com o frontend nesses últimos dias, me deparei com alguns sites que facilitaram bastante a minha vida, e achei por bem compartilhá-los aqui, vai que ajuda mais alguém (e assim também tenho uma referência do que já usei caso precise num futuro próximo 😀

1- Uma tabela massa com os nomes das cores que podem ser usadas no CSS, com o código RGB respectivo e também o código hexadecimal. Link.

2- Google Fonts: maravilhoso para escolher fontes personalizadas para o seu site e usá-las somente adicionando uma referência e o font-family no CSS. Link.

3- Adobe Color: precisa de ajuda pra montar uma paleta de cores pro seu site? Adobe Color está aqui pra isso! É necessário criar uma conta e eu não sei até onde é gratuito, mas é possível salvar suas paletas favoritas e encontrar cores para tudo. Link.

4- Font Awesome: precisa de ícones? Aqui tem VÁRIOS! Antigamente, eu ia até o IconFinder (que também é um bom recurso), escolhia algum pack gratuito e usava. Agora, só o Font Awesome! É bem mais prático e tem tudo o que precisei até agora. Também é necessário criar uma conta e também não sei até onde é gratuito. Link.

5- EmojiCSS: quer colocar emojis no seu site mas não sabe muito bem como? Esse aqui é o seu site. Facílimo de usar e encontrei todos os emojis que precisei. Link.

6- uiGradients: gosta de gradientes mas não sabe como combinar cores? Não sabe pra que lado fica melhor? Esse site já te dá vários gradientes prontos e já gera as propriedades pra você usar no CSS. É só escolher! Link.

7- Free Frontend: precisa de ideias ou de alguma animação já pronta pro seu site? Aqui tem DE TUDO. Peguei bastante coisa daqui e customizei o que precisava. Link.

8- SCSS to CSS Converter: achou aquele código babado que você tá querendo muito MAS ele tá em SCSS? Sem problemas, aqui tá um conversor pra você! Link.

Partiu dominar o frontend! 💪