Want to check live weather conditions right from your browser? This Weather App Project is built using HTML, CSS, and JavaScript and fetches real-time data from the OpenWeather API.
Features:
-
🌍 Search weather by city name
-
🌡 Displays temperature, humidity & conditions
-
🎨 Clean, modern UI with gradient background
-
⚡ Uses live API data for real-time updates
-
📱 Fully responsive for desktop & mobile
Why this project?
Weather apps are one of the best beginner projects for learning how to work with APIs in JavaScript. With this app, you’ll practice making API requests, handling responses, and dynamically updating the UI.
It’s also super customizable — you can add background changes based on weather, icons, or even a 5-day forecast.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS/JS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Breadcrumb Menu using CSS | CodingPorium</title> <style> /* Import Poppins Font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body{ font-family: poppins,sans-serif; background: #f9f9f9; margin: 0; padding: 40px; display: flex; justify-content: center; } .breadcrumb{ display: flex; list-style: none; padding:12px 20px; background: #1e1e2f; border-radius: 8px; box-shadow:0 4px 8px rgba(0,0,0,0.2); } .breadcrumb li{ display: flex; align-items: center; } /*Card styled links*/ .breadcrumb li a{ text-decoration: none; color:#fff; padding: 6px 12px; border-radius: 6px; transition: 0.3s; background: #3a3a55; } .breadcrumb li a:hover{ color:white; background: royalblue; } .breadcrumb li + li::before{ content:">"; color:#bbb; margin:0 12px; font-size: 18px; } .breadcrumb li.active a{ background: royalblue; color:white; pointer-events: none; font-weight: bold; } </style> </head> <body> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">CSS</a></li> <li class="active"><a href="#">How to make a Breadcrumb Menu</a></li> </ul> </body> </html>
✨ With just a few lines of code, you’ve built your own version of this project! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment