Learn HTML and CSS in 3 hours ( + Multiple Challenges ) | Gancho Radkov | Skillshare

Learn HTML and CSS in 3 hours ( + Multiple Challenges )

Gancho Radkov, Lead Developer @ Radkov Academy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
37 Lessons (3h 26m)
    • 1. HTML 5 Overview

    • 2. Environment Set Up - Windows

    • 3. My first web page

    • 4. HTML Structure of a web page

    • 5. Headings

    • 6. Paragraphs

    • 7. Text Formatting

    • 8. Links


    • 10. Images

    • 11. Tables

    • 12. Ordered Lists

    • 13. Unordered Lists

    • 14. Entities

    • 15. Forms and Inputs

    • 16. IFrames

    • 17. HTML Project Part 1

    • 18. HTML Project part 2

    • 19. CSS 3 Section Overview

    • 20. Styling of HTML Element

    • 21. Group styling by tag and class

    • 22. Background color

    • 23. Images as background

    • 24. Borders

    • 25. Margins

    • 26. Padding

    • 27. Absolute and relative units

    • 28. Text Styling

    • 29. Fonts

    • 30. Positions

    • 31. Overflow

    • 32. Basic website layout

    • 33. Responsive Design - media queries

    • 34. Responsive Design - Relative values

    • 35. Styling of a Login Page - part 1

    • 36. Styling of a Login Page - part 2

    • 37. Styling of a Login Page - part 3


About This Class

Hello there!

This class will teach you the skills to build static web pages using HTML 5 and style them using CSS 3.

We will start by learning HTML and how to create elements for our web pages.

Then you will learn how to style and create awesome responsive layouts using CSS.

The best way to learn is via practice and this course has planty - it is full of exercices, challenges and projects that will help you sharpen your newly acquired skills.

Learning Web Development can be exhausting and lonely task. This is why I've created an exciting course and a community where I mentor, guide and motivate aspiring developers.

This course, its materials and practice activities are the product that I wish existed when I was learning several years ago.

I've created it with passion and its sole purpose is to help you achieve your goals with the knowledge you will get from this course.

Web Development changed my live, it could change yours too!

This course is part of a complete Web Developer curriculum that I've created and is available here in skillshare!

What you'll learn

  • You will learn to work with HTML 5 Elements
  • You will learn to create modern web page layout using CSS
  • You will learn to create static web pages
  • You will learn to style HTML elements using CSS
  • You will learn to create responsive web page layout using CSS that looks great on every device


1. 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. 2. 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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 8. 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 9. 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 10. 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 11. 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 12. 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. 13. 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 14. 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. 15. 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. 16. 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 17. 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 18. 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 19. CSS 3 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. 20. 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. 21. 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. 22. 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 23. 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. 24. 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. 25. 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. 26. 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 be pushed in the direction that we are fighting. So if I start a body, let's say botching. I used to pick SOS. So the parent element the charges were to push, and not only every single element inside the parent is going toe push inwards, also as you. So the size of the element do you? Because we have the wit, the height, plus the public. Okay, now similar thing. I mean, I'm going to keep this lesson short because it's basically the same. Think it's marriage and you are able to modify each site individually or like this. You can modify it with a single setting. You can modify all four sides that you can also do. The parenting query can modify. For example, 50 picks off bottom on 100 big cells left, right. And if we're safe and a fresh, you can see that our sides got pushed around. So now it's time for your challenge. I want you to create similar configuration with a parent and child if and in the parent. If I want you to give padding to each side, that is different from Gellar. So you need to use padding. Quit for different virus. Okay, I hope you enjoy this essence and they can't 27. Absolute and relative units: hello and welcome. In today's lesson, you're going to learn how you can work with relative and absolute units. And so far we've bean working corner with absolute and by that time in pixels. And today I'm going to show you how you can work with relatives and by them I mean, for example, percentages. So for this example, I'm going to delete our child element. We're going to just work with the parent and also update hours. I told to cirrhosis Absolute look and relative. Yes, perfect. Let's save other fresh as I mentioned, so far, we've been working with absolute units such as the pixels, and the relative units are a bit more different because there well, a relative. I mean, instead of saying, for example, we want the weight of the parent to be 500 pixels. We want to say that we want to be 50% off the size off its parent and the relative units. Yes, they go. They get calculated based on the parent element. So if we say we won't do it to be 50% it means that our current parent is the body and it's going to be split in half. And if we fresh okay and that this is happening because also, if you have 100 pictures parting from board sites, let me remove it because I got like, What's capering? If I fresh perfect now our give our parent. It's exactly 50% of the body off our element. And if I start to drag around our screen, you can see how the with shootings or increases based on on the parent element and with relative units is very easy. Or it's an easy way that you can create responsive designs. Or, in other words, you can create a design that works from different screen sizes. And if I have also 50% height, let's fresh perfect. And this also is going to scare with the height. Let me try toe, find this thing all right? No. Okay. Anyway, the moment you're just going to shrink it left and right, and this is Scout guys took in years. Relative units. I mean, it's percentages and also goingto, I'm goingto tell you about the other most common a relative unit, which is the view height and view it and what these are. It's basically the view port of your browser. So if I shouldn't come my browser and if I say I want the unit Toby, let's say I want to give to be 80 Review with any type V W. And what is does is that is going toe calculated based on the size of your screen and not the size of the parent. And this is the main difference person in percentage we calculated based on the size of the parent and with the View interview. Basically, the view port units are calculated based on the screen. I hope this is clear and not really confusing camp. Want to write a text? There's no so could be explained better. So if I fresh we get 80% off the screen. Any fight again, go left or right the size of the parent or the size off. Our element changes based on the screen and not based on the parent element. And this is the most commonly used. A relative units based, the percentage and the view poor. Interview it and you hide. Let's say you h for your height. If I finish again, it goes 50% off the screen. Now there are a few other relative absolute units, but I don't think they're very widely used. I mean, you're also here, for example. We say 50 inches. You also hear centimeters. Eso won. But, I mean, if you need to use them. I mean, you can find more information about this on the Internet. I don't really need toe. There were about every single thing here because, I mean, I have never had to use them in my professional career. So I doubt you will have to use them. Also for the relative Was there, for example, the e ends and also R e m. But these just don't want about as you can see, how many different millimeters themselves. And so pixels, percentages and Vieux port units are the most commonly used. Let's love this lesson here. I hope you enjoyed it and take it. 28. Text Styling: hello and welcome In today's lesson, you're going to learn how you can style text similar. Think if you remember with HTML here the tutorial for X formatting and now we'll see how you can do it properly with CSS. So for this leads update our total C asses fixed styling like this. And then let's also delete the court from the previous lesson because instead of Defoe, need a paragraph were quick, let's say that a fresh perfect Now go ahead and create a photograph and that some text it may be out type. This is a simple text. I mean, we're just going to modify and style it. So not really that important what it's saying now. We are already seeing how it can change the color in It was, Let's get the paragraph probably brackets home and then we choose the colors. For example, chocolate that's safe. Fresh. What effect now? Besides the governor, you can modify pretty much any aspect off the stakes for any text on your webpage. For that matter, for example, you can choose the phone size. Maybe we can say 50 pixels. And if you remember from the biggest lesson for the absolute and relative units. We can also use percentages and so on. I mean, you can use both. I mean, you can use the analogy of units is up. That's it. Well, 20% before a fresh. And but you need to pay attention that the percentage is based on the G Ford size of the units. So if you want to make it bigger, you need to say, for example, 200% to make it twice the normal size. But I don't know why would you do that? But anyway, it's good to know that you can. So besides the front size, what we can change? Well, we can change the space between each letter and you can do so by typing a letter letter, that spacing. And now you give, for example, 20 pictures that Brazil will start 20 pictures between each letter and this is so very long thinks not. Maybe let's make it like five pixels. Okay, The next thing that you can do it also change the space off the world's for the space between each work, and you can do so by tapping word that facing and again maybe 30 pixels. So you can see a drastic difference. Now each world. Here's this face off 30 pixels. Let's make it five pieces. Okay, Perfect. The next thing that I want to show is a text decoration. Now, if if you remember from the text form, I think we get, like, insert, delete it and so on Now this is the same. You just that takes dash decoration and you can type underline. And if we save and fresh who get big under live underneath our text, you can also say overline and this is going to put a line on top of your text. There are a few different kinds off decorations that you can go, for example lying through, which is going to be similar to the deleted you place on I drew and so on. We can align text to the left, which is by default. As you can see, the tech stays on the left side of your page. You can't center it or you can place it on the right, and you can do so by using G fix align settings. And you can say, for example, text the line center and with a fresh our Texas on the center of the page. And if we actually change the size of our page, this is going to changes. Are is going to scale automatically our browser you recalculate every time on, don't you For instead of center, you might confuse right, and the default is the measure traveler. It's left now. There is a way that you can apply the setting toe every single element. For example, if you have multiple paragraphs this and refresh, this is going to be applied to every single paragraph at the moment because we act them or we style them by truck. But also you can apply this sitting. If you have multiple classes and you don't want to step back them by, you might want to select your body by tapping board here on this curly brackets and place Jonah your standings and just will be applied to every single element inside your body. And in this case, your body place that always parent element off your paragraphs any for a fresh is the same you and the last thing that I'm going to show you. It's the line, Kate. So by default, whichever way, you have a default hide between each line and you can modify. You can say over here. So the biographical here line height, my visit against, say, 100 pictures. And what this true do is that is going to stretch each line 100 pixels. And this is the basic way that you can modify text. Obviously, there are many, many more. Or you can combine ish to do some pretty nice looking text. And now it's time for the challenge. And what you should do is to create several paragraphs and each paragraph should hear different style makes. You should have different phone size, different letters facing different eggs, decoration, different blank height. And so Okay, I hope you enjoy this s, um and take it. 29. Fonts: hello and welcome. And in this lesson, you're going to learn how you can change the font in your weapons. So for this, let's update first, our Tyto, the CSS phones and then what we're going to do, it's actually I'm going to just remove this and the basic starting. But I'm going to leave the partners. It's the fresh What of it Now if you want to change the phone for your paragraphs, for example, what you can do? Just that fund that fell and let's see what's happening. Our brothers suggesting Kalata phones. Now you can see that there are many things in a single line. Let's go with the four, for example, this once. Go away you. Why? If that's how it's pronounced now, you might see that there. 12345 things written. Now let's safe and fresh. Perfect. Our phone got updated, but let me explain you why There are so many different phones in a single line. These phones are beauty in our browsers, but not every browser. Yes, every fund and what this means is that your brother is going to try to apply. Should go. You I and you've just front. It's not available. It's going to go to the next from in just case, a coma, basically like a fullback functionality, and they're bundled in like similar phones. So if the home is not available, is going to go to Geneva. If you say for a fresh for fair. And this is how your browser make sure that you care for a perform. And if no of Jesus I've ever was going to go to the default sounds self, that should be a everywhere. I mean, every brother shoot so politics. And this is how pretty much guys who can change the font in your browser. You just go. I mean, if you know what want you need to type, you just type the phone and several fell big options, because the chances are some of your users will not hear your available haunted their browser, and you need to specify some similar type funds. And this is how, as I mentioned, you can change your front. Now it's time for a challenge. What they want you to do is to create five paragraphs, and each of your paragraphs should be set with different fund. Can you do that? I hope you enjoy. Just listen and thank you 30. Positions: hello and welcome. In this lesson, you're going to learn how to correctly position your HTML elements inside your Web page. Now go ahead and remove the court from the previous lesson that's removed the issue. Mouth CSS and update our Idol toe CSS position. Let's save finish. No every element on your Web page. There's a position the default wanted static and what started kisses that your element has no bottom right or left settings set there, just positioned next to each other. So let's create Jif. Let's say give on. Let's give it a little styling so we can see it. Let's elect give curly brackets with Let's send away 200 pixels It said the high 200 pictures on Let's set the big round color toe become toe safe. But a fresh perfectly see it over here now by default is a mention. The position is starting. If I say that there will be absolutely no difference now, if you want to start moving this element around changing its position, for example, you move. You want to move this element 100 big cells from the left. So we wanted to come around here. Now we need to change the position of this element toe relative. What relative position thus is basically the element is position relative to its original location. What this means is that if I said the left property who 100 pixels our element, it will be put 100 pixels from the left away from its original location. So if I save and a fresh our element moved 100 pictures from its original location now it is the second I pissed. I just measure because if we just change, it was static. Finish. These properties are ignored. So if you care, for example, I have the diesels. The setting start ignored because I'm gonna finishing in the morning because the position in static. So we have to change the relative in order for these positions to take effect any food fresh, our element moved from its static position. The next time that I'm going to show you, it's the absolute now absolute. In this case, it's not really going to change much. I mean, they lamented super stationary quantify reference page, but it's moved because the reason is that absolute changes the position of the element according to its nearest position element. So if you don't have it is in this case, we have only one gift. Our absolute value will be applied best on the body. So when we say left country pixels is going to be moved away from the body from the left side by 100 pictures. Now, one thing to note is that when we set on absolute element, this is going to it's going to stay country pictures, for example, at a governess off how a lot of our pages. Now let me actually show you by setting the body who care for height off 2000 pictures so we can get a scroll and if I refresh, would get this crucial. As you can see, our element with absolute position stays exactly where we said it 100 pixels from the bullet, The other type of position that I'm going to show. It's called fixed. And this instead of being relative toe, the body is going to be relative to the view part. So basically, when I finish a godless off our isco, this element is always going to be staying according to your screen on your window. You want if I stop, shouldn't get just days there As you can see, I'm moving the school also, our what page is moving at the moment, but our element stays 100 pixels from the left and 100 pictures from our window and the last type off element that I'm going to show you for the last type of position that I'm going to show. It's called Stick It and the sticky position allows you to create is it's called a stick in our bar, For example, you can give your you can keep your element over here, and when we scrolled the page, the elements stays. Stick to the top. But now for this, in order to work when you toe couldn't move the left and say that zero, it's also zero action and you put a fresh. Our element stays here, but now if we start scrolling as you can see, our element is stuck, and this is how you can use different positions to achieve your goal switcher elements. And now, for your challenge, I wanted to create HTML element for each different positions that with them today. Can you do that? I hope you enjoy. Just listen and take care 31. Overflow: hello and welcome today you're going to learn how to modify the overflow off your elements and walked. Overflow is is basically what happens when the content of your element is larger than the boundaries of your element. And the first example that I'm going to give you is when the body it's larger than the screen as this, you would get the scroll by default. But there are a few options that you can decide. Either you can have a vertical scroll, you can create horizontal screw. And so so first think led the little call from the biggest lesson. Actually, we can leave the default were here. I'm gonna leave it and we're going to update the title toe CSS over flow like this. Save refresh. Perfect. Now inside the chief, We're going out. Some text in for that. Let's go to Google and type Laura. So what Lord admits, Thomas is basically some random next. I mean, you can go over here and we can generate what is so like this. You can just copy that fixed. Let's place it like this fresh and OK, So by default, as you can see our text, it's much larger than the dimensions of our element off our beef, which is 100 pixels by 100 pictures. And the thing just goes outside of the text or outside of our element. Now what you can do is that we can start tapping overflow. I'm American tools, either. Auto hidden. He shared initial scroll onset, Invisible Now let's go and truth. Alcohol. So what deception that's is if we let the browser decides for us anywhere fresh. Our browser chose what proof close and to respect the wit in the fight that we said earlier . And now here, horizontal escrow and we care of articles grow as well the next time that we can that you cannot this scroll. Basically, we're telling the browser that we want screws and this crow. Actually, let's have this during your life. Let's common this out any further fresh so you can see that even if our content is less than the size or the boundaries of our element with you get this visible scrolls. If our content is larger, then actually disclose our years about, and this is kind of how it works. I mean, with out option on the body, because if our content is larger than the body. Then we get a scrub. Otherwise we get nothing. And usually, unless you have some kind of element which you were going like this run that you're going to have a lot off Tex. You're just gonna leave it out. Oh, and you for the fix this less or the content, you don't get any cross, and this is pretty much the most used. The way you just leave it out and let the browser decide. But it's a good to know that you can actually modify these options. And then you kept the scroll D and set, which is which was the default settings. Basically, if our text or content is larger than our diff, it just goes outside. Nothing really happens. But now if I started to scroll or I start shooting our window, you can see that we get this crop on our body, and this is because it works with the outer option. Basically, our browser decides if we should have scroll or not. So this is very fast visual example car you can work with over for. I hope you enjoyed it, and they care 32. Basic website layout: hello and welcome. And in today's lesson, we're going to create a basic website, skeleton or layer. And let's begin by moving because from the previous lesson, end of dating our title seances website layout for a quick let's save and a fresh Okay. Now the first thing that every website years are almost every website. It's navigation. So stand by creating Cardiff and we're going to give it the class of navigation. And now that's go get a style it. Now go ahead and select the class navigation. Did you do it? So we select classes by typing built and then the class. Now the Gatien. Then we can open curly brackets and at our CSS or styling properties, and the 1st 1 will be which, let's say, the moment you're going about 500 pixels, then they're going toe out. Let's say 50 picks also height and then you want to change the background color so we can see it. Maybe we cannot agree, save, refresh, perfect so we can see our navigation. But since we have a bit of more space, let's go ahead and increase the witch in order to feel our window now most likely your screen will be different size than mine. So go get him and said the which Toby For your screen size for mine, it should be 7 30 736 cells 7 40 seven. Okay, perfect. So for my screen intuited 7 50 Okay, The next thing that we're going to our this is our main container, which is going toe called our central pieces. Our content. So let's create a Jiff. And let's give it a class of contained. They're not going to show you a shoulder with your aim. It a privation so you can create your element. You can talk, don't end the class name, for example, campaigner. And then a stop work. And the our editor is going to automatically create the opening closing tuck as Lois took at the class and just works with ideas and so on. And instead of dot for idea, going to that cash back like this, for example, different lady one. You're just going to press enter on to get our idea created. This just speeds up your developing speed. Okay, So what do you want to do now? Is you want oh, give hiding with too far contain that classes are so let's elect our class container this on for the beginning. Let's just give it wit. Oh, several 150 pixels is is so from out navigation and fight so far out. 500 picks us. We'll have toe give more. But now for the beginning. Legis. Leave it this way that save refresh. Okay, not in Greeley changed because our container is transported to the moment now inside our container. What? We want to create this? A sidebar Because usually in your in the websites Nowadays there's the interrogation and you have a one sidebar very often with advertising banners in the middle you have your content site or the continent and I meant where you actually up your text images and someone and then you have another side back. So let's create a Jiff And let's give the class offside dash. But OK, and now let's go ahead and style our side bodies Well, the site Dutch part curly brackets on, and we should begin by giving wit off. Maybe 200 pixels fight off. How much is 500 to the moment and then we want big round color. What should they may be this disc color. Let's see. Save. Refresh. Okay, we hear it over here. So this is our cyber. Maybe we could reduce the which toe actually took under it. It's OK for the moment. The Mixed Inc is that we want what a continent live. As a message in your confidence that stays here in the middle, We're going toe at our main content, such as paragraphs, text and saw. Let's that plus content my stuff. And then we want to start the continent this well, so let's go ahead and I don't content call totally brackets. Let's give wit wolf maybe 500 pixels because it's gonna sustain the middle. Actually, let's calculate how much you want we have to give Yes, 500 because they're also going out a bit more space sitting between them. Never mind. Just give 500 pictures for the moment. The hate off 500 as well. And then you want to give a big round color so we can distinguish them. What should be discolor? Maybe something nice. Okay, Gold semicolon. Any food fresh? Okay, we hear Farmall books over here on the need, and in order to fix that because what we want this. We want our elements, Toby in line over here instead of going underneath each other. And we can fix that by giving crust the container which is called for. We can modify that tribute display and what We're going to set it. We want to set it in in line. Yes. So what this display position will do or just play property is that every single element inside our container is going to be displayed in a single line, Any for a fresh. We get out of element now as we see our boxes of it. Why? So the content carriages, the weight off we can make it around become the maybe pixels. It was safe and fresh. And the reason is because you want what, two sidebars and we can actually copy Recall Street. We are almost done with our stylings can save looking place. Another sidebar so we can hear two sidebars between our content. Any for a fresh for effect. But not really because of the moment, would still our stylings are not perfect. Now I'm going to modify the values of the pixels toe fit my screen, and I want you to do the same in order to fit yours because our values would be different. So if we have a week off 750 pictures, that it's our daughter, what we want to do is we want to hear two sidebars. Actually, I'm going to reduce it. The sidebar with toe, 150 pixels fresh. Okay. And since you have two so the woman, they're going to be 300 pixels. And what you want to do is you want to divide 7 50 by 300. So our content should be 450 freezers and change it for 50 any for safe and a fresh or effect. We get the exact dimensions and also what you introduce. You want what foods are usually the food there. It's used to display your company information, and so so let's go ahead in creating a gift with the class of food it is. And then let's go. A captain style, our foot or Israel. It's a joke Photo, very brackets and like it actually GOP our weekend high from the navigation and the height actually is going to be bigger, maybe 100 pixels and also the picture on color. Big at all Color should be just drew. Some nice cower like some are colon refresh Porter. Now I'm also going out a bit of spacing between each of the elements. For example, we cannot margin bottom well, then big cells to our navigation like this. Then they can also then the SOS on your site. The sidebar and this means we need to reduce the weight off the which Toe 109 big cells and also up Martijn All right or not, really? Actually, the margin should be on the content margin right off big cells. It's a better way to do it by that margin. Open bottom zero left and right and Texas. And then, if we say on a freshness, you will. We do. We get our 10 pixels difference and then also want to give it so the bottom some were going . What margin talks through the foot margin hope and fixes. I don't want to hear points. It's a fresh, perfect each of our elements. Now it's 10 pixels. OK, guys, now also wanting to notices, not when I start to change the size of my monitor or my screen. At the moment our elements are staying the same. Basically, they're not responsive. And what this means is that if your user sir, coming to your website with difference devices, they're not going to be seeing your website. Probably because if they come with Tom a bio, you can see how they have to scroll everything. So, in the next essence, I'm going to show you a few ways how you can create responsive Web pages. And now it's time for your challenge. I want you to create basic website, lay out all by yourself. And also instead of just a single off sidebar content another side. But I want to give tours. Can you do that? I'm sure you can. I hope you enjoy this. Listen and take care. 33. Responsive Design - media queries: hello and welcome. And in this lesson, you're going pulling how you can make your work pages responsive with media queries. Because as a show, you earlier if your user can street a movie screen or tablet, your webpage is not going to look good when you get static values s pictures. Now what you can, though, is create major queries. And for this lesson, we're going to use most of our court, if not all of our court from the biggest lesson. What we're going to do is just we're going to update our I talkto Jesus website layout bash , response. If yes, offensive with media quays race. And if it's safe and fresh. Okay, our total dated perfect. Now water media queries. Well, jeez, they're setting, sir, configurations that are triggered based on your screen size. And now let me show you how we can create a media quickly. So you start you start by typing at media or it screen and and open brackets monks which, for example, and you can say that you want this media queries to be applied, the screen is less than maybe 400 success and then all one color markets and you can type your settings for your CSS styling C inside. So what will happen is, is that by default, the browser will apply these. But if our screen it's less than 400 pixels or we get the user that is using mobile example , we're going up like the ones that were going to write inside. And let me give you a very quick example by changing the color off our content. Plus so inside you just start by normal dot content clearly brackets and your cirrhosis, sons. Now I want to change the big grounds color to let's say that So if we save and fresh, not in clearly happens at the moment because the base for the default styling Sarah plight And if I start to shooting cars clean, actually, I can't really shrink it that much. Maybe we should apply this talk 500 pixels. 2600 5 50 Let's see if you're safe and a fresh. Okay, let's now start pushing the screen. OK, do you see the difference? So what's our screen? It's less than 505 150 pixels. Our browser applies these stylings. Now you can change every single Oh Jeez. So what you're going to do? We're going to shrink our play out based on the screen size. So let's see. Over here is it's in our normal design. It 750 picks us. So what are going to do is we're going to apply new stylings when our screens less than 5 50 So let's go get in first. Select a navigation, the navigation and we want to change. The wit for the navigation will be 542 pictures. So let's say, if a refreshing she was gonna keep one hour screen, it's less than 5 50 Our navigation should be 542 yes, and it is. But let's go actually smother maybe 5 20 Okay, put it. So what's our screens? Less them. 5 50 Our navigation becomes 5 20 And let's do the same thing with the rest off with the rest of our juice. Our continent Just leave it because they're some calculations to go. Let's know. Select the container. That's it. With it off. Five planted guess 20. Then we get the sidebar. Useless Now start cooperating Sidebar. We want to say the wit. It should be 50 pictures. Let's hear are 50 would be too small. Save a definition for it. Okay. Actually, 50 pixels might work, because at the moment, you can see that they shooting pretty much exactly. Okay, that was looking. Guess we might even leave our content to be the same. Just a different color. Okay. Yeah, that might work. And the last thing that you want to change them. Okay, that was nice. We want to change our footer with Israel with 25 26 us. And if we save and fresh Voula our food or it's changed. This are so if we go over 5 15 our main or default styling cell applied. And if we go less our responsive styling, Sarah plight and you get up as many of these media criticism like, for example, there some main or standard screen break points where you can see how they're, for example, there four or five different screen sizes which most of the device using. And you can implement different stylings based on each device. For example, you might hide certain elemental move bio and new, my trauma, others in tablet, for example. So this is how you can use media queries? I want you to create three different media queries. This is your challenge. Three different media queries for different break bones. For example, first break point is going to be when your screen is full screen. Then your second break point should be around 75%. And then your church is going to be around 35 visits here. Okay, I hope you enjoy this lesson and they kept 34. Responsive Design - Relative values: hello and welcome. And in this lesson, you're going to learn how you can create responsive designs with relative violence. Or what I mean by that is instead of using pig cells we can use percentages are view poor Vallas. So let's first remove our media query. I hope you completed your challenge. Actually, why not? If you did complete your challenge contract If Academy and shorter I really want to see it . I want to give you feedback on it. So let's update our Tyto responsive with look relative Virus safe. Refresh. Perfect Now, Currently, we're saying that power, which would be several 150 pictures and this is supplied toe all situations regardless off the size off our window. But what we can do is we can say, instead of 7 15 we can say that we want our screen to be 100%. Let's see what's gonna keep actually our navigation and if we save and fresh okay, the moment is 100% and as you can see, it's actually expanding with our window, which is great because we can't get the same navigation regardless of the screen size that is seeing it. It's always going to be 100%. Now let's kill down and let's modify our Sybers. Oh, yes. First, our enough! Let's go. Is that in order? So for our sidebars, we want them to be around maybe in percent each side, but should be 10% and just would leave our content, Toby seven 78. Because don't forget that we currently have 10 pixels marriage and we're going to fix it. We're going to change Justo percentages, onus and fresh. Okay. And now, if we started to shrink again or expand our content inside, birds are expanding Kenzo and they're going according to our screens sites, which is perfect. That's exactly what we want. Because if actually rightly go to inspect, this is going to launch your developer tools. I'm going to walk in your car. You can use them. But this is a basic Basically, this is on the editor similar produce that you can expect For example, in Syracuse power give with footer and no over here. If you go again, don't go device toolbar and you can choose to see how your device looks. For example, is galaxy s five. It is looking this way because of our kids or 50 pixels and so on. But now we're going to change that. So don't worry about now. Let's don't go back. And let's close our developer philosophical. He have proper view. So after changing the way, you want to change the width of the foot and 200% so it's safe and a fresh perfect. And now what they're going to do is we're going to change the height. So for the right off, our navigation should be around 10%. If the height off our container, maybe we can say 70% and the heart of our food there could be weight because it's like wise over our navigation menu for a fresh. Okay, not do. It was the height 20% for safe and fresh. Okay, And now we need to take into account. Actually, the margin that replaced so instead, off maybe just could be 9% the height. And from here, you can take 1% more or actually from here, so it could be 18 and the margin could be 1% if we say 1% listed a fresh. Okay, we want to go on. I was 1% here that's a fresh for effect. And now also need to take into account the content. So we need to give 1% here. So and the fight, How much would be the height? 70%? Well, actually less because we need to take Parenteau. No. And the height? Yeah, 1%. Okay. And now we should change the fight of our content. Which since we said the cut of the container 70%. You want just to be 100%. And also the side bus as though 100% safe. Fresh. Okay, Perfect. And now, if we start to expand, our screen expands as well. And let's go off yet. Right click, Inspect. Let's Togo is vile and you can see on galaxy s five. Our screen looks good. Let's click and maybe iPhone five. Okay, Still looking good. Maybe iPhone X. It's still looking good. I put ripe opera it's still looking good, and this is how you guys cade responsive designs. Regardless off the screen size that it's looking and you would get it all and all used this relative value searches percentages. Ok, now it's time for your challenge. I want you to create a brand new responsive design with relative values. And I challenge you to use Vieux port balances up. OK, I hope you enjoy this lesson and take care. 35. Styling of a Login Page - part 1: hello and welcome. And in today's video, we're going to be working on creating a webpage exactly as you're seeing on your screen. At the moment, we're going to create this log in page from scratch and you'll get hands on real world experience because you will be creating a lot of websites in the future. And a lot of them over here, such logging pages. So this is not think really complicated, but it will take some time. And also this is this will be our first experience with Rich a large amount of CSS. Okay, let me now minimize my browser. I should like this. So what do we hear? Hear? I have our index page from the previous lesson. And I also care for this Logan image that I'm going to be using case background. Now, this image, you can download it from the resources of this video, or you can just download any random image that you prefer to use. I've just downloaded it handled. So I have our image over here. I have our index page and let me actually open it. Yes, our responsive design. I'm going to keep this webpage open, so I can hear it. ISS references what we need to do. And first thing I'm going toe delete the court from the previous lesson. So go get and clear your coat is no the latest filings. And also let's modify our title to a Logan Page like this. Let's save, refresh. Perfect. Now, since you're going to be writing quite a lot of CIA says what you're going to do is that we're going to write our CSS in external fire. So for that, go ahead, click on file when you file and then go again toe file and save us. And then this fire you want toe Name it custom, don't CSS and just press to save. Now if we minimize our browser, we should Yes, okay. And the fire should be over here now. What we need to do is you want to import this CSS fire in our webpage and let's delete this style, Doc, and what you want to do This type link Okay, I want brows are actually how to complete it. There is the Rio attribute which is set the style sheet. It means that this link is going to provide style sheet or see a ceasefire and DHF is similar to DHF, or links are the source for image. We just said We just tell the browser from where to get that file. And since our index page in our customs uses in the moment are in the same directory or the same level, we're just going to type Kristen no CSS on our webpage. One loaded truth low the file automatically. And now, in order to check that if everything is working correctly, what we can do it, we can go to our file and that body and let change the background color of the boys so we can be sure that everything is linked and working. A spiritual told a change to Brown. Let's save Let's open our house or anywhere a fresh. We should get our body with different car. Perfect. Ever think it's working as it should? And there's a measure it again. So far, we've been writing cowards uses here in the here, but since the moment you're going to get quite a lot of classism stylings, it's better to keep it in a separate file, so everything gets bundled together. Now let's remove actually our color because you want our body, Toby Transparent on. Let's actually remove everything like this. Safe. Refresh. Perfect. Okay, now we can begin working on our webpage. Now, the first thing we want to do is you want to create a job that is going toe hold everything inside our webpage so we can go in the index page in Created give and let's give it the class off happen because it's going to wrap everything in our webpage. And then what you want to just want to set the big around to maturity is a rapper quest to be the image that we're going to be using. So next thing we want to save the indexation, then we want to goto Our distancia says I don't want to select our Arab our class like this . And what you want to do this? You want to say that first, the wit the weight of this jeep should be 100%. So we wanted to stretch all the way. Is our screen or the size of the body? They don't want to send the height the height 200% as well, and then we should go on and then you should go ahead and set our big around huge so big around dash image. Then you are well and the euro is you remember we should just place our image name so our inch name no jpg fighting. And if we go ahead and fresh perfect, we get our image. But as you can see, our image is pretty large. At least mind if you're using this image, you encounter the same problem. If you're using some other images, might be different case. So what we want to set is also I want to say that the big ground sighs its cover. So let's save refresh. Okay, we get it starts here, but But I also want to center the damage. So I'm going to say background dash position is center for open bottom and center for left and right. And if I save every fresh perfect now the image is completely center. And why I did that is because the face off the guy over here, it's going to be it was going to be in the middle of the screen and in the middle we have our for so at least yes, it's a bit hidden, but if we go on bigger screen against. You'll see part off his face, so it's not completely going. Okay, the next thing that we want to do, if we go back to our webpage, it's to remove this white bathing that we have. And the reason is because our body, it is a body ng by default, and we can move it by selecting the body. And I've been bugging zero and margin zero just. We want to remove any default stylings off the board. And if we refresh perfect, our webpages completely set exactly as you wanted, okay? And the next thing that we should do is to create our container give, or the jail that is goingto called our phone. So let's go ahead and create our def. So let's that gift and you, the class of container like this. Let's save it And let's tell it, what you want to do with this, Jeff, is that you want to position it in the middle, as you can see here and also to give White bank out. So let's go ahead that dot container. I want to say that the margin just give it is going to be zero and out and what this margin is going to do that is going to send out our just. Then we want to say that that we do that you should be around maybe 400 pictures and the height of the leaf should be made before 50 pixels. Now, don't worry. Everything could be changed in later stages if it does not look good. And also these dimensions are for my monitor. If your monitors completely different size, you might have to give other dimensions. Then what you want to do is you want to set the background color toe white, Just keep it simple. And if we save at a fresh perfect so at the moment with half hour, contain that it does not exactly s in our webpage. And the reason is because first it's on top when you to push it down and then I want oh, soft on our ages. And if you remember, we could do this week. Border eight, yes, and the board The radio should be five picks. So by exhaust approximately, let's save fresh. Okay, And then I want to push our container down and we can do so by giving a parting to our wrapper. So there are a few options that you can go. I mean, you can either give the settings to the container. You can sit, for example, the position to be relative, and then you can give it. That's a top 10%. So what? This is going produces going toe push our container 10% from its original location For a fresh, we can get it over here. Okay. I mean, it works so we can share every district. What those you can go is that you can give, For example, parting with their upper and despite Inc is going to push our gift down, for example, you can give it, but you can give pardon open. So So, basically, we have many different solutions to a problem. And if one solution, it's no perfect or it doesn't work well, just don't worry and do other things you can use. For example, you can change it. You can change the positions with margin with position relative with parting many, many kinds. Okay, Anyway, I'm going to cut this s and here because it's out of the 10 minute song and we're going to continue in the next lesson. They care 36. Styling of a Login Page - part 2: hello and welcome to part oh off the creation of this longing page. So far, what we did in the previous video was to create our container Jif, and what we're going to do next is to create our content, def and start filling it with with headings, imports, bottles and so on. So go ahead in created you with the glass of content like this and inside you're going toe at our first caging, which is going to be aged three. Everyone to say, sign in like this. Let's go to our log in page Refresh and we get our signing now what we want to do. Oh, so it's to change Its position is, is we're seeing here now. They're couple ways that we can so that first we can select our content home and give and we can give up adding coldest do off 5% putting this 5% and what this is going to be going to push everything in words. So let's refresh. Okay, we get our signing pushed involves the next thing that we want to do this. You want to start our HD because now it's a bit too far away from the top so we can select age tresses that the moment you have just one aged three like this curly brackets and then you can sit the margin. What we want is only managing bottom. What we can say it. Zero pixels Margin dog Zero right, Maybe 20 picks, source bottom and zero picture split. So let's save refresh. Perfect. Okay, the position is exactly as in this We're page that I am taking reference from okay And the next thing for the next elements that we're going to what? I want to be our first pimples. So let's create an input is going to be five ext. Let's give it the place for no, since this is granted before they use that name is a Neverland. This on also want to set the idea toe user. And the reason is because we're going to give styling studies input. As you can see here, for example, we have only the border bottom. The next important I'm going to create is going to be for the password is going to passwords because we don't want our users to pack their plane passwords. Then we're going to give a place for though what's work and want to set you this focus past for as low. So let's save refresh. We get our pimples now. What we want to do is you want to start them off because at the moment they're not really looking very sharp or they're not looking very Mother. So what, We're going to this you're going? I don't get both of them simultaneously. So let's that here's a name. I mean, you do it. So first, we're going to select our user name idea, and then we're going to select our muscle. So by using comma, you can target multiple elements or multiple selectors simultaneously, for example, used to share the same stylings. There is no reason why you cannot get both of them against. I mean, you could use this metal. So first we want to say that the week is going to be 100% and this is because we want them to stretch all the way. So if I save this very fresh, would get them stretched all the way. The next thing that is that I want to put a bit more space in between. As you can see the moment there is a bit of space and geezer like Good together. So what? I'm going through this ongoing Who said the line Height line. The height. Who? Maybe 35 pixels. Safe refresh. Okay, looks a bit better. The next thing that I want to do is I want to give a margin bottom so I can split them. As you can see, there's a bit of space here, so let's go ahead and type margin that bottom, maybe 20 pixels. Let's save a fresh okay out there. Split. Perfect. And the next thing is that I want o remove the borders. I want to leave just the border bottom. So what? I'm going to do some good. That border bottom is going to be one piece so solid and black safe and a fresh perfect. And next thing I'm going to remove the rest of the borders because at the moment you just said this border bottom. So border, so should be number. And now, though couldn't move for the rest. Border left, Mom and border right, non visible. So if we say fresh perfect week, we have our styling. The Samos, it's here Now, the next thing that we're caring here is our checkbooks, remember? So let's go ahead and not this check boxes. Oh, just underneath our imports. Just follow here. What? You can do it. You can tack, input, uh, shake books and let's give it a needy off. I remember. That means that's safe. A fresh perfect. We get our check books about also want out the text And if you see that when we click on the text were also triggering our import and we can do so by giving a label. So as you can see, our LeBeau kiss automatically generated after before and this four and inside this for we should I did you of the element that is connected. Remember me like this and let's type inside our label. I'm remember me, you this and what This is work to do it when we connect them like this by the idea when we let's every fresh when you click on our label were also triggering our checkbooks. So, as you can see here in our evidence, our checkbooks, it's a bit a lot of So let's go and increase the size. So what we want to lose the one selected by did remember dash me early brackets and let's set the wit Toby 20 pixels on the height, 20 pixels as a Also you want to do is I won't respect our labor and want to change the cursor because at the moment is you can see when you over over the level with your cursor is not changing. But since you can click it, it's clickable as it's over here. Actually, even here it's not. So let's go labour on. Also, I remember me like this. You want to say our Kerson should become pointing and pointed is the cursor. When your cover over links are, let's save refresh and you can see how our carcelle changes. So the users know that these things are actually kick about. And now the next thing that you want to do this, you want to set our forgot password, and this is just a link. Just don't make of that. So let's go ahead and create, um, a element. The agent, if at the moment should be, you can just take a dash over here and it's like, good. What sort of this? Because you don't really, if you have more space, if you want to shrink it over here. Is it in Just example. But what password? We want to give it on the radio. What should be? Is it enough? A sort, and also want this to be in a boat. So let's Time Bill so our editor can create ending talk ISO and just up around our thanks. So he for a fish. We get our forgot password over here, but we don't want it to be on decide to want this Toby on the right side. And also it's black and a bit both of color. So let's go ahead and select it. Let's type fast there. What is it? Dash password. So the first thing that we're going to see it is that we're going that we want to move it on the right. So we're going to send the for a party or float right and float is going toe. Push our element to the right and let's refresh perfect. The next thing that you want to do this, you want to increase the size because you can see how much latitude it this. So let's from Dutch size to maybe 20 pictures. Let's save at a fresh locates larger. The next thing. Maybe want to remove the underline and how we removed on the lives well with the text decoration property. Next decoration. Mom. And this is going to remove any default styling from the element in it for a fresh perfect and the last thing you want, the color will be black as it's here. So let's go ahead and type. Not there a lot. Black. So safe. Refresh. Okay, Perfect. Now the video. It's already 10 minutes long. So I'm going to cut it here and are going to finish this webpage in the next video. I hope you enjoyed it so far and take care. 37. Styling of a Login Page - part 3: Hello and welcome to the party off the creation off this log in page so far in the previous lesson is you can see we created the upper part or just log in page. And in this video, we're going to create the bottom part. Basically, this button are gonna style it. And also just also this footer section that he has some takes tunneling for Sign up. Okay, let's go ahead. And what we need to do is create a bottom. So let's open our index page. And then there need just ate up for the link. We're going to create a bottom this and the voter should say love in. And also we want to give a lady which is button off Logan so I can select it and style. So if we go to our web page and fresh, we see our bottom floating inside the middle. But we're going to fix that by selecting get cash back. Look, Dash and ever going to begin first, I want to say not our, but I should have a week off 100% 100% like this. Save it. Refresh. Perfect. And since our bottom is now stretches, you can see that it came. So the next life, then what we want to do is you want to set the margin are going to push our bottom of it down. So want to say the margin for margin off the top and bottom, maybe 20 pixels and margin left, right? Zero? Because he wanted to be stretched all the way. So if fresh, perfect our. But now it's pushed of it down and the next styling that I want to places, we want to make it a bit. I want to give extra height because as you can see how much larger this button is, it's all that said the high to make it 50 pictures. That's it. A fresh what? The next thing that I'm going produce. I'm going to change the color of the button. And also I'm going to fix the border rages. So let's but bacon on Come on, cover toe blue. But I want some light blue lights guys so perfect. And also let's modify the border ages 25 pieces. So if we save and fresh okay, it's not the same color because over here I hear some strange I mean, they have color picker and I select it from there. So if I just go over here, click on the color. This is extension. Just true. Some random color. Don't worry about it. It just I'm then I'm being picky here. Okay. Is this car now? The next thing I want to do it says you can see there some borders. I'm going toe sit there, color toe the color of the bottom because they don't look good at the moment. I'm going to say border one thing so solid and the color off the Brooklyn itself in the fight of finish, What effect the same is it's here now for the text of the button. I wanted to be white and those I want to make it upper case and we little how we can make such jinx in just this next form. I think I think those colder the text styling. So we're going to say the color should be quite and this applies toe the text in sight and the big, um, calendar place to the background off the element itself and no. So we want to say text transform uppercase, and it was safe. And if we save on a fresh What effect? Our But on this exactly as it's in our sample were our guidance page. The next thing that's left his store this don't have an account signer. So let's go ahead overhearing Create paragraph that we're going to give on Ideo Fuller. It was going toe later off food. Then it's settled. Going back Don't kept some account like this. And also we're going to create in contact or a link. Quid sign up next. Thanks. So if we save and a fresh we give it over here now, we can give a bit of stylings. I mean, you could just increase the size of it. That's a foot there. I want to say that the phone size concepts like they should be maybe 20 pixels. If we say fresh, we'll get it a bit larger. Okay, perfect. And one thing that I think I forgo as you can see that this color, it's a bit gray age and here it's black. And let me fix that by giving this property to the container. Just this container. Here's our gets all the chicks in our webpage so it can say color and the color maybe Okay , let's safe. And a fresh perfect Well, it's a bit like, Yes, it's a bit lighter than our example, but works as well. And also the height. It's a bitch. Too much Yes. Social reduced the fight of our container. So maybe 400 pesos. Let's see how I was going to look. Okay, Not that bet. Maybe 1 380 But again, this is for my particular screen and yours. Your values could be different if I refresh. Okay. And this is guys, how you can start our page and last thing that I forgot Watts sees this is a longing for we forgot the form itself so that just as it so it could everything technically correct a on this bottom. You can also say that the type submit and we're good to go here. We're going back, Logan dot PHP. This is going to be the script that is going to be handling the four and the metal off the form is going to be post. And don't worry about these things. We're going to learn them in the PHP section. But this is Cairo can start our webpage. And this is our guest. Are looking for. And now it's time for your challenge. I want you to create brand new 44 registrations and also to style it. This is going to be on most of exercise because you need to get a new idea in a few how different CSS components and CSS properties work together. I hope you enjoy this lesson. I hope you got a good practice out of it. I really do hope you enjoy it. Okay. Thank you for watching on day care.