Reset CSS, google fonts e adobe colors

Agora vamos abrir o arquivo CSS do nosso projeto e começar a construir a estilização do nosso projeto Decoder. Quando abrimos o nosso navegador podemos perceber que nossos elementos da tela estão com um espaçamento na linha esquerda? Sem contar que alguns textos estão maiores que outros. 

Isso ocorre porque os navegadores têm uma estilização padrão, isso nos atrapalha, pois cada navegador possui diferenças entre si. Mas como resolver isso? Bom, usaremos o reset CSS, sendo importante mencionar que podemos construir nosso próprio reset de acordo com a necessidade do nosso projeto, porém podemos usar um reset pronto, nesse caso usaremos um pronto, disponível do site https://meyerweb.com/eric/tools/css/reset/. 

Basta copiar e colar o código disponibilizado e verificar a página no nosso navegador para vermos que agora não há mais nenhuma estilização. Agora, vamos para os próximos passos do nosso projeto.

Primeiro vamos pensar em qual fonte podemos escolher para o nosso projeto, podemos utilizar as fontes gratuitas do google fonts, disponibilizadas neste link: https://fonts.google.com/. Existem inúmeras fontes e você pode escolher a que desejar para o seu projeto, aqui eu usarei a fonte Inter. no link a seguir temos um vídeo muito legal com um tutorial de utilização das fontes: https://www.youtube.com/watch?v=FLuQonci9wU.

Agora que temos nosso reset e nossa fonte adicionadas ao projeto, vamos escolher nossas cores, temos inúmeros sites para isso e mais para frente irei escrever um artigo sobre isso para te ajudar a encontrar outras opções para futuros projetos, por agora, vamos usar o adobe colors: https://color.adobe.com/pt/create/color-wheel.

Nesse projeto as cores utilizadas foram as seguintes: #4C9971, #0A3871, #343A40 e #264D39. Todos eles estão em hexadecimal para adicionarmos ao nosso CSS. Nos próximos artigos iremos construir o nosso CSS para que possamos seguir para o ponto crucial do nosso projeto, o funcionamento utilizando o JavaScript. Um abraço e até a próxima.

Blog de artigos: https://francileudo-frontend.blogspot.com/2022/09/reset-css-google-fonts-e-adobe-colors.html