Plataforma educacional sobre carreiras em programação — roteiros estruturados para Início, Front-End, Back-End e Full-Stack com HTML/CSS puros, design system modular e paletas temáticas por trilha.
⚠️ Projeto Arquivado Este projeto não recebe mais atualizações ou correções. O código permanece disponível como referência e pode ser utilizado livremente sob a licença MIT. Fique à vontade para fazer fork caso deseje continuar o desenvolvimento.
- Sobre o Projeto
- Funcionalidades
- Tecnologias
- Arquitetura
- Estrutura do Projeto
- Começando
- Scripts Disponíveis
- Qualidade e Governança
- Deploy
- FAQ
- Licença
- Contato
Este projeto é uma plataforma educacional estática que oferece roteiros estruturados para carreiras em desenvolvimento de software. Desenvolvida com HTML5 e CSS3 puros, apresenta trilhas de aprendizado para Início na Programação, Front-End, Back-End e Full-Stack, cada uma com conteúdo curado, roadmaps progressivos e identidade visual própria.
O repositório prioriza:
- Roteiros de carreira estruturados — Trilhas com conceitos, tecnologias e habilidades organizadas por nível (Essencial, Importante, Avançado)
- Design system modular — Tokens, base, layout, componentes e estilos por página em
styles/ - Paletas temáticas por trilha — Variáveis CSS distintas para cada caminho, reforçando identidade visual
- Zero dependências de runtime — HTML e CSS puros com Google Fonts e Font Awesome via CDN
- Tipografia e iconografia — Fonte Inter para legibilidade e Font Awesome para reforço visual de conceitos
- Animações e efeitos —
slideInDown,fadeIn, hover effects e backgrounds animados
Para um guia informativo estático, frameworks adicionariam complexidade sem benefícios proporcionais. A abordagem purista garante tempos de carregamento mínimos via CDN, máxima compatibilidade cross-browser e código acessível para novos contribuidores — alinhado ao propósito educacional do projeto.
- Página principal (Hub) — Cartões de navegação interativos para cada trilha com ícones, descrições e efeitos de hover
- Trilha Início na Programação — Lógica, algoritmos, estruturas de dados, Git, HTML/CSS/JS fundamentais e ferramentas
- Trilha Front-End — HTML, CSS, JavaScript, frameworks (React, Angular, Vue), ferramentas de build, responsividade e acessibilidade
- Trilha Back-End — Bancos de dados (SQL/NoSQL), APIs (REST/GraphQL), linguagens de servidor, autenticação, caching, microserviços e DevOps
- Trilha Full-Stack — Integração das trilhas Front-End e Back-End com visão holística
- Cartões de habilidades com níveis — Classificação progressiva (Essencial → Importante → Avançado)
- Design responsivo — Media queries com meta viewport para adaptação a smartphones, tablets e desktops
- Animações CSS — Entrada de elementos, hover em cards e backgrounds flutuantes
Requisitos mínimos:
- Navegador moderno (Chrome, Firefox, Safari, Edge)
A aplicação é um site estático multi-página, puramente client-side, sem dependência de backend:
Usuário
→ Vercel Edge Network (CDN global)
→ index.html (hub de navegação com cartões interativos)
→ pages/Start/Start.html (trilha Início)
→ pages/Front-End/Front-End.html (trilha Front-End)
→ pages/Back-End/Back-End.html (trilha Back-End)
→ pages/Full-Stack/Full-Stack.html (trilha Full-Stack)
→ styles/ (design system modular)
├── tokens.css (variáveis de design)
├── base.css (estilos base)
├── layout.css (grids e layouts)
├── components.css (componentes reutilizáveis)
├── utilities.css (utilitários)
└── pages/ (estilos específicos por trilha)
Cada página de trilha carrega seus próprios estilos e recursos, com variáveis CSS (:root) customizadas para paleta de cores temática. A navegação é feita via links HTML entre páginas, sem chamadas a APIs ou processamento dinâmico.
Brain-Developer/
├── index.html # Página principal e hub de navegação
├── pages/
│ ├── Start/
│ │ └── Start.html # Trilha: Início na Programação
│ ├── Front-End/
│ │ └── Front-End.html # Trilha: Desenvolvedor Front-End
│ ├── Back-End/
│ │ └── Back-End.html # Trilha: Desenvolvedor Back-End
│ └── Full-Stack/
│ └── Full-Stack.html # Trilha: Desenvolvedor Full-Stack
├── styles/
│ ├── tokens.css # Tokens de design (cores, tipografia)
│ ├── base.css # Estilos base e reset
│ ├── layout.css # Layouts e grids
│ ├── components.css # Componentes reutilizáveis
│ ├── utilities.css # Classes utilitárias
│ └── pages/ # Estilos específicos por trilha
├── .github/
│ └── workflows/
│ ├── ci.yml # Pipeline de CI
│ └── codeql.yml # Análise de segurança
├── package.json # Scripts de lint/format e testes
└── LICENSE # Licença MIT
A aplicação é um site estático e roda diretamente no navegador. Nenhuma dependência de runtime é necessária.
# Apenas para clonar o repositório
git --version # v2 ou superior- Clone o repositório
git clone https://github.com/ESousa97/Brain-Developer.git
cd Brain-DeveloperAbrir diretamente no navegador:
# Windows
start index.html
# macOS
open index.html
# Linux
xdg-open index.htmlCom servidor local (recomendado para caminhos relativos):
python -m http.server 8000
# ou
npx serve .Acesse: http://localhost:8000/
Produção: braindeveloper.vercel.app
Acesso direto às trilhas:
| Trilha | URL |
|---|---|
| Início | /pages/Start/Start.html |
| Front-End | /pages/Front-End/Front-End.html |
| Back-End | /pages/Back-End/Back-End.html |
| Full-Stack | /pages/Full-Stack/Full-Stack.html |
# Instalar dependências de desenvolvimento
npm install
# Executar lint
npm run lint
# Formatação
npm run format
# Testes
npm testO projeto adota práticas de governança para manter a qualidade do código:
- CI — Pipeline com lint e testes via GitHub Actions
- Security — Análise CodeQL semanal e em cada push/PR
- Deploy contínuo — Cada push na
mainaciona deploy automático na Vercel com URL de preview para PRs
Deploy contínuo automatizado via integração GitHub. A Vercel detecta automaticamente o projeto como site estático e distribui via CDN global. Pull Requests geram URLs de preview automáticas para revisão.
O projeto também é compatível com Netlify, GitHub Pages ou qualquer plataforma de hospedagem estática.
O Brain Developer é um curso?
Não. É um guia de referência e roadmap que estrutura o que aprender em cada área e a ordem recomendada. Não oferece aulas ou exercícios interativos.
Preciso pagar para usar?
Não. O projeto é open source sob licença MIT, totalmente gratuito para acesso online ou uso local.
Existe um backend ou armazenamento de dados?
Não. É uma aplicação puramente estática — sem backend, sem banco de dados, sem cookies ou rastreadores.
Por que não usar React ou Vue?
Para conteúdo educacional estático, frameworks adicionariam complexidade desnecessária. HTML/CSS puros garantem máxima performance, compatibilidade e acessibilidade do código para contribuidores.
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
MIT License - você pode usar, copiar, modificar e distribuir este código.
José Enoque Costa de Sousa
