Lição 01
Módulo 1
O que é Bootstrap 5 & O Fim do jQuery
Entenda a arquitetura moderna do Bootstrap 5, a remoção definitiva do jQuery em prol de JavaScript Vanilla ES6+, variáveis CSS e integração com SVG Icons.
🅱️ Formação Profissional Front-End com Bootstrap 5
Curso de Bootstrap 5 Profissional
Do Grid Flexbox & Componentes ao JavaScript Vanilla e Dark Mode
Desenvolva interfaces responsivas, modernas e acessíveis na velocidade da luz com o framework front-end mais consagrado da indústria. O Bootstrap 5 reinventou seu núcleo: eliminou completamente o jQuery em favor do JavaScript Vanilla ES6+, adotou CSS Custom Properties para dinamismo em tempo real, introduziu suporte nativo a Dark Mode e refinou seu poderoso sistema de Grid de 12 colunas com Flexbox.
Seja para prototipar MVPs velozes ou para criar painéis administrativos corporativos escaláveis, esta formação prática em 30 lições progressivas com código real e Playground IDE integrado capacita você a dominar desde utilitários fundamentais até componentes complexos como modais, offcanvas, toasts e formulários validados. Inicie pela Lição 01 ou consulte as sintaxes específicas na busca instantânea abaixo.
Seja para prototipar MVPs velozes ou para criar painéis administrativos corporativos escaláveis, esta formação prática em 30 lições progressivas com código real e Playground IDE integrado capacita você a dominar desde utilitários fundamentais até componentes complexos como modais, offcanvas, toasts e formulários validados. Inicie pela Lição 01 ou consulte as sintaxes específicas na busca instantânea abaixo.
Lição 02
Módulo 1
Instalação & Setup (CDN, NPM, Starter)
Configure o Bootstrap 5 via CDN jsDelivr com integridade SRI, instale via NPM/Vite e estruture o Starter Template HTML5 profissional.
Lição 03
Módulo 1
Containers, Fluidos & Breakpoints
Domine os 6 breakpoints oficiais e os containers responsivos .container, .container-fluid e variações responsivas.
Lição 04
Módulo 1
Sistema de Grid de 12 Colunas & Flex
Aprenda a tríade essencial .container, .row e .col com Flexbox, colunas proporcionais, offsets e quebras automáticas.
Lição 05
Módulo 1
Gutters e Espaçamentos de Grade (g, gx, gy)
Ajuste os espaçamentos horizontais e verticais da grade com utilitários .g-*, .gx-* e .gy-* sem quebrar o alinhamento das colunas.
Lição 06
Módulo 2
Tipografia: Headings, Display & Lead
Explore classes de cabeçalhos semânticos e visuais (.h1 a .h6), títulos de impacto .display-*, parágrafos .lead e alinhamentos.
Lição 07
Módulo 2
Cores Semânticas, Backgrounds & Opacidade
Utilize a paleta semântica oficial (primary, success, danger, warning), fundos degradê .bg-gradient e opacidades de cor.
Lição 08
Módulo 2
Espaçamento: Margin, Padding & Auto
Aplique margins e paddings de 0 a 5 com o sistema baseado em rem, incluindo margens lógicas .ms-*, .me-* e centralização com .mx-auto.
Lição 09
Módulo 2
Bordas, Rounded, Shadows & Display
Controle bordas (.border-*), raio de curvatura (.rounded, .rounded-pill), sombras em camadas (.shadow-*) e utilitários de display.
Lição 10
Módulo 2
Utilitários Flexbox: Alinhamento & Ordem
Manipule alinhamentos flexíveis com .justify-content-*, .align-items-*, ordenação com .order-* e expansão com .flex-grow-*.
Lição 11
Módulo 3
Botões & Button Groups: Estilos & Outline
Crie botões semânticos (.btn-*), variantes sutis com .btn-outline-*, tamanhos proporcionais e agrupamentos com .btn-group.
Lição 12
Módulo 3
Tabelas Modernas: Striped, Hover & Responsiva
Estruture tabelas corporativas com listras alternadas, efeito hover, cabeçalhos escuros e responsividade horizontal (.table-responsive).
Lição 13
Módulo 3
Formulários: Form Controls, Selects & Checks
Desenvolva formulários elegantes com .form-control, .form-label, selects customizados, checkboxes e interruptores .form-switch.
Lição 14
Módulo 3
Input Groups & Floating Labels
Crie campos compostos com ícones via .input-group e inputs modernos com rótulos flutuantes via .form-floating.
Lição 15
Módulo 3
Validação de Formulários & Feedback Visual
Implemente validação client-side nativa do HTML5 com feedback visual em tempo real (.valid-feedback e .invalid-feedback).
Lição 16
Módulo 4
Cards: Estrutura, Mídia & Card Groups
Construa cartões flexíveis com imagens, cabeçalhos, rodapés, divisores e grupos de cards em grade responsiva.
Lição 17
Módulo 4
Navbar: Barra de Navegação & Toggler
Arquitetura de barras de navegação responsivas completas com logotipo, links ativos, menus dropdown e botão hamburguer recolhível.
Lição 18
Módulo 4
Navs, Tabs, Pills, Paginação & Breadcrumb
Organize conteúdo em abas navegáveis (.nav-tabs), botões em pílula (.nav-pills), paginação acessível e trilhas breadcrumbs.
Lição 19
Módulo 4
Badges, Alertas Fecháveis & Indicadores
Emita avisos visuais importantes com alertas dispensáveis via JavaScript (.alert-dismissible) e crachás de status (.badge).
Lição 20
Módulo 4
Barras de Progresso, Spinners & Feedback
Forneça feedback tátil de carregamento com barras de progresso animadas (.progress-bar-striped) e spinners rotativos.
Lição 21
Módulo 5
Modais: Janelas de Diálogo & Backdrops
Implemente janelas modais acessíveis com suporte a foco, fechamento por tecla ESC, rolagem interna e controle por API JavaScript.
Lição 22
Módulo 5
Collapse & Accordions: FAQs Interativas
Crie seções de perguntas frequentes sanfonadas com .accordion e recolha blocos de conteúdo com a classe .collapse.
Lição 23
Módulo 5
Dropdowns: Menus Suspensos & Split Buttons
Adicione menus flutuantes acionados por clique com posicionamentos dropup, dropend, dropstart e alinhamento de itens.
Lição 24
Módulo 5
Tooltips, Popovers & Toasts Flutuantes
Inicialize dicas contextuais flutuantes com Popper.js e envie notificações toast no canto da tela com auto-dismiss.
Lição 25
Módulo 5
Offcanvas: Gavetas Laterais & Menus Mobile
Construa menus e painéis que deslizam lateralmente a partir das bordas da tela (.offcanvas-start/end) com backdrop suave.
Lição 26
Módulo 6
Dark Mode Nativo com data-bs-theme
Ative o modo escuro nativo do Bootstrap 5.3 com data-bs-theme="dark" globalmente ou isolado por componente com script de alternância.
Lição 27
Módulo 6
Customização com Sass (SCSS) & Variáveis
Sobrescreva variáveis Sass ($theme-colors, $spacer) e recompile uma versão exclusiva e ultraleve do framework.
Lição 28
Módulo 6
Bootstrap Icons: Iconografia & SVG
Integre a biblioteca oficial Bootstrap Icons com mais de 2.000 ícones vetoriais em SVG e web fonts.
Lição 29
Módulo 6
Projeto 1: Landing Page Institucional
Construa uma Landing Page institucional completa do zero: Navbar fixa, Hero Section, Cards de recursos, Tabela e FAQ.
Lição 30
Módulo 6
Projeto Final: Dashboard SaaS Completo
Projeto mestre: Dashboard SaaS com sidebar Offcanvas, cards analíticos, tabela de transações paginada e Dark Mode nativo.
✓ Verificado
🎓 Tutor & Coordenador da Web Academy
Web-Zoneware
Tutor Técnico & Desenvolvedor Full-Stack
Desenvolvedor web e instrutor focado na formação prática de novos programadores. Defensor ferrenho de código semântico, arquitetura limpa e acessibilidade W3C/WCAG, dedicando-se a construir cursos estruturados em metodologia passo a passo com execução ao vivo no Playground IDE.
Especialidades:
HTML5 Semântico
CSS3 & Flexbox/Grid
JavaScript Moderno
Acessibilidade WCAG 2.2
Didática Prática