0

Clonando a página inicial de pesquisa do Google com HTML e CSS

#HTML #CSS
Isaias Mendonça
Isaias Mendonça

*Primeiro artigo ^^.*


Breve introdução


Acabei meus bootcamps e estava inspirado pelos projetos de clone da Netflix e do Instagram. Pensei: 'deveria fazer meu próprio projeto de clone do zero :D!'.


A página inicial de pesquisa do Google é bastante simples e bonita, então escolhi ela.


Ferramentas úteis:


Extensões do Chrome:

  1. Fonts Ninja - permite inspecionar rapidamente as fontes de um site. Usei essa extensão para descobrir a fonte base da página inicial do Google. [1]
  2. ColorZilla - permite inspecionar cores. Essa extensão foi extremamente útil e precisa quando eu busquei saber as cores de um botão de login e do rodapé da página. [2]


Live Server:

Uma extensão do Visual Studio Code que ajudou bastante pois eu estava trabalhando apenas com um arquivo HTML. O Live Server atualiza a página no navegador sempre que você atualiza o arquivo e isso poupa um bom tempo.


Material Design:

Precisei utilizar alguns ícones, como a lupa de pesquisa, o Material Design me ajudou demais com isso. Não precisei baixar nenhum arquivo, apenas procurar o ícone que eu queria no site [3] e colocar no meu HTML, depois de fazer um import através da tag <link> no header.


HTML


Por questões práticas, primeiro criei apenas o esqueleto da página em HTML. Tive cuidado para observar como os elementos estavam dispostos na página para criar logo todas as tags que eu pudesse precisar, evitando necessidades de ajustes mais tarde.


CSS


No CSS tentei usar pela primeira vez o pattern BEM (Block Element Modifier) [5]. Li alguns artigos sobre o pattern e não sei se já estou usando tão corretamente, mas tentei haha. Mesmo sendo um arquivo pequeno, sinto que o pattern me salvou muito tempo, pois a nomeação de classes se tornou bem mais intuitiva e fluida.

Como na etapa anterior os elementos HTML e as classes já haviam sido dispostos de maneira que não precisassem de modificações futuras, não precisei me preocupar em adequar o CSS a exceções do HTML, pois os dois já estavam bem encaixados.

Finalmente defini as classes CSS, alternando entre a página inicial do Google e o meu clone e fazendo pequenos ajustes (basicamente definindo flex boxes e margens haha). Em pouco tempo o clone já estava pronto ^^.


Notas finais


Podem checar meu clone no GitHub [6], ficou bem parecido ^^. (Tentei colocar as imagens no corpo do artigo mas não consegui ,_,.)

(Na minha tela meu clone ficou bem bonitinho, mas não fiz o clone muito responsivo, então talvez na tela de vocês fique um pouco menos bonito haha.)

Futuramente vou fazer o clone da página do Google que mostra os resultados da pesquisa, essa deve ser um pouco menos simples haha. Dessa vez vou verificar quanto tempo levo. Publico sobre o próximo clone aqui em breve ^^.


Referências:

1
72

Comentários (1)

0
Taryn Silva

Taryn Silva

23/03/2021 23:45

Parabéns , obrigada por compartilhar :)

Desenvolvedor JavaScript/Python, Estudante de ciência da computação, fascinado pelas tecnologias que vão moldar o futuro da humanidade.

Brasil