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.

Gif mostrando a diferença entre o designer e o desenvolvedor: o designer olha de um lado para o outro enquanto o desenvolvedor olha de cima para baixo.

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!

As três programadoras negras do filme "Estrelas Além do Tempo"

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.

Print screen do site Adobe Color, com o círculo cromático e uma paleta de cores gerada a partir dele.

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.

Algumas das opções de gradientes do uiGradients (print do site)
Algumas das VÁRIAS opções do uiGradients

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! 💪

Uma figura andrógina digitando em um MacBook enquanto faz biquinho e dança.

Um comentário em “Recursos legais pra te ajudar com o frontend”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.