Tutoriais CSS

Tutoriais CSS fornecem um caminho de aprendizado estruturado para estilização e design web. Eles cobrem propriedades CSS3, técnicas de layout e design responsivo, adequados tanto para desenvolvedores web iniciantes quanto intermediários. Através de laboratórios práticos e exemplos, você ganhará experiência na criação de layouts web atraentes e responsivos. Nosso playground CSS interativo permite que você experimente diferentes estilos e veja resultados visuais instantâneos.

Criando um Aplicativo Web Task Timer

Criando um Aplicativo Web Task Timer

Neste projeto passo a passo, você aprenderá como criar um aplicativo web Task Timer usando HTML, CSS e JavaScript. Este aplicativo web permitirá que os usuários adicionem tarefas, iniciem e parem cronômetros para cada tarefa e excluam tarefas. Ao final deste projeto, você terá um aplicativo web Task Timer totalmente funcional com uma interface moderna e amigável.
JavaScriptHTMLCSS
Criando um Aplicativo Web de Quadro de Desenho

Criando um Aplicativo Web de Quadro de Desenho

Neste projeto, criaremos um aplicativo web simples de quadro de desenho passo a passo. Cada etapa se baseará na anterior, permitindo que você adicione gradualmente funcionalidades ao aplicativo. Ao final deste projeto, você terá um quadro de desenho totalmente funcional onde os usuários podem desenhar, alterar a cor do pincel, ajustar o tamanho do pincel e limpar a tela.
JavaScriptHTMLCSS
Desenvolva um Editor Markdown com Visualização ao Vivo

Desenvolva um Editor Markdown com Visualização ao Vivo

Neste projeto, criaremos um editor Markdown simples baseado na web que oferece visualização HTML ao vivo enquanto você digita. Usando bibliotecas como Ace Editor, marked e highlight.js, você desenvolverá um editor intuitivo que não apenas permite escrever em Markdown, mas também salva dados entre as sessões do navegador e destaca trechos de código na visualização.
JavaScriptHTMLCSS
Construindo um Aplicativo Web Moderno de Divisão de Despesas

Construindo um Aplicativo Web Moderno de Divisão de Despesas

Neste projeto passo a passo, criaremos um aplicativo web moderno e visualmente atraente de Divisão de Despesas usando HTML, CSS e JavaScript. Este aplicativo permitirá que você divida as despesas entre um grupo de pessoas e calcule quem deve o quê a quem. Começaremos do zero e cobriremos cada etapa para construir o projeto progressivamente.
JavaScriptHTMLCSS
Não Pise no Azulejo Branco

Não Pise no Azulejo Branco

Este projeto guia você na criação de um jogo simples, porém envolvente, baseado na web, intitulado 'Não Pise no Azulejo Branco'. Seguindo estas etapas, você aprenderá a combinar HTML, CSS e JavaScript para construir um jogo interativo onde os jogadores devem evitar pisar nos azulejos brancos para marcar pontos. Este projeto é ideal para iniciantes que desejam praticar suas habilidades de desenvolvimento web.
JavaScriptHTMLCSS
Construindo um Jogo Web de Evitar Blocos

Construindo um Jogo Web de Evitar Blocos

Neste projeto, vamos construir um jogo divertido e simples de evitar blocos usando HTML, CSS e JavaScript. Este jogo envolve mover blocos onde o jogador deve clicar nos blocos pretos para marcar pontos e evitar clicar nos blocos brancos. Vamos começar a construí-lo passo a passo!
JavaScriptHTMLCSS
Simulação do Problema de Monty Hall - Web App

Simulação do Problema de Monty Hall - Web App

Bem-vindo ao projeto de Simulação do Problema de Monty Hall. O problema de Monty Hall é um quebra-cabeça de probabilidade baseado em um cenário de programa de jogos. Neste projeto, vamos guiá-lo na criação de uma simulação simples baseada na web para demonstrar o quebra-cabeça. No final, você terá uma simulação funcional de Monty Hall para testar a teoria por si mesmo.
JavaScriptHTMLCSS
Manipulação do DOM com JavaScript

Manipulação do DOM com JavaScript

Neste laboratório, você aprenderá os fundamentos da manipulação do DOM com JavaScript, incluindo seleção de elementos, alteração de conteúdo, definição de atributos e criação/anexação de novos elementos.
JavaScriptHTMLCSS
Crie um Encurtador de URLs com Flask e MySQL

Crie um Encurtador de URLs com Flask e MySQL

Este projeto guia você na criação de um serviço simples de encurtamento de URLs usando Flask e MySQL. Você aprenderá a configurar um banco de dados, projetar uma interface web e implementar funcionalidades para encurtar URLs, pesquisar URLs por tags e visualizar análises. O projeto é amigável para iniciantes e oferece uma visão abrangente do desenvolvimento web com Python e gerenciamento de banco de dados.
HTMLPythonMySQLCSS
Jogo de Quebra-Cabeça Flip com jQuery

Jogo de Quebra-Cabeça Flip com jQuery

Este projeto, o 'Jogo de Quebra-Cabeça Flip com jQuery', oferece uma experiência prática em desenvolvimento web, focando em JavaScript, jQuery e Bootstrap. Ele envolve programação orientada a objetos em JavaScript e aborda a questão comum da ligação de 'this' no contexto do desenvolvimento web. O jogo é implementado usando jQuery e Bootstrap 3 para a interface do usuário. Embora a familiaridade com Bootstrap seja útil, a lógica principal do projeto é construída com jQuery e JavaScript.
JavaScriptCSSHTML
Construa um Jogo de Quebra-Cabeça Deslizante com JavaScript

Construa um Jogo de Quebra-Cabeça Deslizante com JavaScript

Bem-vindo a este projeto sobre a construção de um simples jogo de Quebra-Cabeça Deslizante usando JavaScript. Ao final deste guia, você terá um jogo de quebra-cabeça deslizante 3x3 funcional que poderá jogar em seu navegador. O jogo apresentará peças numeradas, um cronômetro e controles para iniciar, pausar e reiniciar o jogo.
JavaScriptHTMLCSS
Construindo um Heatmap de Contribuições no React (GitHub)

Construindo um Heatmap de Contribuições no React (GitHub)

Este projeto irá guiá-lo na criação de um calendário heatmap em React, semelhante ao gráfico de contribuições do GitHub. Este tipo de calendário pode ser uma maneira atraente de visualizar dados de atividade ao longo do tempo, com a intensidade da cor indicando o nível de atividade em um determinado dia. Ao final deste projeto, você terá uma compreensão clara de como integrar e usar um heatmap de calendário em uma aplicação React.
ReactJavaScriptCSS
Crie um Web App de Carousel Swiper

Crie um Web App de Carousel Swiper

Neste projeto, você aprenderá como criar um web app de carousel Swiper que apresenta um layout de carousel visualmente atraente com conteúdo temático cósmico. O aplicativo permitirá que os usuários naveguem por diferentes slides e visualizem cartões com fatos interessantes sobre o universo.
CSSJavaScriptHTML
Crie um Jogo Web de Raspadinha

Crie um Jogo Web de Raspadinha

Neste projeto, vamos guiá-lo pelo processo de criação de um simples jogo de Raspadinha baseado na web. Este jogo permite que os usuários raspe uma sobreposição cinza para revelar uma imagem subjacente, que será uma mensagem de 'vencedor' ou 'tente novamente'. Usaremos HTML para a estrutura, CSS para estilização e JavaScript para interatividade.
JavaScriptHTMLCSS
Criando um Jogo Web Whack-a-Mole

Criando um Jogo Web Whack-a-Mole

Neste projeto, você aprenderá como criar um jogo Whack-a-Mole usando HTML, CSS e JavaScript. O jogo envolve golpear toupeiras que aparecem aleatoriamente de buracos dentro de um limite de tempo especificado. Você criará os arquivos HTML, CSS e JavaScript necessários e implementará a lógica do jogo passo a passo.
JavaScriptHTMLCSS
Criando um Jogo Campo Minado com JavaScript

Criando um Jogo Campo Minado com JavaScript

Acredito que todos já jogaram o clássico jogo Campo Minado antes. Ele tem regras simples, mas é altamente viciante. Você já pensou em desenvolver um você mesmo? Hoje, criaremos uma versão web do Campo Minado. Primeiro, vamos dar uma olhada em uma captura de tela da interface.
JavaScriptCSS
Construindo um Jogo de Quebra-Cabeça Drag-and-Drop em React

Construindo um Jogo de Quebra-Cabeça Drag-and-Drop em React

Neste projeto, criaremos um jogo de quebra-cabeça drag-and-drop usando React. Este é um excelente projeto para iniciantes aprenderem sobre componentes React, gerenciamento de estado e tratamento de interações do usuário. Ao final deste projeto, você terá um jogo de quebra-cabeça funcional.
ReactJavaScriptCSS
Construa uma Ferramenta de Corte de Imagem Usando HTML5

Construa uma Ferramenta de Corte de Imagem Usando HTML5

Este projeto irá guiá-lo através do processo de criação de uma ferramenta simples de corte de imagem. Ao final, você terá uma aplicação interativa que permite aos usuários carregar, exibir e cortar imagens.
JavaScriptHTMLCSS
  • Anterior
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ...
  • 20
  • Próximo