2.1 Imagens otimizadas: formatos modernos (WebP/AVIF), alt text e tag picture com srcset - Lucas Quadros

Início
Sobre
Cursos
Aulas Particulares
Conteúdos
Contato

Painel do Aluno

HTML e CSS 2.1 Imagens otimizadas: formatos modernos (WebP/AVIF), alt text e tag picture com srcset

HTML e CSS

0% Completed

Módulo 1: Fundamentos da Web & HTML5 Semântico

1.1 Como a web funciona: Navegadores, Servidores, DNS e Protocolo HTTP

1.2 Estrutura básica do HTML5, Doctype, head, meta tags e charset

1.3 Tags Semânticas estruturais: header, nav, main, article, section, aside e footer

1.4 Trabalhando com textos, cabeçalhos hierárquicos (H1-H6), listas, links e caminhos relativos

Módulo 2: Mídias, Formulários & Acessibilidade Básica

2.1 Imagens otimizadas: formatos modernos (WebP/AVIF), alt text e tag picture com srcset

2.2 Áudio, vídeo nativo e incorporação de conteúdos externos com iframe

2.3 Formulários modernos: inputs, labels, selects, checkboxes, buttons e tipos semânticos

2.4 Validações nativas do HTML5: required, min/max, pattern e feedback de acessibilidade

Módulo 3: Introdução ao CSS3, Sintaxe & Box Model

3.1 Introdução ao CSS3: Sintaxe, formas de inclusão (Inline, Internal, External) e resets

3.2 Seletores básicos, combinadores, pseudo-classes e pseudo-elementos essenciais

3.3 O modelo de caixas (Box Model): Margin, Border, Padding, Content e box-sizing: border-box

3.4 Especificidade, Cascata, Herança e como evitar conflitos sem usar !important

Módulo 4: Tipografia, Cores & Efeitos Visuais Modernos

4.1 Tipografia moderna na web: Google Fonts, font-display, unidades relativas (rem, em, ch) e clamp()

4.2 Sistemas de cores: RGB, HSL, Hexadecimal e variáveis de opacidade (rgba / hsla)

4.3 Gradientes lineares e radiais, box-shadow elegante e text-shadow

4.4 Efeitos visuais modernos: backdrop-filter (Glassmorphism), border-radius e clipping paths

Módulo 5: Flexbox do Zero ao Avançado

5.1 Conceito do Flexbox: Containers, Itens, Main Axis e Cross Axis

5.2 Alinhamentos essenciais: justify-content, align-items, align-content e gap

5.3 Propriedades dos itens: flex-grow, flex-shrink, flex-basis e o atalho flex

5.4 Construção prática: Barra de navegação responsiva e cards alinhados perfeitamente

Módulo 6: CSS Grid Layout & Sistemas Bidimensionais

6.1 Introdução ao CSS Grid: grid-template-columns, grid-template-rows e a unidade fr

6.2 Responsividade automática com auto-fit, auto-fill, minmax() e repeat() sem media queries

6.3 Posicionamento avançado e áreas nomeadas com grid-template-areas

6.4 Construção prática: Galeria de produtos e dashboard com CSS Grid de alto padrão

Módulo 7: Design Responsivo, Mobile-First & Media Queries

7.1 Conceito Mobile-First e a Viewport Meta Tag

7.2 Breakpoints estratégicos e escrita de Media Queries limpas (@media screen)

7.3 Menus responsivos (Hamburguer Menu em CSS puro) e navegação adaptável

7.4 Tratamento de imagens, vídeos e tabelas responsivas em dispositivos móveis

Módulo 8: Variáveis CSS, Animações & Projeto Final

8.1 CSS Custom Properties (Variáveis CSS): Estruturação de tokens de design e Dark Mode nativo

8.2 Transições suaves (transition) e animações com @keyframes e funções de timing cúbicas

8.3 Otimização de performance: CSS Crítico, redução de reflows/repaints e PageSpeed 98+

8.4 [Projeto Integrador] Landing Page Completa responsiva, animada e publicação online

Avisos e Novidades Informações do Curso

Conteúdo prático passo a passo da aula 2.1 Imagens otimizadas: formatos modernos (WebP/AVIF), alt text e tag picture com srcset com exercícios e código fonte disponível.

Anterior Próxima

Especialista em desenvolvimento web e e-commerce de alto volume com mais de 12 anos de experiência, capacitando desenvolvedores através de formações práticas em PHP, WordPress, WooCommerce, Laravel e Magento.

Formações

HTML e CSS
JavaScript
PHP
WordPress
Laravel
Magento

Contato Direto

+55 (51) 98129-1389
contato@lucasquadros.com
LinkedIn

© 2026 Lucas Quadros. Todos os direitos reservados. | Política de Privacidade

Aviso Legal: As marcas WordPress, WooCommerce, Magento, Adobe e Laravel são marcas registradas de seus respectivos proprietários. Este site oferece cursos e treinamentos técnicos independentes de capacitação profissional, sem vínculo institucional ou endosso direto das referidas marcas.

Fale comigo no WhatsApp