Ensinando a desenvolver layouts em HTML com CSS Grid e Flexbox
Como tenho documentado por aqui, nesse primeiro semestre de 2026 estou dando aula na disciplina de Redes de Informação no curso de graduação em Biblioteconomia na Faculdade de Ciência da Informação da Universidade de Brasília. Escolhi como ementa principal para essa disciplina o ensino de HTML e CSS. Para o material de apoio a aula, escolhi um livro que relatei por aqui.
Estudei o livro inteiro antes da disciplina e venho percorrendo ele ao longo das semanas de aula de forma muito prática, bem didática e bastante funcional. De fato, tem funcionado como eu esperava. No entanto, o livro foi publicado em 2011 e como tenho pesquisado e documentado por aqui, muita, mas muita coisa mesmo tem mudado nesse ecossistema de informação de lá pra cá. O mundo CSS é de fato um mundo extremamente dinâmico e muita coisa surge o tempo todo. Para ter uma ideia mais precisa disso, basta acompanhar a página do CSS no site do W3C e lá você vai perceber rapidamente como padrões para análise surgem o tempo, grupos de trabalho, documentos para revisão, enfim, é uma área em constante mutação e um tema que estou inclusive considerando trazer para uma disciplina na pós-graduação para o semestre que vem.
Ao montar a aula para ensinar os alunos a montarem seus primeiros layouts fiquei curioso para dar uma olhada como as IAs sugeririam uma resposta a esse problema e usei o Claude para criar uma versão experimental pra mim. O Claude criou a proposta apresentada na imagem abaixo:

Ao estudar a proposta criada pelo Claude, percebi que ele montou o código HTML e CSS usando dois princípios de design que não foram abordados no livro que adotei exatamente por serem mais recentes e terem se estabilizado nos últimos 10 anos: o Flexbox e Grid layout. O Guia Mozilla para CSS apresenta um bom material para entender o Grid Layout e o Flexbox. O site Origamid também mostra um tutorial dos principais seletores do Grid layout que achei bem interessante.
Eu montei uma versão básica para trabalhar em sala de aula para mostrar a lógica de montagem de um layout por blocos e divs.

Acompanhar como esses padrões mudaram e a forma como eles podem se trabalhados em sala de aula tem virado um tema rico e muito divertido para repensar as formações técnicas na área da Ciência da Informação e a forma como as IAs estão virando um eixo técnico de orientação e provocação para novos processos e métodos de aprendizado. Seguimos!