Curso de Design Responsivo para Web: Domínio de CSS3 Flexbox, Media Queries e CSS Grid

Sobre o Curso

Neste curso abrangente, você irá dominar a construção de websites responsivos utilizando CSS3 Flexbox, CSS Grid e Media Queries. Além disso, você aprenderá a utilizar o Git e o Github de forma eficaz para controle de versão e colaboração.

Visão Geral do Curso

Ao longo do curso, você irá explorar diversos conceitos relacionados ao flexbox e às media queries. Os tópicos abordados incluem:

1.1- Instalando o VS Code e a Extensão do Servidor

1.2- Introdução ao Flexbox

1.3- Configurando os arquivos index.html e style.css

1.4- Redefinindo margem, preenchimento e box-sizing no operador universal

1.5- Estilizando as Caixas

1.6- Aplicando display flex no elemento pai

1.7- Direção do Flex: linha, linha reversa, coluna, coluna reversa

1.8- Crescimento e encolhimento do Flex

2.1- Justify Content: Início do Flex

2.2- Justify Content: Fim do Flex

2.3- Justify Content: Centralizado

2.4- Justify Content: Espaço ao Redor

2.5- Justify Content: Espaço Entre

3.1- Por que você não deve usar a propriedade Float

3.2- Align Item: Fim do Flex

3.3- Align Item: Início do Flex

3.4- Align Item: Centralizado

3.5- Flex Basis igual à Largura no Item Flex

4.1- Responsividade com Media Query

4.2- Criação de Layout Flex Wrap

4.3- Estilizando o Layout Flex

4.4- Tornando a Tela Responsiva com Flex Wrap

4.5- Melhorando a responsividade

1.1- O que é Responsividade

1.2- Exemplo de um site não responsivo

1.3- Criando a Estrutura HTML para um site não responsivo

1.4- Estilizando a página não responsiva

2.1- Diferentes pontos de interrupção de dispositivos

2.2- Tornando Responsivo em dispositivos de até 768px

2.3- Tornando Responsivo para largura de dispositivo de até 468px

2.4- Tornando Responsivo para largura de dispositivo acima de 1024px

2.5- Tornando Responsivo entre 769px e 1023px

Criando uma conta no Github

Instalando o Git bash

Criando um token do Github e conectando localmente

Utilizando comandos do Git para fazer commit e push do nosso código local

Código-fonte completo fornecido

O que Você Aprenderá

Ao se inscrever neste curso, você adquirirá os seguintes conhecimentos e habilidades: - Compreensão dos princípios de design e desenvolvimento web responsivo - Proficiência na utilização de conceitos de Flexbox para design de layout web - Domínio na implementação de Media Queries para design responsivo - Competência na utilização do CSS Grid para design web responsivo - Proficiência em HTML e CSS3 - Noções básicas de Git e Github para controle de versão e colaboração - Utilização do editor Visual Studio Code e extensões relacionadas para desenvolvimento web