Destino Dev

Cursos

CSS Intermediário: Layout, Animações e Design Responsivo

Código do curso: github.com/johnpires/css-intermediario-layout-animacoes-design-responsivo

Neste curso intermediário de CSS, você vai além dos fundamentos e mergulha nas técnicas modernas de layout e design que os profissionais usam no dia a dia. Aprenda a dominar Flexbox e CSS Grid para criar layouts complexos e responsivos com facilidade, além de explorar o poder das animações e transições para dar vida às suas interfaces.

Você vai aprender a construir designs responsivos profissionais usando media queries avançadas, unidades relativas e a abordagem mobile-first. Também cobriremos variáveis CSS, pseudo-elementos, seletores avançados e técnicas de performance para otimizar suas folhas de estilo.

Ao final do curso, você terá as habilidades necessárias para criar layouts modernos e animações sofisticadas, além de um projeto completo de portfólio responsivo para demonstrar suas competências.

Conteúdo do curso

Módulo 1: Flexbox Avançado

Domine todas as propriedades do Flexbox para criar layouts flexíveis e complexos.

  1. Revisando o Flexbox: Propriedades do Container (2 min)
  2. Propriedades dos Itens Flex: flex-grow, shrink e basis (2 min)
  3. align-content e gap: Controlando Múltiplas Linhas (2 min)
  4. Layouts Complexos com Flexbox Aninhado (2 min)
  5. Padrões Práticos e Casos de Uso do Flexbox (2 min)

Módulo 2: CSS Grid

Construa layouts de duas dimensões com total controle usando CSS Grid.

  1. Introdução ao CSS Grid: Conceitos Fundamentais (8 min)
  2. grid-column e grid-row: Posicionando Itens (8 min)
  3. grid-template-areas: Layouts Nomeados (8 min)
  4. auto-fill, auto-fit e minmax: Grids Automáticos (8 min)
  5. place-items, place-content e Alinhamento no Grid (2 min)
  6. CSS Grid Avançado: Subgrid e Casos Complexos (3 min)

Módulo 3: Design Responsivo com Media Queries

Crie interfaces que se adaptam perfeitamente a qualquer tamanho de tela.

  1. Fundamentos do Design Responsivo e Mobile-First (8 min)
  2. Media Queries Avançadas: sintaxe moderna e operadores (8 min)
  3. Imagens e Mídia Responsivas (8 min)
  4. Tipografia e Espaçamento Responsivos (8 min)
  5. Layout Responsivo Completo: Sistema de Grid CSS (8 min)

Módulo 4: Animações e Transições CSS

Adicione movimento e vida às suas interfaces com animações CSS puras.

  1. Transições CSS: Suavizando Mudanças de Estado (8 min)
  2. Animações CSS com @keyframes (8 min)
  3. Transform: Rotação, Escala e Translação (2 min)
  4. Variáveis CSS e Temas com Custom Properties (8 min)
  5. Pseudo-elementos e Pseudo-classes Avançados (2 min)

Módulo 5: Projeto Final: Portfólio Responsivo

Construa um portfólio profissional completo aplicando todos os conceitos aprendidos.

  1. Planejamento do Projeto: Portfólio Profissional (8 min)
  2. Header, Navbar e Hero Section (8 min)
  3. Grid de Projetos com Hover Effects (8 min)
  4. Skills, Formulário e Responsividade (8 min)
  5. JavaScript do Portfolio e Deploy no GitHub Pages (8 min)