Skip to content

commitra/vanilla-verse

VanillaVerse – The Pure JavaScript Playground

VanillaVerse is an open, beginner-friendly collection of fun and educational Vanilla JavaScript projects — designed to help developers learn, experiment, and contribute safely to real projects without the overhead of frameworks.

It’s a hands-on learning space for exploring front-end fundamentals, collaborating with others, and contributing meaningfully to open source — all using just HTML, CSS, and JS.

Perfect for Hacktoberfest, first-time contributors, and anyone who wants to sharpen their web basics in a supportive community environment.


🌟 Highlights

  • Pure HTML, CSS, and JavaScript – no frameworks, no build steps, just clean code.
  • 🧭 Central Hub Page – browse, search, and filter through small projects in one place.
  • 🧩 Project Stubs – each project starts with runnable code and clearly marked TODOs for contributors.
  • 🌍 Instant Deployment Ready – easily host on GitHub Pages or any static site platform.
  • 💬 Collaborative & Safe Space – encourages good coding practices and respectful contributions.

🚀 Quick Start

  1. Clone or fork the repository.
  2. Open the project in VS Code (or your favorite editor).
  3. Run a local HTTP server for testing (recommended: Live Server extension).
  4. Open index.html in your browser.

Optional (with Live Server installed)

Right-click index.html“Open with Live Server”

That’s it! You’ll see the VanillaVerse Hub, listing all available mini-projects.


🧱 Project Structure

vanillaverse/
│
├── index.html              # Central hub listing all projects
├── assets/                 # Shared CSS/JS for the hub
├── data/projects.json      # List of project entries used by the hub
├── projects/               # Individual mini-project folders
│   └── example/
│       ├── index.html
│       └── main.js         # Each includes TODOs for contributors
└── .github/                # Issue templates and deploy workflow

🤝 Contributing

We welcome and encourage first-time contributors! 🧡

To get started:

  1. Read the following guidelines:

    • CODE_OF_CONDUCT.md
    • CONTRIBUTING.md
  2. Visit the hub page and choose a project that interests you.

  3. Check the project’s main.js or README for TODO comments.

  4. Make your improvements, open a PR, and celebrate your contribution! 🎉

If you’re stuck or unsure, open a discussion or issue — we’re here to help.


🧩 Good First Issues

Each project includes beginner-friendly TODOs, such as:

  • ✨ Adding a new feature (levels, themes, sound effects, accessibility, etc.)
  • 🐛 Fixing bugs (keyboard navigation, animation glitches, bounds checks)
  • 🎨 Improving UX/UI (colors, layouts, interactions, or transitions)

Look for GitHub issues labeled good first issue or help wanted — they’re perfect for newcomers.


🔒 A Safe Space for Learning

VanillaVerse emphasizes safe experimentation and clean coding practices:

  • No external libraries or dependencies.
  • No private data or risky scripts.
  • Clear contribution guidelines to ensure a respectful environment for all contributors.

Our goal: make learning and contributing to open source a positive, inclusive, and safe experience.


🪪 License

This project is licensed under the MIT License — see LICENSE for full details.


👥 Credits

Built with 💛 by:

About

This is a repo for various interesting projects in Vanilla JS projects

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 9