HTML / CSS / JavaScript

Casos completos

Escolha um caso completo, veja o resultado diretamente, modifique o código-fonte e execute-o no navegador.

1046Página 2 de 44
Exibindo atualmente 24 casos
0025Cartões, listas e organização de conteúdo

Parede de cartões filtráveis da lista de leitura

Complete uma parede de cartões filtráveis no cenário de lista de leitura: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Cartões, listas e organização de conteúdopainel de cartões filtrávelHTMLCSSJavaScript
Abrir e executar
0026Tabelas e exibição de dados

Tabela de ordenação por múltiplas colunas do livro de estoque

Conclua uma tabela classificável de várias colunas em um cenário de livro-razão de estoque: inclua conteúdo realista, controles acionáveis, feedback de estado claro e um layout responsivo em diferentes tamanhos.

Tabelas e exibição de dadosTabela de classificação multicolunaHTML TableCSSJavaScript
Abrir e executar
0027Layout de página e responsividade

Layout em grid tipo bento para crônica de arquitetura

Conclua o layout em grade estilo bento no cenário do diário de arquitetura: inclua conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em vários tamanhos.

Layout de página e responsividadeLayout de grade em estilo bentoHTMLCSS GridResponsive Design
Abrir e executar
0028Páginas de cenário de marketing e conteúdo

Hero narrativo de marca de chá

Concluir uma hero section narrativa em um cenário de marca de chá: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Páginas de cenário de marketing e conteúdoHero narrativoHTMLCSSJavaScript
Abrir e executar
0029Painéis e interfaces de administração

Visão geral dos principais indicadores operacionais da biblioteca

Conclua a visão geral dos indicadores-chave no cenário de operação de biblioteca: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Painéis e interfaces de administraçãoVisão geral dos principais indicadoresHTMLCSS GridJavaScript
Abrir e executar
0030Fluxos de negócios e serviços

Calculadora do carrinho da floricultura

Conclua a calculadora de carrinho no cenário de floricultura: inclui conteúdo real, controles operáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Fluxos de negócios e serviçosCalculadora do carrinhoHTMLCSSJavaScript
Abrir e executar
0031Tipografia e efeitos de texto

Escala tipográfica responsiva de poemas da serra

Conclua a escala tipográfica responsiva no cenário de coletânea de poemas da serra: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Tipografia e efeitos de textoescala tipográfica responsivaHTMLCSS TypographyJavaScript
Abrir e executar
0032Animação e microinterações

Carregador multietapas de upload de arquivos

Conclua um carregador em várias etapas em um cenário de upload de arquivos: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõescarregador em várias etapasHTMLCSS AnimationJavaScript
Abrir e executar
0033Efeitos visuais criativos

Campo interativo de partículas em águas profundas

Complete um cenário interativo de partículas no fundo do mar: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Efeitos visuais criativosCampo de partículas interativasHTMLCanvasJavaScript
Abrir e executar
0034Desenho e visualização de dados

Gráfico de barras interativo de qualidade do ar

Conclua um gráfico de barras interativo no cenário de qualidade do ar: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Desenho e visualização de dadosGráfico de barras interativoHTMLCanvasJavaScript
Abrir e executar
0035Capacidades de mídia e dispositivos do navegador

Painel de informações de viewport do Laboratório de Dispositivos

Conclua o painel de informações de viewport no contexto de laboratório de dispositivos: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em vários tamanhos.

Capacidades de mídia e dispositivos do navegadorPainel de informações da viewportHTMLCSSBrowser API
Abrir e executar
0036Miniaplicativos e minijogos

Calculadora portátil da noite em família

Conclua uma calculadora portátil no cenário da noite em família: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Miniaplicativos e minijogoscalculadora portátilHTMLCSSJavaScript
Abrir e executar
0037Controles básicos e seletores

Matriz de alternâncias de preferências da sala de reunião

Conclua uma matriz de alternâncias de preferências em um cenário de sala de reunião: inclui conteúdo real, controles operáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Controles básicos e seletoresMatriz de alternadores de preferênciasHTMLCSSJavaScript
Abrir e executar
0038Formulários e entrada

Fluxo de inscrição em etapas para voluntários

Conclua o fluxo de preenchimento em várias etapas no cenário de inscrição de voluntários: inclui conteúdo real, controles operáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Formulários e entradaFluxo de preenchimento em etapasHTMLCSSJavaScript
Abrir e executar
0039Navegação e menus

Navegação em breadcrumb para guia do museu

Conclua a navegação por breadcrumbs no cenário de guia do museu: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Navegação e menusNavegação por breadcrumbsHTMLCSSJavaScript
Abrir e executar
0040Sobreposições e feedback de estado

gaveta lateral de revisão de documentos

Conclua uma gaveta lateral no cenário de revisão de documentos: inclua conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Sobreposições e feedback de estadogaveta lateralHTMLCSSJavaScript
Abrir e executar
0041Cartões, listas e organização de conteúdo

Quadro de tarefas da lista de leitura

Conclua tarefas em um cenário de lista de leitura: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo para vários tamanhos.

Cartões, listas e organização de conteúdoQuadro de tarefasHTMLCSS GridJavaScript
Abrir e executar
0042Tabelas e exibição de dados

Tabela de filtro combinado do livro-razão de estoque

Conclua a tabela de filtros combinados no cenário do livro-razão de estoque: inclui conteúdo real, controles acionáveis, feedback de status claro e layout entre tamanhos de tela.

Tabelas e exibição de dadosTabela de filtros combinadosHTML TableCSSJavaScript
Abrir e executar
0043Layout de página e responsividade

Layout responsivo de narrativa em tela dividida para crônica de arquitetura

Conclua um layout narrativo em tela dividida em um cenário de diário de arquitetura: com conteúdo real, controles acionáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Layout de página e responsividadelayout narrativo em tela divididaHTMLCSS GridResponsive Design
Abrir e executar
0044Páginas de cenário de marketing e conteúdo

Página de planos de preços da marca de chá

Conclua a página de plano de preços no cenário de uma marca de chá: inclui conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Páginas de cenário de marketing e conteúdoPágina de planos de preçosHTMLCSSJavaScript
Abrir e executar
0045Painéis e interfaces de administração

Painel de análise de tendências de operações da biblioteca

Conclua um painel de análise de tendências para o cenário de operação de biblioteca: inclui conteúdo real, controles operáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Painéis e interfaces de administraçãoPainel de análise de tendênciasHTMLCanvasJavaScript
Abrir e executar
0046Fluxos de negócios e serviços

Fluxo de etapas de checkout da floricultura

Conclua o fluxo de etapas de finalização em cenário de floricultura: inclui conteúdo real, controles operáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Fluxos de negócios e serviçosFluxo de etapas de checkoutHTMLCSSJavaScript
Abrir e executar
0047Tipografia e efeitos de texto

Experimento de hierarquia de peso tipográfico da coletânea de poemas da montanha

Conclua um experimento de hierarquia de pesos tipográficos no cenário de um livro de poesia campestre: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Tipografia e efeitos de textoExperimento de hierarquia de peso da fonteHTMLCSS TypographyJavaScript
Abrir e executar
0048Animação e microinterações

Transição de forma do botão de upload de arquivo

Complete a transição da forma do botão em cenários de upload de arquivos: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesTransição de forma do botãoHTMLCSS AnimationJavaScript
Abrir e executar