0

Criação de blog de publicações simples - Challenge 1 da Codelândia

Francileudo Oliveira
Francileudo Oliveira

O Challenge foi dividido em 3 desafios, sendo o 2º o mais díficil deles para mim. Abrindo o Figma compartilhado pelo autor do Challenge, o Iuri Silva, criador do servidor "Codelândia" no Discord.


O desafio 1º consistia em criar o HTML e o CSS do projeto. Nesse ponto inicial o Iuri entregou, através do servidor do Discord, um arquivo .Zip que continha as variáveis com as cores em hexadecimal e o gradiente que seria usado no HEADER do blog. Ele também deixou um texto com sugestões e dicas para o projeto, como utilizar as variáveis, por exemplo.


Nesse primeiro .zip continha também as fontes de texto que foram utilizadas no projeto, eu não utilizei as fontes baixadas, peguei sua nomenclatura e encontrei todas no site do Google Fonts.


Chegando no 2º desafio encontrei algo realmente complexo, a responsividade. O arquivo .zip entregue nesse desafio continha um texto com sugestões, dicas e os padrões de resolução para serem aplicados ao MEDIA QUERY do CSS. Quando eu comecei não tive uma aparência legal no projeto, depois de algum tempo percebi o meu erro, resolvi o desafio 1 com a resolução para Desktop e no 2º desafio teria que diminuir toda a página.


Resolvi recomeçar o projeto, não foi complicado pois clonei o HTML inteiro e aproveitei mais de 70% do meu CSS antigo refazendo o novo. Depois disso comecei o MEDIA QUERY e percebi uma facilidade maior em fazer a responsividade a partir do blog pequeno até o de tamanho maior. Nesse desafio eu aprendi a começar pela resolução mais baixa, para o celular, e depois seguir para as maiores apenas aumento e reposicionando os objetos do HTML.


O 3º e último desafio deste Challenge inicial teve como foco uma animação simples em JavaScript. O arquivo .zip trazia fotos dos códigos e um texto explicando, em detalhes para os iniciantes na linguagem. Resolver esse desafio foi simples, utilizando a biblioteca ScrollReveal do JavaScript deixei mais interressante a rolagem da página, pois antes era estática e depois do código em JS ao rolar a página os objetos começavam a aparecer deixando bem interressante o resultado final.


Neste desafio o Iuri optou, no texto explicativo, mostrar ao programador iniciante a colocar o código JavaScript no final da página HTML, como essa é uma prática não recomendada, optei, mesmo o código JS sendo pequeno, a criar um arquivo separado e linkar ele ao meu HTML.


Conclusão


Resolvendo o projeto percebi que ainda preciso aprender Responsividade e mais sobre o que o JavaScript pode fazer, preciso melhorar também como escrevo os meus HTML's para que as páginas que criarei futuramente tenham uma ótima estruturação.


Links




0
0

Comentários (2)

1
Leandro Carvalho

Leandro Carvalho

25/09/2021 14:55

Meus Parabéns por ter conseguido se superar ao resolver os Desafios.

Seu projeto ficou muito incrível.

2
Kaio Sodré

Kaio Sodré

25/09/2021 09:54

Muito bom Francileud, Parabéns !!


🧠 Fazendo Bacharelado em Ciência da Computação

Brasil