How To Create This Weather Webpage | OpenWeather API, HTML, CSS, JS | Pt 1
Hey, thanks for stopping by. I'm demonstrating how I created this Weather Webpage with Open Weather. It just has the basic stuff, and this is part one of the three videos that will be showing how it was done. This video only shows the HTML part, the CSS part link is below, and the JS/API part will be in another video coming out soon.
If you want to check out the live webpage of it, click the link below. You will need your API key as well. There will be a prompt requesting it.
Link: https://weather-component-with-api-op...
Figma Community File(Free) - https://www.figma.com/community/file/...
If you want to check out part 2 - CSS part - click the link below.
• Part 2 | Open Weather API | How To Create ...
Part 3 | Open Weather API | How To Create This Webpage | JS & API Part
• Part 3 | Open Weather API | How To Create ...
It can be done in different ways, this is just the way that I was able to figure it out.
If you need help getting you API key, check out this video,
'OpenWeather API Key: How To Get the API Key':
• OpenWeather API Key: How To Get the API Key .
If the first API key that is auto generated doesn't work, generate another one. The second one should work for you. Once you have placed your API key in your code, if it doesn't work, try refreshing the browser and giving it a few moments before trying again once you check to make sure your code is good.
I found that doing these things helped me a lot while troubleshooting, along with checking out what the console errors were within the browser.
Resources:
Here's the link to the OpenWeather website. (There is a free version and a student version avaliable.)
https://openweathermap.org/price
This is where I got the inspiration from for my design as well.
Figma Community Free Figma Template
Inspiring Design Link Here - https://www.figma.com/community/file/...
I believe that one way to get better at something is to do it, and this helped me learn more about API's and how to include them in the code. This is a jam session while learning. Meaning just music and this video.
Helpful Stuff:
Looking to host your WordPress site - Check out this site below.
https://bluehost.sjv.io/5g9akD
If you need help with written content check out this site below:
https://copymatic.ai/?via=kay
Want to get your site up and started at a discounted price? - Shopify(free trial link)
https://shopify.pxf.io/Mm6VNP
A Quick About Me
Name: Ka'Eatta Rankins
Enjoys: learning about tech stuff.
Happy: That you made it here.
Hopes: That this video was helpful.
Wants: You want to succeed in all your goals.
My Why: Seeing people crush their goals is awesome.
Let's Connect
YouTube Channel: @codingvoyagers
Instagram Page: kaeattar ( / kaeattar .
-----------------------
#openweather #apikey #api
Some links maybe an affiliate link, which I may receive a commission at no cost to you.