Curso de Bootstrap: criação de uma single-page responsiva

Faça esse curso de HTML e CSS e:

• Faça um site completo utilizando o framework Bootstrap 3.
• Mantenha seu código limpo e bem feito seguindo as boas práticas do desenvolvimento HTML5.
• Produza um código HTML e CSS semântico e de qualidade para que leitores de tela e robos de busca consigam ler bem o seu site.
• Usa o método de desenvolvimento front-end mobile first para que suas aplicações sejam sempre responsivas, simples e funcionais independente do dispositivo.
• Aprenda a usar os thumbnails, panels, jumbotron, carosel e navbar do bootstrap.
• Veja como é feita uma página single page application.
• Utilize a documentação do bootstrap de maneira eficaz e eficiente.

Conteúdo Detalhado

1. Introdução

   • Reconhecendo padrões em um layout
   • Apresentando o Bootstrap
   • Criando a página HTML
   • Primeira imagem com classes bootstrap

2. Começando a implementar o site seguindo o layout

   • Container para alinhar e definir o tamanho do corpo do site
   • Collapse para esconder texto grande e só aparecer quando usuário clica
   • Componente panel para estilizar a parte de sobre nós do site

3. Mostrando os projetos da Empresa

   • Entendendo a documentação do bootstrap
   • Tag semântica figure do HTML 5 para melhorar o nosso HTML
   • Componente Jumbotron do bootstrap para destacar uma parte do nosso site

4. Mostrando os depoimentos dos clientes com o carousel

   • Componente JS Carousel do bootstrap para mostrar os depoimentos dos clientes e alternar entre eles
   • Deixando o Carousel mais semântico com a tag figure e figcaption
   • Incluindo mais itens no Carousel

5. Criando o formulário de contato colocando o vídeo institucional da empresa

   • Como o bootstrap lida com iframe
   • Formulários com o estilo do bootstrap
   • Os diversos tipos de botões do bootstrap

6. Mostrando o endereço no rodapé

   • Escrevendo o endereço físico e virtual da empresa
   • Semântica nos br's

7. Navegando entre as seções com a navbar

   • Criando um menu de navegação do site com navbar
   • Esconder o menu de navegação para mobile e só aparecer quando clicamos
   • Utilizar o famoso ícone 'hamburguer' dos mobiles para aparecer o menu de navegação

8. Chamada em destaque no cabeçalho

   • Colocando uma imagem chamativa no fundo do cabeçalho
   • Criando uma chamada promocional com fundo transparente
   • Boas práticas e propriedades de posicionamento no CSS
   • Escrever código com JQuery para dar efeitos a componentes Bootstrap

9. Deixando o site responsivo em telas maiores

   • Sistema de Grid do Bootstrap para definir quanto itens por linha aparecem em cada dispositivo
   • Tamanhos de dispositivos diferentes que o bootstrap aborda
   • Media queries para escrevermos nosso código de site responsivo