🚀 Oferta especial: 60% OFF no CrazyStack - Últimas vagas!Garantir vaga →
Web Design

Crie um site do zero: do Figma ao WordPress

Veja como desenvolvemos na prática um layout criado no Figma usando WordPress, HTML, CSS, JavaScript e GSAP

CrazyStack
12 min de leitura
FigmaWordPressGSAPJavaScriptMinicurso

Por que isso é importante

Aprender a transformar um layout em um site real é uma das habilidades mais procuradas por empresas e projetos freelancers. Essa prática aproxima a criatividade do design com a lógica do desenvolvimento, otimizando fluxos e entregas profissionais.

O que já rolou no minicurso

Na primeira aula do nosso minicurso, que aconteceu na segunda-feira, trabalhamos a parte de design. Utilizamos o Figma para criar juntos um layout moderno e responsivo, com foco em estruturação estratégica e componentes reutilizáveis.

O que faremos na segunda aula de hoje

Já nesta quarta-feira, às 19h, vamos colocar a mão no código! A proposta é desenvolver esse layout do zero, de forma didática e prática, utilizando WordPress como estrutura principal e tecnologias como HTML, CSS e JavaScript com suporte de animações usando GSAP.

Você pode acompanhar mesmo como iniciante

Tudo será explicado passo a passo, com foco didático, de forma que até quem está começando agora poderá aprender com facilidade e aplicar os conceitos em seus próprios projetos.

⚠️Atenção

Não precisa ter experiência profissional para acompanhar. O foco do conteúdo é exatamente quebrar essas barreiras iniciais e desmistificar o processo de criação.

Como acessar o link da aula e os materiais bônus

O vídeo da aula e os materiais complementares, como fontes, ícones e o arquivo do layout no Figma, estão sendo compartilhados exclusivamente no nosso grupo do WhatsApp.

Como garantir seu acesso

1
Passo 1: Acesse nossa bio oficial
2
Passo 2: Clique no link para entrar no grupo do WhatsApp
3
Passo 3: Fique atento às atualizações, pois o link da aula será divulgado por lá

ℹ️Info

Todo o suporte, arquivos e correções comentadas estão sendo postadas exclusivamente no grupo. Não deixe de entrar para não perder atualizações.

Tecnologias que usaremos na aula

WordPress

CMS utilizado para criação do projeto final

Saiba mais →

HTML & CSS

Marcação e estilo do layout criado

JavaScript

Linguagem para comportamentos dinâmicos

GSAP

Biblioteca de animações avançadas

Saiba mais →

Figma

Ferramenta de design usada na primeira aula

Saiba mais →

Aviso

O link do YouTube para a aula de hoje não será público diretamente no canal. Ele será compartilhado exclusivamente no grupo do WhatsApp.

Horário da aula: marque no seu calendário

A nossa segunda aula do minicurso acontece HOJE, às 19h em ponto, no nosso canal do YouTube. Chegue com antecedência para garantir que tudo está funcionando perfeitamente.

Checklist para acompanhar a segunda aula

Você já assistiu a aula de design no Figma
Você entrou no grupo do WhatsApp para acessar os links
Você sabe onde será a aula de hoje: YouTube, às 19h
Você separou tempo e está com editor e navegador abertos
Você está animado para ver o layout ganhar vida com código

Domine React e Node com o CrazyStack

Aprenda técnicas avançadas de React com nosso curso completo