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 22 de 44
Exibindo atualmente 24 casos
0505Layout de página e responsividade

Layout responsivo em mosaico: notas de pesquisa

Complete o layout responsivo em cascata no cenário de notas de pesquisa: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Layout de página e responsividadeLayout em cascata responsivoHTMLCSSJavaScript
Abrir e executar
0506Animação e microinterações

Alternância de estado de virada de página para status do pedido

No cenário de status do pedido, conclua a troca de páginas de estado: com conteúdo real, controles operáveis, feedback de estado claro e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAlternância de estado por virada de páginaHTMLCSS AnimationJavaScript
Abrir e executar
0507Formulários e entrada

Tabela de agendamento de períodos para reserva de eventos

No cenário de agendamento de eventos, conclua um formulário de reserva de horários: inclui conteúdo real, controles operáveis, feedback de estado claro e layout adaptável a vários tamanhos.

Formulários e entradaAgendamento por períodoHTMLCSSJavaScript
Abrir e executar
0508Cartões, listas e organização de conteúdo

Registros expansíveis do diretório da equipe

Concluir registros expansíveis em um cenário de diretório de equipe: com conteúdo real, controles acionáveis, feedback de estado claro e layout em várias dimensões.

Cartões, listas e organização de conteúdoRegistro expansívelHTMLCSSJavaScript
Abrir e executar
0509Layout de página e responsividade

Layout de barra lateral fixa para notas de pesquisa

Conclua um layout com barra lateral fixa no cenário de notas de pesquisa: inclui conteúdo realista, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Layout de página e responsividadelayout de barra lateral fixaHTMLCSS GridResponsive Design
Abrir e executar
0510Animação e microinterações

Feedback elástico de status do pedido

Monte um feedback elástico de controles em um cenário de status do pedido: com conteúdo real, controles operáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback elástico dos controlesHTMLCSS AnimationJavaScript
Abrir e executar
0511Formulários e entrada

Questionário condicional para reserva de evento

Conclua um questionário condicional em um cenário de agendamento de evento: com conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Formulários e entradaQuestionário condicionalHTMLCSSJavaScript
Abrir e executar
0512Cartões, listas e organização de conteúdo

Bloco de notas do diretório da equipe em layout em cascata

Complete um mosaico de notas no cenário do diretório da equipe: com conteúdo real, controles acionáveis, feedback de estado claro e layout adaptado a diferentes tamanhos.

Cartões, listas e organização de conteúdoNotas em cascataHTMLCSSJavaScript
Abrir e executar
0513Layout de página e responsividade

Layout em largura total com inserções para notas de pesquisa

Conclua um layout de largura total com inserções em um cenário de notas de pesquisa: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a vários tamanhos.

Layout de página e responsividadeLayout em faixa de largura totalHTMLCSS GridResponsive Design
Abrir e executar
0514Animação e microinterações

Feedback pop-up de notificação do status do pedido

Conclua o feedback de pop-up de notificação no cenário do status do pedido: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesFeedback de notificação pop-upHTMLCSSJavaScript
Abrir e executar
0515Layout de página e responsividade

Galeria adaptativa de notas de pesquisa

No cenário de notas de pesquisa, conclua uma galeria adaptável: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Layout de página e responsividadeGaleria responsivaHTMLCSSJavaScript
Abrir e executar
0516Animação e microinterações

Animação de revelação do conteúdo do status do pedido

No cenário de status do pedido, conclua uma animação de revelação de conteúdo: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Animação e microinteraçõesAnimação de revelação de conteúdoHTMLCSS AnimationJavaScript
Abrir e executar
0517Layout de página e responsividade

Layout principal-secundário de notas de pesquisa

Conclua um layout de conteúdo principal e secundário no cenário de notas de pesquisa: com conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em diferentes tamanhos.

Layout de página e responsividadeLayout de conteúdo principal e secundárioHTMLCSSJavaScript
Abrir e executar
0518Animação e microinterações

Animação do estado orbital do status do pedido

Conclua uma animação de estado orbital para o cenário de status do pedido: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout adaptável a diferentes tamanhos.

Animação e microinteraçõesAnimação de status orbitalHTMLCSS AnimationJavaScript
Abrir e executar
0519Layout de página e responsividade

Layout em grade tipo bento para documentação de produto

Conclua um layout em grade bento no cenário de documentação de produto: inclua conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo a diferentes tamanhos.

Layout de página e responsividadeLayout de grade em estilo bentoHTMLCSS GridResponsive Design
Abrir e executar
0520Layout de página e responsividade

Layout narrativo em tela dividida para documentação de produto

Conclua o layout narrativo em tela dividida no cenário de documentação de produto: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo em diferentes tamanhos.

Layout de página e responsividadelayout narrativo em tela divididaHTMLCSS GridResponsive Design
Abrir e executar
0521Controles básicos e seletores

Seleção rápida de data para casa inteligente

Concluir a seleção rápida de datas em um cenário de casa inteligente: inclui conteúdo real, controles acionáveis, feedback claro de estado e layout responsivo a diferentes tamanhos.

Controles básicos e seletoresSeleção rápida de dataHTMLCSSJavaScript
Abrir e executar
0522Controles básicos e seletores

Seleção de amostras de cores do bicicletário

Conclua a seleção de amostras de cores em um cenário de bicicletário: com conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo em diferentes tamanhos.

Controles básicos e seletoresSeleção de amostra de coresHTMLCSSJavaScript
Abrir e executar
0523Formulários e entrada

Formulário de rascunho automático para registro de clínica

Conclua um formulário de rascunho automático para o cenário de registro ambulatorial: inclui conteúdo real, controles interativos, feedback claro de status e layout responsivo em diferentes tamanhos.

Formulários e entradaFormulário de rascunho automáticoHTMLCSSJavaScript
Abrir e executar
0524Navegação e menus

Navegação rápida inferior do centro de suporte

Conclua uma navegação rápida na parte inferior no cenário de centro de suporte: com conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo entre tamanhos.

Navegação e menusNavegação rápida no rodapéHTMLCSSJavaScript
Abrir e executar
0525Sobreposições e feedback de estado

Painel inferior de ações para segurança da conta

Conclua o painel de ações inferior no cenário de segurança da conta: com conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Sobreposições e feedback de estadoPainel de ações inferiorHTMLCSSJavaScript
Abrir e executar
0526Cartões, listas e organização de conteúdo

Organizador de marcadores de estante de arquivo

Conclua o organizador de marcadores no cenário da estante de arquivo: inclui conteúdo real, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos.

Cartões, listas e organização de conteúdoOrganizador de favoritosHTMLCSS GridJavaScript
Abrir e executar
0527Tabelas e exibição de dados

Tabela de seleção em lote de frequência de aulas

Conclua uma tabela de seleção em massa em um cenário de frequência em aula: inclui conteúdo realista, controles interativos, feedback claro de status e layout responsivo a diferentes tamanhos.

Tabelas e exibição de dadosSeleção em massaHTML TableCSSJavaScript
Abrir e executar
0528Layout de página e responsividade

Galeria adaptativa de leitura de arquivos

Conclua a galeria adaptativa no cenário de leitura de arquivo: inclua conteúdo real, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.

Layout de página e responsividadeGaleria responsivaHTMLCSSJavaScript
Abrir e executar