Bootstrap5: crie uma landing page responsiva

Avançando no Bootstrap - Apresentação

Muito boas-vindas ao curso de Bootstrap, versão 5. Meu nome é Luan Alves e será um prazer enorme ter você me acompanhando nessa jornada de estudos.

Me autodescrevendo, eu sou um homem com cor de pele branca, cisgênero, com cor de cabelo e olhos castanho-escuros. Eu estou utilizando uma blusa na cor coral e atrás de mim tem uma luz de fundo na cor azul.

Como você vai aprender sobre Bootstrap na versão 5? Vai ser construindo do zero esse projeto bem legal que estou mostrando para você agora.

É o projeto Meteora, um e-commerce, uma loja de roupas e acessórios online. O legal desse projeto é que vamos construí-lo do zero e vai ser uma grande oportunidade para entendermos a documentação do Bootstrap a fundo e inserir essas informações no nosso projeto.

Esse projeto é responsivo, ou seja, se adapta a diferentes tamanhos de tela e nenhum elemento fica por cima do outro. O legal de você aprender Bootstrap é que conseguimos fazer uma página dessas, que tem vários elementos, de forma bem prática e rápida.

Este curso possui um pré-requisito, que é conhecimento em HTML e CSS. Caso você não possua esse conhecimento, não tem problema, você pode ir na aba deste curso, na parte de pré-requisitos, e conferir quais cursos são ideais você fazer antes desse.

Estou muito animado para receber você neste treinamento e aguardo você no próximo vídeo para podermos aprender bastante.

Avançando no Bootstrap - O que é o Bootstrap?

Olá, tudo bem? Agora nesse início de curso, como vamos falar de Bootstrap, primeiro precisamos entender o que é o Bootstrap, quais problemas ele veio resolver e de onde ele surgiu.

O Bootstrap é um framework CSS, e framework em português significa “ferramenta”, então ele é uma ferramenta do CSS. Para explicar para você melhor, eu posso até fazer uma comparação com o mundo real.

Por exemplo, todo mundo gosta de pizza, e como fazemos uma pizza? Podemos pegar os ingredientes, fazer a massa, preparar, colocar no fogo e ter a pizza pronta manualmente, podemos fazer com as nossas próprias mãos.

Porém, poderíamos utilizar, por exemplo, uma máquina de fazer pizza. Com ela, poderíamos apenas apertar botões e essa máquina traria uma pizza pronta para nós. Então, podemos comparar uma máquina de pizza com o Bootstrap.

Da mesma forma que a máquina de pizza nos traz pizzas prontas, o Bootstrap traz estilos do CSS prontos. Quais benefícios esse framework do CSS traz para nós?

Ele traz padrões de design e nos ajuda a codar em menos tempo, porém, ele possui algumas limitações. Como ele traz padrões de design, ele não vai fazer qualquer tipo de layout, bem como a máquina de pizza, que não vai fazer qualquer pizza que quisermos, apenas as pizzas que ela foi programada para fazer.

Fazendo uma comparação do código com Bootstrap e sem Bootstrap, para entendermos como ele nos ajuda no dia a dia, por exemplo, no centro da tela, temos um botão com o fundo azul, escrito “Botão”, e, no lado direito, você pode analisar o código desse botão feito apenas com CSS.

Você pode conferir que tem muito código e que temos que fazer manualmente cada detalhe desse botão. Do lado direito, tem o código desse mesmo botão feito apenas com o Bootstrap.

Conseguimos criar esse botão com apenas uma linha de código e apenas com HTML, não precisamos nem utilizar o arquivo CSS para fazer esse botão utilizando o Bootstrap. Precisamos apenas das classes btn e btn-primary.

É assim que o Bootstrap funciona, nós conseguimos inserir classes no arquivo HTML e, assim, conseguimos criar estilos de páginas. Vamos entender mais a fundo como fazer isso no decorrer do curso.

Como o Bootstrap funciona, por baixo dos panos? Ele é feito de {less}, que é um compilador de código CSS, bem como o Sass. Basicamente, o Bootstrap é CSS puro.

Já expliquei para você bastante o que é o Bootstrap, como ele foi criado, então vamos agora colocar a mão na massa e aprender a utilizá-lo de fato. Aguardo você no próximo vídeo.

Avançando no Bootstrap - Integrando Bootstrap ao projeto

Para podermos integrar o Bootstrap no nosso projeto, temos três opções disponíveis: via download; via gerenciador de pacotes, que é pelo npm install, pelo terminal; e via CDN, que é apenas copiar os links e colocá-los no editor de código.

Vou utilizar a opção de incluir via CDN porque baixar os arquivos de Bootstrap, seja por download ou pelo npm install, deixa o projeto muito pesado. Então, o link via CDN é o ideal neste caso.

Para eu poder copiar esse link, eu encontro o título “Incluir via CDN” e, logo abaixo dele, tem o link para copiarmos. Vou clicar no ícone de prancheta, logo do lado direito, e preciso levar para o nosso projeto no VS Code.

Vou abrir o VS Code, que é o editor de código que estou utilizando e que recomendo você utilizar também para estarmos sempre com a nossa tela igual e não ter nenhum problema, nenhuma dúvida.

Agora vou clicar em “Open folder” e vamos desenvolver o projeto do zero. Venho na “Área de trabalho”, clico com o botão direito, “Novo > Pasta”. Vou criar uma pasta chamada “Meteora”, que é o nome do nosso projeto, vou abrir essa pasta e selecioná-la. Clico em “Selecionar pasta”.

Aqui, tenho essa pasta aberta no VS Code. O próximo passo é clicar com o botão direito no canto esquerdo da tela, logo abaixo de “Meteora”, clicar em “New file” e escrever “index.html”. Aqui, criamos o nosso arquivo HTML, precisamos criar agora primeiro a estrutura para escrevermos o projeto.

Vou escrever ! e utilizar o autocomplete do VS Code mesmo. Ele já trouxe a estrutura inicial para criarmos o nosso projeto. No <title>, na linha 7, já vou alterar para <title>Meteora</title>, e vou atualizar.

Embaixo do title, vou apertar “Enter”, vir para a linha 8 e colar o link que pegamos do site do Bootstrap com “Ctrl + V”. Agora temos um próximo passo a fazer.

Voltando no site do Bootstrap, logo abaixo do link que copiamos, também tem esse outro link, o script, que também preciso copiar e levar para o projeto. Vou colá-lo acima do fechamento da tag </body>.

Dou “Enter” para ficar mais bem distribuído e na linha 13 colo esse link. Por que ele é importante? Porque o Bootstrap também trabalha com o JavaScript para podermos criar alguns eventos na tela.

Por exemplo, vamos inserir carrosséis, então vai ter um movimento na tela. Todo movimento de tela precisa ser feito com JavaScript, então se esse link não estiver no meu projeto, os slides não vão se movimentar e a tela vai ficar estática.

Aqui, já aprendemos como fazer a integração do Bootstrap com o projeto e já criamos a estrutura inicial do projeto Meteora. Agora vamos explorar a documentação do Bootstrap e começar já no próximo vídeo.

Sobre o curso Bootstrap5: crie uma landing page responsiva

O curso Bootstrap5: crie uma landing page responsiva possui 94 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Avançando no Bootstrap
• Breakpoints e Grid no Bootstrap
• Flexbox e ícones no Bootstrap
• Inserindo estilos
• Acessibilidade com Bootstrap