Aprenda uma base sólida de HTML, CSS e JS criando um site do zero com foco nos elementos de interface e interações!
JavaScript – Languages
Para ver todas as tecnologias clique aqui
- Como tirar melhor proveito deste curso
- Estágios de um projeto
- O que é HTML
- Como fazer HTML
- Instalando e Configurando o Editor de Código
- Tags e Semântica HTML
- O que é CSS
- Começando no CSS
- Folha de estilos externa e cascata
- Tipografia na web
- Cores na Web
- Exercício CSS 01 - Parte 1
- Exercício CSS 01 - Parte 2
- Exercício CSS 01 - Parte 3
- Exercício CSS 01 - Parte 4
- Exercício CSS 01 - Parte 5
- Design patterns e o Atomic Design
- Exercício CSS 02 - Parte 1
- Exercício CSS 02 - Parte 2
- Exercício CSS 02 - Parte 3
- Exercício CSS 02 - Parte 4
- Exercício CSS 02 - Parte 5
- Exercício CSS 02 - Parte 6
- Exercício CSS 02 - Parte 7
- Exercício CSS 02 - Parte 8
- Tipos de layout web
- O que é design responsivo
- Fazendo design responsivo com Media Queries
- Sistemas de grid
- Customizando e Baixando o Bootstrap Grid System
- Usando o Bootstrap Grid System
- Flexbox - Intro
- Flexbox - Display Flex e Flex-Direction
- Flexbox - Flex-Wrap
- Flexbox - Justify-Content
- Flexbox - Align-Items
- Flexbox - Align-Content
- Flexbox - Order
- Flexbox - Flex-Grow
- Flexbox - Flex-Shrink
- Flexbox - Flex 'Shorthand'
- Flexbox - Align-Self
- Animações com CSS - Intro
- Animações com CSS - Parte 1
- Animações com CSS - Parte 2
- Animações com CSS - Transform
- Animações com CSS - Exemplo de aplicação - Parte 1
- Animações com CSS - Exemplo de aplicação - Parte 2
- A biblioteca Animate.css
- Introdução ao SVG
- Criando SVGs - Parte 1
- Criando SVGs - Parte 2
- Inserindo SVGs no HTML - Parte 1
- Inserindo SVGs no HTML - Parte 2
- Animando Imagens SVG - Parte 1
- Animando Imagens SVG - Parte 2
- O que é Javascript
- Client Side e Processo de Renderização
- Conhecendo o Console
- Sintaxe e API Javascript
- O Objeto Window
- Dados primitivos Javascript
- Variáveis Javascript
- Operadores e precedência
- Seletores - Parte 1
- Seletores - Parte 2
- Condicionais - IF Else - Parte 1
- Condicionais - IF Else - Parte 2
- Condicionais - Switch Case
- Eventos
- Funções
- Array - Parte 1
- Array - Parte 2
- Objetos - Parte 1
- Objetos - Parte 2
- Objetos - Parte 3
- Loops
- JQuery - Ressalva
- JQuery - Versões
- JQuery - Seletores e CSS
- JQuery - Exercício Busca Gato - Parte 1
- JQuery - Exercício Busca Gato - Parte 2
- JQuery - Add, Remove e Toggle Class
- Conhecendo o layout
- Estruturando o projeto
- Estrutura básica do CSS e Page Wrapper
- Topbar - Posicionando o logo
- Topbar - Fazendo o menu desktop - Parte 1
- Topbar - Fazendo o menu desktop - Parte 2
- Complemento - Explicação rápida sobre transform-origin
- Contato - Fazendo o botão de contato
- Utilitários - Criando as primeiras classes utilitárias
- Contato - Fazendo a box de contato - Parte 1
- Contato - Fazendo a box de contato - Parte 2
- Contato - Fazendo o Toggle Click no botão de contato
- Preloader - Fazendo a tela de preloader com HTML e CSS
- Preloader - Fazendo o Javascript da tela de preloader
- IMPORTANTE! Correção do Preloader que ficou fora da aula anterior
- Hero - Grid, texto e imagem - Parte 1
- Hero - Grid, texto e imagem - Parte 2
- Seta Scroll - Animação de scroll down - Parte 1
- Seta Scroll - Animação de scroll down - Parte 2
- Botões - Criando um sistema de botões - Parte 1
- Botões - Criando um sistema de Botões - Parte 2
- Modal - Posicionando o overlay e caixa de modal
- Modal - Fazendo o formulário - Parte 1
- Modal - Fazendo o formulário - Parte 2
- Modal - Fazendo o Javascript
- Waypoints - Animando elementos On Scroll
- Portfolio Home (Slider) - Organizando colunas da grid
- Portfolio Home (Slider) - Posicionando o navigator e seus elementos
- Portfolio Home (Slider) - Formatando elementos do navigator
- Portfolio Home (Slider) - Formatando setas e números
- Portfolio Home (Slider) - Como irá funcionar o slider
- Portfolio Home (Slider) - Marcando os blocos do slider
- Portfolio Home (Slider) - Passando larguras dinâmicamente para os blocos
- Portfolio Home (Slider) - Fazendo o slider funcionar com Anime JS
- Portfolio Home (Slider) - Refatorando o código do slider e design patterns
- Portfolio Home (Slider) - Slide counter - Parte 1
- Portfolio Home (Slider) - Slider counter - Parte 2
- Portfolio Home (Slider) - Sincronizando os navigator items
- Portfolio Home (Slider) - Animando os navigator items
- Portfolio Home (Slider) - Trocando o navigator number
- Portfolio Home (Slider) - Complemento - Referência no grid system
- Portfolio Home (Slider) - Posicionando o slide info
- Portfolio Home (Slider) - Posicionando o slide thumbnail
- Portfolio Home (Slider) - Animando elementos do slide - Parte 1
- Portfolio Home (Slider) - Animando elementos do slide - Parte 2
- Portfolio Home (Slider) - Melhorando botões e finalizando Home
- Page Portfolio - Visão geal
- Page Portfolio - Complemento - Navegando entre arquivos HTML
- Page Portfolio - Estruturando o HTML - Parte 1
- Page Portfolio - Estruturando o HTML - Parte 2
- Page Portfolio - Iniciando a listagem de projetos
- Page Portfolio - Refatorando a listagem de projetos
- Page Portfolio - Alternando itens na lista de projetos - Parte 1
- Page Portfolio - Alternando itens na lista de projetos - Parte 2
- Page Portfolio - Animando itens On Scroll
- Page Sobre - Visão geral
- Page Sobre - Estruturando as colunas
- Page Sobre - Inserindo imagens e textos
- Page Sobre - Fazendo imagem responsiva e lista padrão
- Page Sobre - Fazendo ícones de contato
- Page Detalhes - Visão geral
- Page Detalhes - Hero banner - Parte 1
- Page Detalhes - Hero banner - Parte 2
- Page Detalhes - Hero banner - Parte 3
- Page Detalhes - Estruturando post sections
- Page Detalhes - Inserindo texto, imagens e parallax
- Page Detalhes - Fazendo os thumbs da galeria
- Page Detalhes - Refinando o alinhamento dos elementos
- Page Detalhes - Fazendo lazy loading dos thumbs - Parte 1
- Page Detalhes - Fazendo lazy loading dos thumbs - Parte 2
- Page Detalhes - Galeria Overlay - Posicionando o modal
- Page Detalhes - Galeria Overlay - Carregando imagem no frame
- Page Detalhes - Galeria Overlay - Toggle modal
- Page Detalhes - Galeria Overlay - Definindo lógica do Next/Prev
- Page Detalhes - Galeria Overlay - Fazendo Next/Prev Javascript
- Page Detalhes - Galeria Overlay - Contador de itens
- Page Detalhes - Galeria Overlay - Posicionando skeleton loading
- Page Detalhes - Galeria Overlay - Animando skeleton loading
- Page Detalhes - Galeria Overlay - Skeleton loading Javascript
- Responsividade - Introdução
- Responsividade - Menu mobile - Parte 1
- Responsividade - Menu mobile - Parte 2
- Responsividade - Menu mobile - Parte 3
- Responsividade - Home - Section apresentação - Parte 1
- Responsividade - Home - Section apresentação - Parte 2
- Responsividade - Home Slider - Visão geral
- Responsividade - Home Slider - Texto e thumb - Parte 1
- Pesponsividade - Home Slider - Texto e thumb - Parte 2
- Responsividade - Home Slider - Texto e thumb - Parte 3
- Responsividade - Home Slider - Texto e thumb - Parte 4
- Responsividade - Home Slider - Texto e thumb - Parte 5
- Responsividade - Home Slider - Texto e thumb - Parte 6
- Responsividade - Home - Ajustando o modal overlay
- Home - Corrigindo animação de scroll down
- Responsividade - Home - Revisando e corrigindo bugs
- Responsividade - Portfolio - Parte 1
- Responsividade - Portfolio - Parte 2
- Responsividade - Portfolio - Parte 3
- Responsividade - Portfolio - Parte 4
- Responsividade - Detalhes Projeto - Visão geral
- Responsividade - Detalhes Projeto - Banner topo - Parte 1
- Responsividade - Detalhes Projeto - Banner topo - Parte 2
- Responsividade - Detalhes Projeto - Corpo da página
- Responsividade - Detalhes Projeto - Galeria
- Responsividade - Sobre - Visão geral
- Responsividade - Sobre - Imagem sobre
- Responsividade - Sobre - Texto sobre
- Responsividade - Sobre - Alinhamento
- Melhoramentos - Menu mobile
- Melhoramentos - Corrigindo erros e warnings do console
- Melhoramentos - Topbar background on scroll - Parte 1
- Melhoramentos - Topbar background on scroll - Parte 2
- Melhoramentos - Refatorando a borda da página
- Melhoramentos - Hover nos thumbs da galeria - Parte 1
- Melhoramentos - Hover nos thumbs da galeria - Parte 2
- Melhoramentos - Fazendo a página de erro 404
- Melhoramentos - Refatorando botões e corrigindo animação de scroll down
- Entendendo a relação entre Client e Server
- Instalando um servidor local
- Tornando as URLs amigáveis
- Corrigindo e finalizando URLs amigáveis
- Critérios de performance do Google Speed Insights
- Otimizando e comprimindo imagens
- Otimizando e minificando HTML, CSS e Javascript
- Adicionando o domínio ao servidor e criando conta FTP
- Enviando os arquivos o servidor via FTP
- Configurando DNS e apontando o domínio para o servidor
- Corrigindo ERR_NAME_NOT_RESOLVED
- Configurando a página de Erro 404 no servidor
- Revisão Final - Identificando Bugs
- Revisão Final - Corrigindo bugs
- Publicando arquivos corrigidos
