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

Estudando este mês:

e mais 572 alunos(as)

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

27/06/2022

Já é aluno?

Comece o curso agora

12h

p/ conclusão

Atividades

235

Minutos de video

20725

Alunos nesse curso

9.1

Nota deste curso

Certificado de participação

Um pouco mais do conteúdo

Descubra se esse curso é pra você lendo as primeiras aulas de Bootstrap: criação de uma single-page responsiva

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

nossos alunos e alunas

Experiências de quem já mergulhou com a gente.

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

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

Larissa Lourenço Nunes Benck

Achei o projeto do curso bem interessante, faltou a parte de submeter o formulário, mas creio que não fosse o foco do curso.

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

marcelo.dias

Primeiro video da ALURA que eu consigo assitir pelo celular sem problemas. Ótima ideia dar o zoom no código, ficou muito bom

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

Fellipe Santos da Conceição

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

Acesso a TODOS os cursos da plataforma
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X

R$85

à vista R$1.020

Matricule-se

Acesso a TODOS os cursos da plataforma
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Alura Challenges
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Alura Cases
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Certificado
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Alura Língua (incluindo curso Inglês para Devs)
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

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

Estudando este mês:

Resumo do curso

Público alvo

Conteúdo relacionado

Última atualização

Já é aluno?

Um pouco mais do conteúdo

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

nossos alunos e alunas

Experiências de quem já mergulhou com a gente.

Larissa Lourenço Nunes Benck

marcelo.dias

Fellipe Santos da Conceição

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

Plus

Pro

Cursos