"Você não precisa reinventar a roda. Precisa saber montar a roda que já existe."
Se você já tentou centralizar uma div na unha, com CSS puro, às 2h da manhã, e quase desistiu de programar — este repositório é pra você.
O Bootstrap4Noobs é um guia gratuito, open-source e em português, para tirar você do zero absoluto em Bootstrap (o framework CSS mais usado do mundo) e te deixar com base sólida pra montar interfaces responsivas rápido, sem depender de decoreba de classe e sem magia obscura.
Este projeto é irmão de outros guias da família 4noobs (como git4noobs, react4noobs e javascript4noobs) — mesma filosofia: direto ao ponto, sem economês, com analogias do mundo real e humor de dev saudável.
- Quem está começando em front-end e ouviu falar de Bootstrap, mas nunca usou de verdade;
- Quem já usa Bootstrap "copiando e colando" do site oficial e quer entender o porquê das coisas;
- Quem quer prototipar telas rápido sem depender de um designer para tudo;
- Quem vem de back-end (Java, Python, o que for) e precisa entregar uma interface decente sem virar especialista em CSS.
Não é necessário saber CSS avançado. Ajuda saber o básico de HTML/CSS, mas o Módulo 1 já nivela isso.
| # | Módulo | O que você vai aprender | Nível |
|---|---|---|---|
| 1 | O que é Bootstrap e por que ele existe | Frameworks CSS, mentalidade mobile-first, breakpoints, seu primeiro "Hello World" | 🟢 Iniciante |
| 2 | Grid System e Fundamentos | Container, Row, Column, o sistema de 12 colunas, como pensar em layout | 🟢 Iniciante |
| 3 | Componentes Essenciais | Navbar, Cards, Buttons, Forms, Modals, Alerts — os componentes que você vai usar toda semana | 🟡 Iniciante-Intermediário |
| 4 | Utilities e Customização | Classes utilitárias (spacing, flex, cores), Sass, variáveis CSS, como fugir da "cara de Bootstrap" | 🟡 Intermediário |
| 5 | Responsividade, Acessibilidade e Boas Práticas | Testar em múltiplas telas, atributos ARIA, erros comuns que todo iniciante comete | 🟡 Intermediário |
| 6 | Projetos Práticos e Próximos Passos | Montar uma landing page e um dashboard do zero, quando escolher Bootstrap x Tailwind | 🔴 Mão na massa |
💡 Dica: siga a ordem. Ninguém aprende Componentes (Módulo 3) direito sem entender o Grid System (Módulo 2) antes — é a fundação de tudo no Bootstrap.
Contribuições fazem com que a comunidade open source seja um lugar incrível para aprender, inspirar e criar. Todas contribuições são extremamente apreciadas.
- Realize um Fork do projeto;
- Crie um branch com a nova feature (
git checkout -b feature/featureBraba); - Realize o Commit (
git commit -m 'Add some featureBraba'); - Realize o Push no Branch (
git push origin feature/featureBraba); - Abra um Pull Request.
- Danilo-Sam - Desenvolvedor de Software - @Danilo-Sam
Distribuído sob licença MIT. Use, compartilhe, adapte — só mantenha os créditos.
