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

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

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

Descrição do curso

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?

Este curso gratuito inclui:

6 horas e 50 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso