• Lançamentos
  • Tecnologia

HTML5 e CSS3 – Técnicas Avançadas

Sobre o instrutor:

Desenvolvedor Full Stack

Sobre o curso

Após este curso você estará apto a utilizar o que há de mais novo no HTML5, CSS3 e também flexbox.

Porém não para por aí, além da teoria teremos três projetos práticos que você poderá exercitar o conteúdo aprendido no curso, então vamos criar juntos um site primeiramente para treinar HTML5 e CSS3, depois o segundo projeto vai trabalhar com o flexbox, vamos aprender quando utilizar o flexbox num projeto web, teremos também um projeto com o intuito de simular uma aplicação web conhecida por todos nós, neste caso eu escolhi o WhatsApp Web. O curso conta com 4 projetos baseados em sites reais, inclusive um dos resultados de pesquisa do Google, onde vamos utilizar flex box também.

Neste curso você aprenderá:
  • Os novos elementos do HTML5, como utilizá-los e boas práticas;

  • As novas regras e propriedades do CSS3, suas utilizações em projetos e também melhores práticas;

  • Dominar o FlexBox, regras da propriedade, exemplos de uso e projeto prático para fixar a técnica;

  • Criar projetos web, inclusive com FlexBox;

  • Boas práticas de HTML e CSS, como estas linguagens são utilizadas no mercado de trabalho.

Se interessou? Este curso contém:

  • 08h de duração

  • 74 videoaulas

  • 08 textos

  • 45 exercícios

Como conseguir seu certificado

Ao final do curso você fará uma avaliação. Portanto, estude com empenho, faça os exercícios e revise o conteúdo quantas vezes forem necessárias.
A avaliação de aprendizagem acontece ao final último módulo. Você deverá obter a porcentagem mínima de 60% para conseguir seu certificado, que estará disponível para download assim que a aprovação for verificada pelo nosso sistema.
Introdução
  • Introdução
  • Como programadores acham as soluções das dúvidas no StackOverFlow
  • Como programadores acham as soluções das dúvidas no Google
  • Como verificar erros de HTML/CSS no navegador (Inspecionar elemento)
  • Como instalar o Sublime (editor de código para o curso)
HTML5 I
  • Conhecendo a tag
  • Exercício
  • Conhecendo a tag
  • Exercício
  • Conhecendo a tag
    e
  • Exercício
  • Conhecendo os atributos required e placeholder
  • Exercício
  • Conhecendo o atributo type email e autofocus
  • Exercício
  • Conhecendo o atributo content editable
  • Exercício
HTML5 II
  • Introdução ao HTML semântico
  • Conhecendo a tag e
  • Exercício
  • Conhecendo a tag
  • Exercício
  • Conhecendo a tag
  • Exercício
CSS3 I
  • Iniciando com animações
  • Exercício
  • Animações com vários passos
  • Exercício
  • Animações: delay e iterations
  • Exercício
  • Animações: timing functions
  • Exercício
  • Animações: shorthand
  • Exercício
CSS3 II
  • Conhecendo a propriedade transition
  • Exercício
  • Utilizando a propriedade calc
  • Exercício
  • Gradiente linear
  • Exercício
  • Gradiente radial
  • Exercício
  • Carregando fontes com font face
  • Exercício
  • Layouts responsivos com media query
  • Exercício
  • Utilizando a propriedade border-radius
  • Exercício
Projeto 1 - Site Doceria
  • Arquivos do projeto
  • Introdução do projeto
  • Exercício
  • Iniciando o projeto e configurações
  • Exercício
  • HTML do menu lateral (sidebar)
  • Exercício
  • CSS do Menu lateral (sidebar)
  • HTML do conteúdo do site
  • Exercício
  • CSS das seções iniciais e banner
  • CSS das galerias
  • Exercício
  • CSS do rodapé e conclusão do projeto
  • Exercício
Flex Box
  • O que é Flex Box?
  • Exercício
  • Propriedade flex-grow
  • Exercício
  • Propriedade flex-shrink e flex-basis
  • Exercício
  • Propriedade flex-direction
  • Propriedade flex-order
  • Propriedade flex com shorthand
  • Proriedade justify-content
  • Propriedade align-items
  • Propriedade align-self
  • Revisão Flex Box
Projeto 2 com FlexBox - hDC Host
  • Introdução do projeto
  • Arquivos do Projeto
  • Exercício
  • Configurando o projeto
  • Exercício
  • Criando o HTML do projeto
  • Exercício
  • CSS da barra de navegação e banner principal
  • Exercício
  • CSS das seções com flexbox
  • Exercício
  • Finalizando o CSS do projeto
  • Adaptando o site para dispositivos mobile
Projeto 3 - WhasApp Web Clone
  • Arquivos do Projeto
  • Configuração do projeto
  • Exercício
  • Criando o HTML da barra lateral
  • Exercício
  • Criando o HTML da seção do chat
  • Exercício
  • Iniciando o CSS da barra lateral
  • Finalizando a barra lateral
  • Iniciando o CSS da área de chat
  • Conclusão do projeto
Projeto 4 com FlexBox - Google Search Clone
  • Arquivos do Projeto
  • Introdução do projeto
  • Configuração do projeto
  • Exercício
  • Iniciando o cabeçalho (header)
  • Exercício
  • Finalizando header e navbar
  • Estruturando o conteúdo principal
  • Estruturando o conteúdo lateral e criando o flex
  • Finalizando os resultados de busca
  • Exercício
  • Conclusão do projeto
Projeto 5 com Flexbox: Home Instagram
  • Apresentação do projeto
  • Configurações do projeto
  • Exercício
  • HTML do projeto
  • Exercício
  • Iniciando o CSS do projeto
  • Exercício
  • CSS do formulário de login
  • Exercício
  • Finalizando CSS da resolução de desktop
  • Exercício
  • Responsivo e conclusão do projeto

Desenvolva a liderança da sua equipe

Capacite seus colaboradores com uma plataforma completa:

Saiba mais