| Mobile Preview (375x812) | Desktop Preview (1440x960) |
|---|---|
 |
 |
 |
 |
A browser-based drum kit app where you can mash keys or click buttons to play sounds in real time.
This project is inspired from Wes Bos' free #JavaScript30 Course
Keyboard Warrior replicates and expands on Wes Bos' JavaScript30 Drum Kit challenge.
This project mainly focuses on UI polish, interactive button states, responsive design, dark/light modes, and accessibility for both mouse and keyboard users.
- Click or press keys (Q, W, E, A, S, D, Z, X, C) to play drum sounds
- Real life button press mimic for added interactivity
- Button UI polish with transitions, shadows, and focus outlines
- Responsive layout for both mobile and desktop
- Semantic HTML structure with keyboard navigation support
Click to view the full branch and merge history
This project adapts a granular branching and commit workflow to simulate team collaboration. Each feature, fix, documentation, and chore is tracked in its own branch with descriptive commits.
Each pull request I created contains a clear description, change list, screenshots for UI updates, and reviewer notes.
This ensures I maintain a professional workflow, even as a solo developer.
- I started implementing granular branching and commit workflow together with creating pull requests similar to a team dev environment
- Handling keyboard vs click events with shared logic using
clickandkeydownevents - Designing responsive and accessible button components from a Figma design file
- Practiced submitting professional PRs with proper structure and labelling
- HTML5
- CSS3
- JavaScript
- Git
- GitHub
- Netlify
- Figma
- Clone the repository
- Open
index.htmlin your browser
Or you can check out the live website here
A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.
Created by Elmar Chavez
Month/Year: September 2025
Journey: 6th month of learning frontend web development.