Web
Band Website Redesign
A homepage redesign created for a fictional music group with bold visuals and clear navigation.
Browse Creative Projects
Use the category buttons to filter this collection of creative media work.
Web
Bakery Landing Page
A clean and welcoming landing page concept for a neighborhood bakery.
Design
Event Poster
A set of promotional posters designed for a campus art festival.
Design
Logo and Brand Kit
A visual identity package featuring a logo, colors, and typography choices.
Photo
Environmental Portraits
A photography series capturing subjects in locations that help tell their story.
Photo
Street Photography
A collection of candid urban photos focused on color, light, and timing.
Video
Documentary Promo
A promotional still and summary for a short nonfiction video project.
Video
Social Media Video
A short-form video ad designed for a scrolling social media audience.
How This HTML Works
This page is built as a filterable project gallery. The buttons at the top let the user choose which type of work to display.
How the page is organized
- The
<head>contains setup information, CSS links, and JavaScript links. - The
<body>contains the visible content of the page. - The filter button section contains clickable buttons.
- The card grid section contains all of the project cards.
How the card layout works
The cards are placed inside a CSS Grid container. The grid uses
repeat(auto-fit, minmax(240px, 1fr)), which allows the browser
to automatically decide how many columns can fit while keeping each card at
least 240 pixels wide.
How the interactive part works
Each button has a data-filter attribute that stores a category name like
web, design, photo, or video.
Each project card has the class card plus a category class like
web or photo.
When a button is clicked, JavaScript reads the button’s data-filter value
and then shows only the cards that match that category.
Why use classes on the cards?
Classes can be reused on multiple elements. Since more than one card can belong to the same category, classes make filtering easier.
Why use data-filter on the buttons?
The data-filter attribute stores extra information directly in the HTML.
JavaScript can read that information when the user clicks a button.
Glossary of HTML Terms
<button>- A clickable button element.
<article>- A self-contained piece of content, such as one project card.
class- Used for styling or scripting multiple elements.
data-filter- A custom data attribute that stores the category a button should filter.
section- Groups related content together.
img- Displays an image.
Important Elements and Classes
wrapper- Main layout container for the page<header>- Contains the page heading and intro textfilters- Wraps the filter buttonsfilter-btn- Applied to every filter buttonactive- Marks the currently selected filter buttoncard-grid- Grid container that holds all of the project cardscard- Applied to every project cardweb,design,photo,video- Category classes used for filteringcard-text- Wraps the text content inside each cardcategory-label- Styles the category label inside each card