Introdução ao desenvolvimento web(Front-end)
Tags: html, css, javascript, braziliandevs
Published: 2023-01-12 17:52:14

Esse é o inicio de uma série de posts que vou fazer com o intuito de ajudar você que está entrando no mundo do desenvolvimento web e não faz ideia por onde começar ou o que estudar.

O código desse post se encontra nesse repositório: [Clique aqui!](https://github.com/CarmichaelF/intro-front-end)

### Intruções de configuração:

Recomendo que acompanhe o tutorial com um editor de código aberto para que possa realizar o código junto comigo. Eu utilizo o visual studio code mas você pode usar o que preferir, deixo um passo a passo de como baixar e instalar o visual studio code, caso já tenha um editor de código instalado sinta-se a vontade para pular os passos a seguir.

1. Primeiro, vá para o site oficial do Visual Studio Code (https://code.visualstudio.com/) e clique no botão "Download" no canto superior direito.

2. Selecione o sistema operacional que você está usando (Windows, Mac ou Linux) e clique em "Download" novamente.

3. Aguarde o download do arquivo de instalação do Visual Studio Code. Ele pode levar alguns minutos, dependendo da velocidade da sua conexão à internet.

4. Quando o download estiver completo, localize o arquivo de instalação no seu computador e execute-o.

5. Siga as instruções na tela para instalar o Visual Studio Code. Isso pode incluir clicar em "Next", "Install" e "Finish" em diferentes telas.

6. Depois que a instalação for concluída, abra o Visual Studio Code. Ele pode pedir para você fazer algumas configurações iniciais, como selecionar seu tema e configurações de idioma preferidos.

7. Agora você está pronto para começar a usar o Visual Studio Code! Para abrir um arquivo ou criar um novo, você pode usar o menu "File" ou pressionar as teclas "Ctrl + O" (Windows) ou "Cmd + O" (Mac).

8. Para personalizar as configurações do Visual Studio Code, você pode usar o menu "File" > "Settings" ou pressionar as teclas "Ctrl + ," (Windows) ou "Cmd + ," (Mac).

9. Você também pode baixar extensões para melhorar a sua experiencia de programação, para isso basta clicar em "View" > "Extensions" ou pressionando as teclas "Ctrl + Shift + X" (Windows) ou "Cmd + Shift + X" (Mac).

10. Agora é só começar a codar e explorar as funcionalidades do Visual Studio Code!

Dentro do desenvolvimento web temos o **back-end** e o **front-end**, mas qual a diferença entre esses 2 afinal?

- **Front-end** é tudo aquilo que você vê e interage quando entra em um site, textos, imagens, botões, formulários, tudo isso é front-end e é o que vamos ver nesse post.

- **Back-end** é tudo que fica por trás do front-end, tudo que é invisível para o usuário final, como por exemplo armazenamento de dados, comunicação com outras aplicações, o objetivo do back-end é garantir que a sua aplicação funcione corretamente e execute as tarefas necessárias.

_Fazendo um paralelo o front-end seria como os jogadores em campo em um jogo de futebol enquanto que o back-end seria como os técnicos e tudo o que fazem por trás das cenas._

Todos os sites que você vê na internet utilizam 3 tecnologias como base: HTML, CSS e javascript, mas o que são essas tecnologias?

HTML é uma linguagem de marcação(não confunda com linguagem de programação) e é utilizada para marcar o conteúdo do seu site, é a estrutura de tudo, o esqueleto, a base.

Aqui vai um código super simples escrito em HTML(Não se preocupe se você não entender tudo, vou explicar linha por linha como funciona):

```HTML
<html>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>
```

**O HTML** é formado por tags, tudo aqui fica envolto de tags e uma tag nada mais é do que uma "etiqueta", ela indica ao navegador como exibir o conteúdo dentro dela, são escritas entre sinais de menor('<') e maior('>') e geralmente possuem uma abertura e fechamento: `<tag>conteúdo da tag</tag>`, no fechamento utilizamos uma barra depois do sinal de menor para indicar que estamos fechando a tag.

Então se voltarmos ao código acima veremos 3 tags diferentes:

1. html - diz para o navegador que tudo dentro dela é um site, essa tag sempre estará presente.

2. body - é uma tag que indica o início do conteúdo do site em si, tudo o que você quiser mostrar aos usuários, como textos, imagens e botões, deve ficar dentro dessa tag, mas qual a diferença entre ela e o html? Parecem a mesma coisa não é? Dentro da tag html podemos ter outra tag além do body que se chama head e dentro dessa tag podemos ter metadados, o título que fica na aba do site, referências para outros arquivos, dentre outros.

3. h1 - é uma tag para criar um título, o 'h1' indica que é o título principal do site portanto o mais importante, existem 6 diferentes tags relacionadas a títulos, h1, h2, h3, h4, h5 e h6, a única diferença entre elas é a semântica, h1 é a mais importante enquanto a h6 é a menos importante.

Se ainda não abriu o visual studio code essa é a hora! Após abrir crie um arquivo chamado index.html e cole o código que fizemos:

![How to create a new file in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9csd7ne6v49ijy4loen.gif)

```HTML
<html>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>
```

E se tudo deu certo esse vai ser o resultado:

![Simple HTML code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fqll87ou180ivr7c2xb.png)

Yey! Você criou a sua primeira página HTML, parabéns! Esse é só o início.

_Apenas um adendo antes de continuarmos: Caso esteja achando a sua primeira página 'chata' ou 'sem graça', não se preocupe, por enquanto foque apenas em aprender o básico e conforme for aprendendo mais os seus sites vão ser cada vez mais completos!_

Existem diversas outras tags no HTML mas por enquanto vamos pular para o CSS já que o intuito desse post é mostrar um pouco das 3 principais tecnologias.

**O CSS** é utilizado para estilizar elementos HTML, com ele é possível modificar cores, fontes, tamanhos e outros aspectos visuais.

Vamos adicionar uma tag nova no nosso HTML chamada style(A tag style indica ao navegador que o código dentro dela é um estilo CSS):

```HTML
<html>
  <style></style>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>
```

Dentro dela podemos começar a utilizar o CSS:

```HTML
<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>
```

A sintaxe do CSS é um pouco diferente do HTML, aqui selecionamos tags do HTML e dizemos pro navegador como a formatação delas deve acontecer.

Na primeira linha selecionamos todas as tags h1 no documento e abrimos chaves `{` isso sinaliza pro navegador onde é o início e o fim de um conjunto de regras CSS.

- `background-color: black`. É uma regra CSS que define a cor de fundo da seleção selecionada(no caso as tags h1) como preto.

- `color: white`. É uma regra de estilo CSS que define a cor da fonte da seleção selecionada (novamente, as tags h1) como branca.

- por fim sinalizamos pro navegador o fim das regras fechando chaves `}`.

Se você já salvou o arquivo e abriu no navegador viu que o resultado é exatamente como eu descrevi:


![Simple HTML + CSS Code result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i668p4hrcivkk18v5fag.png)

Como eu disse estamos selecionando todas as tags html, então se adicionarmos um novo h1 o que acontece?

```HTML
<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
</html>
```


![Simple HTML + CSS Code result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tgevaof1u442d1h8cko.png)

O novo h1 vai ter os mesmos estilos! Legal né? Essa é uma das mágicas do desenvolvimento web, muito código é reutilizável.

**O Javascript** diferente das outras 2 é uma linguagem de programação, ele é utilizado para criar interações e comportamentos dinâmicos, como por exemplo fazer algo quando o usuário clica com o mouse, ou esconder elementos HTML, mudar regras do CSS, etc.

Vamos adicionar mais uma tag html ao nosso código, a tag script diz pro browser que tudo dentro dela é javascript.

```HTML
<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script>
    alert("Olá mundo!")
  </script>
</html>
```

O código que adicionamos cria um alerta que dispara assim que a página inicia:

```HTML
<script>
    alert("Olá mundo!")
</script>
```

![Javascript Alert window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxhvio53452v992iaax4.png)

Podemos também adicionar um evento aos títulos que temos na página:

```HTML
<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script>
    alert("Olá mundo!");
    document.querySelectorAll("h1").forEach(
      (title, index) =>
        (title.onclick = () => {
          alert(`Você clicou no ${index} título!`);
        })
    );
  </script>
</html>
```
1. `document.querySelectorAll("h1")` é uma função(Uma função nada mais é do que um trecho de código) que seleciona todas as tags h1 no html.

2. `forEach` é uma função JavaScript que itera sobre cada elemento selecionado, então se você tem 2 elementos essa função permite você passar por cada um deles e realizar uma ação.

3. `(title, index) =>` é uma função, que define dois parâmetros, title e index. Title é o elemento selecionado atual e index é o índice desse elemento na lista de elementos selecionados, no nosso caso temos 2 títulos então na primeira vez que o foreach rodar title vai ser igual ao primeiro título da página e index vai ser igual a 0(na programação não iniciamos contando do 1 e sim do 0, então aqui temos 2 itens, o primeiro(0) e o segundo(1), isso faz mais sentido com o tempo) e na segunda vez title vai ser igual ao segundo título da página e index vai ser igual a 1, se tivéssemos mais tags 'h1' na página o foreach continuaria até chegar no final, como só temos 2 ele para por aqui.

4. `(title.onclick = () => {...})` é uma função JavaScript que atribui uma função(um trecho de código) ao evento onclick do elemento selecionado atual.

5. `alert(Você clicou no ${index} título!)`. é uma função JavaScript que exibe uma caixa de diálogo com o texto "Você clicou no x título!" onde x é o índice do elemento selecionado.

Em resumo, este código seleciona todas as tags h1 do documento, passa por cada uma delas e atribui um pedaço de código ao evento onclick das tags h1, que exibe um alerta com o número do título clicado.

Recomendo que você modifique o código que criamos tentando adicionar ou remover coisas para criar familiaridade com o código, caso cometa algum erro e queira voltar ao inicio você pode sempre dar uma olhada no repositório onde eu subi o código feito nesse post: [Repositório aqui](https://github.com/CarmichaelF/intro-front-end)

Por fim, esse é o resultado:

![Final result code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwiu9vug5835ap6i3t9a.gif)

Legal! Agora você tem uma noção básica de como o HTML, CSS e javascript funcionam, mas esse código parece um pouco bagunçado e não é claro o que é HTML, CSS ou Javascript.

Podemos refatorar esse código criando mais 2 arquivos: style.css e main.js

![Creating 2 new files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r84ctleuylkgxvr49smr.gif)

Copie o código css sem a tag para o arquivo style.css:

![CSS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irysi6wwb8c222c2hiqf.png)

Copie o código javascript sem a tag script para o arquivo main.js:

![Javascript Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2euh4eujsufrv3bof8kd.png)

Volte para o arquivo index.html e apague a tag style, agora precisamos adicionar o arquivo css no HTML para que o navegador saiba quais estilos usar, fazemos isso adicionando uma tag head e uma tag link logo após a abertura da tag html, o seu arquivo index.html deverá ficar assim: 

```HTML
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script></script>
</html>

```

A tag link faz uma referência ao arquivo que criamos, aqui temos que passar alguns atributos, 'href' é o nome do arquivo que criamos, rel é um atributo que indica ao navegador que este é um arquivo de estilo, pois podemos linkar outros tipos de arquivo, type é um atributo que indica ao navegador que este arquivo contém código CSS.

Volte ao arquivo index.html e adicione o atributo src="main.js" na tag script, o arquivo final deve ficar assim:

```HTML
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script src="main.js"></script>
</html>
```

Com o código separado fica mais claro o que é html, o que é css e o que é javascript.

Espero que esse post tenha te ajudado a entender o que é o front-end!

Esse é só o começo! Não desanime e continue estudando, esse é apenas o primeiro de uma série de posts que vou fazer, obrigado por ler até aqui!