Front-end

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

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

2766 9.1

9,1

é a nota desse curso

9.582

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.

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

Escolha o seu plano e vamos começar

  • Cursos
  • Certificado de participação
  • Todas as formações
  • Projeto avaliado pelos instrutores
  • Certificado de avaliação
  • Acesso à Alura Start
  • Acesso à Alura Língua
  • Como Funciona?
Premium
  • 614
12X
R$75

à vista R$900

Matricule-se
Premium Plus
  • 614
12X
R$100

à vista R$1.200

Matricule-se
Max
  • 614
12X
R$120

à vista R$1.440

Matricule-se
Acesso por 1 ano
Certificado Digital de conclusão
Estude 24h/dia onde e quando quiser
Novos cursos toda semana