Curso online gratuitoHTML e CSS do Zero ao Portfólio Profissional
Duração do curso online: 15 horas e 49 minutos
Novo
Curso gratuito de HTML e CSS para criar um portfólio profissional do zero, com prática, organização do código, Git/GitHub e publicação online.
Neste curso gratuito, aprenda sobre
Boas-vindas e Preparação do Ambiente
Fundamentos de HTML e CSS (Header e Conceitos Essenciais)
Git, GitHub e Publicação com GitHub Pages
Componentização e Estrutura do Banner (HTML/CSS + Commits)
Seção Skills e Barra de Progresso (Componentes e Variações)
Cards de Projetos e Refatoração de Componentes
Seção Sobre, Linha do Tempo, Carrossel e Introdução ao JavaScript
Footer, Formulário de Contato, Validação e Encerramento
Descrição do curso
Aprenda a criar sites do zero e transformar seu aprendizado em um portfólio profissional com um curso online gratuito de HTML e CSS, ideal para quem quer entrar em Programação Front-End com uma base prática e bem guiada. Você começa organizando seu ambiente de desenvolvimento e entendendo como planejar interfaces, conectando design e código de forma clara para construir páginas com estrutura consistente e visual moderno.
Ao longo do curso, você evolui da marcação semântica no HTML para a estilização completa com CSS, entendendo como controlar layout, tipografia, cores, espaçamentos e comportamento de elementos na tela. A construção do projeto é feita passo a passo, com atenção à organização do código e à criação de componentes reutilizáveis, ajudando você a desenvolver um padrão de trabalho mais profissional desde o início.
Além do desenvolvimento da interface, o curso também fortalece sua rotina de versionamento e publicação, mostrando como salvar a evolução do projeto, trabalhar com repositórios e colocar seu site no ar. No fim, você terá uma página completa, com seções e componentes típicos de portfólios, pronta para apresentar seus projetos e servir como base para continuar evoluindo no Front-End.
Conteúdo do curso
Aula em vídeo: Projeto do curso de HTML e CSS feliz | Mod 00 - Aula 0103m
Exercício: Qual é o principal objetivo do projeto do curso de HTML e CSS?
Aula em vídeo: Pré-requisitos do curso de HTML e CSS feliz | Mod 00 - Aula 0206m
Aula em vídeo: Onde tirar sua dúvidas do curso feliz de HTML e CSS | Mod 00 - Aula 0305m
Aula em vídeo: Introdução ao VSCode | Mod 00 - Aula 0409m
Exercício: No VS Code, qual área é usada para abrir pastas do projeto e gerenciar arquivos (criar, mover e visualizar)?
Aula em vídeo: Figma para devs | Mod00 - Aula 0507m
Aula em vídeo: Desafios top-top-top | Mod00 - Aula 0706m
Exercício: No desafio avançado, qual é a entrega pedida para o header antes de aplicar CSS?
Aula em vídeo: Criando pasta do projeto | Mod01 - Aula 0102m
Aula em vídeo: Como alterar layout no figma | Mod01 - Aula 0211m
Aula em vídeo: Introdução ao HTML | Mod01 - Aula 0313m
Exercício: Qual é o principal papel do HTML em uma página web?
Aula em vídeo: Como criar o cabeçalho (header) - Parte 1 | Mod01 - Aula 0421m
Aula em vídeo: Devo ou não devo comentar o código? | Mod01 - Aula 0505m
Aula em vídeo: Como estruturar o HTML | Mod01 - Aula 0610m
Exercício: Qual elemento HTML define o texto que aparece na aba do navegador (título da página)?
Aula em vídeo: Atributo global no HTML | Mod01 - Aula 0704m
Aula em vídeo: HTML feliz com Emmet | Mod01 - Aula 0812m
Aula em vídeo: Introdução ao CSS | Mod01 - Aula 0904m
Exercício: Qual é a principal responsabilidade do CSS em um site?
Aula em vídeo: Como importar o CSS | Mod01 - Aula 1016m
Aula em vídeo: Sistema de cores | Mod01 - Aula 1111m
Aula em vídeo: Reset CSS | Mod01 - Aula 1206m
Exercício: Qual é o principal objetivo de usar um arquivo reset.css em um projeto HTML e CSS?
Aula em vídeo: Exemplos de Reset CSS | Mód01 - Aula 1305m
Aula em vídeo: CSS do menu de navegação | Mód01 - Aula 1412m
Aula em vídeo: Qual a diferença entre Serif e Sans Serif? | Mód01 - Aula 1504m
Exercício: Qual é a principal diferença entre fontes serifadas e sans-serif?
Aula em vídeo: Como estilizar um botão | Mód01 - Aula 1613m
Aula em vídeo: O que é a propriedade display? | Mód01 - Aula 1709m
Aula em vídeo: Como funciona o display: inline | Mód01 - Aula 1818m
Exercício: Qual é uma característica do display: inline em relação a width e height?
Aula em vídeo: Como funciona o display: block | Mód01 - Aula 1907m
Aula em vídeo: Como funciona o display: inline-block | Mód01 - Aula 2012m
Aula em vídeo: Qual a diferença entre padding e margin? | Mód01 - Aula 2110m
Exercício: Em CSS, qual afirmação descreve corretamente a diferença entre padding e margin?
Aula em vídeo: Forma específica e resumida | Mód01 - Aula 2213m
Aula em vídeo: O px no CSS não é 1px da tela | Mód01 - Aula 2306m
Aula em vídeo: Detalhe nos itens do menu | Mód01 - Aula 2411m
Exercício: Qual é a forma mais indicada de criar um “quadradinho” decorativo antes do texto de um link do menu, sem adicionar um elemento vazio no HTML?
Aula em vídeo: CSS do header - Parte 2 | Mód01 - Aula 2506m
Aula em vídeo: Desafios top-top-top | Mód01 - Aula 2708m
Exercício: No desafio intermediário, qual recurso de CSS é usado para mudar o estilo de um botão quando o mouse passa por cima?
Aula em vídeo: Como mudar logo e cores do header | Mód02 - Aula 0109m
Aula em vídeo: Efeito hover no button | Mód02 - Aula 0210m
Aula em vídeo: O que é Git? | Mód02 - Aula 0308m
Aula em vídeo: Como instalar o Git? | Mód02 - Aula 0404m
Aula em vídeo: O que é repositório? | Mód02 - Aula 0506m
Aula em vídeo: Como fazer commit com Git | Mód02 - Aula 0614m
Exercício: Ao criar o arquivo index.html e querer registrar esse estado no histórico do projeto, qual sequência de comandos faz sentido para adicionar e criar um commit com mensagem?
Aula em vídeo: Como editar mensagem do commit com Git | Mód02 - Aula 0704m
Aula em vídeo: O que é GitHub? | Mód02 - Aula 0805m
Aula em vídeo: Como criar repositório no GitHub? | Mód02 - Aula 0904m
Exercício: Após criar a conta e entrar na plataforma, qual é o caminho mais direto para criar um repositório remoto novo?
Aula em vídeo: Como enviar o código para o GitHub | Mód02 - Aula 1009m
Aula em vídeo: Como clonar um repositório do GitHub | Mód02 - Aula 1105m
Aula em vídeo: O que é o GitHub pages? | Mód02 - Aula 1201m
Aula em vídeo: Como criar site no GitHub pages | Mód02 - Aula 1309m
Aula em vídeo: Como colocar seu projeto no ar com o GitHub Pages | Mód02 - Aula 1407m
Exercício: O que melhor define um componente na criação de interfaces com HTML e CSS?
Aula em vídeo: Desafios top-top-top | Mód03 - Aula 2703m
Aula em vídeo: Variação do component title | Mód04 - Aula0107m
Aula em vídeo: Commit da variação | Mód04 - Aula0201m
Aula em vídeo: Como criar o component section | Mód04 - Aula0305m
Aula em vídeo: Commit do component section | Mód04 - Aula 0402m
Aula em vídeo: HTML do component skill | Mód04 - Aula0507m
Exercício: Ao usar uma lista de descrição (DL) para representar uma skill (título + descrição), quais tags podem ser filhas diretas de dl?
Aula em vídeo: CSS do component skill | Mód04 - Aula 0609m
Aula em vídeo: Como posicionar ícone e título | Mód04 - Aula 0707m
Aula em vídeo: HTML e CSS do component progress-bar | Mód04 - Aula 0805m
Exercício: Ao definir uma altura fixa para um componente com borda, qual propriedade garante que a borda seja incluída dentro da altura definida?
Aula em vídeo: Como posicionar ícone, título e barra | Mód04 - Aula 0907m
Aula em vídeo: Commits e mais commits | Mód04 - Aula1002m
Aula em vídeo: Criando os componentes da seção skills | Mód04 - Aula 1103m
Exercício: Ao repetir um mesmo componente várias vezes no HTML para listar várias habilidades (skills), qual cuidado é mais importante para evitar que as imagens não apareçam?
Aula em vídeo: Propriedade align-items | Mód04 - Aula 1204m
Aula em vídeo: Commit do component wrapper card | Mód05 - Aula0801m
Aula em vídeo: Como adicionar um link a uma imagem | Mód05 - Aula0903m
Aula em vídeo: Commit dos links | Mód05 - Aula1001m
Aula em vídeo: Refatoração do component action | Mód05 - Aula1101m
Exercício: Ao refatorar um componente em HTML/CSS (ex.: renomear Action para MainAction), qual cuidado é essencial para não quebrar o comportamento da página?
Aula em vídeo: Refatoração do component banner | Mód05 - Aula1202m
Aula em vídeo: Refatoração do component box | Mód05 - Aula1302m
Aula em vídeo: Refatoração do component button | Mód05 - Aula1402m
Exercício: Ao padronizar estilos de botões no HTML/CSS, qual prática ajuda a evitar erros e facilitar a manutenção?
Aula em vídeo: Refatoração do component header | Mód05 - Aula1501m
Aula em vídeo: Refatoração do component section | Mód05 - Aula1602m
Aula em vídeo: Refatoração do component subtitle | Mód05 - Aula1702m
Exercício: Em uma refatoração de HTML/CSS, qual é o principal objetivo ao renomear uma classe usada em vários arquivos?
Aula em vídeo: Revisão Módulo 05 | Mód05 - Aula1801m
Aula em vídeo: Desafios top top top | Mód05 - Aula1901m
Aula em vídeo: Como criar o component description | Mód06 - Aula0107m
Aula em vídeo: CSS do component description | Mód06 - Aula0205m
Aula em vídeo: Criando a section sobre | Mód06 - Aula0302m
Aula em vídeo: Variação do component section | Mód06 - Aula0402m
Aula em vídeo: HTML do component button arrow | Mód06 - Aula0502m
Aula em vídeo: CSS do component button arrow | Mód06 - Aula0605m
Aula em vídeo: Como criar setas com CSS - Parte I | Mód06 - Aula0709m
Exercício: Qual técnica permite criar uma seta usando apenas CSS, sem imagem?
Aula em vídeo: Como criar setas com CSS - Parte II | Mód06 - Aula0802m
Aula em vídeo: Variação do component button arrow | Mód06 - Aula0902m
Aula em vídeo: Criando o component node-card | Mód06 - Aula1003m
Exercício: Para estruturar um componente reutilizável que representa uma experiência (empresa + ano + logo), qual tag semântica é uma boa escolha?
Aula em vídeo: CSS do component node-card | Mód06 - Aula1107m
Aula em vídeo: CSS do component node-card - Parte II | Mód06 - Aula1210m
Aula em vídeo: Como criar linha do tempo na section sobre | Mód06 - Aula1303m
Exercício: Ao adicionar novas logos em uma seção do portfólio (linha do tempo), qual prática em HTML e CSS é a mais indicada para garantir organização e consistência visual?
Aula em vídeo: Variação do component node-card | Mód06 - Aula1402m
Aula em vídeo: Variação de cor do component node-card | Mód06 - Aula1502m
Aula em vídeo: Como posicionar o button do carousel | Mód06 - Aula1611m
Aula em vídeo: Como alinhar os cards no carousel | Mód06 - Aula1704m
Aula em vídeo: Como inserir uma linha na linha do tempo #CSS | Mód06 - Aula1803m
Aula em vídeo: Como criar linha pontilhada #CSS | Mód06 - Aula1906m
Exercício: Ao criar uma linha horizontal com espaçamento fixo nas extremidades, qual recurso do CSS permite calcular uma largura como 100% menos um valor em px (ex.: 80px)?
Aula em vídeo: Resolvendo bug na seção de projetos | Mód06 - Aula2003m
Aula em vídeo: Movendo card de um carousel | Mód06 - Aula2110m
Aula em vídeo: Como resolver bug de scroll horizontal | Mód06 Aula2214m
Exercício: Qual propriedade CSS é usada para esconder o conteúdo que ultrapassa os limites do elemento pai, evitando que ele continue visível fora da caixa?
Aula em vídeo: Seu primeiro JavaScript | Mód06 Aula2329m
Aula em vídeo: Revisão do Módulo 0602m
Aula em vídeo: Criar HTML do footer | Mód07 Aula0107m
Aula em vídeo: Criar CSS do rodapé (footer) | Mód07 Aula0205m
Aula em vídeo: Commit do main-footer | Mód07 Aula0302m
Aula em vídeo: Desafios top top top do Módulo 0602m
Exercício: No desafio avançado, qual validação extra é exigida além de verificar se os campos não estão vazios?
Aula em vídeo: Cria HTML do formulário | Mód07 Aula0412m
Aula em vídeo: Cria component main-label | Mód07 Aula0505m
Aula em vídeo: Commit main-label | Mód07 Aula0601m
Exercício: Qual é a sequência correta para enviar alterações locais para o repositório remoto e atualizar o site publicado?
Aula em vídeo: Cria component main-input | Mód07 Aula0707m
Aula em vídeo: Commit main-input | Mód07 Aula0801m
Aula em vídeo: Variação do main-input | Mód07 Aula0902m
Exercício: Ao criar uma variação para um componente de input que deve se comportar como uma textarea, qual abordagem mantém mais liberdade e reaproveitamento no CSS?
Aula em vídeo: Commit da variação | Mód 07 Aula 1001m
Aula em vídeo: Variação do Main Button | Mód 07 Aula 1102m
Aula em vídeo: Commit do Main Button | Mód 07 Aula 1201m
Exercício: Qual sequência de comandos Git registra e envia para o repositório uma alteração feita no CSS de um botão (ex.: efeito de hover)?
Aula em vídeo: Alinha Form e Componentes Filhos | Mód 07 Aula 1305m
Aula em vídeo: Commit Main Form | Mód 07 Aula 1401m
Aula em vídeo: Bug do Main Button | Mód 07 Aula 1501m
Exercício: Ao corrigir um botão full que cresce demais no :hover, qual ajuste de CSS reduz o aumento sem remover o efeito?
Aula em vídeo: Commit Bug Main Button | Mód 07 Aula 1601m
Aula em vídeo: Title no Main Form | Mód 07 Aula 1702m
Aula em vídeo: Commit do Title | Mód 07 Aula 1801m
Exercício: Após alterar o arquivo e adicionar o elemento , qual comando envia as mudanças para o repositório remoto?
Aula em vídeo: Validação do Main Form | Mód 07 Aula 1903m
Aula em vídeo: Revisão | Mód 07 Aula 2002m
Aula em vídeo: Desafio Final | Mód 07 Aula 2103m
Exercício: No desafio final, qual é a proposta principal para treinar HTML e CSS após aprender o básico?