Destino Dev

Cursos

CSS Básico: Estilização e Design para Iniciantes

Código do curso: github.com/johnpires/css-basico-estilizacao-design-iniciantes

CSS (Cascading Style Sheets) é a linguagem responsável por toda a aparência visual das páginas web. Neste curso, você partirá do zero e aprenderá como o CSS funciona junto ao HTML para criar páginas bonitas, organizadas e profissionais. Vamos explorar cores, tipografia, espaçamentos e os principais conceitos que todo desenvolvedor front-end precisa dominar.

Ao longo das aulas, você vai entender a estrutura e sintaxe do CSS, aprender a usar seletores para aplicar estilos específicos, compreender o Box Model — um dos conceitos mais importantes do CSS — e começar a trabalhar com layouts usando Flexbox e Grid. Cada módulo traz exemplos práticos e exercícios que reforçam o aprendizado de forma gradual e consistente.

Ao finalizar este curso, você será capaz de estilizar páginas web do zero, criar layouts responsivos simples e desenvolver seu primeiro projeto completo: uma página de portfólio pessoal estilizada com CSS puro.

Conteúdo do curso

Módulo 1: Introdução ao CSS

Neste módulo você vai conhecer o CSS, entender como ele funciona em conjunto com o HTML e aprender os conceitos fundamentais de estilização.

  1. O que é CSS e como funciona na web (8 min)
  2. Formas de aplicar CSS: inline, interno e externo (8 min)
  3. Sintaxe básica: seletores, propriedades e valores (8 min)
  4. Cores no CSS: nomes, hexadecimal, RGB e HSL (8 min)
  5. Tipografia: fontes, tamanhos e estilos de texto (8 min)

Módulo 2: Seletores e Especificidade

Aprenda a selecionar elementos HTML com precisão usando seletores de elemento, classe, ID, combinados e pseudo-classes. Entenda a cascata, herança e especificidade do CSS.

  1. Seletores de elemento, classe e ID (8 min)
  2. Seletores combinados e relacionais (8 min)
  3. Pseudo-classes e pseudo-elementos (2 min)
  4. Cascata, herança e especificidade (2 min)
  5. Variáveis CSS (Custom Properties) (8 min)

Módulo 3: Box Model e Layout

Domine o Box Model, os tipos de display e as técnicas de posicionamento. Dê seus primeiros passos com Flexbox e CSS Grid para criar layouts modernos.

  1. O Box Model: margin, border, padding e content (3 min)
  2. Display: block, inline e inline-block (2 min)
  3. Posicionamento CSS: static, relative, absolute, fixed e sticky (2 min)
  4. Introdução ao Flexbox (2 min)
  5. Introdução ao CSS Grid (2 min)

Módulo 4: Projeto Final: Página de Portfólio

Coloque em prática tudo que você aprendeu construindo uma página de portfólio pessoal completa e estilizada com CSS puro.

  1. Planejando o projeto: estrutura e design (8 min)
  2. Estruturando o HTML da página de portfólio (8 min)
  3. Estilizando o header, hero e navegação (2 min)
  4. Finalizando: habilidades, projetos e footer (3 min)