A comprehensive collection of beginner-friendly, creative, and practical front-end projects built with only HTML, CSS, and JavaScript. Perfect for beginners who want to learn web development fundamentals, as well as for anyone looking to build a diverse portfolio of standalone web apps and UI components.
This repo contains dozens of simple yet polished projects—each one a single-page HTML app or component you can run directly in your browser without installing anything.
Projects cover a wide range of real-world use cases such as:
- Productivity tools (expense tracker, task board, timers)
- Study aids (flashcards, quizzes)
- Small games and fun apps (puzzle collection, virtual pet)
- Interactive UI demos (animated timelines, expanding cards)
- Utilities (password generator, batch file renamer)
- Creative showcases (art portfolios, image galleries)
- Learning aids (markdown previewer, blogging platform)
Each project comes with a clean interface, intuitive user experience, and all code lives in one file for easy learning, modification, and deployment.
-
Absolute beginners:
Learn HTML, CSS, and vanilla JavaScript by exploring and customizing complete working examples. -
Students & learners:
Experiment with real front-end projects that cover common features like drag-and-drop, animations, local storage, and input validation. -
Portfolio builders:
Showcase polished, unique projects to potential employers or clients. -
Educators:
Use these projects as teaching tools or starter kits for coding assignments.
- Flashcard Study App – Create, flip, and review study cards.
- Expense Tracker – Add, categorize, delete expenses; see spending charts.
- Random Password Generator – Generate secure passwords with customizable options.
- Habit Tracker Calendar – Mark daily habits, track streaks visually by month.
- Sticky Notes Board – Drag and drop colorful notes; position and text saved locally.
- Drawing/Paint Pad – Draw with customizable brush colors and sizes; save images.
- Book Library Tracker – Manage books with status, notes, and ratings.
- Countdown Timer to Event – Multiple countdowns with progress bars.
- Recipe Meal Planner – Drag recipes onto a weekly calendar.
- Simple Blogging Platform – Write, edit, preview markdown blog posts offline.
- World Clock Dashboard – Track multiple time zones with live updating clocks.
- Image Gallery with Tags – Upload images, assign tags, and filter/search gallery.
- Poll Voting App – Create polls and display live voting results.
- Batch File Renamer – Rename and download multiple files locally as ZIP.
- Encryption & Decryption Pad – AES encryption and decryption fully offline.
…and many more covering UI effects, games, animations, and utilities.
or download ZIP from GitHub.
Each project is in its own folder or HTML file. Simply open the .html files in any modern web browser (Chrome, Firefox, Edge, Safari).
No installations or servers necessary!
- View working code.
- Tweak styles, HTML structure, or JavaScript logic.
- See instantly how changes affect the app.
- Try adding new features.
You can directly share these HTML files or deploy to GitHub Pages to showcase your skills.
- Use browser Developer Tools (F12) to inspect elements and debug JavaScript.
- Break down each project to understand HTML layout, CSS styling, and JavaScript logic.
- Modify one part at a time; test your changes.
- Read comments within each project file for notes and explanations.
- Experiment by combining concepts from different projects.
Contributions are welcome! To contribute:
- Fork the repo.
- Add a project or improve existing ones.
- Submit a Pull Request with clear descriptions.
Feel free to open issues if you find bugs or want feature suggestions.
This repository and all contained projects are released under the MIT License – free to use, modify, and share.
If you find these projects helpful, please star the repository on GitHub and share with fellow learners.
Made with ❤️ and vanilla JavaScript by bhanukaranwal
Start your coding journey one project at a time and build confidence by doing!