Encontre seu ponto de partida
Comece com os bloquinhos ou faça o diagnóstico de nove questões para encontrar uma lição na trilha.
OFICINA CSS · DESENVOLVIMENTO WEB I
Da primeira chave
Da primeira chave
ao layout.
Comece digitando uma chave de abertura. Em bloquinhos de 10 exercícios, avance da sua primeira regra CSS até o layout responsivo da Feira do Bairro.
.cartao {
color: #38216c;
background: #f2ebff;
padding: 1rem;
border-radius: 1rem;
}
RESULTADO NO NAVEGADOR
Feira do BairroUm cartão, quatro declarações CSS
09Níveis progressivos
45Lições com prática
0/45Lições concluídas
01Projeto integrador
00 / ANTES DA PRIMEIRA LIÇÃO
Seu primeiro exercício cabe em um caractere.
Veja o modelo, complete a lacuna e repita com pequenas variações. Comece copiando {, a chave de abertura de uma regra. Depois pratique cores, espaçamento e layout. As três microetapas finais preparam você para estilizar a Feira do Bairro no nível 9.
45 microetapas
1.350 exercícios
10 por bloquinho
EXEMPLO · C00
Qual caractere está faltando?
Modelo: {
Copie: _
Digite a chave de abertura { para completar o exercício.
01 / TRILHA DE ESTUDO
Uma habilidade de cada vez
Alterne os bloquinhos com as lições no editor. A trilha passa por seletores, cascata, tipografia, Flexbox, Grid, responsividade e acessibilidade.
02 / MÉTODO
Leia, escreva, verifique
O cronômetro é opcional e pode ser pausado. Para avançar na prática, acerte pelo menos 9 exercícios de primeira em dois bloquinhos consecutivos.
Experimente no navegador
Leia o conceito, inspecione o exemplo e experimente sua solução no editor. Confira o resultado na prévia e revise os critérios da lição.
Demonstre o que aprendeu
Conclua cada lição passando pelas verificações do código e acertando a questão. No projeto, revise também a leitura, o teclado e o layout em diferentes larguras.
NÍVEL 09 / PROJETO INTEGRADOR
Feira do Bairro responsiva
Use a estrutura da Feira do Bairro da Oficina HTML5 para criar uma folha de estilos completa. Organize a programação e o formulário em um layout responsivo e teste o contraste e o foco pelo teclado.
03 / REFERÊNCIAS
Consulte a fonte
Use estes materiais para revisar uma propriedade, entender o comportamento de um layout ou conferir sua folha de estilos.
W3C
Especificações e módulos mantidos pelo grupo de trabalho de CSS.
Consultar os padrões CSS ↗MDN Web Docs
Guias, referências de propriedades e exemplos para consultar enquanto você escreve.
Consultar a documentação CSS ↗Validador CSS do W3C
Ferramenta para conferir a folha de estilos e revisar os avisos do validador.
Abrir o validador CSS ↗