Dominando o CSS Grid 2023 - Com 3 Projetos Empolgantes
O Futuro dos Layouts: Levando o Flexbox para o Próximo Nível
O CSS Grid é um conceito inovador e subutilizado no CSS. No mundo de hoje, é crucial ter layouts que sejam fáceis de manter e adaptáveis a diferentes dimensões de dispositivos. O CSS Grid simplifica esse processo em comparação com outras estratégias existentes. Neste curso abrangente, iremos aprofundar na construção de vários layouts usando o CSS Grid.
O que você aprenderá
- Implementar layouts responsivos usando o CSS Grid
- Construir layouts regulares no CSS Grid
- Compreender todas as propriedades incluídas na Especificação do CSS Grid
- Criar sites comumente usados como o YouTube usando o CSS Grid
Durante este curso, abordaremos os seguintes tópicos:
1. Propriedades e Alinhamento do CSS Grid
Exploraremos todas as propriedades do CSS Grid, incluindo sua funcionalidade e possíveis armadilhas. Além disso, aprofundaremos nas técnicas de alinhamento para faixas e itens de grade tanto no nível do contêiner de grade quanto no nível do item de grade. Você também aprenderá como substituir as configurações de alinhamento.
2. Noções Básicas de Design Responsivo na Web
Discutiremos os fundamentos do design responsivo na web, incluindo consultas de mídia e sua integração com dispositivos móveis e tablets. Além disso, exploraremos como as áreas de grade simplificam o processo de design responsivo na web. Você também obterá uma compreensão das grades implícitas e explícitas e suas diferenças.
3. Algoritmo de Autocolocação e Animação
Vamos analisar em detalhes o algoritmo de autocolocação e sua funcionalidade. Além disso, exploraremos técnicas de animação que funcionam bem com o CSS Grid. Você também aprenderá como converter layouts do Flexbox para o CSS Grid e entender quando usar o Flexbox em vez do CSS Grid.
4. Resolvendo Problemas de Layout
Abordaremos vários problemas de layout e forneceremos soluções. Isso inclui layouts baseados em colunas, layouts básicos de barra lateral, alinhamento vertical de texto, alinhamento de modal, layouts de rodapé fixo e formatação de campos de formulário. Nosso objetivo é expandir esta lista no futuro.
5. Tópicos Avançados de Layout
Abordaremos tópicos avançados de layout, incluindo o layout Holygrail, o layout de Objetos de Mídia, a Galeria de Imagens Amigável para a Visualização, a Galeria de Imagens Responsiva, a Barra Lateral Animada, o layout de Calendário Mensal, o layout de Capa de Jornal, o layout de Clone Responsivo do Twitter e a Galeria de Filmes Responsiva.
6. Exemplos de Aplicações do Mundo Real
Para aprimorar sua experiência de aprendizado, incluímos três exemplos de aplicativos do mundo real:
- Uma interface de chat
- Um aplicativo responsivo de clone do Uber Eats
- Um aplicativo responsivo de clone do YouTube
Junte-se a nós neste curso empolgante e adquira as habilidades necessárias para implementar layouts responsivos usando o CSS Grid, construir layouts versáteis e dominar todas as propriedades dentro da Especificação do CSS Grid. Vamos criar sites incríveis juntos!
