APRENDIZAGEM

Conteúdo do Curso

O curso é dividido em 5 módulos onde você vai aprender do zero a criar seus próprios projetos web desde a base da estrutura dos sites até a otimização de SEO para indexação no Google.

MÓDULO 1 - CRIANDO A BASE

Esse módulo é a base introdutória para a gente começar a entender a estrutura, alinhamento e criação de elementos.

AULA #1
A estrutura dos sites

Veremos como são desenvolvidos sites como Airbnb.com e spacex.com para entendermos a estrutura deles.

AULA #2
Alterando os elementos

Vamos definir novas formas e estilos aos elementos que adicionamos na tela de desenvolvimento.

AULA #3
Alinhando os elementos

Será introduzido como alinhar os elementos na plataforma (uma das principais dúvidas de quem está começando)

AULA #4
Como configurar o estilo do seu projeto

Será ensinado como criar um padrão de estilo do projeto para organizar e facilitar o desenvolvimento.

MÓDULO 2 - PROJETO DO ZERO

Aqui começaremos a criar um projeto do zero passando por todas as etapas do desenvolvimento.

AULA #1
Criando um projeto
do Zero

Começaremos a desenvolver um projeto One Page do absoluto zero, utilizando os aprendizados anteriores.

AULA #2
Alinhamento com blocos e otimização de ícones

Aprenderemos como alinhar elementos usando o FLEX e onde buscar icones de alta qualidade para o nosso projeto.

AULA #3
Introdução ao SEO
e otimização de imagens

Vamos ter uma breve introdução ao SEO e aprenderemos uma dica para deixar as imagens mais levinhas.

AULA #4
Finalização estrutural do nosso primeiro projeto

Vamos finalizar desenvolvendo o footer (rodapé) do nosso site e relembraremos os aprendizados sobre as estruturas dos sites.

AULA #5
Configuração de links
e mouse hover

Aprenderemos a configurar os links âncoras e links das redes sociais e faremos uma interação quando o usuário passa o mouse em cima de um elemento.

AULA #6
Como desenvolver um site responsivo para todos dispositivos

Vamos deixar o nosso site responsivo para abrir certinho em todos os dispositivos.

MÓDULO 3 - camada de complexidade

Neste módulo vamos adicionar uma camada de complexidade em vários elementos para retomar e aprofundar os aprendizados das aulas anteriores.

AULA #1
Otimização do header e destaque nos botões

Aprofundaremos o aprendizado sobre a unidade viewport e aprenderemos como destacar e adicionar icones nos botões.

AULA #2
Criando um formulário de captação de email

Nessa aula vamos criar um form do zero, daqueles que são bastante utilizados na internet.

AULA #3
Posição e animação de elementos

Vamos aprender sobre o posicionamento dos elementos usando o "relative" e "absolute" e criaremos a primeira animação do nosso projeto.

AULA #4
Configurando um menu fixo e links do footer

Aprenderemos sobre outra forma de posicionamento, o "fixed", e também adicionaremos links no footer do nosso site.

AULA #5
Criando uma nova página com vídeo e slider

Vamos criar uma nova página "como funciona" com vídeo explicativo e um slider com texto e imagem de fundo.

AULA #6
Ajustando os links e o responsivo no mobile

Ajustaremos os links que faltaram e finalizaremos os últimos ajustes no responsivo do mobile.

MÓDULO 4 - DICAS AVANÇADAS

Vamos aprender dicas avançadas para melhorar o desenvolvimento, integrações de formulários e configuração do SEO,

AULA #1
Problema de usabilidade

Vou explicar como um site OnePage pode prejudicar a experiência do usuário

AULA #2
Desconstruindo a estrutura dos sites

Vamos aprender utilizar um container maior e desenvolver outros formatos de sites

AULA #3
Explicação sobre html/css/javascript

Nessa aula vamos entender o que estamos fazendo no Webflow em relação a programação das linguagens html, css e js.

AULA #4
Responsivo em todos os dispositivos

Vamos aprender a deixar o nosso projeto abrindo bonitinho em todos os dispositivos e resoluções.

AULA #5
Integração de formulários

Aprenderemos a integrar os formulários usando plataformas como mailchimp e rdstation.

AULA #6
Configuração do SEO

Quer que o seu projeto apareça nas buscas do Google? Vamos aprender nessa aula.

MÓDULO 5 - I LOVE WEBFLOW

Entenderemos um pouco mais sobre a plataforma do Webflow, os planos para designers e hospedagem e finalizaremos com dicas e tendências de layouts para os próximos anos.

AULA #1
Os planos de designer do Webflow

Todas as informações para a contratação dos planos de designer de acordo com a sua necessidade.

AULA #2
Hosting (hospedagem)

Vamos aprender como hospedar um site em um servidor externo ou na própria plataforma Webflow.

AULA #3
Dicas de Design & tendências de layouts

As últimas novidades e tendências para criar projetos inovadores.

Tudo que você vai passar nessa jornada

São 25 aulas! Quase 4 horas e meia de conteúdo.

16 exercícios práticos e 1 projeto do zero criado!

E isso é tudo que
você vai aprender ;)

Adicionar um
novo projeto
Gerar o link share
Adicionar um menu
de navegação (navbar)
Inspecionar elementos no navegador
Alinhar elementos que tenham "Width" (largura)
Adicionar imagem
de fundo na section
Ajustar a margem
dos elementos
Criar classe
para elementos
Salvar projeto
Publicar o site
Alinhamento básico
dos elementos
Resetar as características
do elemento
Configurar o estilo padrão
do seu projeto (css)
Excluir as classes que não usa mais (limpar o css)
Hierarquia de alteração dos elementos
Introdução ao viewport (vh)
Adicionar um menu
de navegação (navbar)
Inspecionar elementos no navegador
Alinhar elementos que tenham "Width" (largura)
Adicionar imagem de fundo na section
Alinhar elementos dentro
de um bloco (div)
Procurar e inserir icones
de alta qualidade
Icones em formato SVG
Alinhar elementos dentro
de um bloco (div)
Adicionar um
link block
Introdução ao "Block"
e "Inline-Block"
Reforço da estrutura
padrão dos sites
Introdução ao SEO (Search Engine Optimization)
Configurar um
link âncora
Adicionar a interação
mouse hover
Alterar o estilo de um
current link
Dicas de otimização
de imagens
Como deixar
o site responsivo
Desabilitar elementos em determinados dispostiivos
Dicas de usabilidade para links no mobile
Conceito da unidade
de medida viewport
Criar um formulário
de captação de email
Configurar os elementos
alinhados no flex
Configurar o estilo padrão dos títulos (headings) e parágrafos
Adicionar um icone
dentro de um botão
Adicionar e alterar o tamanho de um vídeo
Adicionar e
customizar um slider
Adicionar um
fundo degradê
Usar um
Symbol
Configurar um
link para outra página
Verificar se um elemento
existe em mais de uma página
Adicionar uma
combo class
Direcionar para uma
página com links âncora
Criar um container
personalizado
Criar um menu
fixo lateral
Criar blocos com
largura em %
Desconectar um Symbol
para fazer alteração
Como ajustar o responsivo
em todos dispositivos
As resoluções de tela
mais utilizadas
Problemas de usabilidade que podem acontecer
Como integrar um
formulário de email
Configuração estrutural
do SEO
Sites para estudo
de palavras-chave
Configuração do título e
descrição da página
Informações sobre
os planos de Designer
Informações sobre
os planos de Hosting
Como hospedar o
projeto no Webflow
Como hospedar o projeto
em um servidor externo
Como usar o embed pra
adicionar códigos no projeto
Adicionar um vídeo
background
Criar efeito
parallax
Adicionar um
webclip e favicon