Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jlhmtt/7-days-of-code

Projeto front-end proposto pela Alura
https://github.com/jlhmtt/7-days-of-code

7daysofcode css html

Last synced: 1 day ago
JSON representation

Projeto front-end proposto pela Alura

Awesome Lists containing this project

README 

        
# 7 DAYS OF CODE



Aviso: o código foi escrito com um monitor de 1440p em mente!



Esse é um projeto proposto pela Alura com o intuito de praticar HTML e CSS em uma situação "verídica".

A ideia é criar uma página de Sobre Nós (adicionando também seções como cultura da empresa, vagas abertas, etc.) com navegação, formulários e imagens.

E, pra adicionar ainda mais a esse desafio, eu tô fazendo a minha primeira aparição no Github!



Enfim, sem mais delongas, aqui nesse readme eu pretendo falar sobre a minha experiência codando um site do zero sozinha, dividindo as tarefas por dia (como o desafio propõe).



# Dia 1 - Cabeçalho



Tive uma certa dificuldade com o espaçamento no CSS e com os containers no HTML. Eu sabia o que eu queria fazer, mas não fiquei um pouco confusa em relação a colocar tudo em um container só, fazer 1 container pra casa partezinha da nav, depois me confundi um pouco nos tamanhos de cada um no CSS, mas fui experimentando e tive um resultado ótimo.

Admito que pode ter ficado um código complicado de transformar em responsivo, já que eu usei widths específicas no lugar de algo um pouco mais "automático" (como poderia rolar usando grid, por exemplo) mas consegui entregar o que foi proposto, então fiquei bem orgulhosa de todo jeito.



Depois disso, o resto foi tranquilo. Adicionei as fontes, criei variáveis pra facilitar no CSS, organizei os arquivos, tudo fluiu bem aqui.



Pra fechar, algo que eu devia ter descobrido antes: Github é muito mais fácil de usar que eu imaginava.



E é isso por hoje! Terminando o dia 1 com um sorriso no rosto (:



# Dia 2 - Sobre nós



Hoje foi bem tranquilinho. A parte do Sobre Nós foi só pôr um flex column, centralizar tudo, adicionar algumas variáveis (de cor e tamanho das fontes) no root, e fechou.

O trabalho maior foi fazer algumas contas pra saber exatamente quantos EM eu tinha que colocar de altura na section (que engloba todos os textos diferentes, o título, o texto e a legendinha no topo) pra ficar com a margem certinha, bem fiel ao arquivo do Figma.



Na verdade, a maior dificuldade hoje foi entender o que eu tinha feito de errado ontem!

Eu abri o site pelo Github Pages e a logo não aparecia de jeito nenhum. Depois de pesquisar e bater a cabeça um pouquinho, eu descobri que o Github 1. não reconhece arquivos e pastas que comecem com um _ e 2. reconhece caminhos assim "./nomedapasta/imagem.png", não assim "nomedapasta/imagem.png".

Eu consertei essas duas coisas e ficou tudo bonitinho (:



# Dia 3 - Métricas



Hoje foi bem tranquilo de novo! Esse projeto tá me dando bastante confiança. Por mais que nenhuma das tarefas diárias tenha sido super difícil (até agora), é muito bom saber que eu consigo fazer tudo isso sozinha. Também é bom saber que eu tenho autonomia pra pesquisar sobre o que eu não sei ainda, eu consigo encontrar as respostas pra qualquer problema que eu encontre. Enfim.



Hoje foi parecido com ontem, a única diferença foi que ao invés de um container só foram 4. De novo, fiquei fazendo vários cálculos de pixel pra EM ou REM, mas parece que foi automático, sabe? Ontem eu fiquei quebrando a cabeça pra entender que cálculo eu tinha que fazer, hoje já tava tudo certinho na minha cabeça. Mais um orgulho pra lista.



Outra coisa boa que eu percebi hoje foi que eu tô entendendo melhor onde usar margin e onde usar justify-content: space-between (ou alguma outra variação disso).

Acho que é bem natural isso, quando a gente aprende flex a gente acha que tem que usar em todo lugar, a mesma coisa pra grid, etc.

Hoje eu usei flex pra uma coisa, margin pra outra, sem esse impulso de querer colocar o flex onde ele não cabia.



# Dias 4 e 5 - Vagas



Por pura animação, por não querer parar de codar, eu juntei os dias 4 e 5 em um só. A proposta era dividir a seção de vagas em duas partes, mas acabou que eu fiz tudo de uma vez só.



Essa foi a seção mais desafiadora do site todo. Foram muitas divs, muitas sections, muitas margens, e foi um processo maravilhoso!

Foi surpreendentemente divertido fazer essa parte da página. Descobrir qual era a melhor forma de nomear as classes (ainda acho que não dei os melhores nomes do mundo, mas tô aprendendo), além de várias coisas pequenininhas, tipo descobrir que dá pra preencher um item com borda usando background-color.



Tô muito, muito, muito feliz com o processo de criação desse site. Por menor que seja esse projeto, tá sendo muito gratificante pra mim.



# Dia 6 - Depoimentos



Hoje foi mais um desses dias em que eu tive que dedicar um tempo a entender onde usar margin, onde usar justify-content, etc. Essa foi uma das parted do site onde eu mais usei margin, porque tinham 5 elementos na página e eu tive que espaçar cada um de um jeito, então usei margin em tudo mesmo. O flex só serviu mesmo pra fazer flex-direction: column.



Acho que é isso sobre os desafios de hoje!

Tô cada dia mais confiante e animada pra continuar descobrindo o que eu consigo fazer (:



# Dia 7 - Rodapé



Finalmente, a última parte do site! Foram bem poucos elementos adicionados, mas um deles era um formulário (só com email e um botão de envio).

Admito que eu não fazia formulários há muito tempo, então tive que dar uma pesquisada pra relembrar, mas no fim tive um resultado ótimo!



Termino esses 7 dias super satisfeita e animadíssima pra participar de mais desafios da Alura.