Como sair do zero até se tornar um programador front-end

Você já parou para pensar como funciona a parte visível da internet? Ou seja, a camada aparente dos sites e das aplicações?

Em qualquer momento na internet — seja quando você vai ler uma notícia, postar uma foto nas redes sociais, fazer uma compra online ou em qualquer outra situação, existe um trabalho minucioso que intermedeia a sua experiência com a tecnologia: o desenvolvimento em front-end.

Agora pense nas seguintes situações: você está em um site e a página demora para carregar ou, então, as ações não são tão intuitivas. O que você provavelmente faria?

A verdade é que, diante desses cenários, grande parte das pessoas simplesmente abandonaria a página.

É por isso que as responsabilidades de front-end são tão grandes: o cuidado e a funcionalidade são a porta de entrada e o convite para que as pessoas conheçam o conteúdo dos sites.

Pensando nisso, o objetivo deste artigo é explorar as complexidades da área de front-end, especialmente para compreender o que está por trás de cada botão e imagem das páginas.

Se você quer conhecer um pouco mais sobre esse universo, eu escrevi esse artigo pensando em você :)

O que é front-end?

Você já reparou a sensação de entrar em um edifício e se deparar com um belo hall de entrada?

A metáfora é simplista, mas é esse é o fundamento principal do papel que o front-end desempenha no mundo digital.

De forma geral, o front-end representa a parte visível das aplicações e dos sites. Em termos mais simples, trata-se da área das páginas com as quais você interage.

Imagine que um site é como um lar. O front-end equivale ao design de interiores, aos móveis, às tonalidades das paredes e a tudo aquilo com o qual você entra em contato.

Como é a estrutura de front-end?

Quando nos deparamos com qualquer construção, seja ela uma obra de arte ou uma casa, há sempre uma base fundamental que dá forma, estrutura e funcionalidade.

No universo do front-end, essa base compreende linguagens, frameworks, bibliotecas e ferramentas.

Mas, antes de nos aprofundarmos em cada um destes pilares, você precisa compreender o que são as linguagens de programação.

Afinal de contas, são elas que ditam como os sites e as aplicações devem aparecer e se comportar diante de nossos olhos e de nossas interações.

Como as coisas são feitas - a web por debaixo dos panos

Antes de nos aprofundarmos nos outros pilares do front-end, vamos bater um papo sobre algo que é essencial: as linguagens.

Se alguém já lhe disse que aprender programação é como aprender um novo idioma, essa pessoa tem razão. Mas, calma. Não estamos falando de francês ou mandarim.

Em resumo, as linguagens de programação são as ferramentas que permitem que a pessoa desenvolvedora se comunique com o computador.

Ou seja, é através das regras estruturais de cada linguagem de programação que as pessoas conseguem colocar soluções em prática.

Cada linguagem tem suas próprias regras e características. Aqui estão as principais linguagens de programação de front-end:

• HTML: Pense no HTML como a fundação da sua casa favorita. Sabe as paredes que dão proteção, as janelas por onde observamos o mundo e as portas que nos convidam a entrar? É exatamente isso. O HTML dá forma e estrutura ao que vemos nas páginas da web, como um esqueleto que mantém tudo em pé.

• CSS: Agora, imagine entrar nesta casa e se deparar com cores harmoniosas, móveis bem posicionados e uma sensação de aconchego. É aí que o CSS entra. Ele é responsável por garantir que tudo tenha um visual bonito e acolhedor, decidindo desde a cor das paredes até o estilo dos móveis.

• JavaScript: E para tornar essa casa realmente especial, imagine que, ao entrar, as luzes se acendem automaticamente, uma música suave começa a tocar e as cortinas se abrem lentamente. Esse toque, que traz movimento e interatividade, é o trabalho do JavaScript. Ele é aquele detalhe que faz a diferença, trazendo vida ao ambiente e proporcionando uma experiência única.

Ferramentas

No mundo digital, também existe uma caixa de ferramentas, que ajuda a construir e a criar harmonia nas páginas.

Editores de texto

Os editores de texto são essenciais para quem programa, porque é através deles que as pessoas desenvolvedoras montam o “quebra-cabeça” digital.

Um exemplo bastante popular é o Visual Studio Code. Mas existem vários outros editores de texto por aí.

De forma geral, os editores de texto ajudam a organizar e visualizar o código — o que facilita muito a vida de devs.

Ferramentas de design

Como o próprio nome sugere, as ferramentas de design são responsáveis por criar páginas bonitas e harmonizadas.

Para isso, existem profissões incríveis de designers de UX (experiência da pessoa usuária) e UI (interface da pessoa usuária) que definem a organização e a caracterização das páginas.

Mas, calma lá! Não confunda: quem trabalha com front-end não necessariamente é uma pessoa designer.

Na verdade, funciona como um trabalho coletivo: designers usam as ferramentas para criar e mostrar como as páginas devem ser. E então, entra o time de front-end para colocar o planejamento em prática.

A pessoa designer imagina e desenha, enquanto a pessoa desenvolvedora front-end põe a mão na massa para que tudo saia como planejado.

Para que serve o front-end?

Vamos imaginar que as páginas de sites são como um estabelecimento comercial de múltiplos setores. Você entra e se depara com uma variedade de seções: vestuário, eletrônicos, brinquedos, alimentos.

No entanto, imagine que tudo está bagunçado, sem placas indicativas, luzes piscando por todos os lados e, para piorar, está tocando um alarme irritante sem parar.

Não é só você que sairia correndo dessa loja. Pois bem. O front-end é responsável por garantir que a experiência nos sites seja agradável, organizada e funcional.

Que problemas o front-end resolve?

Uma forma de entender melhor o que é e para quê serve o front-end é através da aplicação prática em exemplos.

Por isso, aqui estão alguns exemplos de problemas que o front-end pode resolver:

Facilitar a interação entre pessoa usuária-computador

Outro dia, estava em um aeroporto internacional pela primeira vez. Era um daqueles enormes, com terminais que pareciam se estender por quilômetros.

No início, senti aquele nervosismo típico de não saber para onde ir, com o barulho das malas e o murmúrio constante das pessoas.

Mas, à medida que avancei, percebi a importância de algumas coisas simples: as placas de sinalização. Elas estavam por toda parte - check-in, embarque, saídas, restaurantes. Cada seta, cada sinal, estava estrategicamente posicionado para me guiar.

Essa função tem uma relação direta com meu trabalho, como pessoa desenvolvedora front-end: assim como aqueles sinais no aeroporto, meu trabalho é garantir que, no vasto universo da internet, você sempre saiba para onde ir, sem confusão e sem se perder.

Um site bem projetado é como aquele aeroporto bem sinalizado: cada etapa da jornada é clara e intuitiva.

Tornar informações complexas acessíveis e compreensíveis

Como você já sabe, o papel do front-end é evitar o sentimento de confusão no mundo digital.

É como se, ao entrar em um site ou aplicativo, você fosse recebido por uma pessoa super atenciosa, que te apresenta tudo de forma simples e direta, mostra as melhores escolhas e explica todos os termos que você desconhece.

Como pessoa desenvolvedora front-end, nosso trabalho é garantir que a informação seja clara para todas as pessoas, independentemente de sua familiaridade com o assunto. Queremos que cada pessoa se sinta confortável e acolhida, independentemente de sua experiência anterior com tecnologia.

Adaptabilidade a diferentes tamanhos de tela (Responsividade)

Por acaso, você já comparou a experiência de assistir a um filme na tela do cinema e depois no celular?

A diferença entre as duas experiências é muito grande. As telas de tamanhos diferentes proporcionam experiências distintas.

No mundo digital, é como se tivéssemos cinemas, televisões, tablets e celulares. Todos exibindo o mesmo filme.

Por isso, precisamos ajustar as imagens para que nada fique de fora ou distorcido. O front-end é a diretora de cena que garante que, independentemente do tamanho da tela, tudo seja visto da melhor maneira possível.

Em outras palavras, ela adapta nosso "filme" para que fique perfeito em qualquer "tela".

Quais os benefícios o front-end?

Vou contar uma história sobre Maria. Ela acaba de abrir sua própria loja de roupas online, um sonho que cultivou por anos.

Maria investiu em peças de qualidade, escolheu um nome para a marca e estava pronta para conquistar o mundo virtual. Mas a trajetória dela é uma excelente maneira de entendermos os benefícios do front-end. Nos primeiros dias, Maria percebeu que, apesar de ter produtos incríveis, as pessoas que visitavam seu site saíam sem comprar.

Logo, Maria percebeu detalhes sobre a experiência de seu site: tudo era bastante lento, as imagens não carregavam direito e a navegação era confusa.

Então, ela buscou ajuda de uma pessoa desenvolvedora front-end, que redesenhou seu e-commerce. O resultado desse trabalho foi claro: a página ficou mais rápida, intuitiva e com uma aparência limpa.

Agora, as pessoas podiam encontrar facilmente o que queriam e sentir prazer navegando pelo site.

Com as mudanças, as vendas da Maria dispararam. Antes, as pessoas ficavam frustradas e não finalizavam a compra.

Agora, eles seguiam a trajetória de maneira simples: desde a escolha do produto até a finalização do pagamento.

O site eficiente e amigável da Maria transformou as pessoas indecisas em clientes leais. Agora, a loja online da Maria não é apenas um negócio: é uma (boa!) experiência.

Graças ao poder do front-end, a visão dela foi transformada em realidade. O resultado do trabalho de front-end não aparece apenas no número das vendas, mas na construção de uma conexão genuína com seus clientes.

E assim, Maria não só realizou seu sonho, mas também criou um espaço digital que as pessoas amam visitar. E é isso que o front-end pode fazer: transformar sonhos em experiências digitais incríveis.

A tríade: HTML, CSS E JavaScript

Depois de assimilar todos os conceitos básicos, é hora de nos aprofundarmos um pouco mais.

Vamos mergulhar um pouco mais profundamente no universo de desenvolvimento front-end e descobrir os tesouros que a tríade HTML, CSS e JavaScript têm a oferecer.

Pilar Fundador: HTML

Imagine uma cidade: com casas, edifícios, parques e estradas. Em termos de websites, o HTML (HyperText Markup Language) é responsável por criar essa estrutura fundadora.

Em termos mais simples, funciona como o alicerce e a fundação de construções.

Os termos técnicos que você poderá encontrar enquanto aprende HTML incluem “tags”, “elementos” e “atributos”. Mas você pode pensar neles como tijolos e cimento, juntando-se para construir algo sólido.

Artista: CSS

Agora, com a cidade construída, precisamos de cor, estética e estilo. O CSS (Cascading Style Sheets) é o nosso designer de interiores. Ele define cores, espaçamentos e a aparência geral da página.

Através do CSS, é possível dar vida e beleza à estrutura que o HTML construiu. Algumas palavras-chave que você pode encontrar ao estudar CSS são “seletores”, “propriedades” e “valores”. Eles são as ferramentas que nos ajudam a pintar e decorar a nossa cidade digital.

A Mágica: JavaScript

Temos uma cidade bonita, mas ela ainda está estática. Para que ela ganhe vida, temos o JavaScript.

É como a pessoa eletricista e a engenheira juntas, permitindo que as luzes acendam, os elevadores se movam e os parques tenham fontes dançantes.

Funções, variáveis e eventos são termos que você vai se familiarizar ao aprender JavaScript. Eles são os componentes que trazem interatividade ao nosso mundo digital.

Indo Além: Bibliotecas e Frameworks

À medida que nos aprofundamos nesse universo, encontramos as bibliotecas e os frameworks, que são como kits de ferramentas prontas que nos ajudam a acelerar nosso trabalho.

• Bootstrap: Uma biblioteca CSS que vem com estilos e componentes prontos para usar, ajudando a criar sites responsivos rapidamente.
• React, Vue e Angular: são frameworks JavaScript avançados que nos permitem construir aplicações web interativas de forma mais eficiente e organizada.

Como Começar no mundo do front-end?

Já contei algumas histórias, agora deixa eu te guiar nesta jornada inicial no universo do front-end. Vamos lá?

Como qualquer caminho, para começar no mundo do front-end, você precisa de um plano e, acima de tudo, de determinação e esforço.

Começando do zero no front-end

Entrar no mundo do front-end é como se preparar para uma maratona. Não adianta sair correndo sem um aquecimento no roteiro, certo?

Antes de começar, vamos retomar alguns conceitos:

• HTML: É a fundação, o começo de tudo. Pense nele como o esqueleto da sua página.
• CSS: Uma vez que você tem uma estrutura, o CSS entra para dar cor, forma e estilo. Será como pintar e decorar sua casa.
• JavaScript: Agora que temos uma casa bonita, vamos torná-la interativa, com portas que abrem e luzes que acendem.

Aqui estão os primeiros passos do seu plano de estudos:

Com uma base sólida, é hora de ir além. Existem inúmeros cursos que te ajudarão a se aprofundar em cada linguagem.

O Tech Guide da Alura é uma excelente fonte para isso. Lá você vai encontrar um caminho estruturado para cada linguagem.

Me lembrei de uma entrevista de Denzel Washington, um ator americano, que se encaixa perfeitamente aqui e diz mais ou menos isso em tradução livre:

Sonhos sem objetivos são só sonhos.

E eventualmente a gente acaba se frustrando porque nunca os alcançamos.

Na sua jornada, para alcançar seus sonhos, você precisa ter disciplina.

Mas acima de tudo, você precisa de consistência.

Porque sem comprometimento você nunca começa.

Mas sem consistência você nunca termina.

Sei que pode parecer um desafio agora, mas a verdade é que cada passo que você dá no aprendizado é uma vitória.

Não é sobre quão rápido você aprende, mas sobre a jornada e o progresso contínuo. Comprometa-se com seu crescimento, seja consistente em seus estudos e suas práticas.

Quais os próximos passos?

Agora que você já deu os primeiros passos no universo do front-end, já pode começar a sua jornada. Se eu puder te dar uma dica, nesse momento é: fortaleça sua base.

Antes de correr com o React, ou algum outro framework, fortaleça suas bases em JavaScript. Aqui no blog da Alura você pode encontrar muitos artigos sobre temas específicos de front-end.

Faça anotações! Pratique! Desenvolva suas próprias páginas e aprenda com seus erros e acertos. Crie o hábito de participar de fóruns, responder dúvidas é uma fonte valiosa de pesquisa e desenvolvimento.

Se você curte ouvir podcasts, se liga aqui no Hipsters para ouvir um monte de gente bacana conversando sobre como é trabalhar no front-end. Inclusive, nesse episódio, eu conversei com o Paulo Silveira, a Roberta Arcoverde, a Ju Amoesei e o Mário Souto sobre como é trabalhar com front-end numa empresa lá de Portugal.

Bons estudos :)