Welcome to my course. Before we dive into our first lecture, I want to talk about the editor I'm going to use, Microsoft Visual Studio Code. The editor is available for Windows and Mac OS, and I'm going to use it the whole course. The following me during the lectures, it is important to memorize some shortcuts. Let me now open for the first time Visual Studio Code, and show you the interface we'll use, and what commands you should know in order to follow the lectures. So this is the surface of Visual Studio Code. When you open the first time, you will have this welcome page. You can just close this, we don't need this one. Now, you see already you have here, show all commands, and this is actually an important thing. If you hit now this commands, like Shift, Command, and P. In Windows, it should be Shift, SDRG, and P. And now, you see here all the available commands. Let's see if you open here, like help, markdown, your window, for example, and preferences. This here is something, shortcuts for add on I installed. You won't have that one here, of course.  Clear the terminal commands, of course, too, because it has actually an integrated terminal. I'm going to show you how to open that then. And also some view, some other stuff. Okay, we won't need anything, like everything here, we just need some specific commands, or you don't even need them, some of them really, some of them you can just use by clicking or whatever. So, first of all, let's open a new folder. This is the first thing we do. We open a folder, we give it a project folder, something like that. I have now here a project folder already prepared, so I'm going to open this. And there are already a lot of folders, because actually I recorded this video after I recorded all the other videos, but don't worry, I mean, this is just folders here under some folders where our projects are later, will be. So, if you want to create a new folder, for example, in each lesson, I will work in a specific folder. In the next lesson, or the first lesson will be, for example, CC sees as box model, and what is that box model? So, this folder will be that one, and here you have some subfolders. What is the box model will be the index here? It will be within that, and the second one, the content of the box will be in this folder, and so on. So, you just create a new folder, which you do by clicking on this icon here. Now it creates, of course, a folder within the box model folder, just break it up.  If you want to delete this, right-click, and click on delete, click to trash. So, this is actually how it works. This is how you create a new file, so if you want to create a file in a new folder, you just give it a name, and don't forget to add the ending. If you, for example, create an index.html, then also add the ending.html, otherwise it won't work. All right, so, I'm going to delete this here. All right, okay. This is actually how it works. Now I'm going to show you some specific commands I'm going to use on an example file, so I just create here a new file quickly. Example, let's call it HTML because with the ending, actually, it recognizes some stuff because Visual Studio Code has already a plug in installed. It's called Emmet, and you can do something really cool here. If we create some HTML structures and elements, we don't have to type everything out. What we actually do is writing the keyword like the HTML tag. You know, the HTML document actually starts with that. I mean, actually it starts with the type information, but in this, during this course, I will just start everything with the HTML tag. We don't use anything else, it's just examples. So, I have now HTML, and then I hit Enter. And this is all you have to do. You can actually build a whole structure just with Emmet and keywords. Just go back, return my action with command and set. And now what I'm doing is HTML. Then you use this here, create a then sign, and because actually you nest something in this HTML structure, and what we are going to nest in the HTML structure is definitely a head tag because this is the basic structure of HTML and a body tag. And then we hit this and see, we have already the basic structure of our HTML document. So, let's just sort this a little bit. And yeah, this is how you do it. Now we, for example, add here. This will always be just a base structure, by the way. The title, the meta tag, and a style tag. I will use during the course just in line CSS, I won't use any external CSS file because this is just easier. It is not that much, CSS actually, you will write here. So, enter, give it a title. Yeah, the meta and also the jar set I'm going to use, UTF, eight during the course, and then some styles and so on here. And then you, for example, you can also make kind of mathematical commands here. You can use multiply plus and so on. So, I mean, you saw that already, if I create something like, I want to create a diff tag and a p tag and h1 tag. Then I'm going to do this like this. But you also can use something like, I want to create unordered list. You know, with meta unordered list, there's usually a list element nested. I want five list elements. So, I just write, actually, list times five. So, li times five, which will create five list elements. And now I want to nest an anchor tag, for example. And then you have already the structure of unordered list for invocation or something else. Now, let's delete this. And something else I'm going to do often probably is something like that. They are like, actually create this again, like it's like five, and then hey, I will do something like this. For example, when if something is wrong placed here in the wrong position, I'm going to select this line by clicking command and I. This is the first line, the second line, this line. And if I want to move this whole block away, I just click alt and then the error for error keys. You see, I can just move it where I want. This case, of course, is right, so we just leave it here. So, this is how, actually, what I will mostly use here, something else I'm going to use, jumping, of course, to the end of the line. You just do it by command and error keys. So, back and forth on the end of the line and on the beginning of the line. Or if you just make big jumps, you just click alt and then the error keys, you see, makes big jumps. So, you don't have to put every single step here. And something else I'm going to use is multi-line selection. This you can do, for example, by clicking alt command and then arrow key down. So, now I selected all these lines here. And now we can add something. Yeah, you see like that. This is pretty handy, for example. So, this is actually all I'm going to use mostly. The rest is not that important. You can, of course, look up if there's something else which is kind of interesting for you. So, remember always shift command and p to see all your commands and what you can do for shortcuts. And menu specific is pretty similar actually to macOS. So, you won't be that much different. So, I hope to see you in the next episode where I talk a little bit about the operating system on other specific elements I'm going to use because I'm going to use macOS during the course. But it shouldn't be a problem for Windows users as well. So, I'm going to see you in the next episode. Now we talk about specific things I'm going to use and there's no difference between on the versions I'm using on macOS only because I'm going to use the browser Safari to open our files. But it is actually the same on Windows. You're just going to use the Google Chrome browser. And I wanted to show you the terminal at the beginning because in the previous episode I said I will show you there's integrated terminal. So, here you see the shortcut or you just click on actually view and integrated terminal. And then there's this terminal. So, here's the terminal. You can list your file, like your folder content and you can also create your folder and so on. Yeah, and so on. But we are not going to use actually the terminal because we are not going to code in JavaScript. We only make CSS here so it's not really necessary at all. What is actually kind of important is that I'm going to show you how to open your file, your HTML file and you're going to do that by clicking on the HTML file. Right click, copy the path or using this shortcut here. And then you are going to use the browser, open the browser and you're going to copy this in and then just hit enter and the file opens in your browser as HTML file, of course. I have kind of a little problem always. You see here, this doesn't work really. And I always have to add this file, double point, slash, slash, slash, and then you add actually the path. Otherwise it won't work. But as I meant before, if you open Chrome browser, it's the same procedure. So you open the Chrome browser, paste in your address and hit enter and it automatically opens actually the file. So you see there is no real difference between Windows and MacOS I'm going to use. It's both the same. The only thing is the commands and the shortcuts. But as I said in the previous episode, you just click shift, command and P and you see all the commands. I hope that will help you. If there's any questions open, please don't hesitate to message me or create a question in Udemy. So someone else will help you. If you ask me personally, I will try always to answer in time. So that means within a day. It will be not always possible because I work full time next to that here. So, but most of the time I will answer within a day. And I hope you will have no fun. We will create now or step now into our first section and our first code we will write. First of all, welcome to my course. And we'll start now with the CSS box model. Before we start right away writing some code, we wanna clear what is the CSS box model and what do we define as box? Well, if we create an HTML element, the browser draws a box around the content, add it in our HTML elements. Let me show you that. If I'm going to create here some basic tags like a P tag with some learn Ipsum, fill text, or a h1 tag with some nonsense tags, and then additional let's create another list and some list elements and open this now browser. Then we have all these elements here and each element appears on one line. They stack on top of each other. Well, these are all boxes. So the browser draws a box around this element, for example, the browser also draws a box around this h1 tag here or this unordered list. If we now just do simply add a border to all these elements. So first of all, let's add a border to the P tag, to the h1 tag, and to the unordered list. Let's make one pixels. I'll add in, let's get the fire brick and then reload the browser. Then we see the boxes. Now, additionally with the box, there are four separate edges. There are the content edge, the border edge, the padding edge, and the margin edge. Is there no Cs as property applied to our html element, then all the edges of the html elements will be the same. But our browser automatically adds some styling, such as margin or padding. We can see that in our browser here. This space between the very top of our window here, our document and the very left of our document and our html elements, this is some margin defined by the browser. If I'm going to reset this now by selecting the body and setting the margin to zero and reload our browser, then either the disappears the space and our html elements right away are on the document borders here. If our box doesn't have any width or height set, then the box is set just around the content. We can change the width and height to a specific value or even a minimum or maximum width or height. So let me add width and height to our p element. Here our paragraph, say width 400 pixels, and let's open this in the browser. Now you see our element has a width of 400 pixels, so it doesn't have the whole width anymore of our browser. It still is a block level element though, so it still takes up the whole width of the document, but we will come to that later. Now, I talked about these four separate edges, the content edge, the border edge, the padding edge and the margin edge. We'll start now with the padding edge and if you want to add space between the content edge and the padding edge, you just set simply the padding property. If not specified, the padding will be added on the top, right, bottom and left. This affects the actual size of the element. I'm going to show you that by adding a padding to our paragraph. I'm adding a padding of 25 pixels. I'm going to reload this in the browser. And you see, there is now 25 pixel space between our content edge and our padding edge. This padding size is of course added to our content width to the whole width of our box. So if we have now 400 pixels with our paragraph of our box, we have now to add on each side left and right 25 pixels. So the total width of our element is now 450 pixels. If you want to get rid of this behavior, we can use box sizing and then border box as value. I'm going to reload now the browser. And you see, it disappears. So it actually shrinks the content because it takes now the padding from inside without giving the A and JL element additional width. You can set the padding separately for each side by writing it like this here, padding. Now you give it the top size, the right, the bottom and the left. So let's do this by giving padding 50 pixels from the top. From the right, we want 20 pixels. From the bottom, I'm adding just 5 pixels. And from the left, we say 100 pixels. And I'm going to delete this here. Open this in the browser and reload. Now you see that applied to our HTML element. So we have different paddings now from the left to top, the bottom and the right. To set all sides with the same padding size, you just use the simple short form like we used before. Just one value. Now all the same padding sizes are added to the left, right and top and bottom. And if you don't want to add padding adjust sizes to the actual size of the element, then you can avoid that by setting box sizing to border box. And you can set additionally a border. We talked about that just so I also mentioned the border edge. And the border edge is between the padding edge and the margin edge. The border edge works simply the same way. You set the border like we did here actually. And it gets added to the actual element. But because we have box sizing it doesn't add. So if you just do that now for our h1 element, give it a border of 10 pixels solid green and reload our browser. Then it will be added to the actual width. If we set a width of course. So let's add a width to 100 pixels. Now our element doesn't have the width of 200 pixels. It has the width of 220 pixels because we have to add again the border to the left side and the border to the right side. And if you want the total height you have to add it to the top and bottom as well if you set a height. You can set the border to any size and color you want. You have the following options as border style. You can add the border style separately by saying border style. Or you just simply use the form I already used the whole time here. First the width, then the border style, then the color. We have the option dotted. Let's open this. And you see we have a dotted border. You also can say you want a double and you have now a double border. Or you can add a dashed border. You'll see how that looks now. And now you can also add an inset border. This is how that looks and how it's set. And this is what that looks like. Margin on the other hand will be set on the outer edge of our box. So it pushes our box away from other content. For margin are the same rules as for padding. You can set each side individually and you can write it in the same form. Let's do that with our UL element. Writing a margin. Again top we want let's say 200 pixels. Then from the right I want 50 pixels. From the bottom I want 5 pixels. From the left I want let's say 300 pixels. Some we won't see because we actually don't have an element on the bottom. And now just reload and you see it pushes our element away from the left and the top. From the bottom not really because there's no element where we can push from. If we apply the same to our paragraph. We can use again the short version like just for all sides let's make margin 25 pixels and reload. Then it gives 25 pixels from top and left. And if that would be element to the right then two and from the bottom two. But what you can actually do with margin is comparing to padding. You can give it a negative value to move the box relative to its position. So you can set for example our h1 margin. Let's use the left minus 20 pixels. And you see it kind of moves the box to the left and a part of that disappears. This is of course all the other version how you can write it. You don't have to write it in the longhand version with margin. You can use margin left, top, bottom and right to get the same effect. Welcome to our second episode and our second lesson. In the previous lesson we talked about the box model and what the box model actually is. And now we will come to the actual box content and how it will affect our box. To start we will create a paragraph and give the paragraph some fill text. Then I'm going to style that paragraph and give it a border so we see the box. And I give it a border of gray. Then I'm going to load this in our browser. And you see our box here. To change the content within the box you can for example change the style of the text or font. We can change for example the font size. So let's change the font size to 24 pixels. Loving the browser again. And you see it affects our box. Our box gets bigger because the content gets bigger. Also we can change the font family to sense serve for example. You see it changes our text. And in specific cases it changes our box of course too. Because different fonts use different sizes and settings. And also we can change the font weight. That's set to bold. You see that it affected totally our box. And that it grow a little bit more. Now we can change also the font style. For example to inherit initial, italic, normal and so on. I will set it to italic. And you see our font is now italic style. When we use font indent then I think I wrote something around here one second. Italic text indent was not font indent. Then you can actually give the first line of text a little bit space. So that's 12 pixels. Now you see it pushes the first word to the side and the rest. And we even can now change the letter spacing. Or the word spacing. Let's just change the word spacing. There's a space between the words obviously. So let's say 10 pixels. So we'll look in our pre-word. But also letter spacing can add 6 or 5 pixels. Just to demonstrate you. Now we can add our box a background if you want to. A background color. So let's add a golden background color. Now you see our box has a golden background color. If you want to we can add even a background image. By background image. Or just background would do it too. Now just open placeholder.com. We will use that more in future lessons. So I'm just going to copy this here. And paste this. And then I set our background size to cover. It has the background. We don't see it because it's stretched and fits to the rest. So I'm just going to give our box a width and height.  And a height 250 pixels. And I'm going to change the size of our placeholder image to 250. Times 250. Now notice. Now we see our background. The picture is perfectly fitting. But our text floats of course out because we have too much text. We can set of course the height or what it do. But let's not use that much text here. It's also like this. And reload. And you see we have your background image and we have our text. Now what we also can do is we can add a box shadow property. The box shadow property can actually add something outside of the box. With the box shadow property you have a little bit to experiment actually. You see we have now your box shadow. Let's make it not extremely black. Let's make it slightly gray. And you see we have our shadow. Our box. Now you also could do rounded corners by adding the border radius property. And set it to 100%. We'll make it a circle. Let's see. Now later we will talk about images. Because images are of some specific rules. Because they behave as an inline element. If you don't know what it means now don't worry. We will discuss that later in the lesson. Let's have now a look at the display property. All of our HTML elements do have a display property setting. Most of them are block level elements. That means they take the full width of the available space. So no other content will be next to them. I'll be sure you that by creating some of these block level elements or just creating some text. And there are block level elements as we will see. Such as a diff container. So what else? A paragraph. A headline. And an unordered list. For example. I create all of them and give each one some content. Laura Ipsum as full text. Maybe here a little bit more. It doesn't do it. Now it does. Okay then here some art text. And here we give some links. And list elements. I mean I will add number one. Let's just do it like this. Number. Now I'm going to set two and three and four. Open this now browser. And now we have here our HTML elements. Each one of them is a block level element. So they take full width of the available space. In this case 100% of the document. So they float underneath each other. I'm adding now again. Everywhere at border on each one of these elements. So I'm going to say diff p h1 and unordered list. We'll have a border. One pixel solid red. Open the browser and reload. Then you see each one of them as box. And every single element is a block level element. Because it takes the full width. Now if you add padding for example. To one of these elements. So this element. Then their padding. Also the margin or a border. Will add to the size of the block level element. So the size of the padding. The margin and the border will be added. To the size of the box. If I give now the box a size. Let's say 400 pixels here. And also a height maybe of 300 pixels. This will be our diff box here. I give it a different border color. Maybe I'll make it green. So you just see the difference. And now I'm going to add padding. Let's make 20 pixels to all of the sides. You see it grows. It's not 400 pixels anymore. Now we have to add the 20 pixels to the right side. And to the left side. To our width. That means the actual size is now 440 pixels. And the height is the same. The actual height is now 340 pixels. And if you want to avoid this kind of behavior. You can change the display property. We will come under that. There is the next one we will talk about. Is the inline value of the display property. And this will make our box to an inline element. That means that the box is inline with the other content. So if you add padding, margin or border to the element. It will be added relative to the normal position of the box. So let me do that. Let me display inline here. You see how that affects our box. And actually how our editor, our code, our visual studio code. Underlines with this green line here. Our property is width and height. Because they are actually unnecessary now here. So let me just delete them. Now if you add padding to this element. I said it will add relative to the normal position of the box. So just delete now the padding. So you see the difference. So you see it will take no space. And now I am going to add it again. 10 pixels this time maybe. And reload. You see how that affects the box. Now you can use the inline block display property to the element. If you want it to behave like a block level element. And still remain inline. So you can add padding, margin and border normally to it. Let me do that by inline block. You see it normally affects the box as like as a block. Just it's now an inline block so it doesn't take full width. And if you set the property to inline element. I said you can add the margin border normally to it. But you can add more values to the display property. One of the values is actually flex. Which I will discuss separately with you. Also you could add table or table cell to your display property for vertical alignment of your content. Welcome to the next lesson. In this lesson we will talk about images. Because images are inline elements I will talk about this separately now in this episode. So why are images actually inline elements? Well think about emotions, smileys and so forth. They are commonly used within text messages. And they appear in one line with the text. So they all inline. If you add a border to an image. So if you nest the image within another element. You may notice there will be some space between the bottom of the image and the bottom of the parent. Let me show you that in CodePen. Because it actually doesn't work in my regular browser. So I'm going to create a drift tag. And nest within an image tag. And I give the image a source of this URL here. Which is just a placeholder image. Now we will see this here. And now I'm going to add to the image. To the diff, excuse me, some border. One pixel solid red. And now you will notice the space between the bottom of the image and the bottom of the div. So why is that? This is because the image is sitting on the baseline of the text line. And it's not something like padding or margin, predefined by the browser or something like that. So if I just now use a normalized file. Which resets the browser settings. It will still appear. And this is something you can fix. Of course. And you fixed it. If you just simply set actually the display property of the image to block. So don't just say image, block. And it disappears. So the image becomes a block level element. In that way we can use padding, margin and so forth with our element. We will talk now about positioning. If you don't set any value to the position property of our HTML elements. Then all the boxes are shown one after the other. With the position property we can manipulate that behavior. By default it is static. That means it will be placed by the normal flow of the content. Let's just make that a little bit visual. And I show you that by creating a birth tag. And I'm going to create three of them. But let's give them all kind of class. Let's say box. And each box will have a border. Five pixels, solid, red. We'll have a background color of green. And this should be actually all. Now let's open this in our browser. Copy the pattern. And we see this actually, but of course you don't see anything with our margin. So let's add a margin of 12 pixels. Now we see it. Let's give each box a height, 50 pixels. So we will see this box. And you see we give none of the boxes any positioning value. So if you want to manipulate this behavior. We can set for example the positioning property to relative. So I'm going to select the first box. I'm going to use here nth child. This is a sudo selector. We will discuss later. Now I'm going to add the positioning attribute. I'm going to set it to relative. Let's open the browser. Nothing will change so far. But we actually can now do something. We can use the properties left and top and bottom and right. So let's just say now we will go from the top 20% open the browser and reload. And you see our box is now placed 20% from the top. Also we can use here a set index which will give our HTML elements additional access. The set access means three-dimensional so we can actually have layers. But for now let's just use the positioning. So if we use the relative position we can use the top right bottom and left property to set the position. Often the relative position is used by a parent element to position the child elements. I will show you that after we talked about the value absolute. And we're going to do this now. I'm going to reset this here. I leave that to relative. And I'm going to select the last box, free. And I'm going to set the position to absolute. Now the box actually floats completely out of the location. And it will be taken out of the normal location and it will be positioned by its parent. If the parent is not set to anything or is set to anything but static, then that HTML element will position by the HTML document. That may sound a little bit confusing. Let me just show you that. So this element here, our box, doesn't have any parent which is set to relative or absolute as well. So it will actually now be positioned relative to the HTML document. So if I'm going to say now here 50% and top 50%. Then it will be assigned here in the center. Well, it will squeeze together because the content and the 50% on the left. So let me just do it like this. Actually, the content floats out. Let's give it just a little bit of content. And I didn't set any width. I just forgot. So let's give it a width of 300 pixels. So you see, we can position now this element. We can, for example, say 50% on the left again. Now it's not positioned in the center directly as you would assume actually. Because you say, well, I'm positioned at the left 50%, on top 50%, shouldn't it be directly in the center of our screen? No, it is actually not like that. Because the document or the element will be drawn from this point on, this point here, the upper left corner of this box. This is the center. From this point on, it draws our box. So we actually have to reset the half of this box and also the half of the height to get the absolute position of the center. So we can do that actually. We can do that by using transform. And then we say translate. And here we just use minus 50, minus 50 to do exactly that what I just showed you. And now it's perfectly positioned in the center of our screen. Now I told you that if the parent of something absolute positioned will be anything but static, then it will be positioned within the boundaries of the parent. So I'm going to show you that by creating a new box. Give it again, box, of course, the class. And within the box, I'm going to nest another box. This looks not like this here, but I will actually delete now all the starlings here. So everything will be in the same flow. This looks not like this. First of all, I will select the last box. This will be number four. And I will give it a width of 500 pixels and a height of 500 pixels like this. And I will set the position relative. Nothing happens yet. But now I'm going to select the nested box. I'll give it actually a different class here. Let's go to the next box. So nest box. And I'm going to give it width and height as well. Give it a width of 100 pixels and a height of 100 pixels. And just a background color of, let's say, yellow. Here it is. And now I'm going to change the position to absolute. If I reload now, nothing happens because it automatically sets left and top to zero. But if I'm going now to say here, right, zero, top, zero, our element will float to the right, zero and top, zero position of the parent because the parent is relative. The same will happen now if I'm just going to say that the parent is absolute. Nothing changes. Of course the position of the parent changes a little bit because the position is absolute now. But the child element still assigns or is positioned within the boundaries of the parent.  And I will reload now. Then you see the box is again positioned on the right, zero and top, zero position of the HDL document. And now there is another position value we can give. The last one is called fixed and works exactly the same as the position absolute. With one exception that the position is set relative from the viewport and it's fixed there. So you see we can scroll here. If we are now going to add another box, or just let's take your second box because we didn't use it yet. So the second one. I'm going to add here position fixed and say left 50%, top 50%. And I'm going to add here again transform, translate minus 50%, minus 50%, because remember this is how we center absolute elements. Now we have the element here, but I'm going to add actually a width here. 250 pixels and height, 250 pixels. And now we have here the element and if I scroll, there isn't much content of course, so I don't scroll that much. But you see it's fixed in the screen. It moves when I scroll with me, it's so fixed to the viewport. Let's just give it a little bit more content now. Just add here another boxes. And then I reload, follow the motor scroll and you see it's totally fixed. And you can just scroll with it. This is how you create kind of parallax effects and so on. One essential thing in your page will be of course links. You always want to refer to your external page, or you want to even refer to your internal page. So whenever you do that, you use an anchor tag or anchor element. You're already pretty sure you know how you look at it, it looks like A, and it has usually an href attribute. And this href attribute, we can target now different things. Whether it's an external link as I said, so I'm going to add this for example. So for example let's say I'm going to add Google. And this will be my external link now. So I'm going to click on Google. It doesn't redirect me because it's actually adding this Google page in the end of the domain of CodePen. But it would of course redirect us. I can show you that in another example then when I use Visual Studio Code. Anyways, you can use here also an internal page. So you can refer to an internal link or to some anchor point. So you would do the same actually. But if you want to refer to an anchor point, you're going to do the following thing. You have now this A here. Or let's create quickly actually our little navigation again. So you just repeat this thing. Another list. You can't do anything. What is happening? Another list. It doesn't let me do the creator of them. Let's really do it quickly. I have no idea what it is. What is happening here? Just a little, whatever a little bit. Okay, we have now another list. We have allies. And we have working allies or an anchor tag. And let's say you just make four elements here. Of course it's still going to work. So let's make four elements and let's give it an anchor here, anchor here, anchor here, anchor here. This is our navigation, right?  Let's create how many elements we have for. Let's make four. So we're going to start to create a placeholder. So with percent and hide one thousand pixels. Some background, background, placeholder. Again, the same thing. And child. And this time we stop to second one, of course, because I don't have this as our first one. So the background color green. Then I'm going to add placeholder, child three dot four background. Let's say red. And the last one. Placeholder child five. Perfect. Well, now we want to refer to these elements. So we have to give actually each of these placeholder elements another attribute that this has another attribute to retrieve the ID. And we say here this is our about page for example. This is our product page. This is our reward today, well. This is our blog. Have something like contact. Now each one has every element has here some kind of ID, right? Let's make quickly at least normalize here that the noise movement doesn't take the bubble. All right. And now we have here our wrangling. So I want to refer you to the about page. And here I want to link to the product page. Here I'm going to link to the blog. And here I'm going to contact. And of course we can quickly stop the whole thing. Let's make it like that. Well, let's say. Well, the display inline block. All right. It's okay for now. Let's give quickly some padding, pixels. Remember why it doesn't work. It's an inline element. So we have to say display block. Awesome. All right. Imagine notice anyways by also by the way that you have a much more clickable area if you add display block in the padding. And now I'm going to refer to the links or to this IDs here. So all I'm going to do is add the ID. So that ID, of course. I'm going to add about ID. The product. Here was the block, right? And here the contact. So if I'm going to click now on one of these elements, it shows me the page, right? Contact is our last one. The block one is the red one. And so on. So you may have noticed this on this typical one page. Scroll websites where you just scroll down actually the whole time. And then you have some icon or some button where it brings you up again. And this actually works the same except there is some JavaScript of course for smooth scrolling and stuff. It scrolls much smoother than if you're going to button and automatically rolls up to the top. And this is how you refer to internal IDs and pages like IDs like anchors. And what you also can do actually with the anchor tab is to refer to a file you want to download. To show you that and to show you how to open external pages and how to modify a little bit how you open them with the target attribute I'm going to open now the visual studio code. Should be open now here. This is our visual studio code. Normal HTML file. I have used some example DMG file it doesn't matter what it is. And first thing I'm going to add a normal anchor tag and refer to external page Google.com because it didn't work the previous time. I'm going to save this and I'm going to copy the path I'm going to paste it here and open it and you see here's our link. I click on it, it adds that path to our file you see here. So what we can do here actually we can modify the anchor tag by setting a target and let me do everything correctly using HTTP and I'm going to say in the target link we'll now see what that does it's reloading and it opens Google and it opens Google on a new page in a new tab so not at the same page so we have always to go back so if the standard behavior would be it opens in the same tab which is called self actually so that does the same thing like the standard behavior, the default behavior so I'm going to do this again here it opens Google on the same page and don't forget to add HTTP so it won't just add this thing in your local path and this is how you do that now but let's see what else we can do now and we can refer to a file so all we have to do is copying here the path or writing here the path to our file in this case our test dmg I want the download and it is already in our root path so I'm just going to add this here and say here download me save that reload and click this and you see you can download it I'm not going to do this now because it doesn't make sense but you could do it like this so you refer for example on your page on a specific path or folder or something and here you can download down your files or here visitors can download files congratulations you made it so far now we will talk about lists and we start off with the ordered list and it isn't what it actually is that's it's ordered list so it's a numeric list or like yeah a numeric list usually but of course you can change some behavior of that list and you can do some interesting stuff with that let's create an ordered list now ordered list you create with the keyword ol and you give within the ol some child elements these are li's and I give now six li's and I just give it some names or something let's make some cities room let's go and you see already the default behavior of an ordered list it's a numeric list from one to whatever how many elements do we have and this is how it shows that but you can change actually some behavior the way how it will count your stuff or how it will show that list so you can add some attributes first of all you can add something like called reversed to your order list so let's just do that reversed and you see it reversed the order of our list here so it starts now from six and counts down also what we can do is setting actually a start value let's say start and we give it a value 10 so it starts counting from 10 that's pretty simple actually so there's nothing more actually to explain about what else you can do is changing the type well this means how it does it count or list our elements we can also make it alphabetically so we give them a and what it does it says now a b c t e f and counts it like this we can make a capitalized uppercase letter and it counts still just with uppercase letters and what we also can do is adding a i and now you see it's listing in roman numerals you can make this too so let's say this we have uppercase uppercase letter roman numerals that's pretty cool and default of course it's number of course you can still give it as an attribute and it normally counts off your list and of course you can also nest that means if you want to make an order list then we just do that let's create another order list and another six elements and this select elements you have what about something else or let's actually do that a little bit different let's add this order list in another i element and let's say ll and li let's make just four and you see now it looks like this let's see now we have put here something like Berlin again and now I kind of here I don't know cities in Germany for example Stuttgart Tristan so you see this is all pretty simple and now we can give it for a different time let's make this now alphabetically and this is all about you can say about the order list actually so if you need it just yeah choose which type you want and then quite like this more interesting will be now the unordered list what we will talk about in the next lesson and we will do during this whole lecture section and project we will already start creating our first sticky navigation which is pretty cool because we already use positioning and we already used like yeah all kind of what we learned before all the stuff we learned before we finally gonna use and I hope you like that finally now we speak about the unordered list because the unordered list is so pretty interesting because we are creating navigations out of it usually and let's start right away I'm gonna create an unordered list with UL and give it again chart elements, LIs and let's say 4 and this is our unordered list yeah let's get some names for example like this and we have now here our unordered list we can add again some attribute called type and change this little icon here our list icon and we can edit we can change it to a square for example so we have now a little square you can see that and also we can say disk and yeah of course circle and what we can do now is actually we can nest elements as well as in the order list so I'm gonna add another unordered list with let's say 3 LIs exactly and we change here the type to disk and give it some another names let's say I don't know Ryan, Peter and Jet and so this is actually our unordered list there's nothing not that much to talk about I mean how the list itself works I mean you of course can add also or nest like within your unordered list an ordered list it's not a problem you can just do an ordered list and give it some new elements of course not like this and here we get a hash load and it's nested like that you see that well but interesting will be if we can change here kind of the behavior of this whole unordered list we can say unordered list and give it now some elements like I give it an a and give it 5 of them for some reason it doesn't do that for one second so it's supposed to add now all this stuff here but it doesn't well whatever let's just do it like this then and add here an anchor tag anchor tags are just links I'm going to talk about it later and add here some like I don't know let's say blog and news shop maybe and this will be our notification first doesn't look like real like a notification so far so we're adding some CSS and what I can do is just like make all our eyes as you remember it is under our like blog elements so I'm going to make all my eyes inline blocks and you see they float next to each other and this is actually how you create notifications plain simple and yeah and so forth and in our next episode or next lecture I'm going to create a few of our first project and we'll be a sticky navigation so a navigation that sticks to the top like we already talked about in the precisioning lecture so I hope you to see I hope to see you there and I hope you will like it now to our first real project where we finally use what we have learning the breeders lessons so we are going to create a sticky navigation sticky navigation you probably have seen on some pages see we go to blog or something let's see if we find something like that let's see if WordPress has this actually it has this is a sticky navigation it sticks to the top even if you scroll or let's say something like this and it has a sticky navigation too you see here yeah this is a sticky navigation of course with javascript you can do some good animations here so if you scroll down it disappears or it makes it smaller shows some details gets transparent or something like that but to the sticky navigation itself now we are going to create a div or let's make it and then we are going to create some another list and within the another list some eyes and I want some anchor text and I want this four times it doesn't do that no idea why okay let's make it hand like this and let's say okay here here here and here an anchor tag I don't care about the tag if you have attributes or forums add some menu points that's a product and tutorial documentation maybe about us and maybe contact page this will be our navigation and then I'm going to add some other elements because you want to scroll that whole thing and add some placeholder elements let's make three of them and let's make them first actually let's create the styles for the placeholder the placeholder does have some different background let's make first basic styles so I'm going to say with 100% height view height and let's make the view of two on a flow I give here hidden and this should be right actually and now I give each placeholder I'm going to use here some pseudo elements you don't have to care about that now I'm going to explain all that later basically it's just this element this nth child the first one of these placeholders and I'm going to give it a background background of green and the next one I'm going to give a background of red this one let's get a background this should be a red for and let's give it some kind of actually add actually to where the night is so far what we shouldn't forget here to reset our CSS space normalize it let's make a midnight let's say 100% worth 100% should actually let's say overflow delete actually I don't know why I added it usually it should work with view height view height and view width but for some reason I don't know so let's give it just 100% and here some whatever as a height now it's not important actually you see just we have some content here and yeah the last the one I just created how many did I create actually I created one, two where's the green one the child doesn't, it's not right with the child of course I have to make two, three and four because child if I say add child it counts all in our document root now so the net is our first child this is our second child this is the third and this is the fourth so now it works alright so I'm gonna add now the styles for navigation so our navigation is position fixed it's supposed to be fixed I give it a background color there so we see a little bit the whole thing I'm gonna make our gba and give it a white and a little bit opacity let's say six alright so I want it to be completely 100% white here and when you remember the previous lesson I noted lists I want to have this list points there floating next to each other I mean I can do it in several ways I can do it like this I can say and give it a display in line block of course that works so we have now already our many points here or I'm going to say just float left then they float next to each other as well both works both has different behavior though and let's say display in that block for now I don't know why I always write block I don't know and now we are adding the A as style I want a style to be color and black or at least make it really dark gray or something like that that's too bright I think for some reason I had A of course I see A here and let's make it like this maybe like this a little better like this I think like this is good I give it a text decoration you get rid of that undermining and everything you see like this and I give it actually a padding I give each element a padding of let's say 12 pixels I think this should be fine and I have to say here display in line let's make it block level display block if I am going to do this you saw it actually doesn't add a top and bottom padding well it's because it's display in line so anchor elements are display in line so to change this kind of behavior I am going to make it display block and you see it's adding also the padding to the top and bottom now what I am going to do is add some hover behavior so when I hover over this element I am going to change the background of this element and I make it just white all let's say RGB A 255 255 255 at 1 for null part opacity and if I see a float over that I have this box selected well I don't want any of this spacing here I didn't give it any padding right so I don't know some what because here some margin so all the padding automatically so let's say reset this and now we got rid of this and we can of course say now to send it the whole thing if we want it to look maybe better I don't know so we can text the line send her and we have now a wall navigation centered and as you see we scroll and our navigation stays right that's quite nice could be also we want our navigation on the right side I mean all you have to do is like let's float it float it right and it's on the right side you see this is how you work with navigations and how you create just a simple very simple sticking navigation and now you could add some stars, some javascript let's try I mean let's say you select now this navigation and here scroll down and if you come to a specific point or it's kind of just going down and you make it completely wide so the opacity disappears so it's like opacity 1 then and stuff like that and of course you can put much more stuff in your navigation put maybe instead of just one URL on our list another element in the net float it left for a logo or some some social buttons or something like that but for the basic understanding and the first project I think this is okay in some I hope you understood everything if you have some kind of problems to redo this whole project please message me or open the question I'm sure everyone will be happy to help you let's start with our first lesson every one of you maybe familiar with CSS basic selectors like the element selector like we write something like urli and then color red which selects all li elements within the url element every li element which is nested in the url element also you might be familiar with the id selector which is written like this list for example id list gets selected or the element with the id list gets selected and I give it a color green then we have the class selector I'm sure everyone is familiar with that too when we give it a class for example work and say color purple now I'm going to write quickly a url list free li elements just give it a name max,pd and fall then I'm going to create list id just let's say we give this li element the id list and this one the last li element the class world now I'm going to open the browser just to demonstrate what it looks like and you see the first one is red as we selected all li elements nested in the url element now why is peat and paul green and paul is purple this is because we overwrite the stylings peat has the id of list and paul has the class of world so we simply overwrite it now we are going to just delete the class and the id and maybe extend it a little bit here let's say we give it another url element and nest another li element free and give it some female names let's say paula something like just ignore the odds written from sessica dina and then more li elements another free with more names let's say dina next we have let's say andy and now I'm going to show you different selectors you may have heard of or but you don't completely understand them let's say the first selector we are going to use is this one I'm going to say url li one moment for that I'm going to change the url here to ordered list let's say color and let's say we give it a color more color for long green I'm going to delete these three styles here and now I'm going to open this and you see all the li's are selected that are nested in the url but not the ordered list and the nested li's well this is because this is a child selector and so it selects all li childs of url the ordered list is not a child of the url list I mean it is add a child but it's not the li child so now you can see the difference if I say url and just li so the element selector and say color green should see now this here all of them because it selects every li which is child of that one so it selects all the nested elements if I just switch this now and take this one on the top select this here and that one I'm just going to delete now show you again and you see all the li's have the long green with the child selector and that one has the element selector now we are going to do something further we are going to say something like url class name let's call it class name plus li what this is going to do I show you in one second let's give it a color of red and we give it here some element the class name the class class name let's say we give it titano class name and now let's see what happens nothing because I gave it url and now we see andy got selected andy is red why is that that is because we select the li with the class class name and plus li that means we jump just one li further and this is andy and this gets selected so it is red now I am going to say li that class name and then I am going to use the till design sorry till design and again li and say color and we give it here this chocolate color let's see what happens what happens andy got this color andy got this color hmm this means we overwrite it and this basically means that all the li's after the class name so after the class class name get selected so andy and bob every element after the element with the class this selector basically does in our next lesson I am going to show you attribute selectors and I hope to see you there I am going to show you the attribute selector let me show you quickly the universal selector I am sure every one of you is familiar with something like this here star or universal selector and background red if I am now going to refresh the browser you see the browser or the window is red the body is red this is because I selected basically everything everything in my html document so if I am now going to create something like and headline and let's say narrow headline and narrow headline and give it some text and do notice something like color and let's say white open the browser refresh then you see everything or all the headlines are white because I selected everything so I universally selected all the elements in my html document this is nothing new as I said but you can do something else with that let me show you by creating an unordered list with some li's and within the li I nest another unordered list with again two li's now I did something one moment like this and this again like this alright I think I did a mistake let's just redo that let's say maybe just like this here again unordered list unordered list and here another one of course not like this I want two li's alright now I give it just some names let's say max let's say peter let's say met met met and andrew all alright I'm going to show you now just quickly how it looks like I'm sure you know how it looks like like this so one unordered list nest is another unordered list and nest is another unordered list now I'm going to select a specific part or a specific layer just imagine it as a layer this is the first one this is the second one this is the third one so depends how deep you nested this element I'm going to say unordered list universal selector li color red so what do you think will happen let's see you see frank met andrew and paul are red that means I selected all li's they are nested within the first layer underneath the first layer this is the first layer so I selected the second and the third one now I can do something else I can say ul star space star or universal selector and color green going to open that and you see I just selected andrew and paul and they are green because I jumped basically just two layers down this is how the universal selector basically works of course you can combine it with another selector as I will show you in the next lesson with the attribute selector I'm going to use it too so I see you in the next lesson previous lesson we talked about element selectors and class selectors and id selectors so basic selectors in this lesson we are going to talk about attribute selectors we can do a lot of cool stuff with that I'm going to show you how that works by showing you first or creating first the input element because we need an html element which contains an attribute so input I'm going to create four of them and each one has already an attribute type you see here now I'm going to add attribute name and I call the first one first name the second one last name then email and then password alright now I'm going to select some of all of them actually by a simple attribute selector called just input and each input which contains the attribute name I'm going to color this red background one thing to just show you that better let's say we first name last name email password I'm going to open this in the browser and reload and you see we have here four input fields a place or color because I selected all of them with the attribute selector by saying each input field with the attribute name background red now I'm just going to quick put these underneath because I don't like this this much so let's say display block and margin quickly a little bit pixels 12 pixels yes that's alright okay now I'm going to select some others let's say we want to select a specific one with the name attribute which contains password now I'm going to say background green and you see it gets selected because we selected the input field with the name password now we can do a lot of interesting stuff with that we can say for example input name and then I'm going to use the dollar sign equals and say again not done again just name and say background let's say yellow let's see what happens I'm going to select the first and the second one why is that this is because I with that side I say select each input tag where the name comes in the last spot so name is in both cases here the last part of this whole string here so I'm going to select that and make the background yellow here of course can kind of flip that here by for that we need of course something which looks a little bit different let's say input let's say name name name something I'm leaving out now that sort of and now I'm going to say input and instead of this sign I'm going to use this on equals name and say sorry background let's say blue going to load in the browser and you see I selected this one because this tells exactly the opposite I want name in the first spot now I'm going to do something like this here name and star equals name and say background let's say we make it this here and as you see I select three of them because now I'm going to say each attribute with the which contains name it doesn't matter what spot we have that so I select all three of them and give that the color Fuchsia so you see you can do a lot of stuff with this attribute selectors in the next one I'm going to show you some sudo elements sudo classes I hope to see you then let's come now to sudo classes there are a lot of sudo classes in CSS so I'm going to show you the most important ones and to show you that I'm going to create different input elements HTML elements so let's create first of all let's say five input fields I don't know if we use all of them but let's try first so I have here input field type email and I'm going to say name email to you and also give each one a label like this okay the first one has a label email of course and of course it's for the input field email the next one will be password password for the input type password and name password then I'm going to create here instead of type I'm going to create number let's say min 0 max let's say 10 and step 1 of course name I shouldn't forget I forget this would be here number this is for number then I'm going to create two checkboxes or just one checkbox actually let's say boom something like so it's for mail mail and here I'm going to delete and I'm going to make it just a ptech and say something nothing too creative and I'm going now to see I select the label tag and I'm using brackets and I'm going to say name email and here say valid now I say bottom let's say for pixel solid so if I enter something in this not label in this input in this input tag email which is valid html5 automatically recognizes notice that if there's something not valid token which doesn't fit to email and if it's valid then I'm going to add a green border let me show that you're right away in the browser refresh and now if I go this here you see the green border disappears I'm going to add now add something something or not come and you know it's you see it's getting green now I can do exactly the opposite so I can say input name email invalid and then I say again border pixel solid and here say red so that's refresh and you see it turns red because it's not valid add something something and it's green see it works not now I'm going to add something here our password one I had required so this input field there is something required we have to fill it out before we continue first I'm going to select the input field with usual attribute selectors let's say here name password and here say required I give it water again solid let's see backup verbal going to reload if you see it's selected it's required it adds this violet water here and now let's see we are going to continue with the number input I'm going to select the number input I say here type here I say something like out of range I think it's pretty self explaining what it means so anyways I give it a border if it's out of range I give it 2 pixels solid red so I guess you already know what it means I added to this input field a range from minimum 0 to maximum 10 so this is everything right here see I put something out of range should turn red and you see it turns red because it's out of range I can also again turn that and say got exactly the opposite I'm going to select again the same one and say in range and this time I give it a 4 or 2 pixels solid green same thing reload refresh and you see it's green as long as I don't overstep and put something in which is not well this works really great so let's continue with the last one which will be checkbox so first we select again checkbox you say input input you say type checkbox and now we say checked I'm going to add something add the p-tag I'm going to change the color of the p-tag and I make it let's say a different color here let's say blue make blue so refresh going to take it and you see that changed so now I'm going to take it and change spec blue and so on so you see there are pretty and pretty convenient these city classes and I hope you understood everything well and I'll see you on the next lesson because it was so nice I'm going to show you some more city classes such as empty, disabled, read only and read wide to show you that first of all let's try empties so I need input some texts name name first name and this should be all maybe another one just to demonstrate name last name and now I'm going to say I'll use our attribute selector again it's going to say I select each input field with a name let's say just each let's practice it again let's say name and it should be with remember with the we select each input field with the word name in the end so I'm going to do that but this I think this dollar sign equal sign and then name and I'm going to add some style but now I'm going to say it should be empty just if it's empty I'm going to add a background and the background will be red now I'm going to open the browser and to reload this and you see both is red because both is empty now I can do something like let's say keep this here let's add here disabled so this one is disabled and I say now the same input I'm going to select both of them name equals name and I say here disabled background green and let's reload this and you see I selected the first one it's still disabled so I can click on it and I selected this one now I'm going to show you the read only in read and write you can do something like this you can make a paragraph and you can say it's content editable without any anything else text and now if I reload the browser you see some text here and if you click on it you see you can edit the text here you can delete, write everything now of course I can select this I can select this by saying p and then I say read and write because this is my writes I have the writes to read and write in this p element so I'm going to change the color here to fuchsia and just to show it it doesn't look like the other one I'm going to create another one and another one and this has more text and let's see in the browser I just selected editable and you see I doubleize to that one if I just want to select each or every p element which is not editable I'm going to say just p and then read only read only and let's say I make now here the color gray let's just add some a little bit more p text text let's make it like this some more text let's see they all have the color applied for that because they're all editable so they're all read only so I selected all of them these selectors can be pretty handy sometimes too so I just decided to make an extra lesson to that I hope you liked it and see you in the next one we'll talk now about pseudo elements pseudo elements on the contrary to pseudo classes just create four elements so you can style them pseudo classes are like elements that are already existing to show you that I created two paragraphs here and I'm going to style them a little bit I used the knowledge of the Brio's lesson the pseudo classes for that so I'm going to select first of the type of the paragraph and then I say something like first line let's say first letter first and I say give it a color of red and I say text size text size of course font size and give it 36 pixels now I'm going to open this in the browser and reload and you see I selected the first paragraph and the first letter we can do the same with the first line so let's say I say here again first type and first line and I'll give it a color of green and also a font size 24 pixels going to reload and you see perfectly select the first line in our paragraph now there are some pseudo elements you might know already for example the before and after one just do I still show you of course now so it's the last of the type so we select that last paragraph and now we say here and some content here let's say add some text here and let me show you what happened we added after this paragraph just some content here some text now I can do exactly the opposite I can also say last of the type before content edit some text in the beginning and now I'm going to here reload and you see we added some text in the beginning and on the end this kind of pseudo element can be really practical if it comes to curating some forms drawing some styling some new website which I'm going to show you later also the content in general the content element generating content can be really handy I will show you much more on that too later just hope you like this lesson and you can see it's pretty practical to style your text and more of that later I wasn't really satisfied with this before and after attributes I showed you this kind of pseudo elements so I am going to a little bit more into detail with that because we I'm sure we needed quite a lot actually actually nowadays you needed a lot in web development if you create little tooltips you can use before and after elements or if you draw make a tooltip at all because for example these little triangles on a speech bubble or whatever this kind of element you see sometimes this is other in before element so to show you that I'm going to create little div and let's call it right away actually let's call it some kind of tooltip or also what we could do I know I'm going to create with you a timeline a timeline is like it says a timeline and like a vertical line and there you see different elements and there's like a point on this timeline which shows on this point something happened or this point there's a form or whatever I mean just let's create a zone I'm going to create a div of the class timeline and then I'm going to give it a child element and I call it timeline entry this will be an entry a little box or something with some content which points on that specific point on the timeline but before I'm going to do this I'm wrapping this whole thing up here so you see it a little better so I'm going to use a rubber and then I'm going to just copy the stuff quickly in here exactly like this and rubber space alright so we have this timeline entry here and within that entry there comes then some we can now just write some timeline content for example and before that content I add some timeline headline or I call it flag now here this is like a headline flag and here comes some content alright now I'm going to set the wrapper quickly I want it to have a max width of 80% and a margin of zero and auto let's make it top a little bit actually margin and I'm going to create a timeline the timeline itself it just takes the whole width of the wrapper and has a border left this would be our timeline actually so I'm going to say three pixels solid and let's make it black here you can see this is our this is our timeline and it's of course pretty short now it will grow with the content with the entries and what I'm going to do now is creating the flag right away so timeline flag entry first of course our box here which will have actually different backgrounds color would be kind of convenient here so let's set it to background and actually not the wrapper it's the background I want the whole body to have the background so let's change the background of the body right and the timeline entry has the background white you see this is this whole thing of course and now I'm going to say display the timeline block because I want the whole width here and I also want that it has a margin from the left definitely 25 pixels maybe let's see how it looks like yeah this is alright and what else I'm going to need here I'm going to add here our before the element now so I'm going to say timeline entry before so what I didn't tell you that content is always needed otherwise you won't see anything at all so you can write here anything it won't be shown if you don't write the content attribute here so now I'm going to set the saw thing absolute to absolute position it but remember that lesson about positioning we have to set actually this here position relative and and what happens here actually to or do better imagine it or do better understand the whole concept of this before and after but it actually does it does actually the following thing we have now here our timeline entry and within this entry element it creates us a before element like this or not like this of course of course not the right thing like this more imagine like this you have now here before and here you have another element after this is how you imagine or how you can understand that better what it actually does here what this before after elements creates for us and many people think actually it comes out often that parent so it would be here before and then there after but it's always within the timeline entry so because of that we have to set it of course relative so we can position it absolutely better so what I want now I want it left zero top zero and I want a triangle right pretty simple I just create a border 10 pixels and say and I say transparent what triangle we need here is the one that points to the left which would be our border right actually so I set the border right color to already our rectangle our triangle excuse me and all I'm going to do now because we also set this margin and everything I set 10 pixels not left I set minus left extra little bit more there is our triangle and now I'm going to continue here I want to quickly completely show the whole kind of little project here what are we going to do and I add padding here add a padding of 15 pixels see it looks a little bit much better I think looks much better so we have now here our little content box and this headline flag here timeline flag timeline flag our timeline flag that gets kind of some special treatment it has a padding of the bottom of course so we don't exactly a little bit separately from the content and I give it for example a front size a bigger one 24 pixels exactly and now I told you I want to show or want that triangle there to point on the specific point on the timeline so I'm going to use for that the after element I use here after because for the before I used our use triangle but before I'm going to do this I want to add more entries I want more of these little boxes to show point more here so let's create quickly another one here another one exactly so we have that here and what I didn't do of course I have to say here I put it here inline block let's leave it as a block actually and let's give it just the width or we leave it inline block to load of course this needs some points here I know it doesn't make sense actually because it doesn't work with the before let's just make it block here let's make it block and if you wanted so wide whatever we just changed width pixels or something like this exactly and we give also a margin top here pixels exactly and yeah that's all and now I'm going to add the after element so I'm going to say in timeline after our entry of course it's part of the entries though and of course we need the content like I said before this is really necessary you always have to write a content attribute set the precision absolute too I need it left I don't know I just guess now minus 40 pixels I don't know actually you'll find out in a second I get a width of let's say 20 pixels background of black here and pour mix don't forget the height has the same one and then I'm going to add the border radius of 100% and you see already we have the points now here so I'm going to adjust it a little bit 35 is not that great let's make 7 maybe yeah this seems fine to me now and now we have our points here of course we can mix up let's say border yeah 2 pixels maybe solid and also black here and just gonna delete here the background exactly and I need it a little bit more to that side 39 minutes for it 39 is fine I think of course it shines like we see of course the timeline border now so I'm gonna set the background actually to our body here the same color as I gave the body and now it gets this effect like shining through and the first one for example is active let's say now we have here in each of this kind of flags entries I mean like a form and like some input elements and a button and we for example submit now this form and then this one closes and the next one opens or something or then here is kind of a tick or something or a cross if something is missing for example like that now set the first one on active for example so I'm gonna add a glass active and the active class does the following timeline entry, active after and content here same and gives it a background of black you see so just the first element which is now active later of course you would do it on jQuery, javascript or whatever you check that it's active or not and give it a glass active and it has some automatically black or the circle has a background color this is how it works and you see how you can use effectively the after the before attributes and I hope you understand a little bit better there is actually a little bit more about before and after but it's not important now in our case so with that you can already handle a lot of stuff and do have fun and just play a little bit around and if you have questions of course feel free to ask me we will come now to a pretty big topic and a big thing and web developing and essential actually because it's about forms forms you find in all the pages all kind of web apps and stuff you always have to fill out forms it's kind of a little own thing it's kind of hard to really handle forms well so to create a form we just going to write a form element it automatically creates for us this action attribute and here we specify what kind of action we want to submit when we submit a button this could be now post or make an HTTP post request and send this request to the server we also could make a get attribute or a get method this will be send a get request and yeah this is actually yeah we'll just make a get request and how it does that is we just need a button of course which will yeah which will actually do this whole thing and let's do it now like this let's for example create a button here and click click here you see it loads here something calls it twice send a get request and you can add here specific things again you can add here a target like if you remember the anchor tag you can say here blank again and if I'm now going to click on this button it opens a new page and it sends them the request and redirects here or whatever you want to do here you can give of course the folder name like for example then you can refer it for example you have then like a select element you can refer the select element to this form now a form is called just a bit like this usually you have a form then you have some label and just label the ranks to an input field which will be named now name for example so I'm going to say name here then have an input field name and ID name the reason why I sent here ID name is that if I click on this label it automatically selects the input field if I delete now this ID name here nothing will happen but we want actually this behavior it selects our input field when I click on the label right and to create forms like I said is a little bit of our thing I will go more into detail after that and I'm more into detail about the label and the input and whatever you can do then here you can make a checkbox for example and let's create quickly one so you have your checkbox or like a radio button then you have your radio button in a second actually not the radio button just radio and here you have your radio these all these elements which puts a form together and in the next episode or next lecture I go more into detail in the depth you also create some forms of course because this is a really not tough thing but you can do a lot of things wrong so in the next lecture I'm going to show you more like I said previously we go now a little bit more into the details in the form especially the labels and input elements and for that we're going to create a form simple form give it an action of post and maybe a name of let's call it again Lugin and now I'm going to create a label and I told you briefly I can use this or attribute to assign it or like kind of include it with or combine it with an input field I do it with the ID of that input field so I'm going to say here for example name now like I did before name and then I'm going to say input and give this ID of name when I click now on name it selects this input field here there's another way you have if you can do it without actually using this for attribute at all you just simply don't write this input field outside you write within the label so now you have this here and now if you click on the name you select automatically the input field there are different ways to do it you can choose if you want to use more that for attribute or you just simply nest it in your label now we are going to come to the input field well before I'm going to do this it's maybe also important labels and input fields it's really good for browser that Google and so on and screen readers reads that stuff so always add a label to your input field it's also a convention and you just do that and later I'm going to show you also how to structure it but for now just remember always add a label to your input or nest your input within the label and now we come to the input field and we see already that automatically puts the type attribute here we have different types of inputs this is now a simply text type so I can just add here text and actually let's change it to number and what it does now we have still this input field here but we can here choose numbers see that and we can actually also add now something like a min which is 0 and a max which is 10 so now I can go below 0 and I can go above 10 see that this is our input type number now we can add input type color I need to kind of leave this min and max here and what this does it opens the open action on my mother screen field here this depends actually what browser you are using what kind of field looks like here and now you can choose some color whatever color you want to and I think you just submit like this and then you have selected color here nice and the next thing you can do is a checkbox a checkbox we know already name mix not that much since now let's say a male here and we are going to choose between gender or something like that so I am going to create here a label male maybe here under input I am going to delete this for here and let's say here female this here checkbox and now we have here female or male or male I don't know it would be better usually you would use here something called radio instead of checkbox and then you would be able just to select one of this kind what else can you add actually you can add date so now you have here date or you can with HTML5 you can click here and you can select a date or just write it here that's pretty self-explanable as well as you can add file file now you can choose a file from your from your computer actually let's quickly as you can see let's make a label display block top here just a little bit see the better and the next thing you can add is also month for example now you choose here the month and here that's pretty similar to the date one additionally you can add password now let's see what that starts here actually I just password you see it actually just hides our input this is the password type and then we have something like range and now we have this kind of thing here this kind of range slide thing here I think we can also make a here like one mix 10 something like that now you see already steps here and another one you can do is time then you choose just time and you see there is a lot of stuff you can do with this input fields now to really go deep into details of that what you can also adjust a little bit on time number, color, checkbox and so on I suggest you to go to the musilla foundation to the mdn if you just google it you will find it right away or I put you a link down there in the description and you find much more details about this input types now let's create our first form so let's start right away our container because I want to center actually our form in the center of our screen so then let's add another div and then it's called form wrapper then I'm going to add the actually form give it an action post for now and I give it something called input group and I'm going to make a div make a class input group the reason I do this is I put like kind of kind of a row so I put always a label and an input element in one input group and stack it on each other so I stack it so I can control also better the distance between those input groups and it just looks better it's structured so now I'm going to add a label and I'm going to add input element the label is for my name and input gets id name and I'm going to do this actually a couple of more times so I just have to copy this so another one another one so we have now name or maybe let's make it like let's make surname say sname then I'm going to make let's leave name here name so name and name is right then I'm going to say here email set it here to email and id email exactly and last one maybe make another one make a password one pass password here and there password alright, okay good and what I'm going to do now is styling so let's style the container first so we set that whole thing so I'm going to use here position absolute 50% top 50% and transform translate minus 50% minus 50% perfect before all that make sure you add normalize and auto brief fixer and then I'm going to set all my items organizing auto box remember why we do this so it doesn't add the border, the padding to it or actually width of the elements then I'm going to select the body and give it a background color of a roof dodge tray like this and now we are coming to the form record and the former gets a background around white exactly like this and no padding so make a padding 12 pixels and then here may be 9 pixels or nothing let's make it 12 here 16 here yeah seems fine to me and let's leave it like this for now let's leave it like this and then I say that all the input groups have that width 100% at this block of course I don't have to set that, I mean there are any ways to set the block and they have always padding top of let's make padding in general let's say then I make a padding of 8 pixels at 0 let's leave this for now and then I'm going to give the label display block because we want everything underneath each other looks good I think looks not that bad and now I'm going to say that the label has a little padding bottom and I always make the padding between the label and the input field for pixel it's like also a convention I have and actually let's change this to 20 actually I always do it like this 20 that's a little bit white let's make 10 here in this case fine maybe 10 is fine and next thing will be actually a button we didn't add at all so I'm going to add quickly a button here so whether we make now input and type button this press 2 or submit we can do it like this of course or we add a button but like this kind of your decision I mean you can do it how you want that so we have now this button here and that's good actually what I actually did now I gave the input group the first one adding from the top I don't want that I just want this padding between these elements here and because of that I'm going to say something I'm going to say input group and I'm going to use absolutely element you're going to see later it's called nut and then I'm going to select the first child and here I'm going to add this padding and nut there so this actually just adds all the paddings except of the first child which is this one here and now we have this elements here so but the thing is then it doesn't add actually doesn't make sense here because now it doesn't add adding bottom too so this was kind of not the plan let's make it different then it's coming alright so let's just make the input group first child not first child let's make first child and the first child does have no padding top that's all then we have this now so we have a surname we have a name, email, password what we're going to do and I always suggest you to do additionally always write a placeholder in your input fields so I'm going to actually select all of them I'm going to just select and hold command and select other input fields as well like this now I'm going to say placeholder and give it some placeholder text so here I'm going to add surname there I'm going to add name there I'm going to add email and here I'm going to add password and you should forget of course to change here the type because we don't want to see the password when I type or something it's like him there's still too much distance let's make it a little bit less here I think as of now it's better alright we have a number of this and we have this button and we have all what we can do now to make it look a little bit better so I'm going to add here a box channel one pixel two pixel something here let's make it look like this or we simply just add rgba rgba this make it black and set the opacity a little bit lower like this so now we have our input field email and so on and always a convention is to write your input field underneath don't write them anymore next to each other always try to write them underneath except the space is important and that's actually that's about it I should add maybe a little headline or something let's h5 maybe let's say h5 login exactly yeah this login has a little problem and this login sets a many as a padding actually now we see it's gone so we have now rgba and maybe add here h5 quickly and project 2 how much should I give here or actually it's more here so too much here and it's not big enough actually let's just make the font size a little bit taller I think this looks better so this is our little form here we're going to also select the button now it looks pretty ugly like this so I'm going to select the button with selecting the type stop it to the selectors you will hear a little bit more later or I did it before because I have to tell you I record most of my lectures like different times I could actually be just change my mind and I put this section now later after all these selectors because I have an extra section of course for all the selectors I hope you like it and I put this lecture afterwards or this before but I think it will be afterwards because it makes more sense because I'm going to use here a lot of the lectures actually so now I'm going to say here at the bottom non-quickly so just to see it make sure it's selected background none as well and I want actually a border I want one pixel, solid I'm going to use this here as well let's look to right or let's make it the same way here should be a 0, 0, 0 2.2 3 is okay and I'm adding of 6 pixels maybe yeah, doesn't look that bad and I need also a margin here because I don't have that space here that I should have we remember we gave here each one 8 pixels so I'm going to say 8 pixels here to the top alright, perfect now we can just sub it or we just cancel it it's like while you log in and make another one cancel exactly now we have here two buttons we can cancel or we can log in and this is our little form here you can change yourself now a little bit like the width and height or pettings and colors experiment a little bit makes them a little bit beautiful maybe the input feels much wider a little bit here I would say also show you how you style input fields much much better styling also like the placeholder and stuff like that and I will do this I will put this probably in the section how to and here I am more handle, tell about the basics and understanding a little show how to do that like specific problems like styling like button differently, buttons differently input fields, ready buttons and so on making the how to's so if you are now interested scroll down and click on the how to section and then just watch it already if you want to you finished your first chapter and now we are coming to the next one and now I am going to show you how to draw with CSS in the beginning we make with triangles how do I actually create a triangle with pure CSS to show you that and to demonstrate you actually how that basically works I am going to create a diff container with the class of triangles plural triangles not capital T of course actually we don't need any content on it so and then we are going to give it some basic styling, triangles first I am going to set the width of zero and the height of zero and then I am going to say margin zero to center it in the screen and what comes now, this is the thing which what what shows you demonstrate to you how this whole triangle thing works out with CSS so I am going to say border 25 pixels solid and I give it a red now so what do you expect to see now let's see we open our browser I am going to reload now you see it's a rectangle actually why is that, I mean to show you really how that looks like actually with this borders now I am going to give each border a different color and first I am going to set the margin from the top a little bit okay now I am going to see border left green and border right I am going to set blue now I am reloading nothing works one second, of course I want the color not the whole border and reload and you see actually how it looks like, we have a lot of little rectangles a little triangles here four little triangles what it does actually it's kind of each one gets the same space within this rectangle because we set the height and width to zero so the space or the width of the border has to go somewhere you know gives each border the same width and then this is how this triangles appear now I can, I mean of course we have now four triangles but if we just want to have one we can simply set the rest to transparent of course let's put this two here these two to transparent and reload you see we just have this two triangles left of course we won't do it like this then I mean let me show you that on a practical example let me create a speech bubble for that I am just quickly renamed class name to bubble and say bubble first I am going to set this whole thing to relative give it the width of 250 pixels and a height of 100 let's say and then the same thing I am going to use a margin to center it let's look quickly then of course I need a color let's say we give it a slightly gray like this here I am going to set also the border radius a little bit just to make it look a little bit better good and within the bubble I write some texts hey are you alright of course it doesn't look that great so I am going to padding a little bit and font size bigger and you see looks better alright now I am going to add this little triangle here I mean you can do it how you I mean it's different ways to do it you can make it on the left let's create it on the bottom to make a bottom one first how it works is actually you say bubble then you say before then you set the content to zero because we don't want any content but you want to of course to appear something some style so position is absolute because we have to set it to the bottom and to from the left let's say let's make 25 pixels the bottom depends how high the height is of this whole triangle let's say 30 pixels just to make a little look a little better I am going to put this here in a separate line like this and now I am going to create a border okay we need a triangle looking down that means we need the top one so it says we make border top I am going to say 30 pixels solid and I give it the same color of course as the bubble and the border right I am going to give 20 pixels solid and transparent because we don't want them to appear really border left 20 pixels solid transparent and let's see how it looks like first we don't see anything that might be because I am not like this sorry let's make minus here and here it is so this is actually basically how it works of course if you want now for example one on the top then you would one moment create not the bottom border tops the border bottom you would then of course right here and if you want one on the left you would appear then and you would set the top and the bottom border to transparent it might take a while until you figure it out but I am sure you will do and thank you for watching and the next one lesson we look at some different forms our next shape will be a ribbon a ribbon actually just contains a rectangle and on the left bottom side a triangle and on the right bottom side a triangle and we will just appear half of each triangle there are of course other ways to do that but let me show you by that way how simple it is actually first we are going to create a div container with a class called ribbon then we style the ribbon or ribbon body first by giving it a height and a width let's say 300 pixels and height let's say 150 let's say 150 and height 300 pixels we set a margin again 150 pixels auto to center it and background color of green and position relative alright just see what is happening here we have seen our browser this is just normal rectangle and here we will now create our first triangle and then our second triangle by using the pseudo class before and after ribbon as we got our left one so content again nothing and position again absolute then where we want to put it is on the bottom I make here minus 30 pixels now and left zero then our border actually so we want the left one so it means border left 30 pixels what width do we have 150 so it actually makes sense to make it 75 and the half 25 is 35 so we make 75 pixels solid and green and border top will be then our so it is transparent one and border bottom as well alright let's look quickly how it looks like almost there is a little set here that is just deleted by making minus 30 for example yeah that fits perfectly alright and then we are going to create the right side ribbon with after pseudo class content again the position again absolute bottom is actually the same 30 pixels but instead of left we use the right because we want the right side of our ribbon then we need the border right not the border left here the size is the same solid green and border top 30 pixels solid transparent border bottom 30 pixels solid transparent and here we go we have our ribbon hope you liked it and the next one we are going to look in another shape see you then shape is an octagon an octagon is a shape with 8 corners and actually it's pretty easy to do so to like the rest of our shapes but just for better understanding and to be not leave anyone confused here I'm going to show you by a basic example how it actually was how this form is set together and I'm going to do that by creating again a div tag and give the class let's just go out and now I'm going to give this one some style let's say with 40 pixels and height going to leave 0 and then I'm going to create a border border top 30 pixels blue a border right 30 pixels solid green and a border left 30 pixels solid green then I'm going just to make this quickly a little bit from the top and center it so more than 50 pixels in auto then I'm going to load this in our browser and what do you see here actually is just the bottom of our octagon we want now our top it's nothing but just exchange that from border bottom top to border bottom and you see it switched and we have that top of our octagon and between that is actually just a rectangle that's all of course we want to create it like this we will use before and after pseudo classes again of course so I'm going to delete this here and this here because we are specifically creating a cube and hide 800 pixels too and background blue okay sorry for that and position relative now I'm going to use the before pseudo class I said like we did before with the when we just used the diff class without before the height to 0 and we go to the width of 40 pixels and of course we set again the content and we set also the position to absolute and now we are going to create the borders so border bottom 30 pixels solid blue because this is the one we want to appear and the border right it's also 30 pixels solid and this one we are going to set transparent and the border left 30 pixels solid transparent alright let's just look quickly for nothing one second now we have of course also to set the position relative I said I have to set of course also to after one take after the same thing height 0 width 40 pixels content empty here then the position again absolute and the border top this time 30 30 pixels solid blue and the border rounded so left and right transparent and here we have to set a margin 70 pixels and let's see doesn't appear yet this is cause a little mistake here just set it white and here we have our article pretty simple okay let's see what we create in our next lesson but I'm definitely sure it will be another cool shape we will learn how to create a special shape in CSS we will create a heart and to create a heart you might think it's like set from half circles and triangles something like that but it's actually pretty simple to show you and demonstrate that again I'm creating a div with a class heart and now I'm going to say with of course heart selecting first with I'm going to 70 pixels and height 115 pixels height of course alright then the background the blue let me show you what I did just basically just this rectangle here I'm going to center it and make a little bit space from the top too and then I'm going to say a border radius and I'm going to set just the top border so the top left and top right border and the rest I'm going to set to zero which made it look like this now here and now imagine this turn we use here just transform rotate 45 degrees or minus 45 in this case now I'm going to reload and you see we now just would create another one here and you would have a perfect heart shape now again we are not going to create here two this and then lay them over each other and something like that we just use here again the before and the after pseudo element so to create that to do that again I'm just adding now here before and I also create knowing your heart after right in the same line let me put this here I'm going to add here position absolute and content again of course zero and before we do all that I'm going to set our heart itself to position relative alright this we can just leave like that we right now here left 70 pixels and top zero this is right almost right let's look looks like we just basically still the same everything here and now I'm going to just select the after on heart after because you want this one a little bit different and I'm going to say left zero and then we transform it to and say rotate 45 degrees and reload see already it's like this here now I just have to change the origin to transform origin from what angle from what origin it actually rotates so I do this with transform origin and I say here 100% 100% see it's like here and of course I have to do this here too transform origin zero 100% and we have our heart perfect let's just now create because the origin we blew of course let's make it red and we have our red heart this will be all about shapes so far and in the next lesson on next chapter we're going to talk about animations transitions and so on we finally now put into practice what we learned before so we are going to create a little bear illustration with pure CSS and let's right away jump into it and start with the container we will center the whole bear illustration or this bear head within our windows so I'm going to use a container then I'm going to create a class with the with the class head I'm going to nest all the other elements now within the head div class and I'm the first element I'm going to add is the ears and I want them twice of course and I'm going to style the container first and I position it absolute because I want to use left to right left 50% top 50% transform translate minus 50% minus 50% that's all about our container now I'm going to start ahead I want the head to be 300 pixels wide and 200 pixels height I give it a background of barely a width and I'm going to set the border radius to 100% and the position relative because I want to position absolute the child elements and then I want to add a border solid black or let's just this code here then I'm going to open this browser and we have a nice shape of the head already and now we are going to style the ears the ears should be wide 50 pixels height 50 pixels so nice equals circle border radius 100% position absolute and border 5 pixels solid and this black here open in the browser yep just of course adding the background color use here barely width as well good I will of all both ears I want to set the Z index to minus 1 because I want it behind the head there it is now I'm going to position each one of these ears so I'm using here the child selector the pseudo selector child and I'm going to select the first child which is the first ear I'm going to set it to top 10 pixels and the right ear I'm going to set top 10 pixels as well and right 0 now we have our ears here now we are going to add the eyes the class I twice so I'm going to select the class I and I'm going to say with 10, 15 pixels height 25 pixels background going to make it completely black I want a border radius 100% and quickly let's have a look looks good now I'm going to position the eyes so using the child this is now not the first child of course it is the third child because it's the third child but a lot of our diff container of the class have so this is the third child this is the fourth child so I'm going to use 3 and I'm going to set it to top 80 pixels left 80 pixels of course I have to set the eyes position absolute and then we will let the browser there is our left eye now we do the right eye for top 80 pixels and right 80 pixels see that looks pretty good so let's create our nose so nose nose should be white 80 pixels hide 60 pixels border radius 100% background black and position absolute as well going to say top 60% and left 50% because we want it of course centered in the middle so I'm going to use transform and then translate x because I centered it in the x axis so minus 50% and let's open that it's a little bit big let's make it smaller let's say 60 and 40 yeah that's better and now we are going to create something something like a mouth it is not really a mouth it's just some line underneath the nose that gives it a nice kind of style but I just call it mouth actually I have no idea how you call it so this mouth I did it of course now in this style of course I have to add this here so we have we have already our mouth now add of course the style excuse me a little bit confused here and I'm going to set this width width of 10 pixels the height of 20 pixels let's make it 30 and a background of black again then left 50% and bottom 0 that should do that actually of course I have to set it to absolute otherwise we couldn't position it and we of course have to set it to absolute so I'm going to use transform here translate x again that's 50% and it's not high enough so let's make it let's make it 40 this looks actually alright actually it's better if you set the nose a little bit lower I'm not so satisfied with it let's set it let's set the nose not to 65% maybe exactly it looks a little better and the eyes a little bit lower as well let's see 90 90 that looks much better this is our bare illustration actually you can do much more complexer stuff and I hope you maybe will a little bit try yourself how to do that stuff and find your own little illustrations and create some cool CSS art we will talk now about transitions and the best way to explain your transitions is to show you that on a simple example there will be just a button on the center of our screen where we are going to change the background color and the color of the text a transition itself describes just how long a particular state change should take and how it should actually change we take for example the change of a background color whatever element in our screen or our HTML and the transition says what particular it should change so the background color how long it should change should it have a delay until it changes or should it also have a specific way how to change should it ease in, ease out and custom made how long it should take and this is actually what a transition is and I'm going now to show you that on this example so I have here our HTML document and I'm going to create now the container first so a diff container within the diff container I'm going to nest a or anchor element and this says click me now I'm going to center this container by using position absolute top 50% left 50% transform translate minus 50 minus 50 before that I'm going to reset the HTML and body styles of the browser by setting the margin to 0 and the padding to 0 now I'm going to select the atek and I give it some styles to make it a button I'm going to say font size 24 pixels and then I'm going to say padding 8 pixels and 24 pixels and I give it a background color orange orange red orange red and also a color white and I'm going to change the font family to Helvetica also I want to change the text transform to uppercase and I want to delete any text text decoration so the underline disappears it should be all now let's see what it looks like in our browser so I'm going to reload that looks pretty good to me and now we add finally our transition and I'm going to show you now first a long hand way so this just needs this transition and the first thing we will enter now is the transition property so which property we are going to change or what we want to change this would be the background color here then the next one will be the transition duration how long should it take let's say 3 seconds everything after that will be optional it would definitely work now right this but we can now add a transition delay 500 milliseconds and we can add a transition timing function which means the way how it changes so standard or the default value would be ease then there are linear ease in ease out and what we will talk about later cubic easier for now I'm using ease in which kind of fades slowly in or changes elements slowly in and this should be all and now I'm opening the browser again and reload of course nothing happens yet because we have to add our change here anchor with a hover suit element and we want to change the background color so let's change it to green now open the browser again and reload let's hover it and you see it slowly changes to green with a little delay of this 500 milliseconds you can add you can use here for the for the transition duration milliseconds or seconds of course also for the delay and if you want to make now a second transition we just don't want to change just the background color you want for example also to change the color of the font text then we are just adding a comma behind it and saying now the second property this would be color and we want to change it with two seconds and with a 200 millisecond delay and we say is out here now I'm going to change that also color black for example opening the browser reload and hover it and you see it's going to change the transition works now I showed you the long hand version I'm going to show you also the short hand version even it's really more useful to use that long hand version it just looks prettier and faster but especially in the beginning it may help to use maybe the short hand version so instead of making this transition and adding then all this we want all this options we just can transition property now we add the property then we transition duration transition delay and transition timing function and see it's in and it would work perfectly the same of course now I told you there is another timing function that we can use which is called cubic bezier with cubic bezier you can actually adjust yourself how slowly it goes in and how it ends or how this whole transition appears to give you a better picture of that there is a help there is a website it's called cubic bezier.com where you can actually look how it looks like by adjusting this little handle here you can perfectly create your own little transitions now if you click on go you see how it looks like and let's do it like this here you see this it's pretty interesting and on the top you see then always the settings you use here with this little graphic this thing let's do it like this maybe yeah you have a little delay here let's use this one so we need to copy this then open our editor and add this values here let's save see how it looks like ok you don't see the dwellers in here you maybe want to make another example also to show you better how everything how it works to practice it so let's create quickly our round object let's say I make here a diff and let's call it ball now I'm going to delete all the stuff here let's say container ball we'll have a width of let's say 50 pixels and a height of 50 pixels and background color red and the border radius of 100% let's see now we have a little ball here and we want it to move a little bit to the right or left so first of all we need to add a transition we want to change the transform property and we want to have them say 0.75 seconds and we'll add 200 millisecond delay and we say ease in now I'm going to add this let's say how are you too and then I say transform translate x 200 pixels let's see how it looks like and let's open the browser and see the changes now you see moves to the right or what we also could do is changing maybe the the transform actually right we leave that like this we just instead of translate we use scale and let's say we say 2 so reload let's see how it looks like if we use it goes a little faster of course if we use linear it's pretty straight there's now slowly or something coming in let's just right away use our transition so let's leave ease in it slowly starts and goes a little bit faster I think that's fine like this so you see how transitions work and you can play around with it a little bit and I'm sure we are going to use it one or another project later and the next lesson first we will talk about animations they're actually pretty similar to transitions and you write them kind of in the same form and I hope to see you then this lesson we talked about CSS transitions now we are going to talk about CSS animations to show you that animations are not that hard and actually especially how you write them or declare them pretty similar to transitions I'm going to show you that on a simple example again we will do a couple of scandals, don't worry but first of all we are going to create a loading animation for that we need some loading cycle first of all I declare write again an HTML div tag with the class of container which we are going to center and with then I'm going to nest a div class with the a div tag with the class cycle now I'm going to center the container again position absolute left 50% top 50% transform, translate minus 50% minus 50% then I'm going to create a recycle I'm going to say with 50 pixels hide 50 pixels because you want a nice round shape and I'm going to say border 10 pixels, solid and I'm going to use the slight black here and of them I'm going to say border radius 100% then what it looks like at the browser, yes looks not there I want to have kind of an open border so I'm going to say border top color transparent alert yes exactly how I want it and now we are going to add the animation but before we can add actually the animation itself we're going to have to create some keyframes we are doing that by saying keyframes giving this keyframes a name we are going to call it loading and now we need steps now you could do something like from and to but what if you want to do several steps like 3 or 4 or whatever how many you want to we use for that percentages 0% and I'm going to say transform translate not translate I'm going to rotate 0 degrees and 100% transform rotate 360 degrees and this should be our keyframes and those keyframes we are going to add now in our cycle class with the animation now I'm going to show you exactly the same like in our transition class or our transition episode I make this longhand first because this is the most practical and most convenient way to do that so I'm going to add as first animation name or the keyframes name which is loading then I'm going to add the duration the animation duration is how long should it take to fulfill this one animation from 0 to 100% I'm going to say 1 second then you need animation timing function and for that we are just saying linear now you don't want any steps you don't want to ease it in start slowly and go fast then then we could add an animation delay which we just leave out now because we don't need it and I'm going to say animation iteration count infinite because I want it unlimited infinite animation so now I'm going to open the browser and we see what it looks like and we have a nice move animation the cycle 360 degrees infinite now let's play around a little bit and let's do in the next episode something else a little bit because there is actually much more what you can do animations there some other properties we can add other options we can add so I hope to see you in the next episode lesson we started talking about CSS animations and now we want to practice this actually on a very good example we are going to create a walking cycle we are going to create animation with some kind of sprite sheet I hope everyone of you or at least some of you know this adventure point click game monkey island because we are going to use guybrush 3 puts character and we want to make it walk over to our screen and to do that first of all I'm going to show you where to get this sprite sheet it comes from this nice website here and you can just I don't know, copy that I will link it in our notes of course the URL and just use that URL then form a creating animation so this is a basic walking cycle of guybrush 3 put and we are going to create it now first of all we need of course some div which holds it but first I'm going to create again a container and then I'm creating a div container or a div tag with the class guybrush and first of all the container gets centered again position absolute left 50% top 50% and then transform translate transform translate minus 50% minus 50% and now we are going to style our guybrush class first of all we need of course a background and this will be coming from our URL I gave here and we are going to say zero zero no repeat so we start with the very left picture then I'm going to say with 100 pixel and height 148 pixels so this is the optimal height actually to see really the whole frame or the whole sprite of guybrush 3 put then I'm going to say actually nothing else let's just look what it looks like in the browser reload yeah we have our guybrush 3 put in the center of our screen that's actually perfect and now we want to animate it well we know this picture this sprite sheet we have here is like length though we have this one two three four five six sprites and what we will do now is animate each one like the first one second one fifth one, sixth one and so on and each sprite actually if we just say now here instead of zero we say now minus 100 pixel let's just reload then you see it does have the second frame we just got the second frame so we just move our background so 200 reload the next one 300 reload the next one okay we have here a little shoe can adjust it a little bit then when we make the actual animation so let's put it back to zero and now I'm going to create first of all of course our keyframes I'm going to write them above this keyframes keyframes and I'm going to call it guy brush walk and I'm going from 0% background position 0 0 100% background position and this I already tried it of course will be the best one if you use 612 pixels and then 0 and now I'm going to add this in our our class here in our guy brush class with animation and I always use the name and one second should be enough and I'm going to say linear first and infinite so let's see what it looks like in our browser now see of course we don't want it like this looks though interesting but we don't want it like this so what we are going to do instead of linear we are using something called steps so we just divide frames into steps the animation should do and we have 6 frames so I'm going to use 6 steps I'm going to save that and open our browser and reload and here we go we see our animation guy brush looks very good now I forgot something in the previous lesson because I wanted to show you the short hand I just showed you the long hand notation but I want also to show you the short hand version of animation so I will just do that now here even I recommend you not to use it so it's really used just here the long hand version you can of course say animation name that would be guy brush walk here then animation duration animation timing function then delay and iteration count but like I said the best would be if you learn right away the long hand version let me start now with animations our first animation will be a loading spinner I will show you how to create simple animations on that simple example let's jump right into it and the first thing we are going to do is giving the body a background because I'm going to give the loading spinner the color white so I'm going to say background fire brick then I'm going to create a div and give this the class name spinner that's all we don't need any content and then I'm also going to reset the browser settings for marching panning zero and the spinner needs a width and a height, so I'm giving 25 pixels 25 pixels needs a color I know it actually doesn't need a color the border just needs a color so let's say border I'm going to give 6 pixels of wood and solid and we're going to make it white then I'm going to say absolute because I want absolute position directly in the center of our screen so I'm going to set top 50% and left 50% and then I'm going to make actually the top border the color of it transparent then of course I also have to make the border radius 100% now I'm going to look first in the browser what it looks like so I'm going to reload and this here is our loading spinner and now we are going to create our keyframe first of all for animation you need keyframes a keyframe you declare by design head and say keyframes and then you give the keyframes a name let's say I call it spin then you just use normal curly brackets here and then you say where to start and where to begin you can make now several steps you can say 0% this and then something happens then you can say 10%, 20% how many I'm just going to use 0% and 100% like I said the steps you can choose yourself you can add animations you can just make how many steps you also want depends on you and now I'm going to say transform rotate 0° and here I'm going to say transform rotate 360° so it makes completely one way around and that's our spin keyframe and now we are going to add this in our spinner with animation you see already just type animation there are different things here we can declare a delay and everything else but we won't use everything now I'm just going to show you later what you can do with the other of the options in animation for now I'm just giving it a name for spin how long, one second I want to make it infinite and I'm going to make this whole animation linear that's all now I'm going to open the browser and reload and you see the animation goes this is our basic loading circle of course we can now adjust a little bit let's say make it here 500 milliseconds maybe a little bit faster see it's pretty fast and there are different other ways how to set up your animation with different options and so on but I'm going to show you different examples for each of these options so you see better what works and how does it look like next episode where we talk about gradients gradients are a pretty cool thing to create some really nice effects button nice make a nice button look and give a kind of a three-dimensional effect you also could make some kind of stuff like patterns and much more I'm going to show you this gradients again on some simple example we start with linear gradients that's the easiest way and kind of default value first so I'm going to create a diff container with a glass of box and I want that four times and the first box I'm going to give a second class called default then I'm going to style the box glass with a width of let's say 350 pixels and a height of 150 pixels and a margin of 100 pixels on it's 50 pixels and also then I'm going to create the default glass and here we are creating our gradient we do this with background and before I start creating this gradient a short mention about the browser support actually the browser support is extremely good so you see here you can take a look on kenayuse.com and you see it's pre-supported by every browser except maybe opramino mini so the basic gradients of course there's some other stuff which is not that great support but the more stuff is really good supported so we're good to go anyways you make sure you should use sometimes some browser prefixes and the best thing is anyways to use something like an auto prefixer that automatically prefixes or writes a prefix as he says for this here I'm going to use a webkit prefix and say now here linear gradient and I or this is the background or the linear gradient property expects now here two arguments two colors the start color and the end color to which should go there gradient you can use here white and a second form black and now I'm going to open the browser and reload and you see here a little box and nice gradient from white to black now we can switch this shortly here to see also works of course the other way around so you're going to see it goes from from black to white but that is the easier way just to return that here and there's a easier way to do that and I'm going to show this with the next box so give it a second class called horizontal so of course I should write this class then too horizontal and here I write the same the background using the webkit prefix the gradient I'm going to go again from white to black opening the browser quickly see here's the second one and instead of changing now the colors I'm just going to say here I'm going to start from the bottom now opening the browser again reload and you see it starts now from the bottom so white starts from the bottom now and what I can do here too is saying left and you see our gradient starts now from the left to the right of course the same works with right reload quickly the next thing I'm going to show you is how you add other colors of course you just you don't have to use of course just one color and we call it just vertical color so I'm going to make it vertically again the same background and webkit gradient now say here bottom and we use here red and then yellow see how that looks like and pretty nice from yellow it goes to red of course you can also add multiple colors not just one color so let's do this with this here of this diff container I'm going to say multiple multiple background webkit gradient and now I'm going to say all red yellow green and blue let's open this in the browser and see what it looks like see it goes from red to yellow to green to blue you can add as many colors as you want to now I'm creating another diff one I'm going to show you one more thing I