Curso de HTML5 e CSS3

Aula 1 • Introdução aos Papéis do HTML e CSS

Diferencia estrutura (HTML), apresentação (CSS) e comportamento (JavaScript) como preocupações separadas. Define expectativas para o arco completo do curso.

Aula 2 • Como a Web Funciona

Aborda ciclos de requisição-resposta HTTP, resolução de DNS e pipelines de renderização do navegador. Fundamenta todo o trabalho subsequente de HTML/CSS no comportamento real do navegador.

Aula 3 • Configurando Seu Ambiente de Desenvolvimento

Instala e configura um editor de código, ferramentas de desenvolvedor do navegador e um servidor de arquivos local. Garante que cada aluno tenha um ambiente de trabalho consistente e produtivo.

Aula 1 • Regras de Sintaxe e Anatomia do HTML5

Explica tags, atributos, regras de aninhamento e a declaração DOCTYPE. A sintaxe correta evita problemas de renderização no modo quirks do navegador.

Aula 2 • Elementos de Conteúdo de Texto

Ensina títulos, parágrafos, listas, blockquotes e elementos de texto inline. Os alunos estruturam conteúdo corporal legível e semanticamente significativo.

Aula 3 • Tabelas e Apresentação de Dados

Constrói tabelas de dados acessíveis usando os elementos thead, tbody, th e td. Reforça o HTML semântico reservando tabelas estritamente para dados tabulares.

Aula 4 • Links e Imagens

Aborda tags de âncora, valores href, atributos target e o elemento img com texto alt. Esses elementos formam a espinha dorsal de páginas web navegáveis e visuais.

Aula 1 • Conceitos Básicos de Formulários HTML5

Aborda o elemento form, os atributos action e method, e os tipos de input principais. Formulários são o mecanismo primário para envio de dados do usuário.

Aula 2 • Select, Textarea e Fieldset

Constrói menus suspensos, áreas de texto multilinha e controles de formulário agrupados. Fieldset e legend melhoram a acessibilidade e o agrupamento lógico dos formulários.

Aula 3 • Elementos de Marco Semântico

Apresenta header, nav, main, article, section, aside e footer. A marcação semântica melhora a acessibilidade e a indexação em mecanismos de busca.

Aula 4 • Tipos e Atributos Avançados de Input

Explora tipos de input HTML5: date, range, color, tel e number. Tipos de input nativos reduzem a dependência de JavaScript e melhoram a experiência do usuário em dispositivos móveis.

Aula 1 • O Box Model do CSS

Define as áreas de conteúdo, padding, borda e margem e seu efeito no dimensionamento dos elementos. O domínio do box model é pré-requisito para todo trabalho de layout.

Aula 2 • Especificidade, Herança e Cascata

Explica como os navegadores resolvem regras conflitantes usando pontuação de especificidade e ordem de origem. Dominar a cascata evita substituições de estilo inesperadas.

Aula 3 • Sintaxe CSS e Métodos de Vinculação

Aborda conjuntos de regras, declarações, estilos inline, blocos de estilo internos e folhas de estilo externas. Folhas de estilo externas são estabelecidas como o padrão profissional.

Aula 4 • Cores, Unidades e Conceitos Básicos de Tipografia

Aborda valores de cor hex, RGB, HSL e unidades CSS absolutas vs. relativas. O uso consistente de unidades rem e em suporta tipografia escalável e acessível.

Aula 1 • Combinando Flexbox e Grid

Demonstra quando aninhar Flexbox dentro de células Grid e vice-versa. Os alunos constroem um layout de página completo usando ambos os sistemas de forma apropriada.

Aula 2 • Posicionamento Grid e Áreas Nomeadas

Ensina posicionamento baseado em linhas, sintaxe span e grid-template-areas para regiões nomeadas. Áreas nomeadas tornam layouts complexos legíveis e fáceis de manter.

Aula 3 • Alinhamento e Ordenação com Flexbox

Aborda as propriedades justify-content, align-items, align-self e order. Essas propriedades permitem controle preciso sobre a distribuição e o empilhamento de itens.

Aula 4 • Fundamentos do Flexbox

Apresenta o modelo de contêiner flex e itens flex, eixos e a propriedade flex-direction. O Flexbox resolve problemas de alinhamento unidimensional com elegância.

Aula 1 • Tipografia e Espaçamento Responsivos

Aplica clamp, unidades vw e escalas de espaçamento fluidas à tipografia e aos espaços do layout. O tipo fluido elimina a necessidade de múltiplas substituições de breakpoint.

Aula 2 • Sintaxe de Media Query e Breakpoints

Ensina a sintaxe @media, tipos de mídia e operadores lógicos para definir breakpoints. Breakpoints devem refletir as necessidades do conteúdo, não tamanhos de dispositivo específicos.

Aula 3 • Princípios de Design Responsivo

Aborda grids fluidos, imagens flexíveis e a meta tag viewport como os três pilares do RWD. Esses princípios guiam cada decisão de layout neste capítulo.

Aula 4 • Imagens e Mídia Responsivas

Usa srcset, sizes e o elemento picture para servir imagens com tamanho adequado. A entrega correta de imagens reduz o peso da página em redes móveis.

Aula 1 • Performance e Acessibilidade do Movimento

Identifica propriedades compostadas, evita animações que disparam layout e respeita prefers-reduced-motion. O design de movimento responsivo atende a todos os usuários.

Aula 2 • Transformações CSS

Aplica transformações translate, rotate, scale e skew em 2D e 3D. As transformações são aceleradas por GPU e não disparam refluxo de layout.

Aula 3 • Propriedades Personalizadas CSS

Define e consome variáveis CSS para tokens de cores, espaçamento e tipografia. Propriedades personalizadas permitem alterações temáticas em todo o site a partir de uma única declaração.

Aula 4 • Animações com Keyframes CSS

Constrói animações em várias etapas usando @keyframes, animation-name e propriedades de animation. As animações com keyframes são executadas independentemente da interação do usuário.

Aula 1 • Aplicando o Sistema de Design CSS

Implementa propriedades personalizadas, escala tipográfica e estilos de componentes em todas as páginas. Um sistema de design compartilhado garante consistência visual em todo o site.

Aula 2 • Planejamento do Projeto e Wireframing

Define metas do site, inventário de conteúdo e wireframes de baixa fidelidade antes de escrever código. O planejamento evita reescritas estruturais e aumento de escopo durante o desenvolvimento.

Aula 3 • Implementação de Layout Responsivo

Aplica layouts Grid e Flexbox com media queries mobile-first em todas as páginas. Cada página deve renderizar corretamente em viewports de 320px a 1440px.

Aula 4 • Auditoria de Acessibilidade e Acabamento Final

Executa verificações de acessibilidade automatizadas e manuais, corrige problemas de contraste e adiciona preferências de movimento. O site final atende aos padrões de contraste e navegação por teclado WCAG AA.