FREE RESOURCE · NO SIGNUP

50 free HTML, CSS & JavaScript projects with source code

Every project below is a real, working open-source project on GitHub — we checked all 50 links, so none of them are dead. Open the code, read it, break it, rebuild it. That is how you actually learn front-end.

100% free No login needed Beginner friendly All links verified

The 50 projects

Click any card to open its source code on GitHub.

01 Expanding Image Cards CSS flex + transitions View source code → 02 Progress Steps Bar DOM classes, state View source code → 03 Rotating Navigation CSS transform View source code → 04 Hidden Search Bar toggle animation View source code → 05 Blurry Loading Screen CSS filter + JS counter View source code → 06 Scroll Animation scroll events View source code → 07 Split Landing Page hover layouts View source code → 08 Form Input Wave label animation View source code → 09 Sound Board Audio API View source code → 10 Dad Jokes API App fetch + async/await View source code → 11 Event Keycodes keyboard events View source code → 12 FAQ Accordion show/hide content View source code → 13 Random Choice Picker arrays + setInterval View source code → 14 Animated Navigation menu animation View source code → 15 Incrementing Counter number animation View source code → 16 Drink Water Tracker click state UI View source code → 17 Movie App (TMDB API) API + search View source code → 18 Background Slider image carousel logic View source code → 19 Theme Clock Date API + dark mode View source code → 20 Button Ripple Effect click coordinates View source code → 21 Drag N Drop HTML5 drag & drop View source code → 22 Drawing App Canvas API View source code → 23 Kinetic CSS Loader keyframe animation View source code → 24 Content Placeholder skeleton loading UI View source code → 25 Sticky Navbar scroll position View source code → 26 Vertical Slider transform slider View source code → 27 Toast Notification dynamic elements View source code → 28 GitHub Profile Finder GitHub API View source code → 29 Double Click Heart Instagram-style like View source code → 30 Auto Text Effect typing animation View source code → 31 Password Generator random + clipboard View source code → 32 Notes App localStorage View source code → 33 Quiz App objects + score logic View source code → 34 Testimonial Switcher timed content swap View source code → 35 Insect Catch Game game loop + score View source code → 36 Custom Range Slider input events View source code → 37 Netflix Mobile Nav mobile menu View source code → 38 To-Do List CRUD + localStorage View source code → 39 Pokedex PokeAPI + cards View source code → 40 3D Boxes Background CSS 3D transform View source code → 41 Verify Account OTP UI multi-input focus View source code → 42 Live User Filter search filtering View source code → 43 Form Validator validation rules View source code → 44 Movie Seat Booking seat state + total price View source code → 45 Custom Video Player Video API View source code → 46 Currency Exchange Rate live rates API View source code → 47 Hangman Game SVG + game logic View source code → 48 Meal Finder recipe API View source code → 49 Expense Tracker budget app + storage View source code → 50 Music Player Audio API playlist View source code →

Credit where it is due: these projects come from the open-source repositories 50projects50days and vanillawebprojects by Brad Traversy. Code Yantra did not build these — we curated them, checked every link and organised them for you. Please star the original repos if they help you.

Want to see what we build?

29 of our own projects are live on this site — open any of them and try it in your browser.

See our live projects

Need a website for your business?

We build fast, mobile-friendly websites, web apps and Flutter apps for small businesses and startups. See your homepage design first — pay only if you love it.

Get a free quote contact.codeyantra@gmail.com