DEV Community

Cinthia Andrade
Cinthia Andrade

Posted on

2 1 1 2 1

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

Tópicos

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> 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

  1. Editor de Código: Use um editor como o Visual Studio Code para escrever e organizar seu código.

  2. Controle de Versão com Git: O Git permite rastrear mudanças no código, e o GitHub ajuda a compartilhar seus projetos online.

  3. 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

  1. Pratique Todos os Dias: Mesmo que por pouco tempo, a prática diária é essencial.
  2. Participe de Comunidades: Grupos no Discord e fóruns como Dev.to e Rocketseat são ótimos para aprender e tirar dúvidas.
  3. Construa um Portfólio: Mostre seus projetos para potencializar suas chances de conseguir oportunidades.
  4. 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!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (4)

Collapse
 
pedrovictoroc profile image
Pedro Victor

Muito massa o post!

Collapse
 
cinthia3301andrad profile image
Cinthia Andrade

Obrigada <3

Collapse
 
gustavo_henrique_384adea7 profile image
Gustavo Henrique

Muito bom em! resumiu bem.

Collapse
 
cinthia3301andrad profile image
Cinthia Andrade

Obrigadaaa <3

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay