20% de desconto

acaba em

0

dias

00

horas

00

minutos

00

segundos

Front-end

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

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

3140 8.6

8,6

é a nota desse curso

10.616

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 o primeiro vídeo

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

Black Friday Alura com 20% OFF
Escolha seu plano e vamos começar

acaba em

0

dias

00

horas

00

minutos

00

segundos

  • 668 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

  • Desconto 20%

Premium

Desconto 20%
  • 668 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$75 R$60
à vista R$900 R$720
Matricule-se

Premium Plus

Desconto 20%
  • 668 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$100 R$80
à vista R$1.200 R$960
Matricule-se

Max

Desconto 20%
  • 668 cursos

    Cursos de programação, design, UX, agilidade, transformação digital, mobile, front-end, infraestrutura e mais.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • Todas as formações

    Guias de estudo completo para você iniciar em uma nova área de tecnologia

  • Projeto avaliado pelos instrutores

    Projeto de conclusão das Formações com avaliação dos professores da Alura e certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Curso online de inglês técnico para aprimorar seu conhecimento

12X
R$120 R$96
à vista R$1.440 R$1.152
Matricule-se
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana