Cinthia Andrade

Posted on Jan 6

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

#webdev #web #javascript #html

Tópicos

Introdução
O Que é a Web e Como Ela Funciona?
Como Deixar Seu Site Disponível para o Mundo
Ferramentas Essenciais para Desenvolvedores
Quanto Dá para Ganhar no Desenvolvimento Web?
Dicas para Quem Está Começando
Conclusão: Comece Hoje Mesmo

Introdução

Se você está aqui, é porque quer entender como funciona o mundo do desenvolvimento web e, quem sabe, dar seus primeiros passos em uma nova carreira. Este guia é para você que não sabe nada sobre a área e quer começar do começo, entendendo os fundamentos antes de mergulhar em linguagens e ferramentas. Vamos explorar juntos, de forma prática e acessível, como iniciar nessa jornada.

O Que é a Web e Como Ela Funciona?

A web é uma rede global que conecta milhões de dispositivos e sistemas, permitindo que informações sejam acessadas e compartilhadas em tempo real. Ou seja, a web é como uma grande biblioteca digital. Quando você acessa um site, está pedindo informações que estão armazenadas em algum lugar do mundo. O navegador (como o Google Chrome ou Firefox) é como o "bibliotecário" que busca e organiza essas informações para você.

Aqui estão os elementos principais que fazem tudo funcionar:

1. Navegador e Servidor
Vamos entender o que acontece quando você acessa o site https://www.pudim.com.br/. O navegador faz uma solicitação, um pedido ao servidor, que responde com os arquivos necessários para exibir a página. No caso do Pudim, o servidor retorna um arquivo HTML contendo uma estrutura básica do site, que inclui um título, uma imagem e um link de e-mail.

O navegador é o programa que você usa para acessar a internet (Chrome, Firefox e etc). Ele faz pedidos de informações e exibe as páginas de forma organizada.
O servidor é o computador que armazena os arquivos do site (textos, imagens, vídeos) e os envia ao seu navegador quando você, usuário, solicita. Pense no servidor como um "computador especializado" que guarda os arquivos do site (textos, imagens, vídeos) e atende aos pedidos do navegador enviando esses arquivos. Ele é essencial para que o site fique acessível na web.
No caso do Pudim, o servidor retorna um arquivo HTML contendo uma estrutura básica do site, que inclui um título, uma imagem e um link de e-mail.

2. Como o Navegador e o Servidor se Comunicam?
Quando você acessa um site, como o Pudim, o navegador e o servidor precisam "conversar" para que o conteúdo seja exibido corretamente. Essa comunicação ocorre através do HTTP (HyperText Transfer Protocol), um conjunto de regras que define como as informações devem ser enviadas e recebidas. O navegador envia uma solicitação ao servidor (chamada de requisição HTTP), e o servidor responde com os arquivos necessários (como o HTML, CSS, e JavaScript) para montar a página no navegador. Essa troca de informações é rápida e eficiente, garantindo que o site seja exibido corretamente.

Exemplo Prático: Digite "https://www.pudim.com.br/" no navegador e pressione Enter. Você verá uma página simples com uma imagem de pudim e um link de e-mail.

3. O Que é uma API e Como Ela se Encaixa Aqui?
Agora imagine que o site Pudim também quer mostrar a previsão do tempo. Para isso, ele poderia usar uma API (Interface de Programação de Aplicativos). APIs funcionam como pontes que permitem que diferentes sistemas troquem informações.
Por exemplo: Imagine que o site Pudim também mostrasse uma mensagem como "Hoje é um bom dia para comer pudim!" baseada no clima atual. O navegador enviaria um pedido/requisição para uma API de clima, que retornaria as informações sobre a temperatura e condição climática. O site poderia então exibir essa mensagem de forma dinâmica.

Resumo: APIs são ferramentas essenciais no desenvolvimento web moderno porque permitem adicionar funcionalidades dinâmicas, como dados, de qualquer coisa, atualizados em tempo real.
Agora que você entende os fundamentos, vamos começar a aprender as ferramentas básicas para criar um site.

1. HTML: A Estrutura do Site
O HTML (HyperText Markup Language) define a estrutura da página. Ele é formado por tags, que são elementos que indicam como o conteúdo será organizado e exibido no navegador. Cada tag tem uma função específica e pode conter texto, imagens, links, entre outros elementos.
Exemplo de Tags:

<h1>: Define um título principal.
<p>: Define um parágrafo de texto.
<img>: Insere uma imagem na página.
<a>: Cria um link.

Exemplo Prático: Crie um arquivo chamado index.html e cole o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Abra o arquivo no navegador e veja sua primeira página web!

2. CSS: O Estilo da Página
O CSS (Cascading Style Sheets) é usado para dar cor, forma e estilo ao site, deixar ele bonitinho.
Como o CSS funciona:

Seletores: Identificam os elementos que você deseja estilizar. Por exemplo, body para o corpo da página ou h1 para títulos.
Propriedades e valores: Especificam o estilo aplicado. Por exemplo, color: blue; muda a cor do texto para azul.

Exemplo de regras CSS:

body { background-color: #f0f0f0; } define a cor de fundo da página.
h1 { font-size: 24px; color: #0066cc; } altera o tamanho e a cor do título.

Exemplo Prático: Crie um arquivo chamado styles.css e adicione o seguinte:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Conecte o CSS ao HTML adicionando a linha abaixo dentro da tag <head> do arquivo index.html:

 <link rel="stylesheet" href="styles.css">

Atualize o navegador e veja as mudanças no estilo da página.

3. JavaScript: Adicionando Interatividade
O JavaScript é a linguagem que torna a página interativa, permitindo que você adicione animações, valide formulários, manipule elementos e muito mais. (vamos falar mais sobre javascript em outra postagem, aguardem ❤)

Exemplo de interatividade:

Um alerta exibido quando o usuário clica em um botão.
Alterar o texto de um elemento ao passar o mouse sobre ele.

Exemplo Prático: Adicione a parte do javascript <script> dentro do seu arquivo index.html. Ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
<script>
  document.querySelector('h1').addEventListener('click', () => {
    alert('Você clicou no título!');
  });
</script>
</html>

Agora, quando você clicar no título, uma mensagem será exibida na tela.

Como Deixar Seu Site Disponível para o Mundo

Você deve estar se perguntando: "Como meu código HTML, CSS e JavaScript pode ficar disponível para outras pessoas, assim como eu acessei o site do Pudim?". Bem, enquanto você está criando e testando seu site no seu computador, ele está visível apenas para você. Para que outros usuários na internet possam acessar seu trabalho, é preciso publicá-lo em um servidor.

Pense no servidor como uma biblioteca que guarda todos os arquivos do seu site. Quando alguém digita o endereço do seu site no navegador, o servidor envia os arquivos necessários para exibir a página. Sem isso, seu site não estaria acessível para outras pessoas.

Esse processo de disponibilizar o site para o mundo é chamado de hospedagem. Existem vários tipos de servidores e serviços de hospedagem que facilitam isso. Agora que você entende o conceito, é hora de explorar como criar projetos mais completos e, eventualmente, publicá-los para o mundo ver!

Ferramentas Essenciais para Desenvolvedores

Editor de Código: Use um editor como o Visual Studio Code para escrever e organizar seu código.
Controle de Versão com Git: O Git permite rastrear mudanças no código, e o GitHub ajuda a compartilhar seus projetos online.
Recursos Online: Plataformas como FreeCodeCamp, MDN Web Docs e W3Schools oferecem excelentes tutoriais gratuitos.

Quanto Dá para Ganhar no Desenvolvimento Web?

A área de desenvolvimento web tem boa remuneração e alta demanda. Aqui estão os salários médios no Brasil:

Júnior: R$ 2.500 a R$ 4.000 por mês.
Pleno: R$ 5.000 a R$ 8.000 por mês.
Sênior: R$ 9.000 a R$ 13.000 por mês.

Esses valores foram baseados em dados do Glassdoor e podem variar dependendo da empresa e região.

Dicas para Quem Está Começando

Pratique Todos os Dias: Mesmo que por pouco tempo, a prática diária é essencial.
Participe de Comunidades: Grupos no Discord e fóruns como Dev.to e Rocketseat são ótimos para aprender e tirar dúvidas.
Construa um Portfólio: Mostre seus projetos para potencializar suas chances de conseguir oportunidades.
Seja Curioso: Explore diferentes tecnologias e mantenha-se atualizado.

Comece Hoje Mesmo

Este guia apresentou o básico do básico para quem está começando no desenvolvimento web. O objetivo foi mostrar os primeiros passos e dar uma ideia geral do que você precisa estudar para começar a construir seus próprios projetos.

No entanto, o desenvolvimento web é uma área ampla e cheia de possibilidades. Por exemplo, o que mostramos sobre HTML é apenas o ponto de partida. Você pode explorar mais sobre HTML5, elementos semânticos e boas práticas para tornar seus sites acessíveis e bem estruturados.

Aqui estão algumas sugestões de sites para continuar seus estudos:

MDN Web Docs: Uma das melhores fontes para aprender HTML, CSS, e JavaScript.
W3Schools: Uma plataforma amigável para aprender e praticar códigos.
FreeCodeCamp: Cursos gratuitos e práticos que ajudam a desenvolver projetos reais.

Pratique sempre que puder, explore diferentes ferramentas e não tenha medo de errar.

O mais importante é dar continuidade ao aprendizado e, pouco a pouco, você se sentirá mais confiante para criar projetos completos e até mesmo ingressar no mercado de trabalho. Vamos juntos nessa jornada!