Capítulos 83 a 100
Aprenda a utilizar a Constraint Validation API e validações personalizadas para garantir que os dados do formulário estejam corretos.
<form id="form83">
<label for="username83">Username (3 a 10 letras):</label>
<input type="text" id="username83" name="username" pattern="[A-Za-z]{3,10}" required>
<input type="submit" value="Enviar">
</form>
pattern e o atributo required ajudam a controlar a entrada.<picture>, srcset e sizesOs elementos e atributos <picture>, srcset e sizes permitem exibir imagens apropriadas para diferentes tamanhos de tela e resoluções.
<picture>
<source media="(min-width: 650px)" srcset="https://via.placeholder.com/800x600">
<source media="(min-width: 465px)" srcset="https://via.placeholder.com/600x450">
<img src="https://via.placeholder.com/400x300" alt="Imagem Responsiva">
</picture>
Selecione uma "largura de tela" para simular:
<picture> permite definir múltiplas fontes de imagem.srcset e sizes ajudam a escolher a imagem correta para o dispositivo.As especificações ARIA (Accessible Rich Internet Applications) melhoram a acessibilidade dos elementos HTML, definindo papéis e propriedades para usuários com necessidades especiais.
<div role="navigation" aria-label="Menu Principal">
<a href="#home">Home</a>
<a href="#about">Sobre</a>
</div>
O CSS Grid Layout permite criar layouts complexos em duas dimensões (linhas e colunas) de forma simples.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: #b0e0e6;
padding: 20px;
text-align: center;
}
O Flexbox organiza itens em uma única dimensão (linha ou coluna), facilitando a criação de layouts responsivos.
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
background-color: #ffe4b5;
padding: 10px;
margin: 5px;
}
As transições e animações permitem alterar propriedades CSS de forma suave, criando efeitos visuais dinâmicos.
.box {
width: 100px;
height: 100px;
background: blue;
transition: background 0.5s;
}
.box:hover {
background: red;
}
Passe o mouse sobre a caixa para ver a transição de cor.
As variáveis CSS permitem armazenar valores reutilizáveis, facilitando a manutenção e a personalização do estilo.
:root {
--main-color: blue;
}
.box {
width: 100px;
height: 100px;
background: var(--main-color);
}
var().Media queries permitem alterar estilos CSS com base em características do dispositivo, como largura da tela.
@media (max-width: 600px) {
body { background-color: lightgray; }
}
A especificidade determina qual regra CSS será aplicada quando há conflitos. Ela é baseada na contagem de seletores de ID, classes e elementos.
/* Exemplo: */
#header { color: red; } /* Específico */
.nav { color: blue; } /* Menos específico */
p { color: green; } /* Pouco específico */
BEM (Block Element Modifier) é uma convenção de nomenclatura que torna o CSS mais modular e reutilizável.
/* Exemplo BEM */
.block { }
.block__element { }
.block--modifier { }
Reset e Normalize ajudam a criar uma base consistente de estilos em diferentes navegadores.
/* Exemplo de CSS Reset simples */
* { margin: 0; padding: 0; box-sizing: border-box; }
A otimização de performance envolve reduzir o tamanho de arquivos CSS/JS e carregar o CSS crítico primeiro.
/* Exemplo (simulado): Antes e depois da minificação */
body {
background-color: #ffffff;
color: #333333;
}
/* Versão minificada: */
body{background:#fff;color:#333}
Service Workers são scripts que rodam em segundo plano e permitem funcionalidades como cache offline, notificações e atualização de conteúdo, essenciais para Progressive Web Apps (PWAs).
<!-- Exemplo simulado de registro de Service Worker -->
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service Worker registrado com sucesso.');
})
.catch(function(error) {
console.log('Registro falhou: ', error);
});
}
A Fetch API permite fazer requisições HTTP assíncronas para buscar dados e atualizar a página sem recarregar.
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Erro:", error));
WebSockets permitem comunicação bidirecional em tempo real entre o cliente e o servidor.
// Exemplo de criação de conexão WebSocket (simulado)
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function() {
ws.send("Olá, WebSocket!");
};
ws.onmessage = function(event) {
console.log("Mensagem recebida: " + event.data);
};
O ES6 introduziu recursos como let, const, funções arrow, template literals, e mais, que facilitam a escrita e manutenção do código.
// Exemplo de template literals e arrow functions
const nome = "Maria";
const saudacao = () => `Olá, ${nome}!`;
console.log(saudacao());
Esses conceitos garantem que a página funcione bem em diferentes navegadores, adicionando melhorias onde possível ou degradando de forma adequada.
/* Exemplo: CSS básico com melhoria progressiva */
body { font-size: 16px; }
@media (min-width: 600px) {
body { font-size: 18px; }
}
Parabéns por concluir estes 100 capítulos! Agora é hora de aplicar seus conhecimentos e continuar aprendendo sobre desenvolvimento web avançado.
<!-- Exemplo de mensagem de conclusão -->
<h2>Obrigado por aprender HTML, CSS e JavaScript!</h2>
<p>Continue praticando e explore novas tecnologias como frameworks e PWAs.</p>