Semana da Programação Funcional

Confira nossas lives !

0

dias

00

horas

00

minutos

00

segundos

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

9,1

Nota desse curso

12.940

Alunos neste curso

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

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

Instrutores

  • Yuri é desenvolvedor full-stack, formado em Tecnologia de Informação pela USP. Como instrutor de cursos presenciais (Front-end, Java e PHP, Spring e MySQL) sumarizou mais de 1 000 horas de aulas ministradas.

Cursos relacionados

Cursos de HTML e CSS em Front-end

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

Já é aluno?

Começar o Curso

Experiências de quem já estudou com a gente

Luiz Gustavo Lopes

em 21/03/2019

Estou aprendendo muito e gostando bastante, de todas as plataformas de cursos online sem duvidas essa e a melhor de todas, vocês estão fazendo um ótimo trabalho continuem assim, e muito obrigado por essa experiencia e aprendizado incrível que eu pode obter

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

mbamu

em 21/03/2019

Yuri, Muito obrigado pelas aulas. Você foi ótimo com as explicações. Poderia gravar um curso ensinando a criação do layout usando grid do bootstrap. abraço!!!

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

MARIO SARAIVA DA SILVA

em 27/03/2019

Curso totalmente Didático,Áudio e Vídeo muito bom, Projeto exemplo excelente,plataforma muito boa também, conteúdo excelente como todo padrão dos cursos da Alura.Quanto ao Bootstrap biblioteca fantástica com bastante componentes e de fácil entendimento.O curso foi praticamente a implementação de vários cursos que fiz na Alura teve uma abrangência enorme no Html, um pouco de css, javascript e JQuery, fez um bom entendimento de ligação entre as linguagens e bibliotecas.Quanto ao Yuri Padilha, não lembro se este é o segundo ou terceiro curso que faço com o instrutor, possui um fantástico conhecimento do conteúdo não só deste curso, mas dos outros que fiz , excelente didática, se manteve fiel ao programa e não deixou nenhuma duvida quanto ao assunto.Só tenho a agradecer ao Instrutor e Alura.Abraço,Mario Silva

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

Aprenda HTML e CSS com esse e outros cursos, comece agora!

  • 896 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com 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

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 896 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com 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

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

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

Premium Plus

  • 896 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com 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

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

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

Max

  • 896 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com 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

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se

Procurando planos para empresas?

Clique aqui e veja os planos
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana