📝 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;
}

O resultado será esse:

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

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
}

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) 
}

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;
}

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");
}

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");
  }

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);
  }
}

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;
  }
}

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;
}

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!