Learn HTML, CSS, JavaScript/jQuery, and APIs: Build a Weather Site!

1. Introduction: Hello. My name is Joan Marie Verba. And welcome to this class and Web development. We're going to create a weather site using an A P. I call to the open weather a P I A p eyes, air fun and you can find a wide range of topics among them to create all sorts of interesting Web pages. I've been a computer programmer and Web developer for many years. I've coated a number of websites. This particular website you see now is my portfolio page. This'll is a page that shows off my projects. This is a page that is my online resume. This is another page that I have developed and this one is my get hub page where I store my code. Throughout this class, I'll teach you to create a weather app using HTML, CSS and JavaScript within a p I call. You could use thes skills to create your own weather website or a website using another a p i. This class could be taken by those who have some knowledge of HTML, CSS and javascript. But it is aimed at students with no experience in web development. This class is great for freelancers. Side hustlers or even hobbyists, because you can use these skills to get a variety of websites using a P eyes. By the end of this class, you'll have the code to deploy your own weather website. 2. Code Editor: Before we start coding, we're going to need a code editor. A plain text. Editors such as No Tad worked just fine. Although I recommend against using a word processor, it's better to use a specialized code editor, and I use Visual studio code, which is a free download and works for Windows, Mac and other platforms. You could. Also, he was Adam, which is another free download. If you have a code editor such as Sublime Text or another code editor already working, that's fine, too. But I do recommend downloading a code editor before going on to the next step. 3. File Setup: Now we're going to create our files. The first thing we need is a folder. I'm on a Mac, but the process in Windows is similar. Just use new folder. And so we're going to creating folder. I'm going to call it Weather, and now we're going to go into our visual studio code and we're going to open the folder. If it's already created, as I did before. You can do this or you can use open folder. But right now we're going to take weather and in weather, we're going to create files. We can press this button here to create files. The first file is an index HTML file that will hold the code that goes directly on the screen. Our second file that we're going to create is style CSS and that will have a file that tells the code how to put it on the screen. And then we're going to create our job, a script file, and we're going to call it Weather J s. And that file will give the data and retrieve the data and put the data in a form that we can put it on the screen. So first of all they want to set up the index. Html file. If you are on a visual studio code, there's a really easy way to get a template. You do a shift exclamation point and then you do a return and it gives you this really nice template. The code that will go on the screen is between the two body tags here. Uh, this code here up here is to tail the browser. How Toe Interpreter code. The title here is the title that you'll see on top of the screen for the browsers. We're going to call that today's weather and use that and then we're going to save this and go on to style. See, assess now style. See assess. We don't need to do anything with at the moment for the Java script file. We're going to put you strict, which is just a, um, standard command for Java script, and now we're going to go back to the index html because the index html file needs to know that the style CSS and the weather Js files are there and it needs to communicate with them . So we're going to do this by a command cold and you can just copy this as well as copy the rest of the template. If you don't have a template file in your browser, even just copied from my screen here. Good style. See, Assis. You're going to do rail equals style sheet because that's what it is. It's a style sheet, and we're going to put to close that off. We do this now, this isn't as you notice. This is between the two head texts, not in the body tag, and it's the last thing before the last head tag. And so we're saying to index HTML here that you're going to get some commands from style. CSS. That's what we're telling it now for the JavaScript file. The Java script file goes at the bottom. So we're going to put the Java script file at the bottom, and the way that goes the way we indicate is with this now again, you can just copy this right from where I'm doing this, it's called Weather J s and then script. Now, um, the as you can see, one of the advantages of using visual studio code is that the visual studio code will give you the um, the ending script tag. Once you've done this starting script tags, you don't have to type that. We're going to save that. And, uh, now you have your files set up. Uh, if you want to store your code, you can use cloud storage like dropbox or iCloud or whatever, or you can copy it to, you know, uh, flash drive. Or you can get a gift hub, um, repository, which is beyond the scope of this course, and copy your code in there. But I do recommend backing up your code pretty much at every stage because it's easy to lose your code and then you're then it's, um Then you have to recreate it again. So this is the just the basics set up for the code, and we will start going from here 4. Basic HTML Page: now let's fill in the HTML page right now, there isn't anything there. If you want to see the page at any time, we can right click and open and default browser and see that there's nothing on the page. However you look at the top, it says today's weather. That's because we put that in the title. Let's go back and start putting things on the page. First thing we're going to do on the page is put in a title or the page. We're going to use the H one tag, which is the largest lettering. Today's weather now H one, as I said, is the largest tag. There are smaller tags, each to a smaller than H one H three, a smaller than H two and H six is very small, so you can adjust the size of the lettering. That way, that's one of many ways to adjust the size of lettering. So let's save this and see what happens. You can just refresh the page here, and there's today's weather. Okay, now let's start filling in the page with other things that we want with smaller lettering. We're going to do H two and we're going to put in the location. So, uh, weather for location and we'll fill in the location later, and then we're going to want the temperature. So we put temperature and we just put in some placeholders right now for that. And then we'll put in the wind speed and then we'll put in sky conditions wanting over its quality clear rainy, whatever sky conditions. So those air placeholders for what we're going to get in later. So now let's see, once we've saved it, what that looks like So we can just refresh the page here and there they are, whether for location, um, temperature, wind, sky conditions, let's do this'll current weather for location. Now there's a reason for that, and that is the data. We're going to get changes about every 10 minutes, so we're going to get the current weather for whatever location that we tell it to get the weather for. Right now, we just want to get something on the page, and we do that. We've got current weather for location. There we are. So that's our basic stuff. And that is our basic HTML page. And, uh, in the next lesson will go and address some styling issues 5. CSS Styling: Now let's style the page using C. S s CSS stands for cascading style sheet. The first thing will try is a background colors. So we go to the style CSS page and write body because we want the color to be for the entire page that corresponds to this body tag in this body tag. So we're going to do this and say You want to background color? As you can see, visual studio code is prompting me here, so I select background color. It's also giving me a range of colors to select from. So let's try sky blue. Note that the body tag is called a selector. The selector is followed by an opening curly brace, followed by whatever instructions you want and ends with an ending curly brace. So what saves that and go back here and refresh and we've got the blue background. Great. Now this is a default font, so let's see if we can get another fought. To do that. We go to fonts dot google dot com and we scroll through the fonts and we see if there's anything that we want to you. So this one looks good, so let's try this one, you click the plus and then you click the minus down here and it has two lines of code. This the first line of code that goes into the h t m l. So we're gonna copy and paste that that sells the HTML that we have a font we wanted to use and then the second is to put in the CSS. So we copy and paste that and that goes below this. Try it again. There it is. And then we save that and go back here and refresh page again. And the font has changed. Wonderful. Now we're going to try something else. We're going to see if we can center the header. We only want the first line center. So we're going to go back to the HTML and we're going to separate out the first line using what's called the diff. Now. Visual studio code is reminding me that if I have a starting Divi have to match it with unending div. So I take that and we're going to surround the first line because we're getting the first line and I can see I didn't copy that. Right, So we go to go to here and there it is. And take that out there. Now we have that separated, which is great, but we want to, um, center the heading line. So we put a class on it right here. Class equals and give it a name. I'm gonna call it better. It can be any name, but it's good to have a descriptive name. When we use a class in CSS, we put dot in front of it so we could hit her. We put that and then we go over and we see if we can determine what, uh, command to use for CSS. So we put, um, c S s center text. Okay, that looks good. So we go over here and we see the text align. Property seems to be this and w three schools is a very good place to go to find information. And we see there's a command called text align center to use in the CSS. Now, at the left side of the page, you can see there's a whole bunch of CSS commands, and you can look them up at any time if you need them. But right now we're looking for something to center the text, and this is it. So we copy and paste that you save that and we go back to our page there. Now it's center. Okay, We're doing good. Now let's put more space between the top line and this. Now, in order to do that, we need to have a margin. So we only need to put it on the bottom because margin is for, you know, the margin. Top margin, right margin, left, margin bottom. We'll need margin bottom because we're going to increase this space here. So we start this with margin and again, Visual studio code is prompting me, and we're going to put ah, 100 pixels. Now, Pixel is a very small, um length or with on the page, you can Google pixel if you want more information. But right now, we're just going to do that. And if we have that, we go back here and we refresh the page. You see, there's more space, their toe offset it. That's wonderful. That's what we want. Ah, Now let's move the data over slightly telling the left side of the pace, we want to move it over just a little bit. So again. We're going to surround all this with a div. The four lines that we want separated with the dips we go give and then visual studio code is reminding us We have to have an ending. So we take that and we put it at the end. There we are. OK, And now we need another class. We will call this class data and go back to the CSS. Put a duck data. Okay. And now we're going to do a margin left. Now, this time instead of pixels, were going to use something called a view with And the reason we're going to do that is so if you view the page on a ah smartphone or on a tablet or other device other than a laptop or desktop screen, that will automatically shrink your dimensions for you and make the adjustments. So that's where we're going to do that. So let's do 20 view with and see what that will do for so 20 view with data. You refresh the page. Not bad. Okay, that's looking good. Okay, so, uh, this seems to be a little plane, so let's Mitt put all each of these into a box. So in order to do that, we go over here Now, there are a couple of ways that we can do this. Ah, but what we're going to do because we want each of thes separately in a box, we're going to put a class on the H two tag instead of a div tag. And you can do that. So use class equals box, and then we'll just copy and paste for the other ones. And that means we'll have the same box for each of these, okay? And that that And now we're going to go to the style CS s and style, The box euronews blocks. And what we're going to do first is we're going to create a literal box by using what's called a border command. So border three pixels, solid purple. Now, what this means is that we're going to have a box around the text. The box lines will be three pixels, um, with and it will be solid instead of a dotted line, for instance, and the line will be purple. So once we've done that, we go back and we refresh the page. And there we are, except the boxes air going longer than we want. So let's do something else. You want a margin, right? Right. And again, we're going to use view with and we're gonna try a 50 view with and see what that does. So a margin, right? 50 view with in that shrinks are boxes for us. Wonderful. Except that the boxes air kind of touching the text. And we want maybe one a little space there. So let's see if we can get a little space. So to do the little spacing, use the padding command and want that wanted to be all around the text so we don't use top bottom left, right, Although we could. So we're gonna use 10 pixels for this one because it's a small length. So we're gonna use pixels and then we do this, and as you can see the boxes or larger, wonderful looking, pretty good so far, that's wonderful. So let's let's offset the boxes with a background color so that the boxes look a little different than the background. So let's do this. We're gonna do a background color pound color. Now you notice that this is different than the top background color because this for the entire body. But this background colors on Lee for the box. That's what that means. So, little girl, Try beige if that and save that. And we refresh the page and see what happens. And there, Uh, that's looking pretty good. So now we're ready to do the javascript file. 6. Set Up API Call: Now we're ready to start with JavaScript, but before we use any javascript, we need to be able to get some data to work with. So we're going to go to the open, whether a p i, which is that Open weather map dot org's slash ap I and we're going to see what sort of data we want to retrieve the weather. Ap. I offers all sorts of data for weather current weather data three are forecast, 16 day forecast and all sorts of other data that we can use. Right now, we're just going to use the current weather data. So we're going to look at the A P. I, doc and in that we see that we could get the current weather data by city name City I D geographic coordinates, zip code and all sorts of other ways to get the data. In order to get the data, you have to have what's called an eight p I key. So what you need to do to get an A p I key is to sign up. So you create an account and fill in the blanks creature account. Once you have created your account, you sign in and then you can click on a P I keys and get your A P I key. I'm not going to do this here, but you'll get your A P i key. I'll show it to you. It will be a very long string of letters and numbers. Then you go back to the A p I and we need to find out what format that we need to use in order to retreat. Now we're going to retrieve by city name. So here is our A P I call format. And so we're going to copy this and we're going to paste it here now, In order to make an A P I call with Java script, we need to have a need to have this. We need to have a u r l that we can use that has the key in it. Now for that, we're going to create a variable. Now, variables are things you might remember from math class. You might have seen X equals Y plus Z where X weinsier variables in javascript me declare variables. We can do that in one of three ways. Use const. You can use a lift. We can use a fair, and the Const simply means that we don't expect extra change. Why means we expect Let means we expect why to change. And there is either one. In this case, we're going to use Const because we don't expect this to change. It will be the same call every time. And we're going to call this something descriptive called u R l. And we're going to do an equal. And now we want to use this. So we're going to do that and we're going to close up the spaces, which is always a good idea. Now, this will be a, um, call to a web address. So for a web address, we need http and we almost have it here. We need to pick a city names. We're gonna pick Chicago just for purposes of illustration. And now we have to put in our tea. Now, the way we do that is we use an ampersand with AP. I d equals and then after that is the key. Now have constructive fakey here again, he is goingto be a string of letters and numbers. We're going to put that there and then we're going to put that in quotes. And now with this, we could make what's called an A P. I call to the open weather map in order to get our data, and we'll discuss this in the next list. 7. Retrieve Data: Now we're going to work with Java script calls and in order to use JavaScript calls, we're going to use something called Jake Weary. So we need to alert index html that we're using J Query. So we go to G Weary CD in and click on the CD en, and you want to use the 1st 1 J query core 3.3 point one un compressed used that we do a copy on this, in fact, in the h t. And now and put it here and the JavaScript goes at the bottom and we're just going to put it over the call to the weather J s. And now we're going to go to the weather J s and start working with this. So what do we need to do in order to retrieve the data from the weather? Eight p i. And by the way, a P I. P stands for application programming interface. It's an interface. So we're going to use what's called Ajax call. And this is the format chicks and, as usual, visual studio code is filling it in its Ajax with the starting front, the season open, uh, truly brace and then closing curly brace and then closing parentheses, and we're going to do all the action in here. So we're going to start with you R l You are ill now. This u r l tells it that we're going to send it a u r l and this u R l matches with this. We could have called it anything could call it name. We could have put name here and name here. That's fine, but we put u r l So that's what that is. And now we're going to say upon success, that is, the data has been successfully retrieved. We are going to put all the data into a variable called result. And again, we used the open close, truly braces. We're going to close this up, and all the action goes within the curly braces here. So what kind of action do we want it first? Well, at first we just want to confirm that we got data, so we're going to do console result. And so what that means is put the contents of result that is, put the data that we've retrieved from the open weather ap I into result and then put all that stuff on the Web page. And now we're going to look at the Web page. Once we've saved our code on whether dot J s, we go back to our page and we do refresh. And where is our data? Well, it's in the page, but we have to do a right click, inspect and look at what's called the Dev Tools in order to see if these air called Dev Tools and this has the HTML for the page. But we didn't console logs. We're gonna click on Consul and there is object that is our data. Now, if you get an error message, be sure to check and see that Jay Query is on the HTML page. Make sure that your key is in the right place. Make sure that everything is spelled correctly and that you have the right number of curly braces. Check all those things if you get an error. But we don't have an Arab. We have our data. So the data is in an object and the object is simply a way toe. Organize your data. If you want to know more about objects, you can go to W three schools dot com and look up JavaScript objects, and it will explain all about what an object is and how it's organized. But I'll show you what we need to get from the object right here. We need to click on the arrow, and now we've got some data. That's great. It says the name of the city of Chicago, which is wonderful. We've got a temperature. Great. You've got a wind speed right here. We don't have sky conditions yet, so we're going to start clicking arrows. And I happen to know it's this arrow right here. And we have description, Clear sky. So we've got the data that we need to work with. Now we need to interpret this data. So we need to go back to the current weather data page on open weather map and scroll down , and we see that there's a place. The talks above Jason and Jason is the way that the object is organized. Jason stands for jobless JavaScript object notation, and that's what we want because we're working in JavaScript. So we go down and look at the parameters and see what we have here. Refining the temperature is main dot temp and it is in Kelvin degrees. So we're going to have to make some calculations, get into Fahrenheit. The wind speed is meters per second, so we're gonna have to do some calculations. He didn't mouse per hour, and then you've got a name, city name. And we've got, um, conditions, whether description, whether description within the group. So we've got all our data, and that is how we tell what we have. So what we're going to do then, for today's weather, is we're going to grab the name first. And the name is Chicago here. That's the easiest one to catch. So we're going to go back to our page and we're going to see if we can grab this data. Now it says its its name. Write your name, but we have to put something in front of it because remember, the data was put an object called Result. And remember that inthe e weather data, everything is dotted. So we go back here to our code and we go here and we won't just want to see if we can get the name. So we're going to console log results. That's name of the objects in and name, which is the place within the object that it iss. We do that, save that, go back here, we refresh the page and we do the console log again. And here's our object at the top. And then here's our name. Chicago. So we've got our name. We know that we can get the name from result dot name and we can go from here. 8. Place Data on Web Page: Now what we want to do is we want to put all the data on the Web page. So let's start with the city name. That is the location. So in order to put that on the web page, we're going to make use of J weary in order to do that. Make man such as this location. I got a text going to put a text and result the name. Remember, Result That name is Chicago. So in location in the place called Location, we're going to put Chicago. That's that's what the command means. So we go back to index html and we need location, and we have something like that. So let's put it right here in Chicago in place of location here. But we have to do it so that Jake where you recognize it? So we're going to put Span span is just a holder. I d equals location. And then we have to close up span, which is what visual studio code is telling us to do. So that means current weather for whatever was in location and the I d. Corresponds toothy hashtag right here. Okay, if you have an idea, it is the hashtag signals to index a TML that that's idee location. So let's go back to our Web page and refresh current weather for Chicago. We got it. We're making progress. Good. Next thing we're going to try is the sky condition. So we're going to make some space here. And we could see we saw under this that it's in weather description. So we're going to try that. Except when we did this. We inspect here. Console object. There's weather. There's description. But there's this zero here. So what's that? Zero. The zero there is signalling to us that within the object there is an array. An array is simply a sequence off items. You can look up Java script, a raise on W three schools and it will tell you now this is zero Index, which means this array of cars here this is index zero. This is index one, and this is index to even though it has three elements it 012 So what this means here is that it is the first element because element zero and the array here it's telling us that you've gotten array with just one item in it and the first item is zero. So we're going to say weather zero dot description. Okay, so that is where the sky condition is. The entire path, therefore is result Result dot weather dot description Now we need to put this in. J query formed. Put it on the page. This time I'm going to call this guy and it's in text form. Close off. Print the cease and anti semi colon index. You can use the span formation I d equals this time It's sky going to close off span that. Go back here. Here. Let's Saidiya corn here. That might be. And so we refresh it again. Sky condition clear sky Wonderful. We are doing fantastic. Okay, lets see if we can do the temperature. So we inspected again. Console, object. Okay, Temperature. There's the temperature now the temperatures and Kelvin It's in Maine and its in temp So we've got to do some calculations with the temperature. So javascript is wonderful for doing calculations. There are many ways to calculate a Fahrenheit temperature from Kelvin and you can look them up on Google. I am going to use a particular formula that works for me. So let's declare a variable F to represent Fahrenheit. So let if equals and we know that the temperature is in result. That's our object. And it was in maine dot Kemp and we fill in the rest of the formula here and minus I point 67 So that is our formula for temperature that will give us the temperature in Fahrenheit. Um, the mathematical operators for Java script are the same as the ones you're familiar with. Minus means minus plus means plus slash means division and star means multiplication. However, we're going to get several decimal places if we make this calculation and we want a nice round number. So there are functions in Java script that we can use and you can look up functions. But this particular time we're going to use a function. It's called Math Round, and that will give us a nice round number math round everything in parentheses and used that for our calculations. Now we're going to have a nice round number. However, when JavaScript does mathematical calculations, it puts the numbers in binary, transforms the numbers on the screen to binary, and so we need to transform it back from Brian Eri toe a number we can display on the screen. So regard to use a Java script method and you can look up lots of methods on Google. But I'm going to use one fair and called two strings so f dot to string will transform the number from a binary to a form that we can put on the page and talking about putting it on the page. We need to use RJ Curry again. So this time we're going to pull temper. Sure, it's going to be next, and our number is in Fahrenheit 19 and that that and so we go index html and what we do again is we re type. I've already typed this for you. It's span I d equals temperature close span before we put it on the page. So let's make a little styling here. Let's put a colon here, a couple of spaces and then a space and then degrees and save that. So let's go back to the page and refresh temperature. Nine degrees were doing great. The next thing we do is we get the wind. So we go back here. You look at our object. We see that the wind is here and it's going to be wind dot speed sill eagle back to our Java script here and we start thinking about the wind now that wind is given in meters per second. So we need to transform that into MPH. And the formula we're going to use for that is going to let wind speed speed equals mass round and its result wind speed and that divided by 0.44704 That should give us to where we want to go now. Something I want you to note here. Wind speed. You've got a capital letter in the middle. This is a variable written in what's called Camel case. That is. You combine two or more words and capitalize every word after the 1st 1 This is pretty standard in Java script. No need to use J query to get it on the page. So we're going to put in Jaqui reform cold wind, next wind speed, except that that's not text. It is in binary. So we need to remember that we need to put it into a string form. So we're going to use wind speed to string and then we're going to make this win, so that should take us to where we want to go now. We go to index dot html and put it in there and do span again, and the idea is wind. And let's see if we have that out, win seven MPH. That's great. Now we have a complete Web page. You could stop at this point and have a perfectly adequate Web page. Um, if you want to make this your project, that's fine. Um, it's perfectly finding you could make modifications to that. But I want to show you ways that we could improve even on this, so that will be our next list. 9. Code Cleanup: Now let's see. It would make the code more efficient. First, we can add comments. Comments appear on the code, but not on the Web page. Their different forms for the index, the style and the Js files. So here's for the HTML file. See, these are the thanks. That's a comment. The easiest way to do this, to highlight this and then on a Mac command slash or on a Windows machine Control slash. Or you could just type these in. But this is how you designate a comment in the h t m l in the, um, CSS. It's a little different. So you say, Put 18 clocks, Dega and so high like that. And again, you can just type the's in or just use the keyboard shortcut, whichever you prefer, and then in JavaScript it's still different. So let's put this the location. So that's the those of the comments in Java script. Now, while our code is perfectly adequate for the page, there are more efficient ways to add the text to the page with Jake weary, and that's using something called the E. S six format, which you can look up on Google if you want more information, but just let me show you how to do it here. Instead of writing the the Fahrenheit here, we're going to write something else were going to say lift, display. Tim, this is our camel case again, equals. And now we used the the far upper left key stroke that and we say temperature dollar sign. Yeah. And what this is is this f corresponds to this f here, so we don't need this anymore. And what the dollar sign and the brackets mean is that the temperature is a literal and this is a number, and so you don't have to transform the number into a text number. You can just use this and that will do it automatically. And now we want a degree sign. So how do you make a degrees sign? Um, there are ways to do this. And the degree sign symbols in html, which is what we're going to put on the page is ampersand. Um hashtag 176 semi colon. That you could do this, but we want to add our own f. Um but so we're just going to use the degree symbol, and that's right here. This is that all codes dot net and you can look it up there. So we're going to go back and we're going to put in the degree symbol, hash tag 176 semi colon. And then we're going to put in our own f. Okay, so now we have that. And down here, we have to change this to we're going to have to change thisted html because we're not out putting just text anymore. Route putting HTML, this is HTML. This will be transformed in html and this is HTML. And instead of Fahrenheit, we're going to put display tempt displayed temperature, and we can add a comment to that effect. Display the temperature. Okay. And that we saved that. And you go back here and we refresh. As you can see, we've got temperature twice. Now. Why is that? What? We have to go back to the code and we see we put temperature here to put on the page, but we forgot to take it out here. So we're going to take out, get here, and we're going to add an I d equals temperature. We could have a class an idea in the same So we really don't need anything but the class and I d here. And the tags that show you how large the lettering is going to be. So I go back to this. Check that. Okay? And there's there's the temperature that we put the I d for. So we go back to the there. Now we have it. Okay, that's good. Now we can do the same for the location, the wind and the sky conditions. So let's start with that. So location lit display city cools current weather in So that Oh, any day. So the name and so Michael end and then location equals It's html Got the ending curly brace html and it's html display city now play city, and then we have to go back here and take all of this out. Change the i d to. Okay, so let's check that out. Okay, that works. So now let's try the wind. Okay, so this stays the same, And instead of this, we have splay wind instead of that equals really brace in speed. It really breaks MPH, and this becomes display wind, and this becomes html Back to index html wind on and close this up. All we need is ID equals wind. Check that out. Still working. Good. Last one sky condition. Now we do the same for the sky condition Sky display sky cools sky condition, dollar sign, curly brace. And we want this and Curly brace and and line. Okay. And then this goes up, Mr Knorr. And then this goes back to html and this goes to display. Scott, go back here And all we need is the I d for sky and go back and check this. Okay? It all works wonderful. So this cleans up the code considerably and makes more efficient and makes more readable. 10. Add Images: So let's get a more interesting background for the Web page. So let's look at pics obey. That's one of my favorite places to get, um, images. They're royalty free, and you can use them for commercial purposes. So let's see if we can get some sunsets brown for sunsets. This one lets take this one, and it's a free download free for committing commercial use, no attribution required. So that's good. We can use it and free download. And this is this is a good size. So we just take download and we get it. But I already have this downloaded, and I put it on my desktop and renamed to something that was a shorter name. And so what I need to do then, is I need to put this image into the folder. Remember, we have a folder that's called whether the Teczar Index HTML or style CSS and whether CSS we need to put this into that folder a copy of their and there it is. So what we do now is we go back to the code for this, and we're go back to the style C s s. And we're going to do instead of this'll. We're going to do a background image and what we need to see you are l And since it okay, and then we take this out because we're not going to use the plane background anymore, Going to use the image background. We save that. We refresh that. And now we've got our wonderful that ground, although it's, um, not white the way that we had pictured it. So we need to make a couple of adjustments. So let's make those adjustments here. The adjustments that I want to make that ground size sighs 100% which means we want the background to cover the entire Web page. Minimum height. 100%. That's another adjustment to make and with 100%. So we wanted to fill the entire screen. That's why we're making all these CSS adjustments here. So we go back and we're fresh there. That's now we've got the entire image on the page. Ah, the other thing is that this is not contrasted Well, so we need to do something with that. The way we make the text contrast better is this First of all, we know that we already have the header with its own class, so that saves us some coding. So we go back to the style CSS and there's the header and there's something called color and the color means the color of the text. So let's use that and make the color equals white colon politicals white. Save that. Go back here, refresh their Now you've got a bitter contrast. Okay, we're doing good. Now let's say that we want to add an image to here. We've got the background image. What say we want to add some other image in there, So we want to add, say, a son. So I have a son already saved. So let me put the sun and I got this from picks a bait to Sun Tiantian. There is the sun. Now that we have our son image, Where do we want to put it? Well, we put it in the index html. We don't put it in the background because it's not a background. We put it in the index html. So let's say we want to quit the sun above the header. So here's what we do. We say image source source equals the name with the image son PNG and it's always good to have an altar, which means that if the image for some reason doesn't show up, we have a text to put in its place. That son close it off, save it, go back and put it in here. Except it's kind of large. So let's see what we can do about that. We go back here and we put right cools and this isn't pixels. We put height of 50 pixels and we want with 50 pixels. Sleep with Daddy in, Save that, go back and refresh. Okay, it's way over here. We can have it way over here if we want to. That's perfectly fine if you want to have the image there. But let's put it in the middle and there's a really easy way to put it in the middle because today's weather is already centered. We can just move this line to here and it will automatically centric because the class header is centered in everything in the Div. So do that and we've got it. So now we have a nice looking website 11. Conclusion: Now we have a complete set of files to make our site. We have the index HTML, which is this? We have our style CSS, which is this? And we have our javascript, which is this and all you need to do with the Java script is to put in your, um, key here your own key, and to put a set of quotes after it and a semi colon after it and it's done, you can change the city. If you live in another city and you want to have your own personal weather forecast, you can say Denver, save that. Go back here and get the weather for Denver. If you live in a city such a San Francisco, I need to put a plus sand plus friend. I think that and put that there So we have the current weather in San Francisco going to put it back. Chicago here do that to show you that if you want to add things such as the humidity orthe e um, time or whatever the clouds, it's all here, and you can just click on these and add the's and also go toothy. Open weather AP. I find out which format that they're in on display. Those if you want to. So there are many things that you can do here. You can change the styles because you know CSS now you can change the background. You can change the images, change the fonts. If you want to make a page that goes right on the web instead of just are simulated page, you can get a hosting site, use their see panel, and all you would have to do there is to copy all of these files, these three files plus these two images right into there. And you would have your own personal web page that has your own current weather for your own city. Um, so you can make this your project, you can post your project, you can write reviews and you can follow my profile. So you now have everything to put it all together. And I wish you the best of luck. And I thank you for your attention. Okay,