📂 Diretório de Ferramentas & Tutoriais

Curso de Tailwind CSS

🔥 Formação Oficial Front-End Web-ZoneWare

Curso de HTML & HTML5 Completo

Da Semântica Estrutural às APIs Nativas dos Navegadores Modernos

A internet inteira é renderizada em HTML. Não importa se você programa em React, Next.js, Vue, PHP ou Python: no final das contas, o navegador só lê e interpreta HTML. Dominar HTML5 moderno de verdade não é apenas decorar tags: é aprender a construir estruturas acessíveis (WCAG), altamente amigáveis para ranqueamento orgânico no Google (SEO Semântico), com máxima velocidade de carregamento e imunes a quebras visuais.

Sem falsas promessas de "ganhos fáceis": esta formação prática em 50 lições com código real e Playground IDE integrado constrói a base sólida que diferencia um desenvolvedor profissional de alguém que apenas copia código às cegas. Comece agora pela Lição 01 ou utilize a busca instantânea abaixo para consultar e testar sintaxes específicas.
📚 Total de 30 Lições Práticas
⏱️ 40 Horas de Formação
🎯 Nível Iniciante ao Avançado
⚡ Teste ao Vivo no Playground Web IDE
🆓 100% Gratuito e Aberto
🔍
Exibindo 30 de 30 lições oficiais ⚡ Filtro em tempo real client-side
Lição 01 Módulo 1

O que é Tailwind CSS & Utility-First

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 02 Módulo 1

Instalação & Setup (CDN, CLI, Vite)

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 03 Módulo 1

Anatomia do tailwind.config.js

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 04 Módulo 1

Compilador JIT & Valores Arbitrários

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 05 Módulo 1

Diretivas @tailwind, @layer e @apply

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 06 Módulo 2

Cores, Tons & Paletas Customizadas

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 07 Módulo 2

Tipografia: Fontes, Pesos & Tracking

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 08 Módulo 2

Espaçamento: Margin, Padding & Space

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 09 Módulo 2

Dimensões: Width, Height & Container

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 10 Módulo 2

Bordas, Rounded, Divide & Rings

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 11 Módulo 3

Flexbox: Direção, Alinhamento & Gap

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 12 Módulo 3

Flex Grow, Shrink & Ordem

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 13 Módulo 3

CSS Grid: Colunas, Linhas & Template

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 14 Módulo 3

Grid Gap, Col/Row Span & Auto-Flow

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 15 Módulo 3

Posicionamento, Absolute & Z-Index

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 16 Módulo 4

Sombras, Opacidade & Blur

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 17 Módulo 4

Filtros & Glassmorphism

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 18 Módulo 4

Estados: Hover, Focus & Disabled

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 19 Módulo 4

Seletores de Grupo (group e peer)

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 20 Módulo 4

Dark Mode: Class vs Media

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 21 Módulo 5

Responsividade Mobile-First

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 22 Módulo 5

Breakpoints Customizados

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 23 Módulo 5

Transições Suaves & Timings

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 24 Módulo 5

Transformações 2D/3D & Scale

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 25 Módulo 5

Animações Nativas & Keyframes

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 26 Módulo 6

Plugins Oficiais (@forms, @typography)

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 27 Módulo 6

Componentização & Design System

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 28 Módulo 6

Otimização para Produção & Purging

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 29 Módulo 6

Projeto 1: Landing Page Moderna

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Lição 30 Módulo 6

Projeto Final: Dashboard SaaS Bento Grid

Explore este tópico prático com explicações detalhadas, sintaxes destacadas e exemplos comentados para execução no Playground IDE.

Evolução Contínua

Próxima Etapa da Trilha: Curso de CSS & CSS3 Completo

Agora que você domina a estrutura e a semântica, dê vida visual e elegância às suas páginas aprendendo Box Model, Flexbox, CSS Grid e Design Responsivo.

Explorar Curso de CSS3 →
Foto de Web-Zoneware
✓ Verificado
🎓 Tutor & Coordenador da Web Academy

Web-Zoneware

Tutor Técnico & Desenvolvedor Full-Stack

Desenvolvedor web e instrutor focado na formação prática de novos programadores. Defensor ferrenho de código semântico, arquitetura limpa e acessibilidade W3C/WCAG, dedicando-se a construir cursos estruturados em metodologia passo a passo com execução ao vivo no Playground IDE.

Especialidades: HTML5 Semântico CSS3 & Flexbox/Grid JavaScript Moderno Acessibilidade WCAG 2.2 Didática Prática
Rolar para cima