Bootstrap 4: Criando uma Landing Page Responsiva

Curso da Alura sobre utilização do Bootstrap 4.

Objetivo Final 🎯

Ver como instalar o Bootstrap 4 e usar os seus recursos em um site.

URL do curso -> Bootstrap 4: Criando uma Landing Page Responsiva

Links Úteis 🔗

• Guia sobre o Atributo data- - Página de guia sobre o atributo data- nas tags HTML.
• Tag !important - Site de explicação da tag !important.

Siglas 🗺

• CDN - Content Delivery Network - Rede de Distribuição de Conteúdo.

01 - Instalando o Bootstrap e Implementando a Navbar 🔖

• Como instalar o Bootstrap.
• Como o Bootstrap funciona utilizando classes para aplicar estilos pré-definidos.
• Pesquisar na documentação e descobrir se o Bootstrap tem a funcionalidade que precisamos (e de que forma usamos isso!).
• A ler o código do Bootstrap, interpretá-lo e fazer as modificações que precisamos.
• O funcionamento do Flexbox (e a versão Bootstrap, Flex), uma das ferramentas de alinhamento poderosas do CSS.

02 - Adicionando o Carrossel e Resolvendo Bugs 🔖

• Ler mais um pouco da documentação do Bootstrap e usar seu componente carousel.
• Ler o HTML e ir descobrindo o que fazem algumas partes do código do Bootstrap.
• Utilizar o CSS para complementar nosso trabalho quando o Bootstrap não cobre 100%.
• Trabalhar com elementos de tamanho fixo, como imagens; Formatar textos utilizando o Bootstrap.

03 - Títulos, Textos e Ferramentas de Espaçamento 🔖

• Formatar elementos de texto com o Bootstrap.
• Utilizar o Bootstrap para controlar larguras e alturas de margin e padding.

04 - Conhecendo o HTML Semântico e Inserindo Cards 🔖

• Utilizar o componente card do Bootstrap.
• Personalizar o componente quando necessário usando nossas próprias classes.
• Adotar algumas tags semânticas em nosso HTML.

05 - Alinhando Elementos com Bootstrap Grid 🔖

• Trabalhar mais com o componente card e personalizar as informações.
• Fazer mais alguns ajustes de imagens.
• Utilizar algumas ferramentas do Bootstrap Grid.

06 - Modais e Últimos Ajustes 🔖

• Identificar alguns tipos de modais na documentação do Bootstrap.
• Inserir modais em nosso código.
• Estilizar e adaptar os modais ao nosso projeto.
• Identificar onde podemos utilizar mais classes semânticas e fazer substituições.
• Fazer pequenos ajustes de leiaute com o CSS.
• Implementar um rodapé com elementos de texto simples.