IT251 final project: a fictional band website built with semantic HTML, CSS, Flexbox, and CSS Grid. The site includes seven pages — Home (index), Tour Dates with dropdown filtering, Merch Store (clothing and releases), Social/Streaming hub, News, and About.
Project Overview & Goals
My goal was to design a content-rich, accessible website that demonstrated mastery of layout systems (Flexbox and CSS Grid), responsive breakpoints, consistent navigation, and organized project structure. The site required original content across at least seven pages and interactive features such as a tour date filter and a visual photo grid.
Technical & Rubric Highlights
- Seven total pages with
index.htmlas the main entry point. - Navigation includes at least five links and a dropdown filter on the Tour Dates page.
- Organized file structure:
css/styles.css,images/,js/scripts.js. - Responsive design via media queries for tablet and mobile breakpoints.
- All text and images are original or royalty-free; no placeholders used.
UX, Accessibility & Content
The site emphasizes clear typography, semantic HTML, and accessible color contrast.
Each page uses descriptive alt text for images, labeled form elements, and keyboard-friendly navigation.
Content is original, and each page contains multiple paragraphs for depth and consistency.
Key Features
- Index (Home): Hero section with album spotlight and quick links to merch and tour pages.
- Merch Store: Clothing and music releases styled as storefront sections (no live payments).
- Tour Dates: Dropdown year filter updates visible events dynamically.
- Social / Streaming: Central hub for band’s streaming and social media links.
- News & About: Band history, values, and ongoing updates for fans.
Sample Code (Dropdown Filter Logic)
// scripts.js (excerpt)
const select = document.getElementById('year-select');
const events = document.querySelectorAll('.event-item');
select.addEventListener('change', (e) => {
const year = e.target.value;
events.forEach(ev => {
ev.style.display = (year === 'all' || ev.dataset.year === year) ? 'block' : 'none';
});
});
Screenshots
