Creating a Website with Bootstrap Studio (Tutorial)

Este tutorial em vídeo do canal Bootstrap Studio demonstra o processo completo de criação de um site responsivo e profissional do zero, utilizando o software Bootstrap Studio [[00:00]]. O projeto consiste na construção de um site para uma confeitaria fictícia, com base em materiais fornecidos por um cliente (logotipo, ilustrações e um documento de texto com o conteúdo) [[00:19]].

Abaixo estão os principais passos e etapas abordados no vídeo:

Configuração Inicial e Importação de Ativos:

Criaçã

o de um novo documento em branco no Bootstrap Studio [[00:13]].

Importação de imagens, logotipos e ilustrações através de simples operações de arrastar e soltar [[00:37]].

Construção da Barra de Navegação (Navbar):

Inserção de um componente de barra de navegação responsiva do Bootstrap [[00:52]].

Edição do nome da marca e alinhamento dos links de navegação para a direita [[01:18]].

Adição do logotipo da empresa, redimensionamento com CSS utilizando a propriedade max-height e aplicação de core

s personalizadas nos ícones através de um conta-gotas [[15:30]].

Ajuste da barra de navegação para ficar fixa no topo e remoção do formato fluido para alinhar melhor com o restante do design [[14:43]].

Criação da Seção Promocional (Jumbotron):

Criação de um container com um elemento Jumbotron para destacar a oferta do dia da confeitaria [[02:00]].

Aplicação de estilos personalizados em CSS, incluindo imagem de fundo, centralização, margens automáticas (margin: auto), e transparência com cores

RGBA [[02:29]].

Utilização de media queries para garantir que o layout se adapte perfeitamente a diferentes tamanhos de tela (dispositivos móveis e desktops) [[05:08]].

Personalização do Tema e Tipografia:

Substituição do tema padrão do Bootstrap por uma alternativa mais elegante, o tema "Readable" [[06:59]].

Substituição da pilha de fontes padrão por uma fonte sem serifa para o corpo do texto do site [[07:19]].

Seção de Recursos e Ícones:

Criação de uma seção em formato de grade (grid) com

três colunas para apresentar os principais destaques ou produtos [[10:11]].

Inclusão de ícones vetoriais do Font Awesome redimensionados através de propriedades de tamanho de fonte [[11:37]].

Adição de um fundo cinza claro na seção utilizando um elemento embrulhado (wrapper) para abranger toda a largura da tela [[13:28]].

Galeria de Fotos com Lightbox:

Criação de uma seção de galeria utilizando miniaturas (thumbnails) organizadas em uma grade responsiva [[17:49]].

Configuração dos links para

abrirem as imagens em novas abas [[20:11]].

Importação de uma biblioteca externa de lightbox via CDN (folhas de estilo CSS e scripts JavaScript) para exibir as fotos em um álbum interativo em tela cheia [[24:09]].

Configuração de atributos de dados específicos para agrupar as imagens [[25:06]].

Rodapé (Footer):

Instalação rápida de um componente de rodapé pronto a partir da biblioteca online integrada do Bootstrap Studio [[21:14]].

Ajuste do espaçamento e alinhamento do rodapé para que corres

ponda ao restante do conteúdo da página [[23:09]].

Exportação do Projeto:

Exportação do projeto completo para uma pasta local, gerando um arquivo estruturado index.html limpo e uma pasta de ativos contendo o framework Bootstrap, imagens, folhas de estilo e scripts organizados de acordo com as melhores práticas de front-end [[25:47]].

Confira o vídeo completo no YouTube: https://www.youtube.com/watch?v=10SwsoYNkVc

Creating a Website with Bootstrap Studio (Tutorial)

Bootstrap Studio · 1.4M view