Aprender CSS: Curso Code — Prática de programação em CSS com editor de HTML e CSS ao vivo no seu celular

Três pontos causam a maioria dos problemas de layout para iniciantes. O box model: por padrão, padding e bordas são adicionados à largura declarada de um elemento, então a caixa acaba mais larga do que o número que você digitou. A especificidade: uma regra mais específica em outro lugar substitui silenciosamente a sua. E a ferramenta de layout errada: tentar criar uma página bidimensional usando flexbox, que foi feito para uma única linha. Aprender CSS: Curso Code organiza os cursos para que esses três pontos sejam entendidos nessa ordem, em vez de descobertos por tentativa e erro.

Um pouco, e você pode aprender isso junto com as lições, sem precisar concluir HTML antes. CSS descreve como os elementos HTML são apresentados, então saber que uma página é composta por elementos — títulos, parágrafos, listas e imagens — já é uma base suficiente para começar. O editor ao vivo do app mostra o HTML e o CSS juntos, tornando visível a conexão entre os dois desde a primeira lição.

Flexbox organiza itens em uma única linha — uma fileira de botões, uma barra de navegação — e distribui o espaço restante ao longo desse único eixo. Grid define linhas e colunas ao mesmo tempo, permitindo posicionar itens em uma grade realmente bidimensional, em vez de ajustá-los com margens. O layout geral de uma página normalmente usa grid; uma única linha de controles dentro dele normalmente usa flexbox, e o curso ensina os dois antes de deixar você decidir.

CSS resolve regras conflitantes usando primeiro a especificidade e depois a ordem de origem. Um seletor de ID vence um seletor de classe, e uma classe vence um seletor simples de elemento, independentemente de qual aparece mais abaixo na stylesheet. É por isso que uma regra que parece correta ainda pode perder para outra que você esqueceu em algum lugar — o curso Specificity & Cascade do app existe justamente para tornar essa ordem previsível, em vez de misteriosa.

Sim, ainda vale a pena aprender CSS diretamente. Frameworks de utilitários como Tailwind são uma camada criada com conceitos de CSS, não um substituto para eles — quando uma classe utilitária não faz o que você espera, entender o box model, a especificidade e os sistemas de layout por baixo é o que ajuda você a sair do bloqueio. CSS também é uma das habilidades mais rápidas para começar a ver resultados, já que toda mudança aparece imediatamente na página.

A consistência importa mais do que o total de horas. Estudando lições curtas diariamente, a maioria dos iniciantes consegue lidar com segurança com seletores, espaçamento, tipografia e layouts básicos com flexbox ou grid em poucas semanas, bem antes dos aspectos mais difíceis, como casos extremos de especificidade ou container queries. Os 20 projetos guiados do app existem justamente para praticar essa etapa, uma página real de cada vez.

O app pode ser baixado gratuitamente na App Store e no Google Play. O primeiro curso, o primeiro projeto guiado, duas missões de caça a bugs e o editor ao vivo são gratuitos, com uma cota diária do Mentor de IA. O Pro desbloqueia todos os cursos, os 20 projetos e as 20 missões, a prova para obter o certificado e o uso ilimitado do Mentor de IA, além de remover os anúncios.

Aprender CSS: Curso Code está disponível para iPhone e iPad na App Store e para Android no Google Play, com a interface em 22 idiomas e classificação etária 4+. Ele é indicado para iniciantes completos, designers que querem estilizar as próprias páginas e pessoas mudando de carreira ou estudantes se preparando para entrevistas de front-end.

A visualização instantânea precisa especificamente de uma conexão para renderizar seu HTML e CSS, algo que o app informa claramente em vez de reduzir silenciosamente a funcionalidade. O texto das lições e o material de leitura foram desenvolvidos para continuar funcionando com uma conexão instável, o que atende à maioria dos deslocamentos, mas uma sessão de visualização ao vivo totalmente offline não é algo oferecido por este editor.

Aprender CSS: Curso Code funciona em iOS pela App Store e em Android pelo Google Play, e o app está disponível em 22 idiomas. Ele tem classificação 4+. Ao passar na prova final, o app emite um certificado de conclusão — uma comprovação do trabalho que você realizou, útil em um currículo junto aos projetos guiados que você pode apresentar, mas não uma qualificação credenciada.