I recently built a simple Traffic Lights project using HTML, CSS, and JavaScript.

This mini project helped me practise JavaScript basics, DOM manipulation, and working with interactive elements while bringing a familiar real-world concept to life.

Small projects, consistent practice, and learning something new every day!

Code 

<!DOCTYPE HTML> <html> <head> <title>Traffic Light</title> <style> body{ background-color: #111; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .traffic-light{ background-color: #222; padding: 20px; border-radius: 15px; } .red-light, .yellow-light, .green-light{ width: 80px; height: 80px; border-radius: 50%; margin: 15px; opacity: 0.2; } .red-light{ background-color: red; animation: redlight 2s infinite; } .yellow-light{ background-color: yellow; animation: yellowlight 2s infinite; } .green-light{ background-color: greenyellow; animation: greenlight 2s infinite; } @keyframes redlight { 0%, 33% {opacity: 1} 34%, 67% {opacity: 0.2} 68%, 100% {opacity: 0.2} } @keyframes yellowlight { 0%, 33% {opacity: 0.2} 34%, 67% {opacity: 1} 68%, 100% {opacity: 0.2} } @keyframes greenlight { 0%, 33% {opacity: o.2} 34%, 67% {opacity: 0.2} 68%, 100% {opacity: 1} } </style> </head> <body> <div class="traffic-light"> <div class="light"> <div class="red-light"></div> <div class="yellow-light"></div> <div class="green-light"></div> </div> </div> </body> </html>

Output