Blog Pessoal com HTML, CSS e JavaScript Puro
- Nível: Projetos
- Módulos: 4
- Aulas: 13
- Tempo de leitura: 5h 45min
- Tecnologias: JavaScript, HTML, CSS
- Preço: Gratuito
Código do curso: github.com/johnpires/blog-pessoal-html-css-javascript
Criar um blog pessoal do zero é um dos projetos mais completos para quem está começando no desenvolvimento web. Neste curso, você vai construir um blog funcional e visualmente atraente usando apenas as três tecnologias fundamentais da web: HTML, CSS e JavaScript puro — sem frameworks, sem bibliotecas externas, sem atalhos. Isso garante que você entenda profundamente como cada parte funciona antes de usar qualquer ferramenta que abstraia esses conceitos.
Ao longo do curso, você vai criar um blog com listagem de posts, página de leitura individual, sistema de busca em tempo real, filtro por tags, dark mode com persistência, formulário de contato com validação completa e deploy no GitHub Pages. Os dados dos posts serão carregados de um arquivo JSON usando a Fetch API, simulando o consumo de uma API REST. O layout será 100% responsivo, funcionando perfeitamente em dispositivos móveis e desktops, utilizando técnicas modernas de CSS como variáveis customizadas, Flexbox e Grid.
Este curso é ideal para estudantes que já conhecem o básico de HTML e CSS e querem dar o próximo passo construindo um projeto real do início ao fim. Não é necessário nenhum conhecimento prévio de JavaScript avançado — tudo será ensinado de forma progressiva, com foco em boas práticas e código limpo. Se você quer um portfólio sólido e uma base técnica confiável para evoluir para frameworks como React ou Vue, este é o ponto de partida certo.
O que você vai aprender
Ao final deste curso, você será capaz de:
- Criar estruturas HTML semânticas e acessíveis com as tags corretas para cada conteúdo
- Aplicar CSS moderno com variáveis customizadas, Flexbox e Grid para layouts complexos
- Construir um layout totalmente responsivo sem frameworks CSS
- Manipular o DOM com JavaScript puro para adicionar interatividade real a uma página
- Buscar e renderizar dados de uma fonte JSON utilizando a Fetch API
- Implementar sistema de busca em tempo real e filtros por categorias
- Persistir preferências do usuário (dark mode) usando localStorage
- Fazer o deploy de um projeto estático no GitHub Pages
Pré-requisitos
Conhecimento básico de HTML (tags, estrutura de página) e CSS (seletores, propriedades básicas). Capacidade de instalar programas no computador. Não é necessário saber JavaScript.
Conteúdo do curso
Módulo 1: Configuração do Ambiente e Estrutura do Projeto
Prepare o ambiente de desenvolvimento, instale as ferramentas necessárias e crie a estrutura inicial de arquivos e pastas do blog.
- Instalando VS Code e Extensões Essenciais (20 min)
- Estrutura de Pastas e Arquivos Iniciais (20 min)
- HTML Base com Semântica Correta (25 min)
Módulo 2: Estilizando com CSS Moderno
Aplique reset CSS, variáveis customizadas, Flexbox e Grid para criar um layout responsivo e visualmente atraente.
- Reset CSS e Variáveis Customizadas (25 min)
- Layout Responsivo com Flexbox e Grid (35 min)
- Carregando e Renderizando Posts com JavaScript (35 min)
- Busca em Tempo Real e Filtro por Tags (30 min)
Módulo 3: Dark Mode e Página de Post Individual
Implemente o dark mode com persistência via localStorage e construa a página de leitura de um post individual.
- Dark Mode com Persistência via localStorage (25 min)
- Página de Post Individual (30 min)
- Formulário de Contato com Validação (30 min)
Módulo 4: Entrega Final e Próximos Passos
Otimize a performance, faça o deploy no GitHub Pages e revise as conquistas do curso.
- Otimização de Performance e SEO Básico (25 min)
- Deploy no GitHub Pages (25 min)
- Revisão Final e Próximos Passos (20 min)