curso de

Bootstrap 4: Criando uma landing page responsiva

Estudando este mês:

e mais 620 alunos(as)

Resumo do curso

  • Mantenha seu código limpo e bem feito seguindo as boas práticas do desenvolvimento HTML5, agilizando seu desenvolvimento.
  • Utilize os componentes prontos de navbar, carrossel, cards e modais para criar sites responsivos automaticamente.
  • Use o método de desenvolvimento front-end para que suas aplicações sejam sempre responsivas, simples e funcionais independente do dispositivo.
  • Produza um código HTML e CSS semântico e de qualidade para que leitores de tela e robôs de busca consigam ler bem o seu site.
  • Padronize os componentes de seu site ou aplicação web.

Público alvo

Pessoas que querem entender o framework Bootstrap e melhorar sua produtividade no desenvolvimento front-end.

Conteúdo relacionado

Cursos de HTML e CSS em Front-end

Leia nossos artigos de Front-end

Última atualização

09/12/2019

Já é aluno?

Comece o curso agora

8h

p/ conclusão

58

Atividades

170

Minutos de video

6789

Alunos nesse curso

9.3

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 4: Criando uma landing page responsiva

Formação com esse curso

Instrutores

  • Desenvolvedora JavaScript com background multidisciplinar, sempre aprendendo para ensinar e vice-versa. Atuo em diversas iniciativas de inclusão em tecnologia desde 2018 e acredito no potencial do conhecimento como agente de mudança pessoal e social. Atualmente trabalho como instrutora na Escola de Programação da Alura e dou mentoria técnica a iniciantes na área de desenvolvimento web frontend e backend.

Conteúdo Detalhado

  1. Instalando o Bootstrap e implementando a navbar

    • Instalando o Bootstrap
    • Métodos para instalar
    • O que são as CDNs
    • Adicionando a navbar
    • Personalizando a navbar
    • Navbar - entendendo o HTML
    • Utilizando o Flexbox com Bootstrap
    • Flex, pais e filhos
  2. Adicionando carrossel e resolvendo bugs

    • Implementando o carrossel
    • Quando o resultado não é o que esperamos
    • Dando uma mãozinha com o CSS
    • Interpretando as classes do carrossel
    • Sobre classes e ids
    • Controlando intervalos de tempo
    • Trabalhando com fontes alternativas
    • Modificando o tamanho das divs
    • Formatando texto
  3. Títulos, textos e ferramentas de espaçamento

    • Formatando o título e subtítulo
    • Criando classes para formatação de texto
    • Modificando margens e padding
    • Definindo margens e padding
    • Margens e padding
  4. Conhecendo o HTML semântico e inserindo cards

    • Adicionando cards
    • Personalizando as cores dos cards
    • Onde adicionar estilos?
    • Mais boas práticas de CSS
    • Uma palavrinha sobre HTML semântico
    • Adicionando tags semânticas ao HTML
    • Tornando o HTML semântico
  5. Alinhando elementos com Bootstrap Grid

    • Preenchendo os cards
    • Ajustando das imagens nos cards
    • Trabalhando com o Bootstrap Grid
    • Primeiros passos com Grid
    • Sobre breakpoints de tela
    • Trabalhando com as colunas do grid
    • Montando nossos grids
    • Adicionando cor ao plano de fundo
  6. Modais e últimos ajustes

    • Adicionando modal ao site
    • Estilizando o modal
    • Adicionando tags semânticas ao modal
    • Atributo `data-` no modal
    • Implementando o rodapé

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

nossos alunos e alunas

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

Meu segundo curso concluido pela Alura e outro instrutor que deixou tudo bem claro para mim. Um dos melhores cursos que já fiz em minha vida.

Bootstrap 4: Criando uma landing page responsiva

Paulo da Silva

Faltou os arquivos do projeto para acompanhar as aulas. Porém, assistindo as aulas foi possível desenvolver naturalmente e gradualmente o código.

Bootstrap 4: Criando uma landing page responsiva

Nickolas Pereira Muniz da Silva

Gostei bastante do estilo handson do módulo, mas tenho algumas dúvidas com relação às aplicações do bootstrap para os projetos. Acho que o sistema de grids é algo válido, mas será que não seria melhor apenas utilizar algumas das funções e desenvolver um CSS mais robusto para dar conta das especificidades dos projetos, layouts e etc? Minha dúvida é com relação à produtividade. É uma ótima ferramenta quando se precisa de um mockup ou um site rápido, mas para projetos mais robustos como usar?

Bootstrap 4: Criando uma landing page responsiva

BRUNO GAZOLA DE PAOLI

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

Plus

  • 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

Pro

  • 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