Hoje, as pessoas acessam sites por celulares, tablets, notebooks, monitores grandes e até TVs.

Design responsivo é a prática de adaptar o layout para funcionar bem em qualquer tamanho de tela.

O que é design responsivo?

Design responsivo significa que o layout:

  • Se ajusta automaticamente ao tamanho da tela
  • Mantém legibilidade e usabilidade
  • Evita rolagem horizontal
Um site responsivo não é “uma versão mobile”. É o mesmo site se adaptando.

A mudança de mentalidade

Antigamente, os sites eram pensados apenas para desktop.

Hoje, a abordagem moderna é:

  • Mobile first — pensar primeiro no celular
  • Depois adaptar para telas maiores
Ignorar mobile hoje significa perder usuários.

Layouts fluidos

Layouts responsivos evitam tamanhos fixos sempre que possível.

Em vez disso, usam:

  • Porcentagens
  • Unidades flexíveis
  • Grid e Flexbox
 .container { max-width: 1200px; margin: 0 auto; padding: 16px; }

Esse padrão centraliza o conteúdo e se adapta à largura da tela.

Conteúdo antes do layout

Em telas pequenas, o mais importante é:

  • Texto legível
  • Botões clicáveis
  • Navegação simples
Se funciona bem no celular, funciona em qualquer lugar.

Responsividade com Flexbox e Grid

Flexbox e Grid foram criados já pensando em responsividade.

Exemplo com Flexbox: 

 .cards { display: flex; flex-wrap: wrap; gap: 16px; }

Os elementos se reorganizam conforme o espaço disponível.

Erros comuns em layouts não responsivos

  • Usar largura fixa para tudo
  • Ignorar telas pequenas
  • Texto muito pequeno
  • Elementos muito próximos
Responsividade não é ajuste final. Ela faz parte do projeto desde o início.

Responsivo não é só CSS

Embora o CSS seja a base, design responsivo envolve:

  • HTML bem estruturado
  • Conteúdo pensado para leitura
  • Boas decisões de design

CSS apenas viabiliza essas escolhas.

💾🧠 Resumo da aula para nunca mais esquecer

  • Design responsivo adapta o layout a diferentes telas
  • Mobile first é a abordagem moderna
  • Layouts fluidos evitam tamanhos fixos
  • Flexbox e Grid facilitam responsividade
  • Responsividade começa no planejamento

Na próxima aula, vamos aprender sobre media queries — a ferramenta que permite aplicar estilos conforme o tamanho da tela 📐📱

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".