Há excelentes roteiros para desenvolvedores para a web por aí. Alguns, no entanto, exigem que se resolva um "quebra-cabeças" antes mesmo de começar, já que você precisa fazer várias escolhas.

Quando comecei a aprender desenvolvimento para a web, quis muito encontrar um/a desenvolvedor/a experiente que me contasse o que tinha feito para se tornar um/a desenvolvedor/a para a web. Infelizmente, não encontrei ninguém.

Agora que já trabalho no setor há 4 anos, quero compartilhar como eu começaria a aprender desenvolvimento para a web neste ano. Neste artigo, vou mostrar para você todos os passos que você precisa tomar, desde quando iniciar até se tornar um/a desenvolvedor/a.

Começarei com algumas ferramentas essenciais que você precisa conhecer e, depois, vou tratar de linguagens de programação e de bibliotecas/frameworks que você precisa aprender para se tornar um/a desenvolvedor/a front-end ou full-stack.

Também falarei de alguns projetos que você pode desenvolver para praticar as suas habilidades.

Você também encontrará um roteiro atualizado no meu site da web.

Ferramentas que você precisa conhecer para se tornar um/a desenvolvedor/a para a web

Vou presumir que você é um/a iniciante. Nesse caso, há algumas ferramentas que você precisa conhecer antes de iniciar na programação.

VS Code (ou outro editor de código)

Primeiro, você precisará aprender a usar o Visual Studio Code, que é um editor de código fonte. É uma ferramenta gratuita e poderosa.

No início, recomendo que você aprenda alguns dos atalhos básicos e instale algumas das extensões como ESlint, Prettier, ou Live Server.

No canal do freeCodeCamp, no YouTube, você encontrará um curso gratuito e completo  para ajudar você a começar.

A linha de comando

Em seguida, você precisará saber sobre a linha de comando (texto em inglês). Você deve aprender o que é e alguns dos comandos básicos, por exemplo, como mexer em diretórios, como criar um diretório ou como criar um arquivo.

Aqui está um excelente artigo sobre como usar o Bash (texto em inglês), a linha de comando do Linux. Aqui temos outro artigo que ajudará você a usar a linha de comando de modo mais eficaz (texto em inglês).

Controle de versão - Git e GitHub

Independentemente do que você faça como desenvolvedor/a, precisará saber sobre Git. O Git é um sistema de controle de versão utilizado para monitorar as alterações. É normalmente utilizado com GitHub, que é uma plataforma de hospedagem de código.

No início, aprender Git pode ser desgastante. Por isso, basta que você tenha algumas noções básicas de, por exemplo, como criar um repositório, como clonar um projeto, como fazer um novo commit e como lidar com as novas mudanças.

Uma das melhores formas de praticar Git é trabalhando em uma equipe: você precisará saber como criar uma nova branch, como fazer pull requests e como resolver conflitos.

No canal do freeCodeCamp, no YouTube, você encontrará um excelente curso intensivo de Git e GitHub (em inglês), para ajudá-lo a praticar o controle de versão.

Ferramentas de design - Figma

A última ferramenta é o Figma. O Figma é uma ferramenta de design gratuita para uso particular. Aqui, contudo, quero falar sobre como utilizar o Figma como um/a desenvolvedor/a.

Como desenvolvedor/a, pode ser que você receba designs da sua equipe. Com o Figma, você poderá  conferir o código dos elementos e medir o layout. Portanto, precisará saber como ler o design do Figma, por exemplo, como conseguir a cor, a tipografia ou espaçamento corretos.

Aqui está um artigo sobre várias ferramentas de design, incluindo o Figma (texto em inglês). Aqui está um tutorial divertido sobre a criação de esboços 3D no Figma (texto em inglês).

Muito bem. Então, estas são as ferramentas de que você precisará conhecer quando for começar. Você não precisará saber tudo, mas certifique-se de entender o básico para que possa melhorar enquanto aprende a programar.

Linguagens de programação que desenvolvedores e desenvolvedoras para a Web precisam conhecer

HTML e CSS

A seguir, vamos tratar das linguagens de programação. Comecemos falando de sites da web responsivos.

Sites da web responsivos são sites com uma boa aparência e que podem ser utilizados em todos os dispositivos ou tamanhos de telas. Você, provavelmente, sabe como é importante desenvolver um site responsivo, uma vez que, hoje em dia, as pessoas utilizam diversos dispositivos diferentes.

Então, vamos avançar para as duas primeiras linguagens que você precisará saber para desenvolver um site: HTML e CSS.

HTML significa Hypertext Markup Language (linguagem de marcação de hipertexto). Ela é utilizada para desenvolver o esqueleto do seu site. O HTML não é uma linguagem difícil de aprender, mas você talvez queira prestar mais atenção aos formulários HTML, uma vez que eles serão fundamentais no futuro.

CSS significa Cascading Style Sheets (folhas de estilo em cascata). Esta é uma linguagem de marcação, mas eu também a considero como uma linguagem de programação. O CSS não é, necessariamente, uma linguagem difícil de aprender, mas é difícil de se dominar.

Há poucos tópicos aos quais você deverá prestar mais atenção, como:

• Modelo de caixa – como as margens, padding e bordas funcionam em conjunto.
• Unidades CSS – utilizado para expressar comprimentos (por exemplo: rem, vh, e vw).
• Posição – especifica o tipo de método de posicionamento. Também confunde muitas pessoas. Por isso, certifique-se de investir tempo aprendendo-a.
• Variáveis – ou propriedades personalizadas são entidades que podem ser reutilizadas ao longo de um documento. Esta é a minha característica favorita no CSS. Elas tornam o trabalho com CSS muito agradável e é possível criar temas com apenas algumas linhas de código.
• Consulta dos meios de comunicação – permite decidir o que mostrar em diferentes tamanhos de telas. Trata-se de um componente chave do design responsivo.
• Animação – permite que um elemento mude de um estilo para outro. Se você souber usar a animação corretamente, ela fará com que o seu site se destaque. Caso contrário, fará com que o seu site pareça pouco profissional. Por isso, tenha cuidado.
• Flexbox, CSS Grid – usados para construir layouts responsivos (eu esqueci de mencioná-los no vídeo).

Aqui está um manual completo (texto em inglês) que ensinará a você todas as noções básicas de HTML. Aqui temos um curso completo sobre CSS (em inglês), no canal do freeCodeCamp, no YouTube, que ajudará você a tornar os seus sites mais bonitos.

Quando souber as noções básicas de HTML e CSS, o próximo passo é desenvolver alguns sites da web básicos. Você pode, por exemplo, tentar desenvolver uma página inicial; um formulário, como uma página de login, ou uma página de checkout. Você pode, até mesmo, desenvolver um portfólio. Em DevChallenges.io, você encontrará exemplos de projetos.

Implementação de sites da web

Quando já tiver o seu site da web, você precisará colocá-lo na internet, para que as pessoas possam vê-lo. A implementação é o processo de enviar seu código para uma plataforma de hospedagem.

Antigamente, era muito mais difícil de se fazer. Agora, porém, é superfácil. Você pode usar ferramentas como GitHub Pages, Netlify ou Vercel.

Aqui está um curso completo no YouTube sobre como colocar o seu site da web on-line (texto em inglês), que contempla o processo inteiro, do início ao fim.

JavaScript – Fundamentos

Muito bem, o próximo tópico é o JavaScript. O JavaScript é uma linguagem de programação popular e amplamente utilizada no desenvolvimento para a web, entre outros.

Você precisará aprender algumas das características básicas da linguagem, como tipos de dados, loops, e condicionais (textos em inglês).

Em seguida, há assuntos nos quais você deverá se aprofundar.

Em primeiro lugar, temos a depuração (em inglês, debugging). Este é o processo de encontrar e corrigir erros. Aqui temos um ótimo guia aprofundado de depuração de bugs (texto em inglês) para te ajudar a começar.

Depois, há outros tópicos como objetos, primitivos e arrays. Especialmente quando se trabalha com arrays, é necessário conhecer também os métodos de array (textos em inglês).

Funções são os principais blocos de construção do seu programa. Por isso, certifique-se de que não vai deixar de estudá-los.

Uma das minhas características favoritas em JavaScript é a desestruturação (texto em inglês) – é fácil de escrever e torna a linguagem super poderosa.

Como C#, Java e outras linguagens de programação, no JavaScript moderno, também temos classes. Elas são úteis quando se trata de Programação Orientada a Objetos e os princípios SOLID.

Por melhor que você seja em programação, haverá erros nos seus scripts. Isso significa que você também precisará saber sobre como lidar com os erros (texto em inglês).

Programação assíncrona é importante, especialmente quando é necessário comunicar com o servidor. Por isso, passe algum tempo aprendendo sobre Promises e Async/Await (texto em inglês).

JavaScript - Navegador

Passemos à forma como o JavaScript é utilizado no navegador.

Primeiro, é preciso saber o que é um Document Object Model (Modelo de Objeto de Documento) ou DOM. Depois, é preciso saber como obter elementos, como mudar as classes e como mudar o estilo com JavaScript.

Aqui está uma boa introdução ao DOM no JS (texto em inglês), e aqui está um guia sobre como manipular o DOM (texto em inglês, mas aqui você aprenderá construindo um projeto).

Você também precisará aprender sobre diferentes eventos de interface de usuário, como clicar, passar o cursor para cima, para baixo e assim por diante.

Você ainda terá que prestar mais atenção aos formulários em JavaScript (texto em inglês), uma vez que eles têm muitos eventos e propriedades.

JavaScript - outras características

A Fetch API é um tópico importante. Ela permite que você envie solicitações de rede para servidores. Isso é útil, por exemplo, quando precisamos enviar um formulário ou obter informações de um usuário.

Outro tópico importante é o armazenamento de dados no navegador (texto em inglês). Em relação a isso, é necessário saber quais são as diferenças entre cookies, armazenamento local (ou local storage, em inglês) e armazenamento de sessão (ou session storage, em inglês).

Outros tópicos menos importantes quando se está apenas começando são expressões regulares (regular expressions, em inglês), componentes da web (web components, em inglês) e websockets.

Expressões regulares (texto em inglês) são utilizadas para pesquisar e substituir texto. Componentes da web, são uma novidade, mas que valem a pena você conferir.

Por último, temos os Websockets (texto em inglês). Eles são úteis quando precisamos de trocas contínuas de dados, como em aplicações de bate-papo.

Depois de aprender Javascript, você deveria aprender sobre o TypeScript (texto em inglês). Eu amo o TypeScript, pois ele me passa segurança quando estou escrevendo o código.

O TypeScript fornece uma digitação estática, que permite que você detecte erros mais cedo no processo de depuração. Isso permite economizar tempo, uma vez que identifica erros antes de o código ser executado.

Aqui está um artigo útil sobre os tipos de TypeScript (texto em inglês) para ajudar você a ter maior clareza sobre eles.

Você poderia parar por aqui e começar a trabalhar em alguns projetos. Pessoalmente, no entanto, eu ainda aprenderia, pelo menos, um framework. Isso já permite a você praticar o JavaScript ao mesmo tempo.

Muito bem. Então, vamos continuar.

Bibliotecas e frameworks para se conhecer

Para se tornar um/a desenvolvedor/a front-end ou um/a desenvolvedor/a full-stack, é necessário conhecer algumas das bibliotecas e frameworks que existem por aí.

Bibliotecas e frameworks para desenvolvedores e desenvolvedoras de front-end

Comecemos pelo Sass, que é uma linguagem de criação de scripts de pré-processador. Eu uso o Sass em quase todos os meus projetos. Ele faz o CSS parecer mais limpo e torna-o mais rápido de desenvolver.

Aqui está um curso completo sobre Sass (texto em inglês) que ensinará você a dar superpoderes ao seu CSS.

Em seguida, temos o NPM que é um gestor de pacotes para programação em JavaScript. Ele permite instalar rapidamente diferentes pacotes na sua máquina.

Aqui, você encontrará um bom guia do NPM para iniciantes (texto em inglês), que ajudará você a começar a baixar pacotes de imediato.

Um dos meus arrependimentos é não ter conhecido o contentful antes. Contentful é um sistema de gestão de conteúdos, ou CMS, headless (Headless Content Management System). Os sistemas headless são diferentes dos CMS tradicionais, pois você pode armazenar dados no Contentful e utilizá-los para o seu front-end.

Para obter um trabalho de front-end, você precisa conhecer, pelo menos, um framework de front-end. Eu, pessoalmente, escolheria o React. Falaremos sobre outros frameworks mais adiante.

Além de aprender as noções básicas de React (texto em inglês), você também deverá se atentar à forma como o estado (em inglês, state) é gerenciado nas aplicações de React e a como os formulários funcionam em React.

Depois de aprender o básico, você pode solidificar as suas habilidades trabalhando em vários projetos com React neste curso do YouTube (em inglês).

Outro arrependimento que tenho é não ter conhecido o Next.js antes. O Next.js é utilizado para a renderização do lado do servidor ou para gerar websites estáticos. Sim, o Next.js ainda é bastante novo, mas eu acredito que esta é uma habilidade que precisamos desenvolver como programadores do React.

Você poderá aprender todos os conceitos básicos do Next.js neste manual aprofundado (texto em inglês).

Depois de aprender estas ferramentas, talvez você queira conferir a Material UI que é uma biblioteca de componentes do React, ou a Tailwind CSS, que é um framework do CSS que ajudará você a acelerar o seu trabalho quando estiver fazendo protótipos ou trabalhando como freelancer, por exemplo.

Com isso, depois de aprender JavaScript e um framework, você precisará praticar construindo projetos.

Você poderá começar construindo alguns componentes simples e reutilizáveis, para compreender como funciona o React. Depois, poderá construir aplicações mais complexas, como uma aplicação de Quiz ou uma aplicação de lista de tarefas.

Depois disso, você deverá criar aplicações ainda mais difíceis, como uma ferramenta de procura de emprego, um blog ou uma página de documentos. Mais uma vez, você encontrará exemplos de projetos na DevChallenges.io.

Desenvolvedor/a Full-stack

Agora, você está pronto/a para se candidatar a uma vaga de desenvolvedor/a front-end. Se quiser continuar para se tornar um/a desenvolvedor/a full-stack, você poderá começar aprendendo Node.js e Express (textos em inglês).

Neste ponto, você precisará saber como construir uma API RESTful e deverá conseguir usar o MongoDB para trabalhar com bancos de dados. Isso é bastante simples de aprender quando já se sabe JavaScript.

Em seguida, se desejar aprender mais, você poderá conferir o GraphQL (texto em inglês), que é uma linguagem de consulta e manipulação de dados para APIs. Pessoalmente, eu também investiria algum tempo aprendendo PostgreSQL. Comparado com MongoDB, é uma linguagem um pouco mais difícil de se aprender, uma vez que você também precisará aprender sobre SQL (texto em inglês).

Depois de aprender essas ferramentas, você poderá praticar construindo aplicações como um uploader de imagens, uma aplicação de autenticação ou uma sala de bate-papo. Você também pode encontrar estes projetos no Devchallenges.io.

Agora, sim, você está pronto/a para se candidatar a uma vaga de full-stack. Se o seu trabalho exigir que você conheça Vue.js, Angular ou até mesmo Svelte (textos em inglês), você também poderá dedicar algum tempo a aprender essas ferramentas. Não deve ser muito difícil, uma vez que você já saberá React.

Isto conclui o roteiro. Espero que você o considere útil. Um dos objetivos do autor para o ano passado foi o de fazer vídeos sobre todos os tópicos dos quais acabamos de falar. Portanto, não se esqueça de consultar o canal do autor no Youtube e DevChallenges Learn, o site do autor.