Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

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

Nota

9.1

Nível

Intermediário

Última atualização

16/10/2017

Carga horária

12h

Iniciar Curso
Concluir

Pré-requisitos:

Carreiras com esse curso:

Instrutor

  • instructor Yuri Padilha

    Formado em Sistemas de Informação pela USP, atualmente trabalha como desenvolvedor Full Stack e instrutor na Caelum e Alura. Seu emoji preferido é a Pusheen (gato gordo do amor).

Veja as últimas novidades do curso Veja as perguntas frequentes Fórum do curso

Conteúdo detalhado:

  1. Introdução

    1. Reconhecendo padrões em um layout
    2. Apresentando o Bootstrap
    3. Criando a página HTML
    4. Primeira imagem com classes bootstrap
  2. Começando a implementar o site seguindo o layout

    1. Container para alinhar e definir o tamanho do corpo do site
    2. Collapse para esconder texto grande e só aparecer quando usuário clica
    3. Componente panel para estilizar a parte de sobre nós do site
  3. Mostrando os projetos da Empresa

    1. Entendendo a documentação do bootstrap
    2. Tag semântica figure do HTML 5 para melhorar o nosso HTML
    3. Componente Jumbotron do bootstrap para destacar uma parte do nosso site
  4. Mostrando os depoimentos dos clientes com o carousel

    1. Componente JS Carousel do bootstrap para mostrar os depoimentos dos clientes e alternar entre eles
    2. Deixando o Carousel mais semântico com a tag figure e figcaption
    3. Incluindo mais itens no Carousel
  5. Criando o formulário de contato colocando o vídeo institucional da empresa

    1. Como o bootstrap lida com iframe
    2. Formulários com o estilo do bootstrap
    3. Os diversos tipos de botões do bootstrap
  1. Mostrando o endereço no rodapé

    1. Escrevendo o endereço físico e virtual da empresa
    2. Semântica nos br's
  2. Navegando entre as seções com a navbar

    1. Criando um menu de navegação do site com navbar
    2. Esconder o menu de navegação para mobile e só aparecer quando clicamos
    3. Utilizar o famoso ícone 'hamburguer' dos mobiles para aparecer o menu de navegação
  3. Chamada em destaque no cabeçalho

    1. Colocando uma imagem chamativa no fundo do cabeçalho
    2. Criando uma chamada promocional com fundo transparente
    3. Boas práticas e propriedades de posicionamento no CSS
    4. Escrever código com JQuery para dar efeitos a componentes Bootstrap
  4. Deixando o site responsivo em telas maiores

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