Python powered website for beginners

1. Intro: Hi, everyone. My name is Alex, and I've got a couple of interesting computer tutorials for you. Let me first introduce myself. My name is Alex. I'm a computer science teacher at the same Michael Asia in Eindhoven, the Netherlands. I'm also an online computer science teacher, Web developer, a Web developer and a gamer. So my goals are to create fund computer projects together and kind of get the bridge between beginner and intermediate computer coders, designers, developers, whatever you are. So he has to plan for a disk class. I'm going to teach you the basics of bison, and then we're going to use Beytin as the beck and language for a websites. The websites gonna be free. It's going to be published on the Internet, and you are going to be in charge of it now when the glasses to come, we're going to dress that website up with some HTML CSS and JavaScript. And if you're still hungry, form or we could do some fancy stuff like use AP Ice, Use Fire Base and create a three D animated websites. Thebe Records is for Disa Dorial art. None on the only thing you need is a computer and an Internet connection, which you probably have, or you wouldn't hear me talk right now. All right, Whenever you're ready, let's start with the first tutorial. 2. Python 001: welcome to discretion course in bison. Like already stated in the intro video, The prerequisites for this tutorial are not. You don't need to know anything about coding or python to do this first part. The only thing you need is a computer and an Internet connection. Now let's get started by getting our hands dirty and dive straight. A dupe ice encoding. Not to do that. We need to go to a website, and this is the website t o dot Ron slash number Sign Python three. Where to your stands for Tried this online. Go to the website and check it out. Now here we see what we call an online interpreter. It might seem that there are three input fields, but there really is only one where we can type in stuff that's right here, where it says coat Now. I don't know what skills you already have in regards to coding or python in particular by, but I assume that you already know that if you just type in your name like so and you hit that big play button at the top that you will get an error message. This interpreter speaks a language and that language is python now, like with any language, we want to make sense. So for that we need to know some words and some grammar. The first words that we are going to uses the word prince the hardest print work. You put parentheses after the statement prints, and in between the parentheses, you put some double quotes. Now, whatever we put here will be out. Put it to the screen. So you frequent Alex in between quotation marks and hit the play button. That's what the output will be. It's not spectacular, but the first step is made. Now try this prince in between parentheses to without the double quotes and see what happens. Now we got the number two. Now try this print too. Plus four, it play again. As you can see, a calculation is made and the result of sprinted to the screen. So what do you think will happen if we do put quotation marks around too? And before this time the two and the four are considered text and are glued together like so whenever we put something in between quotation marks, debts, gold, a string without the quotation marks, it is a number or in this case, Pacific More specifically, it's an integer. Okay, now life, let's try this s equals And then the string saying Hello, space world Now where we played this, there will be no output. Of course, what we've done here is we've created what we call a variable and very bill contains the string Hello world So are variable is like a bucket where you can throw in whatever you like Could be a string Could be a number Could could be something else ever You're basically telling our interpreter Hey, whenever I use s what I actually mean is the string Hello world So if we print yes then the output will be Hello world as you can see Now try this as one equals Hello and s to it's set to world The print statement will change a bit will make it prince comma s one s to and we had played If we put in as one as one, it will print as one Then the space because of the Kama and then as one again which is hello If you want to print, tell the world we should change the second as one to ask to. And now it'll print. Heller worked. So what if we were to try to print strings and numbers? Okay, let's create. I won and assigned a number 12 today. I to will be 40 now if we print as one as two. I won I to That will actually work, so it prints everything neatly behind each other. Now, that's because of the commas. If we were to do something like this as one plus as to plus I won, plus I to this will not work. The reason is that we are trying to add up two variables that are not of the same type. So we got a type error. We could fix this by adding a comma instead of a plus sign. So now we're adding up to strengths, then a comma. And then we're adding up to in futures, which is totally possible. Now it will say hello, World 26. Okay, that's enough for now. In the next video, we're going to examine loops and conditional statements 3. Python 002: welcome to Part two off Barton basics In this class, we're going to go over loops and indentation. We'll see that indentation is very important in Brighton. But first, a quick recap of last class and by thunder are several data types do have them. We have used already. Those are strengths and interests and re briefly mentioned floats. The difference between an intra cheer and the float is that afloat has decimals. We also doctor about variables. A variable has a name and a value devalue could be a string or in literature or even our things. But we'll get to deadlier. So if every bull could be, for instance, my far and then we could set the value off my viral of our to string and nice text as you see happening here. So my far is the name of variable and nice text is devalued. So pretty much a variable is like a bucket has a name and it can contain something. In this case, it contains the string. Nice text. Okay, time to get her hands dirty. Time to get going. Go to the website that you use before t i o dot run slash number sign Bison three. So suppose I wanted to print the numbers one through 10 so I could do something like this. Sprint one Brent to friends, three, etcetera, etcetera. And eventually I would get what I want. But it doesn't look very efficient, does it? Curtis want to be efficient? So they came up with a new concept to fix that. And that's the loop. There are several different loops, but we're going to focus just on one of them in this class. The for loop. How does the four dupe look? Let's have a look. So the four new pretty much can loop through things. For instance, let's say four L in destroying Hello World. Then I put a colon, and then I had to enter. I put four spaces 1234 and then I typed. Print L. L stands for a letter in this case, could be any letter or could be any named. If arable name can be anything you like, pretty much there are rules for variables, but let's keep it simple and just used that letter. Alfred. So you saw I put for spaces in front off Prince. I'll explain later why I do this. So see what happens if we type this so you can type this in and check it out for yourself. You should see something like this. So it prints all the letters off the string. Hello, world. And it also prints the space in between. So that's how the four Luke and loop through a string note that the Prince statement also takes care off going to the next line. Now, what about those four spaces that I put in front of print? Well, that's called indentation, and in this case, it was used to determine what had to be done for each character. What is part of the loop? What needs to be done for each character? What needs to be done for each character is it needs to be printed. Now, this is just one line now, but it could be multiple life. Try this. Just remove worlds for now. So we just end up with Hello. But we're gonna add another statement. Another print statement. We gonna end end another four spaces. 1234 And then we print in between parentheses and double quotes. Just a minus. Sign. Now See what happens. The loop runs through both lines of coat. It starts with the capital A and ends with the last letter O. And it does every line of coat that is indented now at another line. But this time don't end ends. Just start on the left hand side. Type this print, then in between double quotes. 123456789 10 stars or s risks executed coat and see what happens now. As you can see, this last line of code was not executed. The number of times that that are letters in Hello, it is outside the loop. It's not part of loop. It's just something that happens after the loop is done. But back to our mission. To print the numbers one through 10 so we could do something like this. We could create Ah, string like 123456789 10 and then print l. But that would give us one problem here with 10 would print one and zero instead of them. And besides that, it's not very efficient. There should be an easier way and in factories, but for that we need to introduce another key word, and that is the key word range. So try this. Let's change L to end for number and let's put 10 in between parentheses after Rich Afforded always has a colon. So let's put that Colin there and after a colon. Remember that in Python you will always get four spaces in this case to show that this is part of the lip. We're gonna try type here. So now we're going to print and and let's see what that does. So when we execute, it starts at zero. Computers always love to start at zero. Get it runs true loop, and it ends at nine. It doesn't print 10 so that's how deranged form should work. Now. One more thing we're going to try and that's regarded. Put two numbers inside the parentheses. 11. Comma 20. Try that and see what it does. You should see something like this. 11 12 13 14 etcetera. Last number printed is 19 so that's one number under 20. So that's how the four new works. That's how range works. That's how indentation works. This is the end off this video. Next time we'll talk about conditional statements 4. Python 003: So this video, we are going to look at conditional statements. But before that, just a quick recap from the last video. So we talked about the four Loop and we talked about range. The for loop can, for instance, be used to look through the characters of the string, or it could generate a sequence off numbers. All right, time to talk about conditional statements. Let's go to our editor first go to t o dot run slash number. Sign fightin three. As you might suspect, the conditional statement has something to do with a condition or even with more conditions . So if a certain condition is met, something will happen. And if not, then it won't happen. For instance, let's check if a person can drink alcohol or not. Let's say the age of a person is 12 so this is a variable age, and we're assigning the value of 12 to it. Now we're going to use the if statement to check if this person camp drink or not. So we're doing something like this. If H is larger for equal to 21 and then a colon, remember after Colon and Parson, there will always be force basis. Indentation. Now we'll hear, Hear people say, you know you can do to spaces and that's correct. But it's good practice to use four spaces for indentation, but that there's a site mint. So if th is larger or equal to 21 we're going to prince. You can have a beer. Okay, let's see if this works. So actually nothing is printed because the age is not larger or equal to 21. Let's verify that. And there you go. You can have a beer because now I'm 21. So wouldn't it be nice for people under 21 to have some kind of message? Well, we could use the else statement for that so we can go like this else for spaces indentation , and then we're gonna print. You cannot drink alcohol. Okay, so that's see if that's working. The ages 12. So the if statement here h is larger or equal to 21 is not true. Show it to build by default, full back to whatever we put under else indented. And then it says you cannot drink alcohol in the output, which makes sense. Now the indentation. Let me show you how it works. So everything that's invented after the If statement will be executed. So I can prince something here like, uh, lucky you. And with the else statement. Same thing I could Prince. Sorry. So let's check that do story lines here should be printed. You cannot drink alcohol. Sorry. And if the ages over to anyone or equal to 21 it'll say you can have a beer. Lucky you. So what happens if we put a print statement right here hugging the left side off our editor ? Well, that will be executed regardless off the condition that we have in the if statement. So let's just print the line here, just a number of dashes and see what happens. So, you see, it doesn't matter if the H is a buff 20 or under 21 this language, old ways be printed because it is not indented. Okay, let's clean this up because there's one more thing I want to show you. I'm going back to this justice. If statement and the else statement. So what if I wanted to tell people that are exactly 20 years old that, you know, they just have to wait one more year. And then there, there. Well, there's something that's like else if, like, we have a second condition and that's kind of abbreviated to LF so LF means else. If it takes a condition like, say, L F H equals equals 20 and explained the equals equals later. Why the double equal sign? I'll explain that later. The colon and, of course, for indentations, for spaces as indentation. There we go there, we can print something like Just wait habits. Now, if the ages exactly 20 we'll see the message. Just wait a bit, and that makes sense because first it's checking. If the age is larger or equal due to anyone which is not, and then it will move on to the LF. Statement and a check. If th is exactly 20 and if that's the case, it'll print. Just wait a bit. If nighter off these conditions are true genital print, you cannot drink alcohol. So why the double equal sign? Well, that's really if you compare to thinks like variables with values or values with values or variables with variables that you use a double equal sign, it's to make a distinction between comparing something and assigning a value to a variable . So when talking about conditional statements, it's inevitable to also talk about logical operators with a logical operators. You combine two or more conditions. Examples off. Logical operators are ends for knots and sore, but we'll only use these 1st 2 Once up here, you don't need to capitalize them just and or real dude. So how did these work? Well, let's start with the and operator. So when can you drive a car? Go at first, your H comes in play. So let's say the age of this person is 22. And then, of course, you will need a driver's license. So let's say this person has a driver's license. So now we can compare to see if this person can actually drive a car. So what do we do? Is this If H is larger, Damn, let's say 17 and driver's license. Colon. 1234 Then something will happen. Let's say, Prince, you can drive a car. All right, let's test that and it's working because the person is over 17 and has a driver's license, and now we're saying that the person can drive a car. So does that if there's two words by to wait, then party nears tend to split them up and connect him with an underscore like so have been different than in JavaScript. For, in instance, where camel casing IHS mawr off Good practice like So Okay, not important. We tend to use underscores between words. Okay, of course. We need an else statement here else. Colon 1234 Spaces, prints. Keep dreaming. Okay, let's see what happens if the age drops under 17. Well, we have to keep on dreaming, I guess. Okay, so this capitalized. True. It's a special value. It's not a number. It's not a text, but it's a Boolean. It's what we call a 1,000,000,000. It can either be true or Fels, and it's always capitalized. So it's true or false. Okay, so, looking at the code, you might have spotted something that's kind of art. So why don't we do something? Like if age is larger than 17 and driver's licence equals equals true, then French. You can drive a car Well, that's because driver's licenses a boolean. So if you check out this statement right here, this condition age is larger than 17. It's art a true or false now billions by default are true or false. And that's why we can just used this Centex right here where we just put driver's license and then it will be true or false. So this condition is true or false, and this Boolean is true or false. And if both are true, then this will be friended. So the second that lost logical operator that we're going to talk about in this video is the or operator. You can kind of guess. How did works, right? So it's used when either one thing needs to be true or another. So, for instance, when do we use an umbrella? Let's say raining IHS. True, it is raining, but it's not snowing, so snowing ISS false. Now we could recreate an if statement like this if raining or snowing. 1234 spaces Prince Emptory parentheses on Democrats use on umbrella. So let's see. Rating is true snoring it falls and now we have to use an umbrella. So either of these two have to be true, and then the condition in total is true, and then it will do whatever is indented in this case, prints use an umbrella. So that's jack debt. Let's make both false. So now it should not print anything. And there we go. Okay, enough about conditional statements. In the next video, we'll talk about functions. 5. Python 004: Okay, so now let's take a look at functions. But first, let's we kept the last class. So we talked about conditional statements being if, LF and else doctor, about true and false. So remember to Capital T and Capital F, and we talked about logical operators like and and or all right functions. For that, we need to go to our online tool, T o Dad Ron slash Number signed by from three. So by now you're pretty familiar with the Prince statement. So that statement is actually a function. It takes one or more arguments. And Prince, that's to the screen. But did you know we could also create our own function? Let's try that. Did you find a function? We start by typing deaf D E f been a space and then the name off the function. In this case, we're going to call our function filter because we're gonna filter some stuff after the name, you always put parentheses and a colon. Then we had entered. Now remember, after a colon, we always get indentation. So that's four spaces. 123 four. Okay, so every line it's indented under this deaf filter will be part off the function filter. As soon as we stop inventing, we're back into our main program. Okay, let's create a function that filters out numbers from a string. For that, we need some input. Eso What we can do is ask whoever is using our function to provide some input. That input will be a parameter that we put between the parentheses or function like so. Okay, Okay. Now we can use this input parameter like any other variable. Now, the first thing we do is create an empty variable cold output. Here we go. So output equals an empty string. So how do we check each character of the string that's provided any thoughts? Well, we're going to create a for loop for debts. Ah, four spaces indentation Because this is still part of the function. Every going to go something like this for l in input. Do something. Now this is a four loop inside a function, so the function gets an indentation, but so does the for loop. So now we have to make four extra spaces indentation, so that means eight spaces in total. Okay, Now we're going to see the power of python because here's the way to check for numbers in our string. We're going to make an f statement if l in and I'm going to make a smart string here. Like 0123456789 So if Alice in there So that's the character we're checking at the moment. That means it's a number. Another colon. So Mawr indentations coming up. 123412341234 or 12 In total. And now we're gonna adds death character to our art foot string. So outputs equals out boot. Plus that character. Okay, so look at that. We got an if statement inside a four loop inside a function. You see how this is nested, as we call it? Very interesting. Okay, now you have statement is done, the four group is done, but the function is not done. So I'm going to make four spaces indentation here, and we gonna have to end our function with a return statement so you can just put return here. But since we want to return our output value, we put return with parentheses and put that variable outputs in here. Okay, So what happens if we execute this coat Any clues? So actually, nothing is output here. We don't have an error, which is a good sign, but nothing's printed. Now, you might think that if you put a print statement in here, let's say right here above return that we will get a print. But this is not the case. If you will see now, that is because we created a function which is really a tool, much like a hammer. But we're not using the hammer yet is just lying there. We created it, but we're not using it. So yeah, How do you use that hammer? How do you use that to let me show you? It's quite easy, actually. So what you do is just put the name off the function in your main coat. So that's filter always some parentheses and if need be some parameter now, in this case, we can put in any string that we want. So I'm just going to put a post look code in here with the space and two letters, so if everything goes well, we should get an output of 25 25. So let's see if that's happening. Well, there we go. We created a function that filtered filters out numbers from a string, so it would be even better to take out of the print statements off the function and put it right here in our main coat. Now, why do you think that this smarter? To do it this way, the result will be the same. The result is still 25 25. If it changes numbers, it's going to be 4000. So the reason is that now we can use this filter however we want, so we can make make more calculations of it if we want. We're not stuck to just printing. Okay, So as you can see, it doesn't matter if you put some empty lines between here because the interpreter will still keep an eye on those indentations. The empty lines don't really matter. Okay? Just one more little tip. Um, since this has done a lot, you know, like you add a certain value to a variable. There is what we call a shorthand code for that. And that is instead of output equals output plus l you put output plus equals l and that will do the same thing 6. PythonAnywhere 001: okay, It's time to start building our websites. We will also use a framework for a nap. The name of that framework is flask. The framework is just a collection of building blocks so we don't have to do everything ourselves. So our website is going to be hosted by python. Anywhere that calm, we're going to get a free account there for our purposes. That's more than enough. If you want Later, you can upgrade your account to fool for a reasonable prices. So the registering procedure is pretty straightforward. Of course. First go to W W w dot bison anywhere dot com and you'll see this page Well, there's a big green button there saying Start running bison online in less than a minute. You want to click that and you want to click Create a beginner account. You have to pick a user name. Ah, let's Ah, Mexico 2020. Um, you use an email address? Ah, pies and anywhere. I think I created a new one for this and you pick up passwords. You agreed to terms and you register. This is all pretty straightforward. Um, but you cannot Apparently you cannot use underscores. Okay, It's got rid of the underscore. We should be fine. All right, So you can do the tour if you want. You'll get some explanation about the platform. Or you could just end the tour by clicking and tour. As you can see, there is a nice warning up here saying you've not confirmed your email address yet. You can do that later if you want. It really helps you. In case you lose your password, you can retrieve it easily. You can get it back easily. Reset it even more. Um, so from here, we are going to explore the dashboard. You don't need really everything up here. The most important parts now really are the files and the web menu items. So I want you to right click the files button if you want, and open this in a new tap. So it opens in a new tab, Andi. Then I want you to right click weap and do the same thing. So now we got three taps. You've got a dashboard. We got the files and we got the web all in different taps. Okay, then I want you to go to the tab where your web configuration is set up and I want you to click at a new web up this button right here. So it says here your web abs, domain name. Um, that's listed here. So this will be a website. Isn't that great? You can upgrade, be it only to you can go. Just go along with the free account. Now you click next, and now you have to select up ison web framework. Nowadays, name might not look like buttons, but they really are eso. You have to choose where we're gonna choose flask for this because flask is super easy to use and it helps us set up a website really fast. So you want to grab the latest version? That's Ah, three point. It's, um we should leave the name of the application as is. So you can just click next here. Flask app. That's fine. You click next, and our website will be created. All right, so all done. Your weapon is now set up. The details are below, so you can read through this if you want. There's a couple of interesting things happening here, but to be fair, our website is ready. If you right click. Alexey Co. You know, whatever your name is that you chose for your website and I'm fighting anywhere dot com Whatever you use name was you right. Click that you open up in a new tab and it will say hello from far from flask. And if you go to your files, Andi, go kind of Refresh that, I guess, Yeah. If you refresh it, you will see my sites appearing here as a full where you can open that up by clicking it. And then you see the flask app, not pie. Now, if you I would say right click it's and then open in a new tab. And there you'll see. This is all Python. So there's a couple of things that we haven't covered yet. But you see something here that should look familiar with the deaf and then the name and then the parentheses in and the colon and then the indentation. Yes, Ladies and gentlemen, this is a function so dress, I'll explain in the next video. So for now we have our start. We have our website. This is the address to your websites. From here we start building, making a little make it look a little bit better. Um, and then that will be the end off this course. And the next class will be about, you know, creating the HTML CSS, perhaps even some javascript to really dress up your page. 7. PythonAnywhere 002: Okay, so we got a nice little website here. It says Hello world, and that's pretty much it. So we're gonna dress it up a little bit, not do much, because this is going to involve HTML. CSS and debt will be for the next glass I'm teaching. But just to make it look a little bit more fancy than this, let's do a couple of changes here. So remember, we have the file stab. We have the Web tab, so files Web, and that's it. And then the website itself. So we're going to change some stuff around here. A couple of things I have not explained yet. Eso let's start at the top here first lines empty. This one here with the number sign or hashtag if you want, is a comments or everything that you put after a hashtag on that same line. It will be ignored by the interpreter so you can use it for comments. Really? That's how that works. Now, right here we're importing something. Assess from flask import flask with capital left this time, and what it does is we're kind of standing on the shoulders of other people here where they built code for us that we're going to use to actually use python to shape a website with and it takes care off routing and what not. I'm gonna explain that in a bit about pretty much what it is. It's code that is made by other people and we're importing it. We're using that eso we initialize our website by creating a variable up, and we're gonna set it equal to flask in an in between parentheses. Underscore on the scoring name. Underscore underscore. Don't worry too much about it. It's just really how you initialize a website using flask. That's really how it works because later we can use this variable right here on this line where we create a route. So what's route? That's you know, the syntax is like this. You have a at sign and then you have app, which is the variable name that we used here and then that route and what it does is in between those parentheses here and in between the single quotes, there's a single forward slash. So if people just go straight to our website without adding anything, like maybe a folder name or whatever and then some name for a for A, for his file. It just goes straight to the root. Then they will see what is in the function under this routing. So that's what's happening here. The function that's under he is connected to do the routing and everything that you put in here will happen if users go there so it returns. Hello world. And that is displayed on our website. That's ready. Hardest work. So if I change anything here like ah, hello universe, for instance Andi, I save it. Then I have to go to the web, upset up and reload the page. So remember, if you make a change in here to de flask Abd up, I go to your web upset about set up and reload. The page takes a couple of seconds and then you can go to your website here and refresh it and it will say hello, universe. So that's really how that works or anything you change here will be displayed on your website now because we want to have more than one line. Ah, we're going to create a variable with multiple lines. So how do we do that? First I'm gonna hit Enter here so make some space and then I'm going to create a very vocal page, and I'm going to set it equal to what we call a melty line string. So how do you create at you type three quotes to feed single quotes you hit enter a couple of times and then again, you type three quotes. Anything in between here will be part of the variable page. Okay, So I can put a line here saying, Ah, this really boring. This is lying one and then underneath This is the line to so the way browsers work I don't know if you know any HTML if I save it like this than these lines are going to appear on one line, so that's not gonna work for us. Eso you want to put maybe a line break here just for testing purposes right now? And of course, instead of hello, universe. Now we are going to use our Ferriol, so we're going to return page. Okay, let's save that and reload the weapon up and refresh the page. And I would say this is line one. This is lying to Okay, so that's how debt works. Now we got more than one line in there. Okay, Next thing to do is ready to dress up the page. Now, if you don't know any HTML a couple of the things that I'm doing here. Well, look, kind of like treat gibberish to you. Um, my next class is going to be about html CSS. Maybe some young stripped. So just type alarm at just a dress up your pages. So we're going to start with the HTML tag as a schooled HTML in between this Ah, these greater Dan sign and lesser than sign angle brackets. They called him so we can start with html, make a little indentation, maybe two indentations this time A little bit different than with bison. And then I'm gonna put a body tech there. I'm gonna close it off. I slash body and slash again. If you don't know any html Doesn't matter. You know, Just put that in here. We're gonna make the annotation look a bit better. Just, you know, for us to be able to see what we're doing. Ah, this will not make any changes to the appearance. If I save this, if I reloaded the webpage and I reload the page. There's not gonna be any changes. This is just just just Rippers. And later you can have some fun with it. In fact, you can do that. Could do that right now. Like we could do something with the style I'm going to say Style equals. Let's first change the background. So body No, that's a background color. I was going to be Bache Ah, semi colon to end. This is CSS, by the way, We're gonna cover that in the next class. Also, background color is beige. Um what? Els? Let's see text align center, semi colon. Okay. What else you want? Maybe a nice Fonso Fonds family, Cole, and single quotes here. You don't want to mess up our double quotes here and there. So you single quotes here. Ah, trait. You shape space M s after the single quote, a comma and then curse. If so, make sure you type this exactly the way I did. If you make a little type with some bird, this is not gonna work. Uh, you want to put a semi colon here, just in case we add some stuff later. Okay, so let's see. How did work so we added a background color. Bache realigned a text to center, and we added a nice fund. So let's see if that works for us. So that's saved this. Reload the page of the weapon and see what it changes. Now you see, we have a nice fund. We have a nice background color and R Texas centers. Okay, just a couple of more things to add. And then we're going to wrap this class up. Um, let's change to code here to something more welcoming. So let's say H one that makes the text bigger. Well, come to my websites, close it with H one and we gonna Okay, let's add some styling here. Style equals margin. Top colon. Let's say 100 pixels 100 PX and let's put a picture under its. So I am G source equals, And then we're just gonna grab a picture from the Internet. So I already found ones. This guy here just I searched on Google for welcome and I'm going to right click that picture and I'm going not to copy the image or save the image. I'm going to copy image address, which is a bit dangerous. I mean, now I rely on this website to keep that picture up, but since this is just for demonstration purposes, you know, we're going to take things slow, make things easy. We're going to kept copy the image address and then baste it in here. Ready? That's all we're going to do. And that's going to provide us with an image. Okay, so let's save that. That's reload the weapon and let's refresh the page. So here we go. Uh, we got welcome to my website. We have a margin from the top, which looks much better. And we have a nice picture here. So this is it for now. This is the websites that we've created in a pretty short time. I might say so. The next class I'm gonna teach is going to be about HTML CSS. I really explain how to make this page look even prettier. Maybe at a menu, maybe at some more pages, etcetera, etcetera. Thank you for watching. And hopefully else you in the next class