Aprender CSS - Curso Code

Aprenda CSS passo a passo, do seu primeiro seletor a layouts responsivos, animações e design web moderno. Digite uma linha de CSS e veja a página mudar no seu celular: o editor mostra seu HTML e CSS lado a lado com uma visualização ao vivo.

Este tutorial de CSS foi criado para iniciantes e evolui com você. Cada curso aborda um tópico real, cada lição é curta e o editor está sempre a um toque de distância, para que você pratique o que acabou de ler em vez de apenas ler sobre isso.

O QUE VOCÊ ENCONTRA

• 40 cursos e 159 lições curtas, do nível iniciante (A1) ao avançado (C1)

• Um editor ao vivo de HTML e CSS com visualização instantânea, para experimentos rápidos e suas próprias páginas

• 20 projetos guiados de design web, passo a passo: uma barra de ferramentas, uma grade de cartões, um cabeçalho fixo, um botão pulsante e muito mais

• 20 missões de caça a bugs: um cartão 42px mais largo que sua coluna, uma media query que nunca é acionada no celular, um modal preso atrás da página

• Um exame final e um certificado de conclusão

• O app está disponível em 22 idiomas

UM CAMINHO COMPLETO, DO INICIANTE AO AVANÇADO

• Sintaxe e seletores, cores, planos de fundo e tipografia

• O modelo de caixa, display, posicionamento, unidades e valores

• Pseudo-classes e pseudo-elementos

• Fundamentos de Flexbox e Flexbox avançado

• Noções básicas de Grid, áreas de Grid e layout avançado com Grid

• Design responsivo, media queries e container queries

• Propriedades personalizadas (variáveis), funções, especificidade, a cascata e @layer

• Transições, transformações, animações com keyframes, filtros e modos de mesclagem

• Modo escuro e esquemas de cores, rolagem e overflow, clip-path e formas

• Depuração com DevTools, arquitetura BEM, Sass, PostCSS e tokens de design

• Padrões de componentes, padrões de layout modernos, desempenho e Houdini

PRÁTICA QUE FIXA

• Quizzes para verificar o que você aprendeu

• Uma folha de consulta com 69 entradas de propriedades, seletores e sintaxe de layout

• 50 perguntas de entrevista com respostas claras, úteis antes de uma entrevista para desenvolvedor front-end ou web

• Uma biblioteca de código com exemplos curtos que você pode abrir e editar

• Salve seu próprio código, notas e lições favoritas

• World Coding Challenge: três rodadas globais por dia, resolvidas em Python, JavaScript e outras linguagens

• Sequências, XP, um ranking e lembretes diários para manter sua prática

MENTOR DE AI

• Travou em um layout ou propriedade? Pergunte ao mentor de AI sobre um conceito, um erro ou seu próprio código

• Playground de AI: descreva uma página e veja o HTML e o CSS serem criados

• Usuários gratuitos recebem uma cota diária de AI; o Pro torna esse uso ilimitado

PARA QUEM É

• Iniciantes completos dando seus primeiros passos no desenvolvimento web

• Designers que querem estilizar suas próprias páginas em vez de entregar mockups

• Estudantes que querem prática extra junto com um curso de design web

• Desenvolvedores que conhecem um pouco de HTML e CSS e querem finalmente entender Flexbox e Grid

• Pessoas em transição de carreira se preparando para uma vaga de desenvolvimento front-end

GRATUITO E PRO

O primeiro curso, o primeiro projeto guiado, duas missões e o editor ao vivo são gratuitos, com uma cota diária de mentor de AI. O Pro desbloqueia todos os cursos, todos os projetos e missões, o exame para obter o certificado e AI ilimitado, além de remover os anúncios.

Comece hoje, aprenda CSS no seu próprio ritmo e estilize sua primeira página em minutos.