Imagem do Curso gratuito Aprenda HTML criando um clone da Netflix

Curso online gratuitoAprenda HTML criando um clone da Netflix

Duração do curso online: 4 horas e 16 minutos

5

EstrelaEstrelaEstrelaEstrelaEstrela

(1)

Construa seu 1º projeto front-end: clone da Netflix com HTML, CSS e Bootstrap. Curso online gratuito com prática, SEO e base sólida para vagas.

Neste curso gratuito, aprenda sobre

  • Fundamentos de front-end e papéis de HTML, CSS e JavaScript
  • Estruturação de páginas com HTML: parágrafos, títulos e hierarquia
  • SEO básico: uso de tags meta e boas práticas semânticas
  • Criação de navegação: listas ordenadas/não ordenadas, links e menus
  • Uso de tabelas e inserção/otimização de imagens no HTML
  • Construção de formulários: inputs, propriedades, validações e semântica
  • Incorporação de mídia: vídeo/áudio, sources locais/externas e controls
  • Fundamentos de CSS e aplicação de estilos em elementos HTML
  • Seletores CSS (tag, classe, id) e pseudo-seletores para estados
  • Box Model: margens, paddings, bordas e fontes com @font-face
  • Layout com display, posicionamento e z-index; unidades como px e %
  • Uso do Bootstrap para acelerar UI com componentes e estilos prontos
  • Grid System do Bootstrap: container, row e col-* para layout responsivo
  • Projeto prático: clone da Netflix com modal e animações usando jQuery

Descrição do curso

Neste curso online gratuito, você aprende HTML na prática construindo um clone da Netflix — uma ótima forma de sair da teoria e entender como páginas modernas são estruturadas. A proposta é guiar você pelos fundamentos do front-end e, ao mesmo tempo, transformar cada conceito em algo visual e aplicável, aproximando sua rotina da realidade de quem desenvolve interfaces para a web.

Você começa compreendendo como HTML, CSS e JavaScript se conectam, e por que o HTML é a “camada” responsável pela estrutura do site. A partir daí, evolui para os elementos essenciais de marcação: títulos, parágrafos, listas, links e navegação. Também aprende boas práticas que impactam a qualidade do código e a experiência do usuário, incluindo noções de SEO com uso correto de tags e metadados, tornando suas páginas mais organizadas e mais fáceis de serem encontradas.

Com a base pronta, você avança para recursos muito usados no dia a dia, como tabelas, imagens e formulários, entendendo como coletar dados do usuário e como escolher corretamente tipos de inputs. Você também entra em tags semânticas e no uso de propriedades e comportamentos que deixam o conteúdo mais claro para navegadores e leitores de tela. Em seguida, trabalha com mídia: vídeo e áudio, carregamento externo e local, e configurações essenciais para controle e usabilidade.

Na parte de estilo, você aprende CSS desde o início: seletores (tag, classe e id), pseudo-seletores e organização de regras. Entende o box model (margens, paddings e bordas), fontes com @font-face, display, posicionamento e z-index — tudo com foco em construir layouts consistentes. Para acelerar o desenvolvimento, o curso também introduz Bootstrap, ensinando como reaproveitar componentes e aplicar o grid system (containers, rows e colunas) para criar páginas responsivas com mais produtividade.

O projeto do clone consolida o aprendizado com páginas como login e home, além de interações comuns do mercado, como modal de filme/série e uso de bibliotecas para efeitos e animações. Ao final, você terá uma base sólida de programação front-end e um projeto para enriquecer seu portfólio, ganhando confiança para seguir evoluindo em interfaces e aplicações web.

Conteúdo do curso

  • Aula em vídeo: [Front-end] #01 - Introduc?a?o ao Front-end c/ HTML, CSS e Javascript 10m
  • Exercício: _Qual é a primeira camada do front-end que é responsável pela estrutura do site?
  • Aula em vídeo: [Front-end] #02 - Introduc?a?o ao HTML 09m
  • Exercício: _Qual é a finalidade da extensão "auto-close tag" mencionada no vídeo?
  • Aula em vídeo: [Front-end] #03 - SEO, Para?grafos e Ti?tulos c/ HTML 06m
  • Exercício: _Qual a função da tag "meta" em HTML?
  • Aula em vídeo: [Front-end] #04 - Listas, Links e Navegac?a?o c/ HTML 05m
  • Exercício: _Quais são os dois tipos de listas em HTML?
  • Aula em vídeo: [Front-end] #05 - Tabelas e Imagens c/ HTML 10m
  • Exercício: _O que é necessário fazer para instalar a fonte customizada utilizada pelo professor no editor de código?
  • Aula em vídeo: [Front-end] #06 - Formula?rios, Inputs Types, Tags Semânticas, Comportamentos e Propriedades c/ HTML 24m
  • Exercício: _Qual é a função principal de um formulário em uma aplicação web?
  • Aula em vídeo: [Front-end] #07 - Vi?deo, A?udio, Source Externo e Local c/ HTML 05m
  • Exercício: _Qual é a função da propriedade "controls" na tag de vídeo em HTML?
  • Aula em vídeo: [Front-end] #08 - Introduc?a?o ao CSS (Cascading Style Sheets) 08m
  • Exercício: _O que é CSS?
  • Aula em vídeo: [Front-end] #09 - Seletores (Classe, Tag e ID) e Pseudo Seletores c/ CSS 16m
  • Exercício: _Qual é a função dos seletores no HTML?
  • Aula em vídeo: [Front-end] #10 - Fontes (@font-face), Margens, Paddings e Bordas (Box Model) c/ CSS 13m
  • Exercício: _Qual é a função do seletor global (*) no CSS?
  • Aula em vídeo: [Front-end] #11 - Display, Posicionamento e Z-Index c/ CSS 15m
  • Exercício: _Qual é a unidade de medida mais utilizada para colocar dimensões na tela?
  • Aula em vídeo: [Front-end] #12 - Introduc?a?o ao Bootstrap 12m
  • Exercício: _Qual é a maior vantagem de trabalhar com Bootstrap?
  • Aula em vídeo: [Front-end] #13 - Entendendo o Grid System (Container, Container-Fluid, Row, Col-*) c/ Bootstrap 17m
  • Exercício: _Qual é a funcionalidade do Bootstrap que permite dividir o layout em colunas?
  • Aula em vídeo: [Front-end] #14 - Netflix Clone (Página Login) c/ HTML, CSS e Bootstrap 20m
  • Exercício: _Qual é o objetivo do curso "Aprenda HTML criando um clone da Netflix por Irmão mais Velho"?
  • Aula em vídeo: [Front-end] - #15 Netflix Clone (Página Home #1) c/ HTML, CSS e Bootstrap 20m
  • Exercício: _Qual é a classe que o menu da página home recebeu?
  • Aula em vídeo: [Front-end] #16 - Netflix Clone (Página Home #2) c/ HTML, CSS e Bootstrap 29m
  • Exercício: _Qual é a propriedade CSS utilizada para adicionar um gradiente no fundo do Hero?
  • Aula em vídeo: [Front-end] #17 - Netflix Clone (Modal de Filme e Se?rie) c/ HTML, CSS, Bootstrap e jQuery 30m
  • Exercício: _Qual biblioteca em JavaScript é usada para animações na criação da modal?

Este curso gratuito inclui:

4 horas e 16 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

Comentários do Curso: Aprenda HTML criando um clone da Netflix

RS

RIZONETE SILVA DE SÁ

EstrelaEstrelaEstrelaEstrelaEstrela

Estou gostando bastante

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