Este guia para iniciantes de desenvolvimento web cobre todos os conceitos básicos. Vamos orientá-lo em cada etapa, desde a escolha de um editor de código até o aprendizado de estruturas JavaScript e linguagens de back-end.
Na verdade, se você está apenas começando, você só precisa conhecer o básico das principais empresas de desenvolvimento web no momento. Você não precisa saber tudo sobre qualquer tecnologia, ferramenta ou linguagem imediatamente. (Confie em mim, quando você chegar lá, você vai atravessar aquela ponte!).
Ao final deste guia, você conhecerá os fundamentos do desenvolvimento web, quais habilidades você precisa e onde encontrá-las.
O que este artigo aborda:
- Qual é a definição de desenvolvimento web?
- Como funcionam as páginas da web?
- Qual é a diferença entre desenvolvimento web front-end e back-end?
- Desenvolvimento web e o editor de código
- HTML
- CSS
- Javascript
- Conclusão
Qual é a definição de desenvolvimento web?
Antes de começarmos a falar de programação, vamos revisar alguns conceitos básicos de construção da web, como um site funciona, a diferença entre front-end e back-end e como usar um editor de código.
Como funcionam as páginas da web?
No nível mais básico, todos os sites são apenas coleções de arquivos mantidos em computadores chamados servidores. Este servidor tem uma conexão com a Internet. Você pode acessar este site usando um navegador (como Chrome, Firefox ou Safari) em seu computador ou telefone celular. Nesse caso, seu navegador também é chamado de cliente.
Então, toda vez que você fica online, você (o cliente) está recebendo e enviando dados do servidor (como fotos de gatos) e enviando dados para o servidor (enviando mais fotos de gatos!). A Internet é construída nesse vai-e-vem entre cliente e servidor.
Qualquer coisa que você possa acessar por meio de um navegador é criada por um desenvolvedor da web. Aspectos mais simples são sites e blogs de pequenas empresas, e aspectos mais complexos são aplicativos da web como AirBnb, Facebook e Twitter.
Qual é a diferença entre desenvolvimento web front-end e back-end?
Os termos desenvolvedores web “front-end”, “back-end” e “full-stack” referem-se à parte da conexão cliente/servidor em que você está envolvido.
O termo “front-end” refere-se principalmente ao trabalho com clientes. Como você pode ver no navegador, é chamado de “front-end”. O “backend”, por outro lado, é a parte do site que você não vê, mas que é responsável pela maior parte da lógica e funcionalidade que faz tudo funcionar.
Construir um front-end da web pode ser comparado à “recepção” de um restaurante. Os clientes vêm aqui para visitar e experimentar o restaurante, incluindo o interior, os assentos e, claro, a comida.
Por outro lado, construir uma rede de back-end é semelhante ao “back of house” de um restaurante. É onde as entregas e o estoque são controlados, assim como o processo de preparação das refeições. Os clientes não vão ver muito do que está acontecendo nos bastidores, mas eles vão provar (e esperamos desfrutar) do produto final – uma ótima refeição!
Desenvolvimento web e o editor de código
Seu editor de código ou ambiente de desenvolvimento integrado (IDE) é a ferramenta mais importante (ambiente de desenvolvimento integrado) que você usará ao construir seu site. Você pode usar esta ferramenta para escrever marcação e código que irá para o seu site.
Existem muitas soluções excelentes por aí, mas o VSCode é o editor de código mais popular no momento. O VS Code é uma versão leve do IDE principal da Microsoft, o Visual Studio. É rápido, gratuito e fácil de usar, e você pode personalizá-lo com temas e plugins.
Sublime Text, Atom e Vim são outros três editores de código.
No entanto, se você está apenas começando, recomendo baixar o Visual Studio Code do site deles.
Agora que cobrimos alguns conceitos-chave, vamos ver a construção da web com mais detalhes. Vamos começar com o front-end.
HTML
Todos os sites são construídos em HTML ou Hypertext Markup Language. É o tipo de arquivo mais comum que seu navegador carrega quando você visita um site. Os arquivos HTML contêm todo o conteúdo da página e usam tags para distinguir diferentes tipos de material.
As tags podem ser usadas para criar títulos, parágrafos, listas com marcadores, imagens e outros elementos. As tags HTML têm alguns estilos anexados, mas são muito simples, semelhantes ao que você encontrará nas páginas do Word.
CSS
CSS ou Cascading Style Sheets é uma linguagem de programação que permite estilizar o material HTML para que fique bonito e sofisticado. Você tem controle total sobre as cores, fontes personalizadas e layout de cada parte do seu site. CSS também pode ser usado para criar animações e formas!
CSS tem muita profundidade, e as pessoas muitas vezes o ignoram em favor de outra coisa, como JavaScript. Por outro lado, saber usar CSS para transformar um design em um layout de site não pode ser superestimado. Fortes habilidades em CSS são essenciais se você deseja se concentrar no desenvolvimento front-end.
Javascript
JavaScript é uma linguagem de programação criada especificamente para uso em navegadores da web. Você pode tornar seu site dinâmico usando JavaScript, que permite responder a várias entradas de usuários ou outras fontes.
Por exemplo, você pode criar um botão “voltar ao topo” que rola de volta ao topo da página quando o usuário clica nele. Como alternativa, você pode criar um widget de clima que exiba as condições climáticas atuais com base na localização do usuário em todo o mundo.
Conclusão
Este artigo tinha intenção de ser um guia introdutório sobre desenvolvimento web e foi. Você aprendeu conceitos de front-end, back-end, além da introdução a tríade do desenvolvimento web que é o HTML, CSS e JavaScript.
Artigos relacionados:
