Início

O layout que vamos criar | Formação em Vibe Coding | ibe.IA

Formação em Vibe Coding
WeWeb - Design e Responsividade
Fundamentos de Design e Responsividade

Introdução ao Design em WeWeb

O layout que vamos criar

Acesso Restrito

Faça login para acessar o conteúdo desta aula.

Fazer login Voltar para o curso

Anterior Próxima

Copyright ©2026 - Todos os direitos reservados
Feito com ☕ e alguns bilhões de tokens de IA

Fundamentos de Design e Responsividade

Progresso do Módulo

0 de 96 aulas concluídas

5 Princípios Básicos de Design de Aplicativos9 min

Wireframes2 min

Espaçamentos3 min

Tabelas de Cores5 min

Tipografia - Tipos, onde achar, melhores fontes e tamanhos10 min

Tipografia - Boas práticas e acessibilidade7 min

Mapa mental do aplicativo4 min

Ferramentas e extensões úteis para o design10 min

Buscando Inspiração10 min

O layout que vamos criar5 min

Posicionando as divs para montar a estrutura do dashboard6 min

Ajustando larguras e alturas das divs3 min

Posicionamento e espaçamento das divs5 min

Cabeçalho do Menu Lateral - Cor de fundo, imagem e espaçamento5 min

Menu Lateral - Cor de fundo e espaçamento10 min

Menu Lateral - Criando os botões8 min

Menu Lateral - Efeito de hover nos botões8 min

Menu Lateral - Botão Sair5 min

Menu Lateral - Ajustando o menu lateral2 min

Cabeçalho - Cor de fundo e espaçamento6 min

Cabeçalho - Barra de busca7 min

Cabeçalho - Avatar7 min

Conteúdo - Cor de fundo e espaçamento2 min

Conteúdo - Posicionamento das divs6 min

Conteúdo - Criando os cards superiores10 min

Conteúdo - Estilizando os cards superiores10 min

Conteúdo - Efeito de hover nos cards superiores3 min

Conteúdo - Criando os cards inferiores9 min

Conteúdo - Estilizando os cards inferiores (Parte 1)9 min

Conteúdo - Estilizando os cards inferiores (Parte 2)10 min

Conteúdo - Estilizando os cards inferiores (Parte 3)10 min

Conteúdo - Estilizando os cards inferiores (Parte 4)10 min

Conteúdo - Estilizando os cards inferiores (Parte 5)5 min

Conteúdo - Criando a tabela com dados7 min

Conteúdo - Estilizando a tabela (Parte 1)8 min

Conteúdo - Estilizando a tabela (Parte 2)10 min

Conteúdo - Criando o gráfico2 min

Conteúdo - Estilizando o gráfico10 min

Fixar cabeçalho2 min

Fixar menu lateral4 min

Menu Retrátil - Preparando a estrutura5 min

Menu Retrátil - Botões de abrir e fechar9 min

Menu Retrátil - Ajustando o tamanho do menu7 min

Menu Retrátil - Criar variável para abrir e fechar o menu2 min

Menu Retrátil - Criar variável Largura do menu1 min

Menu Retrátil - Ligando a variável de abrir e fechar nos componentes4 min

Menu Retrátil - Ação de abrir e fechar menu4 min

Menu Retrátil - Ação de ajustar a largura do menu4 min

Menu Retrátil - Efeito na Transição do menu2 min

Menu Retrátil - Efeito Hover nos icones2 min

Esconder menu lateral2 min

Criando Header Mobile e Botão para abrir menu5 min

Mostrar Header Mobile2 min

Criar variável para abrir menu1 min

Ligar variável no componente1 min

Ação de abrir menu8 min

Ajustes Menu Mobile3 min

Ajustes de responsividade nos cards superiores2 min

Ajustes de responsividade nos cards inferiores2 min

Ajustes de responsividade nos cards da tabela e do grafico1 min

Ajustes de responsividade Margens Laterais2 min

Ajustes de responsividade Espaçamento dos Titulos3 min

Ajustes de responsividade Espaçamento Tabela e Gráfico1 min

Ajustes de responsividade na tabela4 min

Ajuste geral na responsividade7 min

Criando variável1 min

Botão para alterar o modo1 min

Ligando a variável2 min

Ação ativar o modo2 min

Ajustando os componentes (Parte 1)12 min

Ajustando os componentes (Parte 2)7 min

Ajustando Botão Toggle4 min

Ajustando no Menu Mobile2 min

Sem duplicar componentes3 min

Ajustando a estrutura5 min

Ação Botão abrir e fechar Menu2 min

Escondendo os Elementos5 min

Criando State e ligando Variável7 min

Usando Classes para mudar Elementos no Layout9 min

Criando menus Dropdown - Preparando a Estrutura7 min

Criando menus Dropdown - Criando Variável submenu1 min

Criando menus Dropdown - Abrir e fechar o Menu3 min

Criando menus Dropdown - Alterando os icones3 min

Criando menus Dropdown - Cor Botão Selecionado2 min

Criando menus Dropdown - Escondendo ícone no Retrátil5 min

Criando menus Dropdown - Hover no Submenu2 min

Criar uma Div Flutuante no Menu do Card14 min

Criando um Modal (Popup)7 min

Criar um formulário no Modal5 min

Estilizar o Formulário7 min

Criando uma Tabbar para Mobile13 min

Criar e Salvar Cores, Espaçamentos em Libraries5 min

Finalização do módulo1 min

Avaliação do Módulo