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!
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.
Primeiro, vá para o site oficial do Visual Studio Code (https://code.visualstudio.com/) e clique no botão "Download" no canto superior direito.
Selecione o sistema operacional que você está usando (Windows, Mac ou Linux) e clique em "Download" novamente.
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.
Quando o download estiver completo, localize o arquivo de instalação no seu computador e execute-o.
Siga as instruções na tela para instalar o Visual Studio Code. Isso pode incluir clicar em "Next", "Install" e "Finish" em diferentes telas.
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.
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).
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).
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).
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>
<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:
html - diz para o navegador que tudo dentro dela é um site, essa tag sempre estará presente.
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.
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:
<html>
<body>
<h1>Eu sou um título</h1>
</body>
</html>
E se tudo deu certo esse vai ser o resultado:
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>
<style></style>
<body>
<h1>Eu sou um título</h1>
</body>
</html>
Dentro dela podemos começar a utilizar o CSS:
<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:
Como eu disse estamos selecionando todas as tags html, então se adicionarmos um novo h1 o que acontece?
<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>
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>
<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:
<script>
alert("Olá mundo!")
</script>
Podemos também adicionar um evento aos títulos que temos na página:
<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>
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.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.(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.(title.onclick = () => {...})é uma função JavaScript que atribui uma função(um trecho de código) ao evento onclick do elemento selecionado atual.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
Por fim, esse é o resultado:
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
Copie o código css sem a tag para o arquivo style.css:
Copie o código javascript sem a tag script para o arquivo main.js:
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>
<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>
<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!
Top comments (0)