Imagem do Curso gratuito Web Fundamentos: HTML e CSS com Projetos

Curso online gratuitoWeb Fundamentos: HTML e CSS com Projetos

Duração do curso online: 24 horas e 59 minutos

Novo

Curso gratuito de HTML e CSS com projetos práticos: semântica, layouts, responsivo, Flexbox, Grid, efeitos e animações para iniciar no Front-End.

Neste curso gratuito, aprenda sobre

  • Introdução ao HTML e Estrutura de Documento
  • Fundamentos de CSS: Regras, Classes e Box Model
  • Imagens, Semântica e Layouts com Display, Float e Box Sizing (Projeto 1)
  • Posicionamento com CSS e Projeto Fashion
  • Listas, Overflow e Tabelas
  • Formulários: Semântica, Tipos de Input e Estilização
  • Efeitos Visuais e Tipografia com CSS
  • Projeto Strata: HTML Semântico e CSS Completo
  • Seletores Avançados, Pseudo-classes e Acessibilidade
  • Design Responsivo: Media Queries e Projeto Responsivo
  • Mídias Incorporadas: Áudio, Vídeo, Iframe e Figure
  • Imagens Responsivas com Picture e Srcset
  • Cores e Gradientes Avançados
  • Layouts com Flexbox
  • Layouts com CSS Grid e Desafio da Calculadora
  • Semântica Avançada e Especificidade no CSS
  • Animações com CSS (Transitions e Keyframes)

Descrição do curso

Web Fundamentos: HTML e CSS com Projetos é um curso online gratuito para quem quer sair do zero e construir páginas modernas com base sólida em Front-End. Ao longo das aulas, você aprende a estruturar conteúdo com HTML semântico e a estilizar interfaces com CSS, entendendo como cada escolha afeta legibilidade, organização do código e experiência do usuário.

A proposta é prática: você evolui de marcação básica para layouts completos, trabalhando com imagens, menus, cards, posicionamento, tipografia e componentes comuns do dia a dia. Também aprofunda conceitos essenciais como box model, seletores, pseudo-classes e pseudo-elementos, além de técnicas para criar efeitos visuais com sombras, gradientes e transições suaves.

O curso ainda avança para temas indispensáveis no desenvolvimento atual, como design responsivo com media queries, incorporação de mídias e recursos de imagens responsivas. Na parte de layout, você consolida conhecimentos com Flexbox e CSS Grid, aprendendo a organizar áreas, alinhar elementos, controlar espaçamentos e adaptar a página para diferentes tamanhos de tela com mais previsibilidade.

Para fechar, você explora especificidade, boas práticas de semântica e animações em CSS, ganhando repertório para criar interfaces mais dinâmicas e profissionais. Uma ótima escolha para montar portfólio, reforçar fundamentos e ganhar confiança para seguir para frameworks e projetos mais avançados.

Conteúdo do curso

  • Aula em vídeo: Seção 1 - Aula 1 - CURSO HTML e CSS - Apresentação 06m
  • Exercício: Qual é o foco principal do treinamento em Web Fundamentos?
  • Aula em vídeo: Seção 1 - Aula 2 - CURSO HTML e CSS - Introdução 19m
  • Aula em vídeo: Seção 1 - Aula 3 - Primeiro HTML 13m
  • Aula em vídeo: Seção 1 - Aula 4 - Algumas Tags principais 14m
  • Exercício: Qual é o objetivo principal das tags de título (H1 a H6) no HTML?
  • Aula em vídeo: Seção 1 - Aula 5 - Principais tags - mão na massa 16m
  • Aula em vídeo: Seção 1 - Aula 6 - Correção de exercício 04m
  • Aula em vídeo: Seção 1 - Aula 7 - Estrutura base - teoria 07m
  • Exercício: Qual é a função principal da tag head em um documento HTML?
  • Aula em vídeo: Seção 1 - Aula 8 - Estrutura base - mão na massa 08m
  • Aula em vídeo: Seção 1 - Aula 9 - Para que servem as Metatags? 03m
  • Aula em vídeo: Seção 2 - Aula 1 - As folhas de estilo em cascata 13m
  • Exercício: Qual é a forma mais recomendada de aplicar CSS em um site com várias páginas, visando facilitar a manutenção?
  • Aula em vídeo: Seção 2 - Aula 2 - Primeiras regras de CSS 15m
  • Aula em vídeo: Seção 2 - Aula 3 - Adicionando Classes 05m
  • Aula em vídeo: Seção 2 - Aula 4 - Background ou background-color? 00m
  • Exercício: Ao definir apenas a cor de fundo em CSS, qual propriedade é a mais indicada para usar?
  • Aula em vídeo: Seção 2 - Aula 5 - Box-model 12m
  • Aula em vídeo: Seção 2 - Aula 6 - Box-model - parte 2 06m
  • Aula em vídeo: Seção 2 - Aula 7 - Pseudo-classes e list-style 03m
  • Aula em vídeo: Seção 2 - Aula 8 - Praticando 13m
  • Aula em vídeo: Seção 2 - Aula 9 - Exercício. Centralizar na tela 07m
  • Aula em vídeo: Seção 2 - Aula 10 - Exercício. HTML 12m
  • Exercício: Qual é a sintaxe correta para criar comentários no CSS?
  • Aula em vídeo: Seção 2 - Aula 11 - Exercício. CSS 12m
  • Aula em vídeo: Seção 4 - Aula 1 - CSS Position 09m
  • Aula em vídeo: Seção 4 - Aula 2 - CSS Position na prática 09m
  • Exercício: Ao usar position: absolute em um elemento, o que faz ele passar a se posicionar em relação ao bloco laranja (pai) em vez de se posicionar em relação ao documento?
  • Aula em vídeo: Seção 4 - Aula 3 - Projeto Fashion - início 05m
  • Aula em vídeo: Seção 4 - Aula 4 - Projeto Fashion - HTML 15m
  • Aula em vídeo: Seção 4 - Aula 5 - Projeto Fashion - CSS - parte 1 18m
  • Exercício: Ao posicionar um menu com position: absolute dentro do cabeçalho, o que é necessário no elemento pai para que o posicionamento (top/left) seja relativo a ele, e não ao documento inteiro?
  • Aula em vídeo: Seção 4 - Aula 6 - Projeto Fashion - CSS - parte 2 11m
  • Aula em vídeo: Seção 5 - Aula 1 - Listas aninhadas e de definição 03m
  • Aula em vídeo: Seção 5 - Aula 2 - Listas aninhadas e de definição na prática 08m
  • Exercício: Qual seletor CSS oculta apenas a lista (ol/ul) que está dentro de um item (li) de outra lista, sem esconder a lista principal?
  • Aula em vídeo: Seção 5 - Aula 3 - Overflow 06m
  • Aula em vídeo: Seção 5 - Aula 4 - Tabelas 06m
  • Aula em vídeo: Seção 5 - Aula 5 - Tabelas na prática 10m
  • Exercício: Em uma tabela HTML, qual atributo deve ser usado para fazer uma célula (TD) ocupar 3 colunas, como no rodapé com uma frase única?
  • Aula em vídeo: Seção 6 - Aula 1 - Formulário de busca no Google 14m
  • Aula em vídeo: Seção 6 - Aula 2 - Semântica em formulários 06m
  • Aula em vídeo: Seção 6 - Aula 3 - CSS em formulários 15m
  • Exercício: Em um formulário de login, qual atributo do
    é mais indicado para evitar que usuário e senha apareçam na URL?
  • Aula em vídeo: Seção 6 - Aula 4 - Tipos de entrada de dados - parte 1 16m
  • Aula em vídeo: Seção 6 - Aula 5 - Tipos de entrada de dados - parte 205 05 23m
  • Aula em vídeo: Seção 6 - Aula 6 - Tipos de entrada de dados - parte 3 02m
  • Exercício: Qual é a finalidade correta do atributo HTML placeholder em um input?
  • Aula em vídeo: Seção 7 - Aula 1 - Quais efeitos veremos? 01m
  • Aula em vídeo: Seção 7 - Aula 2 - CSS Border-radius 07m
  • Aula em vídeo: Seção 7 - Aula 3 - CSS Box-shadow 05m
  • Exercício: Na propriedade CSS box-shadow, o que acontece ao usar valores negativos no deslocamento do eixo X e do eixo Y?
  • Aula em vídeo: Seção 7 - Aula 4 - CSS text-shadow 04m
  • Aula em vídeo: Seção 7 - Aula 5 - CSS gradiente linear 15m
  • Aula em vídeo: Seção 7 - Aula 6 - Fontes customizadas 11m
  • Exercício: Qual é a forma correta de definir e usar uma fonte customizada em CSS?
  • Aula em vídeo: Seção 7 - Aula 7 - CSS transitions (transições suaves) 14m
  • Aula em vídeo: Seção 8 - Aula 1 - Projeto Strata - início 13m
  • Aula em vídeo: Seção 8 - Aula 2 - Seção Recent Works 07m
  • Exercício: Ao estruturar uma área de “trabalhos recentes” com vários cards (imagem + título + texto), quais elementos HTML semânticos são mais adequados para separar a seção e representar cada card?
  • Aula em vídeo: Seção 8 - Aula 3 - HTML Get in Touch 09m
  • Aula em vídeo: Seção 8 - Aula 4 - HTML - Elements - parte 1 20m
  • Aula em vídeo: Seção 8 - Aula 5 - HTML - Elements - parte 2 - Links 05m
  • Aula em vídeo: Seção 8 - Aula 6 -HTML - Elements - parte 3 - Tabelas 01m
  • Aula em vídeo: Seção 8 - Aula 7 - HTML - Elements - parte 4 - buttons 11m
  • Aula em vídeo: Seção 8 - Aula 8 - HTML - Elements - parte 5 - Imagens 05m
  • Exercício: Para organizar uma seção de imagens em HTML e facilitar a formatação no CSS, qual estrutura é a mais adequada?
  • Aula em vídeo: Seção 8 - Aula 9 - CSS - Início 14m
  • Aula em vídeo: Seção 8 - Aula 10 - CSS - Estrutura 21m
  • Aula em vídeo: Seção 8 - Aula 11 - CSS - parte 1 - base 17m
  • Exercício: Para evitar que a borda inferior do link desapareça de forma brusca ao tirar o mouse, qual ajuste é o mais indicado?
  • Aula em vídeo: Seção 8 - Aula 12 - CSS - parte 2 - listas 14m
  • Aula em vídeo: Seção 8 - Aula 13 - CSS - parte 3 - botões 09m
  • Aula em vídeo: Seção 8 - Aula 14 - CSS - parte 4 - tabelas 11m
  • Exercício: Qual propriedade CSS é usada para remover o espaço entre as bordas das células de uma tabela, fazendo parecer uma borda única?
  • Aula em vídeo: Seção 8 - Aula 15 - CSS - parte 5 - Get in Touch 23m
  • Aula em vídeo: Seção 8 - Aula 16 - CSS - parte 6 - arrumar o formulário 05m
  • Aula em vídeo: Seção 8 - Aula 17 - CSS - parte 7 - ajustes 10m
  • Aula em vídeo: Seção 8 - Aula 18 - CSS - parte 8 - Galeria de imagens - 3 colunas 12m
  • Aula em vídeo: Seção 8 - Aula 19 - CSS - parte 9 - Corrigir grid 10m
  • Aula em vídeo: Seção 8 - Aula 20 - CSS - parte 10 - hover nos botões 05m
  • Exercício: No CSS, qual propriedade pode ser usada para criar uma animação suave ao passar o mouse (hover) em botões e links, aplicando a transição a qualquer propriedade alterada?
  • Aula em vídeo: Seção 8 - Aula 21 - CSS - parte 11 - footer 04m
  • Aula em vídeo: Seção 8 - Aula 22 - Resultado Final 02m
  • Aula em vídeo: Seção 8 - Aula 23 - Refatoração 11m
  • Exercício: Qual é a forma mais correta de esconder um texto apenas visualmente, mantendo-o acessível para leitores de tela?
  • Aula em vídeo: Seção 9 - Aula 1 - Seletores compostos - parte 1 11m
  • Aula em vídeo: Seção 9 - Aula 2 - Seletores compostos - parte 2 17m
  • Aula em vídeo: Seção 9 - Aula 3 - CSS content, ::after e ::before 07m
  • Exercício: Ao usar as pseudoelementos ::before e ::after, qual propriedade é obrigatória para que o conteúdo seja inserido (mesmo que vazio)?
  • Aula em vídeo: Seção 9 - Aula 4 - pseudo-classes e pseudo-elementos - parte 1 06m
  • Aula em vídeo: Seção 9 - Aula 5 - pseudo-classes e pseudo-elementos - parte 2 13m
  • Aula em vídeo: Seção 9 - Aula 6 - pseudo-classes e pseudo-elementos - parte 3 08m
  • Exercício: Qual a diferença principal entre :nth-child() e :nth-of-type() ao selecionar parágrafos quando há outras tags (como
    ) no meio?
  • Aula em vídeo: Seção 9 - Aula 7 - pseudo-classes e pseudo-elementos - parte 4 05m
  • Aula em vídeo: Seção 9 - Aula 8 - CSS propriedade transform 25m
  • Aula em vídeo: Seção 9 - Aula 9 - Exercício Prático 20m
  • Exercício: Qual seletor CSS permite inserir um ícone após links que abrem em nova aba, usando o atributo target="_blank"?
  • Aula em vídeo: Seção 9 - Aula 10 - Desafio checkbox lindão 03m
  • Aula em vídeo: Seção 9 - Aula 11 - Resolução do DESAFIO 07m
  • Aula em vídeo: Seção 9 - Aula 12 - Desafio - Será que nosso checkbox está acessível? 05m
  • Exercício: Ao ocultar um input type=checkbox personalizado, qual abordagem mantém a navegação por teclado (Tab/Espaço) e melhora a acessibilidade?
  • Aula em vídeo: Seção 9 - Aula 13 - Efeito hover lindão em thumbnails 12m
  • Aula em vídeo: Seção 10 - Aula 1 - Introdução ao design responsivo RWD 12m
  • Aula em vídeo: Seção 10 - Aula 2 - CSS media types 10m
  • Exercício: Ao criar um CSS específico para impressão, qual atributo no elemento permite aplicar a folha de estilos apenas ao imprimir a página?
  • Aula em vídeo: Seção 10 - Aula 3 - media queries parte 1 11m
  • Aula em vídeo: Seção 10 - Aula 4 - media queries parte 2 08m
  • Aula em vídeo: Seção 10 - Aula 5 - media queries parte 3 22m
  • Exercício: Qual é a principal diferença entre as unidades CSS em e rem?
  • Aula em vídeo: Seção 10 - Aula 6 - Apresentar projeto Responsivo 05m
  • Aula em vídeo: Seção 10 - Aula 7 - Estrutura do projeto Responsivo 12m
  • Aula em vídeo: Seção 10 - Aula 8 - CSS do projeto - parte 1 09m
  • Exercício: Qual é o principal objetivo de utilizar o arquivo normalize.css em um projeto?
  • Aula em vídeo: Seção 10 - Aula 9 - CSS do projeto - parte 2 08m
  • Aula em vídeo: Seção 10 - Aula 10 - CSS do projeto - parte 3 15m
  • Aula em vídeo: Seção 10 - Aula 11 - CSS do projeto - parte 4 04m
  • Exercício: Qual propriedade CSS foi usada para aumentar o espaçamento entre as letras do título (H3) ao aplicar uma classe específica?
  • Aula em vídeo: Seção 10 - Aula 12 - CSS do projeto - parte 5 03m
  • Aula em vídeo: Seção 10 - Aula 13 - CSS responsivo - parte 1 10m
  • Aula em vídeo: Seção 10 - Aula 14 - CSS responsivo - parte 2 05m
  • Exercício: Ao criar um layout com colunas usando CSS, qual problema comum ocorre quando elementos internos usam float e como é resolvido?
  • Aula em vídeo: Seção 10 - Aula 15 - CSS responsivo - parte 3 06m
  • Aula em vídeo: Seção 10 - Aula 16 - CSS responsivo - parte 4 07m
  • Aula em vídeo: Seção 10 - Aula 17 - CSS responsivo - parte 5 11m
  • Exercício: Por que é recomendado inserir um ícone em SVG no HTML em vez de usar PNG em telas retina?
  • Aula em vídeo: Seção 11 - Aula 1 - Incorporar conteúdo 00m
  • Aula em vídeo: Seção 11 - Aula 2 - TAG AUDIO 07m
  • Aula em vídeo: Seção 11 - Aula 3 - TAG VIDEO 04m
  • Exercício: Qual atributo na tag
  • Aula em vídeo: Seção 11 - Aula 4 - TAG IFRAME 06m
  • Aula em vídeo: Seção 11 - Aula 5 - TAG FIGURE 03m
  • Aula em vídeo: Seção 12 - Aula 1 - picture, source, srcset e sizes 14m
  • Exercício: Para tornar imagens de conteúdo verdadeiramente responsivas (mudando o arquivo conforme o contexto), qual abordagem é a mais indicada?
  • Aula em vídeo: Seção 12 - Aula 2 - atributo type 02m
  • Aula em vídeo: Seção 12 - Aula 3 - TAG PICTURE 11m
  • Aula em vídeo: Seção 13 - Aula 1 - hsl vs rgb 03m
  • Exercício: No modelo de cores HSL, o que o parâmetro Hue (Tom) representa?
  • Aula em vídeo: Seção 13 - Aula 2 -preparando o exercício com CSS counter 04m
  • Aula em vídeo: Seção 13 - Aula 3 - gradientes radiais - parte 1 22m
  • Aula em vídeo: Seção 13 - Aula 4 - gradientes radiais - parte 2 06m
  • Exercício: Ao combinar uma imagem de fundo com um gradiente radial no CSS, como garantir que o gradiente fique sobre a imagem e apenas na parte de cima?
  • Aula em vídeo: Seção 14 - Aula 1 - flexbox - introdução 06m
  • Aula em vídeo: Seção 14 - Aula 2 - css flexbox: propriedades aplicadas ao flexcontainer 20m
  • Aula em vídeo: Seção 14 - Aula 3 - css flexbox: propriedades aplicadas ao flexitens 11m
  • Exercício: Em um layout com Flexbox, qual propriedade aplicada nos itens filhos faz com que um elemento ocupe o espaço livre restante no container?
  • Aula em vídeo: Seção 14 - Aula 4 - css flexbox: Mudando a ordem e o alinhamento de elementos individuais 05m
  • Aula em vídeo: Seção 14 - Aula 5 - css flexbox: cross axis vs main axis 05m
  • Aula em vídeo: Seção 14 - Aula 6 - css Flexbox na prática 05m
  • Exercício: Para alinhar três cards lado a lado usando Flexbox, em qual elemento deve ser aplicado o display: flex?
  • Aula em vídeo: Seção 15 - Aula 1 - Introdução ao CSS Grid 04m
  • Aula em vídeo: Seção 15 - Aula 2 - Suporte do CSS Grid 02m
  • Aula em vídeo: Seção 15 - Aula 3 - grid-templates 05m
  • Exercício: No CSS Grid, quais propriedades definem explicitamente a quantidade e o tamanho de colunas e linhas do grid?
  • Aula em vídeo: Seção 15 - Aula 4 - grid-gap 03m
  • Aula em vídeo: Seção 15 - Aula 5 - nova unidade de medida: fr 03m
  • Aula em vídeo: Seção 15 - Aula 6 - Posicionando gridItens - parte 1 07m
  • Exercício: No CSS Grid, qual valor pode ser usado para fazer um item terminar sempre na última grid line, mesmo que novas colunas sejam adicionadas?
  • Aula em vídeo: Seção 15 - Aula 7 - Posicionando gridItens - parte 2 02m
  • Aula em vídeo: Seção 15 - Aula 8 - Criar uma estrutura de layout usando CSS Grid 08m
  • Aula em vídeo: Seção 15 - Aula 9 - grid-template-areas e grid-area 07m
  • Exercício: No CSS Grid, qual é a função principal de usar grid-template-areas junto com grid-area?
  • Aula em vídeo: Seção 15 - Aula 10 - grid-lines nomeadas - parte 1 12m
  • Aula em vídeo: Seção 15 - Aula 11 - grid-lines nomeadas - parte 2 03m
  • Aula em vídeo: Seção 15 - Aula 12 - auto-fill vs auto-fit 10m
  • Exercício: No CSS Grid, ao usar repeat(auto-fill, minmax(100px, 1fr)), qual comportamento melhor descreve o auto-fill?
  • Aula em vídeo: Seção 15 - Aula 13 - auto-rows 03m
  • Aula em vídeo: Seção 15 - Aula 14 - CSS Grid - Proposta de Desafio: Calculadora 02m
  • Aula em vídeo: Seção 15 - Aula 15 - Resolução do desafio: calculadora 11m
  • Exercício: Em um layout de calculadora feito com CSS Grid, qual configuração cria 4 colunas iguais no container?
  • Aula em vídeo: Seção 16 - Aula 1 - Um pouco mais sobre semântica 15m
  • Aula em vídeo: Seção 16 - Aula 2 - Um pouco mais sobre CSS 01m
  • Aula em vídeo: Seção 16 - Aula 3 - Especificidade no CSS - parte 1 25m
  • Exercício: Quando duas regras de CSS entram em conflito, qual seletor tende a ter maior especificidade e, portanto, prevalecer?
  • Aula em vídeo: Seção 16 - Aula 4 - Especificidade no CSS - parte 2 10m
  • Aula em vídeo: Seção 16 - Aula 5 - Altura de 100% no CSS não funciona como esperado 11m
  • Aula em vídeo: Seção 17 - Aula 1 - Introdução à animação com CSS 16m
  • Exercício: Qual é a principal diferença entre transition e animation no CSS?
  • Aula em vídeo: Seção 17 - Aula 2 - Criando animações 19m
  • Aula em vídeo: Seção 17 - Aula 3 - animation shorthand 01m
  • Aula em vídeo: Seção 17 - Aula 4 - animando múltiplas propriedades 02m
  • Exercício: Em animações CSS com @keyframes, o que é possível fazer em relação às propriedades declaradas em cada porcentagem?
  • Aula em vídeo: Seção 17 - Aula 5 - Exercício slideshow 20m

Este curso gratuito inclui:

24 horas e 59 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