Curso de HTML5 e CSS3 - Desenvolvimento web Avançado

Expanda seu conhecimento em HTML5 e CSS3, conhecendo técnicas e funcionalidades mais avançadas dessas tecnologias

Nível Avançado Categoria Desenvolvimento Front-end

  • Curso com 03h19 de videos
  • Certificado com 34 horas
  • 57 exercícios

Sobre o curso

Expanda seu conhecimento em HTML5 e CSS3, conhecendo técnicas e funcionalidades mais avançadas dessas tecnologias

Hoje em dia o HTML5 e CSS3 estão presentes em muitos lugares como sites, aplicativos mobile, sistemas web e desktop, sistemas operacionais, jogos, etc. Por esse motivo, quem dominar essas tecnologias terá uma grande flexibilidade no mercado de trabalho. O problema é que muitos desenvolvedores ainda utilizam um conhecimento limitado ou modo de desenvolvimento ultrapassado, e acreditam que o que fazem seja o suficiente para as necessidades da empresa. Com este curso você irá expandir seu conhecimento, aprendendo a utilizar técnicas e funcionalidades mais avançadas de HTML5 e CSS3 para construir páginas e aplicações modernas de maneira rápida e eficiente.

O que irá aprender?

Com vídeo aula e conteúdo apostilado, nesse curso mostraremos como trabalhar com APIs, Web Storage, controle de mídias, Canvas e leitura de arquivos no HTML5, e com animações, media queries, flex box, layouts responsivos e pré

  • processadores no CSS3. Além de poder responder exercícios que ajudam na fixação do conteúdo.

Nesse curso, dentre várias outras coisas você aprenderá:

  • Canvas e SVG;
  • Drag & Drop;
  • Web Storage e App Cache para Aplicações Offline;
  • Web Components;
  • Leitura de Arquivos e Controle de Mídias;
  • Animações e Transições;
  • Layout com Flex Box;
  • Layouts Responsivos e Media Queries;
  • Pré Processadores CSS e HTML.

Pra quem é esse curso?

Este curso é destinado àqueles que já tenham um conhecimento básico de HTML5 e CSS3 e queiram aprender técnicas e funcionalidades mais avançadas para melhorar suas habilidades.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Ambiente do curso

  • Sublime Text 3.0.0 ou superior.
  • Google Chrome 56 ou superior.
  • Node.js 7.2.0 ou superior.

Sobre o professor

Akira Hanashiro

Akira Hanashiro

Professor especialista em Desenvolvimento Front-end na TreinaWeb. Akira, Felipe, Hana, Hanashiro ou Hanakira, é graduado em Análise e Desenvolvimento de Sistemas, pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning, é entusiasta no desenvolvimento de jogos e multi-task. Fala japonês fluente, mas não tem com quem conversar.

Conteúdo programático

  1. Variáveis

    Vamos ver como utilizar variáveis no CSS para reaproveitar o seu valor em vários lugares

    7 aulas
    • Introdução
    • Variáveis
    • Declaração de Variáveis
    • Utilizando as Variáveis
    • Escopo
    • Trabalhando com variáveis no CSS
    • Questionário
  2. Pseudo Elementos

    O que são Pseudo Elementos e como criá-los?

    3 aulas
    • Pseudo Elementos
    • Pseudo Elementos
    • Questionário
  3. Criando Sprites

    O que são Sprites e por que utilizar?

    4 aulas
    • O que são Sprites?
    • Criando Sprites
    • Trabalhando com Sprites
    • Criando Sprites
  4. Font Icons

    Aprenda a melhor maneira de se utilizar ícones em suas páginas

    2 aulas
    • Font Icons
    • Trabalhando com Font Icons
  5. Gradientes

    Vamos ver como é simples a criação de gradientes no CSS

    5 aulas
    • Gradientes
    • Gradiente Linear
    • Gradiente Radial
    • Criando Gradientes com CSS
    • Questionário
  6. Contadores e Guardando estados sem JavaScript

    Veremos nessa aula como criar contadores e como guardar certos estados apenas com CSS

    6 aulas
    • Contadores e Guardando estados sem JavaScript
    • Contadores
    • Guardando Estados
    • Contadores com CSS
    • Guardando Estados com CSS
    • Questionário
  7. Transformações 2D e 3D

    Vamos aprender a utilizar as funções de transformações 2D e 3D em nossos elementos

    5 aulas
    • Transformações 2D e 3D
    • Transformações 2D
    • Transformações 3D
    • Transformações 2D e 3D
    • Questionário
  8. Filtros

    Vamos conhecer os filtros que o CSS disponibiliza, igual aos filtros presentes em softwares de edição de imagem

    14 aulas
    • Filtros
    • blur(px)
    • brightness(%)
    • contrast(%)
    • drop-shadows(posição_horizontal posição_vertical dispersão cor)
    • grayscale(%)
    • hue-rotate(ângulo)
    • invert(%)
    • opacity(%)
    • saturate(%)
    • sepia(%)
    • CSSgram
    • Filtros de Imagens
    • Questionário
  9. Transições

    Vamos ver como criar transições para os nossos elementos

    8 aulas
    • Transições
    • A importância das transições
    • Nossa primeira transição
    • Transições com JavaScript
    • Curva da Velocidade da Transição
    • Propriedades de Transição
    • Criando Transições
    • Questionário
  10. Animações

    Vamos ver como é simples criar animações com CSS

    7 aulas
    • Animações
    • Criando uma Animação
    • Animações com várias mudanças
    • Propriedades de Animação
    • Interagindo com JavaScript
    • Criando Animações
    • Questionário
  11. Media Queries

    O que são Media Queries e como utilizá-los

    5 aulas
    • Media Queries
    • Media Types
    • Media Queries
    • Media Types e Media Queries
    • Questionário
  12. Criando Designs Responsivos

    Vamos aprender algo muito importante para a web moderna: layouts que funcionam em qualquer tamanho de tela

    4 aulas
    • O que é Design Responsivo?
    • Viewport
    • Unidades de Medida Relativas
    • Media Queries
  13. Layouts com Flex Box

    Vamos ver como utilizar o Flex Box para criar nossos layouts de forma simples sem o uso de tabelas ou grids

    6 aulas
    • Layouts com Flex Box
    • Propriedades do Contêiner
    • Propriedades dos Itens
    • Atalhos
    • Entendendo o Flex Box
    • Questionário
  14. Pré Processadores CSS

    Vamos conhecer o que são Pré Processadores e as vantagens de utilizá-los em nossos projetos.

    3 aulas
    • O que são Pré Processadores?
    • Funcionalidades
    • Concluindo
  15. Arquitetura de Códigos - Metodologias e Práticas

    Aprenda a deixar o seu código mais organizado.

    9 aulas
    • Metodologias e Práticas
    • OOCSS
    • BEM
    • ACSS
    • DRY CSS
    • SMACSS
    • ITCSS
    • RSCSS
    • Questionário
  16. HTML5 e suas APIs

    Saiba o que são as APIs presentes no HTML5

    4 aulas
    • O que são APIs?
    • JavaScript
    • Possibilidades
    • Ambiente
  17. Controle de Áudio e Vídeo

    Aprenderemos como controlar mídias e a criar um pequeno player de vídeo

    8 aulas
    • Controle de Áudio e Vídeo
    • Criando o elemento
    • Propriedades
    • Métodos
    • Eventos
    • Controlando a Mídia
    • Trabalhando com APIs de mídia
    • Questionário
  18. Drag & Drop

    Vamos ver como é simples a criação do efeito Drag & Drop, muito utilizado para melhorar a experiência do usuário

    5 aulas
    • Drag & Drop
    • Arrastando Elementos
    • Soltando Elementos
    • Criação simples de Drag & Drop
    • Questionário
  19. App Cache - Aplicações Offline

    Vamos ver como fazer para nossas páginas continuarem acessíveis mesmo quando o usuário estiver sem conexão com a Internet

    7 aulas
    • App Cache - Aplicações Offline
    • Cache Manifest
    • Iniciando o armazenamento de cache
    • Atualizando o Cache
    • Eventos do AppCache
    • Criando aplicações offline
    • Questionário
  20. Armazenando Dados

    Aprenda a armazenar dados para utilizá-los em sua página

    5 aulas
    • Armazenando Dados
    • Cookies
    • WebStorage
    • IndexedDB
    • Questionário
  21. Leitura de Arquivos

    Vamos ver como é possível uma página web ler arquivos do usuário e ver as várias possibilidades que podemos ter com isso

    6 aulas
    • Leitura de Arquivos
    • Carregando Arquivos
    • Lendo Arquivos
    • Salvando Arquivos
    • Leitura de Arquivos de Texto
    • Questionário
  22. Canvas

    Vamos conhecer o Canvas, elemento que nos permite desenhar, criar animações e até mesmo criar jogos para nossas páginas

    7 aulas
    • Canvas
    • Nosso primeiro Canvas
    • Desenhando no Canvas
    • Animações
    • Salvando Canvas como Imagem
    • Desenhando no Canvas
    • Questionário
  23. SVG

    Aprenda o que são Imagens Vetoriais, suas vantagens e o que é SVG

    6 aulas
    • SVG
    • Imagens Bitmap e Imagens Vetoriais
    • Vantagens e Desvantagens
    • Como é uma imagem em SVG?
    • Estilizando SVG com CSS
    • Questionário
  24. Pré Processadores HTML

    Vamos ver o que são Pré Processadores HTML e suas vantagens para nossos projetos

    5 aulas
    • Pré Processadores HTML
    • Sintaxe mais simples
    • Evitando Repetições
    • Definindo Condições
    • Concluindo
  25. Web Components

    Vamos conhecer os Web Components, seus conceitos e aprender a reutilizar elementos HTML em nossas páginas

    8 aulas
    • O que são Web Components?
    • Templates
    • Shadow DOM
    • Custom Elements
    • Pontos de Inserção
    • Imports
    • Criando nossos próprios componentes
    • Questionário
  26. Projeto Final

    Projeto final do curso.

    2 aulas
    • Projeto
    • Resolução
Download da ementa

Cursos relacionados

Utilizada e amada por milhares! Veja mais opiniões reais

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
R$ 97,00 ECONOMIZE R$ 360,00
12x R$ 67,00 ou R$ 804,00 à vista
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!