Imagem do Curso gratuito Desenvolvimento Web Completo (Front-end: HTML, CSS, JavaScript)

Curso online gratuitoDesenvolvimento Web Completo (Front-end: HTML, CSS, JavaScript)

Duração do curso online: 10 horas e 33 minutos

Novo

Crie sites do zero e ganhe base sólida em Front-end com HTML, CSS e JavaScript neste curso online gratuito, com exercícios e certificado.

Descrição do curso

Transforme ideias em páginas reais e responsivas com um treinamento completo de Front-end. Neste curso online gratuito de Desenvolvimento Web, você aprende a construir a estrutura com HTML, aplicar estilos profissionais com CSS e dar vida às páginas com JavaScript, seguindo uma trilha prática voltada para quem quer sair do básico e começar a produzir projetos de verdade.

Ao longo das aulas, você evolui desde a organização de um projeto no editor até boas práticas essenciais que evitam problemas comuns no dia a dia, como codificação correta para acentos, criação de links e navegação interna por seções, uso de listas e elementos semânticos. A proposta é fazer você entender o “porquê” de cada escolha e, com isso, ganhar segurança para escrever código limpo e consistente.

No CSS, você desenvolve domínio sobre seletores, especificidade, herança e formas diferentes de aplicar estilos, além de aprender a inspecionar elementos no navegador para testar alterações rapidamente e depurar layouts. Também trabalha conceitos que definem a qualidade do visual de um site: espaçamentos com margin e padding, controle de conteúdo com overflow, estados de links, fundos, gradientes, sombras, transições e animações. Tudo com foco em construir interfaces mais agradáveis e fáceis de manter.

Para ir além de páginas estáticas, você entra em JavaScript começando pela forma correta de incluir scripts, lógica básica, variáveis, tipos de dados, operações, operadores e comportamentos importantes como conversões. A cada etapa, exercícios ajudam a fixar o aprendizado e a desenvolver raciocínio para resolver problemas, em vez de apenas repetir exemplos prontos.

O curso ainda explora pontos decisivos para quem quer trabalhar com Front-end, como diferentes modelos de layout, controle de posicionamento (static, relative, absolute, fixed), camadas com z-index, uso de float e limpeza de fluxo, além de responsividade com media queries. Você aplica esse conjunto em projetos práticos que simulam demandas comuns do mercado, como páginas de conteúdo, layouts de blog, banners, páginas de captura e formulários.

Se você busca entrar em Programação Front-End, reforçar fundamentos ou montar portfólio com projetos consistentes, este caminho foi feito para te levar do “não sei por onde começar” ao “consigo construir e evoluir um site completo”. Ao final, você terá base para seguir para frameworks com muito mais clareza e aproveitar melhor oportunidades na área de tecnologia.

Conteúdo do curso

  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - HTML AULA #0 05m
  • Exercício: Ao iniciar um novo projeto no Visual Studio Code, qual prática é recomendada para organizar os arquivos do site?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - HTML AULA #1 05m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - HTML AULA #2 08m
  • Exercício: Qual configuração é uma boa prática para evitar problemas com acentos e caracteres especiais em páginas HTML em português?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - HTML AULA #3 11m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - PROJETO HTML AULA #9 17m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #10 05m
  • Exercício: Qual é a principal vantagem do CSS externo em projetos com várias páginas?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #11 04m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #12 05m
  • Exercício: Qual é o local mais recomendado para inserir CSS interno em um documento HTML, evitando que o conteúdo apareça sem estilo ao carregar?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #13 06m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #14 08m
  • Exercício: Em CSS, qual seletor deve ser usado para estilizar um elemento específico e que não deve se repetir na página?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #15 13m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #16 03m
  • Exercício: Qual é uma das principais utilidades da ferramenta Inspecionar no navegador para quem desenvolve front-end (HTML/CSS/JavaScript)?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #17 10m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #18 06m
  • Exercício: Qual é a sintaxe correta para aplicar um gradiente linear no CSS, definindo as cores vermelho e azul?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #19 10m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #20 09m
  • Exercício: Qual é a principal diferença entre margin e padding no CSS?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #21 08m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #22 07m
  • Exercício: Em CSS, qual valor de overflow faz o conteúdo excedente ficar acessível com barra de rolagem quando o elemento tem largura/altura definidas?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #23 08m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #24 10m
  • Exercício: Qual pseudo-classe CSS deve ser usada para estilizar um link quando o mouse está sobre ele?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #25 11m
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #26 07m
  • Exercício: No CSS, qual é a forma correta de definir um cursor com imagem personalizada e um cursor de backup caso a imagem não carregue?
  • Aula em vídeo: CURSO DESENVOLVIMENTO WEB COMPLETO - CSS AULA #27 15m
  • Aula em vídeo: CRIANDO SITE DE RECEITAS COM HTML E CSS PROJETO AULA #28 35m
  • Exercício: Qual conjunto de propriedades CSS garante que uma imagem de fundo ocupe toda a área do banner sem distorcer, mantendo o centro visível?
  • Aula em vídeo: TAMANHOS DE TEXTO COM HTML E CSS - CURSO WEB - AULA #29 11m
  • Aula em vídeo: FLOAT ou ELEMENTOS FLUTUANTES CSS - CURSO COMPLETO DESENVOLVIMENTO WEB - AULA #30 15m
  • Exercício: Qual propriedade CSS é usada para impedir que um parágrafo de texto “envolva” um elemento que está com float aplicado?
  • Aula em vídeo: EXERCICIO FLOAT NA PRÁTICA ELEMENTOS FLUTUANTES - CURSO COMPLETO AULA #31 08m
  • Aula em vídeo: INLINE, BLOCK E INLINE-BLOCK COMO FUNCIONA A PROPRIEDADE DISPLAY - CURSO COMPLETO AULA #32 07m
  • Exercício: Qual afirmação descreve corretamente a diferença entre elementos block, inline e o uso de inline-block?
  • Aula em vídeo: POSICIONAMENTOS ESTÁTICO E RELATIVO, POSITION - AULA #33 - CURSO COMPLETO DESENVOLVIMENTO WEB 09m
  • Aula em vídeo: POSICIONAMENTOS ABSOLUTO E FIXO POSITIONS - AULA #34 - CURSO COMPLETO DESENVOLVIMENTO WEB 10m
  • Exercício: Ao usar position: absolute em um elemento, o que é necessário para que ele se posicione em relação ao contêiner (pai) e não ao documento (body)?
  • Aula em vídeo: COMO CRIAR BOTÃO DE WHATSAPP EM 5 MINUTOS NO SEU SITE COM HTML E CSS - AULA #35 05m
  • Aula em vídeo: SOBREPONDO ELEMENTOS COM Z-INDEX - AULA #36 CSS - CURSO COMPLETO DE DESENVOLVIMENTO WEB 06m
  • Exercício: Ao usar a propriedade CSS z-index para sobrepor elementos posicionados, qual afirmação está correta?
  • Aula em vídeo: CRIANDO UM LAYOUT DE BLOG COM HTML E CSS (PARTE 1) - AULA #37 - CURSO COMPLETO DESENVOLVIMENTO WEB 21m
  • Aula em vídeo: CRIANDO UM LAYOUT DE BLOG COM HTML E CSS (PARTE 2) - AULA #38 - CURSO COMPLETO DESENVOLVIMENTO WEB 14m
  • Exercício: Para garantir que o rodapé fique abaixo de elementos posicionados com float, qual propriedade CSS deve ser aplicada no footer?
  • Aula em vídeo: EXPLICANDO OS SELETORES NO CSS E COMO UTILIZAR - AULA #39 - CURSO COMPLETO 13m
  • Aula em vídeo: HERANÇA E ESPECIFICIDADE NO CSS - AULA #40 - CURSO COMPLETO DE DESENVOLVIMENTO WEB 08m
  • Exercício: Em CSS, qual seletor possui maior especificidade e tende a ter prioridade ao definir uma propriedade como color?
  • Aula em vídeo: MENU VERTICAL / BARRA DE NAVEGAÇÃO COM HTML E CSS - AULA #41 08m
  • Aula em vídeo: UTILIZANDO PSEUDO ELEMENTOS NO CSS - AULA #42 10m
  • Exercício: Qual pseudo-elemento CSS é usado para inserir conteúdo depois de um elemento, geralmente junto com a propriedade content?
  • Aula em vídeo: COMO ADICIONAR ÍCONES NO PROJETO - AULA #43 - CURSO COMPLETO 08m
  • Aula em vídeo: MEDIA QUERIES E RESPONSIVIDADE - AULA #44 - CURSO COMPLETO 13m
  • Exercício: Qual é a função principal das media queries no CSS?
  • Aula em vídeo: FORMULÁRIOS COM HTML5, GET/POST - AULA #45 - CURSO COMPLETO 10m
  • Aula em vídeo: TIPOS DE INPUTS NO HTML E SUAS FUNÇÕES - AULA #46 17m
  • Exercício: Qual é a diferença principal entre e em um formulário HTML?
  • Aula em vídeo: TAGS SEMÂNTICAS NO HTML5 - AULA #47 05m
  • Aula em vídeo: CRIANDO TABELAS COM HTML5 - AULA #48 10m
  • Exercício: Qual atributo do HTML é usado para mesclar duas colunas em uma célula de tabela?
  • Aula em vídeo: PROJETO PÁGINA DE CAPTURA / LANDING PAGE - AULA #49 - PARTE 1 21m
  • Aula em vídeo: PROJETO PÁGINA DE CAPTURA / LANDING PAGE - AULA #50 12m
  • Exercício: Ao limitar a largura de um container para não ultrapassar 1200px e manter o conteúdo centralizado, qual combinação de CSS é a mais indicada?
  • Aula em vídeo: COMO CRIAR SOMBRAS COM CSS - AULA #51 09m
  • Aula em vídeo: TRANSIÇÕES / TRANSITIONS COM CSS - AULA #53 12m
  • Exercício: Em CSS, onde a propriedade transition deve ser declarada para que a animação funcione ao passar e ao tirar o mouse (hover)?
  • Aula em vídeo: ANIMAÇÕES COM CSS (ANIMATIONS) - AULA #54 11m
  • Aula em vídeo: VAMOS APRENDER JAVASCRIPT! - AULA #55 05m
  • Exercício: Qual é a forma correta de inserir JavaScript diretamente em uma página HTML, conforme apresentado?
  • Aula em vídeo: ALGORITMOS - AULA #56 - CURSO COMPLETO WEB 05m
  • Aula em vídeo: VARIÁVEIS COM JAVASCRIPT - AULA #57 09m
  • Exercício: Qual é a forma correta de criar uma variável em JavaScript e atribuir um valor a ela?
  • Aula em vídeo: TIPOS DE DADOS EM JAVASCRIPT - AULA #58 06m
  • Aula em vídeo: OPERAÇÕES ARITMÉTICAS NO JAVASCRIPT - AULA #59 11m
  • Exercício: Em JavaScript, qual operador retorna o resto (sobra) de uma divisão entre dois números?
  • Aula em vídeo: ATRIBUIÇÕES EM JAVASCRIPT - AULA #60 06m
  • Aula em vídeo: OPERADORES COMPARATIVOS EM JAVASCRIPT - AULA #61 06m
  • Exercício: Em JavaScript, qual operador compara valor e tipo (comparação idêntica)?
  • Aula em vídeo: STRINGS EM JAVASCRIPT - AULA #62 08m
  • Aula em vídeo: CONVERTENDO STRINGS PARA NÚMEROS - AULA #63 05m
  • Exercício: Ao somar um número com uma string numérica em JavaScript, o que acontece se não houver conversão?

Este curso gratuito inclui:

10 horas e 33 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