Destino Dev

Cursos

Blog Estático com HTML Semântico e CSS Profissional

Código do curso: github.com/johnpires/blog-estatico-html-css

Aprenda a construir um blog estático profissional do zero usando HTML semântico e CSS moderno. Domine tags HTML5, CSS Grid, Flexbox, tipografia, responsividade e publique seu projeto no GitHub Pages.

Conteúdo do curso

Módulo 1: Módulo 1 — Introdução e Setup

Visão geral do projeto, configuração do ambiente e estrutura inicial do blog estático.

  1. 1.1 O que vamos construir — Visão Geral do Projeto (2 min)
  2. 1.2 Configurando o Ambiente de Desenvolvimento (2 min)
  3. 1.3 Estrutura do Projeto e Boilerplate HTML (8 min)

Módulo 2: Módulo 2 — Fundamentos de HTML Semântico

Domine as tags semânticas do HTML5: header, nav, main, article, section, aside e footer.

  1. 2.1 Tags Semânticas do HTML5 — Por que Usar? (2 min)
  2. 2.2 Construindo o Header e Nav do Blog (8 min)
  3. 2.3 Main, Article e Section — Estrutura do Conteúdo (8 min)
  4. 2.4 Aside e Footer — Sidebar e Rodapé Semânticos (8 min)

Módulo 3: Módulo 3 — CSS Profissional e Tipografia

Reset CSS, variáveis, Google Fonts, sistema de cores, espaçamento e responsividade com Media Queries.

  1. 3.1 Reset CSS e Variáveis CSS (Custom Properties) (4 min)
  2. 3.2 Tipografia Profissional com Google Fonts (4 min)
  3. 3.3 Sistema de Cores, Espaçamento e Componentes Base (3 min)
  4. 3.4 Responsividade com Media Queries (4 min)

Módulo 4: Módulo 4 — Layout e Grid do Blog

Construa o layout completo com CSS Grid, sidebar, cards de posts com Flexbox e animações CSS.

  1. 4.1 Layout Principal com CSS Grid (4 min)
  2. 4.2 Sidebar com Widgets e Position Sticky (3 min)
  3. 4.3 Cards de Posts com Flexbox (3 min)
  4. 4.4 Animações e Transições CSS (4 min)

Módulo 5: Módulo 5 — Páginas do Blog

Crie as páginas Home, Post Individual, Sobre e Contato com navegação entre elas.

  1. 5.1 Página Home com Listagem de Posts (8 min)
  2. 5.2 Página de Post Individual com Tipografia de Leitura (3 min)
  3. 5.3 Páginas Sobre e Contato (3 min)
  4. 5.4 Navegação entre Páginas e Active State (2 min)

Módulo 6: Módulo 6 — Deploy e Conclusão

Publique seu blog no GitHub Pages, configure domínio e HTTPS, e veja os próximos passos.

  1. 6.1 Deploy no GitHub Pages — Seu Blog no Ar Gratuitamente (3 min)
  2. 6.2 Domínio Personalizado e HTTPS (2 min)
  3. 6.3 Próximos Passos e Melhorias do Projeto (3 min)