Learn • Build • Practice

50+ HTML, CSS & JavaScript Projects with Source Code

A hand-picked collection of 51 frontend projects — from CSS animations and UI components to full JavaScript apps, tools and games. Every project includes complete source code and a live demo. Perfect for beginners learning web development and developers sharpening their skills.

51Projects
HTMLStructure
CSSStyling & Animations
JavaScriptInteractivity
Project 01

Simple 404 Page

A clean animated 404 page with CSS effects and a friendly error message.

HTMLCSS
Project 02

Social Media Share Icon Animation

Animated social media share icons that expand and slide out on hover.

HTMLCSS
Project 03

Card with Hover Effect

A stylish profile card with smooth hover animations and subtle transitions.

HTMLCSS
Project 04

Button Hover Effect

Creative button hover animations with sliding fills and ripple effects.

HTMLCSS
Project 05

Share Button using CSS

A pure CSS share button that expands to reveal social media options.

HTMLCSS
Project 06

Social Media Icons CSS

Beautiful social media icons built entirely with CSS with hover effects.

HTMLCSS
Project 07

Double Line CSS Button Hover Effects

Elegant buttons with animated double-line borders on hover.

HTMLCSS
Project 08

Footer using HTML & CSS

A modern responsive website footer with columns, links and social icons.

HTMLCSS
Project 09

Image Animation using HTML & CSS

Animated image effects — zoom, shake and transitions using pure CSS.

HTMLCSS
Project 10

Dropdown Menu using HTML & CSS

A clean pure CSS dropdown menu with smooth open/close animations.

HTMLCSS
Project 11

List Items Hover Effect

Interactive list items with animated highlight effects on hover.

HTMLCSS
Project 12

Custom Checkbox using HTML & CSS

Stylish custom checkboxes with smooth toggle animations.

HTMLCSS
Project 13

Box Loading Animation CSS

A pure CSS bouncing box loading animation for modern interfaces.

HTMLCSS
Project 14

Glassmorphism Login Form

A modern glassmorphism-style login form with frosted glass effects.

HTMLCSS
Project 15

Card Image Hover Effect

Image cards with zoom and overlay text reveal on hover.

HTMLCSS
Project 16

Dropdown List HTML & CSS

A versatile dropdown list component built with HTML and CSS.

HTMLCSS
Project 17

Custom Toggle Switch

Animated iOS-style toggle switches built with pure CSS.

HTMLCSS
Project 18

Card 3D Hover Effect

Cards that tilt and float in 3D space with depth on hover.

HTMLCSS
Project 19

Name Animation using CSS

Animated letter-by-letter name reveal using CSS keyframes.

HTMLCSS
Project 20

Neon Light Text Effect

Glowing neon text effects with CSS text-shadow and animations.

HTMLCSS
Project 21

Top Bar Slide-Down Notification

An animated slide-down notification bar that appears from the top.

HTMLCSS
Project 22

Custom Checkbox CSS

Another take on custom checkboxes with gradient and scale animations.

HTMLCSS
Project 23

CSS Timeline Vertical

A vertical timeline component with alternating entries and dots.

HTMLCSS
Project 24

Responsive Bootstrap Navbar

A responsive navigation bar built with the Bootstrap framework.

HTMLCSS
Project 25

The Gift using CSS

A gift box drawn and animated entirely with CSS shapes.

HTMLCSS
Project 26

New Year Countdown

A live countdown timer to the New Year with days, hours, minutes and seconds.

HTMLCSSJS
Project 27

Drawing App

A canvas-based drawing app with color picker, brush size and clear options.

HTMLCSSJS
Project 28

Screen Recorder

A browser-based screen recorder using the MediaRecorder API.

HTMLCSSJS
Project 29

Image Color Picker

Click any pixel in an image to instantly get its HEX color code.

HTMLCSSJS
Project 30

Animated Tab Bar

A sleek animated bottom tab bar with smooth indicator transitions.

HTMLCSSJS
Project 31

Notes App

A full notes app with add, edit, delete and localStorage persistence.

HTMLCSSJS
Project 32

Calendar

An interactive calendar with month navigation and date highlighting.

HTMLCSSJS
Project 33

Add to Cart Button

An animated add-to-cart button with a flying cart feedback animation.

HTMLCSS
Project 34

Search Filter

A live search and filter UI that instantly narrows down list items.

HTMLCSSJS
Project 35

Progress Steps

A multi-step form progress indicator with animated step transitions.

HTMLCSSJS
Project 36

Hidden Search Bar

A search icon that expands into a full input field with a click.

HTMLCSS
Project 37

Hamburger Menu

An animated hamburger menu icon that morphs into a close button.

HTMLCSSJS
Project 38

Increment Counter

Animated counters that count up to a target number when in view.

HTMLCSSJS
Project 39

Toast Notification

Stackable toast notifications with success, error and warning styles.

HTMLCSSJS
Project 40

Music Player

A working music player with play, pause, next, previous and progress bar.

HTMLCSSJS
Project 41

Speech to Text

A speech recognition tool that converts spoken words into text live.

HTMLCSSJS
Project 42

Copy to Clipboard

A utility to copy text to the clipboard with visual feedback.

HTMLCSSJS
Project 43

Programming Quote Generator

Displays random programming quotes with a share and copy feature.

HTMLCSSJS
Project 44

GitHub Profile Search

Search any GitHub username to view their profile, repos and stats.

HTMLCSSJS
Project 45

Age Calculator

Calculates your exact age in years, months and days from any date.

HTMLCSSJS
Project 46

Tic Tac Toe

A classic Tic Tac Toe game with turn detection and win logic.

HTMLCSSJS
Project 47

JavaScript Drum Kit

Play drum sounds using keyboard keys with a visual beat indicator.

HTMLCSSJS
Project 48

JavaScript Image Slider

A responsive image carousel with navigation arrows and dots.

HTMLCSSJS
Project 49

Random Jokes Generator

Fetches and displays random programming jokes with a refresh button.

HTMLCSSJS
Project 50

Number Guessing Game

Guess the random number with hints and a limited attempt counter.

HTMLCSSJS
Project 51

Speech Recognition

A voice recognition demo that transcribes speech using the Web Speech API.

HTMLCSSJS

No projects found. Try a different search or filter.