HTML5
-
Elementos HTML Menos Comuns e Como Utilizá-los em seu Código
O HTML possui muitas tags que muitas pessoas usam todos os dias, como <div>, <p> e <a>. Mas também existem algumas joias escondidas que muitas vezes passam despercebidas. Essas tags podem ajudar a tornar os sites mais envolventes, acessíveis e significativos sem muito esforço extra. Neste artigo, discutiremos um grupo de elementos HTML únicos que podem aprimorar suas páginas da web. Eles oferecem funções específicas para formatação de texto, melhoria da legibilidade e adição de recursos interativos. Sumário A Tag…
-
Como Criar uma Ferramenta de Seleção de Cores Usando HTML, CSS e JavaScript
Você já quis criar suas próprias ferramentas interativas usando apenas HTML, CSS e JavaScript? Neste artigo, vamos criar um projeto divertido e fácil: uma ferramenta de seleção de cor. Essa útil pequena ferramenta permitirá que usuários selecionem qualquer cor que desejarem e vejam instantaneamente seus valores HEX e RGB. Então, pegue em seu favorito editor de código e vamos começar! Passo 1: Configurar o Projeto Criar uma Nova Pasta: Comece criando uma nova pasta no seu computador para esse projeto.…
-
Pratique suas Habilidades de HTML, CSS e JavaScript em Espanhol construindo 3 Projetos
A construção de projetos é muito importante para aprender a programar. Quando você cria um projeto, expande seu portfólio e aprende a aplicar suas habilidades a novas situações. Nós acabamos de publicar um curso de 2 horas no canal YouTube freeCodeCamp.org em Espanhol que o guiará passo a passo através da construção de 3 projetos com HTML, CSS e JavaScript. Você praticará suas habilidades construindo uma barra de navegação responsiva com menus dropdown, um slider e uma página de destino…
-
Canvas vs SVG: Escolhendo a Ferramenta Certa para o Trabalho
HTML5 Canvas e SVG são ambas tecnologias baseadas em padrões do HTML5 que você pode usar para criar incríveis gráficos e experiências visuais. A questão que eu estou fazendo nesse artigo é a seguinte: Deveria importar qual delas você usa em seu projeto? Em outras palavras, existem casos de uso para preferir HTML5 Canvas sobre SVG? Primeiro, vamos dedicar algumas palavras para introduzir o HTML5 Canvas e o SVG. O que é HTML5 Canvas? Aqui está como a especificação WHATWG…
-
Controles de Autocompletar Leve com a Lista de Dados HTML5
Neste tutorial, vamos aprofundar nosso estudo no pouco utilizado elemento HTML5 <datalist>. Ele pode implementar um controle de formulário de autocompletar leve, acessível e compatível com vários navegadores, sem necessitar de JavaScript. O que há de errado com <select>? Os controles HTML5 <select> são ideais quando você deseja que o usuário escolha entre um pequeno intervalo de opções. Eles são menos práticos quando: há muitas opções, como países ou cargos o usuário deseja inserir sua própria opção que não está…
-
20 Formas Simples de Estilizar o Elemento HTML
details
Neste artigo, examinaremos algumas maneiras simples de estilizar o elemento HTML <details>, que é um elemento muito útil para revelar e ocultar partes de conteúdo em uma página da web. É útil ter um elemento de divulgação simples em HTML que não requer JavaScript, mas o estilo padrão do elemento <details> pode não agradar a todos. Felizmente, é bastante fácil alterar o estilo deste elemento. A tabela de conteúdos abaixo é um exemplo do elemento <details> em uso. Adicionamos uma…
-
O Guia Completo de Formulários HTML e Validação de Restrições
Neste artigo, examinamos os campos de formulário HTML e as opções de validação oferecidas pelo HTML5. Também veremos como essas opções podem ser aprimoradas através do uso do CSS e JavaScript. O que é Validação por Restrições? Cada campo de formulário tem um propósito. E esse propósito é frequentemente governado por restrições — ou as regras que regem o que deve e não deve ser inserido em cada campo de formulário. Por exemplo, um campo email exigirá um endereço de…
-
Crie uma Impressora 3D CSS que Realmente Imprime!
Por algum tempo, tenho criado essas cenas 3D com CSS apenas por diversão — geralmente durante minha transmissão ao vivo. Avião de Acrobacia 3D CSS Responsivo! 🛩️ Ele faz loops e rolagens! 😎 Reage ao movimento do mouse 🐭 👉 https://t.co/A1zNmfEzzi via @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 Cada demonstração é uma oportunidade para tentar algo diferente ou descobrir maneiras de fazer coisas com CSS. Uma coisa que frequentemente faço é pegar sugestões sobre…