CSS Para Elementor - Othon Ciparoni

Módulos do CSS Para Elementor - Othon Ciparoni

Sua jornada de aprendizado

1. 01 01 Comece por aqui 1 AULA 1 aula

   • Informações importantes
2. 02 02 Introdução ao HTML 4 AULAS 5 aulas

   • 0 elementos HTML
   • 1 O que é HTML
   • 2 Estrutura básica do HTML
   • 3 Principais elementos do HTML
   • 4 Entendendo a árvore DOM
3. 03 03 Introdução ao CSS 8 AULAS 8 aulas

   • 1 O que é CSS
   • 2 Estrutura do CSS
   • 3 Formas de inserir CSS na página
   • 4 Hotmart Club - 1920x1080 366K
   • 5 CSS Box Model
   • 6 Trabalhando com cores
   • 7 Unidades de Medida
   • 8 Hotmart Club - 1920x1080 390K
4. 04 04 Conhecendo os tipos de seletores | Seletores Básicos 7 aulas

   • 01_-_Seletores_Básicos
   • 02_-_Seletores_de_Combinação
   • 03_-_Seletores_de_Atributos
   • 04_-_Pseudo-Elementos
   • 05_-_Pseudo-Classes_de_Estado
   • 06_-_Outras_Pseudo-Classes
   • 07_-_Selector_-_A_tag_própria_do_Elementor
5. 05 05 Principais propriedades do CSS 26 AULAS 26 aulas

   • 1 Propriedade Display
   • 10 Propriedade box-shadow
   • 11 Propriedade cursor
   • 12 Propriedade overflow
   • 13 Propriedade clip-path
   • 14 Propriedades de máscara
   • 15 Propriedades de transformação
   • 16 Propriedades de animação
   • 17 Propriedades de transição
   • 18 Propriedades SVG
   • 19 Entendendo e utilizando shorthands
   • 2 Propriedade Position
   • 20 Media Queries
   • 21 Variáveis CSS
   • 22 Propriedade mix-blend-mode
   • 23 Propriedade pointer-events
   • 24 Propriedade white-space
   • 25 Função clamp()
   • 26 Função calc()
   • 3 Propriedades de texto
   • 4 Propriedades de cor
   • 5 Propriedades de dimensão
   • 6 Propriedades de background
   • 7 Propriedades de borda
   • 8 Propriedade z-index
   • 9 Propriedades de filtros
6. 06 06 CSS Flexbox 4 AULAS 4 aulas

   • 1 O que é o Flexbox
   • 2 Flexbox Container e Flexbox Items
   • 3 Propriedades do Flexbox Container (pai)
   • 4 Propriedades dos Flexbox Items (filhos)
7. 07 07 CSS Grid 11 AULAS 11 aulas

   • 1 O que é o CSS Grid
   • 10 Grid responsivo com auto-fit, auto-fill e minmax
   • 11 Exemplos práticos
   • 2 Entendendo a estrutura do CSS Grid
   • 3 A unidade de medida fr
   • 4 Propriedades grid-template-rows e grid-template-columns
   • 5 Propriedades grid-template-areas e grid-area
   • 6 Propriedades de gap
   • 7 Propriedades de posicionamento
   • 8 Propriedades grid-row e grid-column
   • 9 Propriedades grid-auto-rows e grid-auto-columns
8. 08 08 DevTools 14 AULAS 14 aulas

   • 1 O que são as DevTools e como iniciá-las
   • 10 Console
   • 11 Sources
   • 12 Ferramentas de Performance
   • 13 Simuladores CSS
   • 14 Exemplo prático - Copiando o CSS de uma página
   • 2 Conhecendo a interface e algumas funcionalidades
   • 3 Elements - Aba do Código HTML
   • 4 Elements - Aba Styles
   • 5 Elements - Aba Computed
   • 6 CSS Overview
   • 7 Rendering
   • 8 Changes
   • 9 Animations
9. 09 09 Estruturas dos Widgets 50 AULAS 50 aulas

   • 1 Introdução
   • 10 Google Maps
   • 11 Ícone
   • 12 Posts
   • 13 Portfólio
   • 14 Formulário
   • 15 Entrar
   • 16 Slides
   • 17 Menu de navegação
   • 18 Manchete animado
   • 19 Hotspot
   • 2 Container
   • 20 Lista de preços
   • 21 Tabela de preços
   • 22 Caixa que vira (flip box)
   • 23 Chamada à ação
   • 24 Carrossel de mídia
   • 25 Carrossel de depoimentos
   • 26 Sumário
   • 27 Contagem regressiva
   • 28 Botões de compartilhamento
   • 29 Caixa de citação
   • 3 Título
   • 30 Widgets do Facebook
   • 31 Widget Modelo
   • 32 Lottie
   • 33 Código destacado
   • 34 Playlist de vídeos
   • 35 Botões do PayPal e do Stripe
   • 36 Rastreador de progresso
   • 37 Caixa de Imagem
   • 38 Caixa de ícone
   • 39 Classificação
   • 4 Imagem
   • 40 Carrossel de imagens
   • 41 Galeria básica
   • 42 Lista de ícones
   • 43 Contador
   • 44 Barra de progresso
   • 45 Depoimentos
   • 46 Abas
   • 47 Acordeão e Sanfona
   • 48 Ícones Sociais
   • 49 Alerta
   • 5 Texto
   • 50 SoundCloud
   • 6 Video
   • 7 Botão
   • 8 Divisor
   • 9 Espaçamento
10. 10 10 CSS na prática 27 AULAS 29 aulas

    • 1 Introdução
    • 10 Carrossel de textos (marquee)
    • 11 Personalizando a barra de rolagem (scrollbar)
    • 12 Bordas em elementos com clip-path
    • 13 Botões 3D (estilo russos)
    • 14 Elementos flutuando
    • 15 Microinterações
    • 16 Carrossel com fade nas laterais
    • 17 Painéis com flex grow
    • 18 Criando SVGs animados
    • 19 Menu suspenso de tela cheia com clip-path
    • 2 Botão com brilho animado
    • 20 Botão pulsando
    • 21 Botão com máscara no hover
    • 21 Codepen
    • 22 Botão com luzes (box-shadow)
    • 23 Codepen
    • 23 Efeito de pontos luminosos (vagalumes)
    • 24 Efeito hover com transform scale
    • 25 Borda animada
    • 26 Imagem colorida (ou preta e branca) no hover
    • 27 Efeito hover para exibir páginas na galeria (portfólio)
    • 3 Botão com bordas degradê arredondadas
    • 4 Criando BGs com degradês
    • 5 Background com luzes animadas
    • 6 Criando um checklist
    • 7 Transição suave em botões com degradê
    • 8 Linhas do tempo (timelines)
    • 9 Carrossel contínuo
11. 11 11 w Bônus 1 - Manipulando CSS com Javascript 🔔 ATUALIZADO 03 02 202315 AULAS 17 aulas

    • 1 Variáveis.ts
    • 10 Hover dinâmico vinculado à posição do mouse.ts
    • 11 Animações de entrada vinculadas ao scroll.ts
    • 12 Mudar a cor da seção ao fazer scroll.ts
    • 13 Criando um formulário com campo Outro e validando as respostas.ts
    • 14 Destacando partes importantes do texto vinculado ao scroll.ts
    • Criando um vídeo para VSL (estilo VTurb) com o Youtube.ts
    • Criando um vídeo para VSL (estilo VTurb) com o Youtube
    • 2 Encontrando os elementos da página.ts
    • 3 Adicionando estilos CSS com Javascript.ts
    • 4 Adicionando ou removendo classes com Javascript
    • 5 Funções.ts
    • 6 Adicionando eventos
    • 6 Lista de eventos
    • 7 Condicionais if, else if e else.ts
    • 8 Laços de repetição (loop) - for e forEach.ts
    • 9 Acordeão e Safona fechados (ou abertos) ao abrir a página
12. 12 12 w Bônus 2 Animações avançadas com GSAP 16 aulas

    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 3 Delay Repeat Yoyo e Stagger
    • 4 Eases
    • 5
    • 6
    • 7
    • 8
    • 9
    • Conhecendo os métodos set, to, from e fromTo
    • O que é o GSAP e como utilizá-lo no Elementor
    • O_que_é_o_GSAP_e_como_utilizá-lo_no_Elementor_.html
13. 13 13 W Bônus 3 - Carrosséis com SwiperJS 13 02 2023 10 AULAS 11 aulas

    • 1 O que é o SwiperJS e como instalá-lo no Elementor
    • 1 O que é o SwiperJS e como instalá-lo no Elementor[2]
    • 10 Carrossel vertical com fade
    • 2 Entendendo a estrutura HTML e recriando-a no Elementor
    • 3 Script para remover o e-con-inner
    • 4 Adicionando paginação e navegação
    • 5 Customizando os elementos com CSS
    • 6 Conhecendo os parâmetros mais utilizados
    • 7 Breakpoints tornando o carrossel responsivo
    • 8 Eventos
    • 9 Carrossel Coverflow com desfoque
14. 14 14 w bonus 4 Imersão CSS 4 aulas

    • Descrição.html
    • Imersão CSS parte 2
    • Imersão CSS
    • Imersão CSS1parte 1
15. 15 15. Bônus - Lives sobre CSS e Javascript 14 aulas

    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
    • Aula
16. 16 16 W Bônus 5 - Workshop Otimização 2 AULAS 3 aulas

    • Descrição.html
    • Workshop Otimização de Landing Pages parte 1
    • Workshop Otimização de Landing Pages parte 2