DEV Community

Luigi Belanda
Luigi Belanda

Posted on

Jornada pelo DevLinks - Rocketseat

ūüďĚ Introdu√ß√£o

Este artigo como objetivo detalhar a minha jornada e experiência pela trilha de desenvolvimento do DevLinks, projeto criado pela Rocketseat com as aulas ministradas pelo Mayk Brito (@maykbrito) para a criação de uma espécie de Linktree usando conhecimentos básicos de HTML, CSS e JS.

Durante esse artigo irei acabar passando um pouco por cada módulo da trilha do projeto, comentando sobre os assuntos mais importantes de cada módulo na minha visão e que foram importantes para o projeto e que eu não sabia ou que são válidos serem reforçados.


ūüö∂‚Äć‚ôāÔłŹ M√≥dulo 1 - Primeiros passos

Neste m√≥dulo acabamos sendo apresentados a conceitos b√°sicos sobre o que √© Front e Back-end, programas, arquivos, ferramentas que v√£o ser utilizadas (Visual Studio Code, Git, GitHub, Fronteditor.dev e outras) e suas fun√ß√Ķes etc. √Č algo muito b√°sico mesmo, apenas aulas te√≥ricas com as explica√ß√Ķes de cada assunto.

Normalmente qualquer pessoa com um pouco de estudo em programa√ß√£o j√° tem uma no√ß√£o do que √© cada uma das coisas que s√£o pontuadas nesse momento, mas acho super v√°lido esses tipos de informa√ß√Ķes pois o projeto em si n√£o √© algo para pessoas intermedi√°rias ou avan√ßadas em programa√ß√£o como outros projetos que a Rocketseat faz, mas algo justamente para iniciantes e s√£o justamente essas pessoas que normalmente tem essas d√ļvidas mais b√°sicas.


ūü߆ M√≥dulo 2 - Aprendendo a aprender

Depois de sermos apresentados √† conceitos b√°sico de programa√ß√£o e outras informa√ß√Ķes iniciais vamos para essa parte onde √© nos apresentada algumas dicas / ideias de como estudar, o que √© importante na hora do estudo, t√©cnicas, planejamento, organiza√ß√£o etc.

Se n√£o estou enganado, assim como o m√≥dulo acima, n√£o √© a primeira vez que ou√ßo falar dessas coisas em conte√ļdos / projetos da Rocketseat. Novamente, muito pertinente esse tipo de assunto, √© claro que para as pessoas iniciantes esse tipo de assunto √© mais importante do que para as demais, muitas vezes por n√£o terem uma ideia de como lidar com seus estudos, mas esse assunto pode se encaixar bem tamb√©m em outras pessoas at√© mesmo com conhecimentos mais avan√ßados em programa√ß√£o.

A melhor parte na minha opinião desse módulo foram as técnicas de estudo (Pomodoro, Lozanov, Feymann e Active Recall) e como aprender na prática (gravar vídeos, áudios, escrever artigos (ora ora né) etc).


ūüĖ•ÔłŹ M√≥dulo 3 - Iniciando o HTML e CSS

Aqui já começamos com alguns assuntos mais da área de programação mesmo, como o nome do módulo sugere aqui começamos a ver sobre o HTML e CSS, novamente começando bem da base com ambos os assuntos (o que é o HTML? O que é uma tag HTML? O que é o CSS? Conceitos CSS etc).

Um dos pontos interessantes (e que sempre me confunde) √© a quest√£o do box model, display block e inline. J√° passei por muitas complica√ß√Ķes tentando deixar elementos um do lado do outro ou embaixo do outro, tudo por n√£o entender direito ou confundir esses assuntos.

Seguindo, começamos a criar a estrutura básica do HTML, linkar o CSS com o HTML e colocar realmente em prática alguns conceitos. Nesta parte prática a primeira coisa que chamou atenção foi no posicionamento da imagem usando o backgound-position, se pegarmos e colocarmos apenas o código abaixo:

body {
  background-image: url(./assets/bg_mobile_dark.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

O resultado ser√° esse:

Imagem centralizada

E adicionando ao lado do center a palavra top (background-position: top center;) conseguimos ajustar isso:

Imagem centralizada

Isso acontece pois com o top centralizamos a imagem a partir do topo dela e n√£o do centro.

Outro ponto interessante foi a quest√£o de agrupar todas as propriedades background, isso pode ser feito da seguinte forma:

body {
  /* background: color image repeat positions/size */
  background: url(./assets/bg_mobile_dark.jpg) no-repeat top center/cover
}
Enter fullscreen mode Exit fullscreen mode

Teremos o mesmo resultado que antes, só que tudo agrupado dentro do CSS.


‚Ź© M√≥dulo 4 - Avan√ßando o HTML e CSS

Nesta parte como o nome do m√≥dulo sugere avan√ßamos em conceitos um pouco mais complicados em HTML e CSS. Usamos a tag footer, temos quest√Ķes sobre a propriedade display , position etc.

Um dos grandes pontos dessa parte foram as diversas formas de alinhamento usando CSS comentadas acima (display flex, position relative e absolute etc), apesar de v√°rias vezes ver sobre esse conte√ļdo √© rara as vezes em que n√£o acabo me enrolando ao tentar alinhar elementos dos meus projetos as vezes e com certeza √© um conte√ļdo essencial, facilita muito a realiza√ß√£o de projetos pelo menos entender melhor essas quest√Ķes. Teve tamb√©m a realiza√ß√£o da l√≥gica no CSS da troca do layout de dark mode para light mode e vice-versa, isso me chamou a aten√ß√£o tamb√©m.

:root {
  --text-color: white;
  --bg-url: url(./assets/bg_mobile_dark.jpg);
  --stroke-color: rgba(255, 255, 255, 0.5);
  --surface-color: rgba(255, 255, 255, 0.05);
  --surface-color-hover: rgba(0, 0, 0, 0.02);
  --hightlight-color: rgba(255, 255, 255, 0.2);
  --switch-bg-url: url(./assets/moon_stars.svg);
}

.light {
  --text-color: black;
  --bg-url: url(./assets/bg_mobile_light.jpg);
  --stroke-color: rgba(0, 0, 0, 0.5);
  --surface-color: rgba(0, 0, 0, 0.05);
  --surface-color-hover: rgba(0, 0, 0, 0.02);
  --hightlight-color: rgba(0, 0, 0, 0.1);
  --switch-bg-url: url(./assets/sun.svg) 
}
Enter fullscreen mode Exit fullscreen mode

Eu já tinha conhecimento sobre a criação de variáveis em CSS, mas sempre usando variáveis de cores e não a de imagens como vemos acima, usando url(). Isso foi algo novo pra mim.

Outra coisa que foi algo "novo" para mim, algo que eu já tinha ouvido falar, mas nunca tinha usado praticamente é a questão de transform, translateX e Y, z-index etc. Essas coisas acabam entrando na questão de alinhamento com CSS, mas vai um pouco além, no caso do projeto em uma parte dele essas propriedades são usadas para fazer a mudança de lado do icone de dark / light mode, fazendo ele ficar na esquerda ou direita dependendo do modo em que o site está.

Aqui o código em questão que eu comentei acima que faz o ícone se reposicionar:

#switch button {
  width: 32px;
  height: 32px;

  background: white var(--switch-bg-url) no-repeat center;

  border: 0;
  border-radius: 50%;

  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.light #switch button {
  right: 0;
  left: initial;
}
Enter fullscreen mode Exit fullscreen mode

M√≥dulo 5 - ūü߆ Javascript

Aqui j√° partimos para um dos √ļltimos m√≥dulos do curso. Neste momento √© apresentando aos iniciantes o que √© um algoritmo, l√≥gica de programa√ß√£o e sintaxe, somos introduzidos ao JS (vars, fun√ß√Ķes, objetos etc).

Depois dessa introdução iniciamos colocando um pouco mais de lógica em nosso projeto, neste caso adicionamos um código que irá verificar se existe alguma class light em nosso document e abaixo podemos entender melhor.

Primeiro adicionamos essa função toggleMode() no nosso switch que muda de dark mode para light mode, ai clicarmos nesse switch ele chama a função citada por conta do atributo onclick.
<div id="switch" onclick="toggleMode()">

Depois em nosso arquivo JS temos o seguinte:

function toggleMode() {
  // document = documento html
  const html = document.documentElement;

  /*
  // se ao clicarmos no switch j√° existir a tag LIGHT no nosso documento HTML
  // tiramos a tag do documento e quando clicarmos de novo, adicionamos ela. Isso se repete
  if (html.classList.contains("light")) {
    // se j√° tiver a tag LIGHT ele remove ela
    html.classList.remove("light");
  } else {
    // se n√£o tiver, ele adiciona ela
    html.classList.add("light");
  }
  */

  // todo o codigo acima pode ser substituido por apenas essa linha, a funcionalidade sera a mesma
  html.classList.toggle("light");
}
Enter fullscreen mode Exit fullscreen mode

Essa é lógica responsável por adicionar ou tirar a class light em nosso documento HTML para conseguirmos mudar o tema do nosso site.

Além de mudar o tema do nosso site, com base nos temas temos que mudar a nossa foto de avatar, isso será feito pelo JS também.

// mudando a imagem conforme o modo do app (dark / light)
  // pegamos onde nossa tag img, com o id #profile
  const img = document.querySelector("#profile img");

  if (html.classList.contains("light")) {
    // setAttribute ir√° mudar o src da nossa tag img e o alt
    img.setAttribute("src", "./assets/avatar_light.png");
    img.setAttribute("alt", "Foto de Luigi Belanda acendendo uma vela, com uma capa da Ordem DeMolay");
  } else {
    img.setAttribute("src", "./assets/avatar_dark.png");
    img.setAttribute("alt", "Foto de Luigi Belanda segurando a bandeira nacional, usando a capa da Ordem DeMolay e também seu óculos pessoal. Ao fundo aparecem outras pessoas e um pouco na frente do Luigi uma vela acessa");
  }
Enter fullscreen mode Exit fullscreen mode

Com esse código conseguimos verificar se no nosso documento HTML temos a class light, depois disso fazemos um if e com base no que retornar além de mudarmos a imagem mudamos também a propriedade alt.

Esse m√≥dulo foi mais curto, mas ao mesmo tempo um pouco mais din√Ęmico. As partes mais interessantes foi descobrir a quest√£o do html.classList.toggle("light");, esse c√≥digo como dito acima substituiu uma parte boa de c√≥digo fazendo a mesma fun√ß√£o. Outra coisa √© a parte de mudarmos a nossa imagem com base no tema atual e tamb√©m mudarmos o alt dela, isso era algo que eu n√£o sabia que era poss√≠vel, muitos menos que era algo simples at√©.


M√≥dulo 6 - ūüźô Git e Github

Como √ļltimo m√≥dulo vemos umas das principais ferramentas para quem √© da √°rea de programa√ß√£o - Git e Github, principalmente o Git no caso.

Somos apresentado aos comandos mais básicos do Git além de entender um pouco qual o seu objetivo e como ele funciona, passando pela etapas até o commit de uma nova alteração.

Como √ļltima partes pr√°ticas somos apresentados ao README.md do nosso reposit√≥rio criado e aprendemos sobre media queries e keyframes.

No caso das media queries usamos elas para conseguir criar regras para nosso site se comportar de maneiras diferentes com base em uma largura ou altura de tela, por exemplo. Assim conseguimos ajustar nosso layout para se adequar a diferentes dispositivos.

/* media queries */
@media (min-width: 700px) {
  :root {
    --bg-url: url(./assets/bg_desktop_dark.jpg);
  }

  .light {
    --bg-url: url(./assets/bg_desktop_light.jpg);
  }
}
Enter fullscreen mode Exit fullscreen mode

No exemplo acima caso a largura da tela for no mínimo 700px ele usa outra imagem para para o background, aqui informamos quais tags / propriedades queremos mudar com base na regra de largura comentada acima.

Sobre o keyframes usamos para fazer anima√ß√Ķes em nosso site.

/* animation */
@keyframes slide-in {
  /* começa em left 0 */
  from {
    left: 0;
  }

  /* termina em left 0 */
  to {
    left: 50%;
  }
}

@keyframes slide-back {
  from {
    left: 50%;
  }
  to {
    left: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Aqui criamos as anima√ß√Ķes do switch ao clicarmos para realizar a mudan√ßa de tema do nosso site, fazendo o switch deslizar mais suavemente, ai para usarmos essa anima√ß√£o podemos fazer isso:

.light #switch button {
  /* chamamos a animação criada, definimos o seu tempo e colocamos o "forwards" para manter as props de quando a animação terminar */
  animation: slide-in 0.4s forwards;
}
Enter fullscreen mode Exit fullscreen mode

Sobre ambas as coisas comentadas (keyframes e media queries) eu j√° sabia sobre isso, o keyframes nunca usei muito, mas com certeza √© algo que faz muita diferen√ßa no site, fazendo assim anima√ß√Ķes que trazem um detalhe no projeto.

Por fim, aprendemos a como usar o Github Pages e subir nosso projeto online para podermos usar ele.

https://luigibelanda.github.io/devlinks/


ūüŹĀ Final

Apesar de ser um conte√ļdo b√°sico sobre HTML, CSS, JS, Git e Github consegui aprender algumas coisas interessantes at√©, como foi comentado no decorrer deste artigo.

As aulas s√£o todos bem explicadas, seguindo um bom padr√£o da Rocketseat neste aspecto.

Um projeto super válido pra quem é iniciante e bom pra praticar algumas coisas, mesmo que básicas!

Top comments (0)