Início
Início
Entrar
  1. Formação em Vibe Coding
  3. WeWeb - Design e Responsividade
  5. Fundamentos de Design e Responsividade
Iniciando o design do Dashboard

Posicionando as divs para montar a estrutura do dashboard

Acesso Restrito

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

Fazer loginVoltar para o curso
AnteriorPró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
Grids4 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
Ajustes4 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