Do código em branco à primeira página com HTML e CSS

Quando uma página abre no navegador, o HTML organiza títulos, textos, imagens e links; o CSS define cores, espaços e a forma como esses elementos se adaptam à tela. Aprender os dois juntos permite ver o resultado do código desde as primeiras aulas e construir um projeto simples sem depender de conhecimento avançado.

Compare os cursos gratuitos de HTML e CSS

Escolha entre uma entrada rápida e um percurso mais amplo

Se a prioridade é criar uma primeira página sem assumir uma rotina longa, Udemy e Microsoft Learn são as entradas mais diretas. O curso da Estudante.dev na Udemy reúne 1 hora e 49 minutos de videoaulas sobre sintaxe, tags semânticas, textos, links, imagens e seletores, além de um projeto de página de receita. Já o Microsoft Learn organiza o estudo em três módulos e inclui acessibilidade na web. A Microsoft não publica a duração total do percurso.

Para avançar até layouts responsivos e a publicação de um site estático, a FGV oferece o programa mais amplo da seleção, com 15 horas. O conteúdo inclui formulários, flexbox, CSS grid, posicionamento e um projeto com hospedagem. Não há processo seletivo, e quem obtiver nota mínima 7 no pós-teste pode imprimir uma declaração de participação.

A Fundação Bradesco ocupa uma posição diferente: em 2 horas, combina HTML e CSS com uma introdução ao JavaScript. Embora classificado como iniciante, o curso pede familiaridade com ao menos uma linguagem de programação e uma linguagem de marcação. Ele faz mais sentido para quem já teve algum contato com código. A matrícula tem prazo de 60 dias, idade mínima de 16 anos e certificado digital para quem cumprir os critérios de aprovação.

Em qualquer uma das escolhas, você pode praticar em duas passagens: primeiro organizar o conteúdo e depois cuidar da aparência.

Monte a página em duas passagens

Comece pelo HTML. Separe cabeçalho, conteúdo principal e rodapé, use títulos na ordem correta e escolha cada elemento pela função que ele cumpre. Essa organização ajuda o navegador e as tecnologias assistivas a interpretar a página, não apenas a exibi-la.

O CSS cuida da apresentação. Com ele, você define cores, fontes, margens, alinhamentos e a distribuição dos elementos. Recursos como flexbox e CSS grid ajudam a organizar blocos em linhas e colunas. Um layout responsivo adapta essa organização para que a página continue legível em telas menores, como a de um celular.

Transforme cada conceito em uma mudança visível. Crie uma página simples com título, texto, imagem e link. Depois, altere espaçamentos e cores, reorganize os blocos e confira o resultado em diferentes larguras de tela. Assim, o estudo deixa de ser apenas uma sequência de comandos.

Confira as regras antes da matrícula

• Certificado e declaração: a Fundação Bradesco emite certificado digital para aprovados. A FGV oferece declaração de participação após nota mínima 7 no pós-teste. O Microsoft Learn registra conquistas no perfil, não um certificado do percurso. Novas inscrições em cursos gratuitos da Udemy não incluem certificado.
• Cadastro: Fundação Bradesco, FGV e Udemy exigem cadastro ou formulário de inscrição. No Microsoft Learn, é possível consultar o conteúdo sem perfil, mas o login é necessário para salvar o progresso e as conquistas.
• Idioma: os quatro conteúdos estão disponíveis em português. O percurso do Microsoft Learn usa a variante de Portugal, enquanto os demais apresentam o conteúdo em português do Brasil.
• Equipamento: um computador facilita a prática. Fundação Bradesco e Udemy trabalham com o Visual Studio Code instalado; o Microsoft Learn usa a versão do editor no navegador. A página da FGV não publica um requisito técnico específico.

Escolha pelo resultado que você quer alcançar

• Para começar sem conhecimento prévio: Microsoft Learn e Udemy são as entradas mais diretas.
• Para obter certificado após aprovação: a Fundação Bradesco é a opção da lista, desde que você cumpra os pré-requisitos e os critérios exigidos.
• Para praticar responsividade e publicar um site estático: a FGV reúne esses temas em um programa de 15 horas.
• Para incluir acessibilidade desde a primeira página: o Microsoft Learn dedica um módulo ao assunto.
• Para conhecer também um pouco de JavaScript: a Fundação Bradesco acrescenta interatividade ao projeto.

Escolha um curso, abra o editor junto com a aula e reconstrua os exemplos com pequenas mudanças. Trocar o texto, as cores ou a ordem dos blocos já obriga você a entender o que cada parte faz. Ao final, guarde uma página funcional como registro do que aprendeu.

Continue aprendendo

Depois de criar uma página estática, você pode praticar os fundamentos de lógica de programação. Eles ajudam a organizar condições e repetições antes de avançar para comportamentos interativos com JavaScript.