InícioSuporte
InícioSuporteLinks
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 Aplicativos
Grids
Wireframes
Espaçamentos
Tabelas de Cores
Tipografia - Tipos, onde achar, melhores fontes e tamanhos
Tipografia - Boas práticas e acessibilidade
Mapa mental do aplicativo
Ferramentas e extensões úteis para o design
Buscando Inspiração
O layout que vamos criar
Posicionando as divs para montar a estrutura do dashboard
Ajustando larguras e alturas das divs
Posicionamento e espaçamento das divs
Cabeçalho do Menu Lateral - Cor de fundo, imagem e espaçamento
Menu Lateral - Cor de fundo e espaçamento
Menu Lateral - Criando os botões
Menu Lateral - Efeito de hover nos botões
Menu Lateral - Botão Sair
Menu Lateral - Ajustando o menu lateral
Cabeçalho - Cor de fundo e espaçamento
Cabeçalho - Barra de busca
Cabeçalho - Avatar
Conteúdo - Cor de fundo e espaçamento
Conteúdo - Posicionamento das divs
Conteúdo - Criando os cards superiores
Conteúdo - Estilizando os cards superiores
Conteúdo - Efeito de hover nos cards superiores
Conteúdo - Criando os cards inferiores
Conteúdo - Estilizando os cards inferiores (Parte 1)
Conteúdo - Estilizando os cards inferiores (Parte 2)
Conteúdo - Estilizando os cards inferiores (Parte 3)
Conteúdo - Estilizando os cards inferiores (Parte 4)
Conteúdo - Estilizando os cards inferiores (Parte 5)
Conteúdo - Criando a tabela com dados
Conteúdo - Estilizando a tabela (Parte 1)
Conteúdo - Estilizando a tabela (Parte 2)
Conteúdo - Criando o gráfico
Conteúdo - Estilizando o gráfico
Fixar cabeçalho
Fixar menu lateral
Ajustes
Menu Retrátil - Preparando a estrutura
Menu Retrátil - Botões de abrir e fechar
Menu Retrátil - Ajustando o tamanho do menu
Menu Retrátil - Criar variável para abrir e fechar o menu
Menu Retrátil - Criar variável Largura do menu
Menu Retrátil - Ligando a variável de abrir e fechar nos componentes
Menu Retrátil - Ação de abrir e fechar menu
Menu Retrátil - Ação de ajustar a largura do menu
Menu Retrátil - Efeito na Transição do menu
Menu Retrátil - Efeito Hover nos icones
Esconder menu lateral
Criando Header Mobile e Botão para abrir menu
Mostrar Header Mobile
Criar variável para abrir menu
Ligar variável no componente
Ação de abrir menu
Ajustes Menu Mobile
Ajustes de responsividade nos cards superiores
Ajustes de responsividade nos cards inferiores
Ajustes de responsividade nos cards da tabela e do grafico
Ajustes de responsividade Margens Laterais
Ajustes de responsividade Espaçamento dos Titulos
Ajustes de responsividade Espaçamento Tabela e Gráfico
Ajustes de responsividade na tabela
Ajuste geral na responsividade
Criando variável
Botão para alterar o modo
Ligando a variável
Ação ativar o modo
Ajustando os componentes (Parte 1)
Ajustando os componentes (Parte 2)
Ajustando Botão Toggle
Ajustando no Menu Mobile
Sem duplicar componentes
Ajustando a estrutura
Ação Botão abrir e fechar Menu
Escondendo os Elementos
Criando State e ligando Variável
Usando Classes para mudar Elementos no Layout
Criando menus Dropdown - Preparando a Estrutura
Criando menus Dropdown - Criando Variável submenu
Criando menus Dropdown - Abrir e fechar o Menu
Criando menus Dropdown - Alterando os icones
Criando menus Dropdown - Cor Botão Selecionado
Criando menus Dropdown - Escondendo ícone no Retrátil
Criando menus Dropdown - Hover no Submenu
Criar uma Div Flutuante no Menu do Card
Criando um Modal (Popup)
Criar um formulário no Modal
Estilizar o Formulário
Criando uma Tabbar para Mobile
Criar e Salvar Cores, Espaçamentos em Libraries
Finalização do módulo
Avaliação do Módulo