Pular para o conteúdo
Apostila Codigo sem medo
Guia digital cute tech ✦ WordPress para criadoras

Código WordPress:
Guia de Autonomia para Criadoras Web

Aprenda HTML, CSS, lógica, integrações e segurança técnica no WordPress sem linguagem difícil, sem pânico e sem precisar virar programadora.

Começar pela Fase 1Ver módulos
HTMLCSSAPIWebhookElementor
Como usar

Comece leve, sem tentar engolir tudo de uma vez.

Essa apostila foi pensada para virar prática, não pressão.

1Estude uma aula por vez
2Use um site de testes
3Observe o termômetro de risco
4Faça a prática no mesmo dia
5Crie seu diário técnico
Roteiro completo

Curso completo nos locais certos

Clique em qualquer módulo para ir direto para a seção.

01Entendendo a Web e o Olhar Técnico no WordPress02HTML do Zero, do Jeito Certo03CSS do Zero com Foco no Uso Real04Inspetor de Código e Leitura de Interfaces05Aplicações Reais Dentro do WordPress06Lógica de Código para Iniciantes07JavaScript sem Medo08JSON e Dados Sem Complicação09Interfaces e APIs10Webhooks e Automação11Functions.php, Tema Filho e Organização Técnica12Shortcodes e Recursos Personalizados13CPTs e Estruturas Inteligentes14Ferramentas de Dev e Investigação15Projeto Final e Revisão Geral
Base

Fase 1 — A Base Mental e a Estrutura da Web

Módulo 01Risco Baixo
🏠

Entendendo a Web e o Olhar Técnico no WordPress

Antes de falar de código, vamos tirar o mistério da web. Domínio, hospedagem, servidor, tema, plugin e WordPress começam a fazer sentido de forma simples.

Aula 1

O que existe por trás de um site

Explicação simples

Um site funciona como uma loja física. O domínio é o endereço, a hospedagem é o terreno, o servidor entrega os arquivos, o WordPress organiza tudo, o tema cuida da estrutura visual e os plugins adicionam funções extras.

Exemplo prático
Domínio = endereço. Hospedagem = terreno. WordPress = sistema de organização. Tema = visual. Plugin = função extra.
Aula 2

HTML, CSS e JavaScript sem mistério

Explicação simples

HTML cria a estrutura, CSS cuida do visual e JavaScript adiciona comportamento.

Exemplo prático
HTML é a casa, CSS é a decoração e JavaScript é a parte elétrica/interativa.
Próximo módulo →
Módulo 02Risco Baixo
🏷️

HTML do Zero, do Jeito Certo

HTML deixa de ser assustador quando vira estrutura: títulos, textos, links, imagens e botões organizados.

Aula 1

Tags, abertura e fechamento

Explicação simples

Tags são caixinhas que dizem ao navegador o que cada conteúdo representa.

Exemplo prático
<h1>Meu Título</h1>
Aula 2

Estrutura básica de uma página HTML

Explicação simples

Uma página HTML tem hierarquia. Seções, títulos, textos e links precisam ter ordem.

Exemplo prático
<section>
  <h1>Serviços de Web Design</h1>
  <p>Criação de sites estratégicos.</p>
  <a href="/contato">Solicitar orçamento</a>
</section>
Aula 3

Títulos, parágrafos, links, imagens e botões

Explicação simples

Esses são os elementos mais usados em páginas e formam a base de qualquer seção.

Exemplo prático
<h1>Título</h1>
<p>Texto explicativo.</p>
<a href="https://seudominio.com">Acessar site</a>
<img src="imagem.jpg" alt="Descrição da imagem">
<button>Enviar</button>
Aula 4

HTML aplicado no WordPress

Explicação simples

No WordPress, HTML pode ser usado em blocos personalizados, widgets, descrições e templates.

Exemplo prático
<a href="https://wa.me/5500000000000" target="_blank">Falar no WhatsApp</a>
← Módulo anteriorPróximo módulo →
Visual

Fase 2 — CSS do Zero e Aplicação Real

Módulo 03Risco Médio
🎨

CSS do Zero com Foco no Uso Real

CSS é design em código: cores, fontes, espaçamentos, bordas e ajustes visuais.

Aula 1

Seletores, propriedades e valores

Explicação simples

CSS funciona com a lógica: quem, o quê e quanto.

Exemplo prático
h1 {
  color: blue;
  font-size: 24px;
}
Aula 2

Cores, fontes, margens e preenchimento interno

Explicação simples

CSS controla cor, fonte, margin, padding, borda e arredondamento.

Exemplo prático
.caixa-teste {
  background-color: #f4f4f4;
  padding: 30px;
  margin: 50px;
  border-radius: 10px;
}
Aula 3

Classes, IDs e organização do estilo

Explicação simples

Classe pode ser usada várias vezes. ID deve ser único.

Exemplo prático
.titulo-destaque { color: #b45b7a; }
#botao-principal { background-color: #222; }
Aula 4

CSS adicional no WordPress

Explicação simples

CSS Adicional é uma área segura para pequenos ajustes visuais.

Exemplo prático
.botao-whatsapp {
  display: inline-block;
  background-color: #25d366;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 30px;
}
← Módulo anteriorPróximo módulo →
Módulo 04Risco Baixo
🔎

Inspetor de Código e Leitura de Interfaces

Aqui você vira detetive da web: investiga elementos, testa mudanças e entende bastidores.

Aula 1

Como abrir e usar o inspetor

Explicação simples

O inspetor mostra HTML, CSS, classes, tamanhos e informações por trás da página.

Exemplo prático
Clique com botão direito > Inspecionar
Aula 2

Como identificar HTML e CSS

Explicação simples

No inspetor, o HTML aparece de um lado e o CSS do outro.

Exemplo prático
<h1 class="titulo-principal">Meu site profissional</h1>
Aula 3

Testando alterações sem mexer no site

Explicação simples

O inspetor permite testar cor, tamanho e margem temporariamente.

Exemplo prático
color: #b45b7a;
font-size: 42px;
Aula 4

Encontrando classes, IDs e elementos

Explicação simples

Para estilizar algo, primeiro descubra como o elemento se chama.

Exemplo prático
<div class="card-servico">
<section id="hero-home">
← Módulo anteriorPróximo módulo →
Módulo 05Risco Médio
🧩

Aplicações Reais Dentro do WordPress

Agora a teoria vira prática no WordPress real, com segurança e processo.

Aula 1

Onde inserir HTML no WordPress

Explicação simples

HTML pode entrar em blocos personalizados, widgets e áreas que aceitam código.

Exemplo prático
<div class="aviso-site">
  <strong>Aviso:</strong> esta é uma área de teste.
</div>
Aula 2

Onde inserir CSS no WordPress

Explicação simples

CSS pode entrar em CSS Adicional, Elementor Pro, tema filho ou snippets.

Exemplo prático
.aviso-site {
  background-color: #fff2f5;
  padding: 20px;
  border-left: 4px solid #b45b7a;
}
Aula 3

Cuidados antes de aplicar código

Explicação simples

Código precisa de backup, staging e entendimento antes de aplicar.

Exemplo prático
Nunca teste código novo direto em site de cliente.
Aula 4

Pequenas personalizações seguras

Explicação simples

Comece com cor de botão, espaçamento, borda e cards.

Exemplo prático
.card-destaque {
  background-color: #faf4ef;
  padding: 28px;
  border-radius: 18px;
}
← Módulo anteriorPróximo módulo →
Lógica

Fase 3 — Lógica, JavaScript e Dados

Módulo 06Risco Baixo
🧠

Lógica de Código para Iniciantes

Programar começa pensando, não digitando código. Fluxo, causa, condição e efeito aparecem em botões, formulários e automações.

Aula 1

O que é lógica de programação

Explicação simples

Lógica de programação é organizar uma sequência de ações. Não é matemática difícil. É pensar em fluxo.

Exemplo prático
Se a pessoa clica no botão, então abre o WhatsApp.
Aula 2

Causa, efeito, condição e sequência

Explicação simples

Toda interação pode ser quebrada em causa, condição, efeito e sequência.

Exemplo prático
Se o formulário está correto, mostra sucesso. Se falta campo, mostra erro.
Aula 3

Pensando em fluxos dentro de um site

Explicação simples

Um site é uma sequência de decisões que guia a visitante.

Exemplo prático
Home > promessa > serviços > formulário > orçamento.
Aula 4

Como transformar uma ação em uma regra simples

Explicação simples

Quando uma ação vira regra, você começa a pensar como os sistemas pensam.

Exemplo prático
Ação: clique no botão. Regra: abrir link do WhatsApp.
← Módulo anteriorPróximo módulo →
Módulo 07Risco Médio
⚡

JavaScript sem Medo

JavaScript é o que faz a página reagir. Ele cria cliques, alertas, menus, validações e interações simples.

Aula 1

O que é JavaScript e para que ele serve

Explicação simples

JavaScript é a linguagem que cria comportamentos em uma página.

Exemplo prático
Alertas, cliques, menus, validações e troca de conteúdo.
Aula 2

Eventos de clique

Explicação simples

Um evento é algo que acontece na página. O clique é um dos eventos mais comuns.

Exemplo prático
Ao clicar em um botão, aparece um alerta.
Aula 3

Funções simples

Explicação simples

Função é um bloco de código criado para executar uma ação.

Exemplo prático
function mostrarMensagem() { alert('Olá!'); }
Aula 4

Interações básicas em páginas WordPress

Explicação simples

JavaScript pode mostrar e esconder avisos, trocar conteúdos e criar pequenas interações.

Exemplo prático
Clicar em um botão para mostrar um aviso escondido.
← Módulo anteriorPróximo módulo →
Módulo 08Risco Baixo
📦

JSON e Dados Sem Complicação

JSON parece técnico, mas é apenas uma forma organizada de guardar e enviar informações.

Aula 1

O que é JSON

Explicação simples

JSON é uma forma organizada de escrever informações para sistemas entenderem.

Exemplo prático
{"nome":"Ana","servico":"Landing Page"}
Aula 2

Como os dados são organizados

Explicação simples

Cada informação no JSON tem chave e valor.

Exemplo prático
"nome": "Marina"
Aula 3

Onde o JSON aparece no dia a dia

Explicação simples

JSON aparece em integrações, webhooks, APIs, formulários e automações.

Exemplo prático
Um formulário envia nome, e-mail e mensagem para outra ferramenta.
Aula 4

Lendo uma estrutura simples de dados

Explicação simples

Você não precisa decorar JSON; precisa aprender a olhar e entender a estrutura.

Exemplo prático
Cliente > nome e e-mail. Pedido > serviço e status.
← Módulo anteriorPróximo módulo →
Módulo 09Risco Médio
🌉

Interfaces e APIs

Toda vez que ferramentas conversam entre si, existe uma API por trás. Ela conecta WordPress, CRM, WooCommerce, pagamentos e automações.

Aula 1

O que é uma API

Explicação simples

API é uma ponte entre sistemas.

Exemplo prático
WordPress conversa com WooCommerce e formulário conversa com CRM.
Aula 2

Como ferramentas conversam entre si

Explicação simples

Quando uma ferramenta manda ou busca informação, ela usa uma estrutura combinada.

Exemplo prático
Formulário > API > CRM > E-mail automático.
Aula 3

Endpoints e troca de informações

Explicação simples

Endpoint é o endereço específico de uma API, a porta por onde o pedido entra.

Exemplo prático
https://api.exemplo.com/leads
Aula 4

APIs no contexto do WordPress

Explicação simples

Muitos plugins WordPress usam APIs sem que você perceba.

Exemplo prático
Frete, pagamento, Instagram, CRM e automações.
← Módulo anteriorPróximo módulo →
Automação

Fase 4 — Automação e Customização Profissional

Módulo 10Risco Médio
📨

Webhooks e Automação

Webhooks fazem sistemas avisarem automaticamente quando algo acontece. É o começo da visão de automação.

Aula 1

O que é Webhook

Explicação simples

Webhook é um aviso automático enviado quando algo acontece.

Exemplo prático
Quando alguém envia um formulário, outra ferramenta é avisada.
Aula 2

Diferença entre API e Webhook

Explicação simples

API pergunta se tem novidade. Webhook avisa quando tem novidade.

Exemplo prático
API: Tem novos pedidos? Webhook: Novo pedido recebido!
Aula 3

Gatilhos, dados, destinos e ações

Explicação simples

Todo fluxo de automação tem gatilho, dados, destino e ação.

Exemplo prático
Formulário enviado > nome/e-mail > CRM > cadastrar lead.
Aula 4

Desenhando um fluxo de automação

Explicação simples

Antes de conectar ferramentas, desenhe o fluxo para evitar bagunça.

Exemplo prático
Formulário > Webhook > Automação > Planilha > E-mail.
← Módulo anteriorPróximo módulo →
Módulo 11Risco Alto
⚠️

Functions.php, Tema Filho e Organização Técnica

Este módulo entra em uma área sensível do WordPress, mas sem drama. Você aprende a respeitar o risco sem ter medo.

Aula 1

O que é o arquivo functions.php

Explicação simples

functions.php permite adicionar funções ao WordPress, mas é sensível.

Exemplo prático
Criar shortcodes, adicionar scripts ou alterar comportamentos do tema.
Aula 2

Tema filho

Explicação simples

Tema filho é uma camada segura para personalizações técnicas.

Exemplo prático
O tema pai atualiza, mas o filho preserva alterações.
Aula 3

Quando usar plugin, snippet ou tema filho

Explicação simples

Nem toda personalização precisa ir no functions.php. Às vezes snippet é mais seguro.

Exemplo prático
CSS no CSS Adicional, tracking em plugin, função em snippet.
Aula 4

Cuidados antes de mexer em funções do site

Explicação simples

Antes de mexer em funções, tenha backup, staging, acesso e forma de desfazer.

Exemplo prático
Código revisado + backup + teste desktop/mobile.
← Módulo anteriorPróximo módulo →
Módulo 12Risco Médio
🔗

Shortcodes e Recursos Personalizados

Shortcodes são atalhos inteligentes. Eles ajudam a inserir recursos prontos ou personalizados em páginas e posts.

Aula 1

O que é um shortcode

Explicação simples

Shortcode é um atalho entre colchetes que o WordPress transforma em conteúdo.

Exemplo prático
[meu_shortcode]
Aula 2

Como shortcodes aparecem no WordPress

Explicação simples

Muitos plugins entregam shortcodes prontos para colar em páginas.

Exemplo prático
[formulario_contato]
Aula 3

Exemplos simples de uso

Explicação simples

Shortcodes podem exibir formulários, produtos, galerias e recursos personalizados.

Exemplo prático
[products limit="4" columns="4"]
Aula 4

Quando vale a pena criar um recurso personalizado

Explicação simples

Vale criar recurso personalizado quando algo precisa ser repetido muitas vezes.

Exemplo prático
Mostrar ano atual no rodapé ou CTA reaproveitável.
← Módulo anteriorPróximo módulo →
Módulo 13Risco Médio
🗂️

CPTs e Estruturas Inteligentes

CPTs fazem você enxergar WordPress como sistema, não apenas como páginas soltas.

Aula 1

O que são tipos de conteúdo personalizados

Explicação simples

CPT significa Custom Post Type, ou tipo de post personalizado.

Exemplo prático
Serviços, Projetos, Depoimentos, Imóveis, Receitas e Cases.
Aula 2

Diferença entre posts, páginas e CPTs

Explicação simples

Posts são cronológicos, páginas são fixas e CPTs são repetíveis com estrutura própria.

Exemplo prático
Blog = post. Home = página. Serviços = CPT.
Aula 3

Como pensar estruturas para projetos reais

Explicação simples

Antes de criar CPT, pense quais campos aquele conteúdo precisa ter.

Exemplo prático
Serviços com nome, descrição, benefícios, prazo, valor e CTA.
Aula 4

Organização de conteúdo com visão profissional

Explicação simples

CPTs deixam sites mais consistentes, escaláveis e fáceis de manter.

Exemplo prático
Cases com cliente, serviço, descrição, galeria e segmento.
← Módulo anteriorPróximo módulo →
Prática

Fase 5 — Prática Final e Consolidação

Módulo 14Risco Baixo
🧰

Ferramentas de Dev e Investigação

Investigar problemas também é habilidade criativa. Você aprende a olhar console, erros e performance com calma.

Aula 1

Ferramentas úteis para analisar sites

Explicação simples

Ferramentas como inspetor, console, PageSpeed, GTmetrix e Lighthouse ajudam a entender o site.

Exemplo prático
PageSpeed analisa desempenho; console mostra erros.
Aula 2

Console, elementos e erros visuais

Explicação simples

O console mostra mensagens e erros técnicos. Nem todo erro é desesperador.

Exemplo prático
Erros em vermelho podem indicar scripts ou arquivos que não carregaram.
Aula 3

Como investigar problemas com calma

Explicação simples

Quando algo quebra, investigue por partes. Não mexa em tudo ao mesmo tempo.

Exemplo prático
Verifique página, mobile, atualização, plugin e cache.
Aula 4

Criando seu próprio processo de diagnóstico

Explicação simples

Ter processo evita pânico e ajuda a resolver com mais clareza.

Exemplo prático
Qual é o problema? Onde acontece? Quando começou? O que mudou?
← Módulo anteriorPróximo módulo →
Módulo 15Risco Médio
🚀

Projeto Final e Revisão Geral

Aqui você costura tudo. HTML, CSS, JavaScript, JSON, APIs, Webhooks, Shortcodes e CPTs viram repertório técnico.

Aula 1

Revisando HTML, CSS, lógica e integrações

Explicação simples

HTML estrutura, CSS visual, JavaScript comportamento, JSON dados, API conecta e Webhook avisa.

Exemplo prático
Uma página com estrutura, estilo, interação e integração.
Aula 2

Montando um mini projeto prático

Explicação simples

O mini projeto junta título, texto, card, botão e pequena interação JavaScript.

Exemplo prático
Página simples de serviço com card de benefício e botão de contato.
Aula 3

Checklist de segurança antes de aplicar código

Explicação simples

Antes de aplicar código, confirme staging, backup, local de aplicação e testes.

Exemplo prático
Backup + staging + desktop + mobile.
Aula 4

Próximos passos para continuar evoluindo

Explicação simples

A evolução vem de prática, diário técnico, site de testes e pequenos estudos contínuos.

Exemplo prático
Praticar HTML/CSS semanalmente e salvar códigos úteis.
← Módulo anterior
Bônus Técnico

Mini Landing Page em Código

Monte uma página simples, fofa e estratégica usando HTML, CSS e um toque de JavaScript, com a mesma identidade kawaii tech do curso.

O que você vai criar

  • Uma hero section
  • Um card de produto
  • Um botão de compra
  • Uma área de benefícios
  • Uma interação simples

O que você pratica

  • HTML semântico
  • CSS com classes
  • Botões e cards
  • Responsividade
  • JavaScript básico

Onde testar

  • Página de testes
  • Arquivo local
  • Widget HTML do Elementor
  • Nunca em cliente sem backup
HTML da Mini Landing Page
<section class="kawaii-mini-landing">\n  <div class="kawaii-mini-content">\n    <span class="kawaii-badge">Produto digital cute tech</span>\n    <h1>Código Sem Medo para Criadoras WordPress</h1>\n    <p>Aprenda HTML, CSS e integrações no WordPress sem linguagem difícil.</p>\n    <a href="#comprar" class="kawaii-button">Quero começar agora</a>\n  </div>\n</section>
CSS da Mini Landing Page
.kawaii-mini-landing {\n  background: linear-gradient(135deg,#FFF8F3,#FFF0F6,#F3ECFF);\n  border-radius: 32px;\n  padding: 56px;\n}\n.kawaii-button {\n  background:#FF8FB7;\n  color:#fff;\n  border-radius:999px;\n  padding:15px 24px;\n}
JavaScript da Mini Landing Page
document.addEventListener("DOMContentLoaded", function () {\n  console.log("Mini landing kawaii pronta ✦");\n});
Projeto teste kawaii

Agora é sua vez de praticar com o tema do curso.

Use esta página como modelo, duplique módulos, edite aulas e crie suas próprias mini landing pages no WordPress com Elementor.

Voltar ao início