Skip to content

README.md

Latest commit

 

History

History
89 lines (69 loc) · 3.08 KB

README.md

File metadata and controls

89 lines (69 loc) · 3.08 KB

Bass Backing Tracks Website

A responsive web application for bass players and guitarists to find original songs, guitar backing tracks, and bass backing tracks organized by difficulty level.

Features

  • 50+ songs organized into 6 difficulty levels
  • Three links per song: Original YouTube video, guitar backing track search, bass backing track search
  • Responsive design that works on mobile, tablet, and desktop
  • Filter by difficulty level with color-coded badges
  • Search functionality to find songs by title or artist
  • Clean, modern UI with guitar-themed styling

Difficulty Levels

  1. Noob (1-10) - Beginner-friendly songs with simple bass lines
  2. Beginner (11-20) - Slightly more challenging but still accessible
  3. Gettin' There (21-30) - Intermediate level songs
  4. Intermediate (31-40) - More complex bass lines and techniques
  5. Almost Badass (41-49) - Challenging songs for advanced players
  6. Badass (50) - Expert-level bass lines

Project Structure

bass-backing-tracks/
├── index.html          # Main HTML file
├── style.css           # CSS styles
├── script.js           # JavaScript application logic
├── README.md           # This file
├── Backing Tracks.md   # Original song list
└── data/               # Song data by difficulty level
    ├── noob.json
    ├── beginner.json
    ├── getting-there.json
    ├── intermediate.json
    ├── almost-badass.json
    └── badass.json

How to Use

  1. Open index.html in a web browser
  2. Use the difficulty buttons to filter songs by skill level
  3. Use the search box to find specific songs or artists
  4. Click any link to open YouTube in a new tab:
    • Original Song: The official music video
    • Guitar Backing Track: YouTube search for guitar backing tracks
    • Bass Backing Track: YouTube search for bass backing tracks

Adding New Songs

To add new songs, edit the appropriate JSON file in the data/ directory:

{
  "id": 51,
  "title": "Song Title",
  "artist": "Artist Name",
  "difficulty": "difficulty-level",
  "originalLink": "https://www.youtube.com/watch?v=VIDEO_ID",
  "guitarLink": "https://www.youtube.com/results?search_query=Song+Title+guitar+backing+track",
  "bassLink": "https://www.youtube.com/results?search_query=Song+Title+bass+backing+track"
}

Deploying to GitHub Pages

  1. Create a new GitHub repository
  2. Push all files to the repository
  3. Go to repository Settings → Pages
  4. Select the main branch as the source
  5. Your site will be published at https://username.github.io/repository-name

Technologies Used

  • HTML5
  • CSS3 (with Flexbox and Grid)
  • JavaScript (ES6+)
  • Font Awesome icons
  • Google Fonts (Poppins and Roboto Slab)

License

This project is for educational/personal use. All YouTube content belongs to their respective owners.

Credits

Created for bass players and guitarists to practice with backing tracks. Song list curated from personal practice collection.