HTML Tailwind Portfolio in 1 Day Simply Explained (with Diagrams and Real Code)
HTML Tailwind Portfolio in 1 Day: The Essentials in One Article — Real Code, Diagrams and Concrete Steps, Excerpts from a 46-Lesson Course.
A guide that gets straight to the point: Portfolio HTML Tailwind 1jour dissected with diagrams, concrete examples and tested commands. Everything comes from a structured 11-chapter course — here is the best of it.
- Introduction and Express Setup
- HTML5 Basics for Portfolio
- Tailwind CSS Fundamentals
- Hero Section and Navigation
- About, Skills and Projects Sections
Customize tailwind.config.js – colors, fonts
tailwind.config.js: add your own brand colors, fonts, and extend the palette without breaking existing utilities.Learning objectives
- Understand the difference between
themeandtheme.extend - Add a custom brand color
- Declare a color shade range (50 to 900)
- Register a custom font in
fontFamily - Use these custom values in your classes
theme vs theme.extend
The core of Tailwind customization is the theme object. The key pitfall is choosing correctly between writing directly inside theme (which replaces everything) or inside theme.extend (which adds without breaking anything).
| Approach | Effect | When to use it |
|---|---|---|
theme: {...} | Completely replaces the default value | Rare, very strict design system |
theme.extend: {...} | Adds to the default values | Almost always |
theme.colors without extend, you lose all default Tailwind colors (red, blue, gray...). Almost always use extend.Add a brand color
Suppose your brand uses a specific purple. We add it inside extend.colors.
Full shade range
The 50–900 object gives bg-brand-50 through bg-brand-900.
Register a custom font
To use a font like Inter or Poppins, add it inside fontFamily. The name becomes a font-... utility.
Project filters with data-attributes
data-* attributes and a mini JavaScript script of just a few lines.Learning objectives
- Understand what a
data-*attribute is and what it is used for - Categorize each project card via
data-category - Create a filter button bar
- Write the JavaScript that shows/hides the cards
- Manage the active state of the selected button
What is a data-attribute?
A data-attribute is a custom HTML attribute that starts with data-. It is used to store information on an element without affecting its display. For example, data-category="web" tells JavaScript that this card belongs to the "web" category. It is a clean and standard way to bind your data to your elements.
| Attribute | Example | JS access |
|---|---|---|
data-category | data-category="web" | el.dataset.category |
data-filter | data-filter="mobile" | el.dataset.filter |
data-year | data-year="2026" | el.dataset.year |
data-category is read via element.dataset.category. The data- prefix disappears and the hyphen becomes camelCase if the name is compound (data-my-key → dataset.myKey).Step 1: categorize the cards
We add a data-category on each project card built in the previous module.
hidden with a set of classes opacity-0 scale-95 + transition, and handle the appearance with a small delay. The effect is more elegant than a sudden disappearance.<script> just before the </body> tag or use the defer attribute. Otherwise the script runs before the buttons exist and querySelectorAll returns an empty list.Responsive images and picture element
srcset and the <picture> tag, for a fast portfolio that does not make a phone download a 4K image.Learning objectives
- Understand why a single image for all screens is a problem
- Use
srcsetandsizesfor multiple resolutions - Use
<picture>for art direction - Keep a fixed ratio with Tailwind (
aspect-) - Avoid layout shift (CLS) with
widthandheight
The single-image problem
If you serve the same 2000px-wide image to everyone, the phone downloads unnecessary megabytes to display them at 375px. It is slow, costs the user data, and tanks your Lighthouse score.
The modern solution: provide multiple versions of the same image and let the browser choose the one best suited to the actual display size and screen density.
srcset and sizes: multiple resolutions
The srcset attribute lists several files with their intrinsic width (in w). The sizes attribute tells the browser the expected display width according to the screen.
picture
Different images according to a media query. For art direction (cropping, orientation).
Keep a clean ratio with Tailwind
To prevent your images from distorting, Tailwind provides the aspect- and object-cover utilities.
This article covers the most useful excerpts — the full Portfolio HTML Tailwind 1jour course (11 chapters, 46 lessons, corrected exercises and final project) takes you all the way.
./access-the-full-course free course: Vibe CodingFAQ
How long does it take to learn Portfolio HTML Tailwind 1jour?
Are there any prerequisites?
Where to start concretely?
📬 Want to receive this type of guide every week? Subscribe for free — real code, zero fluff.