Build a Weather App with HTML, CSS & JavaScript

Use HTML, CSS, and JavaScript to create a fully functional weather app using an API.

❤ Subscribe:

In this tutorial, I will show you how to access the OpenWeatherMap API in JavaScript to create a website that displays the current weather for any location.

I will show you how to use flexbox to create a responsive, centered card, how to access APIs using JavaScript’s ‘fetch()’, and how to dynamically modify content on the page and background images.

Follow me on Twitter for JavaScript tips and quizzes!
▶

👨‍💻 My code
▶

What topics should I cover next?

Let me know in the comments what you want to see next in my tutorials!

📺 In this video:
0:00 – Intro
0:25 – Creating the HTML markup
4:20 – Creating CSS styles
16:00 – Getting started with the API
19:30 – Fetch Weather
22:24 – Displaying results
29:56 – Search button listener
32:00 – Enter key press listener
32:50 – Hide results while loading
35:55 – Background images from search
36:55 – Conclusion

🖥 More Web Development tutorials
▶

💻 More tutorials
▶

🙋‍♂️ Find me on other channels
Discord 🗨️
Twitter ✍
Github 👨‍💻
Sponsor 💞
One-time donation ☕

💖 SPONSORS 💖
Get your username or a link to your channel here by sponsoring on Github
▶

🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS
►

source

amp,App,beginner javascript tutorial,Build,css,Css class,Css tags,css tutorial,Css video,Css w3schools,css3,css4,how to make weather app,how to make weather website in html,how to use weather api,html,html tutorial,html weather app,html5,javascript,javascript api,javascript api tutorial,javascript tutorial,javascript weather api,javascript weather app,openweatherapi,programming tutorial,react css,simple javascript projects,stylesheet css,tailwind css,Weather,weather api,weather app,weather app in javascript,weather app javascript,weather website,web development,web development tutorial https://www.universumhub.com/tutorials/css/build-a-weather-app-with-html-css-javascript/