Portfólio HTML Tailwind em 1 dia explicado de forma simples (com diagramas e código real)
Portfolio HTML Tailwind 1 dia: o essencial em um artigo — código real, diagramas e etapas concretas, extratos de um curso de 46 lições.
Um guia direto ao ponto: Portfolio HTML Tailwind 1jour dissecado com diagramas, exemplos concretos e comandos testados. Tudo vem de um curso estruturado de 11 capítulos — aqui está o melhor.
- Introdução e Setup Express
- Bases HTML5 para Portfolio
- Fundamentos do Tailwind CSS
- Seção Hero e Navegação
- Seções Sobre Competências e Projetos
Personalizar tailwind.config.js – cores, fontes
tailwind.config.js : adicionar suas próprias cores de marca, suas fontes e estender a paleta sem quebrar os utilitários existentes.Objetivos pedagógicos
- Compreender a diferença entre
themeetheme.extend - Adicionar uma cor de marca personalizada
- Declarar uma nuance de cores (50 a 900)
- Registrar uma fonte customizada em
fontFamily - Utilizar esses valores customizados em suas classes
theme vs theme.extend
O núcleo da personalização Tailwind é o objeto theme. A chave crítica é escolher corretamente entre escrever diretamente em theme (que substitui tudo) ou em theme.extend (que adiciona sem quebrar nada).
| Abordagem | Efeito | Quando utilizar |
|---|---|---|
theme: {...} | Substitui completamente o valor padrão | Raro, design system muito estrito |
theme.extend: {...} | Adiciona aos valores padrão | Quase sempre |
theme.colors sem extend, perderá todas as cores padrão do Tailwind (red, blue, gray...). Utilize quase sempre extend.Adicionar uma cor de marca
Digamos que sua marca use um roxo específico. Adicionamos em extend.colors.
Nuance completa
O objeto 50–900 gera bg-marque-50 até bg-marque-900.
Registrar uma fonte customizada
Para usar uma fonte como Inter ou Poppins, adicionamos em fontFamily. O nome vira um utilitário font-....
Filtros de projetos com data-attributes
data-* e um mini script JavaScript de poucas linhas.Objetivos pedagógicos
- Compreender o que é um atributo
data-*e para que serve - Categorizar cada card de projeto via
data-categorie - Criar uma barra de botões de filtro
- Escrever o JavaScript que mostra/oculta os cards
- Gerenciar o estado ativo do botão selecionado
O que é um data-attribute ?
Um data-attribute é um atributo HTML personalizado que começa com data-. Serve para armazenar uma informação em um elemento sem afetar sua exibição. Por exemplo, data-categorie="web" indica ao JavaScript que este card pertence à categoria "web". É uma forma limpa e padrão de vincular seus dados aos seus elementos.
| Atributo | Exemplo | Acesso em JS |
|---|---|---|
data-categorie | data-categorie="web" | el.dataset.categorie |
data-filtre | data-filtre="mobile" | el.dataset.filtre |
data-annee | data-annee="2026" | el.dataset.annee |
data-categorie é lido via element.dataset.categorie. O prefixo data- desaparece e o hífen vira camelCase se o nome for composto (data-ma-cle → dataset.maCle).Etapa 1 : categorizar os cards
Adicionamos um data-categorie em cada card de projeto construída no módulo anterior.
hidden por um conjunto de classes opacity-0 scale-95 + transition, e gerencie o aparecimento com um pequeno atraso. O efeito é mais elegante que um desaparecimento brusco.<script> logo antes da tag </body> ou use o atributo defer. Caso contrário o script executa antes de os botões existirem e querySelectorAll retorna uma lista vazia.Imagens responsivas e elemento picture
srcset e à tag <picture>, para um portfólio rápido que não faz um telefone baixar uma imagem 4K.Objetivos pedagógicos
- Compreender por que uma única imagem para todas as telas é um problema
- Usar
srcsetesizespara múltiplas resoluções - Usar
<picture>para art direction - Manter uma proporção fixa com Tailwind (
aspect-) - Evitar layout shift (CLS) com
widtheheight
O problema de uma imagem única
Se você servir a mesma imagem de 2000px de largura para todo mundo, o telefone baixa megabytes desnecessários para exibi-los em 375px. Isso é lento, custa dados ao usuário e prejudica sua pontuação no Lighthouse.
A solução moderna : fornecer várias versões da mesma imagem e deixar o navegador escolher a mais adequada ao tamanho real de exibição e à densidade da tela.
srcset e sizes : múltiplas resoluções
O atributo srcset lista vários arquivos com sua largura intrínseca (em w). O atributo sizes indica ao navegador a largura de exibição prevista conforme a tela.
picture
Imagens diferentes conforme uma media query. Para art direction (recorte, orientação).
Manter uma proporção limpa com Tailwind
Para evitar que suas imagens se deformem, Tailwind oferece os utilitários aspect- e object-cover.
Este artigo cobre os trechos mais úteis — o curso completo Portfolio HTML Tailwind 1jour (11 capítulos, 46 lições, exercícios corrigidos e projeto final) leva você até o fim.
./acceder-au-cours-complet cours gratuit : Vibe CodingFAQ
Quanto tempo para aprender Portfolio HTML Tailwind 1jour ?
É preciso ter pré-requisitos ?
Por onde começar concretamente ?
📬 Tu veux recevoir ce type de guide chaque semaine ? Abonne-toi gratuitement — code réel, zéro blabla.