Front-end

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

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

9,0

é a nota desse curso

3.511

alunos neste curso

Faça esse curso 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 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.
  • 12h para conclusão
  • 74 exercícios
  • 245 minutos de videos

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

12x R$25

(à vista R$300)

Matricule-se
  • 1
    Curso
  • 74
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra

Premium

12x R$75

(à vista R$900)

Matricule-se
  • 337
    Cursos
  • 19.435
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra

Premium Plus

12x R$100

(à vista R$1.200)

Matricule-se
  • 337
    Cursos
  • 19.435
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
Acesso por 1 ano
Certificado digital de conclusão
Estude 24h/dia onde e quando quiser
Novos cursos toda semana

Carreiras com esse curso

Veja a 1ª aula

Público alvo

Pessoa que querem entender o framework Bootstrap3 do twitter para melhorar na produtividade no desenvolvimento front-end. O curso é voltado para pessoas que já tem boas noções das tecnologias do front-end tais como HTML5, CSS3 e Javascript.

Nível de Dificuldade

Intermediário

Instrutores

  • 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).

Já é aluno?

Começar o Curso

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

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

12x R$25

(à vista R$300)

Matricule-se
  • 1
    Curso
  • 74
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra

Premium

12x R$75

(à vista R$900)

Matricule-se
  • 337
    Cursos
  • 19.435
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra

Premium Plus

12x R$100

(à vista R$1.200)

Matricule-se
  • 337
    Cursos
  • 19.435
    Exercícios
  • Estude por 1 ano
  • 3 ebooks da Casa do Código
  • Curso de inglês no Galandra
Acesso por 1 ano
Certificado digital de conclusão
Estude 24h/dia onde e quando quiser
Novos cursos toda semana