🌐 Meu Primeiro Site Profissional: Como Desenvolvi o Novo Site do Grupo Guardião

🌌 CodeVerse2026 – Artigo #12

🧑💻 Fala Galera Dev! 👋

No último artigo compartilhei com vocês um sistema de gestão condominial desenvolvido para a faculdade, e esse mesmo sistema já esta em processo de migração para rodar com MySQL, PHP e HTML, para padronizar as aplicações que venho desenvolvendo para a empresa em um só modelo de linguagem e projeto, mais isso é um artigo futuro. Hoje quero falar sobre um projeto que foi um divisor de águas na minha trajetória como desenvolvedor.

Até então, todos os sites e sistemas que eu havia criado eram projetos pessoais. Eram ideias minhas, onde eu era o cliente, o desenvolvedor e muitas vezes até o usuário final. Mas dessa vez foi diferente. Pela primeira vez eu precisava desenvolver algo para uma empresa de verdade, com clientes reais, necessidades reais e uma marca construída ao longo de mais de dez anos, e é ai que bate aquele senso de responsabilidade, sabendo que o que você cria vai impactar na vida e no negócios de tantas outra famílias, positiva ou negativamente, tudo depende de você.

Ou como o avô do Peter Parker disse: Com grandes poderes vem grandes responsabilidades... kkk

E vou falar uma coisa para vocês: esse projeto me ensinou muito mais do que HTML, CSS e JavaScript. Ele me ensinou sobre negócios, pessoas, marketing, experiência do usuário e principalmente sobre resolver problemas reais.

💡 O maior desafio não era programar

Por já trabalhar no Grupo Guardião, tive a oportunidade de conversar diretamente com o diretor e com outras pessoas envolvidas para entender o que eles imaginavam para o novo site. Tinha uma noção de como a diretoria queria rever o layout de cor e tons da marca, e mais ou menos como queriam se posicionar no mercado.

Só que existe um detalhe interessante: muitas vezes o cliente não sabe exatamente o que ele quer. Ele possui uma ideia na cabeça, sabe o que deseja transmitir, mas não consegue visualizar como aquilo ficará na prática. E é justamente aí que entra o nosso papel como desenvolvedores.

Nós não somos apenas pessoas que escrevem código. Precisamos ouvir, interpretar, fazer perguntas e transformar tudo aquilo em uma experiência agradável. No fundo, acabamos sendo um pouco desenvolvedores, um pouco designers e um pouco tradutores de ideias. 😅

🏢 O objetivo era representar a essência da empresa

O Grupo Guardião atua em segmentos como condomínios de alto padrão, indústrias, hospitais, centros de distribuição e diversas outras áreas. Então o objetivo do novo site não era simplesmente ficar bonito.

Precisávamos transmitir confiança, mostrar a estrutura da empresa e apresentar seus serviços de forma organizada. O visitante precisava entender rapidamente quem é a empresa, o que ela faz e por que deveria confiar nela.

E isso não é tão simples quanto parece. Porque existe uma linha muito fina entre colocar poucas informações e deixar tudo vazio, ou colocar informações demais e transformar o site em um verdadeiro carnaval de elementos na tela. 😂

🎯 O site precisava vender, não apenas existir

Outra coisa que aprendi durante esse projeto é que um site não serve apenas para apresentar a empresa.

• Ele precisa gerar oportunidades.
• Ele precisa capturar possíveis clientes.
• Ele precisa trabalhar para a empresa vinte e quatro horas por dia.

Pensando nisso, várias partes do site foram desenvolvidas para direcionar os visitantes para o funil comercial. Botões levando para as landing pages, ícones do WhatsApp apontando para o comercial, chamadas para ação e uma organização pensada para que o visitante encontre rapidamente o serviço que procura.

No final das contas, o site precisava se comportar como um vendedor digital. E foi aí que percebi o quanto desenvolvimento e marketing caminham juntos.

📱 O mobile virou praticamente outro projeto

Hoje mais de 70% das pessoas acessam sites pelo smartphone. Então não adiantava fazer algo lindo no computador e esquecer do mobile. Então tive de desenvolver em paralelo e ir testando os layouts criados para ver como se compartam no desktop e mobile. Dois modos de programar, dois mundos diferentes, parece ser o mesmo site, mas muitas das vezes são quase que dois códigos totalmente diferentes um para cada estilo de visualização.

Tive que reorganizar várias partes do layout, alterar a forma como os carrosséis se movimentavam, modificar o footer, criar um menu hambúrguer e até implementar dois carrosséis para apresentar as logos dos clientes de uma maneira mais agradável.

Muitas coisas que funcionavam perfeitamente no desktop simplesmente não faziam sentido no celular. E isso me fez perceber que responsividade não é apenas diminuir elementos na tela. Muitas vezes é necessário pensar em experiências completamente diferentes para cada dispositivo.

🔄 A parte mais difícil nem foi o código

Uma das maiores dificuldades desse projeto foi a migração do site antigo para o novo. Afinal o projeto antigo havia sido desenvolvido em wordpress e não estavam nem um pouco organizado para entender e conseguir dar manutenção. não querendo falar mal dos colegas desenvolvedores que fizeram antes, mais demorei pelo menos uma hora só explorando e pensando na melhor maneira de subir meu novo site sem quebrar o que já existia.

Até porque naquela mesma hospedagem já existia um sistema utilizado pelos clientes para comprovação fiscal. Então eu não podia simplesmente apagar tudo e colocar meu site no lugar. Primeiro precisei entender tudo o que estava funcionando ali. Depois remover apenas a parte visual antiga, subir a nova versão e garantir que o sistema fiscal continuasse operando normalmente durante toda a transição.

Só depois disso consegui integrar tudo novamente dentro da nova interface. Foi praticamente como trocar o motor do carro enquanto ele continua andando. 😂

📦 O FileZilla resolveu me desafiar

Outra dificuldade apareceu durante logo no início do deploy. O cliente não tinha todas as senhas para acessar a hospedagem e fazer todo a migração do site novo, e como solução foi sugerido por um grande amigo meu que estava me ajudando nesse projeto utilizar o FileZilla.

Utilizando o FileZilla, percebi que alguns arquivos subiam normalmente para o servidor, enquanto outros simplesmente desapareciam. Algumas imagens carregavam, outras não. Alguns arquivos estavam lá, outros não apareciam de jeito nenhum. Como meu arquivo javascript que não subiu e foi perceber quando meus menus hamburguer não estavam funcionando e minhas animações estavam quebradas. Com isso acessei novamente o FileZilla e subi novamente o arquivo javascript e finalmente funcionou.

Então, após concluir o envio, precisei praticamente fazer uma auditoria manual. Fui verificando imagem por imagem, arquivo por arquivo, para garantir que tudo realmente havia sido enviado corretamente.

Foi trabalhoso, mas aprendi uma lição importante: nunca confie que terminou só porque a barra de progresso chegou em 100%. 😅

😅 Cinco letras derrubaram o site

Essa foi uma das experiências mais tensas que já tive como desenvolvedor. No dia seguinte do meu primeiro deploy oficial, precisei fazer uma correção extremamente simples no arquivo index. Era literalmente uma alteração de apenas cinco letras.

Fiz a alteração na minha máquina no VSCode, testei com o live server, funcionou sem nenhum problema, então vi que era seguro eu subir essa pequena alteração, e do nada após subir o arquivo… o site desapareceu.

Todos os arquivos estavam dentro da pasta www, mas o navegador simplesmente não encontrava nada. Depois de muito pesquisar e quebrar a cabeça, buscar em fórum, pesquisar na internet, descobri que precisava criar um arquivo chamado web.config para fazer o redirecionamento correto do servidor para o index. Depois disso, tudo voltou a funcionar normalmente. E mais uma vez ficou aquela lição clássica: às vezes o problema não está no código, mas no ambiente. 😂

⚡ Ainda existem melhorias para fazer

Como todo projeto real, ele nunca está realmente pronto.

Uma das próximas etapas será otimizar as imagens, deixando-as mais leves para melhorar ainda mais o tempo de carregamento. Também pretendo continuar refinando a experiência do usuário e fazer pequenos ajustes de navegação.

Porque uma coisa que venho aprendendo é que software é algo vivo. Ele evolui. Sempre existe algo para melhorar, otimizar ou refinar. E sinceramente, acho que essa é uma das coisas mais legais da nossa profissão.

Subi porque a diretoria estava pedindo para eu subir esse novo site o mais rápido possível pois já estava bem melhor que o antigo e por isso não hesitei e sub, mais acho que ainda tem muito a melhorar...

🚀 O que esse projeto me ensinou

Esse foi o meu primeiro site profissional. E talvez a maior lição que ele tenha me deixado é que desenvolver software vai muito além do código.

Precisamos entender pessoas. Precisamos entender negócios. Precisamos pensar em marketing, experiência do usuário, performance, mobile, hospedagem e até problemas de infraestrutura.

No final das contas, escrever código é apenas uma parte da história. O verdadeiro desafio é transformar ideias em soluções que gerem valor para quem vai utilizar aquilo. E isso, para mim, foi o maior aprendizado desse projeto.

🚀 Conclusão

Se tem uma coisa que esse projeto me ensinou é que qualquer pessoa pode aprender uma linguagem de programação. Mas entender a dor do cliente, compreender o negócio e transformar tudo isso em uma solução funcional é um desafio completamente diferente.

Até porque hoje em dia com a facilidade qualquer site pago de IA consegue desenvolver um site para você, mas entender a sua necessidade, e transformar isso em um projeto real e palpável, extraindo isso da empresa e da equipe que trabalha nela, isso a IA ainda não faz.

Foi nesse projeto que percebi que ser desenvolvedor não é apenas fazer funcionar. É representar uma marca, pensar na experiência das pessoas e ajudar a resolver problemas reais.

E talvez seja justamente isso que torna essa profissão tão fascinante. Porque no final das contas, não construímos apenas sites. Construímos soluções para pessoas reais.

🔥 Programar é importante: Mas aprender a transformar necessidades em soluções é o que realmente faz um desenvolvedor crescer. 🚀

🚀 Curtiu acompanhar essa jornada? Então me acompanha por aqui porque no CodeVerse2026 eu compartilho, de forma prática e real, meus projetos, bugs, aprendizados e toda a evolução dessa transição para a área tech. 👨💻🔥

• 🔗 LinkedIn: Carlos Garcia no LinkedIn
• 💻 GitHub: Carlos-CGS no GitHub
• Link do Site Desenvolvido: https://www.grupoguardiao.net.br

Porque no final das contas, grandes projetos não nascem prontos… eles evoluem uma linha de código por vez. 🚀