Transcripts

1. Course Promo: 2. Course Overview: Hi. Welcome to the practical introduction. Tohave development. My name is gone. Fradkov and himself told senior developer, I'm very happy to have you here, and I would like to say Well done for making the first steps. The water goes several years ago, my own goal was to become a Web developer, and it all started with the simple will go such how to create a website nowadays. New technologies, some coming up daily and it becomes increasingly difficult for beginners tojoin the field. One can easily get overwhelmed by the sheer amount of information available and the lack of clear but from beginning to end. This is why I have created discourse. It is the learning, but that he won't go from complete beginner to employ developer in a matter of months. The best way to learn in progress is with practice. That's why discourse, it's food, practical activities, almost every lecture and through the challenge, every section finishes with the project and in the end of discourse, I can't repair the master project for your where I'm going to guide you the start and you're going to finish the project yourself with everything you've learnt in discourse. It's going to be all in your hands. I'm here to help you learn and overcome the challenges. Award circles Sounds good. Right? So what are you waiting for? 3. Environment Set Up - Windows: Hello and welcome to the first technical lecture off this course today. We're going to prepare our environment by stolen our text editor. Go hit and let's open our browser. Some drunk abusing ago chrome you can use. You're different browser and let's type inside visual your coat. I think how to complete it. Go ahead and click on the first link over here and then download for Windows. Or, if you're using Marco really looks after replicate. It should start downloading committed. Let's wait a few seconds for the download to finish. OK, once yours is downloaded, just click on exit file. Any chilled lounge the installation wizard this click. Accept the agreements next by the default location. It's fine. Descript next. Next picture. Yeah. Next, create a mixed up I come next. Yes, though, and just wait for a minute or two so the application could be installed. Meanwhile, I'm going to minimize my brother and I'm going toe. Pose the video for the inspiration to finish. OK, the installation is done in. As you can see over here, when you're next up, you should find juice studio coat and I'll just go ahead and either double click the icon over here or right click open and just to your cultured large. And if we maximize it, this is what you're going to see. The welcome screen. And now we have everything ready to start creating our first work pages. I'm going to cut the lesson here and in the next time we're going to continue it. And I think that show coat. OK, guys, I hope you enjoyed it on D day care. 4. My first web page: Hello and welcome back. Now is the time to put our newly installed editor to use and create your first weapons. What we need to do is go ahead and keep on your file. Over here disclosed. Welcome. Elio issued. Don't wish to close it. Leave it, Open it up to you. And now what? You need to do its click on file. Say this and what you need to do is just click over here on your next up and for the name just typed index dot html and seventies plan takes safe. And what should happen is if you actually minimize the editor, you should see that you care a file called Index and this fire was going to keep the icon of your default browser. What we're going to do now is let's go ahead and type. Yea, this is my first work page exclamation mark and it control and safe or go to fire and safe . What you want to do now is to minimize the editor and double click your index file. You should open your browser and you should see your message. Yeah, this is my first webpage. Perfect. And this is how easy actually just to create a weapon. Well, this is the easy way. And now I'm going to show the proper way. But before that, it's time for your first challenge. And the challenge is to create brand new webpage. You can call it whatever you wish. For example, your name dot html and this is Paige wants a loaded in the browser. We should display the text. I created this web page all by myself. Now, go ahead. Was the video and see how easy it is for yourself to create a webpage. Okay. Welcome back. Did you manage? It wasn't so difficult, right? Perfect. And in the next lesson, we're going to learn how to create a proper structure. Webpage with HTML. Okay, I hope you enjoy. Just listen and take care. 5. HTML 5 Overview: Hello and welcome to the first technical section of discourse. I hope you're very excited to start learning in the next lessons. You're going to get proficient in HTML, which stands for hypertext markup language. And it is the building block off every website. In the next videos, you're going to learn about paragraphs, headings, forms and much more. Also, there is a coup project waiting for you. Indian toe dissection is always If you have any questions, don't hesitate to contact me. Good luck. 6. HTML Structure of a web page: Hello and welcome. But they were going to learn about how to create a webpage with proper HTML structure and go ahead and launch your visual studio code and also open your index page in the browser. I'm going to do the same and also what I'm going to do this. I'm going to change the layout so I can split my screen between the browser and the other Andi. This should make it very easy to track the changes that were arriving because you can just save and refresh. Is your makeshift already noticed? Everything that we right in our index space so far is treated as plain text by the browser . And even if you're right, how you like this save, refresh and get more text and we're here now in order for the browser to accept instructions, we must write them in the former tax and on HTML track, it's get it done like this. Okay, now let's go ahead and remove the sentences that takes from that you just wrote perfect and the first time that we should hear or that we should write in our webpages is the Asian out there and Onishi Montag goes like this less than your bracket. It's Jim Oh right angle bracket and our editor service. Smart enough nowadays that they finish or day at the closing tacked automatically and what this html attack does its that its informs the browser that everything after the opening talk in our current case, line one, everything that follows on do the closing talk is going to be html cold. And if we saved this But these changes and refresh the page by feeding care 54 that alone this page bottom we see that there isn't anything on the page. And the reason is because this is actually instruction to the browser and not content. Okay, Similar to the human body, a webpage. He is a hit and the body as well And let's write hit. Okay, what effect this? Give it a line of court and then let's right body. And as you can see, our editors are creating our closing tax. Automatic it. So what's the deal here? Well, the hit we used to store the meta data of our webpage and the body. We use it to start all the contents, for example, buttons, images, paragraphs, texts and someone everything that its content that is visible to the user. It's in the body and know the metadata stylings, the title of the page. Everything is Indy here section and let me just give you a quick example. As you can see, the name of our Web page of the moment is the founder, which is by default. But inside the hit, huh? What? We can do it. Shooting. Create tight, though. And inside the title. As you can see, we have the opening and closing tucked weekend right to my Robin webpage exclamation mark and it was safe. Refresh Viola and you can see our page title changed. And there isn't is because we modified our title back. And if you actually over over the element, you can see a description of what, exactly? In the US and inside the body. Now you can write some gibberish any further fresh. We can see it over here on the page. So again, let's wrap this up the hit section. We write our meta data, and in the body we write our HTML elements or the structure that it's visible to the user. Okay, so far, great. And the next lessons We're going to go into much more detail about what HTML elements we have, what we can do, how we can use them, and it's going to be a really fun. I hope you're as excited is me and take care. 7. Headings: Hello and welcome, but they were going to learn about HTML headings and how you can use them in your webpages . So first thing first go hit and lets it move the cold from the previous lesson, and we can also change the tie. Toto. It's Jemele. Headaches like this safe Refresh what effect? The killings in HTML are defined from a drum. Who? H. Six with a trunk being the most important 286 being the least important and you can use them toe. Name your structure in the Web pages, for example. Human article and you might hear for heading Cindy article so you can use from a Toronto 86 and let me actually show you how these skating's look like who gets not by creating Let's tango bracket H one. I think of Rocket and our editor should create a closing talk. Automatic E. Hugh Lucien Type h. One kidding example. What effect? And then actually, Okay, look, he's going Get on that it's too. And then h so h three n. H four h five and the last wrong age six. Let me just copy this text. H two example h three example for which five and the last one age six. If we saved by pressing control us and also refreshing biting a five on our browser. You see the different pretty find stylings off their headings, and you can use them as you can see toe Name your sections on the structure and hearings are very important because the search changes such as Google. When you publish your website, they look for the kidding so they can structure your website so your headings are very, very important. And this is how headings look like is a mentioned they have a trying is the biggest plan. Also, there is a bit of space from hope and there is a bit of space on bottom. So if you actually try some something, for example, from a random fixed and save it, you can see how much space there is between yea, Tron and the next underneath. And also this in the space above the aged. So this is how you guys can create H once and now it's time for your next practical activity, for which what I want you to do is to create a brand new weapons. You can call it for example, your name dot html and I wanted to create headings from 1 to 6 with your favorite movies. Your favorite movie should be getting one. And your sixth favorite movie should be heading six. Okay, I'm completely sure that you have no wishes whatsoever completing that challenge. And I can't wait to see your results. Okay, guys, in the next lessons, you're going to learn more about paragraphs on and take care and have fun with the challenge. 8. Paragraphs: hello and welcome in today's short lesson, we're going to learn about HTML paragraphs. Now Go ahead and remove the headings from the previous lesson. And also let's modify the title to a general graphs this. And if we save on a fresh perfect, we can create a paragraph by using the attack and let's go hitting t 81 less than no bracket B but I can't go bracket. And inside let's pipe This is they moved far enough This save refresh Perfect. And you can see that this is just a normal plain text. Now, if I type this sentence without the attacks, let him just copy that text removed the attacks face and you can see that there is actually no visible difference. But the think is that the attacks are the paragraph. I'm able to return the previous state by looking control plus Z, and this returns to the previous delusion on the previous change that was safe. It's all the paragraphs here. Pretty find styling, which if we have two paragraphs like this s a r a fresh, you can see that these are completely different structures in our webpage. This is the first sentence and this is the second in this case, and there is the white space in between them because if we just place this takes at minimum the feet, that's and just place it like this twice in our editor and I refresh, you can see that the browser treats it is just a single sentence, and that's why we need paragraphs in orderto separate different structures. Also, there is a shocker into creating the HTML toxin. Just case the paragraph, for example, You can I be and hit the top key, and it's going to create the opening and the closing track. Automatic Landis's like a quick Israel. Okay, guys, as you can see if you're safe and finish, this is how we can use paragraphs. And now it's time for your challenge on what I want you to do is to create on your webpage . It is going to be reserved for only four paragraphs, and I want you to goto your favorite Wikipedia page, for example, and I want you to create it least five different paragraphs. This copy a chunk of text from Wikipedia emplaced in one paragraph in create a new paragraph with another chunk of text. And by the end you should give it least five different paragraphs. OK? I hope you enjoy. Just listen and take care. 9. Text Formatting: Hello and the welcome. I hope you're giving a great and so far enduring what you've learned and in this lesson, their work to learn about the few ways that you can form other style. Text with html. HTML was never meant to be a styling language. That's why we have says. But they're few beauty and taps or functionalities that we can use, for example, to make a text on the line door to make it takes both. And so now go ahead and delete the paragraphs that we created in the previous lesson and also change. The Tyto is, you know, thanks for month thing, and it's safe for a fresh perfect now, since they're not many examples I've already copied to small chunk of court. A few paragraphs. I'm going to place it over here, and what I want you to do is to just take a few minutes and just the right them. And I'm going to go over and explain to you what each of these it's doing. And the reason is because otherwise the video take very long. Yes, Is there not that many? You can just pulls now and just find them? What I'm going to do is I'm going to save. I'm going to hit Refresh so you can. We can see what each of these it's doing. Okay, if you are done, you should hear the exact same sentences and styling says I know. Yeah, So let's begin with strong and before which stands for both. As you can see, on first glance, there is no difference between strong and boat. And the thing is that for the browser itself, they're exactly the same thing, although there their use it, it's a bit different, and the difference is for blind people. So, for example, that people were using software to read the text the paragraphs and once there is ext inside strong tax, it means that the take should be read to it. Lower tone. This is the main difference, so usually you should be using both. If you want, just pull both a word or a sentence or something like this. The next last R E M, which tends for emphasis, and I, which stands for the tax and this is the same geo as strong and bold emphasis. It means that the extra either shoot emphasize on just text and they're treated exactly the same by the browser itself. The next once are going to be insulted, which underlies the word or the sentence. And the next line it's you for on that line, the next Parrots sub, which stands for subscript and the sub, which stands for superscript As you can see once we cover against she. The explanations, the mixed US are there for deleted and the last one which I did not mention. It's the H R, which means or which stands for horizontal line, and it's used for for marching because it just basis a line and separates up pieces off. Extend. These are the basic ways that you can form a expert HTML estimation earlier. Usually the I think of the take should be done by, she says. But Indies several cases where we just want toe place a line through the words or use italics. It's OK. OK, guys, I hope you enjoy this lesson and take care 10. Links: hello and welcome in today's lesson. We're going to learn about income tax. Also known ISS links and links. Allow your users to navigate around your website and they're very, very helpful. And let's go. So first things first, go ahead and remove the paragraphs from the previous listen and also we can update our HTML links. Let's save but a fresh but anchor tax we can create by just typing a n pressing G up bottom as a show you. This is the fast way to create HTML elements. And what are we giving here? We have something called h R F equals and some quote. Okay, so the drink is that some HTML elements here or require additional attributes and this hlf . In this case, it's called a tribute. For example, the HF attribute points to what location or the euro where your user will go once they clicked the link. So this attribute, a trip is just specific toe in Carling's. There is no point in having Cage Reference side, for example, the title according body. Anyway, if I just said the Encarta, also known as Link, I had a finish. Our page is empty because we need to give a name, for example. Okay, that's not very who name but will do the job. Anything fresh you can see by default, lives are underlined, and also they have a different color than the rest of the text. For example. Next get thanks. And if you're safe and a fresh, you can see that our Texas black and the link its purport. So if we now click the button, nothing will happen. And the reason is because we didn't give or we didn't set anything inside the H. Now what? You can do it, you can that page t pretest we'll go. And what will happen now is. But when we're safe and fresh and you click, the button will go to go. Let's click. Okay, we're in the Google Webpage now we can go back and I'll show you one additional attribute. I would just go back it. And what this does is that you can choose when there's that takes the button to navigate inside the current window or open brand new window in their browser so you can say target under Scott Lang. So by default, when they click, they just get redirected inside their current window. But once you say are get equals underscore blank. What will happen is when they kick the bottle new window it's created and their navigated to the You are so inside here in the HF attributes off D link. You could say anything. I mean, you can play or you can give a link to your door You can give licked. We could be here, for example, with the, uh I don't know, Just hoping, darling. Basically what? Here. And if we're fresh click, we go to Wikipedia and you could practice by creating links that point to different locations. And it's time for your challenge. And what I want you to do is I wanted to create new a page with 567 links that point to your favorite movies. You can go to, for example, and to be or rotten tomatoes are you're before website What we do your nose in create links with it. The name of the movie, for example, scare me. They And here it should point to the Terminator. You are a penny for a fresh. So let's move the big Thanks. Yeah, something like this. Okay, I hope you enjoy this. Listen and take care 11. Comments: hello and welcome in today's lesson. I'm going to tell you how you cannot comments and why you should add comments to your cold . Let's begin by removing the link from the previous lesson and also modifying our title toe . Html Comments Save other fresh Perfect. What are these comments? Well, you have the ability to what next to your HTML page that the brother is going to ignore. And this is perfect for us because there are many use cases and many reasons why you should use comments. And some of them are that once your webpages start to grow bigger, you might want to separate your components of the paper. Basically, you can put bread crumbs and tell yourself. Okay, here it starts, for example, navigation and there is the navigation cold. And then it's the main content content like this. And here it's your call like this and so on. For example, Footer and I'm actually what's actually I'm going to give you a practical example off the difference between giving comments and not hearing comments, and this could be our structure. For example, these could be your comments, and it's going to be real easy. While scrolling through your webpage to find the section that you look for. And also comments are very careful for other developers because when you write your own thinks you know what they are, and you might help say you have no issues finding what you need because you know your structure, your components, you know everything. But when you start toe work with several other developers, it gets tricky because they don't know what you've done. So they need some clues. How to navigate around your coat and let me actually show you how can write woman Senior HMR called because if you just right, that's a demo. Comment were safe and fresh. This text is going to be displayed by default in the browser, but what you can do is open left and go back it exclamation mark. That's touch. And actually our editor. It's dodging the engine talk of the commenters, though, because you have opening duck and you have a closing talk and in our case there, color it in green so you cannot miss them. And what is happening here is that everything that we place in between the opening tuck and the closing tax is going to be considered or is going to be ignored, basically is going to be comments for humans moments again. They don't do anything to the machines. It just for us, for humans. So I carried, for example, this this going to be north. I know, but I was that. So let's fresh and you can see we don't have anything extra on the browser. Even if we delete our X over here, the fresh as you can see our what page is empty. And the reason is because this text is ignored by the brother, it's still there, but you cannot see it. You can just see it from over here and these. Actually you can even hear it on a single line. It's not a problem. It just you cannot Many allies, of course. For example, you actually go over here just evolved HTM apart over moment that let's go ending one. And just about everything in the comment, Any foot of fresh, even our HTML. I don't changes because all this is being ignored at the moment. Okay, Now I'm going to show you a short cut for you can create the opening in the closing. What you can do is you can type text, for example, this list prominent. You can mark the text, for example, with your mouth like this, and you can press control and slash. And this is going toe comment out the text automatically and it works for multiple alliances. Well, movement, for example. We can mark everything contro slash and all of this it's commented the moment perfect. Now let me show the practical example of why comments are very, very important. First, I'm going toe open this webpage. So this is bootstrap work page. We're going to create something similar in following sections. It's very nice in place. So this is pretty large webpage. That is navigation. There is main side that it's some cards over here, some more content. So this is pretty large, especially from for a beginner. This is going to be huge. There are tense off what pages here. Now I'm going to open the court with comments. All that you, uh So let's go to the top. It can start scrolling down so against, you know, don't mind that you see things that you don't understand what they are. We're going to learn about everything in the following places. So what? I want you to focus on the comments on the green text over here. So as you can see the beginning, we have several comments. For example, both drop. Garcia says, don't worry about it and just know that geezer like clues where things are and were there. So, for example, here in the beginning cricket navigation. OK, that we know that this is the navigation part. And the hoco that is here is just the navigation. Then if we continue scrolling down, you can see slide one. Okay. What are the slides? Maybe he's that are changing. Slide once like to slightly. Then you continue more and you can see page content. Ok, now we know that this is the content off our page. Then you continue going scrolling down, scrolling down there. Give portfolio section. Where is it? Okay. Port for you kidding? You see how easy to just by scrolling down we can see the different sections that we marked with comments. Now, if you don't write these comments, let me just open another example. This is the same webpage without comments. Now, if you begin scrolling down, you can see that everything blends together, we cannot distinguish between different sections. And the reason is because we don't have clues now. If Euro Disco old okay, you know that you named this part in certain way or that part in certain way. But if some other developers looking at pure ship working very hard time finding or navigating three or called congenial would have the future sections about auctions section food, er and so and this is why comments are very, very important Good practices when you begin or when we begin building quite pages, it's to start naming your sections like this. Okay, guys, I'm going to cut this lesson here because it's getting quite long. But I hope you saw the difference between nicely named comments, for example, like this and is limiting that blends together and you don't know we're wanting Genz and we're another thing starts. Okay, I hope you enjoy Just hasn't and they can 12. Images: hello and welcome In today's lesson. You're going to learn how you cannot images your webpage and let's begin by modifying our title because we don't get any cold left from the comments. Lesson. So HTML images even just put if it is, you can imagine. We have special duck for images, and it's called Image Stuck and what you can do. It's that I m g m pressed up Perfect. Now, as you can see that, our editor added two additional attributes. Star image stuck. And the reason for this is that the first source specifies the euro, from which damages going toe come where damage is standing in the Internet and is out. It's being used for text. Basically, you write a short description of what the images about and just out text is being used by where a church leaders for people with problematic vision, the software it's reading this image and its describing from districts of what this image is about. For example, nature with these mountains, rivers and so on. But it's nice to see if it's not, I must, but it's got this source back. This source attributes did some of because otherwise your browser does not know from where to get the image. Now let's goto google and find some image. For example. What? That fall for goto images on Okay the first time And click on it. And then we find the image right. Click on the image. Right this open in Virginia top and what we want two copies. Do you ever work here? So if we wrest control, see or right button copy. Oh, yeah, right. People and places you are inside the source. Okay? It's quite long, but don't worry about it. And if we go out in the expansion of fresh, we see our image. What if it now inside our out text what we can do? It's tight. Um, welcome for on a a rainbow, right, This rain. But any for the fresh. We can see the image over here now, and they had some optional parameters that you can or optional attributes. That you cannot even stuck is that you can specify the week or the height of the image that is going to be displayed, regardless off the height of damage itself. So are do it. So what? We can do it. You can go after the old text and what you can type, it's wit, and this is in big source. You need toe. Be careful, because if we just write 100 and save it and fresh, we'll get just the unlimited 100 pixels with and again. For example, we'll hear modified to 500. Then we get our image with 500 pixels with now, as you can see that the height it skilled automatically. But if you wish to modify it, you can. For example, you can type height, for example. 200 this is going toe produce very skilled image. As you can see 502 100 height. You even can go crazier than that in, for example, time. 50. But it's not going to be pleasant image. You can see how blood in this think is so usually by default. Rather modified the wheat alone or the fight alone because the rest of Jimmy shoes should scare according. And this is how guys you insert or other image from the Internet. Now there is an also, um, option that you can add an image from your local machine so this source, instead of pointing toe https or double, double something, kid points toe the file over here. Okay. With the magic off video editing, I already downloaded an image. You can go ahead and download one is well, or you can even down this one from the lesson resources. Okay, so now I'm going to show you how we cannot. This image is low to our webpage. I'm just going toe corporatist thing because it's pretty much the same. And I'm going to delete the link. So what? I'm going not here. Is the name of the file worked on full? Actually, it's small that none of them away. I don't j p g, I think. Is it okay? So if we now go to our html page and fresh, we can see on the bottom that we give our image is this one. The first image comes from the Internet. The second image comes locally now. Usually it's a very good practice manual Fugees such assets like images. And so I want to have them in a separate directory. For example, with a If you place all images inside as its father, you're just going to type assets for the name of the folder slash and the fire for something example, you might hear images and some other things, but let me confuse you for their This is how guys you cannot images. And as I mentioned earlier, you can modify them, their wheat or Haider's up, and it's helped. They're not required. They're optional attributes. But it's good to know, because sometimes the images are very lunch like these. And you see, we have the scar over here. Your challenge for this lesson. It's what? At least 60 at least six images. I want you to feel to Rose, and I want you to have three of them that come from the Internet like this, and three off them that come from your local machine. So you must download the images, just don't download cooperated something. OK, guys, I hope you found this lesson helpful, and they hope to see in the next time take care 13. Tables: hello and welcome in today's lesson, you're going to learn about its you know, tables and how you can create them. Let's first delete our images from the previous lesson, and then we can modify our titles for a German, a similar tables and that's a fresh, perfect Well, Ables are very great way to display data to your users. Okay, let's begin. And the first thing that we should create his table talk just like table and breast stuff. Our editor will automatically create our opening king closing in the table. Next thing that you want to do is create a table kit and you can pack t kit like this and pressed up. This is going to quote our column names, the tape of it and inside the table killed. You can now start adding table hearings th tax, just like th embarrassed a and e true. Jeez, they both Beijing's are going to be our columns and let me out, for example, three of them beginning on the first team could be name and H, and if we say fairly fresh, we can see that we give our columns as you can also see that their boat And then if you want to start charging data or rose in our table, we can create a g r back for do it stands for table role. And inside the TR or the table, we can start adding Tita, which stand for able data. So that's a Jesus. Well, okay. And the first we care right. For example, Cantrow, which is my name City for low fat and H 25. Any further fresh, we can see that we have the data here now. It's not very presentable with the moment because we don't have any stylings. Something that we can do is we cannot border. Example one. And you can see that we already have a border with CIA says let alone We'll see if we can modify the borders of our table so they look very good but the don't I'm just giving you this is visual example That is how the tables are structure and we can continue Ajinca Few more paroles. No, I would suggest that your future is different. Throws with your own information. I'm just going toe this place g so you can see them here, Fisher. Example. So this is basically how your tables, you create the table, then you are. They behead any side the table to create your columns cannot is many of them everyone there some advanced things that you can go. For example, one table column found that don't columns and stuff like this. But don't worry about such things. We're going to learn them the next sections. So you cannot these many roses you want as well, and the challenge for this lesson is I want you to create a table, which is three columns again. Brand New Table. The first column should be your favorite food. The second column should be the main ingredients off that food, and the column should be the time to prepare that foot. And I want to talk around five and different rows, and you should be a good practice of the beginning. How you cannot tables. OK, guys, this is a bit short, unless in which is good, because you get a few longer ones. But anyway, I hope you enjoyed it and they care 14. Ordered Lists: hello and welcome in today's lesson. You're going to learn about ordered lists and let's begin by removing the table from the previous lesson. And when you find the title toe ordered on the list, save, refresh, perfect order, at least allow you to list some items in order. Okay, let me show you. Well, I mean, let's stand by creating oh, back and pressing tough. And this is our ordered list and inside this list when you to list our items and we create a list item by using the help I back like this. And this is your single list item. Any side list, for example, Able. This is fresh. You can see we have one dough able. Let's great. Okay, another list item. Let's go into finance. What effect? Let's create another wrong, maybe orange. These three will be enough for the example. So we create a Northern at least any scientist list. We had items, and the reason why it's called or dirty is because we have the numbers over here 123 and and this is the main difference Richie ordered list, which is basically the bullet point list, which we're going to talk about in the next video. It's that this is in order and you have several options. So there's a another tribute called type. And as you can see here, we have the option by default. The order is with numbers. 12345 Then we have the type A basically, who is going to be ordered alphabetically, ABC with capital letters You have the option off small letters, ABC. Small. You have also the option of a Roman numbers. So I kept the capital. I end this small fire, and if we fresh okay of the Roman numbers and the same thing goes with the small members and the last thing, actually. So by default, I think I mentioned it's typed one and also another not reviewed coat reversed and the reversed as you can imagine what it's doing. Kiss just reversing the numbers. It starts from the biggest on, so you cannot as minorities is your like like this, and it's going to work as expected Now, one thing that I would like to mention is that inside this list item, you cannot actually HTML elements. For example, you can other paragraph and that's something ever get it here also, This means that all default stylings of these elements are going to be applied. As you can see, by adding the paragraph would get this place between the first and the second element. And the reason is because the paragraph Yes, beauty in starting we cannot a triumph, for example. And also we need to modify this as you remember a trance dance for hating Kwan and we get the boat and strong text. Also, if you remember from the text formatting Vittorio, we cannot, for example, there for the leads. It means we're going to have a line flower. What are text? You can also make it boat be like this and you can go all kinds of stuff. For example, you might hear list off links. I'm lets up. Okay. Hey, like this, let's wrap it around the up four and then we can give it on h press do. It s go to the com and its chorus. Let's give it a thought of get underscored blank. Actually, it should get a Nazi blanking. If we're fresh, you can see our oppo turned into Lincoln. If you click, it will go to go. Go And this is how you can use order, at least. And now it's time for your challenge. I want you to create an order at least and list all your favorite actors and actresses. Okay. I hope you enjoy this lesson. Found it very careful. And they care. 15. Unordered Lists: hello and welcome in today's very, very short less. And I'm going to talk to you about the on order list and was the difference between the UN order nd ordered one. As you can see in the previous lesson, we discussed the order. At least now I'm going to modify this to on for dirt like this on. What I'm going to do is just I'm going to replace the oh l toe you l which stands for another that and which is going toe Japanese. But our numbers 1 to 12 are going to be replaced by bullet points. And that's it. This is the difference between the in order at least nd order and they work exactly the same. The only difference is the bullets in front or the numbers. As I mentioned, just this is going to be very short lesson, because there is not really much to cover. But anyway, I hope you finished your challenge for the order at least. And I want you to do the same with on order time. Can you convert order At least to a nor that? Okay, I hope you're enjoying this lesson, and I hope to see in the next time they care 16. Entities: hello and welcome in today's lesson, you're going to them about HTML. Entities and entities are like special characters that you can use in your HTML court. Now let's begin by removing the on order list from the previous lessons and updating our its general, I told Toe external entities, What if it so Let's refresh. Great. Now let's begin by showing you the first entity which it's like one of the most off when your start is the copyright on so you can create an inch to buy. I think you a character, then typing Copia and then closing with semi column. Okay, without be. And as you can see, our editor actually over the text and blow because it detected that it's valid entity any further fresh, you can see that the copyright symbol or get that I don't don't know, you would call it, but you cannot look more. For example, you cannot actually let's combine the previous lesson in tow. This lesson I want you to create another list with the single list item. You compose the video now and do it. Okay, you do manage. Okay, let me do it now as well. So we want to create a nor that list with the single oldest item like this. What they did to us. I pressed you, held up a lie that I went to base my code for the coffee and she and what I'm going to do something about a few more pissed items which will hold or which will contain more off the empties. Okay, you have a list of, let's say, for a fresh perfect the second into the language who sure use the they re just that threat markets also very well used in the filters off the websites. So again, you should time, I symbol. Then we can talk a e g on semicolon. As you can see that actually, there are a lot more. I make that a lot of entities, but I'm going to show you for the time being just the most commonly used. And the next one that I'm going to show you is great on them, G g Great. Then a semi column. And then you give less than Andi. I'm going to show you a trick with ease, As you can see this great of them and lets them now if you want to display HTML Coach in your weapons I mean not toe run it, but to display it, for example, If you want to display list item how you can do it, you cannot just type. I'm letting great this item and inside you cannot just type the court and expected to work . It's not going toe, But I think that you might want to use this to use Jeez, greater than and less than so. First we can say we could get less them. I less then then you can type as I the American type. Greater than so. What is going to happen is, as you can see, we have the first part of our court. Now, if you just take this, I'm place it. You can see it converts directly toe html code. And this is how it can trick your browser to display html code. And let's finish it, actually, example this item and then we can finish again by lodging Liz, then slash Great of them. Perfect. And this is fully working list item, Actually, not really. Because I think you should be all right. OK, now it's fully working. Placed item. Okay, guys, this basic example. Cocaine use html and she's now I'm going to show you a list of it. She came out and keys from W three schools because that is this actually future. I mean, there are a lot. These are the most used from non breaking, quite space ampersand. Andi, it's on. Okay, I hope you enjoy this lesson and they care. 17. Forms and Inputs: hello and welcome. In today's lesson, you're going to learn about forms and imports first in class, elite the list from the previous lesson and modify our title to a gym. No forms and safe refresh. Perfect. Now they're different. That's off inputs. And the first type I'm going to show you just a normal text field. Such is that you're entering your user name, for example. Here, you know something. So we created input by actually I think the input and pressing this is going to create our input. Now, by default, the types extras you can see it was filled by our editor and if I just say fairly fresh, we can't just on the empty place where we can type inside now there are a lot of optional attributes that we cannot in orderto make this more functional. For example, what we can do this week, another place for that Now, by default, as you can see, just tempted to use it doesn't know what to do. It is input. So you cannot a placeholder which is going to be, for example, and their user name. And if we save parrotfish, you can see that in a bit doot fixed. Enter user there. And once the user starts, five mistakes disappears. What effect now? Besides the user name, you can set the value. For example, by default, you might have. Okay, let's remove Placeholder can't like follow Example at e mailed off. For example, any foot of fresh this text is going to be future inside the form by default. But inside the input Another thing that you might want art It's unnamed. The field, for example, User name and the nave. You'd helps you once, Later on. When we built the form and were submitted, you can identify which future is by the name and you should name them. According. Okay, let's go on to the next type, which is number now. This is going to be tired. Extent, I'm going to just that fixed over here fixed. Then I'm going rather But a client. What is going to do is going toe push everything that it's after the break line to the next plan, then went up number. I'm going to create the input off type number, and if I save it at a fresh perfect now, what you can see there is a difference this on It's empty. And this one it Yes, kind off switches where you can click in it actually increments and documents the current number. And this allows only numbers. Now, if I start backing numbers, it saves them. If these are start tracing, for example, a D or something like this, it does not get accepted. There is, like a validation toe that field and just also supports everything. For his up will consider the follow up to 80 any free, safe and fresh perfect together. Follow Katie that the mixed night that I'm going to show you is the big books. So again it took it and import with type off Clearly checkbooks. And if we safe and a fresh we get this smoking, which are yours, I can click on and off. Now let's just name it or to say checkbooks like this and also you might choose by default is you can set the value of a number type in the text type. You can also said, if by default you want just to be checked and you can also bite, adding the checked attribute to our checkbooks and if we save an inference, you can see it was checked by default. Now, the next time that I'm going to show you is the radio bottom. This that you and get a new put with the radio fresh would get radio over here now just a single radio button. It doesn't really do much more than one. It's perfectly fine because what you want to do is you want to. You want your users to be able to switch between them. Basically, it's a mandatory choice. This is the think Now check boxes is optional. They want to participate. If not, don't click it with radio button sits like a mandatory. Your user must choose wrong, because by default, when you have, you can't connect them. I'm going to show you how you can do that, because the doorman the user can click both of them in. Both are checked in. They don't really work properly. But if you give them a name off radio, what is Apple name? Did you? They're going to be bound by this name, and your browser will create some kind of nice functionality where only one can be selected at the time. So if we could just run, you can see how it's on selected now. If I add more, you cannot. His minions, like your user, must or can choose just single option now. Also, what you can do is you cannot have checked attributes. So when they load, the murals are loads the page the first point it selected. And he must either choose the first round because it's selected by default or some other thing, but a choices monetary. It's not like check boxes. And the next time that I'm going to show you, the next input type is the bottle, because we need to submit our form somehow, and you can type brake line first. Their bottom. Yes, there is a button back is no. I'm going to show you both. The first steam put either tied bottom like this, and you must give it a value because that let me show it was the deal without it just just rectangle. But you could give it a follow. For example, submit. You get the text from the Value Insight, and when the user clicks, it should submit the for no. You also keep the fact submit, which is the identical ways bottom. Basically both of the same. But they have different functionalities. Okay, you can see they're both identical. But when we create the form, the summit is going to trigger the form and it's gonna send it and just a tight button. It's not going to do anything. Well, you have to attach it to some other kind of functionality. And then there is the third way to create a bottom, which is just by tapping a button. And they're creating, for example, submit inside any for a fresh UK CDs. Three boaters are identical, but they do work differently. This submit is going for some submitted form and the buttons gather. Gather buttons are not going to do anything to the form by themselves. Maybe you are some buttons because you want to create some extra functionality. And these are our major types. Okay, there is one more. Actually. Let me show you the text area very fast. Thanks. Okay. Next, Any further fresh. This is our text area. Basically, this import feuds are for a single line of text. Now you can enter a lot, and as you can see, it moves and fights at the back. But if you, for example, want to create a common section or where users skin and put a lot of information. Fixed area should be your choice and also you get a scroll here. So I kept much larger view. Also, you can in a size it and that's why I support extended because it's large and no So our editor added some fueled by default name I. D Columns Rose and someone now for idea. I'm going to talk in the next section where we select elements with CSS. So disregarded the moment columns Which shows you how many columns like this horizontally it should have. You cannot you can make them for example. Then, um and you can see how the form change and also those by the 40 for example, you might want to ask 50. It doesn't really matter. It's up to you and user Oh, optional. I mean, you don't need them. Just our browser are our editor added them breaking for because they're just the standard Vallas. Now, if we remove them, you can see how it's like twice the normal import size and also you can what a size it. Okay, perfect. Now the video is getting longer, but just hold with me for a few more minutes because now we're going to get an actual form . The forum is going to before Logan. We're going to hear name, password and something like this. So let's create the form by typing deform that. So, as you can see, we get a new action, a trigger. And all this action attribute is if we specify where this form go when it's submitted now. Usually we were going to have another webpage, which is going to be a for example, Oh Beach. We were going to lump PHP. It's a second language and don't worry about it that we're going to process the for. Now, let's start creating the form because this video is getting very long. So first thing for us is let's safe and finish. Then we're going to create our user name input inside of paragraph. Let's type user name this on in foot by text place for the using. All right, this. Then they are going toe copy this whole thing Another bomb to say password. Actually, I forgot to show you, but there is another type which is called Password City. Me and you're going to see now how the password field works. Let me actually say And it's fresh the password when you start entering inside it heights the violence with small bullets. As against you. I'm pretty sure you have seen it everywhere, because no Logan for this place. Blame Brussels. Ben, I want to say that's great. Another paragraph. Mm. Remember me? Remember? Remember, may I want to add a nimble moved back checkbooks So the user can select if he should be remembered like its slogan detail circuit as, like have toe at his credentials every time. And then we just need a summit bottom. This is your basic basic user name are looking for when you input submit and I Logan. Now, if we save and finish and we foot like Logan, we're going to go toe Logan PHP. And we're going nowhere because we don't get such fire. Yeah, to disrupt like this, this is the same person for click is going to just selfish or effect. So this is your basic Logan form and the challenge for you Now it's I wanted to create a brand new 44 registrations. And here you can go wild because you can use as many inputs as you like. For example, you might ask for user for a first name, last name city country from where they come from for age, height, weight, the sky's the limit. I mean, you can use, for example, 15. Put if you want, and the more you use, the better practice you get. So this will be a great exercise for you to get more familiar with him. Put feuds on It's awesome that you state through the whole the tortilla with. So now we should go to complete the challenge to create your registration for Andi. I hope you really enjoy this lesson. As I enjoyed making it, they care. 18. IFrames: hello and welcome in this lesson. You're going to learn how you can embed other websites in your Web page using my friends. And let's begin now by removing the former Let's remove the form from the biggest lesson and also modified the I don't it's, you know, perfect. As you can see, it's already suggested by our editor, but we're going to create one over here in the body. So let's just like my frame. So the first start tribute that we need to watch is the source wise, the same deal with HLF four links and the source for images. This will point to which website or what page is going to be loaded inside your site or webpage. So let's go toe wiki media. I don't know. Never mind. Let's copy the Wikipedia you are. Let's place it inside our source attribute between the quotes and if we save any fresh for lot will get Wikipedia. Now what you can do is to change the frame border. So as you can see over here to supply the border, you anyway, the other option of attributes that you can give to the I frame is with and height you can see wheat. That's 8006 those and this is going to stretch 1000 pictures now keep in mind this is not like images where they the height and the width goes accordingly. For example, you can set just do it and the high just burns to be. It's going toe. Calculate automatically for the vital region. You should do them many or so, for example, we could say 500 to it and 500 height in order to look like square unless they're fresh. What effect? That's go English. And here you could browse. Basically, it's a fully working website inside your webpage, and you can have much Porges I friends. And they're very and their most commonly used in orderto embed either YouTube videos or some websites widgets because there were websites which offer, let's say, the temperature the the time. For example, you can member the clock. Some kind of calmed down or stopwatch Anyway, this is Carrie cocaine. Use my friends. Let's actually embed it on mute video, which would say, Hm, that's a something. He's there. Let's go with the first video that comes. I gather you. Let's go here. Okay, Now there is a link with YouTube that you cannot just place this inside the source because some websites have restrictions. Now, if we're fresh, you can see you toe refuse to connect. And the reason is because you talk or some other website. They have special you are else for and meeting so you can keep share and you can click on em but and actually can copy the whole thing because you can see it's already in my frames port. So basically you took gives you everything that you need. You can see I friend so let's remove our articulated. Also you can see there is with any height set as though And if we're a fresh, we can see the video and this is from beautiful. What they mean is that some websites have restrictions and the reason is because we can not just I mean you. The website owner does not allow his website to be embedded. For example, you might want is known your website not to be embedded in other webpages. So you can said these configurations. Okay, Anyway, this is very fast introduction toe I friends I mean, there is not really much to say about them. Besides, you can also run different with Burgess. You can you can go many advanced things. But this is the most basic user. True, true. Get You are a long way. And now it's I am for your challenge. And I want you to m bit five pages. I want to remember it to YouTube videos and three different webpages. For example, you can truth one Wikipedia page and some of your other favorite websites. Okay, I hope you enjoy this, s, um and they kept 19. HTML Project Part 1: Hello and welcome. Today is the day when we're going to put everything that we learned so far in tow practice , and we're going to build a new, also fully working quite page. As you can see, I prepared a webpage. Listen over you in the topic off Work of the Rings. There are some three movies for Disliked page. I used pretty much everything that we've learned so far in the in this HTML section. I used headings. I use paragraphs, lists, images, Abel's links next four month thing. I frames almost everything. I think the only thing that we haven't just yet our inputs, but don't worry about them. We're going to use Langil them, so it's totally cool. But this pretty much it's fully working webpage. It's not looking very sharp because you don't have any stylings yet, But the components from this work page are pretty much the building blocks off every webpage that you are using every website. They're just made to look pretty, and we're going to make our webpages britches off in the next section. Okay, now we can begin by first launching our visuals. Did you go get a launch? It this is my HTML five project. I'm going to create a new file so we can start completely from scratch. I'm going toe go to file. Serious. I'm going to call it up. I'm going to save it in the next up, I guess. Safe. And here is my file. So it can begin with brand new file. So go ahead and community html like this, then we should get Do you remember what the hit section like this? And then we should create the body like this. So in the hit sectional telegram to do is actually first, let's launch and empty what page I'm going to do. Some goingto get my project over here on the sides. Articulate is our reference, but don't worry about it. We don't really need it. I mean, I'm going to walk through the creation of the whole project's off, don't I? Now in the kids section. What? I'm going to do it. So I'm going to create a title. I'm going to send the title toe, Actually not. Let's first load a lot of the things we can do, Lord all dirty things. Then you should open the Wikipedia and now I'm going toe cope. In this first part, I'm going to put in the title. I'm going toe press control. And as to save it, I'm going to go to the webpage. The fresh. Okay, I can confirm that everything is working now that we're getting the changes that they're making our html page. Perfect. Now, the next thing that I'm going to do some going to create a paragraph in the actually no. First, the first thing is going to be on a Tron, which is going to care the same content Is the title a little Turing's film series? Perfect. Afterwards, let's go up getting creator paragraph that I'm going to place this next. I we don't really need toe copy the whole text. I mean, you just for example, purposes. Okay, Maybe I can go play with mortar. Maybe. Maybe. Maybe. Okay, no, that much. Okay, I'm going to compel of it. Places like this saved Refresh our character of the four text. The next thing that we're going to do it. I want to go out a list on order it list with the three movies. So what I'm going to do is I'm goingto go ahead. Thank you. It's cool. Well, I'm going to call it movies and then underneath I'm going to create our order, at least with the first list item that is going to be the first movie. Let's just save refresh, but a quick if our first dot, which is the least item, then what I'm going to do is I'm going to create a table and inside the stable, I want to create a table room and the first part of in the table are always going to be age three, which is going to be accident. The first part in that they borrow should be table data and inside the first table date or the first problem is going to the age three, which is going to quote the Fellowship of the Ring. You can copy it from here. Then we have fine I get off, which is going to call it a small description of the movie. Let's save refresh what effect? And now on the site here, basically, the second table data is going to be the image. I don't know. Open the image like this. Go here in the Wikipedia page for the movie and copy image address then we could create an image. Stock plays the others inside the source attributes and I would like to give it the height . I think off hundreds, quite 200 pictures. And if I save, go to my webpage refresh. But we have it here. Okay? Mega gave it lower height, but it's OK. I mean, the think is that the structure is the same and we've used tables to the left Split our contention toe columns. Perfect. Now let's continue with the next time the next one. So we should do pretty much the same thing, so we can actually copy the whole from the list Item opening. Talk to the list item closing up and we can go on Exline and we can taste it. And inside here. What? You want to do it? You want to replace the name with the two hours this and then also place a small description of the movie inside of a bottle? What effect? And then I want also at the correct image. So what? They're going to do its instead of fellowship with their involvement right from tops. And then just go ahead. Click on the first link in the first image, but I click on the image copy of each other is lets go of it and just place it. And you for goto our work. Bitch over here and we're fresh. We'll get our image here. Perfect. Now we should do the same thing for the little movie again. Capitalist item. Go to the next line, basted by control with you. Go back to the Wikipedia page. Okay? No return of the king and the short discussion. You can copy a lot or as much as you like. I mean, it's the same year. Oh, it's for demonstration purposes. Then go ahead, toe. We'll go images the lead hours and type the stolen for looking and then go get with the first image. And again, I think. Okay, right. Click Copia Metropolis. And that just at a place just you want it Control of it, based it. So again, I mean, saved the page. Go again. Toe the project. A jammer refresh on a perfect We save it over here. Now, let just remove this extra windows because it's getting confusing. So the next thing what you should do is up soundtrack station. Okay, so just under neither I'm or that at least actually sisters during the beginning. What? I'm going through this and going past our comments. Let's not forget to add comment because otherwise we're going toe. Forget Now, Over here we can create main description, for example, every game press, control slash So I can create it. Then looking, we could populist thing go underneath our paragraph and based main description. And and then you could create movies like this and then go underneath our table just underneath our on order at least, and I movies and and like, this is very easy to navigate. Which part starts and which part ends? So here were our soundtrack start making that sound sound. Perhaps we can comment it, and then we could continue it, creating our age toe that's that song sound drugs. And then we'll do here here. Well, we have a table and which would fill it with data this able. Actually, it's here from the Wiki p here, which it just expanded the bid because Okay, well, what a day. I mean, we can create this table is no, but it's gonna take a long time, and it's basically the same thing. I mean you care for roast? You have a book headings and so on, even if it's with 50 roses, the same deal with Retreat five, for example. Now in the beginning, it's very good practice to go for the longer practice of the bigger challenge. So I would advise it, actually, if you have the time and you're willing to do the big table, so anyway, let's continue so we can create the A boat back inside the table. We should create A to create the table here and inside the table kit. We should have Comic Off's 12345 Let's get the H five th toxin it one it for five. The first manage caused toe. Go ahead and type in the next time. Let's go on opiate us. At least it I mean you can type. It's not that long, but the next one it's lend next. One, I think, was a poser on the next Fun is really able and then after 1/2 hour main structure, actually, we can save go to our Web page refresh so I can confirm that everything is here and you can start feeling cower able. Just capitalize this so underneath our table, OK, we can create our for stable growth and inside our table so we can stop touching cable data . So again, we need five of these round toe trip for Feist. So the 1st 1 is going to be our title. And as you can see, it's actually in style in italics. So what? We can create its type I this internal top, any site we can place our soundtrack tighter. But also, if you see that when we're over, I mean, it's a link. So we should add a link is Oh, so let's create an attack by typing a up and inside our attack were went to place are fixed . So we should hear something like this. And inside the Asian of what We can do it right? Click what? We link others and we can place it well, we're here. So if we go to our web page fresh or but you can see that we have our link as low, then you have the U. S. At least there it, which is 20 November. Let's go fill it in. They were here to lend then that let's feel it here that was just the label. Let's go to our Web page, the fresh to confirm that everything is here. Perfect. The next thing that we need to what is the second table? Paro. But actually what? I'm going to this. I'm going to copy this 14 because almost the same structure I'm going to fix the indentation. They I'm going toe open this text, so be like Okay, copy this text. I'm going to update it at a place. And then also, I'm going to copy link address so I can update the HF iso. So our links are pointing to the correct address. Then I'm going to update the U. S and the status so and then I'm going toe update the land so and so 46 setting. OK, but as you can see at the moment of composer, it's the same deal with the Otero. So instead of propping or having them again or I'm going to show you, is how you can spunk just throw toe our different roles. But this I'm going to do it in a few minutes, I'm going to just remove the last toe able data and then I'm going to copy this thing for the time, hoping for second time so I can feel the third row. Oh, yeah, Once we should hope it from here. The return of the king. Then I'm going toe copy, right click and copy link address so I can update the HF is Whoa, next, go ahead and update released it, which is this one, and the Times Challenge toe five. Let's figure that whitespace healthcare it's safe. Refreshing to see what we have here. Okay, now let's first give our table from border so I can't give a stop bit better. Okay, now here the border. So what's left? We need to Well, distinct in the middle. I just column this column shirts from several roles, and you can do so by going to the table, The table data, first table data where we have our hore sharp and you can die roll spun and you can type three. And the reason is so the setting says that this row is going to spawn Rose on Just go get and copied with the next done. And if we're fresh, you can seek out our whole shore, went up the middle and is the same year over here and also these are lynxes were also we should create the links. How could could do is just for logistics. But it's in your line at a price up inside the fixed, just based it here on go ahead potpie, deline covers but effect. And then the same deal here, four billion others on just face. Look, text inside the anchor that OK, Judy was getting very, very long is the longest so far. But since it's our project, I think it's OK. Okay, Perfect. And what's left. Okay, have toe images, more on the tremors. Okay, lets go. Get him Does that. Now I'm going toe comment out again our sound tracks. Or actually I can cut this video here because it's getting 20 minutes long carats. Anyway, I'm going to cut the video here and we're going to continue in a second video 20. HTML Project part 2: hello and welcome toe, part two off our edged in a project. So what we're going to do now is we're goingto close our soundtrack section by adding comment some sound drug and from indistinct. And then we need give me just so images. Some interesting because it's like the Arctic off the images and then we need to cut. It's two images and inside here we're just going to place toe images. I mean, noting clearly complicated. What I'm going to do is I'm going to go and I the rings as an seeing Kathy officials with the Internet. So give me a chance toe. Fix it. I'm coming in 30 seconds. OK, we're back in the game. Let's pick a fresh for effected shirking now. Now go ahead and click on Images alleges choosing. Imogen just copied, for example, just on. And if you right click open in each other's, then go down here it image that praise the others and just give it the height off. I don't know 300 for example, because I mean the images larger is going to take a look from this face. You can truth your high according to your screen size monitor their okay, I'm gonna close this and then I'm going to open this link, for example. I'm going to go pretty much others again. I'm going toe based it here again. That said, the height 300. And then I will open my webpage. I'm going to refresh it. And I have both images. Perfect. I mean, they're different images that waas I used here, but don't worry about it. In the last section that we need to feel is the trailers. As you can see, we have a list with my friends as though so we can practice mediating them. I'm going out a few more lines. I'm going to let images just and and then trailers, but he loves okay that I need h two trailers. Next go hit and at on order, at least. And then the first list item is going to be It's going to get HD, which is going to before the name of the movie. And then we need the same one as though, so I'm just going to copy it from here. It's through the fellowship during, and then I need the fellowship of bidding three a lot videos. You took. I mean, just Was it okay? Sure. Where was the show? Okay, we share em. But so pdf from cold and just based over here the next. Actually. Let's save and go here to check if everything is working correctly. What? Then? I'm going to create a new list item another aged three back. So we cannot The second movie, the towers. And then we need what the two towers they want is a So I just thought $2.3 about Yes, it is the 1st 1 to come up. Just click share. And but And copy the I frame. This is here, and I'm pretty sure and just need to repeat the step again when it h three we can copy from here that turnover king. And then we just need talk the tailor for the king. That a lot. Most of you share em, but copy the i frame based Go to our web page. Had a fresh Okay, perfect. Well, with these guys, I'm going to cut the project here now can expand it. There's much as relaxed. For example, is a mentioned earlier you can create, but you can create each of juice off these elements. I mean, the Wikipedia is not very famous for its stylings. So pretty much you can recreate everything. These are lists. You get the fight. Those who have photographs, you have tables. I mean, if you really want the challenge, you can go ahead and create the stable. It's lots is gonna pick you sometime, but you're going to be a table master afterwards. Going to be really, really cool. Okay, I'm going toe fit the project as I mentioned. And I'm going to give you challenge to create similar webpage for a project or for our hoping that excited. For example, you like biology or music or from musician. Even if you want. For your favorite actor, you can create similar thing for your favorite actors. Just you need to practice. And once your manager project, I really want to see it So you can contact me and you can send me up. Project. I would like to give you feedback on it. Okay. I hope this project was very careful. I hope you enjoyed it. See you in the next section where we're going to limit how we can make our web pages look pretty. They get 21. CSS Section Overview: Hello and welcome to the second section of discourse. I hope you enjoyed learning about HTML, but now it's time to make our Web pages look pretty using CSS or risk aging star. She's in the following class. Since you're going to learn how to modify the size, the position, the color and many other properties of HTML elements, you will also be able to create any kind of styling sand layers. As always. If you have any questions, will not his state to contact me? Ghoula. 22. Styling of HTML Element: Hello and welcome. This is the first Victoria where we'll begin learning how again, style our elements and make them look pretty. Go ahead and larger visuals to your cold. And then let's create a new file. Speak over here, starting your file. Those the welcome screen and goto file service. You know that there it's the same thing. Just name it is your like I'm going to name it India's dote. It's Jim O afterwards. So the fire should the euro case here. So now the first challenge for you. I want you to create properties. General structure. Go ahead. Did you manage? I hope you did. Because we created several times already. So you should be very, very familiar with it. Okay, let's continue it. It's gem. Oh, yes. I renewed. Hit less indented properly, and then you need for you. All right, now I'm going to other Righto. She's going to be how to style. Um, Element, Let's save less. Open it in our browser. Okay? What effect? You can see that I So let me just thinks that layout. Oh, perfect. So now let's create a part enough. And let's call it actually. Okay. And let's go to them. This is simple. Sent us. See? Okay. Perfect uses. Simple sentence. That safe refresh. Great. Now, if you want to change the color of that sentence, for example, because by default, as you can see, it's blank black on white background. What? We can do it. Three controls and you color. So there are a few ways that you can. I owe your element. I'm going to show you from the easiest and not very correct way toe the better. So the first way that you can stop that element is just other bit of space over here between the A right angle bracket and start typing style as you can see our browser suggesting it immediately. So this is a not rebuild. So once you have style, we give equals and quote. And inside the quartz, we're going to that color so you can see car matings are editors suggesting and after with that color with type columns and then we choose our color. So if yes, if I type the counts again, we get a recommendation off colors. As you can see how many death look. So if we choose, for example red, save it finish and to get our centers in the red. But if it now, what else you can go as you can, For example, purple. This and also you can change different stylings. You can change the color, but you can change many, many things from the stylings, and you can change them or out several by, I think. Semi column in the end and then adding the new styling. But we're going toe talk about this inner next lessons if we're fresh, our sentences in purple and the other way that it's more correct to style. It is that if you remember from the text area when we created one, there was not a bit cold idea like identification number you can give. I did toe on Element in each element can keep a unique idea. Basically, you can say, for example, this is thank you. And what this idea title This is going to apply only for this element, and then if you want to style this particular element, we can go in the head section. We can make make a bit of space over here, and you can type style and then press enter or up, and we give What do you get yet? Opening and closing taco style? Any insight we can start writing CSS. So here it was caught in lie CSS, where you write it directly into the element. But it's not very practical, is very well. It's very bad practice because once you hear 1000 elements and if you begin urging styling to each of the elements on its own, it's going to be crazy, crazy, difficult to maintain. So over here what you can do is you can type harsh stuff like this. We can that tyto. And then you can open curly brackets like this and you can color problems blue, for example, and then close it with Sam. Michael. So what's happening here? Any foot of fresh, we get our text him blow. So this is Qari Select by idea. This is called selecting on Element. So if you given elemental idea and then you that harsh stock I told for JG and then you give the color between curly brackets. Now let's create another, but enough which is going to have the idea off. I don't so we could it hashtag I know do 70 brackets and inside the curly brackets. Programs that color and the color should be green. Knighting agree. Yo, let's save refresh, but okay, it's very, very difficult, actually, to see. So let's go just normal when you're low green. Okay, so this is car guys who can style elements. I'm going to cut the video here because it's getting longer and we should continue it. Another topic. But for your challenges, I want you to create five different paragraphs, and I want you to give each paragraph on I g and to style it with different color. Can you do that? I'm sure you can get. I hope you enjoy this lesson and take care. 23. Group styling by tag and class: Hello and welcome in this lesson, you're going to learn how you can style many elements by back and by class. So what are these and why you need to know these things? Well, at the moment we give paragraphs, but if we have many it and you want to style apologies, I'm going to go around and type I d to each of them. Not really. What you can go is let me show you. Let's create. Actually, let's remove the idea from the first time. That's it. A move this Let's move. Should the court from the previous s and an update our title How to start a new element, but done and close Well, so at the moment we have a simple what I'm gonna If I copy it like this and then I add a little more. Okay, we have made So he fired a fresh We get all of them black in color. Now if you want to stop everybody Griffin, our webpage. What we can do is we get selected and we can select by just typing the attack. Identify. So for paragraph in speed Turk and type B open curly brackets This and the inside. You get that cooler, for example on it. And what is going to happen is that this styling is going to be applied toe every single paragraph in your webpage. And if I refresh the page, we'll get our sentences. Orange or maybe group are great. Let's you and I give them great. So this is Cairo can apply this styling toe every single barrier. Now, here. Obviously you can choose some other kind off element. For example, a for Anca attack. Actually, let's create ailing. Hey, I'm going to give any h it up in the morning just going simple link. And I'm going to give the styling off there in case you can see the moment The link. It's good day. I'm going to change your debt. I am going to give us styling toe the paragraphs off Go. So you see the difference. Okay, our link is red on, our sentences are blue and this is just by selecting there. And as I mentioned again, this is going to be applied to every single element that you select and change their styling. Okay, now what's happening if you don't want to change every single paragraph to be blue. What you can do is other class and classes identify that you give. It is another good just of the bit off spaces. You can take a class and then you can say, for example, blue or blue. That's far graphs. Okay, Grafts. Okay, it's correct. So if we're out this class so let's say half of juice paragraphs. What do happen is that we can select them just by this class. And for the rest of the paragraphs, we can say, for example, right at eight. Backups GOP. So anyway, how you can select by class. So we learned that by I d you type crash back this you type crash back and then the idea So for a class is that you type dot and then the class name, for example Blue does I wanna go And then the color is blue And for read paragraphs, I'm just going toe copious team And I couldn't I right and then change the color toe credit ? Yes. So if I said let minimum just the idea and you could save and fresh What will happen is okay. I spelled it wrong. So save a fresh or effect And now what is happening is that we have half of the paragraphs are blue and half of them are threat. So this is how you cannot classes. And for example, in the moment you give this class to partner. But you can also give it to living here. So let me creatively. Actually, let me show you very fast of gains. Simple link, do you think? And we can give it a class off asparagus and the link is going to be red underneath for effect. Any forget glue. But I get us. Our ling becomes blow. So by class, you're not bound toe the talk so you can hear different elements by their class and no, so you cannot multiple classes you just that space and you out another. But at the moment, this is going to be conflicting because we know only can change the color and you cannot up two colors simultaneously. Well, you can, but that's different topic. So now it's time for your challenge. I want you to create much po paragraphs, links, lists and so on. And I want to talk different classes. At least five classes and apply different color stood so it can get a bit of practice with glasses. OK, I'm sure you do the task. It's very here for toe. Get a few Howdy. Stinks work. I hope you enjoy. Just listen and take care. 24. Background color: hello and welcome. And in this video you're going to learn how you can change the backgrounds off different HTML elements. It's very, very easy. So let's go. Right in first is go ahead and remove decode from the previous lesson. We're going to start brand new, I think. Let's say for a fresh okay. And let's not forget toe update how to change how changed the buck? Don't and it fresh mochi our thank you. It's updated now. Water going to this, You're going to create several different elements. For example, paragraph simple, fixed a few in your lives. Let's create input is going to be with that next. Next It created a text. Stadio this And what those needs? Maybe a bottle? No. Okay, let's live like this. If you save very fresh would give our elements Here. You can see there is some crazy lay out. But don't worry about this now If we want to change in the background, for example, that are gonna look in just that you because we have just a single paragraphs Now, obviously when you care Ah, lot of paragraphs You either selected by a G or by class or something years. But at the moment for demonstration purposes, it's good enough they don't want to type back ground dash cool. And then again, we just choose the color. Maybe we want to say, Corn flour. Maybe we saved and a fresh You can see the big round off our I became corn flour of law. Now let's do the same thing with the input. This type input fairly brackets big, big go on call on on may be, are both. Also, don't forget the semi column. So if we save, refresh and we get our fancy aqua background color, and then let's do the same thing with next a take stadia, curly brackets. Big round Paula on what should be the sun. Maybe here's something and cynical on a fresh bluffing, and this is how guys you can change a big round off many HTML elements. You just select them and change the property off background, and now it's there for a challenge. What they want you to do, I said, I want you to create two paragraphs, two inputs and toe text areas. I want to give each of them different i d. And to set them with different background colors, I'm sure. Again, I hope you enjoy this. Listen And they kept 25. Images as background: Hello and welcome in this lesson, you're going to learn how you can use images is big rounds. Now we saw how we can use different colors. But what if you want some nice school in which, instead of this big red color So let's delete are court from the biggest lesson and I'm date our I know how to change the biotin l a man how to use, um image s big around over Netivot. Okay, Perfect. Now for this, I'm going to create a special element which I don't think I've shown you yet. It's good gift and you stands for division now did by itself. It doesn't do anything. So if I refresh, it's nothing, but it helps you. You can apply all kind off styling street and you can basically divide your HTML structure . For example, you might feel different on important, different something girls. It's basically a division, but also we can give to just give high conduit. And with them we can do stylings like I think images and so So what we can do is you can select it over here just by tapping gift fairly brackets. Let's give it the wit that's 100 big cells. This is how you give excels on this is gonna give height 100 resource No need to specify the X for pictures because there are several different valueless. How you can specify, for example, could be percentage. It could be other things. So don't forget the pictures in the back. Now if it a fresh we cannot see really anything because by default it's transparent. Now we can give a color big around color background color, toe red and you should see it on our screen. Yes, but effect. So our defense over here now what you want to is toe up images bag out. So let's actually increase the size toe 500 by 500. I removed big up color and start writing background image. So once we attacked bigger image, you see that we get several things are several suggested options. Now we're not going to really go with. The rest are just going to explore the your elf. So the euro option works the same s source in the image element inside the body. Basically what you tell the browser from where to get that image. So let's type nature single go. Let's go Toe images, Select this song. Oh, yeah, This is color. Click on it so it can go to the page and then grow up the you know, right Click Opie image others. And what you want to do is just place the address inside these brackets. I'm just up, said Michael. So what will happen is one with a fresh our page. We get this image as background to the element so we don't given image element over here. It's his background to the element. Now, what will happen is that when you start changing the within the hate of your element, for example, you you might make it. That's it. 1000 pixels hide in the 1000 pictures with. Now you need to pay attention because, as you can see that we hear the image twice, and the reason is because damage is smaller than the size of your element. Also, here it gets repeated in order to fuel the size of your element. And there several here poor settings that you can use. For example, there is a setting called big round repeat which allow you to set it be terrific. Repeat eggs. Repeat. Why so waste. You can choose everything and you can set. This is going to be repeating on the left, left, right or the X axis or the y axis. You can set everything by so the most common uses. No, repeat the fresh to okay. As you can see, our background is now no, not repeating, but also it's going to its maximum size, and it's the rest. It's blank. Now, there other helper options, such as big ground size. So what you can do is you can tack 100% by 100% and this is going to stage the image on the X axis by 100% and on the Y axis. And the result is going to be large image, which is going to fuel. Oh, you're elements now. It doesn't really look that bad. I mean the image. It's rich in large, but this is how you can modify almost every single aspect on your element and stylings. For example, you might want toe changed to 50% and it's going to be sharing your squad. Okay, let's actually removed usedto marriage is our image size toe. 500 pictures, by fact, 100 pictures. This is the size off the Jif, which is the container off this image you get a So this is how your Kenya's image from the Internet. But you also can use image from your local machine. So what I'm going to do, so I'm going to go to the webpage. Right leg save image s. I'm gonna save it on my deck. Stop. Okay, then, which is here? I'm going toe. Alrighty, Properties. And I want Oh, okay. J pic file. I'm going to copy the name. And inside of you, everyone worked with the place. Do you know, with the name on the image like this? And if I save it and it up here, go to my Web page and fresh, it's still here. And the reason is because it works the same way as source on and all kind off things that we worked with. Basically, if you give on https, you are always going to go and grab it from the Internet. Otherwise is going to search in your local machine in your directory with the current file as you Yeah. OK, guys. Now, for your challenge, I want to toe create five gifts each of the juice with different dimensions. Different within height and different image. Some of them with local image basically loaded like this. A song with images from the Internet of your choice. Okay, I hope you enjoy. Just listen and take care. 26. Borders: hello and welcome. Today you're going to learn how you can work and modify you're elements borders. So let's go hit and actually just remove the image over here on those update. Our title, you see, s is Borders safe. Refresh. Perfect. And the reason is because you are actually going to be using exactly give with high. We can just work with that, are going to set now the borders over this def, so you can see how it goes. First thing first, let's other border. And how do you are the border? Well, you start typing border and you get it suggested by your editor after the border, Do you need to set the wit in pixels, for example? We need one picks up. Then you need to say what kind of border it is because because you have several options such as solid, which is the most commonly used. Then you give dot it I'm going to show you the difference. And the third thing that you need to choose is the color, for example. Right. So if we refresh now, the page safe and a fresh they see the border perfect. Now you can modify the drug use things for that one. I want the border to be tickled. So I make its two pixels. You can make it, I think, then picks us. No, to be like huge, huge board that I I don't think you ever use its border. But if you find some kind off usage, I mean you can't set it to 10 pictures anyway. You hear different. That's a border for example dot it. Okay, let's forgo it, don't it? Then you have doubled and give many, many kinds. You see the dot it It's like a dog. It looks like who card? Maybe because double, that's a for fresh. And this is how you can set the different kind of borders. If you want to find more, you can check in. Go, go. I mean, there are many kinds what I want to show you. It's how now you can modify different apart from the border, for example, you can't the ability to set just a single border. What I mean is that you might want to set only the left border, and the rest should be gone. So what you can do is all right, born under all right and then the same thing. One pig So solid, let's say And if we say very fresh, we get on Lee our and I bought that. It's it would be so perfect. Then you might want to say you want only border voting. And then, actually, as you can see from our editor Botham, there are a lot of different styles for this party. For each particular border, you can change the color. You can change that ages. I'm going to show you what these three guesses exactly are doing. But you can change a lot of things for the bottom. We want excels. Let's say, don't it and look a fresh So you see that you can have each of your borders in different stylings and you can modify that. So what border Radius is are doing is basically it's the sharpness of your angle. So if I go like this so we can see it or hear, she let me reduce the pixels with 200 by 200 who don't need it. That lunch, say, for a fresh perfect. And if we go, you can see how sharp the border edge is like this Now, the border radius that stated border bottom. We need the right age years, let's say five pixels and this is going too smooth. The Mourner by five p Selves No si. This is how the border became smooth by five picks us. We can't even go for them. Let's say 10 pictures safe, refresh and it goes even more smarter. And actually, if you this go to 100%. Okay, perfect. And this kind off settings and configuration and stylings actually could be applied to each of your border so I can make them look as your heart desires. Also, let me show you cool trick. I'm going, Toe said. The whole border off big cells solid it. I'm going toe set the border majors one of that ages. So just to mention as you have your settings for a particular side, you also get the main border. Basically, this is going to be applied toe each of the four borders. We can save border radius 50%. We need Sam McCall. If I refresh, you can see our Jim became a cynical, pretty cool right. And this is Cowgirls. You can modify and start your element borders, and now it's time for your challenge. And you should already here from the screen your requirements for the challenge. Okay, I hope. Enjoy the listen and take care. 27. Margins: hello and welcome. And in today's lesson, you're going to learn how you can modify and control the margin of your elements. Or, in other words, how to modify the space around your HTML elements. And let's go ahead and modify our title. Tosi, ASUs Margin. And also I'm going to do this. Actually, did you that we created for the previous lesson with the borders because would be sufficient example similar to the borders, you can either modify the margin around each individual side or you can set a setting for that applies to, oh, sites simultaneously. And let's actually show you what I mean by that lets that margin. So the margin you can give it in us, as you can see in a few different ways, like percenter, centimeters, engine, a lot of things. So let's start first by giving ca marginal 100 pieces. So what? This will go well once we save and a fresh. It means that space off 100 pixels will be applied to each site, and this means that it's going to push the element towards the page. So let's save a fresh and you can see our element moved and when you apply margin one element, it means that every other element is pushed around, so margin of a single element affect every other element. Actually, let me give you the example. Let's create another Jeff Israel. Let's up second if and I'm going to give this idea off Giff two. And this is going to be with a D. D if one. And the reason is because I want to give them. I do actually Jif one. And then I need the same thing for if you both with different marriages, gift or, let's say, for a refresh. Perfect. Now you can see how these jobs are. Not at the same. I mean, they're locked, really touching. Now if I don't move the margin from just two finish, it moved in orders and there isn't white Stubing pushed over here is because of the marginal different. Now, if I did just this margin to, let's say 20 well to happen, is that not ology? One who moved up but also just to will move up. It saved definition perfect. As you can see, both gifts move, and the reason is, as I mentioned, that margin affect every single element on the page. It pushes every single element. Now we learn how we can modify the margin simultaneously for every side. Now I'm going to show you how you can modify them margin for each side individually. So let's say if I refresh perfect now, as you can see, jeez, you start touching at the moment because there is no margin between them. So if you want to modify the marginal, the up you can just that margin dash top and just say, for example, 20 pixels save refresh, and our just gives move 20 pixels down or, if you say, 200. So the difference could be more dramatic, More drastic. Our gifts moved. Okay, Now the same team goes. If you want to modify, for example, left, right, and someone, I mean, is the same here. Now there is one more way where you instead of typing, for example, if you give if you want to give different margins, you don't have to a particular margin left margin top Marginal, right Margin bottle. What you can do is let me show you can just like margin as that giving violence. Now the rotation goes up, right Bottom left What do you mean? Is that you can say, for example, 20 pixel stop. Let's say 50 big cells, right? 50 pixels. Bottom 20 pixels. Yes, Semi column. As you can see, we gave four different values and as I mentioned, they go Oh, right, Bottom left. That's if refresh and our dimensions are, or our margin. It's a plight. Now there is a short cut to it. If your top and bottom they go in pairs, don't bottom left right now, if you're just supplied to values, what do happen is that they're going to be applied to the top and bottom. So the first pair goes up bottom the second Paris go left, right, Asai refreshed. And you can see the difference even if I give this 50 obviously just will be done. Done. Because if you give 52 top bottom and 52 left right, you can just give a single ball off 50 and will be applied everywhere both, for example, you might won't hear Toby 100 exhaust top bottom and 50 pictures left right, which is totally fine. And if we're fresh, are margin is applied Now you can do pretty cool stuff with margins. For example, you can center your gifts and let me show you how you can center your gift horizontally. What you can do is you can give, for example, margin zero pixels or 0%. I mean, you can just type zero and the margin off, left and right, you can say auto And what this roof and what will happen is that the browser is going toe. Calculate, for example, the distance off the parent element. In this case, it's our body. It's this one. Let's say 1000 pictures and out to me is that is going to place your gift exactly in the middle, Any for fresh. You can see our give. Juan got centered resulted. Let's send her our gift to Israel. Zero Outer Now. Obviously, without you can say you can set the top and bottom made. You want to put the elements 100 big source photo on your against you Can you can. You can modify the margin in the space around your elements and their many, many tricky things that you can go. But the most important is that when you change the margin off one element, it effects every single element on the page where this element that has contact with now it's there for your challenge. I want you to create the elements and that different marriages. So these three elements should be with dimensions. For example, 200 by 200 pictures. Oh, elements align in your pitch is there here, for example? I need toe Jif and then I want them to fit inside this weapon. We should not have school on the page. So basically, first elemental contain around 33% of your webpage. The 2nd 33% more so I hope the challenges clear. It's going to be fun because you need to do some calculations in splitting the margin, and I hope you enjoy the listen and take care. 28. Padding: hello and welcome in this lesson. You're going to learn how you can modify the ad. Think of the elements in the progress lesson we talked about Margin. Now we're going to talk about the padding and the padding controls the space inside your elements inside the borders of the Element. So let's update our title justice value and also what were going to do this. We're going to do some changes. So I'm going to delete actually you, Scott, and I'm going toe right. New elements from scratch for this example. If I say for fresh Perfect, our title was updated. So what? I'm going to this. I'm going toe out. Do we don't need you off parent and inside I'm going to create a diff We on idea off, child Heidi child like this. Perfect in. If I say very fresh, we don't see anything because at the moment these are with within height off. Zero pictures also transport. So now let's elect them. And let's say, let's first modify the bad parent Caroline brackets. And what do you want to do? Want to say that the weight off this, def, it's It's going to be 500 pixels and the fight is going to be 500 he says. Let's make it square and also want to set a big ground color so it can distinguish. Maybe we can say this one would be great. This, let's say on a fresh, perfectly get our parent def. Now we want to do something similar to the child. What's that child? Let's give a week, which also, let's say, 100 pixels by 100 Texas and height. 100 pixels announce. We want toe. Give this child big ground cover so we can see it. Background color and the color should be brown. It is going look good on the green. Let's save, refresh or can you can see it? Perfect. Now what the public means is that we can modify the space inside our element. And if we want to change the putting off our parent, it means that our child is going to