Como criar uma página HTML5 com a estrutura correta?

Use a declaração e inclua as tags html, head e body.

Qual extensão do VS Code atualiza o navegador automaticamente ao editar HTML e CSS?

A extensão Live Server atualiza a página no navegador ao salvar as alterações.

Como publicar um site HTML e CSS gratuitamente na Netlify?

Envie a pasta do projeto para a Netlify ou conecte um repositório Git para publicar o site.

Imagem do Curso gratuito Html5 e Css3 - Do Básico ao Avançado

Curso online gratuito Html5 e Css3 - Do Básico ao Avançado

Name: Html5 e Css3 - Do Básico ao Avançado
Availability: InStock

Duração do curso online: 6 horas e 50 minutos

Novo

Aprenda a criar páginas e sites responsivos com HTML5 e CSS3 do básico ao avançado. Curso online gratuito com projeto prático e dicas de acessibilidade.

Neste curso gratuito, aprenda sobre

Configurar ambiente de desenvolvimento e usar VS Code com extensões (ex.: Live Server)
Entender estrutura base do HTML5 e declarar corretamente o doctype
Usar tags e atributos essenciais: br, hr, img (src/alt) e boas práticas
Criar listas ordenadas e não ordenadas com ul/ol/li
Trabalhar com links e âncoras, incluindo abrir em nova aba com target="_blank"
Aplicar HTML semântico: header, nav, main, section, footer, div
Aplicar CSS externo e organizar estilos seguindo boas práticas
Construir layout responsivo com Flexbox (alinhamento e colunas)
Usar background-image para imagens de fundo com texto sobreposto
Refatorar CSS para reduzir repetição e manter consistência de estilos/hover
Melhorar acessibilidade com figure/figcaption e atributos adequados
Dominar position (relative/absolute/fixed) e criar header fixo no topo
Usar pseudo-classes (:hover) e pseudo-elementos (::before/::after) corretamente
Criar e estilizar formulários: action, name, select multiple, datalist, checkbox checked

Sobre o curso online gratuito

Quer entrar de vez no desenvolvimento front-end e construir páginas bonitas, rápidas e organizadas? Neste curso online gratuito de HTML5 e CSS3, você evolui do básico ao avançado com foco no que realmente faz diferença no dia a dia: estrutura bem feita, estilos consistentes, boas práticas e um jeito profissional de montar interfaces para a web.

Você começa criando sua primeira página e entende, na prática, como tags e atributos funcionam, como escrever um HTML5 mais semântico e por que isso melhora manutenção, SEO e acessibilidade. Ao longo do caminho, o curso também te ajuda a configurar um ambiente de desenvolvimento eficiente, usando um editor moderno e extensões que aceleram sua produtividade enquanto você codifica.

Depois de dominar os fundamentos, você entra na parte que transforma conhecimento em portfólio: a construção de um site responsivo completo, passando por seções essenciais como header, área de destaque, galeria, conteúdo e footer. Você aprende a organizar o layout com Flexbox, a trabalhar com imagens e fundos, a aplicar posicionamento com segurança e a usar pseudo-classes e pseudo-elementos para dar acabamento e interatividade sem complicação.

Além do visual, o curso reforça um ponto-chave para quem quer entregar projetos de verdade: qualidade. Você pratica refatoração de código, reduz repetição no CSS, melhora a semântica do HTML e aplica ajustes que elevam a acessibilidade do site, tornando a experiência melhor para mais pessoas e mais compatível com padrões modernos.

Para completar, você cria e estiliza formulários com recursos nativos do HTML, aprende a usar elementos como select, datalist e checkbox e entende como atributos importantes organizam o envio de dados. E, ao final, você vê como publicar seu projeto em um serviço de hospedagem de sites estáticos, colocando seu trabalho no ar de forma rápida e confiável.

Se você busca uma base sólida para seguir em frameworks e bibliotecas do ecossistema front-end, ou quer começar com o pé direito construindo projetos reais, este curso é o caminho certo para evoluir com clareza, prática e consistência.

Conteúdo do curso

Aula em vídeo: Curso de Html5 e Css3 - Básico oau avançado - 01 - Introdução 09m
Exercício: Qual é um dos principais objetivos ao seguir boas práticas no desenvolvimento com HTML5 e CSS3?
Aula em vídeo: Curso de Html5 e Css3 - 02 - Ambiente de desenvolvimento 01m
Exercício: Qual ferramenta é recomendada para escrever e editar códigos em HTML5 e CSS3 durante o curso?
Aula em vídeo: Curso Html5 e Css3 - 03 - Extensões para Visual Studio Code 09m
Exercício: Qual extensão do Visual Studio Code atualiza automaticamente a página no navegador a cada alteração salva no HTML/CSS, evitando recarregar manualmente?

Aula em vídeo: Curso de Html5 e Css3 - 04 - Tags e atributos 06m
Exercício: No HTML, qual alternativa descreve melhor o que é o HTML5?
Aula em vídeo: Curso de Html5 e Css3 - 05 - Criando a primeira página Html5 17m
Exercício: Qual é a forma correta de indicar, no topo do arquivo, que o documento é HTML5?
Aula em vídeo: Curso de Html5 e Css3 - 06 - Tags Br e Hr 04m
Exercício: Qual é a forma correta de usar a tag
em um documento HTML5?
Aula em vídeo: Curso de Html5 e Css3 - 07 - Listas 03m
Exercício: Qual é a estrutura correta para criar uma lista não ordenada em HTML?
Aula em vídeo: Curso de Html5 e Css3 - 08 - Imagens com a tag img 06m
Exercício: Qual tag e atributos são essenciais para inserir uma imagem em uma página HTML e garantir acessibilidade?
Aula em vídeo: Curso de Html5 e Css3 - 09 - Âncoras e Links 09m
Exercício: Qual é a diferença principal entre âncoras e links em HTML?
Aula em vídeo: Curso Html5 e Css3 - 10 - Semântica, Tags Header, Footer, Nav, Section, Main, Div 15m
Exercício: Qual tag deve envolver apenas o conteúdo principal de uma página, sem incluir itens que se repetem em outras páginas (como cabeçalho e rodapé)?

Aula em vídeo: Curso de Html5 e Css3 - 11 - Introdução ao CSS 09m
Exercício: Qual é a forma mais recomendada de aplicar CSS em um documento HTML?
Aula em vídeo: Curso de Html5 e Css3 - 12- Recado do Nerd 02m
Exercício: Por que é importante dominar a base de HTML e CSS antes de avançar para tecnologias mais modernas de front-end?

Aula em vídeo: Curso de Html5 e Css3 - 13 - Primeiro projeto - Site responsivo 02m
Exercício: Qual é um objetivo importante ao finalizar o primeiro projeto em HTML5 e CSS3?

Aula em vídeo: Curso de Html5 e Css3 - 14 - Projeto prático - Header 43m
Exercício: Ao aplicar Flexbox no header para alinhar o logo e a navegação na mesma linha, qual propriedade deve ser usada no CSS?
Aula em vídeo: Curso de Html5 e Css3 - 15 - Projeto prático - Hero 22m
Exercício: Qual propriedade CSS é mais indicada para aplicar uma imagem como fundo de uma seção, mantendo o texto por cima?
Aula em vídeo: Curso de Html5 e Css3 - 16 - Projeto prático - Gallery 36m
Aula em vídeo: Curso de Html5 e Css3 - 17 - Projeto prático - History 25m
Exercício: Ao usar Flexbox para criar duas colunas (texto e imagem), qual configuração é necessária para que a propriedade flex aplicada nos filhos funcione corretamente?
Aula em vídeo: Curso de Html5 e Css3 - 18 - Projeto prático - Footer 10m
Exercício: Qual atributo HTML deve ser usado no link do rodapé para abrir a página em uma nova aba?

Aula em vídeo: Curso de Html5 e Css3 - 19 - Projeto prático - Code Refactoring 22m
Exercício: Qual prática de CSS ajuda a reduzir repetição ao aplicar estilos semelhantes (como cor e hover) a links em seções com fundo escuro?
Aula em vídeo: Curso de Html5 e Css3 - 20 - Projeto prático - Melhorando a acessibilidade do site 39m
Exercício: Qual combinação de tags HTML é a mais apropriada para representar uma imagem com sua legenda, dando mais significado semântico ao conteúdo?
Aula em vídeo: Curso de Html5 e Css3 - 21 - Projeto prático - Publicando na Netlify 06m
Exercício: Ao publicar um projeto HTML5/CSS3 em um serviço de hospedagem de sites estáticos, qual ação normalmente disponibiliza o site rapidamente na web?

Aula em vídeo: Curso de Html5 e Css3 - 22 - Como funciona a propriedade css position 23m
Exercício: Ao usar position: absolute em um link, o que faz ele ser posicionado em relação ao footer (e não ao documento inteiro)?
Aula em vídeo: Curso de Html5 e Css3 - 23 - Projeto prático - Fixed Header 04m
Exercício: Qual combinação de CSS fixa o header no topo da página e garante que ele ocupe toda a largura?
Aula em vídeo: Curso de Html5 e Css3 - 24 - Pseudo-classes CSS 12m
Exercício: Qual pseudo-classe do CSS permite aplicar estilos quando o usuário passa o mouse sobre um elemento (ex.: botão)?
Aula em vídeo: Curso de Html5 e Css3 - 25 - Pseudo-elementos CSS 13m
Exercício: Qual é a forma recomendada no CSS3 para diferenciar pseudo-elementos de pseudoclasses na sintaxe?

Aula em vídeo: Curso de Html5 e Css3 - 26 - Formulários HTML 12m
Exercício: Qual atributo da tag
define para qual página os dados do formulário serão enviados (simulando o processamento)?
Aula em vídeo: Curso de Html5 e Css3 - 27 - Estilizando formulários Html com Css 15m
Exercício: Qual propriedade CSS permite manter o redimensionamento do textarea apenas na direção vertical, evitando alterar a largura?
Aula em vídeo: Curso de Html5 e Css3 - 28 - Form widgets nativos 06m
Exercício: Qual atributo do input é usado para identificar o campo no envio do formulário e permitir tratar o dado no back-end?
Aula em vídeo: Curso de Html5 e Css3 - 29 - Formulários - Select 07m
Exercício: Qual atributo do elemento para exibir sugestões ao digitar?
Aula em vídeo: Curso de Html5 e Css3 - 31 - Formulários - Checkbox 03m
Exercício: Qual atributo do elemento input permite que uma opção de checkbox já venha marcada ao carregar a página?

Aprenda sobreHTML

Aprenda HTML do zero com nossa seleção de cursos online gratuitos e com certificado. Domine tags, estrutura de páginas, formulários, tabelas, links, imagens e boas práticas para criar sites modernos. Encontre o curso de HTML ideal, desenvolva habilidades valorizadas no mercado e comece agora sua jornada no desenvolvimento web.

Aprenda sobreCSS

Aprenda CSS com cursos online gratuitos e com certificado, ideais para iniciantes e profissionais que desejam criar sites modernos, responsivos e atraentes. Explore conteúdos sobre seletores, cores, layouts, Flexbox, Grid, animações e boas práticas de desenvolvimento web. Escolha seu curso grátis de CSS, estude no seu ritmo e fortaleça seu currículo.