Não sou pedreiro, empreiteiro, ou engenheiro civil para entender todas as nuances e aspectos da construção de uma casa, prédio e tudo mais, mas costumo dizer que trabalhar com Front-end é como construir uma casa, só que é mais difícil de entender e mais fácil de fazer.

Essa analogia é bem prática para explicar o que eu faço e, principalmente, ajuda as pessoas que a escutam a entender alguns dos aspectos do desenvolvimento web, vide aquela propaganda antiga da Marinha, a respeito da segurança no mar: "Carros são como lanchas, motos são como jet-skis e os pedestres são como banhistas...".

Partindo deste princípio...

HTML é como a estrutura e paredes da casa

Como toda a casa, ela deve possuir uma estrutura, uma base, geralmente feita com materiais de alvenaria (no Brasil). Essa estrutura dará forma a casa, com as paredes, a divisão entre cômodos e tudo mais. No front-end essa estrutura básica é feito com HTML (Linguagem de Marcação de HiperTexto em português).

O HTML nada mais é que a base da nossa "casa" (website) na internet. Toda a estrutura dessa "casa" é feita em HTML. HTML é uma linguagem de marcação que possui inúmeras TAGs que servem para dar sentido a estrutura HTML que está sendo construída. Nesse sentido, as TAGs HTML são como os blocos da parede, os interruptores de energia, pontos de instação de água, etc., que são organizados de tal maneira que constroem uma parede, neste caso, uma página na internet.

O HTML é a parte mais básica do desenvolvimento front-end e, na minha opinião, a mais importante. Sem o HTML, não haveria a internet como a conhecemos hoje e, portanto, é necessário entender bem sobre HTML, para ser capaz de fazer uma base bem sólida e correta para que a "casa" não desmorone no futuro, caso seja necessário fazer uma reforma. Chegarei nesse ponto mais a frente do post...

Javascript é como a instalação hidraulica, elétrica da casa

A "casa" já está de pé, porêm não é possível viver nela, já que ela não possui instalações elétricas e nem hidraulicas para garantir a permanência dos moradores. Nesse sentido, o Javascript serve para trazer certas funcionalidades à "casa" feita em HTML, dando a "casa" comodidades como energia elétrica e água.

O Javascript nada mais é que uma linguagem de programação que, a princípio, serve para trazer interatividade ao HTML. Ela irá permitir ao usuário (morador) do site interagir com a página (casa) na internet, sendo clicando num botão ou preenchendo algum campo de texto, para executar alguma funcionalidade que foi programada no site, como fazer a soma de 2 números por exemplo.

Pensando no exemplo da casa, o Javascript vai permitir que o "morador" acenda a luz de um dos "cômodos" da nossa "casa" feita com HTML.

Atualmente, o Javascript possui diversas aplicações e pode ser trabalhado tanto no front-end, como no back-end. Ele é uma das portas de entrada para estudantes de programação, pois possui uma escrita (sintaxe) simples e fácil de ser compreendida.

CSS é como a instalação de pisos e acabamentos

Agora, a "casa" já está construída e possui os recursos necessários para os "moradores" ficarem nela, porêm ela ainda está feia. Como acontece nas casas de verdade, a "casa" construída em HTML também precisa de acabamentos, e esses acabamentos são feitos com CSS.

CSS (Folhas de Estilo em Cascata em português) é uma linguagem de estilo, que serve, basicamente, para dar uma cara mais "amigável" as páginas da internet, deixando as páginas da internet com um aspecto mais bonito. No passado, era possível estilizar o HTML sem o uso do CSS, mas isso já caiu em desuso a muito tempo, exeto para situações muito, muito específicas, como a construção de email marketing.

Na nossa analogia da casa, o CSS é o conjunto de acabamentos, pisos, tintas e outras coisas que iremos usar para a nossa "casa" ficar do jeito que queremos. É através do CSS que iremos "pintar" as paredes na nossa casa na internet.

O CSS pode ser particularmente desafiador para os iniciantes entenderem como ele funciona, já que ele possui uma série de regras e comportamentos que podem variar conforme o navegador do usuário, tornando ele uma tecnologia difícil de ser compreendida por completo, no meu ponto de vista, embora eu goste bastante de CSS.

Pra fechar...

Uma breve experiencia...

Trabalhei numa empresa onde foi pedido uma migração completa (reforma) do front-end (casa) para uma nova estrutura. A princípio, pensei em construir essa nova "casa" dentro da estrutura já existente, entretanto, com o passar do tempo, percebi que a estrutura antiga não estava boa o bastante para comportar este empreendimento.

Com medo da "casa" desabar com a nova estrutura que estava construindo, decidi construir a base dessa nova "casa" completamente separada da "casa" antiga, sendo necessário somente criar um "corredor" entre as "casas" para que eu conseguisse integra-las. Desta maneira, mantive a estrutura da "casa antiga" praticamente intacta, mitigando os riscos da "casa antiga" desabar devido a sua estrutura frágil, enquanto ia trabalhando na "nova casa", construindo-a de maneira que sua estrutura iria comportar tudo o que a "casa antiga" possuia além dos novos "cômodos" que estavam sendo planejados para a "nova casa" receber.

Chega de analogia com casa

Embora hajam muitos paralelos entre construir uma casa e construir uma página na internet, construir uma página na internet não se restringe somente a esses 3 pilares (HTML/CSS/Javascript). Existem muitos outros aspectos e conceitos do desenvolvimento front-end que não foram abordados nesse post, como performance, SEO, ferramentas de desenvolvimento e afins... Portando, o conhecimento dessas tecnologias é fundamental para dar passos mais adiante no desenvolviment front-end. Alguns deles foram brevemente abordados aqui.

Os exemplos que criei são, em suma, exemplos bem simples e genéricos que buscam dar uma base de como essas tecnologias interagem entre si, e acredito que para a finalidade desse artigo, eles servem como um ponto bastante inicial para quem quer entender, de maneira mais lúdica, o que um engenheiro front-end faz. Ele controi casas, só que na internet rs.