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

Curso gratuito de HTML5 e CSS3 do básico ao avançado, com projeto responsivo, semântica, formulários, acessibilidade e publicação do site.

Neste curso gratuito, aprenda sobre

  • Introdução e preparação do ambiente
  • Fundamentos de HTML5
  • Introdução ao CSS e orientação de estudos
  • Primeiro projeto: site responsivo (visão geral)
  • Projeto prático: construindo as seções do site
  • Refatoração, acessibilidade e publicação
  • CSS avançado: posicionamento e interações
  • Formulários em HTML5 e estilização

Descrição do curso

O curso online gratuito Html5 e Css3 - Do Básico ao Avançado é uma opção completa para quem quer iniciar no front-end e evoluir até a criação de páginas modernas, bem estruturadas e com visual profissional. Você aprende a montar a base de um site com HTML5, entendendo como usar tags, atributos, links, imagens e listas para organizar o conteúdo de forma clara.

Ao avançar, o foco passa para a construção semântica de páginas, melhorando a leitura do código e a estrutura de seções comuns de um site, como cabeçalho, navegação, conteúdo principal e rodapé. Em paralelo, você entra no CSS3 para estilizar elementos, ajustar layout e controlar posicionamento, criando interfaces mais consistentes e agradáveis em diferentes tamanhos de tela.

Na prática, o aprendizado é aplicado em um projeto responsivo, passando por etapas como criação de seções visuais, ajustes de layout, refatoração do código e melhorias de acessibilidade. Também há conteúdo voltado a formulários, incluindo campos, seleções e componentes nativos, além de técnicas de estilização para deixar a experiência mais alinhada ao design do site. Para completar, você vê como publicar o projeto e colocar seu site no ar, consolidando um fluxo de desenvolvimento do início ao fim.

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