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

Resumo do curso

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.

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.

Conteúdo relacionado

Cursos de HTML e CSS em Front-end

Leia nossos artigos de Front-end

Última atualização

10/12/2019

Já é aluno?

Comece o curso agora

12h

p/ conclusão

Atividades

235

Minutos de video

16481

Alunos nesse curso

9.1

Nota deste curso

Certificado de participação

Instrutores

Yuri Padilha
Linkedin
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.

Conteúdo Detalhado

Introdução
- Reconhecendo padrões em um layout
- Apresentando o Bootstrap
- Criando a página HTML
- Primeira imagem com classes bootstrap
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
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
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
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
Mostrando o endereço no rodapé
- Escrevendo o endereço físico e virtual da empresa
- Semântica nos br's
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
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
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

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

Cursos relacionados em HTML e CSS

Experiências de quem já estudou com a gente

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

Larissa Lourenço Nunes Benck

em 18/11/2020

Professor muito didático, explicando cada detalhe e o porquê de cada coisa. Parabéns.

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!

1269 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
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

1269 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
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

1269 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
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

1269 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
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

Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas

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

Resumo do curso

Público alvo

Conteúdo relacionado

Última atualização

Já é aluno?

Instrutores

Yuri Padilha

Conteúdo Detalhado

Introdução

Começando a implementar o site seguindo o layout

Mostrando os projetos da Empresa

Mostrando os depoimentos dos clientes com o carousel

Criando o formulário de contato colocando o vídeo institucional da empresa

Mostrando o endereço no rodapé

Navegando entre as seções com a navbar

Chamada em destaque no cabeçalho

Deixando o site responsivo em telas maiores

Cursos relacionados em HTML e CSS

Experiências de quem já estudou com a gente

mbamu

Larissa Lourenço Nunes Benck

MARIO SARAIVA DA SILVA

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

Premium

Premium Plus

Max

Cursos