YT YouTube2Text

YouTube2Text → Transcripts → YouTube transcript (G3e-cpL7ofc)

YouTube transcript (G3e-cpL7ofc) — Transcript

59,768 words · 5,704 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Welcome to the complete HTML and CSS course. In this course,
0:04we're going to learn how to build websites from a beginner to a professional
0:07level, and by the end of this course, we're going to build youtube.com.
0:12Now you don't need any previous coding or technical experience.
0:16This course is designed to be your first step to becoming a software engineer.
0:20We're going to start from the very basics of HTML and CSS and build our way up
0:24step by step. And along the way,
0:27we're going to learn all the major skills that we need to create websites at a
0:30professional level.
0:32You can find the different sections of this course below the video here and
0:36here. And after each section,
0:38I'm going to give you a bunch of exercises that you can do on your own to
0:42practice the skills that we learned in total.
0:45This course is going to have more than 100 exercises. Lastly,
0:49you don't have to worry about taking notes.
0:51I created an HTML and CSS reference that will list everything that we learned in
0:56this course. With that said, let's get started.
1:04I am going to be doing this course on a Mac,
1:06but everything is the same for a Windows computer. Before we begin,
1:10we're going to need two pieces of software, a web browser and a code editor.
1:15A web browser lets us view websites on the internet.
1:18It's also going to let us view the website that we create in this course.
1:22The most popular web browser for web development is Google Chrome.
1:26A code editor helps us write our HTML and CSS code.
1:30The most popular code editor for web development is called VS.
1:34Code or Visual Studio Code. To install both of these,
1:37we can go to google.com and then search for Google
1:42Chrome or for VS code and then
1:47open the first result and follow the instructions to download and install.
1:53Once we have those two installed, we can start the course.
1:57We'll begin by learning what is html. HTML stands for
2:01hypertext markup language. You don't have to worry about what that means.
2:05Just know that it's a tool that we use to create websites.
2:09Every website from YouTube to Google to Amazon uses a combination of
2:14HTML and CSS to create everything that we see on the website.
2:20The easiest way to understand what HTML is,
2:23is that we're simply giving instructions to a computer.
2:27We're telling the computer what to do step by step.
2:31The computer will then follow our instructions to create our website.
2:35So I find the best way to learn HTML is to jump in and give it a try.
2:39So we're going to create our first HTML file and our first website.
2:44Let's go to our computer and we're going to create a new folder.
2:48So this folder is going to contain all the code for this course.
2:52I'm going to call this HTML dash CSS dash course.
2:59Next, we're going to open this folder in our code editor.
3:02So I'm going to open vs code,
3:08and then I'm going to click file open
3:12and I'm going to find the folder that we just created, which is this one.
3:19Now once that's open,
3:20you should see the folder name at the top here and on the side here.
3:25Now let's create our first HTML file.
3:28We're going to click this icon to create a new file and we're going to call this
3:33file website dot html.
3:38So we have to make sure that this file ends with html.
3:41This tells a computer that this file contains HTML code rather than just text.
3:47So as I mentioned, HTML is basically some instructions you give to the computer.
3:52We're going to learn our first instruction,
3:54which is less than button greater
3:59than, and we also need to type lesson slash button greater than,
4:04but our code editor might auto complete this for us.
4:07So this is an instruction to create a button and inside the button we're
4:12going to have the text. Hello.
4:16Now let's save our file and we're going to learn how to open this in our web
4:19browser. To open our new website,
4:22we're going to go to the folder that contains our code.
4:26We're going to find our HTML file.
4:29We're going to right click open with Google Chrome.
4:35And now you can see that we have our first website that has a button with a text
4:39Hello inside. And if we look back to our code,
4:43that's exactly the instruction that we gave to the computer. So as you can see,
4:48HTML is pretty straightforward. It's pretty easy to understand what's going on.
4:53Now let's try another instruction. We can give to the computer on a new line.
4:57We're going to type less than P, greater than,
5:02and we also need to type less than slash p greater than,
5:05and our code editor might auto complete this for us too.
5:08So the P here stands for a paragraph. This is a paragraph of text.
5:13Inside our paragraph, we can put some text.
5:16So let's put the text paragraph of text.
5:20Now we can save this and to get our website to reflect our most current code,
5:25we're going to go to our webpage and refresh. And now you can see that our
5:30website is displaying a paragraph of text just like we told the computer to do.
5:35So that's basically how HTML works.
5:38The computer reads our HTML code from top to bottom and then
5:43follows those instructions and creates a button and a paragraph
5:48of text.
5:50If we reverse the order of these lines, for example,
5:54if I put the paragraph up here and I save it and refresh
5:59the page, then the paragraph will appear on top because again,
6:04the computer is just following our instructions one by one.
6:09Now I'm going to introduce some terminology.
6:11So each of these things that we're displaying on the webpage is called an HTML
6:16element.
6:17So a button is a type of HTML element and a paragraph is another type of
6:22HTML element.
6:24So element is just a generic term that we use to describe anything that we can
6:28display on the webpage,
6:30and we're going to be using this term element throughout this course. So now I
6:34want to explain why we have to write all of these symbols that's less than this,
6:38greater than, and this less than slash This is something called syntax.
6:43Syntax are the rules for how a coding language like HTML should be written.
6:48If you think of a language like English, we have something called grammar,
6:52which is the rules of the language.
6:54Syntax is basically the same thing except for coding languages. Now,
6:58the biggest difference between a language like English and a coding language is
7:02that in English, you don't have to follow the rules of grammar perfectly.
7:06People can still understand you, but in a coding language,
7:10if you don't follow the rules of syntax,
7:12the computer won't understand your code. For example,
7:16let's break the rules of syntax by deleting this greater than symbol,
7:21and now we're going to save our file and we're going to go to our website and
7:25refresh. And now you notice that our button is gone,
7:28and that's because we're not following the proper syntax.
7:31So the computer doesn't understand our HTML code anymore.
7:36So let's put that greater design back so that we're following the proper rules
7:40of syntax and we don't need this.
7:43So let's save and refresh our page.
7:46And now our button is back because we're following the rules of syntax.
7:50So what exactly are the syntax rules for H T M L?
7:54So this part of the code is called an H T M L tag.
7:58It basically tells a computer what we're trying to create.
8:01We write a tag by writing the less than symbol. This is the tag name,
8:06which tells a computer what kind of element we're trying to create,
8:09and then the greater then symbol.
8:11So every element consists of two tags in opening tag and a
8:16closing tag. The closing tag is the same as the opening tag,
8:20except it has a slash in front of the tag name.
8:23That's how you can tell it is a closing tag.
8:27You can think of the opening tag as the start of the button and the closing tag
8:31as the end of the button.
8:33And then in between is a content or the text inside the button.
8:38And the same thing for the paragraph. The paragraph has an opening tag,
8:42a closing tag, and some content inside the paragraph.
8:47So as long as we follow these syntax rules for html,
8:50we have an opening tag and a closing tag,
8:53and the closing tag starts with a slash in front of the tag name.
8:56Then our computer will know what to do and display our elements on our webpage.
9:02The next element that we're going to learn is a link to another website. For
9:06example, if we go to Google and we search for something on Google,
9:11it will give us a bunch of links and when we click these links,
9:14it will take us to another website.
9:17So we're going to learn how to do that in our HTML code.
9:20So we'll go back to our website here and in our code we're going to type less
9:25than a greater than.
9:28So this A here represents an anchor element.
9:32An anchor is basically a link to another website.
9:35So inside this anchor we're going to put the text of our link.
9:40So let's put the text as link to YouTube.
9:45We're going to save this and the refresh, and now we have a link,
9:50but if we click this, it doesn't actually take us to YouTube,
9:54and that's because we haven't told the computer where this link is supposed to
9:58take us. Right now we just have a link without a destination.
10:02So to set a website to link to,
10:04we have to learn a little bit more HTML syntax.
10:08So we're going to go into the opening tag and we're going to type space
10:13HREF equals double quotes, double quotes.
10:18So inside these quotes we're going to copy and paste YouTube's website url.
10:23So to get that we can go to our webpage and then type in youtube.com.
10:29And at the top here we have the url.
10:31So we're going to copy this and paste this into our quotes.
10:37And now we're going to save our file.
10:41We're going to go back to our website and refresh.
10:45And now we have a link that we can click. So when we click this link,
10:49it's now going to take us to youtube.com.
10:52So that's how we create a link to another website with html.
10:58Now let's go back here and explain what this syntax means.
11:01So this is called an HTML attribute.
11:04An attribute basically modifies how an element behaves. In this example,
11:09we are using the href attribute and it determines where this link element will
11:13take us When we click it right now it's going to youtube.com,
11:17but if we change this, it will take us to a different website.
11:20So this attribute is modifying how the link element behaves.
11:25So the syntax rules for an attribute are we have to have a space between the
11:30attribute and the tag name. Otherwise, if I write href here,
11:35the browser is just going to think that this whole thing is a tag name.
11:38So that's why we have to have a space.
11:41So then we're going to have an equal sign and double quotes.
11:45So the text to the left of the equal sign is known as the attributes name,
11:50and on the right side is the value. The value must be surrounded by
11:55double quotes as you can see here. So you can kind of think of it like this.
12:00The name tells us what we're modifying.
12:03The value tells us what we are modifying it to.
12:06So the H tells us we're modifying the destination of this link and we're
12:10modifying it to youtube.com.
12:14We can also have multiple attributes on an element to add another attribute,
12:19we just separated with a space like this,
12:22and now we're going to add another attribute to our link element,
12:26and this one is called target.
12:29So the target attribute determines whether this link opens in the current page
12:33or in a new tab. So by default, if we don't have a target attribute,
12:38it opens in the current page like this.
12:44But if we set the target attribute to underscore blank,
12:48now this link element will open in a new tab.
12:51So let's go to our webpage and refresh and click this link.
12:55YouTube will now open in a new tab.
12:59So by using attributes we can modify different parts of this element's behavior.
13:04The H RF attribute modifies where this link goes and the target attribute
13:09modifies whether this link opens in a new tab or in the current page.
13:14Keep in mind that the h r and target attributes only work on the link element.
13:20The button and the paragraph elements have their own set of attributes that we
13:23can modify, and we're going to learn these later on in the course. But for now,
13:27I just wanted to introduce you to the idea of using attributes to modify our
13:32HTML elements.
13:35The last thing we're going to learn in this lesson is some weird quirks of the
13:39HTML syntax.
13:41So something that a lot of beginners have trouble with is that in html,
13:45if you have multiple spaces like this, for example,
13:48if we save this file and we reload,
13:51you'll notice that all of these spaces just appear as one space on the website,
13:56and that's because according to the syntax,
13:58extra spaces are essentially ignored.
14:02So beginners usually have trouble with this because for example,
14:05if they want to add space between this button and this link,
14:09they would start adding spaces in front of the link thinking that it will
14:14move it away from the button. So if we save this and we refresh,
14:18nothing happens.
14:19And that's because all of these spaces are essentially ignored in html.
14:25So later in the course, we're going to learn how to deal with these situations,
14:29but for now, just keep this in mind.
14:31So let's get rid of these extra spaces for now.
14:35And another weird quirk of the syntax rule is that if I put my
14:40cursor here and I press enter to create a new line and I put my cursor here,
14:45again, these new lines also count as spaces,
14:48so the browser essentially ignores them.
14:53If I save the file and reload, you'll see that the new line doesn't do anything.
14:59So this actually makes organizing our HTML code very flexible.
15:03For example,
15:04if I wanted some more space between these elements so that it's easier to read
15:08in my code,
15:09I can just add as much spaces as I want and it won't get reflected in the
15:13website because extra spaces like these new lines are just ignored.
15:19A lot of people like to put the content of the element on its own line like this
15:25so that the tags basically align with each other in the same column.
15:31And same thing for here. You'll notice that this line is really long.
15:34We can actually add new lines here to make our code easier to read.
15:40So when we organize our code like this,
15:42we generally indent or add spaces in front of these lines. This helps us
15:47clearly tell the difference between the elements, tags and its contents.
15:51If we didn't have this indenting,
15:53then it's pretty hard to tell where this element starts and where it ends,
15:57especially when we have a lot of code.
16:00Now your indents might look a little different from mine.
16:03It might look something like this where you have more spaces than I do.
16:08This happens because by default vs. Code uses four spaces per indent.
16:13Generally in HTML and css, we use two spaces per indent.
16:18To update this,
16:19we're going to go down to this bottom toolbar and click this section,
16:23and then we're going to click indent using spaces,
16:27and we'll change this from four to two.
16:30So now this file is going to use two spaces per indent,
16:33so we can get rid of this and press tab to have proper indenting.
16:40Now that only affects it for the current file.
16:43We can change it for every file going forward by going to the bottom left here
16:47and clicking this icon and then going into settings.
16:52And in here we're going to search for tab size,
16:56and I'm going to scroll down and we'll change the tab size from four to two.
17:03All right, so we just learned the basics of html, how to write HTML code,
17:08and then turn that into a website.
17:11We also learned how to write HTML attributes which modify the behavior of an
17:16element, and we learned about syntax,
17:19which are the rules that we had to follow when writing our code.
17:25Here are some exercises that you can try on your own to practice what we learned
17:28in this lesson. Feel free to pause the video here if you need to.
17:33You can find these solutions as well as more exercises on my website.
17:36Super simple.dev. The link is below the video.
17:51In this lesson,
17:51we're going to learn CSS or cascading style sheets based on the name.
17:56It's used to style our webpage,
17:58so it's used to change the appearance of our H C M L elements.
18:04So I've actually prepared a project that we can do in this lesson.
18:07So we're going to open this project by going to super
18:11simple.dev/exercises/buttons.
18:20So on this webpage I have some really nice looking buttons from famous websites,
18:25namely YouTube and Twitter that we can copy and practice our CSS with.
18:31So we're going to go into our code and we're actually going to create a new file
18:34for this exercise.
18:36So let's create a new file and let's call it buttons dot
18:41html.
18:44And we're going to open our new HTML file in our browser.
18:47So that's open the folder that contains our code.
18:50We're going to right click open with Google Chrome.
18:56And now I'm going to set this up by moving our reference design to the
19:01bottom like this so that it's easier for us to copy it with css.
19:07I'm just going to move that to the corner and then we can work here.
19:13So first, let's work on creating the subscribe button.
19:16So just like we learned before, we're going to create a button using H T M L,
19:21so less than button, greater than,
19:25and then insider button. We're going to have the text subscribe.
19:32And now let's save and refresh our page. And now we have our button.
19:38Next we're going to start changing the appearance of this button so that it
19:41looks like the subscribe button from YouTube.
19:45Let's go into our code and we're going to start writing some CSS to change the
19:49appearance of this H T M L element. So to write css,
19:54we have to create a new element called a style element.
20:00So this style element is unique in that it doesn't appear visibly on the page.
20:04So for example, if we save our file and then we reload the page,
20:09the style element doesn't actually create anything.
20:13So the purpose of this element is that inside this element we can write CSS code
20:18which modifies the appearance of other elements. For example,
20:23let's write our first bit of CSS code. We're going to type button
20:29open squiggly bracket, close squiggly bracket.
20:34And then inside these brackets,
20:36we're basically going to give instructions to the computer on how to modify the
20:40appearance. For example,
20:42we can set the background dash color
20:47red and semicolon.
20:50So make sure that you write this out exactly as I have it here so that we're
20:55following the syntax rules for css.
20:58So let's save this file and refresh our page.
21:01And now you can see that we set the background color of the button to red.
21:06So as you can see, c s s is similar to H T M L.
21:10We're simply giving instructions to the computer and then the computer follows
21:14our instructions step by step. And just like H T M L,
21:18we have to follow certain syntax rules when writing our CSS so that
21:23the computer understands our code.
21:26So what are the syntax rules for css? How does this code work?
21:32So the word at the front here is called a CSS selector.
21:35It tells a computer which elements on the page we are targeting with our CSS
21:40code. In this case,
21:42we are targeting all buttons on the page and we're going to change the
21:45background color of all buttons on the page to red.
21:50Now, inside these brackets, there are other rules that we have to follow.
21:54The text to the left of this colon is called the CSS property.
21:59It tells a computer what we are changing to the right of the colon
22:04is the CSS value. It tells a computer what we're changing the property to.
22:09In this case, we're changing the property background color to red,
22:13and that's exactly what the computer did. The colon is here to just separate the
22:18property and the value and the semicolon here is just like a period in
22:23English. In English, you end sentences with a period in css,
22:27you end a style with a semicolon.
22:31So that's what all of this syntax means.
22:35So we can actually add multiple styles inside these brackets.
22:39So let's go ahead and add another style.
22:41We're going to change the text color to white to match this design.
22:45So the property for changing the text color is called color.
22:50So notice that it's not called text color,
22:52it's just something that we have to remember.
22:55We're going to change it to white and we'll end it with as semicolon.
22:59Let's save and refresh.
23:02And now you can see that we change the text color of this button to white.
23:07And that's basically how c s s works.
23:10We tell the computer what we're targeting and then we give some styles and the
23:14computer is going to apply these styles one by one.
23:20So let's do another example. This time we'll set the border property.
23:24So notice that our button has a border while the subscribe button here doesn't
23:28have a border. So we're going to set the border property
23:34colon two, none,
23:37and we're going to save this file and refresh.
23:41And now we just remove the border. So if you look at our styles here,
23:44it's actually pretty straightforward. They're pretty easy to read.
23:47We set the background color to red, text color to white and border to none.
23:52So just like html, CSS is pretty straightforward.
23:56We're essentially just giving the computer instructions.
24:00So the general technique for going from something that looks like this to
24:04something that looks like this is to just change these styles one by one.
24:09So we're going to continue changing styles one by one until we get our design
24:13here.
24:15The next style I'm going to change is the height. So our button's a little bit
24:19short, I'm going to make it taller.
24:22So I'm going to set the height to something like 50 px.
24:28The PX here represents pixels.
24:30Pixels are a very common unit of measurement in the digital world,
24:34image sizes are measured in pixels, video sizes are measured in pixels,
24:38and your screen sizes also measured in pixels. In this case,
24:43we're going to set the button high, two 50 pixels.
24:46And don't worry too much about knowing what 50 pixels looks like.
24:49The more that you write CSS and work with pixels,
24:52the more you get a sense for how big these measurements turn out to be.
24:56So for now, let's save this file and refresh the page.
25:01And now we have a button that is 50 pixels tall,
25:04but it actually looks like it's a little too tall.
25:06So I'm going to change the heights to something like 30 pixels,
25:11and I'm going to refresh the page again,
25:13and I actually want it to be a little bit taller,
25:15so I'm going to change it to maybe 36. I'm going to
25:20refresh and I think that looks pretty good to me.
25:24So you see that in css.
25:26We do a lot of trial and error to get our measurements right
25:30Now let's keep working step by step to get to our design. Next,
25:34we're going to adjust the width.
25:37So let's change this to something like a hundred pixels.
25:41Let's see how that looks. I'm going to save it refresh,
25:46and I think it looks a little bit too small,
25:49so I'm going to increase it just a little bit. 1 0 5
25:54and refresh. Okay, I think that looks good enough for me.
25:59Next we're going to change the background color because currently our red is not
26:02the same as our design.
26:04So VS code has a really nice feature which is a color picker.
26:08So if we hover over this color box here,
26:11it gives us access to a color picker that we can pick another color with.
26:16So I'm going to pick something that's a little closer to what I see at the
26:19bottom, and don't worry, it doesn't have to be perfect.
26:22I'm going to pick something like 200 0 0.
26:26I'm going to save this and refresh. Okay,
26:30so I think that looks close enough.
26:32So you might be wondering what this value means.
26:35We went from a color of red to RGB
26:38200 0 0.
26:42So this RGB value is another way of measuring color.
26:46It's a more precise way of measuring color than just using a word like red or
26:50white.
26:51So the way that RGB works is that pretty much every color can be created using a
26:56combination of red, green, and blue.
26:59So that's what this syntax represents.
27:02The R represents how much red we have in this color.
27:06G represents how much green and B represents how much blue.
27:11And these three numbers represent how much red we have, how much green,
27:15and how much blue. The minimum value is zero and the maximum value is
27:20255.
27:23So if we removed all the red and green and we just have maximum blue
27:28and we save, that's going to get us a blue color.
27:33On the other hand, if we have all green color and we get rid of the blue,
27:38we're going to have a green color. So this is basically how RGB works.
27:43It's a combination of red, green, and blue to create any color that we want.
27:48Now, don't worry too much about knowing what an RGB value looks like.
27:52For example, if you have a random value like this, if you gave this to me,
27:56I wouldn't even know what this color was.
27:59Usually I just use the color picker to pick the color that I want and then it
28:03will give me the RGB value that I need.
28:06The only RGB values I suggest you remember are if we set
28:10all the colors to the maximum value. So 2 55, 2 55,
28:15and 2 55, this creates white.
28:19So we save it and refresh that creates white.
28:22If we set all of these three to zero,
28:25that creates black and we refresh, that creates a black color.
28:32So now let's go back to what we had before,
28:35which I think was 200 0 0, and we'll save and refresh.
28:41And the next thing we're going to change is here.
28:43We might not be able to see it, but if we zoom in here,
28:46this button has rounded corners while our button has pointy corners.
28:52So to make rounded corners,
28:54the CSS property for doing that is border
28:59dash radius, and the border radius takes a pixel measurement.
29:03The higher the pixels, the more round the corners will be. So for now,
29:07let's try colon two pixels and save.
29:11Now if we refresh the page,
29:13our button now has rounded corners just like our design.
29:17So I'm going to zoom back out and zoom back out.
29:20So the last thing I'm going to change is if we hover over this button,
29:24you'll notice that our mouse turns into this sort of hand.
29:28This hand is called a pointer.
29:30So we're going to change the cursor, the mouse.
29:35This thing that you point around is usually called the cursor,
29:38and we're going to change the cursor to a pointer.
29:42Let's save and refresh.
29:45And that's how you get this hand whenever your mouse is over this button.
29:50So that's basically how we go from a basic HTML button to something that
29:55looks more professional. We create the button with html,
29:59and then we set the styles one by one. Now you might be wondering,
30:04how do I know all of these CSS properties?
30:07How are you supposed to memorize all of these?
30:10So usually when I don't know the CSS property for something, for example,
30:14if I want to create rounded corners,
30:16I would go to Google and search something like CSS and what I
30:21want to do, so let's say I want round corners,
30:26and usually the first few links give some really good suggestions
30:31on what the property is. So here,
30:33right away we have the border radius property in the first link and it gives
30:38us some sample code that we can use.
30:42So that's how I discover all of the CSS properties.
30:46I look at a design and I ask myself, okay,
30:48what do I need to achieve this design? And then I search for it in Google.
30:53So don't worry. As you use CSS more and more,
30:55you're going to have to Google things that you don't know and you're just get
30:58used to the process of finding answers by searching for them.
31:03But for the purposes of this course,
31:04I'm going to give you a lot of these CSS properties so that you can get some
31:08good practice with them.
31:11The next step we're going to do is to copy this join button.
31:14So let's create a new button on our page with html,
31:21and this is going to be the join button.
31:22So we're going to put the text join inside this button,
31:26let's save it and refresh. And unfortunately,
31:31it looks like our join button looks like the subscribe button,
31:34and that's because in our C s s,
31:37this word button means that all of these styles are targeted
31:42to all buttons on the page. So how do we get these styles to
31:47only target the subscribe button?
31:49So we're going to learn a new HTML attribute that we can use for this.
31:54So remember in the previous lesson we learned that attributes modify the
31:57behavior of elements. In this lesson,
32:00we're going to learn a very useful attribute that is used a lot in css.
32:04We're going to go to the opening tag again,
32:07and we're going to add a new attribute called the class attribute.
32:12So we're going to type class equals quotes. Quotes.
32:16So the class attribute basically lets us label HTML elements.
32:21For example, let's label this button the subscribe button.
32:29And also my code is getting a little long for this line,
32:32so I'm going to put the text on a new line to make it easier to read.
32:36So remember, according to HTML syntax, these extra spaces don't matter.
32:41They're ignored. So now that we set the class attribute,
32:46we've essentially set a label to this button and we can target this label in
32:51our css. So to target a class in css,
32:55we can start with a dot, and then we're going to type out the class name.
33:00So we're going to type out subscribe dash button.
33:06So according to CSS syntax, if we start this code with a dot,
33:10that means we're going to target a class name instead of an element name like
33:15button.
33:16So here we're going to start targeting just any element that has the class
33:22subscribe button.
33:23So if we save and refresh now you'll see that all of these
33:28styles only apply to elements that have the class subscribe,
33:33and our join button does not have any of these styles. Now,
33:37multiple elements can have these same class. So for example,
33:41if I set the class of the join button to subscribe dash button,
33:48all these styles will be applied to any element with the subscribe button class.
33:52That's what this dot means.
33:53And that means these are going to be applied to this and this.
33:58So if we save and refresh,
34:01now the join button has these styles again because it has a class of subscribe
34:05button. But for our purposes,
34:07we actually want this to have a different set of styles.
34:10So let's give a different class to the join button.
34:14We're going to give the class join,
34:17and I'm also going to reformat my code a little to make it easier to read.
34:22So let's save and refresh.
34:25And now we're back to where we can start modifying our join button.
34:30Now let's start styling our join button to match our design. So remember,
34:34the general strategy is to create the element with HTML like this and
34:39then style it one by one until you match your design.
34:43So first we're going to target the class. That's what this dot means.
34:47We're going to target the class join dash button. Okay,
34:52so let's set the background dash color to white.
34:58Let's save it and refresh. And next,
35:02let's deal with the border.
35:05So our border is a little bit gray.
35:08We can set it to maybe border dash color to
35:13blue, and let's see how that looks. Let's save it and refresh.
35:19Okay, so it looks a little darker than what we have in our design.
35:23Let's go into our color picker and pick a more accurate color.
35:26So I'm just going to do this by eye. Don't worry if it's not totally accurate.
35:30We're just trying to get something that's close enough.
35:33I'm going to go over here and I'm going to pick something like
35:38maybe something like this. Let's save it refresh,
35:43and that's a little bit too dark.
35:46So I'm going to pick something a little bit lighter,
35:50save it and refresh. Okay,
35:52I think that's pretty good. But we also noticed that our border's a little
35:57weird. So on the top it looks like it's a darker, it's a lighter shade of blue,
36:02and at the bottom it's kind of a darker shade of blue. So to fix that,
36:05we're going to set the border style to be
36:10a solid color.
36:13Let's save this and refresh.
36:16And now we get a solid color all around.
36:20The next thing we can change is our border looks a little bit thick compared to
36:25the design, so we're going to change the border dash width.
36:31So you'll see that a lot of these styles are pretty self-explanatory.
36:35So we're going to set the border width to let's say one pixel.
36:39Let's save it and refresh. Okay, so that looks pretty good.
36:45Next we're going to set the tex color.
36:48So we're going to set the tex color to blue and have it the same as our border.
36:53So remember, the property to set Tex color is called color colon,
36:58and we're going to copy this color down here,
37:03save it and refresh. Okay, so that looks,
37:07it's a little light, but I think it's okay.
37:11Now we're going to set the height and the width.
37:15So let's set the height to be something like 36 pixels to
37:20match our subscribe button
37:24refresh. Okay, and now we're going to set the width.
37:28So let's try, I don't know, 60 pixels.
37:32Let's see how that looks. Save and refresh. Okay,
37:36I'm going to set it to maybe 62.
37:41Okay, let's save and refresh. And again,
37:45we're going to set some rounded corners.
37:47So that is border dash radius,
37:52two pixels. We're going to save it and refresh.
37:57And now we're almost there to matching this design.
38:01The last one we're going to set is cursor pointer to get that nice hand
38:06pointer when we're hovering over the button.
38:08So refresh now when we're hovering over the join button,
38:11we have this nice pointer icon.
38:15So another thing we notice is that there's a lot of space between these two
38:18buttons and there's not a lot of space between ours.
38:21So in CSS space is called margin. So to add space,
38:26we're going to add some margin. So let's go to the subscribe button styles.
38:31And we're going to add some margin dash, right?
38:37So we're going to add some margin or some space to the right of this button.
38:42And we're going to set this space to maybe eight pixels.
38:46Let's see how that looks. Save and refresh,
38:49and that looks pretty good to me. So now we're done with the join button.
38:55Lastly, we're going to create this tweet button. Let's go back into our code.
38:59And remember, our general technique is to number one,
39:02create the element with html, and then number two,
39:06style it with CSS one by one.
39:09So we're going to create a button with a text
39:14tweet. I'm going to move my editor a little bit to the right here so we can see
39:19it. I'll move this here as well.
39:23And let's refresh your page.
39:25So now this button has the same style as a join button because it has a join
39:29button class, and that's being targeted up here.
39:33So instead of the join button,
39:35we're going to give a class or a label of tweet button.
39:42Now save and refresh. And now we're back to the default styles.
39:46So in our css, we're going to write some code. We're going to target the class.
39:51So we start with a dot. To target a class,
39:53we're going to target the tweet button class.
39:59So just like our other buttons,
40:01we're going to adjust the style of this button one by one until we match our
40:05design. So let's start off with the background dash color.
40:12That set us to blue to start off with.
40:15Now I'm going to try my best to match the Twitter blue that we have here.
40:20So I'm going to pick something like this,
40:23and I think that looks pretty good.
40:27Save it and refresh. Okay,
40:32we'll leave it like that for now. We might adjust it later.
40:35Let's change the color now to white.
40:39So that'll change the text color. Okay,
40:43let's get rid of the border
40:48refresh and save.
40:50Let's give it a height of 36
40:54pixels to match our other buttons.
41:00And the color's a little bit off, so I'm going to adjust it just a bit.
41:04Maybe it should be a little more like this.
41:09Save it refresh. Okay, I'm pretty happy with this.
41:13Now we're going to adjust the width to maybe
41:17105. Let's see how that looks.
41:22Okay, that's a little too much. Let's adjust it to 80.
41:28Let's adjust it to 70. So as you can see,
41:31there's a lot of trial and error when we're working with c s s. Now,
41:35to get this rounded effect, we can set a border radius.
41:40Let's start with two pixels. If we refresh, we get rounded corners.
41:45If we start increasing the pixels for the border radius, let's save and refresh.
41:50It starts getting rounder and rounder.
41:53So the trick to getting these round buttons is we have to set the border radius
41:58to half the height or the width, whichever is lower. So in this case,
42:03the height is 36. If we set the borderer radius to half of that, which is 18,
42:08save and refresh. That's how we get this rounded color.
42:13The last thing we're going to do is to bold the text in here.
42:18So in our design, this tweet text here is very bold,
42:22so we're going to make our font bold as well. So do that.
42:25We're going to set this property called font dash. Wait,
42:30I'm going to set it to bold save and refresh.
42:35Okay, looks pretty good.
42:37It looks like this font is actually a little bigger than ours.
42:40So let's actually set the font dash size,
42:44set it to maybe 15, see how that looks,
42:49save and refresh. Okay, I think that looks pretty close.
42:53I'm going to change the width to maybe 74.
42:58See how that looks? Okay, so I think this is good enough.
43:02Currently we're just trying to copy things by eye. Later.
43:05I'll show you a technique of how to copy these colors and measurements exactly,
43:09but for now,
43:10it's good enough to be able to achieve these designs just by looking at them.
43:15So the last thing for this button is to add the cursor pointer.
43:20Let's save it and refresh. So if we hover over this button,
43:24we now get a nice pointer for our cursor. So the last thing I'm going to adjust
43:29here is the spacing between these two buttons. Remember,
43:32spacing and CSS is called margin.
43:35So we're going to add to the join button. Actually,
43:39let's add it to the tweet button just for practice. We're going to add spacing.
43:43So we're going to add margin
43:46to the left colon,
43:49and let's make it eight pixels like we had it for the subscribe button.
43:55Let's save it and refresh. And there we go.
43:59So we took our basic buttons and we were able to copy these really nice
44:04looking designs just by looking at them.
44:07And the technique that we use for doing this is first we create the element with
44:12html,
44:13and then we style it with CSS one by one until it looks close enough to
44:18our design.
44:22So here are a bunch of exercises from other popular websites that you can try
44:26out for yourself.
44:28This is a good challenge for you to be able to look at a website by I and use
44:33CSS to copy the styles that you see.
44:42In this lesson, we're going to learn some intermediate CSS skills,
44:45such as how to create hovers, transitions and shadows.
44:49For most buttons you see on the internet, if we hover over them with our mouse,
44:53they change their style slightly, some of them get darker,
44:56some of them get lighter. We're going to learn how to do that in our code.
45:02So we're going to use the same exercise as before. As a reminder,
45:05you can find it at super simple.dev/exercises/buttons.
45:11These buttons, when we hover over them, they actually change their style.
45:16So this is going to help us practice learning about hovers. In addition,
45:20you'll notice that if we hover in and out,
45:23they change their style smoothly so we can also learn about transitions.
45:27And lastly, this tweet button, if we hover over it,
45:30it casts a little bit of a shadow, so that'll help us practice shadows.
45:37But first, let's work on the hover styles for the subscriber button.
45:41Let's go into our code and find the styles for the subscribe button,
45:46which is everything here. And now to create a hover effect,
45:50we're going to create a new block of css.
45:55We're going to use a.to target a class.
45:57So this time we're still targeting the subscribe dash button,
46:03but this time we're going to add colon hover, open bracket,
46:08close bracket.
46:10So inside these are styles that will apply only when we hover over the button.
46:16That's what this colon hover means. For example,
46:20we can set the background dash color two green.
46:26Now let's save our file and refresh the page.
46:31And when we hover over this button, you'll notice that it's green.
46:35So the way that this works is that if we are not hovering over,
46:39all of these styles apply. So the background color is red.
46:43If we are hovering over the button,
46:45these styles now apply in addition to these styles.
46:49So we're essentially adding extra styles when we hover.
46:53So this colon hover is known as a pseudo class.
46:57It basically adds extra styles in a certain situation. So in this case,
47:02it's going to add extra styles when we hover.
47:06Another example of a pseudo class is dot subscribe button
47:11colon active.
47:14So the active pseudo class activates when we click on the element.
47:19So when we click on the button, we can set the background dash color to blue.
47:26Let's save this and refresh. Now when we hover over,
47:31we're going to apply these styles. So the background color is going to be green,
47:34and then when we click, we're going to apply the active styles,
47:39and then the background color is going to be blue.
47:43So let's look at our design and see what kind of hover styles we have.
47:48Let's refresh. So when we hover over our subscribe button,
47:51it seems to turn a little bit more light, and if we click it,
47:57it becomes even lighter.
47:59So the way to make our button lighter is using a new property that I'm going to
48:04introduce. So let's get rid of these for now. Let's save and refresh.
48:09So we got rid of those pseudo classs styles.
48:13We're going to set a CSS property called opacity.
48:18So opacity tells us how SeeThrough and HTML element is.
48:23It takes a value between zero and one.
48:26A value of one means that this element is completely normal.
48:31So if we save this and refresh, you can see that if we hover over it,
48:35it's completely normal. And as we decrease the opacity,
48:39let's decrease it to 0.7.
48:43The elements start to fade.
48:46So if we decrease it even more to 0.3
48:51refresh, now it's even more faded.
48:53So the opacity is used to fade out an element.
48:57If we go from one to zero, the element's going to fade out.
49:01So if we said it's a zero and refresh,
49:05now it's basically completely transparent and see through.
49:10If the opacity goes from zero to one,
49:12that means the element's going to start to fade in.
49:14So that's how opacity works for now. If we hover over it,
49:18let's set the opacity to maybe 0.8.
49:24So it's going to be a little bit see through, but not totally see through.
49:28So let's refresh and hover over it. Okay,
49:33let's look at our design. So that looks pretty close to what we have next,
49:38let's set the active styles. So in our design, if we click on this,
49:42it gets even lighter. So we're going to set an even lower opacity to make our
49:47button fade out even more. When we click on it,
49:51let's set it to something like 0.4
49:57or 0.5. Let's say save it and refresh.
50:01Now when we hover over it, now when we click,
50:04the button gets lighter and we can compare that to our design,
50:08and that looks pretty good to me.
50:11Now we're going to work on the hover styles for our join button.
50:15So if we look at our design, the colors for this drawing button sort of inverts.
50:19So the background color and the text color, they reverse. So to do that,
50:23we're going to go into our code, and again,
50:26we're going to target the join button with a dot join
50:31button.
50:33And we're going to add a pseudo class called colon hover.
50:39And now all the styles inside here will apply when we hover over this button.
50:44So when we hover over it, we want to invert the colors.
50:48So we want to set the background dash color to
50:53our text color, which is this
50:57copy paste.
51:00And we also want to set the text color to our background color.
51:05So we're going to switch them up. Let's copy paste here,
51:10save it and refresh.
51:14And now when we hover over our join button, that looks pretty good.
51:20The next thing is when we click the join button,
51:22you'll notice that it also fades out.
51:24So we're going to add an active pseudo class to this button as well.
51:28So target the join button class and add a pseudo class called
51:33active.
51:35So these styles will activate when we click this element.
51:40So let's set the opacity to maybe 0.7,
51:44maybe save it, refresh, click it. Okay,
51:50so I think that looks close enough. So 0.7 looks pretty good.
51:55So that is how we set hover styles and other pseudo classes with our CSS code.
52:00Next, we're going to learn how to transition smoothly between these two styles.
52:05So for example, if we go back into our project and we hover over this button,
52:09you notice that the background color and the text color change smoothly,
52:16but for our colors, it changes almost instantly.
52:19So how do we make this transition? So to do that,
52:24we're going to scroll up to our subscribe button. First,
52:28we're going to add a property called transition.
52:33So transition property takes two values.
52:36The first one is what we want to transition. So in our case,
52:40we want to transition the opacity smoothly.
52:43So we want to smoothly fade out the button when we hover over it instead of
52:47instantaneously. So let's transition the opacity.
52:53And the second value is how long this transition will take.
52:58For example, let's set it to one s, which is one second,
53:02end it with a semicolon and save. Let's go back and refresh.
53:08And now when we hover over our button,
53:10you'll notice that the opacity changes smoothly.
53:14Now it might be a little bit hard to see,
53:15so let's change this to 0.1 to show you the effect
53:20refresh.
53:22So now you can see that the opacity is changing smoothly over one second.
53:29So this is how you transition between different styles when you're hovering over
53:33them. Now let's set it back to 0.8,
53:37and we're going to change one second because it's a little bit too long.
53:41So usually a good transition duration is something like
53:450.15 seconds. So it's pretty fast,
53:49but it's not too fast and it's not too slow.
53:52Let's go to our webpage and refresh. Now when we hover over it,
53:56we get a nice smooth transition. It might be a little bit hard to tell,
54:00but we do get a nice smooth transition
54:03instead of what we had before, which transitioned immediately.
54:08Let's work on the join button now.
54:09So this one is a lot easier to see the difference.
54:13Let's scroll down to the join button. And again,
54:16we're going to add a transition. So we're going to add transition,
54:23and we're going to give it two values,
54:24what we want to transition and how long. First,
54:28let's transition the background dash color and how long we're
54:33going to transition for one second. As an example,
54:38let's save our file and refresh. Now,
54:41when we hover over the join button,
54:43the background color changes smoothly over one second,
54:47but you notice that the tax color changes immediately,
54:50whereas the tax color here also kind of transitions.
54:55So to make the tax color transition as well,
54:59we need to add another property to transition.
55:02So we can actually transition multiple properties.
55:05We just have to separate it with a comma. So if we have a comma here,
55:09we can add another property to transition. This time,
55:12I'm going to transition the color, and we're also going to give it a duration,
55:17which is one second. So how long it takes to transition this property,
55:24save it, and refresh. Now, when we hover over this button,
55:28it will transition both background color and the color smoothly over one
55:33second. And that's basically how transitions work.
55:38So sometimes you might be tempted to put this transition property into the
55:43hover because you think that we want to transition when we hover,
55:48so we have to put it here. Now, the problem with this is that if we refresh,
55:53when we hover over the button, everything looks good.
55:56But as soon as we hover out, these styles change immediately.
56:00And that's because remember, these styles only apply when we're hovering.
56:04So if we are hovering, then we have a transition.
56:08But as soon as we take off the hover,
56:10it's the same thing as having no transition at all.
56:13So that's one common pitfall of the transition property.
56:17So let's move it back here where it should be.
56:19So just make sure that you put the transition always in sort of base CSS
56:24style.
56:28The last thing we're going to learn in this lesson is how to create shadows.
56:31If we go to our project and we look at our design, I'm going to zoom in here.
56:36When I hover over the tweet button, it creates a faint shadow under the button.
56:40So we're going to learn how to create this. So let's zoom out for now.
56:46We're going to go down to the tweet button styles,
56:50and the shadow is just another CSS property.
56:53So the property for a shadow is box dash shadow
56:59colon. Now, box shadow actually takes four values.
57:04So I'm going to set the values to zero for now,
57:08and then we're going to change them one by one to see how they work.
57:13Let's save this and refresh. And now we do have a shadow,
57:18but we can't see it because it's right underneath the button.
57:23So the first value here determines the horizontal position of the shadow.
57:27For example, I can set it to 10 pixels, and if I save,
57:32the shadow will appear 10 pixels to the right.
57:37The second value sets the vertical position of the shadow. For example,
57:41if I set it to 10 pixels in the second value,
57:46it will push a 10 pixels down.
57:48So now you can see we actually do have a shadow 10 pixels to the right and 10
57:53pixels down from the button.
57:55Now the third value here is the blur.
57:59So if we set the blur to maybe 10 pixels,
58:02save and refresh, now the shadow becomes blurred,
58:08and the last valley is obviously the color.
58:11So we can actually change it to whatever we want.
58:13We can actually change it to something like red, save it refresh,
58:18and we get a red shadow.
58:21So this is basically how shadows work. We have a horizontal position,
58:25a vertical position, blur and color. So don't worry,
58:30the more that you work with shadows,
58:31the more you'll get familiar with what these four values can do.
58:35So let's try creating a more realistic shadow.
58:38Usually shadows aren't red or any color.
58:42They're usually kind of a darker shade of whatever they're covering.
58:47So to create a color like that,
58:48we're going to need a new way of measuring color. So let's get rid of this,
58:52and we're going to use something called R G B A.
58:58Rrg. B A is the same thing as rrgb,
59:02except there's an A value.
59:04So this a value essentially means the opacity of the color,
59:08how SeeThrough it is.
59:10We can set the RGB 2, 0, 0, 0.
59:14That gets us to black as we learned.
59:17And then the fourth value is our A value. If we set it to one and save,
59:23this is going to be pure black. But as we decrease a value,
59:27the color is going to get more and more faded out and more and more transparent.
59:32So if we decrease it to 0.6,
59:37save and refresh.
59:39Now this color is getting more transparent and faded out.
59:44So a pretty natural color for shadow is something pretty faint,
59:48like 0.15. So for shadows,
59:52we usually don't want it to be too noticeable.
59:54Shadows are best when they're very subtle.
59:58And now we kind of want to move the shadow a little bit closer to the button so
1:00:01it looks a little more natural.
1:00:02So let's actually move it maybe five pixels and five
1:00:07pixels. Let's see how that looks. Save it and refresh. Okay,
1:00:12I think that looks pretty good.
1:00:14So that's how we create a natural looking shadow with the box shadow property.
1:00:19We have four values, the horizontal position, vertical position, the blur,
1:00:24and the color measured. With R G B A,
1:00:27the value means opacity or how C through this color is.
1:00:32The final step of this lesson is to only make this shadow appear when we hover
1:00:37over the button. So for example, for here, if we hover over,
1:00:41we can see the shadow. If we're not, the shadow's gone.
1:00:45So this is another style of button that we can create.
1:00:50So let's use what we learned so far. Remember,
1:00:53we first use a.to target the class.
1:00:56So we're going to target the tweet dash button class.
1:01:00We're going to add a pseudo class here called hover,
1:01:06and then we're going to move our shadow into the hover pseudo class.
1:01:10Let's cut and paste in here.
1:01:15So remember, the way this works is that let's refresh first.
1:01:20If we are not hovering over the button, we get all of these styles.
1:01:24If we are hovering over the button, we're going to get these styles,
1:01:28these hover styles,
1:01:29as well as all of these. So these styles get added on when we hover.
1:01:34So now when we refresh and we hover over this button,
1:01:38we're going to get a pretty subtle shadow. It's not perfect,
1:01:41but I think it's close enough to what we want.
1:01:45Now the last thing we're going to do is to transition the shadow.
1:01:49So we can actually transition the shadow pretty easily by just adding the
1:01:54transition property,
1:01:57and we're going to tell it what we want to transition and how long.
1:02:01So you want to transition the box dash shadow,
1:02:05and let's transition it to something natural, like 0.15 seconds.
1:02:11Now save and refresh. Now, when we hover over this button,
1:02:15we get a nice transition on the shadow like this.
1:02:21All right,
1:02:21so the last thing we're going to do is I realize I forgot to change the
1:02:25durations here.
1:02:26So let's change it to 0.15 and 0.15.
1:02:31Let's save it and refresh.
1:02:34So now this looks something like what we have in our designs.
1:02:39So we just learned some intermediate H C M L skills,
1:02:42such as creating hover effects, other pseudo classes, transitions,
1:02:47and shadows.
1:02:50Here are some more exercises from famous websites that you can try to copy.
1:02:55This time. We're also going to copy the hover styles.
1:03:00As always, you can find these solutions and more exercises below the video.
1:03:12In this lesson,
1:03:13we're going to learn about one of the most useful tools for web development
1:03:16called the Chrome Dev Tools,
1:03:18and we're going to use the dev tools to get perfect colors for our buttons.
1:03:23So first of all, what are the Chrome dev tools?
1:03:25So I find that it's all easier to demonstrate it than to try to explain it.
1:03:29So let's go to our website
1:03:32and we're going to click in an empty area and we're going to click
1:03:37inspect, and this will open up the dev tools.
1:03:43So the cool thing about this is that we can now see all the HTML on our page.
1:03:48If we draw down here, we can see all the buttons.
1:03:52So this is a great way to visualize the HTML as well as the CSS on our page.
1:03:57If I click into one of these buttons,
1:04:00I can see all the CSS that is applied to this button. So what's
1:04:05better is that we can open the dev tools in any website that we want,
1:04:09so we can actually open it in super simple.dev
1:04:14and you can see all the HTML that is on this website as well as all the
1:04:18css.
1:04:19So this is a really great tool where you can open it in any website that you
1:04:22want and see the exact styles that they're using on that website.
1:04:28The next feature I want to show you is this pointer icon in the top left.
1:04:32So instead of trying to find these buttons in all of this html,
1:04:36we can actually click this pointer icon and it will let us hover over any
1:04:40element on the webpage and show it down here.
1:04:43So if we hover over this tweet button and click it,
1:04:47it will find the element for us in the html.
1:04:51And now we can look at these styles here to see what kind of styles and more
1:04:56importantly,
1:04:56what kind of background color is set on this button so that we can get a perfect
1:05:00background color. So one thing to note is that this background color is
1:05:05actually another way of measuring color.
1:05:08So currently we learned about rgb.
1:05:11Now we have another way of measuring color, and this is called hex.
1:05:16It's basically the same as rgb. The first two characters here,
1:05:20one in D represent how much red. The second two represent how much green,
1:05:24and the third two represent how much blue. So with a little bit of math,
1:05:29we can convert from hex to rgb.
1:05:33So I just google a hex to RGB calculator and I
1:05:38find any calculator and then I use it to convert
1:05:43the hex value.
1:05:44So I'm going to copy this into the calculator and then convert it
1:05:49and it will give me the RGB value, so it'll do that math for me.
1:05:54So that's just another way of measuring color called hex.
1:05:58The next feature I want to show you in the dev tools is this computer tab. So
1:06:02this tab actually shows us all the final styles that are applied to this
1:06:07element.
1:06:08So we can actually scroll down here and we can find the background color in the
1:06:12RGB value.
1:06:14We can also find things like the height,
1:06:17the final calculated height,
1:06:19the final calculated width so that we can get the perfect size as well as the
1:06:23perfect background color.
1:06:26So let's actually just use the background color here,
1:06:30and we're going to copy this and paste this into our code.
1:06:35So we're going to get an exact color instead of trying to guess it like we were
1:06:39before. So if I copy and paste here, save it,
1:06:44and now refresh.
1:06:46Now our button has the exact same color as what we have here.
1:06:51So the same thing happens for the join button.
1:06:53Let's click this icon here and hover over the join button to find it in the
1:06:58html click. And now we can see all these styles,
1:07:02all the final computed styles on the join button. So most importantly,
1:07:07we can find the order color, which is this.
1:07:14Let's go into,
1:07:15let's copy it and put it into our CSS so that we can get a perfect color.
1:07:20End it with a semicolon to follow the syntax rules.
1:07:24Copy it there and copy it here.
1:07:30Now we're going to save refresh,
1:07:34and now our button color is going to match the design. Exactly.
1:07:40So that's how you use the dev tools to get perfect color for our HTML
1:07:45elements.
1:07:48Now we're going to learn about the CSS box model,
1:07:51which basically allows us to add space between our elements like this as well as
1:07:55add space inside our element to make it bigger.
1:07:58The first part of the box model is spacing on the outside of the element.
1:08:03This is called margin. If we look at our code,
1:08:06we already worked with margin before here.
1:08:08We set the margin right to eight pixels.
1:08:11That means that we added space on the outside of the button on the right of
1:08:15eight pixels. If we change the margin right to 30 pixels for example,
1:08:21and save and refresh. Now there's 30 pixels of space on the outside,
1:08:26on the right side of the button. So we can add margin to all four directions,
1:08:31top right, bottom and left.
1:08:34Let's try adding margin to the left side of the button.
1:08:38This time we're going to add margin left of 20 pixels,
1:08:42save it and refresh.
1:08:45And that adds space on the outside of the button on the left of 20 pixels.
1:08:50So that's basically how margin works.
1:08:52It lets us add spacing on the outside of the element.
1:08:56The second part of the box model is spacing on the inside of the element.
1:09:00So basically all these spacing in here around our text.
1:09:05So currently if we look at our code,
1:09:07we're setting the height and width of our buttons.
1:09:10And this is not actually a good idea. I'll show you why.
1:09:13I'm going to scroll down to the join button because it's a little easier to
1:09:18see and I'm going to change the text to join my
1:09:23channel, save it and refresh.
1:09:27And you'll notice that the text is actually overflowing the button like this,
1:09:31and that's because if we scroll up,
1:09:35we're setting the height and the width.
1:09:37That means that we're forcing the button to have a height of 36 pixels and a
1:09:40width of 62 pixels. But here, notice that our content is too big.
1:09:45So what we want to do is to remove these lines and save it
1:09:50and refresh the page. And by default,
1:09:53our button actually adjusts the size automatically based on the content.
1:09:58So now instead of setting the height and the width,
1:10:00we're going to achieve the same thing by adding spacing on the inside of the
1:10:04button.
1:10:06So the spacing on the inside of the button is called padding. Let's go into our
1:10:10code and give it a try.
1:10:13So we're going to add padding dash left of 30
1:10:18pixels, save it and refresh.
1:10:22And you can see that padding add spacing on the inside of the button.
1:10:26And just like margin, we can set padding in all four directions.
1:10:30So let's try adding padding dash top
1:10:35to 20 pixels, save that and refresh.
1:10:41And now you can see that we added padding on the top by 20 pixels.
1:10:46So we can actually use the chrome dev tools that we learned earlier to visualize
1:10:50the margin and padding of our elements.
1:10:52Let's go into a blank area of our webpage and we're going to right click and
1:10:57inspect and then click this top left icon and then click our
1:11:02subscribe button.
1:11:04So I'm going to drag this down and then we're going to go into the computed
1:11:08tab.
1:11:11So this section is basically the box model. We have our margin,
1:11:16which is a space on the outside of the element.
1:11:18You can see that highlighted in orange. We have the border,
1:11:21which we learned earlier, and we have the padding,
1:11:24which is the space on the inside of the element,
1:11:27which you can see highlighted in green buttons by default,
1:11:30have a padding of six pixels on the left and right and one pixel on top and
1:11:35bottom.
1:11:37So let's click this top left again and go to our drawing button and click this
1:11:41button. In this example we have padding on the top of 20 pixels,
1:11:45which is what we have in our code. We have padding on the left of 30 pixels,
1:11:49also what we have in our code.
1:11:51And then we have a default padding of six pixels on the right and one pixel at
1:11:56the bottom. And for this button we have a border of one pixel wide,
1:12:01which you can see here in our code.
1:12:05So all of these combined make up the c s s box model.
1:12:08This basically determines how much space and element takes up on the page and
1:12:13how far it is away from other elements.
1:12:18So now that we learned the box model,
1:12:19we're going to use it to recreate our design here.
1:12:23So currently if we look at our code, we're using height and width.
1:12:27Let's replace this with the box model.
1:12:30Let's get rid of this and save it and refresh.
1:12:35And now our buttons back to what it was before.
1:12:38And now we're going to add padding to this button so that it matches the design
1:12:42at the bottom here.
1:12:45So let's add some padding dash top of 10
1:12:49pixels.
1:12:50So we'll add spacing on the inside of the button at the top here of 10 pixels.
1:12:55We're also going to add padding dash bottom of 10 pixels.
1:13:01So let's save that and refresh. Okay,
1:13:04so now we have space at the top and bottom, so that looks pretty close.
1:13:09We're also going to add space on the inside on the left, right?
1:13:13So we're going to add padding dash left of 16
1:13:18pixels and padding on the right
1:13:22of 16 pixels.
1:13:25So let's save that and refresh.
1:13:28And I think this looks close enough. So using padding,
1:13:31we added spacing on the inside of our button.
1:13:35And the good thing about this is that if we change the text like this and save
1:13:40it and refresh, the button will resize with the text,
1:13:44but it will keep the spacing on the inside.
1:13:47So using padding is a better alternative to height and width.
1:13:52So let's save that and refresh the page
1:13:57and let's actually move these buttons back closer together.
1:14:01So currently if we scroll up,
1:14:02we have margin on the right of 30 pixels. So spacing on the
1:14:07outside of the button on the right of 30 pixels,
1:14:10we're going to change back to eight pixels so that it's closer like we have
1:14:15in our design, save it and refresh. Okay,
1:14:20so that looks pretty good.
1:14:21Now one thing you'll notice is that our buttons are not aligned with each other.
1:14:25So the join button is all the way at the top while our subscribe button is a
1:14:28little bit below. So why is this happening? By default,
1:14:33the browser tries to align our buttons based on the text.
1:14:37So notice that the text is in one line like this.
1:14:41So that's the default behavior of the browser.
1:14:43This is because browsers in the beginning were mostly text-based.
1:14:48Now to override this behavior and align everything to the top like we had
1:14:51before,
1:14:52we can go into our CSS and we're going to add a property called
1:14:57vertical dash Align,
1:15:01and we're going to set this to top. So instead of aligning the buttons based on
1:15:06the text like this,
1:15:07we're just going to align everything to the top If we save that and
1:15:12refresh. Now the subscribe button is aligned to the top,
1:15:16which is right there. Let's do the same thing for the tweak button.
1:15:21We're going to scroll down and we're going to add
1:15:25vertical dash align top here as well.
1:15:30Save and refresh. And now everything's aligned properly again.
1:15:35Now let's work on the join button.
1:15:37I'm going to scroll down and remove this extra text here,
1:15:43save it and refresh. And now we're going to go to our CSS for the join button.
1:15:47So I'll scroll up to right here and we're going to adjust the padding.
1:15:53So let's actually just borrow the padding from the subscribe button because they
1:15:57look pretty similar.
1:15:58So I'll scroll up here and copy these and just
1:16:03move them down to the joint button right here.
1:16:07Save that and refresh. Okay, so that looks pretty good,
1:16:11except our joint button looks a little bit off.
1:16:14It looks a little bit taller than our subscribe button,
1:16:17and that's because the border actually adds a little bit of size to this button,
1:16:21so it adds one pixel on the top and bottom.
1:16:24That's why this button is taller than the subscribe button. So to compensate,
1:16:29we're actually going to reduce the padding at the top and the bottom by one
1:16:34pixel, say save it and refresh.
1:16:39And now they're the same size. We have nine pixels of space on the inside,
1:16:43plus the one pixel of the border width,
1:16:46and that matches the 10 pixels of space on the inside of the subscribe button.
1:16:51And I'll leave changing the tweet button up to you as an exercise.
1:16:56So that is a CSS box model.
1:16:59Every element can have spacing on the outside called margin space on the inside
1:17:03called padding as well as a border.
1:17:06And these properties determine how much space and element takes up on the page.
1:17:14Here's some exercises of using the box model to get yourself more familiar with
1:17:18this concept and these properties.
1:17:33For most of the course, we've been working with buttons. In this lesson,
1:17:37we're going to work with text and we're going to learn how to style text.
1:17:41So just like our button lesson,
1:17:43I've created an exercise that we can practice with text.
1:17:46So we're going to go to super
1:17:48simple.dev/exercises/text.
1:17:54And now we have some texts from YouTube and Apple that we're going to learn how
1:17:58to copy. So first of all,
1:18:00let's create a new HTML file where we can focus on practicing text
1:18:05styles.
1:18:06So I'm going to go here and create a new file and let's just call this
1:18:11text dot html.
1:18:15And now we're going to open this file in our browser.
1:18:19So open the folder that contains our code and right click
1:18:24open with Google Chrome.
1:18:28I'm actually going to put this up here. All right,
1:18:32so now we're ready to begin.
1:18:35If you've ever written a text document before using something like Google Docs
1:18:39or Microsoft Word, you've probably seen something like this.
1:18:43This is a toolbar that allows us to change the style of our text.
1:18:48We can change the font, the text size, we can make it bold, we can center it,
1:18:53et cetera. In css, we have a style for each of these things.
1:18:58Let's go to our code and we're going to first start by creating some text on our
1:19:02page.
1:19:03So let's first create a paragraph and then insider paragraph.
1:19:07Let's start with the text here.
1:19:10So I'm going to copy and paste this into our paragraph,
1:19:15and I'm just going to reorganize the code a little bit and save.
1:19:20Remember that in H T M L, these extra spaces and new lines don't matter.
1:19:25Now refresh the page and we have our first paragraph that we can practice with.
1:19:30Next, let's create a style element so we can write some CSS code.
1:19:37Now we'll set a class on this paragraph so that we can target it in CSS
1:19:43class equals video dash title because
1:19:48this is a video title that I copied from YouTube.
1:19:51So let's save it and refresh.
1:19:54And now we can start targeting this paragraph in our css.
1:19:59So remember, we're going to start with a.to target a class,
1:20:03and we're going to target video dash title.
1:20:08So the first thing we're going to change is the font to change the
1:20:13font. The CSS property is font dash family.
1:20:19So websites by default use the font called Times New Roman.
1:20:23We're going to change the font to a font called aerial,
1:20:28save it and refresh. And now you can see we changed the font.
1:20:33Let's go to the next one.
1:20:35So this is the font size and we can change the font size using the property
1:20:40font dash size,
1:20:43and let's change it to something like 30 pixels,
1:20:47save it and refresh. And now we have a bigger font.
1:20:52The next example is, let's make it bold.
1:20:55We're going to go here and we're going to set the font dash weight
1:21:00to be bold,
1:21:03save it and refresh. And now we have bold font.
1:21:08So as you can see, CSS has properties for doing all of these things,
1:21:13and for most of these properties it's pretty easy to Google them. For example,
1:21:17let's Google for how to make a font italic.
1:21:20So we'll go to Google and we just need to search something like css,
1:21:25text italic. And now in the first result,
1:21:31we're going to go in here, and if you scroll down,
1:21:34you can see this CSS font style italic.
1:21:39So I'm going to copy this and paste it in my code,
1:21:44save it and refresh. And now we have italic text.
1:21:50The last one I'm going to show you for now is how to center this text because in
1:21:54our exercise we have an exercise where the text is centered to center
1:21:59text. We're going to go to our code and we're going to type text dash a
1:22:03line.
1:22:04So this is the property for centering text or putting it to the left or to the
1:22:09right. Now we're going to give a value of center,
1:22:14save it and refresh, and that's how we center our text.
1:22:19So that was pretty easy right now let's go ahead and try to copy this style in
1:22:24our exercise. So if you remember,
1:22:27the general strategy for creating anything that we see is first create the
1:22:31element with HTML and then style it with CSS one by one.
1:22:36Let's go ahead and do that for this exercise.
1:22:39So I'm just going to resize this back and we're going to start
1:22:45by resetting all of these styles, save it and refresh.
1:22:51First I'm going to start with the font family. So for this exercise,
1:22:55I actually use the font family aerial just to make it easier for us. So we're
1:22:59going to set the font dash family to
1:23:03aerial, save it and refresh.
1:23:08Next, I'm going to change the font weight.
1:23:11So this font is bold and I want to make my font bold as well.
1:23:15So I'm going to add font, dash weight, bold,
1:23:21save it, and refresh. Next, let's change the font size.
1:23:26So I'm going to change this font size to something bigger,
1:23:31like maybe 20 pixels,
1:23:33save it and refresh.
1:23:37And it looks a little too big comparing to the design.
1:23:41So let's tone it down just a little bit. Maybe 18 pixels,
1:23:46save and refresh. Okay, so I think that looks close enough.
1:23:51Next, you'll notice that this text sort of wraps around to a second line,
1:23:55while ours doesn't.
1:23:57The way to make this happen is we're going to set a width on this title. Now,
1:24:02I know that in the previous section we said it's bad to set a width,
1:24:05but here it's actually what we want because if we set a width,
1:24:10we're going to force the text onto a second line. So let's go ahead and set a
1:24:14width right now,
1:24:16and I'll set it to something like 400 pixels. Let's see how that looks.
1:24:22Save it and refresh. Okay, so it needs to be less than that.
1:24:26Let's do 300 pixels, save and refresh. Okay,
1:24:30so that looks right to me now.
1:24:33And the final thing with the title is I notice there's more spacing between the
1:24:37lines here than what we have.
1:24:40So to adjust the spacing between lines,
1:24:43the property is called line dash height.
1:24:48So don't worry if it seems like we're learning a lot of new properties.
1:24:51The point of this lesson is for us to go through some complicated examples
1:24:55together,
1:24:55which will prepare you for the exercises that you can practice on your own.
1:25:00So for this line height, let's try something like 20 pixels,
1:25:05save it and refresh. Okay,
1:25:07so it looks like that didn't work. Let's change it to 26,
1:25:12maybe save it and refresh. Okay,
1:25:16maybe 24, save and refresh. Okay,
1:25:21so I think that looks pretty close. Next, let's work on the second paragraph.
1:25:26So we're going to create a new paragraph,
1:25:303.4 M views.
1:25:34And now to create this dot,
1:25:36we're going to create something called an HTML entity.
1:25:39So an HTML entity lets us type out special characters, for example,
1:25:43this dot and this check mark to get the H html entity. For this dot,
1:25:49we're going to Google html entity
1:25:54middle dot. And now if we scroll down,
1:25:59this will give us some HTML code that we can copy into our code.
1:26:04So I'm going to copy this and then paste it here.
1:26:08And that's going to create a dot on our page.
1:26:11So if I save it and refresh, that's what we get.
1:26:16Now I'm going to type out the rest of the text in this paragraph.
1:26:21Now save that and refresh.
1:26:24So now remember the general process is we created the element with html.
1:26:29Now we're going to style it one by one. First,
1:26:32let's give this a class so we can target it.
1:26:35Let's call this video dash stats.
1:26:40And now in our S, we're going to style this text.
1:26:46We're going to start with font, dash family, aerial,
1:26:51save, and refresh. And then we're going to change the font size.
1:26:55So it looks like our design is a little bit smaller than what we have.
1:26:59Let's change the font size to maybe 14 pixels,
1:27:04save and refresh, and I think that looks pretty close.
1:27:09Next, let's change the color.
1:27:11So let's set a color of maybe gray
1:27:17and refresh. Okay, so that's a little too light.
1:27:21So to get an exact color,
1:27:23we can right click in a blank area of the webpage, click inspect,
1:27:29and then we're going to inspect the styles of this element.
1:27:33So the trick to doing that is we're going to click this top left icon,
1:27:37hover over this element and click it.
1:27:39And then we can find all its styles in the computer tab.
1:27:43So if we scroll down, we can get the text color.
1:27:47So let's copy this and save.
1:27:53Let's refresh. And that looks pretty good compared to the design.
1:27:59Next, let's adjust the spacing between these two paragraphs.
1:28:03So remember from the previous lesson,
1:28:05the spacing outside of an element is called the margin,
1:28:09but if we look at our code, we didn't actually set any margin yet.
1:28:13So why is there so much space between these two paragraphs?
1:28:16And the reason is if we write,
1:28:18click in an empty area of the webpage and click inspect,
1:28:23And we click this icon And hover over this paragraph.
1:28:28This paragraph already has margin at the top and bottom.
1:28:32So if we click this,
1:28:33go to computed as 14 pixels of margin at the top and 14 at the
1:28:38bottom. And the same thing for this paragraph.
1:28:42And the reason for this is because paragraphs by default come with margin at the
1:28:46top and at the bottom.
1:28:49So that's why there's all this spacing that we have here where we didn't set it
1:28:53in the css.
1:28:55So the general process is we're going to remove the default spacing,
1:28:58and then we're going to set our own spacing. So let's go into our code,
1:29:03and first we're going to remove the margin dash bottom
1:29:09of the title, set that to zero,
1:29:13and we're also going to remove the margin at the top of the
1:29:18second paragraph and set it to zero,
1:29:21save that and refresh.
1:29:24And now there's no default spacing between these and they're really close
1:29:27together. Next, we can set a more precise margin bottom.
1:29:33So let's set it to maybe 20 pixels. Let's see how that looks.
1:29:37Save it and refresh. Okay, so let's way too much space.
1:29:42Let's tone it down to something like maybe five,
1:29:45save and refresh. Okay,
1:29:48so I think this looks pretty close to the design actually.
1:29:52Let's move on to the next paragraph.
1:29:55We're going to move all the way down and create a new paragraph element with
1:30:00this text inside.
1:30:04And now for this check mark, we're also going to use an HTML entity.
1:30:08Now I know that you can actually copy this and put it into our code directly,
1:30:14but some browsers might not support this,
1:30:15so that's why we're using HTML entities.
1:30:18We're going to go to Google and we're going to search HTML entity check
1:30:23mark.
1:30:25And I'm going to scroll down and grab the HTML entity here.
1:30:29So here we actually have three. I'm just going to take the first one, copy,
1:30:34paste, save it. Let's go back and refresh.
1:30:40Okay, so that looks pretty good. Next, let's keep styling these one by one.
1:30:44So I'm going to go a little bit faster here because it's basically the same
1:30:48thing that we've been doing for the first two.
1:30:50It's called this one video author, and then we'll style it up here.
1:30:59So we'll set the font family to your aerial, like the rest of the paragraphs.
1:31:04Going to set the color to the same as this paragraph,
1:31:09it's a copy and paste.
1:31:15Okay, that looks pretty good. Oh yeah,
1:31:17we have to set the font size looks a little too big right now.
1:31:21Set the font size to 14 pixels. Next we're going to
1:31:25reset the default spacing here.
1:31:28So we're going to set the margin dash bottom and remove it by setting it
1:31:33to zero, and also remove the margin top
1:31:40and set it to zero, save and refresh.
1:31:43And now we're going to set a more precise margin.
1:31:45So let's try maybe 30 pixels, see how that looks.
1:31:51Okay, that's way too much. Maybe 20 pixels. Okay,
1:31:55I think that looks about right. Then we're going to do the third paragraph.
1:32:00Let's go down here,
1:32:02create the element and then style of it with css.
1:32:07I'm just going to copy and paste this in here,
1:32:12save and refresh.
1:32:17First, let's give a class to the text so that we can target it.
1:32:21Let's call this video dash description.
1:32:28Go up here, video dash description.
1:32:33We want a font family of aerial,
1:32:38a font size
1:32:42of 14 pixels and the same color,
1:32:50and we save it and refresh. Okay, that looks pretty good.
1:32:56And now we want to give it a width to make it wrap around like this.
1:33:00So let's set the width to the same as the title, which is 300
1:33:07with 300 pixels,
1:33:10save and refresh. Okay,
1:33:13so it looks like this IO is actually on a separate line.
1:33:17Let's make it two 80,
1:33:20save and refresh. All right, so that looks pretty good,
1:33:25and I'm also going to make it two 80 up here just to make sure they're the same.
1:33:32So the last thing I'm going to change is the height or the space between these
1:33:36lines. To do that, we're going to use line height.
1:33:40Let's scroll down and then add another property called line dash height.
1:33:46And let's set this to 20 pixels. Let's see how that looks.
1:33:50Save and refresh,
1:33:53and let's set it to maybe 22 pixels,
1:33:57save and refresh. Okay, so I'm pretty happy with this.
1:34:01And lastly, we're going to modify the space between these two paragraphs. First,
1:34:06we're going to reset the default margin.
1:34:09Let's get rid of the margin bottom on the first one here and the margin top
1:34:14on the second one. So margin dash top,
1:34:18I'm going to get rid of it and set it to zero, save and refresh.
1:34:23And then we're going to set a margin bottom, maybe the same thing as up here,
1:34:2820 pixels, save and refresh.
1:34:34All right, so that looks really good to me.
1:34:37We just recreated a really nice looking style that you can find on youtube.com.
1:34:41And the general process that we use is first we created the elements with html,
1:34:46and then we style them with CSS one by one.
1:34:51So before we move on to the next exercise,
1:34:54I'm going to show you a way to clean up our code.
1:34:56So if you notice all of our styles right now have a line called font,
1:35:00family Aerial.
1:35:02Now we can actually clean this up and remove the duplication by creating a new
1:35:06style.
1:35:07This time we're going to target all paragraphs on the page and we're going
1:35:12to give all paragraphs, font, dash, family colon,
1:35:18ariel, save.
1:35:21So this style is going to apply to all paragraphs, which means all of these.
1:35:26That means that we actually don't need this line in any of these
1:35:31class styles anymore, so we can actually remove all of these.
1:35:36Now if I save it and I refresh,
1:35:39you can see that nothing changes because this is doing the same thing as the
1:35:43code that we had before.
1:35:45So you can also see from this example that an element can be targeted by two
1:35:50sets of styles. For example, for this code here,
1:35:54we're targeting all P elements on the page and all elements with a class of
1:35:58video dash title. If we scroll down here,
1:36:02here we have AP element that has a class of video dash title,
1:36:06which means it's going to be targeted by both this set of styles and this set of
1:36:11styles. So it's being targeted by multiple sets of styles.
1:36:16Now another thing that we can clean up is remember how we reset the margins
1:36:21for all of our paragraphs. Instead of doing it for each one individually,
1:36:25we can actually put it all up here. So for example,
1:36:29we can set the margin dash top to zero
1:36:35and the margin dash bottom to zero zero,
1:36:40we save it and we refresh.
1:36:43It looks pretty much the same except we're now cleaning up all of the default
1:36:47styles up here so that we don't have to do it in our code at the bottom. So we
1:36:52don't need this anymore or this
1:36:57or this. If we save that and refresh,
1:37:01we still get the same thing because we've reset all of our styles in this set of
1:37:06styles.
1:37:08Now the last concept I want to show you before we move on to the next exercise
1:37:12is the fact that in this set of styles,
1:37:16we're setting the margin bottom to zero,
1:37:19but here we're also setting the margin bottom to five pixels and the margin
1:37:23bottom to 20 pixels. So how does that work?
1:37:26We're setting it to zero here and to five and 20 here.
1:37:30Which style does the element actually get?
1:37:33And the answer is we're getting these style down here. So if we refresh,
1:37:37you'll notice that there's still 20 pixels of space between these two
1:37:41paragraphs.
1:37:43Now you might think that it's because this line is at the top,
1:37:47and then once we get to this line,
1:37:49it overrides anything that comes before it. But if we actually move
1:37:54this to the top
1:37:59and we save and reload,
1:38:01you'll see that we still have 20 pixels of margin bottom.
1:38:05So why is this happening? This is something called CSS specificity.
1:38:10If we have multiple lines setting the same property,
1:38:13there's actually a priority that the browser follows. So in this situation,
1:38:18this style has more priority than this style,
1:38:21and to determine which one has more priority,
1:38:24we have to look at this word before the brackets.
1:38:27So this word tells us what these styles are targeting.
1:38:31This is known as a selector.
1:38:34This is another selector that targets a particular class.
1:38:40Now the selector that is the most specific is going to have higher priority.
1:38:45So this selector is actually more specific than paragraphs.
1:38:49So what I mean by specific is that this targets all paragraphs on the page,
1:38:54and this targets a specific class. So not all paragraphs are going
1:38:59to have this class of video dash stats.
1:39:02So that's why this is more specific.
1:39:05It targets a smaller group of elements than this.
1:39:09That's why this line has priority over this line.
1:39:14So that's just an introduction to CSS specificity. For now,
1:39:17just know that a class name like this has more priority
1:39:23than an element name like this.
1:39:26So I'm going to move this code back and we'll continue with the rest
1:39:31of this exercise. Next,
1:39:34we're going to copy this text from Apple.
1:39:37So you can see that there is a background color and the text is centered.
1:39:41And also if I hover over this part of the text,
1:39:44we get a pointer on our mouse and we have an underlying
1:39:48text. So let's see how we can do this.
1:39:53First we'll create the element and then we'll style it one by one. So we'll go
1:39:57down here and we're going to create a new paragraph
1:40:01and let's copy this text into that paragraph.
1:40:05Let's copy and paste. Whoops. Okay,
1:40:10save it and refresh. Okay, so that looks good.
1:40:15So usually if you have a greater then or less than symbol,
1:40:18you want to create it with an HTML entity because the browser could confuse
1:40:22these symbols with an HTML tag.
1:40:26So I'm going to search for the HTML entity for
1:40:30greater than. So this is the symbol that we want,
1:40:36and I'm just going to copy and paste this into our code,
1:40:41save it, and refresh. Next,
1:40:45let's actually add some space at the bottom of this paragraph so that we can see
1:40:50our new paragraph clearly.
1:40:52So we're going to here and just add some
1:40:56margin to the bottom because it's a little bit too cluttered right now.
1:41:02All right, so that looks pretty good.
1:41:05We're going to start by adding a class to our paragraph,
1:41:08so we can target it in our CSS class equals maybe
1:41:13apple dash text,
1:41:16save it and refresh and
1:41:21apple text. Okay,
1:41:26and first I'm actually also going to give some spacing at the bottom
1:41:32so it's easier for us to see our actual code.
1:41:36So 50 pixels at the bottom, save and refresh,
1:41:40and now it's a little easier to see what we're working with.
1:41:43So next I'm going to change the font size.
1:41:46One thing you'll notice is that the font family is already aerial.
1:41:50If we scroll back up,
1:41:52we have this set of styles that target all paragraph elements.
1:41:56So it's already set our font family two aerial.
1:41:59Let's scroll back down and let's adjust the font size.
1:42:04So this one looks a little bit smaller,
1:42:06so let's set it to maybe 14 pixels. Let's see how that looks.
1:42:12Save it and refresh. Okay,
1:42:15so I think that looks pretty similar to the design.
1:42:20And now the next step is let's set a background color of red.
1:42:25Now,
1:42:25a trick for getting the background color is we're going to right click in an
1:42:29empty area, inspect,
1:42:33click this icon and click the element we want to copy styles for,
1:42:38and then go to the computer tab and scroll down.
1:42:41Now we have the background color.
1:42:43I'm just going to copy this and paste it in here.
1:42:47So background dash color,
1:42:50we're going to paste that save and we refresh.
1:42:55Okay, we next we're going to do the text color.
1:43:00So let's set the text color to white color dash white
1:43:06save and refresh. And now if we look at our design,
1:43:10this text is actually centered on the page. So remember,
1:43:14the property for centering text is text dash,
1:43:17align center,
1:43:21save and refresh. Okay,
1:43:24and the last thing is there's some spacing at the top and the bottom here.
1:43:30So here we actually want to add spacing inside our paragraph. And remember from
1:43:34the previous lesson, spacing on the inside of an element is called padding.
1:43:40We're going to add some padding to the top,
1:43:43maybe 10 pixels and then padding to the bottom
1:43:49and 10 pixels. Let's see how that looks. Save and refresh.
1:43:54Okay, so I think we could add a little bit more padding,
1:43:58so let's change it to maybe 18 pixels,
1:44:02save and refresh. All right, so I think this looks close enough.
1:44:07Now the last thing we're going to work on is this text here that becomes
1:44:11underlined when we hover over it. First,
1:44:14let's learn how to create underlying text.
1:44:16We're going to practice our Googling skills and we're just going to search for
1:44:20CSS text underlying. So keep it simple.
1:44:26And then in the first link we have the text decoration property.
1:44:31We scroll down, we have an overline line through and underline.
1:44:36So let's grab this piece of code. I'm going to just copy it in here,
1:44:41save and refresh. Now unfortunately,
1:44:45this property actually affects the entire paragraph,
1:44:49but we want it to only affect this part of the text. So how do we do that?
1:44:54We're going to need to learn something called a text element.
1:44:58So a text element is an element that is inside a line of text.
1:45:02So let's do an example just to see how it works.
1:45:06We're going to go to the bottom and we're going to create a new paragraph to
1:45:09practice with. And let's actually just copy this text and put it in there,
1:45:16save and refresh.
1:45:18And now we're going to create some text elements on this paragraph.
1:45:22So the first text element I'm going to show you is called the strong
1:45:27element.
1:45:29So now let's copy maybe this text and then put it in there
1:45:35and save and refresh.
1:45:41So the strong element here creates this bolded text that you see on the webpage.
1:45:46So the thing to know about text elements is that they essentially exist inside a
1:45:51line of text and then they modify that part of the text so they're not
1:45:55modifying the whole thing.
1:45:58Another text element we can create is the you element.
1:46:03So this one creates some text that is underlined.
1:46:08So if we move this text into here,
1:46:10save it and refresh,
1:46:14we now get an underlying text element.
1:46:16So that is how we style specific parts of a line of text.
1:46:21The final text element I want to show you is called the span.
1:46:26So let's create a span element and we're going to put this
1:46:30text inside. So cut and paste,
1:46:37save it, and refresh. Okay,
1:46:40so the span element is here, but you'll notice that nothing changed.
1:46:45And that's because the span element is the most generic text element. It has
1:46:50no styles.
1:46:52So the span is really useful because we can actually give it a class
1:46:57and we can style it ourselves and give it any style we want.
1:47:02Now we could add the class attribute to these other text elements like the
1:47:06strong and the U element,
1:47:08but notice that these text elements come with a default style,
1:47:11and that may not be what we want,
1:47:13especially in this situation where we don't actually want a style until we hover
1:47:17over it. So that's why we use the span text element.
1:47:21It lets us modify a specific part of the text without affecting the whole thing,
1:47:26and it's the most flexible and we can style it however we want.
1:47:31So if we give it a class of span example
1:47:36and then go to our css,
1:47:38and then we target span example,
1:47:44we can give it any styles that we want. For example,
1:47:47we can set a color of red.
1:47:50Now if we save this and refresh the span,
1:47:54now turns this part of the text red.
1:47:57The other cool thing is that everything we know about CSS still applies.
1:48:04So we can target span example colon hover,
1:48:10and these styles will only apply when we hover over the span.
1:48:15So in this case, let's underline it because that's what we want.
1:48:19So if we do text dash decoration and underline
1:48:25just like up here, save it and refresh.
1:48:29Now this span has a color of red here,
1:48:33and when we hover over it, these style apply and it's going to get underlined.
1:48:39Let's use what we learned here. To finish up our example,
1:48:44we're going to first remove this line because we don't want to underline the
1:48:48whole thing.
1:48:49Let's refresh and we want to create a span so that we only target this part of
1:48:54the text. Let's go back down.
1:48:57I'm going to resize it a little bit just so that we can see.
1:49:02Okay, so we're going to scroll down to here.
1:49:06I'm going to wrap this in a span.
1:49:10So just going to move this into here,
1:49:15save refresh.
1:49:19And now we're going to style this span.
1:49:22So remember we're going to give it a class so that we can target it in our css.
1:49:28Let's call this the shop link, save it,
1:49:32and let's go here and we're going to style it now.
1:49:37So shop dash link.
1:49:41So remember the style for this is that the mouse turns into this pointer.
1:49:47So to do that, we're going to use a property cursor, dash pointer,
1:49:52save and refresh. So now when we hover over it, our mouse is a pointer.
1:49:58And the last thing is that we want it to be underlined when we hover over it.
1:50:02So let's create a hover style shop dash link,
1:50:06and we're going to give this pseudo class colon hover,
1:50:12and we're going to underline it with text decoration,
1:50:17underline,
1:50:20save it and refresh. And now when we hover over this,
1:50:25it's going to turn our mouse into a pointer and it's going to underline it.
1:50:30So we've achieved the exact same styles as art design.
1:50:35So there's one last thing I'm going to show you in this lesson.
1:50:38Let's go back into our code.
1:50:39We're going to scroll all the way to the bottom and recall that in H T M L,
1:50:44if we have multiple spaces like this, it will combine them all into one space.
1:50:50So if I save this and refresh,
1:50:53you'll see that only one space shows up here.
1:50:56So I'm going to show you how to get over this problem. Basically,
1:50:59instead of typing out multiple spaces in our html,
1:51:03all we have to do is set a margin left on this text element.
1:51:08So we're going to set a margin left on this element and it's going to add spaces
1:51:12on the left. So as an example, let's scroll up
1:51:18and we're going to add margin left
1:51:23to our span element here, and let's do something like 12 pixels,
1:51:28save it and refresh. And now we have spacing between our words.
1:51:34So this is how we achieve multiple spaces between our words,
1:51:38even though H T M L combines them.
1:51:41So that is how we create really professional looking text like this and
1:51:46like this, we first create the element with H T M L,
1:51:50and then we style it one by one with css.
1:51:53And if we want to style only just a part of the text,
1:51:56we have to use a text element like a span.
1:52:21In this lesson,
1:52:21we're going to learn the proper structure of html and that's going to give us
1:52:25access to all the features of html. So up until this point,
1:52:30we've actually haven't been following that structure. For example,
1:52:34if we look at our code, if we scroll down,
1:52:37we can see that we're creating elements directly like this.
1:52:40If we go to our website however, and we write click and
1:52:46we look at our html,
1:52:48we can see that we have some elements here called the HTML element,
1:52:53the head element and the body element.
1:52:56So this is a structure that we're actually supposed to have in our HTML file,
1:53:01and because we don't have it, the browsers automatically creating this for us.
1:53:06So this was fine in the previous lessons because we're just learning,
1:53:10but it's actually best to have this structure in our code because we're actually
1:53:13missing some useful features. So let's go ahead and learn what this structure
1:53:18is and add it to our code.
1:53:20So we're going to go back to all of our code and add in this structure.
1:53:26Let's go back to our very first HTML file,
1:53:30and at the top I'm going to add some spaces and we're going to learn what the
1:53:34proper structure is.
1:53:36Every HTML file is going to start with less than exclamation
1:53:41doc type space, H T M L, greater that.
1:53:45So you just have to type this line out exactly as I have it here.
1:53:49This is not really an element,
1:53:51it's just a special line that has a meaning to the browser.
1:53:55This tells a browser to use a modern version of html. If we don't have this,
1:53:59it sort of falls back to an older version that has less features.
1:54:04The next part of these structure is to create an H T M L element.
1:54:09So this says there's a webpage inside this element.
1:54:13There's not much meaning to it,
1:54:14we just have to have this at the top and the closing tag at the bottom of every
1:54:18H T M L file. Next we're going to create this head element,
1:54:24so head and closing tag,
1:54:28and we're going to create the body element. So body
1:54:34and closing tag.
1:54:36So this is the proper structure of all of our HTML files and this is how we're
1:54:42supposed to start and end our files.
1:54:45So here you can see that we have an element inside. Another element,
1:54:49this is called nesting. So not only can we have text inside an element,
1:54:54we can have other elements inside elements.
1:54:58We've actually already seen an example of this in the previous lesson.
1:55:01We put a text element, like a span inside a paragraph,
1:55:05and that allows us to have some text in the paragraph that was styled
1:55:09differently. Here we have our second example of nesting.
1:55:13We have a head and a body element inside an HTML element.
1:55:18So this doesn't actually do anything visually unlike our previous example,
1:55:22but it's part of the HTML syntax rules that we have to follow.
1:55:26Every file has one and only one HTML element,
1:55:30and this element represents the entire webpage.
1:55:34And the HTML element is designed for nesting.
1:55:37It's designed to contain one head element and one body element,
1:55:42and then everything on our webpage is supposed to go either inside the head or
1:55:47inside the body.
1:55:48So both of these elements are also designed for nesting or to have elements
1:55:53inside.
1:55:55The body element here is supposed to contain all the elements that are visible
1:55:59on the page. So let's actually open this website.
1:56:04We're going to go into our folder that contains our code and we're going to
1:56:07right click open with Chrome.
1:56:10So on this website you can see that the paragraph is visible,
1:56:14the button and the link is visible. So all of this is visible on the website,
1:56:19so it should go into this body section.
1:56:27Inside the head element are all the elements that are not visible on the page.
1:56:31So here's an example of such an element.
1:56:34We're going to create an element called title.
1:56:39So the text inside the title here is going to change the text in the tab
1:56:44here. So for example,
1:56:47if I use the text first website,
1:56:52that's going to show up in the tab. So if I save and refresh,
1:56:56that's where the title element shows up.
1:56:58But notice that this title element doesn't actually show up on the page and
1:57:02that's why it belongs in the head section.
1:57:05So the title is the first feature that we get from following this structure.
1:57:09The second feature that we get that's really useful is the ability to
1:57:13automatically reload our webpage whenever we change our code.
1:57:18So you may have noticed that every time we change our code,
1:57:23we have to go to our website and then refresh the page to see our new code.
1:57:28Now we can actually avoid this by following this structure and then installing a
1:57:32VS code extension.
1:57:34So let's go to this extension area here and we're going to install the extension
1:57:40live server. I'm going to install this,
1:57:46and now we can use the live server to reload our page automatically.
1:57:51Whenever our code changes to open this website in a live server,
1:57:55we're going to right click and we're going to click open with
1:57:59live server.
1:58:03And now we've opened this website and it will automatically refresh whenever we
1:58:08change our code. So if I change the code like this and I save now,
1:58:12it automatically refreshes without having us to go back and forth.
1:58:17So that's a really useful feature to speed up our development.
1:58:21Now let's get some more practice and we're going to convert both of these HTML
1:58:25files to use the proper structure First.
1:58:28I'm going to actually just delete all the extra tabs here.
1:58:33And now let's work on the buttons file.
1:58:37Now the live server doesn't really work if we don't have that HTML structure in
1:58:42our code. So let's add that structure first.
1:58:46I'm going to go up here and we're going to create the structure.
1:58:48So remember we start with a doc type
1:58:53space, H T M L, and then we're going to create an H T M L element.
1:59:01And then inside we're going to create a head
1:59:04and we're going to create a body element.
1:59:09And remember, the body contains everything that is visible on the page.
1:59:13So if we scroll down,
1:59:16these three buttons are visible on the page.
1:59:19So we're going to you move these into the body element
1:59:26And now they're in the right place. Now for this style element,
1:59:30remember that we said the style element doesn't actually create anything visible
1:59:34on the page, but it could change the style of other elements.
1:59:38So this is a good example of something that should go in the head element
1:59:42because it doesn't show up visibly on the page.
1:59:45So we're going to copy all of this and put it into the head element.
1:59:52We're going to go up and we're going to save this in here.
1:59:56So now all of our CSS code is in the right place,
1:59:59and now that we have the proper structure,
2:00:01we can open this with our live server just to make sure everything looks good,
2:00:08let's go here and add a title like we learned.
2:00:12And this is going to change the text at the top of the tab.
2:00:15So let's call this buttons practice, save it,
2:00:21and you'll notice that it automatically reloads. Now we're going to learn
2:00:25another feature that we get from following this structure.
2:00:28If we look at our code,
2:00:30we have all of our CSS code together along with our HTML code. Now,
2:00:35this gets confusing because we have a lot of lines of code and we're mixing two
2:00:39different languages. To solve this problem,
2:00:41we can move all of our CSS into a different file.
2:00:46So let's copy all of this and we're going to create a new file to just
2:00:50contain our css.
2:00:53We're going to go here and create a new file and let's call it
2:00:57buttons dot css.
2:01:01Make sure your file ends in dot CSS to tell the computer that this file contains
2:01:06CSS code.
2:01:09And now we're going to move our code into that file
2:01:15and save and save here.
2:01:21Now you'll notice that we lost all of our styles,
2:01:23and that's because we now need to load this new CSS file into our
2:01:28html. To do that,
2:01:29we're going to learn a new element called the link element.
2:01:35So the link is sort of a special element because it doesn't require a closing
2:01:39tag like we've seen so far.
2:01:41Elements like these are called void elements.
2:01:45So if we search for Google and we search Void
2:01:49elements html,
2:01:52this will give us a list of elements that don't need a closing tag.
2:01:56So these are the exceptions to the rule that everything has to have a closing
2:02:00tag. So don't worry too much about memorizing all of these.
2:02:04You'll get more used to it the more that you write H T M L.
2:02:08And I'll introduce Void elements to you one by one.
2:02:11So here we're going to learn our first void element,
2:02:13which doesn't need a closing tag, but this element takes two attributes.
2:02:18The first one is called r e L, which stands for relation.
2:02:23So what kind of thing are we linking? In this case,
2:02:27we're going to link in a style sheet,
2:02:32and then we have to tell it another attribute,
2:02:34which is H Ref. So this tells a link,
2:02:38we what file we're going to link into this file.
2:02:42So here we're going to link our CSS file into our html.
2:02:47So we're going to link buttons css. Okay,
2:02:51now let's go back to our page. You notice we don't have our styles,
2:02:54and now when I save this, we get all of our styles back,
2:02:59and that's because we're loading all the CSS code found in Buttons css,
2:03:04which is all the code we had before into our html.
2:03:08So this is another way to load CSS without having to write it all in our
2:03:13HTML file. Now,
2:03:15the big benefit of this is that each file contains less code and each file
2:03:19contains one type of code. So in this file we only have H T M L code,
2:03:24and in this file we only have c s s code.
2:03:27So it makes the files smaller and more focused,
2:03:30and that's going to help us develop easier. Now, before we move on,
2:03:35I do want to talk about the HF attribute.
2:03:39So the way that the computer finds this file is that it's going to search
2:03:44right beside our HTML file.
2:03:47So it's going to search right beside the file that this code is in.
2:03:51So it's going to look for a file called Buttons Dos css,
2:03:54it finds it and it loads it into our html.
2:03:57But if this file was in a folder, let's create a new folder.
2:04:02Let's call this styles.
2:04:05Let's put the CSS file in our new folder.
2:04:10And now you notice that these styles are gone,
2:04:13and that's because this link can't find Buttons dot CSS anymore.
2:04:18What it's trying to do is it's trying to look for a file called Buttons dot css
2:04:22beside our html, and there's nothing there.
2:04:26So to link a file that's inside a folder,
2:04:28you first have to give the name of the folder that's beside the HTML file. In
2:04:33this case it's Styles. Next,
2:04:36we have to type a slash.
2:04:39So this slash means we're going into the Styles folder,
2:04:44and then inside we're going to find the buttons dot css.
2:04:47So this is something called File Paths,
2:04:50and this is basically how we locate different files within our HTML code.
2:04:55So let's save this, and now we're able to successfully link our CSS file.
2:05:00So that's a little bit about how file paths work.
2:05:03We're going to need to use this later on in this course when we recreate
2:05:06youtube.com. Now let's get some more practice,
2:05:11and we're going to convert our final file into the proper HTML structure.
2:05:18So let's create the structure first because we can't use Live Server just
2:05:23yet. We're going to write a doc type space,
2:05:27HTML at the top, and then we're going to have an HTML element.
2:05:34And then inside we're going to have a head element,
2:05:38and then we're going to have a body element.
2:05:41Now everything that is visible is going to go inside the body.
2:05:45So if we scroll down, all of our paragraphs are going to go inside the body,
2:05:51cut and paste, save it,
2:05:56and now anything that's not visible is going to go inside the head. So if we
2:06:01scroll down, the style element is not visible on the page,
2:06:04so it's going to go inside the head element, cut
2:06:10and paste. All right,
2:06:15so now we have a proper HTML structure.
2:06:18We're going to open this with live server, move it to the left here,
2:06:24everything looks good, and we're going to do some more practice.
2:06:27We're going to set the title again just to get more repetition.
2:06:32It's called this text Practice, save It.
2:06:37And you'll notice that the title is set up here.
2:06:39And we're going to move all of this into a CSS file.
2:06:43So let's create a new file called text dot
2:06:49css,
2:06:51and we're going to move all of the CSS code into there.
2:06:55So let's cut and paste it into here.
2:07:02Next we're going to link the CSS file in this HTML file.
2:07:07So let's create a link element. It needs two attributes,
2:07:13R, e, L, and H ref.
2:07:19So we're going to link a style sheet,
2:07:23and the file is located right beside the HTML file.
2:07:27So all we need to do is link text, css,
2:07:31save it, and refresh.
2:07:34And it's back to where we were again. Let's practice moving this into a folder.
2:07:41Now we're unable to find text CSS beside our HTML file,
2:07:45but there is a Styles folder.
2:07:47So we're going to look inside the Styles folder.
2:07:51Going to use a slash to go inside,
2:07:53and we're going to link this text CSS file.
2:07:57And that is how we use file paths to link CSS files.
2:08:03The last feature we're going to look at that we get from this structure is the
2:08:06ability to add a new fonts onto our website.
2:08:10So websites have a set of fonts by default that we can use. For example,
2:08:14one of them is called Aerial.
2:08:16Another one that we've seen is called Times New Roman.
2:08:20That's basically the font that we get on a fresh website. Now,
2:08:24in addition to these default fonts,
2:08:26we can actually load new fonts from the internet,
2:08:29and we're going to learn how to do that within this structure.
2:08:32So let's go to our webpage.
2:08:35And Google actually provides a lot of really great free fonts that we can use.
2:08:40So we're going to open a new tab,
2:08:42and we're going to search for Google Fonts,
2:08:47and we're going to go into this first link. Now,
2:08:51this website might look a little different for you,
2:08:54but the general process is the same. First,
2:08:57we're going to search for a font that we like.
2:08:59So a good font to use here is Robo,
2:09:02and this is the font that we're going to use for our final project. We're going
2:09:07to pick this font,
2:09:09and then inside here we're going to pick the styles that we want.
2:09:12So for example, I'm going to pick the regular style.
2:09:16And I'm also going to pick the bold style here.
2:09:21So I'm going to pick the bold style and then I'm going to go
2:09:26to the basket of fonts that I selected,
2:09:29and then Google is going to give me the code that I need to load these fonts.
2:09:35All we need to do is copy this code exactly and then
2:09:39put it in our head section of our html.
2:09:43So we're going to put it in our structure in this head section.
2:09:48And now we've loaded a new font that we can use on our website.
2:09:53So now let's go back to our website and we're going to use this new font.
2:09:58So remember that currently we set our fonts to aerial.
2:10:02This time we loaded the font called reto, and that's what we're going to use.
2:10:07So let's change aero here to Reto.
2:10:11Now when I save the font is going to change.
2:10:17And there you go.
2:10:18It might not look that much different because Reto is very similar to aerial.
2:10:22But if we inspect and we click on this element and
2:10:28go to the computer tab,
2:10:29we'll see that the font family has now been to Reto.
2:10:34So this is how we can load a huge selection of fonts from Google onto
2:10:39our webpage and use them on our website.
2:10:42So those are the features that we get from following this HTML structure.
2:10:47Every website that we create from now on will always have an HTML tag,
2:10:51a head and a body and a doc type at the top.
2:11:11Now we're ready to work on the final project of this course,
2:11:14recreating youtube.com. Just like before,
2:11:17I've created a page on my website that'll show us what the final project looks
2:11:21like.
2:11:23So first we're to close all of our browser tabs because we're going to start
2:11:26over again,
2:11:27and then we're going to open a new page and we're going to go to
2:11:32super
2:11:33simple.dev/exercises/youtube.
2:11:41So on this page you can see what our final project will look like.
2:11:45So we're going to learn how to recreate youtube.com that you see here.
2:11:50So first, let's set up our project in our code editor.
2:11:54So let's go into here and let's actually create a
2:11:59folder that's going to contain all of our previous code.
2:12:03So the final project is going to contain a lot of code,
2:12:05so we don't want to get it confused with the previous lessons.
2:12:09So let's call this intro dash two dash html
2:12:15and we're going to put everything inside this folder.
2:12:20We're going to put this in here and these HTML
2:12:25files in here as well.
2:12:29Next we're going to create a new HTML file for our final project.
2:12:33So let's create a file called YouTube dot html,
2:12:39and I actually put it inside this folder.
2:12:41I'm going to take it out by dragging it down here.
2:12:46So now we have an intro to html folder and our YouTube dot html
2:12:51and we're ready to get started. First,
2:12:56we're going to set up the proper structure of HTML that we learned in the
2:13:00previous lesson.
2:13:01So we're going to start off with a lesson exclamation doc type
2:13:06and html,
2:13:09and then we're going to create an HTML element that's going to contain our
2:13:13entire webpage. And inside here we're going to have a head element
2:13:19And we're also going to have a body element.
2:13:25Now that we have the structure, we can open it with live server.
2:13:32And now we have our blank page.
2:13:33So this page is going to automatically reload when we change our code.
2:13:39Now before we can work on the final project,
2:13:41we need to learn two more HTML elements,
2:13:44how to load images onto our website and how to create a search box.
2:13:49So let's start with loading images first.
2:13:53So I'm going to show you how you can download these thumbnails from my website.
2:13:57We're going to right click in a blank area and inspect.
2:14:02Now if we click this icon in the top left and hover over an
2:14:06image and click it,
2:14:09and you might need to drag this down to see the html,
2:14:13we can find the image in the html, and here is the URL for the image.
2:14:18So we can actually click this and it will open the image in a new tab
2:14:24and we can control S to save it. So make sure we save this image
2:14:29in the folder that contains all of our code. So that's this folder for me.
2:14:35I'm going to save it. And now in my code editor I can see the image.
2:14:40Next we're going to create an HTML element to load this onto our page.
2:14:44So I'm going to go back to my page here,
2:14:46and then we're going to go into the body and create the image element which
2:14:51is less than img, greater than.
2:14:55Now the image element is unique because it's another void element.
2:15:00So we mentioned void elements briefly in the previous lesson.
2:15:03It's an element that doesn't require a closing tag.
2:15:06So this is one of those exceptions to the rule.
2:15:09So the image element takes one attribute called src.
2:15:15Now this attribute tells a computer which image to display on the website.
2:15:20So for us,
2:15:20that image is the one we downloaded called thumbnail one WebP.
2:15:26So we're going to display thumbnail dash one dot WebP,
2:15:31and when I save it, the image is now loaded onto our website.
2:15:36So this source attribute works the same way as the
2:15:41link attribute that we saw earlier.
2:15:45It follows the rules of file paths to locate our file.
2:15:49So just as a reminder, if we type thumbnail one dot WebP here,
2:15:54it's going to look for a file named thumbnail one dot WebP right beside our HTML
2:15:59file. It's going to find it and then load it onto our website.
2:16:02But now we're actually going to create a folder because we have multiple
2:16:06thumbnails and we want to organize them,
2:16:09we're going to create a folder called thumbnails and we're going to drag this
2:16:14into that folder. So now for this source attribute,
2:16:19we don't have a file beside our HTML called thumbnail one WebP,
2:16:24and then you see this error here.
2:16:26So this means that there is an error loading an image.
2:16:29Now to find it in the thumbnails file,
2:16:32we're going to type thumbnails slash thumbnail one
2:16:36WebP. So first it's going to look for a file or folder called thumbnails.
2:16:41Beside the HTML file, it finds this one,
2:16:44and then the slash here means to go inside the folder and then find
2:16:49this file inside that folder, which is here.
2:16:53So that's how we load images onto our page.
2:16:57Now we're going to learn how to style our image elements.
2:17:00So let's go into our head section here and create a style element.
2:17:07Now before we do that,
2:17:08I forgot to do something which is let's create a title for our page.
2:17:12So we can call this youtube.com clone,
2:17:18and if we save this, the title will show up in the tabs. All right,
2:17:21so let's learn how to style our image. So as always,
2:17:26we're going to give it a class attribute and let's just call this thumbnail.
2:17:32And now we can target this class in our css.
2:17:35So dot thumbnail.
2:17:40Now all of the CSS properties that we learned so far apply to the image.
2:17:44Some of them make sense and some of them don't.
2:17:48So one property that obviously doesn't make sense is something like font dash
2:17:53size. So if I save it,
2:17:56you'll see nothing changes because there is no text inside this element.
2:18:00It's an image. So even though this works, it doesn't really change anything.
2:18:05Now a property that does make sense for an image is width.
2:18:10So this was set the width of this image.
2:18:13Let's make it smaller to match what we have here.
2:18:17So let's make the width something like 300 pixels.
2:18:22Now we save it and now the width of this image is 300 pixels.
2:18:26So one thing you might notice is that when we set the width of an image,
2:18:31the height also changes. So before we had this
2:18:36notice that the image was a lot taller, but as soon as we set the width,
2:18:40the height also adjusts. So that's one behavior of images that we should know.
2:18:46When we set the width,
2:18:47the height will also adjust so that the image has the same dimensions.
2:18:52What I mean by same dimensions is that it keeps the same shape. So for example,
2:18:57if I set the height as well,
2:18:59this is going to cause the image to lose its shape or lose its dimensions.
2:19:04Let's set the height to something like 600 pixels, save it,
2:19:09and now you'll see that the image is 600 pixels tall,
2:19:12but it's lost its shape and now it's become stretched.
2:19:16So that behavior of an image sort of keeps us safe,
2:19:19so it keeps the image looking nice. Now,
2:19:22if we really wanted an image that was exactly 300 pixels
2:19:27by 300 pixels, what can we do? So this image, as you can see,
2:19:32is getting stretched out. So in addition to all the CSS properties
2:19:37that we've learned so far,
2:19:38the image element has its own properties that are specific to an image.
2:19:43So one of these is called object fit.
2:19:49So this determines what happens if this size doesn't match the images
2:19:54dimensions or the images shape. So for example,
2:19:58I can set a value of cover.
2:20:01So this tells the image to cover this 300 by 300 area,
2:20:06but it's also going to keep its shape.
2:20:08So this area might not be big enough to show the whole image,
2:20:11which may or may not be okay depending on what we want to do.
2:20:16Now we can adjust which part of the image that we see using another property
2:20:20called object dash position.
2:20:25So currently we're looking at the center of the image.
2:20:29We can set the object position to left to view the left side of the image,
2:20:34or we can also set it to the right to view the right side of the image in the
2:20:38case that the image doesn't fit in our area.
2:20:43Another value we can give to object fit is contain.
2:20:48So if we save this,
2:20:50the entire image is going to shrink until it is contained in this 300 by
2:20:55300 area. So I'm going to set a border so that we can see what this is doing.
2:21:00I'm going to set a border of two pixels, Border width, two pixels
2:21:06border style of solid order color of red.
2:21:12So here the border shows us our 300 by 300 area and
2:21:17contain makes the image shrink until it is contained in the area,
2:21:21but that means that it might not be able to cover the entire area if it's not
2:21:25the right shape. So in this case,
2:21:27the object position can move the image to the top
2:21:32or to the bottom.
2:21:35So that's basically how images work. As you can see,
2:21:38a lot of the CSS properties that we learned before like width and height and
2:21:42border can be applied to the image element.
2:21:45And the image element also has some of its own properties that determine how the
2:21:50image is displayed. So for now,
2:21:53let's create something that's kind of like our final website.
2:21:57So I'm going to set the image with two 300,
2:22:01and I'm not going to set a height so that the image doesn't stretch and we don't
2:22:05have to do all this stuff and I can actually just remove all of this.
2:22:10So the only thing I'm doing is telling the image to shrink down to a width of
2:22:14300 and to shrink the height as well so that the image keeps its shape.
2:22:19So we're going to stick with this for now and this is going to correspond to
2:22:24this part of our final project,
2:22:27and we're going to start learning how to build out the entire video preview.
2:22:32The next element we're going to learn in this lesson is how to create search
2:22:35boxes like the one you see up here.
2:22:37So let's go back into our website and we'll learn the code for creating a search
2:22:41box.
2:22:43The HTML for creating a text box is less than
2:22:48input greater than.
2:22:50So the input element is a void element, just like the image element,
2:22:55it doesn't require a closing tag.
2:22:57So the input element has several attributes that we can give it.
2:23:01One of them is called the type.
2:23:04So we set the type equals text, it's going to give us a text box.
2:23:09I'm going to save this,
2:23:11and now in our HTML you can see we have a text box.
2:23:17Another type that we can give to this input is called checkbox.
2:23:21So if I save this, now we have a checkbox.
2:23:26So for our purposes we're going to set the type to a text box because we want to
2:23:30create the YouTube search box up here.
2:23:35So you also notice that this text box has a word search in it,
2:23:39and when I start typing, that search word is gone.
2:23:43So this is sort of like a label for the user telling them what to put into this
2:23:47text box. And this is known as a placeholder.
2:23:51So if we go back to our website,
2:23:53we're going to add a placeholder to our new text box. To do that,
2:23:57we're just going to give the attribute placeholder
2:24:02and let's set the placeholder as search. We save it.
2:24:07Now we have a placeholder that disappears when we start typing.
2:24:11So that's how we create what we see on YouTube. So for the text
2:24:15box,
2:24:16all of the CSS properties that we learned so far can be used on the text box.
2:24:21So let's look at some examples. Let's add a class attribute first,
2:24:26like always so that we can target it. Let's call it search dash bar.
2:24:32And then inside our css,
2:24:34we're going to target dot search bar class.
2:24:39And then inside we can set our usual CSS properties. So for example,
2:24:44in this case,
2:24:44we can set a font dash size and let's add it to 20 pixels,
2:24:50save it and reload. And now you can see that the font size has changed.
2:24:56Another thing we can change is margin or the spacing.
2:24:59So let's add some margin to the left
2:25:03of 12 pixels, save it.
2:25:07And now we have some spacing on the left.
2:25:09So basically everything that we've learned so far about CSS properties we can
2:25:13use on the search box. For now,
2:25:18let's remove these example styles and we're going to style the search box to
2:25:22look like our final project later in the scores.
2:25:45In this lesson,
2:25:46we're going to learn one of the most important CSS properties called the display
2:25:50property, and we're going to use this to start building out our final project.
2:25:54We're going to start off by taking a look at our final project and we're going
2:25:58to start building out the text here.
2:26:01So we're going to create paragraphs for these text.
2:26:04So let's go into our code and we're going to create three paragraphs.
2:26:11So here's one of them, and we can copy the text.
2:26:15So copy and paste.
2:26:22So here's another paragraph and we're going to copy this
2:26:28and paste it in our code.
2:26:32And here's a final paragraph
2:26:40and we'll save. So here,
2:26:43I'm actually going to use the H T M L entity again instead of this special
2:26:46character. So to save us some time, I'm just going to type it out here.
2:26:52Now I'm going to save this and go back to my webpage.
2:26:56And now we have the text that we're going to use,
2:26:59but you might notice something weird.
2:27:01How come this text box is beside our image?
2:27:05If we look at our paragraphs, they are on top of each other,
2:27:08so one after another on each line.
2:27:10How come text boxes and images appear on the same line?
2:27:14So this is due to the display property in C S s and we're going to learn what
2:27:18that is right now. In H T M L, there are three types of elements.
2:27:24The first type of element is called a block element.
2:27:27A block element takes up the entire line.
2:27:30So a paragraph by default is a block element.
2:27:34We can see that in our dev tools by right clicking in the browser and then
2:27:39clicking inspect, And then clicking this icon in the top left
2:27:44right here and then hovering over our paragraph.
2:27:48So you can see that even though the text goes to here,
2:27:51the paragraph extends to the end of the line because the paragraph by default
2:27:56is a block element. Block elements take up the entire line.
2:28:01So let's go into our code and I'm going to demonstrate another property of block
2:28:05elements.
2:28:08If we set a class on the paragraph and we style it,
2:28:11so let's set a class of video dash title,
2:28:16let's save it and we're going to style it and let's
2:28:21it a width of 300 pixels,
2:28:26save and refresh.
2:28:28And now this paragraph is only 300 pixels,
2:28:32so it's not stretching to the end of the line anymore.
2:28:34Let's verify that using the dev tools by clicking this top left and then
2:28:38hovering over.
2:28:40So you see that the paragraph itself only takes a width of 300 like we set in
2:28:44our css,
2:28:46but it still takes up the entire line denoted by the orange part
2:28:50on the right here. If we click on this paragraph and we go to the
2:28:55computer tab, notice that there is no margin on the right side,
2:29:00but we still have a ton of orange area on the right.
2:29:03So this is how block elements work.
2:29:05Regardless of how much space they actually take up,
2:29:09they take up the entire line,
2:29:10so they're forced to be on their own line like this paragraph and these two
2:29:15paragraphs. So that's what a block element means.
2:29:19The second type of element is an inline block element.
2:29:23An inline block element only takes up as much space as it needs to and doesn't
2:29:28take up the entire line.
2:29:30An example of an inline block element is the image element and the input
2:29:35element.
2:29:36They only take up as much space as they need to and they don't take up the
2:29:39entire line.
2:29:40So another element could appear beside them like we see here. So that's the
2:29:45inline block element.
2:29:46The third type of basic HTML element is called the inline element.
2:29:51Inline elements are basically just text elements.
2:29:54They appear within a line of text. So if you remember,
2:29:58we briefly introduce the element strong.
2:30:01So this element appears within a line of text like
2:30:06this.
2:30:08So this element makes a part of the text bold and it appears within a line of
2:30:13text. So those are the three basic types of HTML elements,
2:30:17a block element, which takes up the entire line and inline block element,
2:30:22which only takes up as much space as it needs to,
2:30:25and an inline element which appears within a line of text.
2:30:29Now the most interesting of these three are the block elements and the inline
2:30:34block elements because they determine how these elements are displayed on the
2:30:37page, whether beside each other or above and below. In addition,
2:30:42we can use a CSS property called display to easily switch between block and
2:30:47inline block. So let's see how that would work.
2:30:51So first let's start by switching from block to inline block.
2:30:54We're going to switch both of these paragraphs to inline block elements.
2:30:58Let's go into our code and we're going to give this a class.
2:31:03Let's call this video dash author and let's call this
2:31:08video dash stats. And we're going to style these classes.
2:31:13So we're going to style the video dash author as well as the
2:31:18video stats,
2:31:22and we're going to set both of these to display inline dash block
2:31:28and this one as well display inline dash block.
2:31:33I'm going to introduce a little bit of CSS syntax here.
2:31:37If we have two sets of CSS styles that are the same,
2:31:40we can actually use a different syntax by adding a comma here.
2:31:46So this comma means that we're going to target both the video author class
2:31:50and the video stats class with this set of styles.
2:31:54So this is how we target multiple things in CSS with a comma.
2:31:59So as you can see, these two elements now appear beside each other.
2:32:03They're both inline block elements and only take up as much space as they need
2:32:07to. If we click the top left in the DEF tools and hover over this,
2:32:12you'll notice that this paragraph is now only taking up as much space as the
2:32:16text and the same thing for this paragraph. So as you can see,
2:32:21even though paragraphs by default are block elements,
2:32:24we can change them very easily to inline block with the display property so that
2:32:29we can put them beside each other.
2:32:31Next we're going to try the opposite direction.
2:32:33We're going to go from an inline block element to a block element,
2:32:38and we're going to put these two on separate lines. So let's go into our code
2:32:43and we're going to style the thumbnail class.
2:32:46So I'm going to scroll up here and I'm going to convert this to display
2:32:52block, and now it will turn the image into a display block,
2:32:56and this will cause the image to take up the entire line pushing the text box
2:33:01down to the next line. If I save it,
2:33:04now you can see that this image is taking up the entire line.
2:33:07We're going to verify this by clicking the top left and then hovering over this
2:33:11image. So using this property,
2:33:13we can control whether an element appears on the same line or on a different
2:33:18line, and that's what we're going to do to copy this design.
2:33:23The search bar is at the top.
2:33:25We have an image and then three paragraphs each on a different line.
2:33:29So we're going to use a display property to achieve this.
2:33:33Let's go into our code.
2:33:34And first let's put the search box at the top,
2:33:41Save it. And since our image is already display block,
2:33:46it's going to take up the entire line,
2:33:47so it's forced to take up a line below the search box.
2:33:51So I think this is pretty good as long as these search box is up there,
2:33:54then we're good to go. Next,
2:33:56we're going to turn these back into display block because we want these on
2:34:01separate lines like our design here. So to do that,
2:34:05we're going to go into our code and we could change this to display block,
2:34:10but remember that paragraphs by default are display block,
2:34:14so we can just get rid of this code, save it,
2:34:18and now our elements are appearing at least in the same structure as the design
2:34:23from top to bottom. And each element is taking up its own line.
2:34:27So that is the display property.
2:34:29It allows us to control how an element is displayed,
2:34:32whether they're a block element and take up the whole line or they're an inline
2:34:36block element and only take up as much space as they need to.
2:35:01In this lesson,
2:35:02we're going to learn about the most important HTML element called the diviv
2:35:06element. For example, here's twitter.com.
2:35:10If you look at the HTML that Twitter uses,
2:35:13you can see that they're using lots and lots of divs. Here's another example,
2:35:17Instagram. If we look at Instagram's html,
2:35:21we can also see that they're using lots and lots of divs.
2:35:26So what exactly is a diviv and why is it used so much?
2:35:29So the diviv element stands for division,
2:35:32but an easy way to understand this is that the diviv is just a box.
2:35:37We're going to go into our code and look at an example.
2:35:40So below our paragraphs, let's create a diviv element,
2:35:46and inside we're going to have some text. This is a diviv,
2:35:51save it.
2:35:52And now we have our first diviv element on the page to show you that the diviv
2:35:57is just a box. We're going to right click and inspect,
2:36:02And then we're going to click this top left icon and hover over the diviv.
2:36:08So as you can see, we created a box around our text.
2:36:11You'll notice that this box stretches to the end, and that's because the diviv,
2:36:15like the paragraph by default is a block element,
2:36:19so it takes up the entire line, but like we learned in the previous lesson,
2:36:23we can easily change this to an inline block using the display property.
2:36:28So let's go ahead and do that and it'll be more clear that this is really a box.
2:36:33So we're going to set a class here.
2:36:35We're going to call this diviv dash example,
2:36:40and now we're going to style it
2:36:44and change the display to inline block
2:36:49So that it doesn't take up the entire line anymore, save it.
2:36:53And now if we go to our webpage, click this icon and hover over.
2:36:58You can clearly see that the diviv just creates a box around our content.
2:37:02In this case, our content is some text. So that's basically what a diiv is.
2:37:07Now the second question is why is a diiv so useful?
2:37:11The key feature of a diiv is that it can contain any other inside.
2:37:16So right now we only have some text inside the diviv,
2:37:20but we can actually put paragraphs, we can put images,
2:37:23we can put any elements inside divs as well as other divs.
2:37:28Divs are meant to be containers.
2:37:30And if we look at the YouTube design that we have in our project,
2:37:34we use containers everywhere. So here's a container,
2:37:38here's another container, and here's another container.
2:37:42These containers allow us to group all of these elements together so that we can
2:37:47create a layout that looks like this. Here's another example from Twitter.
2:37:52Here's a container, here's another container, and here's another container.
2:37:58In order to build complex real world website,
2:38:01we need containers to group our elements together and lay them out on the page.
2:38:06And the diviv is the perfect solution for this container problem,
2:38:10and that's why it's used so much.
2:38:13Let's go back to our website and we're going to practice using our diviv as a
2:38:16container.
2:38:18So we're going to create a container just like our final project for this entire
2:38:23video preview here. So that means we're going to put all of these elements,
2:38:28this image, and all three paragraphs inside our diviv. Let's see how that works.
2:38:34So I'm going to get rid of this text first and then I'm going to change this div
2:38:38to a class of video dash preview
2:38:44because this is going to contain all these elements that are part of a video
2:38:47preview.
2:38:49And then I'm going to move the image and the three paragraphs
2:38:53into the diviv.
2:38:59Now save,
2:39:01and you might not notice any difference because the diviv is simply just drawing
2:39:04a box around the content inside,
2:39:08but we can right click and inspect and we can see the
2:39:13diviv in our H T M L here.
2:39:16And inside the diviv we have our image and our paragraphs.
2:39:20The diviv is just creating a box around all this content.
2:39:25So now I'll show you why containers are so useful.
2:39:29We're going to go into our code and we're going to change the width of our diviv
2:39:33element here. So we're going to go up here and we can remove this.
2:39:38Let's style the video preview class,
2:39:44and we're going to set a width of 300 pixels.
2:39:49Let's see how that looks.
2:39:53So the page doesn't look any different,
2:39:55but if we click the icon in the top left and then hover over our paragraphs,
2:40:00we'll notice something interesting. This paragraph is a block element,
2:40:04so it's supposed to take up the entire line, but in this case,
2:40:07because this paragraph is inside a diviv,
2:40:11it takes up the entire line in diviv.
2:40:14So the way that block elements actually work is that they take up the entire
2:40:18line in their container rather than on the page.
2:40:23So that's really useful because if we look at our final project,
2:40:27so for these paragraphs, we want them to appear on separate lines like this.
2:40:31So we do want them to take up their own line,
2:40:34but we don't necessarily want them to take up the line on the entire page
2:40:38because we have some stuff on the right side here. So to solve this problem,
2:40:43we put the paragraphs inside a container so that they take up their own line
2:40:48in the container and not in the page. And that's how we can create a layout like
2:40:52this. Let's go back to our website.
2:40:56If we hover over our diviv now,
2:40:59so this blue box on the left is our container.
2:41:02It groups all the elements together and keeps it within that blue area that you
2:41:06see. Now,
2:41:08a really cool thing about this is that notice that the blue box doesn't actually
2:41:11take up the entire page.
2:41:13So we can actually have a second box beside it on the right.
2:41:18So we can add another blue box on the right containing another video preview.
2:41:24So now we're going to do that, but first of all,
2:41:27a diviv by default is a block element.
2:41:29So notice on the right side it's all orange.
2:41:32That's because this diviv is taking up the entire line. In this case,
2:41:36we don't want it to take up the entire line anymore.
2:41:38That's why we're going to convert it into an inline block element.
2:41:43So let's go into our code.
2:41:45We're going to go into the video preview and we're going to type display
2:41:50inline block. Let's save it.
2:41:55And now we can see that our diviv is a display inline block and it's actually
2:41:59appearing beside our search bar because this is also an inline block.
2:42:03So they're both only taking up as much space as they need to,
2:42:07and now they can appear beside each other. However,
2:42:10we do want the search box to be at the top in its own line.
2:42:15So we're going to practice using the display property. Again,
2:42:18we're going to set the search bar to display block
2:42:24so that it takes up the entire line and everything else is forced below it,
2:42:29save it and refresh. And now if we hover over this input element,
2:42:34we can see that we forced it to take up the entire line. Next,
2:42:38we're going to create another video preview beside this one because this is
2:42:42inline block.
2:42:43Now we can put another diviv here. So I'm just going to simplify this
2:42:49by making a copy of our current code.
2:42:52So I'm just going to copy and paste,
2:42:56and now we have two video previews, save it.
2:43:00And there we go. We now have two video previews beside each other.
2:43:05So they are two containers right beside each other.
2:43:09And remember in our css,
2:43:11we set the width of these containers to 300 pixels.
2:43:16So that's the amount of space that they take.
2:43:18And we set their display to inline block so they don't take up the entire line
2:43:23and they can appear beside each other.
2:43:25And now we're on our way to creating a layout that looks like this. In fact,
2:43:29let's actually replace the second video preview here with this
2:43:34content. So to do that,
2:43:36we're going to download the thumbnail and then change the text.
2:43:39So let's right click and inspect.
2:43:42I'm going to click this top left and then click this image.
2:43:46And now I can download the thumbnail by going to this url.
2:43:49And then clicking down here,
2:43:53I'm going to control S to save the thumbnail.
2:43:57So I'm going to save it in the folder that contains my code in the
2:44:01thumbnails folder along with our previous thumbnail. So save it here,
2:44:06and I should see it in my code editor right there.
2:44:11Next, we're going to swap out the thumbnails. So instead of thumbnail one,
2:44:15we're going to set thumbnail two and we're going to change the text.
2:44:19So I'm going to change this text here to be my title.
2:44:25And I noticed we're still using the strong element,
2:44:28which we can now delete because it was just for an example.
2:44:36And I'm also going to change the channel name here
2:44:42and the video stats, which is 19,000,004 years
2:44:49and for years ago. So now if I say
2:44:53this, we have two different video previews, but now we have a problem,
2:44:59you'll notice that these two aren't aligned with each other,
2:45:02and that's because this container is actually a little bit taller than this one.
2:45:07This piece of text here wraps around to a second line.
2:45:11While this one does not, however, to make it look better,
2:45:14we want to align these at the top.
2:45:17So we learned this way back in one of the earlier lessons,
2:45:20and we're going to review how to do that. We're going to go into our code
2:45:24And we just have to set this property vertical align,
2:45:30and we're going to set it to top so that these elements align at the top.
2:45:34I'm going to save it. And now that looks pretty good.
2:45:39We now have two different video previews and they are aligned with each other.
2:45:44The last thing we'll do is to add some space between them. So remember,
2:45:48the space outside of an element is called margin,
2:45:52and we're going to add margin to this entire container right now.
2:45:56So we'll go into our code. And in the video preview styles,
2:45:59we're going to add margin dash, right?
2:46:04And let's set it to something like 15 pixels, save it.
2:46:09And now we add in margin on the right.
2:46:12And now the interesting thing about this is if we right click and inspect,
2:46:18and then in our HTML we find our diviv, which is here,
2:46:22you'll see that the margin is applied on the entire diviv.
2:46:27So that's how the div element works.
2:46:29It's a container that groups other elements together so that we can create
2:46:32complex layouts like this and eventually our YouTube project.
2:46:58All right, so this is probably the most important lesson of this course.
2:47:02We're going to learn a technique called the nested layouts technique,
2:47:05and this is going to get us to a professional level with HTML and css.
2:47:10So what is the nested layouts technique?
2:47:13The basic idea is that there are two types of layouts.
2:47:16The first one is a vertical layout, which looks like this,
2:47:19where items are on top of each other. And then the second one is a horizontal
2:47:24layout, which looks like this where items are beside each other.
2:47:29And by using a combination of vertical and horizontal layouts,
2:47:33we can create almost anything that we see on a website. So for example,
2:47:37let's take the YouTube video preview that we've been working on.
2:47:42We can break this down by using a vertical layout.
2:47:45And then inside this vertical layout, we're going to have a horizontal layout.
2:47:50And then inside this horizontal layout, we're going to have a vertical layout.
2:47:55So as you can see, we have layouts inside layouts, inside layouts,
2:48:00and that's why it's called the nested layouts technique. And using this,
2:48:04we can pretty much break down almost everything that we see on a professional
2:48:08website into a series of layouts and then recreate them using our code.
2:48:14So now we're going to go through together a way that we can practice using the
2:48:17nested layouts technique to break down a design. We're going to go to our final
2:48:22project. If you close it,
2:48:24you can go to super simple.dev/exercises/youtube.
2:48:29And what we're going to do is we're going to take a screenshot of one of these
2:48:32designs,
2:48:33and then we're going to use an image editing software to draw out the layout.
2:48:38So first, let's create a screenshot on Windows.
2:48:41You can use an app called SNP on Mac.
2:48:44We're going to type command shift n four to create a screenshot.
2:48:49So let's take a screenshot of this
2:48:53and then we're going to upload this into an image editing software. Now,
2:48:58feel free to use anything that you're comfortable with,
2:49:00but if you don't know what to use, we can go to a new tab.
2:49:05And we're going to search for Google drawings,
2:49:11And we're going to use this to practice the nested layouts technique.
2:49:16So once we have this open, we're going to upload our image.
2:49:19I'm going to go to my computer and upload the screenshot.
2:49:25And now we're just going to draw some rectangles to represent our layout.
2:49:30So we're going to go up here to shapes and we're going to create a rectangle.
2:49:36And first we're going to create a vertical layout one and two.
2:49:40So I'm just going to draw a rectangle here.
2:49:45Let's change the background to transparent so we can see what's underneath.
2:49:50And I'll make the border a little more thick and change it to red
2:49:56so it's easier to see.
2:49:59And now I'm going to copy this and paste it to create a
2:50:04duplicate. And I'm just going to move it down here
2:50:10and resize the rectangle like this. All right,
2:50:15so just like that we created a vertical layout for now.
2:50:19Don't worry about the video time here.
2:50:21We're going to recreate this later in the course using another feature of css.
2:50:27And now looking at our design, we have a horizontal layout one and two.
2:50:33So to create a horizontal layout,
2:50:34we're going to draw it out again using rectangles.
2:50:38So let's go in here and we're going to create another rectangle,
2:50:43and we're going to draw out the horizontal layout like this.
2:50:48So here's one,
2:50:50change the background to your transparent and make it bold.
2:50:55And I'm going to use the blue color to represent a horizontal layout.
2:51:00Now I'm going to copy this and paste it here
2:51:06and resize it a little bit
2:51:11like that. And now we have our horizontal layout.
2:51:16And finally inside here we're going to have a vertical layout like this.
2:51:21So again, we're just going to keep drawing rectangles.
2:51:24I'm going to copy this and paste it and move it
2:51:29down here and resize it a little bit so that we can see it.
2:51:34So right here, and then copy this
2:51:39and then paste it again.
2:51:42We're going to create the second part of our vertical layout
2:51:47like that, and then copy and paste it one last time
2:51:53Down here.
2:51:59So that's how we use the nested layouts technique to visualize and break down a
2:52:03design into a combination of vertical layouts and horizontal
2:52:08layouts. Now let's do some more practice.
2:52:11We're going to take another design and break that down using this technique.
2:52:16So we're going to open a new tab and we're going to go to
2:52:21twitter.com/super
2:52:25simple dev,
2:52:29and we're going to take,
2:52:31just take one of my tweets here and take a screenshot of this.
2:52:37And we're going to break down this design using the same technique.
2:52:41So let's go back to Google drawings,
2:52:45and we're going to create a new drawing to practice with.
2:52:51And let's upload that screenshot that we just took
2:52:55onto this new drawing right here.
2:53:00So now we're going to do the same thing.
2:53:02We're going to draw rectangles to represent the nested layouts.
2:53:06So let's take a look at this to see how we can break this down immediately.
2:53:10I see that we have a horizontal layout one and
2:53:15two, so we can break it down into that. First,
2:53:19let's draw a rectangle to represent that.
2:53:23So here's the first one,
2:53:29and I'm just going to make it blue to represent a horizontal layout And
2:53:34copy and paste it like this.
2:53:40Okay, so that's our horizontal layout.
2:53:45And now looking at the design inside here,
2:53:48I can see that we can break it down further into a vertical layout.
2:53:52So I'm going to draw some more rectangles,
2:53:57and I'm just going to draw right here
2:54:02and style it a little bit and make it red to represent the vertical layout.
2:54:08So copy and paste,
2:54:12and I'm just going to move it down here.
2:54:16Okay. Okay,
2:54:19so that's two copy and paste
2:54:24to get three.
2:54:32So it doesn't have to be perfect.
2:54:33It's just here to help us visualize the design. All right,
2:54:37so we have a horizontal layout, and then inside we have a vertical layout.
2:54:41And now looking at this, we can also break this down into a horizontal layout.
2:54:47Let's draw some more rectangles. Actually,
2:54:49I'm going to just copy this one and paste it and
2:54:54resize it here. So I'm going to break this down further
2:55:01into a horizontal inside here.
2:55:09And finally, we can break this part down further into a horizontal layout.
2:55:14So let's copy this again and paste it here.
2:55:24And I'm just going to
2:55:29create a few of them Like this.
2:55:34So just like that,
2:55:35we broke down this design into a combination of vertical and horizontal
2:55:40layouts using the nested layouts technique.
2:55:43So now that we have a good understanding of how this works,
2:55:46we're going to learn how to recreate this using code.
2:55:50So let's go back into our project.
2:55:53I'm going to delete all these extra tabs here.
2:55:56So we're going to go from something that looks like this to something that looks
2:56:00like our final design here. Now, before we start,
2:56:03we actually need to download this channel profile picture.
2:56:06So remember to do that, we can right click and inspect,
2:56:11click the top left icon here, and then click this picture.
2:56:15And we have the URL to download it here. So I'm going to hover over it,
2:56:20scroll down and click this link. Now, control S to save.
2:56:25And I'm going to save it in the folder that contains our code,
2:56:29which is right here.
2:56:32And now this should show up in our code editor.
2:56:35So I'm actually going to create a folder to store all of these channel profile
2:56:39pictures since we're going to have a lot of them.
2:56:42So I'm going to call this channel dash pictures,
2:56:47And I'll put this in there.
2:56:52Now we're ready to create our layouts. So let's go back to our final design
2:56:59and see what kind of layouts we have.
2:57:02So we're going to have a vertical layout, that's one and two,
2:57:06so two rows. And then inside the second row,
2:57:09we're going to have a horizontal layout, which is one and two.
2:57:14Now, inside the second horizontal layout,
2:57:17we're going to have a vertical layout one, two, and three.
2:57:23So that's how we're going to break down this design. And again,
2:57:26don't worry about the video time here.
2:57:29We're going to recreate this later in the course.
2:57:32Let's go into our code and we're going to implement that.
2:57:35So make sure that we have our project open on the left here.
2:57:38And we're going to start by creating some vertical layouts.
2:57:43To create a vertical layout. We're going to create two divs.
2:57:49So this is going to be our vertical layout.
2:57:53Now remember that divs are block elements by default,
2:57:56so they're going to take up the entire line and appear one on top of another.
2:58:00And that's exactly what we want for a vertical layout.
2:58:03So let's look at our design. Here. We have the image in the first row.
2:58:07So I'm going to move this up, Cut and paste.
2:58:13And then in the second row we have everything else.
2:58:16So I'm going to put everything here in the second row.
2:58:20So cut and paste.
2:58:24Let's save it and refresh.
2:58:26Now we're going to create a horizontal layout down here.
2:58:30One column's going to have the channel profile picture,
2:58:32and the other column is going to have the text.
2:58:35Let's create the channel profile picture. First,
2:58:38we're going to create an image element. We're going to give it the source
2:58:44Of the picture that we downloaded in the beginning.
2:58:48So that picture is in this folder. So we're going to go into this folder first,
2:58:53which is channel dash pictures.
2:58:58And then remember to have a slash to go into that folder.
2:59:01And then channel one jpeg, save it.
2:59:06And now if we look at our current website, the image is actually in its own row,
2:59:10and that's because the paragraph is a block element,
2:59:12so it has to appear on its own line.
2:59:15We're going to change this by creating a horizontal layout, like one and two.
2:59:20So to do that, we're going to create two divs. Here's one diviv,
2:59:25and here is another diviv.
2:59:29Now the difference here is that we're going to make these divs inline block
2:59:33elements.
2:59:33So remember that inline block is what allows elements to appear beside each
2:59:37other like this,
2:59:39while block elements force the element to take up the entire line so they will
2:59:43appear vertically.
2:59:45So we're going to make these two divs inline block elements to create our
2:59:49horizontal layout. Let's reference our design first. In the first column,
2:59:54we have the channel profile picture. So I'm just going to move this
2:59:59Into the first diviv here. And then in the second diviv,
3:00:04we have all the text. So I'm going to move all of the text here,
3:00:10cut and paste.
3:00:14Now let's make these divs inline blocks so that they appear next to each other.
3:00:19I'm going to give a class so that we can target it with css.
3:00:23Let's call this the channel picture.
3:00:27And then we're also going to give a class to this div so that we can target it.
3:00:31Let's call this the video dash info.
3:00:36And now in our css,
3:00:40we're going to make the channel picture
3:00:44picture display in line dash block.
3:00:50And we're also going to make the video info display inline block.
3:00:54So they appear next to each other video dash info
3:01:00display in line block,
3:01:04save it and refresh.
3:01:08Now you'll notice that they're still on top of each other,
3:01:10and that's because divs by default have a width of a hundred percent.
3:01:13So we need to decrease the width of these two divs so that they appear next to
3:01:18each other. So remember that for the video preview card. So this whole thing,
3:01:22we set the diviv to 300 pixels,
3:01:25and that's how they can appear beside each other.
3:01:28So we're going to do the same thing for our horizontal layout down here
3:01:33for the channel picture,
3:01:34let's set a width of 50 pixels.
3:01:39And then for the video info,
3:01:41we're going to set a width to 200 pixels.
3:01:46So this is the first column of our horizontal layout. It's going to take up 50
3:01:50pixels like this, and then this is the second column.
3:01:53It's going to take up 200 pixels.
3:01:55It's going to appear beside the first column because both of them are display
3:01:59inline block. So let's save this,
3:02:03and you'll notice it looks really weird.
3:02:06So let's look at our code and see what the problem is.
3:02:09I'm going to scroll up here,
3:02:10and you'll notice that we set the width of the video title,
3:02:13which is this text to 300. So we're forcing it to overflow here,
3:02:18and that's not what we want. So we just need to remove this
3:02:24and not force the width.
3:02:27So if we don't force a width of 300,
3:02:29the paragraph will just take up the entire space of the container,
3:02:33which is 200 pixels.
3:02:36Now the second thing we notice is that this image is overflowing,
3:02:39and that's because images by default,
3:02:41they overflow. So they keep their original dimensions,
3:02:45so they keep their original size and that causes them to overflow.
3:02:49So we want to resize this image so that it only takes up 50 pixels.
3:02:55Let's go ahead and do that right now.
3:02:58Let's give it a class so that we can resize it.
3:03:01And I'm going to call this the profile dash picture.
3:03:06And then I'll scroll up here dot profile dash
3:03:11picture.
3:03:13And then I'm going to resize the width to 50 pixels so that it
3:03:17fits exactly this column. Going to save it.
3:03:22And now that looks pretty good.
3:03:25We can actually see the layout in our browser by right clicking
3:03:29inspect and finding this html.
3:03:35So I can click this top left icon and just click this picture.
3:03:39So I'll show you what it looks like in the html.
3:03:44So here we have a vertical layout, so one and two,
3:03:49and then here we have horizontal layout one and two.
3:03:56Now, a better way to do this is actually to set this to a hundred percent.
3:04:01So this means the image will take up the entire space of its container.
3:04:06So if we look at our html, this image is inside this container.
3:04:11If we set it to a hundred percent, it'll take up the space in the container,
3:04:15which is basically the 50 pixels that we have here. Let's save it.
3:04:22Next. Remember that we've seen this problem before, they're not aligned.
3:04:27So we're going to align this inline block element to the top.
3:04:32To do that, we're going to use this property here,
3:04:34vertical align top that we've seen before.
3:04:38So vertical dash, align, top,
3:04:44save it. All right, so we're almost there,
3:04:48but notice that these two aren't aligned.
3:04:51This paragraph has some margin at the top.
3:04:54Remember that paragraphs by default come with margin at the top and at the
3:04:58bottom.
3:04:59So we're going to go into our code and we're going to get rid of this margin at
3:05:03the top. So let's scroll up. Oh,
3:05:06so we actually deleted that style. So let's create a new style here.
3:05:11We're going to target the video dash title.
3:05:15We're going to target the class video dash title,
3:05:19set the margin dash top two zero,
3:05:25and that's going to eliminate the space up here.
3:05:31So I'm going to pause here because we've actually created the nested layout that
3:05:35we need. Let's look into our H T M L in the dev tools.
3:05:39And if we look at this video preview,
3:05:42we have a vertical layout one and two.
3:05:46Inside the vertical layout, we have a horizontal layout one and two.
3:05:52And then inside our horizontal layout, we have another vertical layout,
3:05:561, 2, 3.
3:05:59So that's a practical example of using the nested layout technique to create a
3:06:04layout that's a similar shape to this.
3:06:08The only thing that's left to do is to style our website with CSS
3:06:13one by one until it looks like this. So we're going to do that right now.
3:06:19So let's go into our code, and we're going to style these elements one by one.
3:06:23So I'm actually going to move this down here so that I can see it a lot easier.
3:06:33So the first thing I noticed is that the image is round.
3:06:37So remember to create a round image or round anything,
3:06:41we're going to use rounded corners.
3:06:43So we're going to set the border dash radius to
3:06:48let's say 20 pixels. Save it. So we have rounded corners,
3:06:53and it's getting more round, but it's not a full circle yet.
3:06:56So let's set this to maybe 50 pixels.
3:07:01So now it looks a little too big.
3:07:03Let's set the width to something like 40 pixels.
3:07:09I think that looks pretty close and we can always change it later. Next,
3:07:14there's some spacing between the first row and the second row.
3:07:19So let's go in here. I'm going to set a class here.
3:07:24Call this the thumbnail dash row.
3:07:29And then we're going to style this thumbnail row.
3:07:35And remember to add spacing to the bottom, we add margin
3:07:42dash bottom, and let's add a margin of maybe 10 pixels.
3:07:47Save it. Okay, maybe 12 pixels. Okay, so that looks good enough.
3:07:53And finally, we can style the text.
3:07:57So this YouTube project is actually using the Google font called reto.
3:08:02We learned in a previous lesson how to load Google fonts and in particular,
3:08:05how to load robo. So we're going to do that again.
3:08:09Let's go to a new tab.
3:08:11We're going to search for Google fonts,
3:08:16and we're going to load reto onto our page. So if you don't have this here,
3:08:21this is from my previous session, we can actually search for robo
3:08:27and then just open it here. And then we select these styles that we want.
3:08:32So I'm going to get the regular style,
3:08:35and then this seems like a bolded font.
3:08:38So I'm going to get the medium font and the bold font just in
3:08:43case. So I'm going to go up to see the styles I selected.
3:08:48And then that looks pretty good.
3:08:51And Google will give me the code that I need to load this onto my website.
3:08:55So I'm going to copy this
3:08:59and just paste it into my head section.
3:09:02So right in between here. All right,
3:09:07so now I loaded the robo font, and we're going to use it in our page.
3:09:14So we're going to target all paragraphs and we're going
3:09:19to change their font family to reto.
3:09:24And we're also going to use a backup font with this comma of aerial.
3:09:30So this syntax here with a comma is called a font stack.
3:09:34This basically lets us set up a backup font.
3:09:37If for whatever reason Reto fails to load from Google,
3:09:41then it will fall back to our backup font, which is aerial,
3:09:46save it. Next,
3:09:50I'm going to change the size of the font.
3:09:53So let's change the video title to maybe
3:09:5814 pixels. Save it. Okay,
3:10:01I think that looks pretty good. Next, I'm going to make it bold.
3:10:06So font dash weight bold,
3:10:11save it.
3:10:14So this looks like it's a little bit too bold compared to this font.
3:10:18So I'm actually going to change this valley to 500.
3:10:22So if you recall, we actually selected three styles of fonts,
3:10:26the irregular 400, medium, 500, and bold 700.
3:10:31So when we set the font weight to bold, it actually corresponds to a number,
3:10:35which is 700. A regular font weight is 400,
3:10:40and a semi bold is 500.
3:10:43So usually we use the number value because it's a little more precise.
3:10:47So usually instead of typing font weight bold,
3:10:51we wouldn't use font weight 700. In our case,
3:10:55our font is a little too bold, so we're going to decrease this to 500,
3:11:01which is the medium size that we picked on Google fonts.
3:11:05So let's save this. And that looks pretty close.
3:11:11Next, we're going to change the space between the lines.
3:11:14So remember the property to do that, it's called line height.
3:11:20And let's try 14 pixels. That's not enough,
3:11:26maybe 20 pixels. All right,
3:11:29so I think that looks pretty good and close to our design.
3:11:32You might notice that the text here is shorter than what we have in the design.
3:11:37You may or may not see this because this text actually depends on the size of
3:11:42the webpage. So depending on how wide your webpage is,
3:11:47the length of this text will change. And in our current website,
3:11:50we actually haven't implemented this resizing,
3:11:54so we are going to fix this later. Next,
3:11:57I'm going to style this paragraph.
3:12:00So let's go into our HTML here and look at the class name.
3:12:04So it's the video author,
3:12:06and it looks like we don't have any styles for that yet.
3:12:10So I'm going to write it down here.
3:12:13So we're going to style the class video dash author.
3:12:19The first thing I notice is the font size. So it's a lot smaller.
3:12:23So font dash size. Let's try 12 pixels. Let's see how that looks.
3:12:28Okay, so I think that looks pretty close. And we're going to change the color.
3:12:35Color. Now remember to get an exact color,
3:12:38we can right click inspect spec,
3:12:42and then click this top left icon. Click this text,
3:12:48go to the computer tab. And if we scroll down,
3:12:52we should get the text color right here.
3:12:54So RGB 96, 96, 96, save that.
3:13:00And if we go back,
3:13:06okay, that looks perfect. Next, I'm going to style this paragraph.
3:13:11So in our code, this paragraph is called video dash stats,
3:13:16and I'm not sure if we have a style for this. Doesn't look like we do.
3:13:20So I'm going to write a new one. so.video dash stats,
3:13:26we're going to set the font size to 12 pixels because these two look the
3:13:31same. Okay,
3:13:34and then we're going to set the color as well since these two look the same.
3:13:41And now remember that whenever we have these duplicate styles like this and
3:13:45this, we can actually target multiple classes by adding a comma.
3:13:50So we're going to target the video dash author class as well as the video
3:13:55dash stats class.
3:13:57So this is going to help us reduce duplication of our code.
3:14:01So I'm going to delete these lines, save it, everything looks okay.
3:14:07And the last thing we're going to modify is the spacing between the paragraphs.
3:14:11So remember that paragraphs by default come with margin at the top and at the
3:14:15bottom. Now, instead of removing them individually,
3:14:19I'm actually going to go up to the top of our page. So we did this once before.
3:14:24We're going to get rid of the default margin for all paragraphs on the page.
3:14:29So to do that,
3:14:29we're going to go into these styles and we're going to set the margin dash top
3:14:34to zero.
3:14:36And we're also going to set the margin dash bottom two
3:14:41zero. And this will get rid of all the default margins. Save it.
3:14:47And now we can set a more precise margin at the bottom here.
3:14:51So under the video title,
3:14:53let's set a margin bottom of maybe 15
3:14:58pixels. Save it. Okay, looks like it's a little too much,
3:15:02maybe 12 pixels. Okay,
3:15:06I think that looks pretty good. And now under the video author,
3:15:10we're going to add some margin.
3:15:13So currently we have some styles that apply to both of these.
3:15:17I'm going to target.video dash author individually down
3:15:22here. So for the video author,
3:15:25I'm going to add a margin dash bottom
3:15:29of maybe six pixels, save it,
3:15:34and maybe four pixels. Okay,
3:15:37so I think that looks pretty close. And now if we look at our website,
3:15:41you can tell that it's actually really close to the final design that we have
3:15:46now to finish off the second video preview you have a choice.
3:15:49You can either do everything that we did in the code here to give yourself more
3:15:53practice or if you want to save time and move on to the next section,
3:15:58we can just copy all of this HTML and replace this part here
3:16:05And then just swap out the thumbnail as well as the channel profile
3:16:09picture, which you'll need to download first from here,
3:16:13as well as swap out all of the text.
3:16:15So I'm just going to fast forward this video to finish up this second video
3:16:18preview,
3:16:19but feel free to pause it and try yourself to give yourself more practice.
3:16:29And there we go. In this lesson we learn in the nested layouts technique,
3:16:33which is one of the most important techniques for being able to break down a
3:16:37design that you see on a website and recreate it using code.
3:17:01In this lesson we're going to learn about CSS grid,
3:17:04which is a much better way to create these horizontal layouts as well as to
3:17:09create a grid like this that you see in our final project. First,
3:17:14we're going to open up the website we were working on.
3:17:16So I have it open right here.
3:17:19And remember that for our horizontal layouts,
3:17:22we were creating them using something called display inline block.
3:17:26So if we go into our code and we scroll down,
3:17:32we were using display inline block and a width to put these two
3:17:36side by side.
3:17:38Now there are some problems with display inline block that I want to show you
3:17:41right now.
3:17:43We're going to set the background color of these to gray,
3:17:47so this will make it easier to see what the problem is.
3:17:52Now let's save it.
3:17:55And now you can see that there's a little bit of space between these two,
3:17:59and this causes some alignment problems.
3:18:02So the width of this entire container here, the width here,
3:18:06we set it to 300 pixels,
3:18:10but we set the channel picture to 50 pixels here and the video info to 200.
3:18:15So you would expect that we can actually set this to two 50 to take up the
3:18:20entire 300 pixels, but if I save it,
3:18:24you can see that it's too long and it wraps to the next line.
3:18:27So we have to set it to something like 2 45 and that will cause it to
3:18:31appear beside each other.
3:18:34So this is one problem with inline block is that it has some alignment problems.
3:18:38Now you might be wondering where this space is coming from.
3:18:41If we scroll down to our html,
3:18:46we can see that there's actually some space between these two divs,
3:18:50and we learned earlier that H TML combines multiple spaces together and that's
3:18:55what shows up here. So we could remove this and save and get rid of that
3:19:00space, but that means our code is less easy to read.
3:19:04Now the second problem that inline block has is that it's not vertically aligned
3:19:08like you see here.
3:19:10So now we're going to learn a new technique called CSS Grid that's going to help
3:19:14us create perfectly aligned horizontal layouts to learn grid.
3:19:19We're going to create a new file where we're just going to practice using grids.
3:19:23So let's go into our code editor and we're going to create a new file
3:19:28called grid html.
3:19:33And remember, for every HTML file, we want the proper structure.
3:19:37So at the top we're going to have a doc type,
3:19:41and then we're going to have an HTML element.
3:19:45And then inside we're going to have a head element and a body
3:19:50element. Now that we have the proper structure,
3:19:53we can open this file in live server.
3:19:56So let's right click and open with live server.
3:20:04And then let's set the title or the text in the tabs here
3:20:10to two grid practice
3:20:15so we know what this file is about. Let's save it.
3:20:19So I'm going to resize my windows here just so we can see what's going on.
3:20:24We're going to start off in the body and we're going to create a diviv.
3:20:29And then inside this diviv we're going to create two divs.
3:20:34So let's call this Diviv one and let's call this
3:20:38Diviv two. Save it. And now to help us learn,
3:20:43I'm actually going to show you a new way of writing c s s.
3:20:47So if we go to the opening tag here,
3:20:50we can set a special attribute called a style attribute.
3:20:54Now the style attribute is unique because it lets us write CSS code inside.
3:20:59So let's write the code background dash color light
3:21:04blue, And we save it.
3:21:07We can see that these styles that we wrote here are applied to this element.
3:21:12So this code here is another way of writing CSS called inline
3:21:16styles. We're writing our CSS inside a line of html.
3:21:21We've already learned two other ways of writing css.
3:21:24One of them is the style element and the other is to put our CSS in a separate
3:21:28file. This is a third way of writing css.
3:21:32Now generally we don't use this in Rio websites because it makes our HTML harder
3:21:36to read. In Rio websites, we put our styles in a separate file,
3:21:41but for now, since we're learning, this is pretty useful because number one,
3:21:45it only affects the element with the style attribute.
3:21:49And the other thing is that the CSS code is right beside our HTML
3:21:54so that when you go and review this file later,
3:21:57it's very easy to see what's going on.
3:21:59So let's practice with the style attribute.
3:22:01We're going to add another one to this second div.
3:22:04So let's set this style to background color,
3:22:09and we'll set a background color of light pink.
3:22:14Let's save it. And now we have the two divs we're going to work with.
3:22:19Now, currently we just have two divs inside another.
3:22:23There's nothing new going on here, but now we're going to create our first grid.
3:22:28So what is a grid? A grid is a layout that has rows and columns.
3:22:33For example, this is a two by three grid.
3:22:36We have two rows and three columns. This is a one by two grid.
3:22:41We have one row and two columns.
3:22:44So we're going to learn how to make this kind of structure in our html.
3:22:48To do that, we're going to style this outer diviv or the container.
3:22:52So let's see how that works. We're going to set a style attribute here.
3:22:57And to create a grid, we're going to need two steps.
3:23:01The first step is to set the display property,
3:23:05and we're going to set display to grid.
3:23:08The second step is we need to set how many columns our grid has.
3:23:14So to do that we're going to use this property grid dash template,
3:23:18dash columns,
3:23:21and we're going to give this property two values,
3:23:24100 pixels and 100 pixels.
3:23:28So these two values define how wide our grid columns are.
3:23:33The first column is going to have a width of 100 pixels,
3:23:36and the second column is going to have a width of 100 pixels as well.
3:23:40And our grid will have two columns. So if we save this,
3:23:44you'll see that we created our first one by two grid.
3:23:49Now I want to point out a few characteristics of a grid. First of all,
3:23:53notice that this diviv is no longer taking up the entire line.
3:23:58So recall that divs are displayed blocked by default.
3:24:01They're supposed to take up the entire line,
3:24:03but when this element is inside a grid,
3:24:06it's actually placed into the grid,
3:24:09so it only takes up the entire column instead.
3:24:13The second thing you'll notice is that there's no extra space between these two,
3:24:18unlike with display inline block.
3:24:22And the third thing to notice is that, for example,
3:24:25let's add another element into the second. Let's add a paragraph
3:24:31of text, save it when we add more elements.
3:24:35This makes the second taller than the first one, but they're vertically aligned,
3:24:41and that's another difference between grids and display.
3:24:43In line block grids maintain alignment much better.
3:24:49All right, so that is our basic grid.
3:24:51Now we're going to create another grid to practice with.
3:24:54We're going to go into our code, we're going to copy all of this,
3:24:58and then we're going to paste it below.
3:25:02And it's a little bit weird, the formatting.
3:25:04So we can select this and press tab to move it back into a normal
3:25:09position. Let's save it. And now we have our second grid,
3:25:14but let's actually add some space to the top so that we can see it more clearly.
3:25:19We're going to add some margin dash top of 30
3:25:24pixels. Save it. Okay, that looks pretty good.
3:25:28And this time we're going to add a third column.
3:25:31So this property actually takes any number of values that you give it.
3:25:36So if we add a third value here of 200 pixels,
3:25:41it's going to create a third column that is 200 pixels wide.
3:25:46So the number of values determine the number of columns and the value itself
3:25:50determines the width of the column. So if we save it,
3:25:55we do have three columns here, but we only have two divs,
3:25:58so we need another div to fill out the third column. To do that,
3:26:03let's copy our first diff,
3:26:05and then we're just going to paste it down here and call it div three.
3:26:11So now we have three diffs to fill out the three columns,
3:26:14and you can see that our third column is 200 pixels versus 100 pixels that we
3:26:19saw right here. So let's actually change the text here so that we can
3:26:24see what's going on. So 100 pixels, 100 pixels,
3:26:28and 200 pixels. Save it.
3:26:34So now let's see what happens when we add another div to our grid here.
3:26:38So let's copy this second diviv and then duplicate it.
3:26:43Copy it and paste.
3:26:45Can actually get rid of this paragraph here and save it.
3:26:50And now you can see that this fourth diviv wraps around to a second row.
3:26:56So whenever we have more elements than we have columns here,
3:27:00it starts to wrap around and create new rows.
3:27:04So that's the basics of how grids work.
3:27:07Now I'm going to show you a special value that we can use with grids. First,
3:27:11let's copy this and then create a new grid to practice with
3:27:17space it here. And then select this and tab.
3:27:22And this time we're only going to have two columns.
3:27:24So let's get rid of this third column. And let's only have two diffs here.
3:27:31And we can also get rid of this paragraph. For this grid,
3:27:36we're going to have two columns. The first one is 100 pixels,
3:27:40and the second one, we're going to change it to one fr.
3:27:45So FR is a special value in grid that stands for free space.
3:27:49It means to take up the remaining amount of space on this grid.
3:27:54So if I save it,
3:27:56you can see that the first column here is 100 pixels and the second column
3:28:01has a width of one fr.
3:28:03So it takes up the remaining amount of space that we have. If I resize the page,
3:28:08it'll take up the remaining amount of space. So that's what one FR means.
3:28:14I'm going to change this to one fr so that it's easier to see when we review
3:28:18this file.
3:28:20So this fr value is exactly what we need in our final design.
3:28:25If I open my final design,
3:28:27you can see that we have a horizontal layout here.
3:28:31The first column is about 50 pixels,
3:28:33and we want the second column to take up the remaining amount of space,
3:28:37which is exactly what we need, one FR four.
3:28:41Now before we go and update our project,
3:28:43I'm going to show you another property of this FR value.
3:28:48Let's copy on this diviv and create another grid
3:28:53below it.
3:28:56And this time we're going to add a third column that is also one
3:29:01fr. And I'm going to add another diviv to fill out this third column.
3:29:06Let's copy this and paste it into a third diviv.
3:29:10This one is also going to be one F fr. So let's save it here.
3:29:15And for this example, the second column and the third column,
3:29:19both have one ffr.
3:29:21So one FFR tells the columns to take up the remaining amount of space and the
3:29:26number in front of it tells us relatively how much of the remaining space
3:29:31this column gets. Since in this example, both of them are one,
3:29:35they'll get an equal amount of the remaining space.
3:29:38So here these two are equal and they take up the remaining space.
3:29:43If we change the third column to two fr,
3:29:46so let's change this to two fr and save.
3:29:50The second and third column will take up the remaining space,
3:29:53but the third column will be twice as wide as the second column.
3:29:58So this number here is sort of like a ratio.
3:30:01This second column will have a one-third of the remaining space,
3:30:05and this third column will have two thirds of the remaining space.
3:30:10Now that we understand that concept,
3:30:12we're going to go back into our project and use grids to create this horizontal
3:30:17layout instead of inline block.
3:30:21Let's go to our code and we're going to scroll down into the
3:30:26H T M L for this which is right here,
3:30:30and I'm going to collapse it so it's easier to see.
3:30:32We have the channel picture and the video info, which is these two.
3:30:37So to create a grid, remember we need to create it on the container,
3:30:41which is this diviv.
3:30:43So let's set a class name video dash info dash
3:30:48grid, and then we'll target this class in our CSS above.
3:30:53Going to scroll up, and I'm going to actually put it right here,
3:30:58video dash info dash grid,
3:31:01because this is right above the channel picture and the video info.
3:31:05So it's beside other related styles. Now remember,
3:31:10to create a grid, we need two steps.
3:31:13The first one is to set the display property to grid.
3:31:18This creates our grid, and then we need to set how many columns our grid has.
3:31:24So we're going to set grid dash template, dash columns.
3:31:29And for our purposes,
3:31:31let's set a column of 50 pixels for the channel profile picture.
3:31:37And then we want the second column to take up the remaining amount of space.
3:31:42So as we learn, that is one fr. Now if we save it,
3:31:47you'll notice that the space between the inline blocks is gone. So unlike here,
3:31:52and you'll also notice that these two are vertically aligned.
3:31:56So now that we have our grid,
3:31:57we can actually remove all of these inline block styles because we're not using
3:32:01them anymore. So we can actually remove all of these
3:32:06and all of these. Let's save it.
3:32:11And now let's set a grid for the second video preview.
3:32:15We're going to scroll down.
3:32:18So remember we're going to set the styles on the container here,
3:32:22and then these two divs are going to appear in our grid.
3:32:26So we've already created this CSS at the top.
3:32:29We just need to set a class of video, dash info dash grid,
3:32:35save it,
3:32:36and then all the styles that we wrote up here will target that class.
3:32:42So now we have both of our grids and you can see our horizontal layout is
3:32:46perfectly aligned with the rest of our layout.
3:32:49And now we can remove this background color
3:32:53and this part of the project is done.
3:32:56The last thing we're going to learn about grids is if we go to our final design,
3:33:00we're going to learn how to build a bigger grid like this. So
3:33:05notice that there's a little bit of spacing between the columns as well as
3:33:09between the rows. Now before we start,
3:33:12you might have a bigger screen and you might see four videos in each row.
3:33:17So for now,
3:33:18let's actually resize the browser so that we see three videos in each row.
3:33:23So I'm doing this because not everyone has a big screen to work with,
3:33:27and this will make sure that everyone can follow along.
3:33:30So I'm going to zoom back in and just make sure I have three videos in each row.
3:33:35And we're going to learn how to create this kind of layout.
3:33:38Let's go into our grid practice file,
3:33:41and we'll go back into our code again and into our grid html file,
3:33:48and we're going to create another grid to practice with.
3:33:50So let's copy this and then just paste it down here.
3:33:59And now for this example, let's look at our final design.
3:34:03We essentially want three columns of equal size.
3:34:07And when we resize the page, notice that the columns resize as well.
3:34:12So notice that if I resize too much, it becomes two columns.
3:34:15We're going to deal with this later in the course.
3:34:17We're not going to deal with that.
3:34:19We're just going to deal with three columns that we have here.
3:34:22So for this layout, we want something like one F fr, one F fr,
3:34:26and one FFR to divide this space evenly.
3:34:31Let's go into our file here and we're going to set three columns,
3:34:36one F fr, one F fr, and one ffr.
3:34:40So this will create three equal columns that will resize with the page.
3:34:45Let's set this to one FFR as well so that it's clear what's going on.
3:34:50Let's save it.
3:34:53And now we have the three columns we're going to be working with.
3:34:58Let's also set the height so that it looks a little bit like our video
3:35:03previews that we have here.
3:35:06So let's go into our HTM file and we're going to set the height
3:35:11to 200 pixels.
3:35:13And let's also set the height of these other columns as well.
3:35:17200 pixels and 200 save it. Okay,
3:35:21so that looks pretty good, but they're a little bit too much.
3:35:24At the bottom of the page,
3:35:26we're going to add some spacing at the bottom of the website so that we can
3:35:29scroll these up.
3:35:31Let's go back up into our HTML and we're going to scroll up to the body
3:35:36tag.
3:35:37We're actually going to add some spacing inside the bottom of the body tag.
3:35:42So remember that spacing on the inside is called padding.
3:35:45So padding dash bottom. And let's set it to something
3:35:50like a thousand pixels. So it's a lot easier for us to practice.
3:35:55So now that we have a lot of space at the bottom, we can scroll all the way up
3:36:01and see our grid clearly.
3:36:04So remember that in a grid, if we have more elements, then we have columns,
3:36:09it'll start wrapping around to the second row.
3:36:12So all we had to do is add three more divs. So we're just going to,
3:36:17let's actually copy the pink one first.
3:36:20Let's copy it and paste it,
3:36:25and then we'll add a blue and a pink at the bottom. So let's copy
3:36:30and paste it.
3:36:31So we just need six divs to work with that have alternating colors like this.
3:36:36So let's save it.
3:36:38And now we essentially have our video preview that we see here,
3:36:42and we're going to learn how to create these space between the columns and the
3:36:45rows. So it's actually really easy to create this space.
3:36:50We just need two CSS properties.
3:36:53The first one is called column dash gap.
3:36:59So it's pretty straightforward what this means.
3:37:01We're setting some space or a gap between the columns.
3:37:05So let's set a column gap of 20 pixels. Let's see how that looks. Save it.
3:37:11And now all of our columns have a gap, just like our final design here.
3:37:17Next we're going to set the space between the rows and we have
3:37:22a similar and straightforward property for that called row dash cap.
3:37:27And let's set this to something like 40 pixels, save it.
3:37:32And now we have space between the rows, just like our final design.
3:37:38So that's how we create a grid like this.
3:37:40First we define our three columns. So in this case,
3:37:43we want to divide it up into three equal columns that resize with the page.
3:37:48That's why we used one ffr, one ffr, one ffr.
3:37:52And then we just add some space between the columns using column gap,
3:37:55which creates this. And we add space between the rows using row gap,
3:38:00which creates this.
3:38:02Let's go back into our website we were working on and we're going to apply these
3:38:06skills to here. Let's go back here.
3:38:10We're going to scroll down. And first of all,
3:38:13let's just create six of these video previews so we can organize them into a
3:38:18grid that looks like this, two rows and three columns.
3:38:23So we're going to go into a code and we're going to copy both of these
3:38:29and we're just going to make duplicates.
3:38:31So copy it and paste it.
3:38:35So now if we save, we have four and we're going to create two more.
3:38:40So paste it again, save. And now we have six.
3:38:50So remember to create a grid, we need a container.
3:38:54So we need a container for all of these video previews.
3:38:57So let's create a diviv, and this is going to be our container.
3:39:01We're going to call this the video dash grid.
3:39:08And now let's move all of these video previews inside our new grid.
3:39:12Just going to move all of them,
3:39:15cut it and paste it in here.
3:39:21Let's save it. Scroll back up. And now to create the grid,
3:39:25we want to set styles on this container element.
3:39:30So let's go into our css.
3:39:32We're going to target the video dash grid.
3:39:37And remember we have two steps.
3:39:39The first step is to set the display to grid,
3:39:43and the second step is to set how many columns we have grid dash
3:39:47template, dash columns,
3:39:53and for our example,
3:39:54we want three equal columns that take up the entire space.
3:40:00So let's set one fr, one fr and one fr.
3:40:07Now if we look at our page, we now have the three columns in our grid,
3:40:12but you might notice that if I resize this down,
3:40:15it actually doesn't resize with the page.
3:40:18So the reason this happens is because if we go and scroll up,
3:40:23we set a width on the video preview,
3:40:26which sort of forces the width to be 300 pixels and earlier we also set
3:40:31the width of the thumbnail to 300.
3:40:34So instead of setting the width like this, which will force the width,
3:40:38we actually just want these elements to take up all the space in the columns
3:40:42that they're inside of. So to do that,
3:40:45we can remove this property here and let's save it.
3:40:50And for images,
3:40:51a weird behavior is that they always keep their original size to get them to
3:40:56fit inside their container or inside the column of the grid. We have
3:41:01to set a width of a hundred percent save it,
3:41:06and now they'll only take up a hundred percent of their container. Now,
3:41:10we also don't need the display block here anymore,
3:41:13so this image is taking up a hundred percent. It's already on its own line,
3:41:18so display block is not necessary. So let's delete that.
3:41:23And now we're going to deal with this video preview with for this,
3:41:27we can just get rid of the with here and the display inline block
3:41:32and also vertical line, which relates to inline block.
3:41:36And we can get rid of the margin since we're going to create this space using
3:41:40the column gap property we learned earlier.
3:41:43So let's just get rid of all of these styles. And now if we save,
3:41:49we can now see that our video previews are fitting perfectly inside of our grid.
3:41:54The final step is we're going to add some space to the columns and to the rows.
3:41:58So let's go into our CSS here. And remember the two properties,
3:42:03they're pretty straightforward are column dash gap,
3:42:07and let's set a column gap of maybe 15 pixels. Save it.
3:42:13Okay, let's compare that to our design,
3:42:17and I'm going to resize it a little bit.
3:42:19So I think this looks pretty close to what we have,
3:42:23maybe 16 pixels.
3:42:26And then we're going to set a row gap.
3:42:28Let's set a row dash gap of maybe 40,
3:42:33save it and compare it to our design.
3:42:37So I think that looks pretty close to what we have now,
3:42:41the design might look a little bit smaller,
3:42:42and that's because we have the sidebar here,
3:42:45but we're going to deal with that in a later lesson. So for now,
3:42:49this looks perfect.
3:42:52The last thing we're going to do is to swap out the thumbnails,
3:42:55the channel profile pictures as well as the rest of the text to match our
3:42:59design. So I'll let you get some practice doing that. Remember,
3:43:03you'll have to download the thumbnail and the channel profile picture first.
3:43:07For now,
3:43:08let's just do six of these videos and then we can add the rest of them at the
3:43:12end of the course.
3:43:14So pause the video right now and swap out all the thumbnails,
3:43:18the channel pictures and the text, and I'll see you back after you've done that.
3:43:26So this is what it looks like after I swapped everything out.
3:43:29So that's the end of this lesson. We learned about CSS grid,
3:43:32which is a great way to create these horizontal layouts that are perfectly
3:43:36aligned and to create this bigger grid that we see here.
3:43:43Here's some exercises to get yourself familiar with grids.
3:44:02In this lesson we're going to learn about Flexbox,
3:44:04which is another way to create layouts.
3:44:06And we're going to use Flexbox to create the header at the top of the page.
3:44:11So Flexbox is similar to CSS Grid. It can create the same kind of layouts,
3:44:15but it's more flexible just like the previous lesson.
3:44:19Let's go into our code and create a new file just to practice Flex Box.
3:44:25We're going to create a new file by clicking this icon and let's call it
3:44:29flex box dot html. And remember,
3:44:33we always start with the HTML structure.
3:44:36We're going to have a doc type at the top and then an HTML
3:44:41element,
3:44:42a head element and a body element.
3:44:48Let's save it. And now we can open this in live server.
3:44:51So right click and open with live server.
3:44:57Now in this lesson we're also going to compare Flexbox to grid to show what
3:45:01these similarities and differences are.
3:45:04So we're also going to go into our code and open the grid dot html from the
3:45:09previous lesson. And we're also going to open this in live server.
3:45:12So right click and open with live server.
3:45:18Just going to move these beside each other and resize the page.
3:45:22And now we're ready to begin.
3:45:26So we're going to start off in our flexbox dot html.
3:45:30And first we're going to go into the head section and we're going to add a
3:45:33title.
3:45:35Let's call this flex box practice and then save.
3:45:41So this is just going to remind us that this file is for flex box practice and
3:45:45it's going to show up here.
3:45:47Next we're going to go into the body and start creating some flex boxes.
3:45:52So just like for grid, we're going to create a diviv,
3:45:55and inside we're going to have two divs,
3:45:58so diviv one and Diviv two.
3:46:06So we're going to use inline CSS again just like we did for grid like here,
3:46:12so that we keep our CSS code close to our HTML code,
3:46:16and it'll be easier to understand what's going on when we review this file in
3:46:19the future. So insider diviv set a style.
3:46:24And for this div we're going to set the background color to light blue like
3:46:29before. And then for the second diviv,
3:46:33we'll also set it to light pink.
3:46:36So style equals background, dash color,
3:46:41light pink, save it.
3:46:45And now we have the two divs we can work with. So just like with grid,
3:46:49Flexbox requires a container or this outer diviv.
3:46:53This container is going to be the flex box.
3:46:56And then these elements are going to be placed into our flex box.
3:47:00So now let's learn how to turn our container into a flex box.
3:47:05We're going to set a style here and we're going to do two steps.
3:47:10The first one is to set the display property to flex.
3:47:15This creates a flex box. In the second step,
3:47:18we're going to set the flex dash direction to row.
3:47:24This means we're going to align these elements horizontally in a horizontal
3:47:28layout.
3:47:29So now let's save this file and we can see the effect that Flexbox has.
3:47:35So inside of Flexbox, these divs, which are block elements,
3:47:40don't behave like block elements anymore.
3:47:42They behave more like inline block elements.
3:47:45They only take up as much horizontal space as they need to.
3:47:49Now compare that to grid where we first set the columns and then the
3:47:54elements went inside the columns. So the layout is a little more rigid for grid.
3:48:00If we go back to our flex box,
3:48:01if we add some more text to this first diviv and save
3:48:07notice that it expands to take up as much space as it needs to.
3:48:11So this is a flexible box and that's why we call it flex box.
3:48:16Now there's one other thing I want to point out about flex box is that if we
3:48:19make this second diviv taller, just like our grid example here,
3:48:24the flex box will be vertically aligned.
3:48:27Let's go into our code and let's add a paragraph to make this diviv
3:48:32taller. If I save it, you'll see that it got taller,
3:48:36but we still maintain vertical alignment.
3:48:39So flexbox is another way to create these horizontal layouts while maintaining
3:48:44alignment. All right,
3:48:47let's go through some more examples to see these similarities and differences
3:48:50between flex box and grid. We'll start with these similarities. First,
3:48:54we'll go into our code and we're going to create another flex box to practice
3:48:58with. So we'll just copy this and then paste it down here.
3:49:04I'm going to select this and press tab. I'll scroll down.
3:49:09So we'll also add some spacing to the top of this because we want to make it
3:49:13easier to separate.
3:49:15So let's add some margin dash top of 30 pixels,
3:49:20save it. That looks pretty good. And now for this first diviv,
3:49:24we're going to set the width to 100 pixels.
3:49:28So I'm just going to organize my CSS a little bit here and we're going to set
3:49:32the width to 100 pixels and let's also
3:49:37change the text to 100 pixels so that we know what's going on. So let's
3:49:41save it.
3:49:43So now our first flex box element is 100 pixels wide.
3:49:48For the second diviv,
3:49:49we're going to tell it to take up the remaining amount of space.
3:49:53So if you remember from grid, that's equivalent to one fr,
3:49:57we're going to learn how to do that in flex box. So for this one in our code,
3:50:02we're going to add a new style and we're going to add a
3:50:07style specific to flex box called flex.
3:50:10And we're going to set this to one.
3:50:13And we're also going to change this text here to flex
3:50:18one. Let's save it.
3:50:22And now we can see that flex one causes this diviv to take up the remaining
3:50:25amount of space.
3:50:27So Flex one is the flex box equivalent to one FR in grid.
3:50:32So let's go through another example.
3:50:34We're going to copy this and then paste it again.
3:50:41And for this example, we're going to add another diviv to the bottom here.
3:50:44So let's copy this first diviv,
3:50:48copy it and paste so that we have alternating colors.
3:50:52And then we're going to set the flex on the second diviv to flex
3:50:57two. And let's change the text to flex two.
3:51:05So you can see that flex two is the equivalent of two FR and grid.
3:51:11So two items that both have flex are going to take up the remaining amount of
3:51:14space.
3:51:15But this number here tells us relatively how much of the remaining space it
3:51:19takes.
3:51:20So this element with flex two is going to take twice the amount of the remaining
3:51:25as this element with flex one.
3:51:27So the value here works the same as E value with fr.
3:51:33So you can see that the basic things that we do with the grid we can also do
3:51:36with flex box. Now let's talk about the differences.
3:51:40So if we go to our grid examples and we look at that, this example here,
3:51:46the layout is more rigid for grid.
3:51:49If we go into our grid code and we scroll down to this example,
3:51:54which is right here, one FFR and two ffr,
3:51:58you'll see that we first define three columns and then these elements go into
3:52:03those columns. So if I move this element to the second
3:52:08position, so I'm just going to cut and move it down here.
3:52:12This item is now going to go into the second column and it's going to take up
3:52:16one FR of space, even though we wrote 100 pixels here.
3:52:20So if I save this,
3:52:22you'll see that this one FR element goes into the 100 pixel column.
3:52:26So it only takes up a hundred pixels of space.
3:52:29And the layout here is not changing for flex box. However,
3:52:34if we go to our flex box example and our code,
3:52:38if we change the order of the elements,
3:52:40so let's cut this and paste it down here, save it.
3:52:45You'll notice that the layout actually changes.
3:52:48So this element here actually keeps its width of flex one,
3:52:53and then the second element keeps its width of a hundred pixels.
3:52:57So the elements take their width along with them if they move around,
3:53:01and that causes us to have flexible layouts depending on how many elements we
3:53:06have and what order they're in. So that's the biggest difference between
3:53:11flex box and grid.
3:53:13So what's the advantage of having a flexible layout like this?
3:53:18Let's go to our final project and we're going to resize the browser.
3:53:23And you'll notice that in the header in the right section we have four icons or
3:53:27images. Now we could create this horizontal layout using a grid.
3:53:32However, when we're locked out of YouTube,
3:53:34you'll notice that we only have three icons.
3:53:36So the layout actually changes because we only have three elements now.
3:53:41So this would be a great situation to use flex box instead of grid when we want
3:53:45a flexible layout dependent on our content.
3:53:50So that's the basics of how Flexbox works to create layouts and the main
3:53:54difference between Flexbox and grid.
3:53:57We're going to go back to our practice file and we're going to go through some
3:54:00other examples of Flexbox to help us build the header of our final project.
3:54:06So first,
3:54:06let's actually save this as it is so that we get a reminder that the
3:54:11layout is flexible.
3:54:13I'm going to change this to light blue and the other one to light pink so that
3:54:17we have alternating colors and it's easier to see.
3:54:25All right, let's go back into our grid coat,
3:54:28and we're also going to move this back into its original position.
3:54:31So just to remind us that for grid, the layout is more rigid,
3:54:36let's save it. And now we're back.
3:54:38So we'll go back to our Flexbox file and our flex box html,
3:54:43and we're going to do another example.
3:54:45So let's copy this and we're going to create another flex box to
3:54:51practice with.
3:54:55Now for these next examples,
3:54:57we're going to use them to learn how to create the header up here. So first,
3:55:02let's create something that looks like the header.
3:55:04We're going to create a box that has roughly the same shape.
3:55:09So we'll go into our file here and we're going to make this flex box have the
3:55:13same shape as a header.
3:55:17So let's set the height to 70 pixels and let's
3:55:21set a border so that we can see the actual box.
3:55:26So we're going to set a border width of one pixel,
3:55:30a border style of a solid color,
3:55:34and we'll set the border color to gray. And when we save it,
3:55:39we can now see our flex box using the border.
3:55:43I'm going to add a little bit of spacing to the bottom of the page here so that
3:55:46we can scroll this up. So remember to do that,
3:55:49we're going to scroll up and add some padding to the bottom of the body.
3:55:56We're going to add a style to the body,
3:55:59and we're going to add some space to the bottom.
3:56:00So padding bottom 1000 pixels,
3:56:07and now we can scroll this flex box up to the top so that it's easier to work
3:56:11with. Now let's scroll back down to the example we were working with,
3:56:17which is right here. So for each of these divs,
3:56:21let's change the width to 100 pixels.
3:56:24So I'll change this one to 100 pixels,
3:56:28and let's also change the text to 100 pixels
3:56:31for this one's also 100 pixels and the third one to 100 pixels.
3:56:40Now let's save it. And we have our three divs here.
3:56:44So notice that these three divs are aligned to the left side,
3:56:49so we can actually change how they are aligned horizontally. To do that,
3:56:53we're going to use a flex box property called justify dash content.
3:56:59So this determines how these elements are laid out horizontally. For example,
3:57:04the default value is start. If we save it,
3:57:07they'll be aligned to the start or the left side.
3:57:11If we change this to end now,
3:57:14they will be aligned to the end or the right side.
3:57:17We can also change this to center to put all of our elements in the
3:57:22center. So that's how we control how these elements are positioned horizontally.
3:57:28We're going to go through another example here.
3:57:30We're going to copy this whole flex box and we're going to create another one
3:57:34below it. Let's copy it and paste it.
3:57:40And for this one we're going to set a special value of space
3:57:46dash between.
3:57:49So what space between does is that it spreads out our elements evenly across
3:57:53this horizontal space and to make sure that there's equal amount of space
3:57:58between each element.
3:58:00So this is really useful if we go back to our header to spread
3:58:05out these four icons evenly.
3:58:09Now the last example we're going to go through for flex box is how to align
3:58:14elements vertically. So let's copy this again and create another flex box.
3:58:20So let's copy this, paste it down here.
3:58:28And for this one we're going to set another flex box property called align dash
3:58:33items. So this determines how these elements are aligned vertically.
3:58:38The default value is stretch,
3:58:41which you can see here the elements are stretching to fill up the vertical
3:58:44space, but we also have some options. We can align them to the start,
3:58:50so they will no longer stretch to the vertical space.
3:58:52They will just take up as much vertical space as they need to,
3:58:56and they will be placed at the top or we can put them at the end,
3:59:01which will place them at the bottom of the container and we can put them in
3:59:06the center,
3:59:09which will place them vertically centered. If we look at our final project,
3:59:13again,
3:59:14you'll notice that all of these things in the header are vertically centered.
3:59:18So now we learned all these skills that we need and we're ready to build the
3:59:21header for our project.
3:59:24Let's go to the code for our project we were working on,
3:59:27which was YouTube dot html. And make sure you have this open in your browser.
3:59:34I'm going to resize the window here and also the code editor so that it's
3:59:39easier to see what's going on. As we code,
3:59:44We're first going to create an element at the top to represent our header.
3:59:48So let's scroll down. And currently all we have is this input.
3:59:53So we're going to create a new diviv
3:59:57and we're going to give it a class of header.
4:00:01So this diviv is going to represent the header in the final project.
4:00:07And now let's put our search bar into our new header.
4:00:11So we'll cut this and paste it in here.
4:00:17Next. If we look at our final project, the header has three sections.
4:00:21We have a section on the left,
4:00:24a middle section with the search bar and the right section here with some icons.
4:00:30So we're going to simplify this by first creating these three sections and then
4:00:33aligning them and then filling out these sections with the appropriate elements.
4:00:39So let's go back down here and we're going to create three sections.
4:00:42So we'll just use three divs here.
4:00:45So let's call this class equals left dash section.
4:00:51We'll create another diviv, we'll call it class equals middle dash section.
4:00:57We'll create another div and we'll give it a class of right
4:01:02dash section
4:01:06and we'll put the search bar into the middle section Right here.
4:01:14And now let's style this diviv so that we have roughly the same dimensions.
4:01:21So before we do that,
4:01:23you'll notice that we already have a lot of CSS code in this file,
4:01:26and the best practice is actually to put the CSS in a separate file.
4:01:30So before we write even more css,
4:01:32let's go ahead and put this into its own CSS file.
4:01:36So we're actually going to have multiple CSS files,
4:01:39one file for styles of the video preview and another for every
4:01:44style of the header.
4:01:46So let's actually create a new folder first to organize all of our different
4:01:50files of css. So we'll create a new folder and let's just call this styles.
4:01:56Inside we're going to create two CSS files.
4:01:59The first one is going to be called video dot css,
4:02:05and the second is going to be header dot css.
4:02:10So first we're going to go into our YouTube htl.
4:02:14We're going to move all of this into the video dot CSS file.
4:02:20So let's move this into here.
4:02:24Now all these styles for these videos are separated into their own file.
4:02:30Now if I scroll up to the top here,
4:02:33you'll notice we also have some styles for the header.
4:02:35So this actually belongs in the header,
4:02:38and we're going to move this into our header dot CSS file.
4:02:43So we're grouping related styles together to make it easier to read. Now,
4:02:48for the top of this file, again,
4:02:51we have this code that targets all paragraphs on the page.
4:02:54So this is not actually specific to our videos.
4:02:57So I'm actually going to create another file called general
4:03:02dot css,
4:03:03and that's going to contain all the general CSS code like this
4:03:08where we target all paragraph elements on the page.
4:03:11So move this piece of code into general.
4:03:18So just like that,
4:03:19we have three CSS files and they're all very focused on one part
4:03:24of our webpage. So this is generally what we want to do.
4:03:28We want to organize our code and separate them into different files depending on
4:03:32what the code does. Next,
4:03:35we're going to go into our HTML file and we can remove this and let's save it.
4:03:43But now you can see that all of these styles that we had are gone,
4:03:46so we need to link them back into our html. To do that,
4:03:50we're going to create a link element. We'll have an attribute of re,
4:03:56which tells it what we're linking.
4:03:58So we're linking a style sheet and we also tell it what file we're linking with
4:04:02hf. So here beside our HTML file,
4:04:07we have a styles folder. So we're going to first link the styles folder,
4:04:12and then we're going to type a slash to go into it and link general dot css.
4:04:19And now we're going to link our other two CSS files. So to do that,
4:04:23we just need to copy and paste this,
4:04:26and then we're going to link header dot css.
4:04:31And for the third one, we're going to link video dot css.
4:04:36And if we save it,
4:04:36we linked all of our code in three separate files and we're back to where we
4:04:41were. Next,
4:04:43let's focus on our header styles and create our header.
4:04:47We're going to go into this file And we actually don't need this display block
4:04:51anymore. So we use this to put the search bar on a separate line,
4:04:56but now the search bar is inside a bunch of divs,
4:04:59so the divs will create that separate line for us. Now,
4:05:03the one other thing that we had to do is that notice that there is some spacing
4:05:07on the left side, on the right side and at the top. So by default,
4:05:12if we right click and inspect and we look at the body.
4:05:17So the body element has eight pixels of margin on every side by default.
4:05:23Now to get a more precise design, we actually want to set this to zero.
4:05:26So we're going to reset these default styles.
4:05:29So we'll go into our CSS code and we're going to go into the general file
4:05:35and we're going to target the body and we're going to get rid of all margins.
4:05:39An easier way to do this is to set the margin property and set it to
4:05:44zero. So this will set all margins in all directions to zero. Let's save it.
4:05:49And now our elements are right up to the edge of the page.
4:05:53Next we're going to work on our header.
4:05:56So I'm actually going to make this wider so that we can have both of these
4:06:01files on each side.
4:06:03So we're going to have the HTML on the left and the CSS on the right.
4:06:07So the first thing we'll do is we're going to add a height to this header so
4:06:10that it looks like our design here.
4:06:13So let's go into our header file. And remember we set a class of header,
4:06:18so we'll target that using dot header,
4:06:23and we'll set a height of maybe 40 pixels.
4:06:28Okay,
4:06:28so let's compare that to our design. Looks like our design is a lot taller.
4:06:34Let's change it to maybe 55 pixels.
4:06:39Let's compare that. So I'm just comparing this to the bottom edge of here,
4:06:44and that looks pretty good.
4:06:48So next we're going to position these three sections, the left section,
4:06:51the middle section, and the right section.
4:06:56So in our code,
4:06:58we can't actually see the sections right now because they don't have any content
4:07:02in them.
4:07:03Let's just call this the left section and then add the text here
4:07:08as well. The right section,
4:07:13save it. And now we have these three. However,
4:07:15you'll notice that they're being aligned vertically,
4:07:18and that's because divs by default are display block,
4:07:21and we haven't made this into a flex box yet.
4:07:25So to create a horizontal layout,
4:07:27we're going to turn our header container here into a flex box.
4:07:31We're going to set the display to flex,
4:07:35and we're also going to set the flex dash direction to
4:07:40row to lay them out horizontally slots safe.
4:07:45And now our sections only take up as much space as we need to as we saw in our
4:07:49examples. Next,
4:07:52let's give these a background color so it's easier to see them.
4:07:56So for the left section we're going to target it And we'll set a
4:08:00background dash color of light blue.
4:08:05And for the middle section
4:08:10we'll set a background color of light pink.
4:08:14And for the right section, we're going to set a background color of light blue,
4:08:20right section,
4:08:22background color of light blue.
4:08:29So now how do we create this layout? So let's analyze it a little bit.
4:08:34If we resize the page, notice that this middle section is also resizing.
4:08:41So to achieve this, we're going to use a property called flex.
4:08:45So if you recall in our examples, flex takes up the remaining amount of space.
4:08:50So if I look at the header in our final project,
4:08:53when I resize this right section is not changing,
4:08:56its width and neither is the left section.
4:08:59So these will have a predefined width,
4:09:02and then this will be flex because as you can see,
4:09:05it's growing as the page is being resized.
4:09:09So that's an example of how to analyze these layouts. Don't worry,
4:09:12you'll get better with more practice. For now,
4:09:15we're going to do this example together. On the left section,
4:09:19we're going to set a fixed width. Let's set this to maybe 200 pixels.
4:09:24See how that looks. We'll compare it to our design.
4:09:28So it's actually a little too much.
4:09:29I wanted to end right here after the YouTube logo.
4:09:33So we're going to go back and let's change this to one 50 pixels.
4:09:38And let's compare it. So that looks pretty close.
4:09:43For this middle section, we wanted to stretch.
4:09:45So remember the property to do that is called flex one.
4:09:51So now the middle section is stretching. And for the right section,
4:09:54we also want a fixed width. So let's compare it.
4:09:57We want it to be somewhere here.
4:10:00Let's try setting a width of 200 pixels
4:10:05and then let's compare these two. Okay,
4:10:07so I think this is pretty close to the structure that we have here.
4:10:13So what we're doing is we're just simplifying the structure into the bigger
4:10:17picture, and then we'll go in and add these smaller details.
4:10:23Now we're going to set some spacing on the left and the right side of this
4:10:27middle section. So remember to do that, we're going to set our margins.
4:10:31So on the left side,
4:10:33let's set a margin dash left of maybe
4:10:3830 pixels, save it. And let's compare.
4:10:42There's definitely more than 30 pixels. Let's change it to maybe 70 pixels.
4:10:48Save it and compare. So this compared to this,
4:10:52I think that's close enough. So now for the right section,
4:10:56we're also going to add a little bit of space. So if we look at our design,
4:11:00so it's less space than we have here.
4:11:03So we're going to add a margin to the right of the middle section,
4:11:10and we'll set it to maybe 30 pixels, save it.
4:11:15And that looks pretty close to what we have here, maybe 35 pixels.
4:11:21Okay, so now if we resize our page,
4:11:26you'll notice that the middle section is growing and shrinking with the page.
4:11:30And the right and left are staying the same width,
4:11:32which is exactly what we have here.
4:11:36So there's one other detail we're going to copy for this middle section.
4:11:40Notice that if I resize the browser and make it wider,
4:11:43at some point the middle section stops growing. So at roughly this point,
4:11:48the middle section will stop growing.
4:11:50If the browser gets wider and it just keeps the same width and is centered
4:11:54horizontally, we're going to learn how to do that.
4:11:57Let's go back into our project and we're going to limit the width of this middle
4:12:02section first.
4:12:03So we'll go into our code and the property to do that is called
4:12:08max dash with.
4:12:11And let's set it to 300 pixels.
4:12:15So this property says the width can be less than 300 pixels,
4:12:18but as soon as it grows to be over 300 pixels, we're going to limit it to 300.
4:12:23So that's what we see here. Now,
4:12:25when we resize the browser to be less than 300 pixels,
4:12:29notice that it's shrinking and growing again, but when the browser gets wider,
4:12:34it's limited to 300 pixels because of this line of code.
4:12:39Next,
4:12:40we want to distribute these three sections evenly across our horizontal space.
4:12:45So just like what we have here. Now remember to do that in flex box.
4:12:51We have an example here.
4:12:53If we go back into our code and go into our flex box practice file,
4:13:00we can find that example in our code.
4:13:02And remember that we achieved this using a property called justify
4:13:07content space between,
4:13:10and we set this property on our flex box container,
4:13:13and that's what we're going to do for our project right now.
4:13:16So we're going to go up to our flex box container.
4:13:20Let's go back to our YouTube hdml and to spread these out evenly
4:13:25across the entire horizontal space.
4:13:27And we're going to set justify dash content space
4:13:32dash between. Let's save it.
4:13:37And now they take up the entire space. So if we compare this to our design,
4:13:42we'll notice that the middle section is still a little bit too narrow compared
4:13:46to our design. So let's increase the max width here.
4:13:50So let's increase it to 400 pixels, see how that looks.
4:13:55Okay, so it's still bigger.
4:13:57Let's increase it to 500 pixels.
4:14:02See how that looks. Okay, so I think that looks close enough to our design.
4:14:07So this middle section in pink is roughly equal to this middle section
4:14:12over here. So that's the end of this lesson.
4:14:16We learned about Flex Box and we used it to create the layout for our header.
4:14:21So in this situation, we were mostly focused on our content size.
4:14:25We wanted to make sure the middle section had a max width and at least some
4:14:29space in between.
4:14:31So that's why we used a flex box because we were focused on our content size
4:14:35first. And then the layout doesn't matter as much.
4:14:38We just use a flex box to spread out our content evenly across the horizontal
4:14:42space. So when we focus on content size first, we use a flex box.
4:14:48When we want to create a grid, we use grid. And for most other situations,
4:14:52for example, this horizontal layout that we created in the layers technique,
4:14:57we can use either grid or flexbox. In most situations, they do the same thing.
4:15:06So here are some exercises that you can practice using Flexbox to get yourself
4:15:10more familiar with how it works.
4:15:24And now that we have the general layout,
4:15:26we're going to finish up the rest of the header. Before we do that,
4:15:30we're going to download all of these icons and images that you see here.
4:15:34To do that, we're going to right click inspect,
4:15:38and then click this in the top left and then click the icon we want to download.
4:15:43And then we can find the URL down here.
4:15:46I'm going to hover over it and then click this link to open in a new tab
4:15:50and then save it with control S.
4:15:53So I'm going to save this in the folder that contains our code,
4:15:57which is this one. So I'm going to save it.
4:16:01And then in our code editor, we should see this icon,
4:16:04so we can collapse this by pressing that.
4:16:08And then now we have our icon right here called the hamburger menu.
4:16:13Now looking at our header, we have a lot of icons to download.
4:16:16So let's organize them using a folder. We're going to create a new folder,
4:16:21and let's call this icons.
4:16:25And we're going to put the icon we downloaded into that folder.
4:16:28So this one right here into this folder.
4:16:33And now we're going to do the same steps to download all of these other icons
4:16:37and this image that we see here. So we're going to do the same steps.
4:16:41Click the top left and then click the icon we want to download and we can find
4:16:45the link here.
4:16:47I'm going to fast forward the video here because it's just a bunch of repetitive
4:16:51steps, and we'll continue after we downloaded all the icons.
4:16:58So when you get to the notification icon,
4:17:00don't worry about this notification number here.
4:17:03We're going to learn how to do that in the next section.
4:17:06And for this channel profile picture, when I download it,
4:17:09I'm actually going to save it in a different folder from the other icons.
4:17:12So if I download this here and save it,
4:17:15I'm going to put this in the channel pictures folder instead of the icons
4:17:19folder, because technically it's a channel picture.
4:17:26So once we have all of that downloaded,
4:17:28let's check in our code editor and we should see all of the icons that we need
4:17:32for the header inside the icons folder,
4:17:35as well as the channel profile picture on the right in the channel pictures
4:17:39folder.
4:17:40And now we're ready to complete our header in our current project.
4:17:45So in our left section we have this,
4:17:48which is a called a hamburger menu and the YouTube logo.
4:17:52So N our HTML. In this file, in our left section,
4:17:57we're going to have an image and we're going to tell it what to
4:18:02load. So loading and SVG is the same thing as any other image.
4:18:06And we're going to go into the icons folder and we're going to load the
4:18:09hamburger menu dot svg.
4:18:12And then we're also going to load the YouTube logo,
4:18:16which is right here.
4:18:19So YouTube logo dot svg,
4:18:23save that and look at our webpage and refresh.
4:18:27So the images are loaded, but they're way too big. Let's make them smaller.
4:18:32We're going to set a class so that we can target them with css.
4:18:36So hamburger dash menu. And for this one,
4:18:41let's set a class of YouTube dash logo.
4:18:46And now in our css,
4:18:48let's go in here and target the hamburger
4:18:53menu class.
4:18:56And let's set the height to something like 20 pixels.
4:19:01And same thing for the YouTube logo.
4:19:06We'll set the height to 20 pixels.
4:19:11So that looks pretty good. Now, if we look at our design,
4:19:15we'll notice that these images are actually aligned vertically in the center.
4:19:20So in our flex box practice file, we learn how to do this.
4:19:24If we look at our code, again,
4:19:27if we look at our flex box code,
4:19:29let's scroll all the way down to the last example.
4:19:33We did this using a align items center,
4:19:37so that aligns them vertically in the center like this.
4:19:40We'll go back to our header c s s and just have this as a reference.
4:19:45So for our left section, we're going to set a line, dash items,
4:19:51colon center. However, you'll notice that it didn't do anything.
4:19:56And that's because if we look at our html. The header is a flex box,
4:20:01but this left section here is still a regular,
4:20:04it's a element inside the flex box, but this itself is not a flex box.
4:20:09So Align items doesn't do anything Now to fixes.
4:20:13We can actually turn the left section into a flex box using Display
4:20:18Flex, And if we save it now the left section is a flex
4:20:23box, so align items will align it vertically in the center.
4:20:27So Flex Box doesn't actually go down two layers.
4:20:30It only affects elements on the first layer like this Diviv and this Diviv.
4:20:35If we go down another level, like here, flex box doesn't affect it.
4:20:40That's why we have to turn this into a flex box as well in order to use
4:20:44properties like Align Items center.
4:20:47So this situation of putting a flex box inside another flex box is totally
4:20:52valid. If we want to target another level of elements like this,
4:20:57let's go into our design and compare it.
4:21:00And you can see that for our design there is some spacing on the left and
4:21:05right of the hamburger menu.
4:21:07So we can create that right now using margin
4:21:12dash left of 20 pixels and margin dash right
4:21:18of 20 pixels. So we'll add 20 pixels on both of these sides.
4:21:23So if I go back and forth,
4:21:25you'll notice that this icon is a little bit bigger than our project,
4:21:29so we can actually adjust our height here to make our icon a little bit bigger.
4:21:34We can maybe set this to 24 and let's compare
4:21:38it. Okay, so that looks pretty close.
4:21:42So now I notice that this icon is a little bit to the right of our website,
4:21:47which is here. So you notice that it's a little bit to the right,
4:21:50we need to add more spacing.
4:21:52So let's add margin left of maybe 24 pixels. Save it.
4:21:58Now if we compare the two.
4:22:01So that looks pretty much close to what we need and the YouTube logo is also in
4:22:04the same place, so that's a bonus for us.
4:22:07So now it looks like the left section is pretty much done in our project and we
4:22:12can get rid of this background color that we were practicing with.
4:22:17First. We're actually going to remove the width.
4:22:19So this width of 150 pixels is forcing the left section to only end up here.
4:22:24However, if we remove this,
4:22:26the left section will stretch to contain all of its content. So if we save it,
4:22:31you can see that it stretches. Now we can remove the background color
4:22:36and that's done. Next we're going to work on this middle section.
4:22:41So for this middle section in our design, we have an icon here,
4:22:46a button here. And if we resize,
4:22:49you'll notice that the search box also resizes. So this search box is going to
4:22:53grow with the rest of the page. So we already learned how to do that.
4:22:58As a reminder, it's flex one.
4:23:02So first let's go in and create these two buttons first because that's the easy
4:23:06part.
4:23:08Let's go into our code in the middle section here.
4:23:12After the search bar, we're going to create two buttons.
4:23:15So let's create one button here and another button down here.
4:23:21So inside this first button we're going to have this search icon.
4:23:25So if we go into our icons folder, it's this icon here, search dot svg.
4:23:30So we can create an image element,
4:23:33source and icons slash search svg.
4:23:39In the second button we're going to have our voice search icon,
4:23:42which is this one,
4:23:44and we're going to create another image element and we're going to load
4:23:49icons slash voice search icon.
4:23:55Now let's save it and see how that looks. Okay,
4:23:58so that didn't work out very well probably because if you remember when we
4:24:02loaded this icon here, it was super big.
4:24:05So the two icons we loaded are probably super big and we only see the top left
4:24:09corner, which is empty.
4:24:11So first let's make our icon smaller and make our buttons a little bigger.
4:24:15Let's go into our html.
4:24:17We're going to add some classes so that we can target it with css. It's class.
4:24:22Let's call this the search dash button.
4:24:25And let's call this one the voice dash search dash
4:24:30button.
4:24:34So we're going to go to the middle section here.
4:24:36We're going to target the search button first.
4:24:41Let's set the height to something like 40 pixels and set the
4:24:46width to something like 60 pixels.
4:24:50And for the voice search button, if we look at our design,
4:24:54it's pretty much round. So let's target voice search button.
4:25:02Let's set a height of 40 pixels and we'll set the width
4:25:07to 40 pixels as well. So let's save it. Okay,
4:25:12so that looks super weird, but we're going to fix this right now.
4:25:15So remember that we want to align these in the center vertically just like this.
4:25:20To do that, our middle section is also going to be a flex box,
4:25:24and then we can use the align items property that we use for the left
4:25:29section.
4:25:30So let's make this middle section a flex box and we're going to set
4:25:35display to flex and we're going to set a line
4:25:40dash items
4:25:43to center just like our left section. So now if we save,
4:25:48you'll see that everything is aligned to the center and now it's ready for us to
4:25:51style. So there is one thing that I left out which is flex direction row.
4:25:57So this tells a flex box to lay out our content horizontally.
4:26:01And this is actually the default value, so we don't actually need it.
4:26:05I put it here just for our practice code before our header.
4:26:09We can be safe actually leaving that line out and just having display flex and a
4:26:14item center. So now that the layout is good,
4:26:18we're going to go back to our tried and true method of styling this one by one
4:26:22with css. The first thing I'm going to adjust is this search bar.
4:26:27So notice that it stretches to fill up the content when we resize the page.
4:26:32To do that, we're going to go into our code,
4:26:34we're going to target the search bar,
4:26:36search dash bar right here. And remember to
4:26:41stretch it to take up the remaining space.
4:26:44We're going to set flex one and save.
4:26:50Now let's make the search box similar to the design.
4:26:53So I'm actually going to move this here side by side so that it's easier
4:26:58to copy from.
4:27:00So I'll go back into my code and the first thing I'll adjust is the height.
4:27:04So let's set a height of 40 pixels.
4:27:09That looks a little too much. Let's set the height to 36. See how that looks.
4:27:14So I think it's still a little too much. Let's set a 2 34.
4:27:18And that looks pretty good to me. Next, let's adjust this placeholder text.
4:27:24So to adjust the placeholder, we actually need another sort of pseudo class.
4:27:28So we're going to type dot search bar to target the search bar,
4:27:33and then we're going to type colon, colon placeholder.
4:27:38So this is how you target the placeholder on an input element like this.
4:27:44So first, let's set the font dash family
4:27:49to the one we're using for this page. If we go to general css,
4:27:53we're using Reto aerial,
4:27:56so we're going to set that to Roberto Aerial,
4:28:00save it. So the font changed a little bit.
4:28:04We're going to change the font size to make it bigger.
4:28:06Font size 16 pixels. Let's see.
4:28:11Okay, I think that looks a little bigger.
4:28:15And the next we'll notice that on the inside of this input we have a little bit
4:28:19of space, while we don't have that much space here.
4:28:22So we're going to set some padding on the left of our search bar.
4:28:25So let's set the padding dash left to 12 pixels,
4:28:30save it. Okay, that looks okay. Let's actually set it to 10 pixels.
4:28:36And then when we start typing into the search bar,
4:28:38notice that the font is bigger,
4:28:40but for here we still have the small font. So we can set the font size
4:28:47to 16 pixels, see how that looks. Okay,
4:28:50so that looks pretty close to what we have.
4:28:54And next I'm going to change the border.
4:28:56So I'll set the border dash width to one pixels,
4:29:01the border style, we want it to be solid.
4:29:05And finally I'm going to set a border dash color of gray.
4:29:10Let's see how that looks. Okay,
4:29:12so I can't really tell the color because of the background.
4:29:15We're going to remove this light pink background because we don't need it
4:29:19anymore. And that looks a little too dark.
4:29:22So I'm going to pick something lighter, maybe something like this
4:29:30save. And I think that's close enough to that. Next,
4:29:35let's adjust the height again, because when we set the border,
4:29:37it actually made it a little bit smaller.
4:29:39So we'll set the height to 36 and now aligns with the buttons.
4:29:46And I'm also going to create rounded corners.
4:29:48So that property is border dash radius.
4:29:52Let's set it to two pixels.
4:29:56Now the last style we're going to adjust for this is the shadow.
4:30:00So if we zoom into this search box,
4:30:02there's actually a little bit of shadow in the inside while our search box does
4:30:06not have that. So we'll go back into our code and we're going to add a shadow.
4:30:11So we're going to use this from one of the very early lessons box dash
4:30:16shadow.
4:30:19And if we want a shadow on the inside of the element instead of the outside,
4:30:23we just need to set inset at the beginning.
4:30:26So this will put this box shadow in the inside.
4:30:29Now we have our usual values, which is the horizontal position.
4:30:34So let's set it to one pixels.
4:30:36So it's going to be moved one pixels to the right and the vertical position,
4:30:40let's set it to two pixels.
4:30:41The shadow will be moved two pixels to the bottom. Let's set a blur of
4:30:46maybe five pixels and we'll set the shadow color to R G
4:30:51B A 0 0 0, which is black.
4:30:55And then transparency set to only 0.15 to get a very
4:31:00transparent black. So let's save this.
4:31:05So that's way too much.
4:31:06Let's actually reduce the blur to three pixels maybe and then change
4:31:11this to 0.05. So we're doing a lot of trial and error with css,
4:31:16which is normal. So I think this looks pretty close to our design.
4:31:20I think it looks close enough for now we're going to move on and style the
4:31:24buttons. So first,
4:31:27let's resize this icon inside the button.
4:31:32So let's give this a class of search dash icon,
4:31:38save it,
4:31:39and then in here in the dot search icon,
4:31:44we're going to make it a little smaller. So let's set the height to 20 pixels,
4:31:49see how that looks. Okay, so that looks too small. I'm going to try 25 pixels.
4:31:55All right, so that size looks pretty similar.
4:31:57Now you'll notice that this one is vertically aligned while ours is not.
4:32:01So we can either turn the search button into a flex box or we can just do a
4:32:06simpler solution.
4:32:07We're going to add some spacing to the top of this icon to push it down.
4:32:11So margin dash top of maybe four pixels
4:32:17to push that down just a little bit. Okay, so I think that looks close enough.
4:32:23Let's finish off this button. We're going to set a background color
4:32:29of gray,
4:32:30and then I'm going to adjust it to match that. So I'm going to pick something
4:32:34like this, maybe two 40
4:32:39and then save it. That looks pretty good, but now our borders are messed up.
4:32:43So we're going to set the border border with of one
4:32:48pixel border dash style of
4:32:52solid color and border color is going to be the
4:32:57same as our text box. So we can go up here and just copy that
4:33:05and right there, save it. And there we go.
4:33:09That looks pretty close right now.
4:33:12So now we want to move this button into this input element a little bit like you
4:33:16see here, so that we only have one edge to do that. Here's a little trick.
4:33:21We can set some spacing on the left, some margin left,
4:33:25except this time we're going to add negative spacing.
4:33:29So we're going to add negative one spacing, normal margin adds space,
4:33:33and it pushes the element negative margin subtracts space and pulls the element
4:33:37to that side. So margin left of a negative number, we'll pull it to the left.
4:33:42So let's pull it to the left by one pixel, save it,
4:33:46and that looks really good.
4:33:48Now we're going to make our button a little bit longer.
4:33:52Let's change it to 66. Finally,
4:33:57we're going to style this voice search icon first.
4:34:00We notice that there's a little bit of space between these two.
4:34:03So let's set a margin on the right side of the button.
4:34:07So this time it's normal margin margin of
4:34:11maybe eight pixels.
4:34:15I think that looks pretty close. I'm actually going to set it to 10.
4:34:20And then for this button, I'm first going to make it round.
4:34:23So let's go into these styles of this button. And to make it round,
4:34:27we just have to make the corners as round as possible.
4:34:31Let's set the border radius
4:34:35and I'm going to set it to 20 pixels.
4:34:37So a trick here is that if you set this to half the width of the height,
4:34:41it will make it round. So let's save this. And now we have a round button,
4:34:45but we have a weird border.
4:34:47Let's actually get rid of it because it's not in our design.
4:34:50So border and none to get rid of the border.
4:34:56So it's looking really close. Our icon is a little bit bigger than this one,
4:35:00so we're going to target it in here.
4:35:03Class equals voice dash, search dash icon,
4:35:08and then NR css. We'll target that. So voice dash,
4:35:12search dash icon. So for this,
4:35:16let's set a height of maybe 20 pixels. See how that looks.
4:35:21It's a little bit small. Let's increase it to 24.
4:35:25I think that looks pretty good.
4:35:26And next we're going to try to vertically align it.
4:35:29We're going to add a little bit of margin on the top to push it down.
4:35:33So margin dash top and four pixels.
4:35:38Okay, that looks pretty good. The last thing is to change the background color.
4:35:43So we're going to change the background color to let's
4:35:48say gray. And then I'll pick another color.
4:35:50So this time let's pick maybe 2 45
4:35:56and then save. Oh, so I accidentally put it on the icon.
4:36:01We actually want to put this on the entire button.
4:36:03So I'm going to cut and paste this onto the button styles.
4:36:08Let's save. And I think that looks pretty close.
4:36:12So this color is a little bit off from this,
4:36:14but I think it's okay if we look at the bigger picture.
4:36:18So now we've completed the middle section and you can compare it here
4:36:23to here. So we're looking really good so far.
4:36:27Next we're going to finish the right section.
4:36:29So I'm going to put them side by side again so it's easier for us to copy.
4:36:35So the right section has three icons and an image.
4:36:39So we're going to add them to our HTML first.
4:36:42So let's go into the right section here.
4:36:46And we're going to create an image and we're going to load this,
4:36:50which is the upload icon.
4:36:54So icons slash upload
4:36:59dot svg, and then we'll add another one. So image.
4:37:06And this one is going to be icons slash.
4:37:09This one is called YouTube apps svg.
4:37:14And then the last one is the notification icon, which is here.
4:37:19So image element.
4:37:21And we're going to load icons slash notifications
4:37:26svg.
4:37:28And finally we're going to create another image and we're going to load this
4:37:32channel profile picture. So source.
4:37:35And this one is located in a different folder.
4:37:38It's in the channel pictures folder, and it's called my channel dot jpeg.
4:37:43So let's save it refresh. And again,
4:37:47our SVGs are massive, so let's go ahead and resize them in our css.
4:37:53So first, let's add classes to all of these images.
4:37:56So we're going to set this one to upload dash icon,
4:38:00so upload dash icon. The next one is going to be YouTube apps icon.
4:38:05So class equals YouTube dash apps dash icon.
4:38:10Next one we'll do notifications dash icon.
4:38:12So class equals notifications dash icon.
4:38:17And lastly, we're going to name this a little bit different.
4:38:20Let's give it a class and let's call this one current dash
4:38:24user dash picture so it's a little more clear that this is different
4:38:32and we can target it with css.
4:38:34So let's go down into the right section here and we'll scroll up and we'll
4:38:39first resize the icons. Let's resize the upload icon.
4:38:44Let's set a height of 24 pixels and then we'll do the
4:38:51YouTube apps icon that's set a height of
4:38:5524 pixels. And then the notifications icon,
4:39:00which is right here. Icon.
4:39:04Let's set a height of this 24 pixels again
4:39:08and the current user picture. So notice it's a little bit taller.
4:39:13Let's target that current dash user dash picture,
4:39:17and we're going to set a height of 32 pixels to make it a little bit taller.
4:39:23Let's save it. And now we have the icons we're going to use.
4:39:29Again, we want to align these vertically in the center.
4:39:32Remember to do that we're going to scroll up to our middle section,
4:39:36which is all the way up here.
4:39:39We first have to turn this container into a flex box,
4:39:43and then we can use online item center. So inside our H C M L,
4:39:48we have to turn this into a flex box. Let's scroll down
4:39:54to the right section styles here.
4:39:57We're going to turn this display colon flex,
4:40:04and then we're going to set align dash items colon center
4:40:09to align them vertically. So let's save it. Okay,
4:40:13next we want to distribute them evenly across the horizontal space.
4:40:18And remember from our practice code,
4:40:20that one's called justify dash content space
4:40:25dash between. Let's save it.
4:40:28And now these icons are space evenly across the space,
4:40:33so it looks like they're a little bit too far apart from each other.
4:40:36We can adjust that by adjusting the width.
4:40:38So let's decrease the width to bring everything closer together to match our
4:40:42design. And I actually think this,
4:40:47all the icons look good enough.
4:40:50The only last thing we're going to change is this picture here.
4:40:53So notice it's still a square. We want to make it a circle. So as a review,
4:40:58we're going to use border radius to make it a circle.
4:41:04So let's set it to border radius.
4:41:07And the trick we learned is half of this will make it round. So 16 pixels,
4:41:12save it. And now we have a round channel profile picture. Lastly,
4:41:17we're pretty much done with this so we can get rid of the blue background color.
4:41:21So we'll scroll up and get rid of this.
4:41:27Now I actually noticed that we have spacing to the right here in our design.
4:41:32So that's one thing I missed. So let's add that right now.
4:41:36So we're going to add margin right to this section of
4:41:41maybe 24 pixels. Save it.
4:41:44And I think that's a little too much. I can't really tell.
4:41:48Let's send it to 20 just to be safe. Okay, so I'm happy with how this looks.
4:41:54All right, so that's basically the content in our header.
4:41:57If we look at it right now, it looks really professional.
4:42:00So I know that while we were working on it, it looked a little bit weird,
4:42:03it looked unfinished, but you just got to trust the process.
4:42:06And at the end we have a really professional result that looks like our design.
4:42:12Now there's going to be one last case I'm going to show you,
4:42:15and this is a weird behavior of flex box.
4:42:18So if I resize my browser and I make it smaller,
4:42:23notice that these icons start to get closer to each other.
4:42:28So this happens because flex Box is flexible.
4:42:32When we start not having enough space, it'll start shrinking the items inside.
4:42:37But if we look at our final project and we shrink the browser,
4:42:42notice that this doesn't shrink and we sort of forced only the search bar to
4:42:46shrink. So let's go back into our project and into our code.
4:42:51And Flexbox has a special property to prevent certain items from shrinking.
4:42:56So we're going to scroll down to the right section here.
4:43:00And to prevent the right section from shrinking,
4:43:04we're just going to set this property flex dash shrink
4:43:09colon zero. So this means that no matter what happens,
4:43:13we're going to keep this width and we're not going to shrink.
4:43:15So zero means don't shrink if we save it.
4:43:19And now you're going to see that it doesn't shrink,
4:43:23but now when we resize it,
4:43:25notice that the search bar doesn't actually shrink all the way like our design.
4:43:30So the way to achieve this is to go into our HTML and then we're going to
4:43:35go into our search bar, which is right here.
4:43:41So normally search bars have a default width and we can't really see that
4:43:45because we set flex to one. So it's sort of growing with a page,
4:43:50but as soon as it hits that default width, it's not going to go down anymore.
4:43:54So to remove that default width, we can just set width to zero,
4:44:00we save it,
4:44:01and now you can see that the search box will start shrinking as much as
4:44:05possible. So to recap,
4:44:08we set flex shrink of zero to this right section so it doesn't shrink,
4:44:13and then we set a width of zero to the search bar so that it does shrink.
4:44:21Here are some exercises to get yourself familiar with using Flexbox to create
4:44:25flexible layouts.
4:44:39Now we're going to learn the last major skill that we need to finish off our
4:44:43project. We're going to learn CSS position.
4:44:46So position helps us do things like keep the header at top of the page while we
4:44:50scroll. It also helps us keep the sidebar at the top of the page.
4:44:54And lastly,
4:44:55whenever we see an element on top of another element that's using CSS position,
4:45:00for example here, the video time is on top of the thumbnail,
4:45:04the notification number is on top of the icon. And when I hover over this,
4:45:08we have a tool tip on top of the page.
4:45:12So CSS position adds another dimension to our page.
4:45:16So just like the previous lessons, we're going to create a new HTML file,
4:45:19just a practice position. I'm going to go into my code editor,
4:45:24we're going to create a new file and let's put it right here beside the other
4:45:29ones new file. Let's call this position
4:45:34html. Now as always,
4:45:37we're going to start with the HTML structure.
4:45:40So we're going to have doc type at the top and then an
4:45:45HTML element inside we have a head element
4:45:50and then we have a body element.
4:45:55Now we can right click and open with live server and we're
4:45:59ready to begin. So first,
4:46:01let's add a title so that we know what this HTML file is
4:46:06for. Let's call this position practice.
4:46:11Say save it, and then it should show up here.
4:46:15We're going to start in the body again, and we're going to create two divs.
4:46:20It's called this diviv one and another diviv Diviv two.
4:46:27And I'm just going to resize this a little bit so we can see it side by side.
4:46:37So just like before,
4:46:38we're going to use inline styles so that our CSS is close to our HTML code.
4:46:43I'm going to set a style
4:46:46and then we're going to set this one to background dash color and
4:46:51light blue.
4:46:53And we're going to set the height and the width to 200 pixels. So height,
4:46:57200 pixels and with 200 pixels.
4:47:03Next we're going to set the second diviv to be the same size,
4:47:06but with background color light pink. So again, we set a style
4:47:11and then we set a background dash color of light pink
4:47:16height of 200 pixels and width of 200
4:47:21pixels.
4:47:24So CSS position is just the position property.
4:47:27So let's go into our first diviv and we're going to set the position property
4:47:32to static And then save.
4:47:38So position static is the default position.
4:47:41It's the same thing as if you don't have this line at all.
4:47:45Now we're going to learn a second position property that allows us to stick an
4:47:50element to the top of the page like this while we scroll.
4:47:53And that is called position fixed.
4:47:56So we're going to create a new element at the top here and let's call this our
4:48:01header. So we're going to learn how to create something that works like this.
4:48:07So for this diviv, we're going to set a style
4:48:11of background color,
4:48:14black and a text color of white.
4:48:21And now we're going to learn how to stick this to the top of the page.
4:48:25So first of all, we need to be able to scroll,
4:48:27and right now I don't have enough content to make the page scroll.
4:48:31So what I'll do is we'll go to the body here and we're going to set a style.
4:48:36And then inside the body we're going to set a style of height and something
4:48:41really big, like 3000 pixels.
4:48:45So we just need to make sure that we're able to scroll this page. Next,
4:48:50we're going to make this header stick at the top. To do that,
4:48:53we're going to use the position property,
4:48:55and this time we're going to set a position of fixed.
4:49:00Now when I save it and I start scrolling,
4:49:03notice how the header element is sticking to the page when I scroll.
4:49:07So that's how we make it stick.
4:49:10So the first thing to note is that when we set position fixed like this,
4:49:14it doesn't take us space on the page anymore. So before we add this,
4:49:18and if I save it,
4:49:20so notice that it takes up the top of the page and then these two divs up here
4:49:24below this header. But when we add position fixed,
4:49:29it no longer takes up that space at the top of the page because it's sort of
4:49:32floating above the page now. So that's one way to think about it.
4:49:37So the position property has four special properties we can use to move this
4:49:41element around. The first one is called top.
4:49:45The way that top works is that we can set a pixel measurement. For example,
4:49:49if we set zero pixels,
4:49:52this is going to make the top of our element zero pixels from the top of our
4:49:57browser window here. So if I save it,
4:50:01notice that the top of our element is right on the top edge of the browser
4:50:05window. If I set top to 10 pixels,
4:50:09the top of our element is now 10 pixels from the top of the browser window.
4:50:13So top specifies how far away our element is from the top of the window,
4:50:20the next property we can set is left.
4:50:24So if we set left to zero pixels,
4:50:27then the left side of our element will be on the left edge of our window.
4:50:32If we set left to 50 pixels, for example,
4:50:36now the left side of our element will be 50 pixels from the left of our window.
4:50:40So left tells us how much space is between the element and the left edge of the.
4:50:46So we can set this in all four directions we've seen top left.
4:50:51We can also set bottom.
4:50:52And right now a special feature of these properties is that if
4:50:57we set it in opposite directions, the element will stretch. So for example,
4:51:02if we set it to left,
4:51:04and so these two are opposite directions and we set the right to 50 pixels,
4:51:09notice that the element stretches.
4:51:12So now this element is 50 pixels from the left of the page right here,
4:51:17and it is also 50 pixels from the right of the page.
4:51:20So it will stretch the element to meet these two conditions.
4:51:25Same thing with top and bottom.
4:51:27So if I set bottom to 100 pixels and save it,
4:51:32the element will stretch so that it is 10 pixels from the top and it is 100
4:51:37pixels from the bottom.
4:51:40So this is how we move this element around and resize it with position fixed.
4:51:46Now let's try creating the header that we see here.
4:51:50So as you can see for this header, it's at the top edge of the page.
4:51:53It's also on the left edge and on the right edge.
4:51:57So that means that it's zero pixels from the top as a shorthand,
4:52:02we can just write zero.
4:52:03It's zero pixels from the left and it's zero pixels from the right.
4:52:10Now for the bottom we might first try to calculate how far the bottom of this
4:52:14element is from the bottom of the page.
4:52:17Now that's not going to work if we resize the page,
4:52:19so we need a different approach. So first,
4:52:22let's save this file and go into our practice file.
4:52:26So now you can see that this element is sticking to the top,
4:52:29the left and the right, which is what we have in our code.
4:52:32Now we have to figure out the height of this diviv. So in this case,
4:52:36instead of using bottom, because remember the bottom can resize,
4:52:41we want to use simply height.
4:52:47So in addition to these properties,
4:52:49we can simply use height and width to also resize this element.
4:52:53It all depends on what situation you're in.
4:52:55If you want this fixed element to resize with the page,
4:52:59then you would use top left, right, and bottom.
4:53:01If you just wanted to have a specific height or width and you don't want it to
4:53:05resize, then you use height and width.
4:53:08So here we're going to set the height to 50 pixels and we don't want it
4:53:13to resize with the page. So that's exactly what we have here.
4:53:17Now when we start scrolling,
4:53:18you'll notice that our header sticks to the top of the page.
4:53:21So that's how we create something like the YouTube header that we see here.
4:53:27Now, one last problem is that if we go to our practice file,
4:53:31notice that if we scroll right to the top,
4:53:33the header is covering our first diviv. So we need to add some spacing at the
4:53:37top to push our content down below the header.
4:53:42To do that, we go into our code,
4:53:44and the first thing you might think to do is to add margin to the top.
4:53:49So we're going to add spacing to the top,
4:53:51and let's add a little more than 50 pixels, so 60 pixels.
4:53:56So if we save it and make sure you scroll up all the way to the top of the page,
4:54:01you'll notice that we have 60 pixels of space at the top,
4:54:04and now our content is not covered by the header.
4:54:08Now this is not the best solution because if our content order changes,
4:54:13for example, if I move this diviv down here,
4:54:17notice that it doesn't work anymore.
4:54:19So what we want instead is to always have space at the top of our page
4:54:23regardless of what the content is. So if I move this to the top here
4:54:29and remove margin top, I'm going to show you the proper way to do this.
4:54:36So to properly handle this situation,
4:54:38we need to add spacing to the body element. So let's scroll up to the body.
4:54:44So we have two choices for adding space to the top of our page.
4:54:47We can either use margin or we can use padding.
4:54:52Generally the best practice is to use padding at the top. So we're just going to
4:54:56add spacing on the inside of our webpage at the top of
4:55:0160 pixels, save it and scroll all the way up.
4:55:07And now we have plenty of space at the top of the page and our header is not
4:55:10covering our contents.
4:55:14So now that we learn position fix and how to move this element around and resize
4:55:18it,
4:55:19we're going to go into the project we were currently working on and we're going
4:55:22to put our header and stick it to the top of the page.
4:55:27So let's learn how to do that first,
4:55:30I'm going to resize my windows a little bit so it's easier to work with.
4:55:34I'm going to put it right here.
4:55:35And then we're going to open the YouTube dot html file, which is our project.
4:55:42So remember we put our CSS into separate files.
4:55:45So I'm going to open the header dot CSS file,
4:55:47and I'll put it on the side so you guys can see it side by side.
4:55:52So just like we learned, we're going to go into the header here.
4:55:56We're going to set a style of position fixed,
4:56:00and remember to move this, we're going to use top, left, bottom, and right.
4:56:06So top we want our header to stick to the top of the page.
4:56:10We're going to set that to zero. We want our header zero pixels from
4:56:14the left, so on the left edge of the page and also zero pixels from the right.
4:56:22And finally, we're going to set a height. So we already have it up here,
4:56:25so let's save it and see how it looks.
4:56:29So the first thing we noticed is that we lost our background color.
4:56:33Now the only reason we had a background color was because if we didn't have
4:56:37position fixed,
4:56:38this header takes space on the page and the page happens to be white.
4:56:42So the header appears to be white, but now that it's floating above the page,
4:56:47we'll notice that it's actually transparent. So to add our background color,
4:56:51again, we just need to set the background color property.
4:56:56So let's set this to white, save it,
4:57:00and now we're back to where we were.
4:57:02Now if we go to our project and we start scrolling,
4:57:06you'll notice that our header sticks to the top while we scroll.
4:57:08So that's exactly what we want. Next we have this problem where the header is
4:57:13covering our content. So remember,
4:57:16the way to fix this is to add padding to the top of our body.
4:57:20We're going to go into our code and we're going to go into this file
4:57:25general css. That's where we have styles for the body.
4:57:31And then we're going to set a padding dash top of maybe
4:57:3660 pixels. Let's take a look. Okay, so that looks pretty good.
4:57:41Let's compare to our design.
4:57:43If I scroll to the top here and just compare it a little bit,
4:57:46I noticed that our videos are appearing at a higher position than our design,
4:57:51so we're going to push them down a little more.
4:57:54Let's set this to maybe 80 pixels.
4:57:57Save it so we push them down even more.
4:58:01And I think that looks close enough to our design.
4:58:06So the last thing I noticed is that we're missing the border at the bottom of
4:58:10our header here. So let's go ahead and add that.
4:58:16So let's go back into our header css.
4:58:18We're going to add a border to the bottom so we can actually add borders to one
4:58:22side at a time. We don't have to add borders to all four sides. To do that,
4:58:26we're going to set these same border properties we had before.
4:58:30So we're going to start with border width,
4:58:32but in the middle we're going to tell it a direction. So we can tell it bottom.
4:58:38We're going to also tell it top left. So we have all these four directions.
4:58:43In this case, we want a border at the bottom,
4:58:45and we're going to set it to one pixels.
4:58:48And the other border properties are the same.
4:58:50So border style is going to be solid,
4:58:54but we only want it at the bottom,
4:58:56so it's going to be border bottom style. And then lastly, border dash,
4:59:01bottom dash color. And let's set it to gray.
4:59:05And I'm going to pick a lighter shade of gray.
4:59:08So maybe right there, save it.
4:59:12Let's compare it to our design.
4:59:14It looks like it's a little darker than what we have.
4:59:17I'm just going to adjust the color to match our design.
4:59:20And it's not going to be perfect, but remember,
4:59:22you can always inspect the design and then make it perfect. Okay,
4:59:27so now if I compare it, I think that looks pretty close enough.
4:59:31And now if I scroll, you notice that the header is sticking to the top,
4:59:35which is exactly what we want. Next,
4:59:38we're going to how to create this sidebar.
4:59:41So the sidebar is just like the header, it sticks while we scroll.
4:59:45So this is another example of position fixed.
4:59:49We're going to go back to our practice file, and I'll resize my pages here
4:59:55and I'm going to open position dot html we were practicing with.
5:00:00And this time below the header, we're going to create our sidebar.
5:00:04So let's create a diviv, and this diviv is going to be our sidebar.
5:00:10Now for the sidebar, let's set a style.
5:00:14And then inside we're going to set a background color of green this time.
5:00:18So a background dash, color green,
5:00:21and a text color of white so that it's easier to distinguish between all of
5:00:26these different elements. Next,
5:00:29we're going to stick the sidebar to our browser.
5:00:32So remember to do that we're going to use position fixed.
5:00:35So position fixed and save it.
5:00:40And now when we scroll,
5:00:41you'll notice that the sidebar is sticking to our browser while we scroll.
5:00:47Lastly, we're going to put the sidebar in the right place using top left,
5:00:51right height or width. So let's look at our sidebar. In our design,
5:00:56we notice that the sidebar is sticking to the bottom, so we want bottom zero.
5:01:01It's sticking to the left, so we want left zero.
5:01:04And for the top it's actually not reaching to the top of the page,
5:01:07otherwise it would cover up the header.
5:01:10So there's quite a difference between the sidebar here and the top of the page.
5:01:14So let's go back into our practice file and learn how to position that.
5:01:21Let's start with left.
5:01:22We want the sidebar to stick to the left side of the page.
5:01:25So we're going to say zero pixels from the left, save it.
5:01:29Now we want our sidebar to stick to the bottom of the page.
5:01:32So we're going to say bottom and zero pixels from the bottom.
5:01:38And finally, we want it to be at the top of the page, but not cover the header.
5:01:42So let's set the top to 50 pixels.
5:01:47So it's going to meet right where the header ends.
5:01:50We're going to set this to 50 pixels and then save.
5:01:55And finally, we want to set the width of the sidebar. So for the sidebar,
5:02:00we don't want it to resize with the page,
5:02:03so that's why we're going to use the width property instead of something like,
5:02:08right.
5:02:10So let's go back into our practice file and we're going to set the width to
5:02:14maybe 72 pixels, save it.
5:02:18And that looks like what we have in our design, so that's perfect.
5:02:23Now we have the same problem again where our fixed element is covering our
5:02:27content. So let's scroll back to the top.
5:02:32We're going to add padding to our body so that these elements are not covered by
5:02:36the sidebar. So in this case, we want extra space on the left side.
5:02:41So I'm going to set padding dash left,
5:02:45and let's set it to 80 pixels,
5:02:48which is more than the sidebars with 72 pixels.
5:02:52So now if we save this,
5:02:55we have 80 pixels of padding on the left side of the page,
5:02:58and now the sidebar is not covering our content.
5:03:02So that's how we position a sidebar.
5:03:07Now we're going to create the sidebar in our project here.
5:03:12So let's go back into YouTube dot html,
5:03:15going to resize my page so that we can see it better.
5:03:19And we're going to create a sidebar on the left.
5:03:22So let's go into our code and we're going to put the sidebar right below our
5:03:27header. So let's scroll down below our header here,
5:03:31and I'm going to create a diviv. This is going to be our sidebar,
5:03:35and I'm going to give a class of sidebar
5:03:40so that we can target it in our css. Now for these styles,
5:03:45let's actually put them in a separate CSS file. So if we scroll up to the top,
5:03:50we have CSS files for our header for our videos,
5:03:54so it makes sense to split up our sidebar styles into their own file so that we
5:03:58organize our code better.
5:04:00We're going to go into our code editor and then go into the styles folder here.
5:04:05And we're going to create a new file and we're going to call it sidebar
5:04:10css. And I'm going to put it on the side like this.
5:04:18Next we're going to load sidebar CSS into our html.
5:04:22So we just have to do one of these again, I'm just going to copy them.
5:04:27And then instead of video css, we're going to load sidebar css.
5:04:33And now we're ready to style this sidebar that we just created.
5:04:40So let's target the sidebar class
5:04:44and we're going to set position to fixed to make it stick.
5:04:50Now for the sidebar, we want it to be zero pixels from the left of our browser.
5:04:54So let's set left to zero.
5:04:57And we also want it to stick to the bottom of our browser, so bottom to zero.
5:05:04And finally, we want it to stretch to the top,
5:05:06but we don't want it to cover our header.
5:05:08So let's set the top to whatever the height of our header is.
5:05:13So if we go to header dot css, which is here,
5:05:18we can check the height of our header is 55 pixels.
5:05:21So we're going to go into our sidebar here and we're going to get the sidebar to
5:05:25end 50 pixels or 55 pixels from the top.
5:05:29So let's set that to 55 pixels, save it.
5:05:34So with position fix,
5:05:36the element is no longer on the page anymore and it doesn't have a background
5:05:40color, so we just have to set that. Again, background dash color.
5:05:45I'm going to set it to white, save it.
5:05:49And now we have our sidebar.
5:05:51The final thing is to make our sidebar as wide as our design,
5:05:54which is right here.
5:05:57So we're going to set the width to 72 pixels,
5:06:02save it, and let's compare it to our design.
5:06:06And I think it's hard to see because it's white here and it's a little bit gray
5:06:09here, but I think that's close enough.
5:06:15Now the next problem we have is that the sidebar is covering our content.
5:06:19So as we learn,
5:06:20we're going to add some padding to the left to push our content over.
5:06:24So let's go into our general styles. So general css,
5:06:29and we're going to style the body.
5:06:32We're going to add padding to the left of our body,
5:06:36and let's add padding of 80 pixels again.
5:06:41And now our sidebar is no longer covering our content because we added a bunch
5:06:45of padding to the left of our page.
5:06:49So that's how we use position fixed to create elements that stick to the page
5:06:53while we scroll, like our header and our sidebar
5:06:59for now,
5:06:59here's some exercises that you can do on your own to get a better understanding
5:07:03of CSS position.
5:07:17Now we're going to learn another position property that we can use.
5:07:21Let's go into our position, practice file. And the same in our code editor.
5:07:26We're going to open up position, HTML and then close all of these files.
5:07:31So I'm going to resize it so that we can see it better.
5:07:37So this time we're going to learn position absolute.
5:07:40Let's do an example to see how it works.
5:07:43So let's scroll down and we're going to create a diviv below our sidebar to
5:07:48practice position. Absolute.
5:07:50Let's create a diviv and then let's call this absolute.
5:07:55And now we're going to set some styles on the diviv. So style equals,
5:08:00and then inside here we're going to set position with a value of
5:08:06absolute.
5:08:08And we're also going to set a background color of red so that it's easier to
5:08:11see. So background color of red, and then the text color is going to be white.
5:08:17So color of white, save it.
5:08:21And now we have our position, absolute element. So before we continue,
5:08:25make sure we scroll all the way up to the top of our page.
5:08:30Now, position absolute also takes the same values as position fixed.
5:08:35So top, left, bottom and right as well as width and height,
5:08:39but they behave a little bit differently. So first we're going to set left.
5:08:43So let's set the left property to zero and let's save it.
5:08:49And now the left side of our element is zero pixels from the left side of our
5:08:53page. So this works the same way as position fixed,
5:08:57and we set left to 10 pixels.
5:09:01Now there will be 10 pixels between our element and the left side of our page.
5:09:07Now let's try setting top. So I'm going to set the top to 10 pixels,
5:09:12save it and make sure you scroll all the way up.
5:09:16So you'll notice that our element is now 10 pixels from the top of the page.
5:09:21So mostly these properties work the same as position fixed,
5:09:24but with one key difference. For position fixed,
5:09:28the elements are placed in the browser window while for position absolute the
5:09:33elements are placed on the page.
5:09:35Now what I mean by this is that when we scroll the browser window or
5:09:40just this visible part is not moving, only the page is moving up and down.
5:09:46So for position fixed, we're going to put these elements on the browser window,
5:09:50which doesn't move when we scroll. So if we scroll up to the header,
5:09:54if I say top and 10 pixels, this puts a header,
5:09:5810 pixels from the top of the browser window, not from the top of the page,
5:10:02which is constantly moving up and down. But for position absolute,
5:10:07if we scroll down to there,
5:10:10we're putting it 10 pixels from the top of the page,
5:10:13which scrolls up and down when we move.
5:10:17So that's a key difference between the two position fixed positions,
5:10:20the element in the browser,
5:10:22which doesn't move when we scroll and position absolute positions,
5:10:26the element on the page which does move when we scroll.
5:10:31So let's go back up and reset this to zero so that we
5:10:36have our proper header again and do some more practice with position absolute.
5:10:41So for example,
5:10:42if I wanted to put this absolute element in the top right corner here on our
5:10:47page, we can do something like right,
5:10:52and we'll put it 10 pixels from the right and then top.
5:10:57We can put it maybe 60 pixels from the top, it was 60,
5:11:03save it, and we scroll all the way up,
5:11:06and that's how we place an element on a precise location on our page like this.
5:11:13And because it's on our page when we scroll,
5:11:16the page will move up and this absolute element will move up with the page.
5:11:20Now, one thing that's weird is that this element is appearing above our header,
5:11:25and that's because this element was written in our code below our header.
5:11:31So generally,
5:11:31an element that is written below is going to appear in front of elements that
5:11:36are written above it. Now,
5:11:38we can actually override this if we scroll up by adding another property
5:11:42called Z dash index.
5:11:47So Z index determines which elements appear in front and which elements appear
5:11:51behind. So the default Z index is zero.
5:11:55This is the same thing as if you didn't have this at all,
5:11:59but an element with a higher Z index will appear in front of elements with a
5:12:03lower Z index.
5:12:05So if we set the Z index of the header to one,
5:12:09it's going to have a higher Z index than the absolute element which has a
5:12:13default Z index of zero. If we save it,
5:12:17now the header will appear in front. Just as an example,
5:12:22if we scroll down and we set the Z dash index
5:12:27of this absolute element and we set it to two,
5:12:30now it's going to appear in front again because our Z index here is greater than
5:12:35our Z index here.
5:12:37So usually we set this to something like 100 so that we can have a lot of
5:12:41elements in between. If our page has a lot of layers,
5:12:46and usually if we don't care about the Z index,
5:12:48we can just remove it and have a default of zero.
5:12:54Now that we learn position absolute, where do we use this?
5:12:57The truth is we don't use it like this very much.
5:13:00This is not a common situation that we run into when we're creating websites.
5:13:04However, position absolute has another key feature that makes it really,
5:13:08really useful to demonstrate.
5:13:11We're going to take this element and we're going to make a copy of it and we're
5:13:15going to put it inside the sidebar. So right here.
5:13:20So we're going to put a position absolute inside a position fixed.
5:13:26So now when we save,
5:13:28you'll notice that this element is not being placed on the page anymore.
5:13:33What it's actually doing is placing this element relative to this position fixed
5:13:37element. So now right of 10 pixels is actually 10 pixels.
5:13:42From the right of the fixed element,
5:13:44which is the sidebar top of 60 pixels is 60 pixels from the top
5:13:49of the sidebar, not from the top of the page.
5:13:52So whenever a position absolute is inside a position fixed element,
5:13:57it's going to be placed a relative to this position fixed element.
5:14:02So this is the most important feature of position absolute.
5:14:06So let me show you why it's so useful.
5:14:08Let's say that we wanted a close button on the top right of our sidebar.
5:14:12We want to be able to close our sidebar if we want to.
5:14:15I'm going to change this to an X so that it's kind of like a close button.
5:14:21And then to put it in the top right of our sidebar,
5:14:24we just have to set the top to zero and the right to zero.
5:14:29So if I save that, now this element is in the top right,
5:14:33and that's because if position absolute is inside position fixed,
5:14:37top zero means zero pixels from the top of the position, fixed element,
5:14:42right? Zero means zero pixels from the right of the position fixed element.
5:14:49So this is how we attach elements to the corners or the sides of other
5:14:53elements. If we look at our final project,
5:14:57we can see that going on in our videos here.
5:14:59We have the video time in the corner of our thumbnail here we have the
5:15:04notification count in the top right corner of this icon.
5:15:09And using position absolute,
5:15:11it allows us to put elements in the corner like this.
5:15:16So there's one last thing we need to learn here.
5:15:18We have a position absolute inside a position, fixed element.
5:15:22That's why we can put it in the corner.
5:15:24But notice that this is still a position fixed element and it sticks to the
5:15:27page. But in our final project, these videos are not sticking to the page,
5:15:32they're scrolling with the page,
5:15:34and we're still able to put stuff in the corners. So how do we achieve this?
5:15:41And to do this,
5:15:42we're going to learn another value for the position property called position
5:15:46relative. We're going to scroll down to our two divs at the bottom.
5:15:52And for our second diviv,
5:15:53we're going to set the position to relative
5:15:59and save it. Now, if we go back to our page,
5:16:02we'll notice that nothing actually changed.
5:16:05And that's how position relative works.
5:16:07It's still displays the element as normal,
5:16:11except if we put position absolute in here,
5:16:14it will position it relative to this element instead of relative to the page.
5:16:19So let's go through an example to see what I mean. If I scroll up here,
5:16:23let's copy this absolute element.
5:16:25Let's copy it and then paste it inside this position,
5:16:30relative element, save it,
5:16:35and then reformatted a bit, press tab. And if we save this,
5:16:39you'll notice that we get the same effect as when we put position absolute
5:16:43imposition.
5:16:44Fixed right of 10 pixels now means 10
5:16:49pixels from the right of the position, relative element, not 10 pixels.
5:16:53From the right of the page,
5:16:55top of 60 pixels means 60 pixels from the top of the position,
5:17:00relative element, not 60 pixels from the top of the page.
5:17:06So two things are happening here.
5:17:07When position absolute is inside position relative,
5:17:11this will be positioned on the element, not on the page.
5:17:15So that's what we just talked about.
5:17:17The second thing that happens here is that position relative causes this whole
5:17:21element to display normally. So that's what we get in our final project.
5:17:26Notice that these videos are displayed. Normally they scroll with the page,
5:17:30but we have something in the bottom right corner.
5:17:33So these are all positioned relative.
5:17:36And then to put something in the bottom right corner,
5:17:39we're going to put a position absolute inside.
5:17:43So let's actually go through an example here. So we have our position,
5:17:47relative element. We have position absolute inside.
5:17:50I'm going to put this in the bottom right corner, just like our design.
5:17:54So let's change this to five minutes
5:18:00and pretend this is our final project.
5:18:02Let's change the background color to black.
5:18:07And now we're going to put this on the bottom right corner.
5:18:10So let's get rid of this first.
5:18:14And we're going to put this 10 pixels from the bottom of the
5:18:19position, relative element. So we're going to say bottom 10 pixels.
5:18:24And we're also going to put it 10 pixels from the right of this position,
5:18:27relative element. So right of 10 pixels.
5:18:33And that's how we position this in the corner.
5:18:36And because this is positioned relative, if we scroll the page,
5:18:39it acts like normal content.
5:18:43So now that we learned the technique of position,
5:18:45absolute inside position relative,
5:18:48we're going to apply that to our project and create the video time as well as
5:18:53the notification number here.
5:18:56So let's go back to our project and we're going to add video times
5:19:00first. So let's go to YouTube dot html.
5:19:05And we're also going to open the video CSS file. I'm going to put it
5:19:10down here because we're working with styles for the videos.
5:19:15So first we're going to find our thumbnail, which is right here.
5:19:19And now remember to put something in the corner.
5:19:21We're going to need position absolute inside a position relative element.
5:19:27So if we look at our code, what could be our position, relative element?
5:19:32Well, it can't really be the image element because image elements aren't really
5:19:35containers. We can't put something inside it.
5:19:38So what we could use is this thumbnail, row element.
5:19:42This could be our relative element.
5:19:44And then the video time will be the absolute element inside of here.
5:19:50So first, let's create our video time. We're going to create a diviv,
5:19:56and let's give it a class of video dash time.
5:20:01And then inside we're going to put a video time.
5:20:03So let's go to our final project and we're going to copy one of these. So 14,
5:20:0720. Then inside I'm going to put 1420.
5:20:13Let's save it and go back. So right now is just a normal diviv.
5:20:19Let's go to our CSS file. And we're going to style this.
5:20:22Let's scroll all the way down,
5:20:26and we're going to target video dash time class.
5:20:31And let's set the background dash color to black and the text color
5:20:37to white. So just like our final project.
5:20:41So now we're ready to position it properly. We're going to need position,
5:20:45absolute inside position relative. So first,
5:20:48let's set the position relative on here.
5:20:51We're going to scroll up to thumbnail row, which is right here.
5:20:56We're going to set position relative.
5:21:02And remember, position relative doesn't really change anything.
5:21:05Everything appears normal. That's one of the benefits of it.
5:21:09And if we scroll down, we're going to change this to position
5:21:16absolute and now top, bottom, left,
5:21:20and will be placed inside our position relative element.
5:21:24So if we save it, and now if we want to put it in the bottom right corner,
5:21:29we just have to say bottom zero pixels from the bottom,
5:21:34and also zero pixels from the right.
5:21:39So let's set the position from the bottom to maybe 10 pixels. Save it,
5:21:45and let's set the position from the right side to maybe five pixels. Save it.
5:21:50Okay, let's change this to maybe eight pixels.
5:21:54So I think that looks pretty good,
5:21:57and if we compare it to our final design, it's in the right position.
5:22:01So that's how we put an element in the corner of another element.
5:22:05We need a position absolute inside a position relative.
5:22:10So finally, let's style this one by one until it matches our design.
5:22:15I'm actually going to move this to the bottom here so that it's easier to
5:22:18compare.
5:22:23The first thing we're going to do is to change the font.
5:22:26So we're going to set font dash family to
5:22:30reto aerial,
5:22:33like the rest of our fonts.
5:22:38And next, let's change the font size.
5:22:41Let's change it to font dash size of maybe 12 pixels.
5:22:47That looks pretty good. Let's make it a little bit bolder.
5:22:51Let's change the font dash weight to 500.
5:22:56And remember a font weight of 400 is normal,
5:22:59700 is bold and 500 is semi bold. Let's save that.
5:23:05That looks pretty good. And next we need spacing on the inside of this element.
5:23:10So that's padding.
5:23:12So let's add some padding on the left of
5:23:17maybe two pixels.
5:23:19And same for padding on the right two pixels and then padding on
5:23:24the top of four pixels,
5:23:26and then padding on the bottom of four pixels. Save.
5:23:31That looks pretty good. Let's add some more padding on the left and right.
5:23:36Changes to four pixels and four pixels. Okay,
5:23:40so I'm pretty happy with that. Next,
5:23:42we're going to make our corner rounded kind of like this.
5:23:47So to do that we're going to use border radius, chain Z,
5:23:51border dash radius to two pixels, save it.
5:23:58And I think that looks pretty close to our design. And there we go.
5:24:03We created the video time in the bottom right corner of the thumbnail.
5:24:08Now to give you guys a bit more practice,
5:24:09I'm going to get you to add the video time to all of our other videos.
5:24:13So inside our html,
5:24:15you're going to add this video time to the next video here and all the
5:24:20videos in the H T M L.
5:24:23So take some time to complete that and then we'll continue the lesson.
5:24:30So now that we have the video time for all of our videos,
5:24:33we're going to run into another problem. If we start scrolling up on this page,
5:24:38you'll notice that the thumbnails appear above our header.
5:24:41But another thing is that the other content like this text and the channel image
5:24:46will appear below our header. So what exactly is going on?
5:24:50So we mentioned this briefly in the practice file. If an element like this
5:24:55video preview is written below another element like the header up
5:24:59here, the element that is written below will appear in front.
5:25:05That's what's happening here. We have a header,
5:25:08and then below that we have the thumbnail,
5:25:10which is going to appear on top of the header. However,
5:25:14what I didn't mention is that this rule doesn't apply to position static or
5:25:19these elements with the default position. Position,
5:25:22static will always appear at the back.
5:25:24So that's why you see that these always appear at the back as soon as we set it
5:25:28to something that's not position static like position relative.
5:25:32The rules of which element was written first start to apply.
5:25:36So in this case, because if we scroll up,
5:25:39the thumbnail row is positioned relative and it's written below the header in
5:25:44the code. It's going to appear on top of the header,
5:25:47which is what we see and remember, to fix this,
5:25:50we need to set a property of Z index. Let's go into our header c s s
5:25:55file. We're going to open this file here.
5:26:00And then inside the header,
5:26:01we need to set a Z dash index to make the
5:26:05header appear above the thumbnails.
5:26:08So let's set a Z index of 100 so that we have room if we want to put stuff
5:26:13between these two. Now, if I save it,
5:26:18the header has a Z index of 100.
5:26:21The thumbnail row has a default Z index of zero. 100 is greater than zero.
5:26:26That means the header will appear on top of all the thumbnails.
5:26:30So if we go back and we start scrolling, you'll notice that we're now all good.
5:26:37The last thing we'll learn is how to create this notification count in the top
5:26:41right corner of this icon. So let's go into our html,
5:26:45so YouTube dot html and find where the code for this notification is.
5:26:50So if we scroll down to the header and then scroll down to the right side,
5:26:55that's this code here, notification icons.
5:26:58So I'm going to resize my windows so we can see it properly here.
5:27:03And now we want to put a notification number in the top right corner.
5:27:07So remember, like we've been doing,
5:27:08we need a position absolute inside a position relative.
5:27:15So if we look at our html, what could we use as our position relative element?
5:27:20So it can't really be this image because we can't put stuff inside an image
5:27:24element. So one option is this diviv up here,
5:27:28but a better option is actually to wrap this image element
5:27:33inside a diviv. So we're going to create a div here,
5:27:37and we're going to put this image inside this diviv.
5:27:42So remember that the diviv just creates a box around whatever's inside.
5:27:47So it's not going to change the appearance of this image. However,
5:27:51by creating this diviv, we can now make this position relative,
5:27:55and that's going to help us add stuff to the top right corner.
5:28:01So let's give this diviv a class so that we can style it later.
5:28:05Let's call it notifications. Dash,
5:28:08icon dash container.
5:28:12And inside we're going to have our notification count.
5:28:15Let's create a diviv for our notification count. Let's give it a count of three.
5:28:22Alexa at this class equals notifications with an
5:28:26S dash count.
5:28:30And now we're ready to style this and put it in the corner.
5:28:33So let's go into header dot css.
5:28:36I'm going to put it on the side so we can see it more clearly.
5:28:42And now to start off,
5:28:43let's scroll down to where we have our notification code.
5:28:47So let's scroll all the way down and we'll find it right here.
5:28:53And now remember, we're going to have position relative,
5:28:56and then inside we're going to have position absolute.
5:28:59So let's style the dot notifications
5:29:04dash icon dash container
5:29:08and set this to position relative.
5:29:13And then the notifications count, dashed count,
5:29:18and we'll set to position absolute.
5:29:27So we want to put this in the top right corner.
5:29:30So let's set the top to zero pixels and the right
5:29:35to zero pixels and to see it better. Let's set a background color.
5:29:39So background dash color of red,
5:29:44and a text color of white.
5:29:48And now if we save that, it's sort of in the top right corner,
5:29:52but it's a little bit too big.
5:29:53So we're going to style it just like our design here.
5:29:58So I'm going to move this up here actually so that we have a better reference.
5:30:06And now we're going to style it by first changing the font.
5:30:09Let's change the font dash family to
5:30:15reto aerial,
5:30:18like before Next, we'll change the font size.
5:30:22So this is pretty small. Let's change the font dash size to maybe 10 pixels.
5:30:28Okay, should be a little bit bigger. Let's set it to 12 pixels.
5:30:32That looks pretty good. And let's add some spacing on the inside of the element.
5:30:37Let's add some padding left of maybe four pixels,
5:30:42padding right of four pixels,
5:30:45padding top of two,
5:30:48and padding dash bottom of two pixels.
5:30:54And remember to make this a circle, we're going to give it round corners.
5:30:58So let's set the border dash radius to 10 pixels.
5:31:06So it looks like we're a little bit too tall here.
5:31:08We're going to stretch out the sides by adding more padding to the sides.
5:31:12Let's change this to maybe five pixels left and right.
5:31:17Save it. Okay, maybe six pixels left and right.
5:31:21Save it. Okay, so that looks like a pretty good circle. Next,
5:31:25we'll change the background color to something that looks like that.
5:31:29So I'm just going to pick something like this, maybe
5:31:33save. Perfect.
5:31:36And I'm going to change the font size down just a little bit more because this
5:31:40is pretty small. Let's change this to 11, save that,
5:31:45and let's change the padding left and the right because
5:31:50it'll, it's a little bit long on the horizontal side.
5:31:55And now we have a circle again.
5:31:57So notice that we put this element in the top right corner using these two
5:32:01properties, but it's not enough. We actually want it out even more.
5:32:05So we're already at the top edge of our position. Relative container,
5:32:10how can we go even higher? So the trick here is to use negative numbers.
5:32:16So now this will be positioned beyond the top edge of our container.
5:32:21So if I save it here,
5:32:23this is now five pixels beyond the top edge of our relative container.
5:32:28Same thing with right, if we set it to negative five pixels here,
5:32:32it's now five pixels beyond the right edge. So I'm just going to adjust the
5:32:36valleys here so that it matches our design.
5:32:40So let's set the top to something like negative two. Okay,
5:32:44so I think that looks pretty close to our design and I'm pretty happy with it.
5:32:48So in this lesson, we learned CSS position,
5:32:51which is one of the most important skills in css.
5:32:55It allows us to create elements like this header and sidebar that stick to the
5:32:59page while we scroll, and it allows us to add elements on top of other elements.
5:33:04For example,
5:33:04the video time on top of the thumbnail and the notification count on top of the
5:33:08notification icon. So with that,
5:33:12we learned all the major skills that we need in H T M L and CSS to complete
5:33:17our project. In the last lesson,
5:33:19we're going to create all the other features that we're missing,
5:33:23including the sidebar, the tooltip,
5:33:26and making our current project look like the final design. Here
5:33:52in this lesson, we're going to finish our final project.
5:33:55We're going to create the sidebar,
5:33:56we'll resize our video so that it looks like our design here. And lastly,
5:34:00we're going to create the tooltip. When we hover over these icons,
5:34:05we'll start off with the sidebar.
5:34:07So I'm going to rearrange my windows here so that it's a little easier to copy.
5:34:11So I put the design on the left.
5:34:14I'm going to put our current sidebar on the right here,
5:34:17and I'll resize my windows so we can see it better.
5:34:22And now we're ready to begin.
5:34:24So let's open our code editor and we're going to open YouTube dot
5:34:28html. And then we're going to scroll down to the sidebar code,
5:34:33which is right here.
5:34:36So let's take a look at the design of this sidebar. Our reference design.
5:34:41If I hover over it, you can see that is just a bunch of boxes.
5:34:45And inside each box we have an icon, some text,
5:34:49and they're centered horizontally and vertically.
5:34:52So we're going to start step by step. We're first going to create the box.
5:34:58Let's go into our code. And instead of this text,
5:35:02we're going to create six boxes.
5:35:05We're going to use a diviv to create each box.
5:35:09Let's give this diviv a class of sidebar
5:35:14dash link.
5:35:17And I'm going to copy and paste this six times
5:35:214, 5, 6. Next,
5:35:24we're going to style these so that they have the same size as these boxes.
5:35:29I'm going to go into our css.
5:35:33So let's go into sidebar css.
5:35:37I'm going to put this on the right side here so we can see it better.
5:35:41And now we're ready to style these.
5:35:44Let's target the class sidebar link.
5:35:49And for each of these, let's give it a background color so that we can see them.
5:35:54And let's set it to light gray.
5:35:59And we'll also give them a height because without any content in the divs,
5:36:03they have a height of zero.
5:36:05So let's set a height of 50 pixels and
5:36:10let's save it and let's see how that looks. Okay,
5:36:14so it's hard to tell the difference between them.
5:36:17So let's add some spacing at the bottom of each div so that we can differentiate
5:36:21them.
5:36:22I'm going to add margin dash bottom of one
5:36:27pixel, save it. Okay, so from this,
5:36:31it looks like our boxes are a little bit too short,
5:36:35so we're going to make them taller. Let's try a height of maybe 75.
5:36:42Okay, so I think that's pretty close.
5:36:44We can get rid of this margin at the bottom and actually increase this to
5:36:4976 so that we compensate for the margin that we removed.
5:36:54And next, when we look at the design, these boxes are usually white,
5:36:58but when we hover over them, they turn gray.
5:37:01So instead of having this background color gray here,
5:37:06we're just going to set the background color when we hover over this.
5:37:10So let's set a hover style dot sidebar,
5:37:15dash link hover.
5:37:19And when we hover, we're going to set the background color to
5:37:25light and gray. Let's save it.
5:37:30And now when we hover, it's light gray,
5:37:32but our design is actually a lot lighter than that.
5:37:35So I'm going to change the color here.
5:37:38I'm going to pick something a little lighter than this, maybe something here.
5:37:44Save that and check it out. And yep,
5:37:48I think that looks pretty close.
5:37:50Next we're going to add the content in each of these boxes.
5:37:54So first we actually need to download all of these icons.
5:37:58So we did the before for these icons. And just a reminder to do that,
5:38:01we're going to right click and inspect.
5:38:05So you'll see that this actually covers up the sidebar.
5:38:09What we can do is click these three dots in the top right and then we can move
5:38:13the dev tools to another side of the webpage.
5:38:16So I'm going to move it to the right side here.
5:38:19And now we can see the full sidebar.
5:38:22Then we're going to click this in the top left,
5:38:25click one of these icons and you'll get the URL to download them here.
5:38:30So hover over this URL and then click this.
5:38:35And now we can control S,
5:38:37and I'll save it in the folder that contains my code in the icons
5:38:42folder.
5:38:43So make sure you do this for all six of these icons and I'll see you back after
5:38:47you're done. All right,
5:38:52so once we've downloaded all of the icons from the sidebar here,
5:38:56we're going to add them to our html.
5:38:58So let's go into each of these and add our icons
5:39:03inside this first diviv, we're going to add an image element,
5:39:07and we're going to set a source attribute.
5:39:10And we're going to load the icon icons slash
5:39:15home dot svg because this is the home icon.
5:39:19And let's save it. And now we have our icon. It's a little bit too big,
5:39:23but we're going to resize it after. For now,
5:39:26let's copy this and add the icons for all of these other
5:39:31boxes. So we're going to add for this one,
5:39:34we're going to add the explore icon. So explore svg,
5:39:40and for this one is the subscriptions. And then for this one,
5:39:45it's originals.
5:39:48And then for this one it's YouTube dash music.
5:39:53And the last one is library. So I'm going to go down here,
5:39:58change this to library. Perfect.
5:40:03Next, we're going to make these icons smaller.
5:40:06So usually we would set a class on these images so
5:40:11that we can style them with css.
5:40:14But for this lesson I'm going to show you another wave that we can target these
5:40:17images.
5:40:18So let's go into our sidebar styles and we're going to learn a new CSS
5:40:22technique.
5:40:24So we already learned that this text before the brackets here,
5:40:27this tells a computer which elements we're styling. In this case,
5:40:31the dot means we're targeting a class and we're styling all elements that have
5:40:36the class sidebar link, which are these elements.
5:40:40So this bit of text is called a CSS selector,
5:40:44and there's actually a lot of different selectors that we can use in css.
5:40:49So we already learned the class name selector,
5:40:51which looks like this and starts with a dot.
5:40:54And we learned the element name selector,
5:40:57which just starts with the elements name.
5:41:00Another thing we can do with CSS is to combine selectors together. For example,
5:41:05if we said dot sidebar,
5:41:08dash link and then wrote a comma down here,
5:41:12we can add another selector.
5:41:15So let's say we also want to target header.
5:41:19So now all of the styles inside the brackets will target all elements with the
5:41:23sidebar link class and all elements with the header class.
5:41:29This is an example of a more advanced selector.
5:41:33Another selector we can use is instead of a comma,
5:41:36we can use a space and then type another selector
5:41:41like image. So when we have a space between these two,
5:41:47this means that we're targeting all images inside all sidebar links.
5:41:52So we're going to target these images inside sidebar links only.
5:41:56We're not going to target all images on the page.
5:42:00So let's style these images and make them smaller. We're going to set a height
5:42:07and let's try 24 pixels. Let's see how that looks. Okay,
5:42:12so I think that looks pretty close to what we have in the design. Next,
5:42:16we're going to center these horizontally and vertically.
5:42:19And finally add the text.
5:42:22So to center something vertically is actually challenging In css,
5:42:26the best way to do it is to use a flexbox.
5:42:29If we look into our code editor and open our Flexbox example,
5:42:33so flexbox html,
5:42:35and then we right click and open with live server,
5:42:39we have a bunch of examples of using flexbox.
5:42:42In the last example here we're doing vertical alignment.
5:42:46If we scroll down to our example in our html,
5:42:52we have this property called align items center.
5:42:57So this vertically centers our content here.
5:43:00We also have an example of horizontal centering.
5:43:04If we scroll up to that example, which is this one,
5:43:08we have the property justified content center.
5:43:12So using justified content center and Align item center,
5:43:15we can put it both horizontally and vertically centered.
5:43:19So let's go back into our project and use a flex box to center these.
5:43:24We're going to go back to our CSS and we're going to make each of
5:43:29these sidebar links a flex box.
5:43:32So let's set the display property to flex,
5:43:37and we're going to set justify dash content
5:43:43to center. So this will center horizontally, let's save it.
5:43:47And now they're horizontally centered.
5:43:49And then align dash items center for
5:43:54vertical center. So this is coming along great.
5:43:59Next we're going to add the text. So underneath each of these,
5:44:04let's add a diviv. So for this first one,
5:44:09it's going to be called home. And I'm just going to copy these
5:44:14and replace it with each of these texts. So explore
5:44:19this one is subscriptions,
5:44:26originals,
5:44:31YouTube,
5:44:32music and library.
5:44:39Now let's start styling this text a little bit.
5:44:42I'm going to use this advanced CSS selector. Again,
5:44:46we're going to go into the sidebar link class,
5:44:49and then we're going to target all the divs inside sidebar link.
5:44:53So we're going to target divs.
5:44:55So this is not going to target all divs on the page,
5:44:58only the divs inside sidebar link.
5:45:02Let's change the font here first.
5:45:04So we'll set the font dash family to reto
5:45:10aerial like before, and let's make the text smaller. Next,
5:45:15we're going to set the font dash size to maybe 12 pixels.
5:45:22Okay, maybe 10 pixels, save it.
5:45:25And now the next problem we have is that our elements are appearing beside each
5:45:29other, not on top of each other. So why is this happening?
5:45:34So remember that we can set a property called flex dash direction
5:45:40colon row.
5:45:43If we go into our flex box example, Flexbox html,
5:45:48let we scroll all the way to the top. This was the first thing that we learned.
5:45:52Display flex and flex direction row.
5:45:56So if we open this in our browser and we scroll to the first example,
5:46:02flex direction row causes our elements to be displayed horizontally.
5:46:07So notice that these two are divs, but they're displayed next to each other,
5:46:10not on top of each other. Now to change this, we're actually going to go back
5:46:17and we're going to use flex direction column.
5:46:21So where flex direction row displays them horizontally,
5:46:24flex direction column displays our elements vertically. So if we save it
5:46:31now it's displaying our elements one on top of each other.
5:46:35So this is another direction that we can use for our flex boxes. By default,
5:46:40flex boxes are flex direction row, so they will appear horizontally,
5:46:44but we can set flex direction column when we don't want that behavior.
5:46:49So for flex direction column, these two properties are actually switched.
5:46:54So if I remove both of them first and I first use
5:46:58justify dash content colon center,
5:47:04Save it.
5:47:05Justify content now affects the vertical direction instead of the
5:47:10horizontal direction with flex direction row.
5:47:13And if I use align dash items,
5:47:16center align items now affects the horizontal direction.
5:47:21So for flex direction column, these two are reversed.
5:47:25It's a little bit confusing, but the more they use flex box,
5:47:28the more you'll get used to it. All right, so we're almost done.
5:47:32We're just going to add some space between these two to add some space.
5:47:36Let's add some margin bottom to the image.
5:47:39So margin dash bottom,
5:47:43maybe four pixels, save it.
5:47:48Okay, I think that looks pretty close to me,
5:47:52and it looks like our elements are a little bit too tall.
5:47:57So I'm actually going to scroll up and adjust the height here to maybe 74.
5:48:03Save it. And okay, that looks pretty good.
5:48:08So one last thing with the sidebar is that I notice in our design it kind of
5:48:13covers the header while ours does not. So to change that,
5:48:17remember we can change the Z dash index to be
5:48:21higher than whatever the header is. So if we go into our header styles,
5:48:26header dot css, notice that the Z index is 100.
5:48:31So we're going to change our Z index to bigger than that.
5:48:34So 200 save it.
5:48:37And now our sidebar is covering our header. Next,
5:48:40I want to move all of these icons down a little bit more so that it's aligned.
5:48:46So to do that, I'm going to add some padding or spacing to the top of this.
5:48:52So we're going to add some padding
5:48:55dash top of maybe five pixels. Let's see how that looks.
5:49:00Okay, so that looks perfect.
5:49:03And actually one last thing is I'm going to make the cursor a pointer when we
5:49:07hover her over it.
5:49:09So let's go into our sidebar link and we'll set the cursor
5:49:14to a pointer, save it.
5:49:18And now this looks good to go.
5:49:22Next we're going to resize these videos to match the design.
5:49:27So I'm going to move this back into one window
5:49:31and I'm going to resize this so that we have three videos in each row and now
5:49:36we can properly switch back and forth to compare.
5:49:39So as I switch back and forth between these,
5:49:42you can see that there's a size difference between the videos.
5:49:45So we're going to fix that. So for our website,
5:49:49I notice that the left edge here can be moved to the right a little more.
5:49:54So if we look at our design, it's more to the right,
5:49:58go back to our current project design more to the right.
5:50:02So to move this to the right, we're actually using padding.
5:50:06So we had to increase our padding on the left side of the page.
5:50:10Let's go back into our code and we're going to find the padding,
5:50:14which is in general css.
5:50:17So remember we added padding to the left side of the body that's pushing these
5:50:22elements over here.
5:50:24So let's increase the padding to maybe
5:50:2996,
5:50:30save it and let's compare it to the design. All right,
5:50:35so I think that looks perfect.
5:50:37And we also have padding on the right while our website does not.
5:50:42So let's actually also add padding dash right
5:50:48of 24 pixels.
5:50:51Now if we save that there and compare it to our design,
5:50:55our videos are now exactly the right size. So that looks great to me.
5:51:01The next thing we're going to tweak is if we look at our design,
5:51:04the background color here is a light gray while our background color is white.
5:51:09So we're going to make the background color of our entire page a shade of gray
5:51:13like this.
5:51:15So let's go into our CSS and in our body styles in
5:51:20general css,
5:51:21let's set the background dash color to
5:51:26light gray.
5:51:28And I'm going to hover over this and select a lighter color,
5:51:33maybe 2 48. Save it.
5:51:37And let's compare it to our design.
5:51:40So this is our website and this is the design. I think that looks pretty close.
5:51:47And the last few details I want to adjust is this part.
5:51:51So if I look at my design and I compare it to my website,
5:51:55it looks like our channel pictures are a little bit too big.
5:51:58So if I look at the design here, so we could make them a little smaller.
5:52:02So let's go into our code and we're going to go into the video
5:52:07styles. Let's open video css.
5:52:13We're going to find the profile picture. So if I scroll down,
5:52:17so this image here is the channel picture. It has a class of profile picture.
5:52:23We're going to decrease the width to maybe 36,
5:52:27save it compared to our design.
5:52:31So I think that's the right size. Next,
5:52:33I'm going to adjust some of these spacing here. So if I compare to the design,
5:52:39there's actually a little bit less spacing here, then our website.
5:52:43So I'm going to decrease that. So for our website,
5:52:46we're adding some margin bottom to the thumbnail.
5:52:51The thumbnail row.
5:52:55I'm going to decrease this to maybe eight pixels. Let's see how that looks.
5:53:00And then compared to our design, so I'm pretty happy with that.
5:53:04And finally, I'm going to adjust the spacing between these two.
5:53:09So for our video title, if we go into our code
5:53:14And scroll up here, it has a margin bottom of 12.
5:53:18I'm going to decrease it a little bit to 10,
5:53:22save it and compare it. Okay,
5:53:26so I think that's good enough. It doesn't have to be perfect,
5:53:29it's a little bit off,
5:53:31but I think that our current website here looks really good to me. Anyways,
5:53:37the final thing we're going to do in this lesson is we're going to create these
5:53:40tooltip when we hover over these icons.
5:53:43So before we learn how to make these appear, when we hover over,
5:53:47let's just create these tooltip and place them below each icon.
5:53:52So let's go into our website and we're going to add some tooltip to these.
5:53:57So we'll go into our code and I'm going to resize the windows so we can see
5:54:01better. So we're going to go into our html,
5:54:05we're going to scroll up to our header.
5:54:08And let's first find the search icon here,
5:54:12which is in the middle section, and then the search button here.
5:54:17So to create the tooltip,
5:54:18we're actually going to use the position property that we learned earlier.
5:54:22So remember that we use position to put this number in the top right corner.
5:54:27We're going to use position to put a tool tip below the element right here.
5:54:32So let's first add a tool tip inside the button.
5:54:36So we're going to create a diviv
5:54:40and let's call this search, let's save it.
5:54:44And now that's our tool tip.
5:54:46And now we need to position this tool tip relative to our button.
5:54:49So remember from the previous lesson,
5:54:51we need position absolute inside position relative.
5:54:56So let's first add those position properties.
5:54:59So we're going to go into the header CSS file because we're working with the
5:55:03header. So let's open that up
5:55:07and I'm going to move it to the right side here.
5:55:11And now we're going to scroll down until we find our search button.
5:55:15So I'm going to scroll, scroll, scroll, and it's right here.
5:55:19So we're going to set this search button, which is our container to position
5:55:25Colon relative save it,
5:55:30and nothing happens because that's how position relative works.
5:55:34And now the magic comes when we set this to position absolute.
5:55:38So we're actually going to set a class here so that we can target it a little
5:55:42easier. We're going to call this tool tip
5:55:47and we're going to use that advanced CSS selector we learned earlier.
5:55:51So we're going to target search dash button first,
5:55:56and then we're going to type a space.
5:55:59And then we're going to type tool tip.
5:56:05So this means that we're targeting the dot tool tip class,
5:56:08not on the entire page, but only inside the search button.
5:56:13So now we don't have to come up with a unique name for this specific tool tip.
5:56:18So if we save it, we're going to set this to position
5:56:22absolute. And now we have an absolute element inside a relative element.
5:56:28So if we save that, now we can start positioning this.
5:56:32Let's give a background color so that we can see it better.
5:56:36So background dash color of maybe gray.
5:56:41And let's add the text color to white. So color colon white.
5:56:48Let's give it some padding on the inside,
5:56:51some padding top of maybe four pixels,
5:56:57padding dash bottom,
5:56:59four pixels padding left four pixels
5:57:03and padding right for pixels, save it.
5:57:08And let's actually increase the padding on the left and right to eight.
5:57:13See how that looks. Okay, I'm pretty happy with that.
5:57:17And now I'm going to set some rounded corners so we don't have to exactly match
5:57:22our design. We can make it close enough so we can set some rounded corners,
5:57:27border dash radius of four pixels.
5:57:32It's a little too much for me set to two pixels.
5:57:36And I'm also going to make the font a little bit smaller.
5:57:39So I'm going to set the font dash size to 12 pixels.
5:57:45Save it. I think that looks pretty good to me.
5:57:49Next we're going to use the property's top,
5:57:51bottom left and right to position this within the relative element.
5:57:57So for our cases, let's start with bottom zero.
5:58:02So this means that the bottom of our tooltip will be at the bottom of the
5:58:05button. If I save this, that's exactly what we have.
5:58:09Now to move it even further to the bottom, we're going to use negative pixels.
5:58:13So let's set negative 20. Save it.
5:58:18Okay, so I think that's looking pretty good.
5:58:20Let's increase it a little bit more, increase it to 30 pixels, save it.
5:58:26Okay, so I'm happy with that position.
5:58:28Now we're going to learn how to make this tooltip appear when we hover over this
5:58:33button.
5:58:35So the trick here is we're going to set the opacity or how see through
5:58:40the tooltip is to zero, which is completely invisible.
5:58:45And then when we hover over this button, we're going to set the opacity to one.
5:58:50So how do we actually change this when we hover over the button?
5:58:54So we're actually going to use a combination of this advanced CSS
5:58:59and pseudo classes which are like hover.
5:59:05So first we're going to target the search dash button class,
5:59:10and we're going to add a pseudo class colon hover.
5:59:14And now we're going to type another selector. We're going to type dot tool tip,
5:59:22and we're going to set some styles here.
5:59:24So what this does is that we're going to target the tool tips only when we're
5:59:29hovering over this search button.
5:59:31So up here notice that we're targeting the tool tips inside the search button,
5:59:36regardless of whether if we're hovering over it or not. In this case,
5:59:40we're going to target all tooltip inside the search button,
5:59:43but only when we hover over it. So when we hover over it,
5:59:47we can set the tooltip opacity
5:59:52To one.
5:59:53So this is a neat trick that you can do to create tooltip like this.
5:59:58So if we go into our webpage when I'm not hovering over the button,
6:00:03you'll notice that the opacity is zero. But when I'm hovering over the button,
6:00:07this tooltip will have an opacity of one which looks like this.
6:00:13And now because we're changing the opacity, we can set a transition.
6:00:17So let's set a transition. We need to tell that what to transition,
6:00:22which is opacity and how long the transition will take.
6:00:27Let's say 0.15 seconds, save it.
6:00:32And when we hover over this, now we get our tooltip.
6:00:37Now the last thing I want to show you is if we hover over the actual tooltip,
6:00:41you'll notice that because it's inside this button,
6:00:45when we hover over the tooltip with our mouse,
6:00:48it also counts as hovering over the button.
6:00:53We can fix this by disabling hovers on the tooltip and only allow hovers on the
6:00:58button. So to disable the hover on this tooltip,
6:01:03we're going to use another CSS property called pointer
6:01:08Events none.
6:01:13This means that when our mouse hovers over the tooltip,
6:01:15it's not going to do anything.
6:01:18So that's how we create these tooltip on our webpage.
6:01:21Let's do the same thing with this voice search button.
6:01:24We're going to go into our HTML and we're just going to copy this tool tip
6:01:30and just move it down here into the voice search button, just like that.
6:01:35And let's change the text to search with your voice,
6:01:41Save it. And now remember to position this,
6:01:45we're going to have position absolute inside position relative.
6:01:50So let's turn this to position relative first.
6:01:53I'm actually going to make it easier for us.
6:01:55I'm going to first target the search dash button,
6:02:00and I'm going to put this inside here.
6:02:04And I'm also going to target with a comma,
6:02:07the voice search button. So this one,
6:02:12now this code is going to apply to both of these,
6:02:15so it saves us a little bit of coding. Same thing down here.
6:02:19We're going to apply all of these styles to the search button,
6:02:21tooltip and comma,
6:02:25the voice search button dot tooltip.
6:02:29So using these advanced CSS selectors can save us a lot of code.
6:02:34We're going to scroll down all the way here to and use a comma
6:02:40and set this to the voice
6:02:44search button. So make sure you don't have a comma at the end there. Save it.
6:02:50Now when I hover over this,
6:02:52you'll notice that it doesn't really work because the text is sort of wrapping
6:02:56around.
6:02:57I'm going to fix that by setting this property white space,
6:03:03no wrap, save it.
6:03:06And this will prevent the text from wrapping around.
6:03:10Now the last thing I want to do is do center this tool tip with the button.
6:03:15To do this,
6:03:16we can use a flex box because remember with flex box we can center horizontally
6:03:20and vertically. In this case, we want to center horizontally.
6:03:24So we're going to make we're scroll up and we're going to make these buttons
6:03:28flex boxes.
6:03:29So let's set display flex. By default,
6:03:34it's flex direction row.
6:03:36So justify content is going to center horizontally.
6:03:41So justify content center, save it.
6:03:45So now if we hover over our buttons,
6:03:47you'll notice that the tooltip are aligned horizontally,
6:03:51but you also notice that our icons are not vertically aligned very well. So
6:03:56let's go back into our code and we're going to align them in the center with
6:04:01align dash items center, save it.
6:04:06So that didn't seem to work, but if we scroll down into our code,
6:04:12so way earlier in the course,
6:04:13we actually added margin top to the search icon as well as
6:04:18the voice search icon.
6:04:20So we just need to get rid of this margin top and let the flex box handle the
6:04:25vertical centering. So if we save that,
6:04:28now the icons are perfectly centered and if we hover over,
6:04:32we have a centered tooltip.
6:04:35The tooltips for these icons are the same thing,
6:04:38except if we scroll down, we currently just have an image.
6:04:43We're going to need a container like this that's going to act as our position
6:04:47relative container. So let's create a diviv
6:04:51that's going to contain our upload icon.
6:04:54Let's cut this and then paste it in here.
6:04:58Let's give a class of upload dash
6:05:02icon dash container.
6:05:07And then inside this container we're going to have our tool tip.
6:05:10So let's copy this and then paste it in here.
6:05:15And let's call this, let's look at our design create.
6:05:23So our tooltip is going to have the text create.
6:05:29Next.
6:05:30We're going to change this to position relative and position absolute inside.
6:05:34So let's scroll up.
6:05:36And we already have this code here that sets to position relative and centers
6:05:41everything. And we're going to add to this the upload icon,
6:05:45container dot upload, dash icon, dash container,
6:05:51save it.
6:05:53And then we need a position absolute on this tool tip. So again,
6:05:57we can just add it in here so we don't have to copy all this code again with a
6:06:02comma dot upload dash icon, dash container,
6:06:09tooltip save it.
6:06:13And lastly, we're going to scroll down and add it to here.
6:06:17So that appears when we hover.
6:06:21So let's set dot upload dash icon,
6:06:24container and dot. When we hover over it,
6:06:29the tooltip is going to have opacity of one.
6:06:34Let's save it and hover over. All right, so that looks pretty good,
6:06:39but let's change the font here.
6:06:42So let's go into this code which sets our tooltip
6:06:46styles,
6:06:47and let's set the font dash family to reto
6:06:53aerial. Like before. If we save it and we hover over it,
6:06:58now we have a nice looking tooltip on our icons.
6:07:01So that's how we create these tooltip.
6:07:03When we hover over these icons and these buttons,
6:07:06creating tooltip for these two other icons are the same thing,
6:07:09and I'm going to leave it as an exercise for you to do on your own.
6:07:14So in this lesson, we finished up our final project.
6:07:16We created the sidebar resize, our videos created the tooltip,
6:07:20and now if we compare it to our design,
6:07:22our project looks pretty much perfect and ready to go.
6:07:29So here's some exercises you can try on your own to wrap up everything that we
6:07:33learned in this course.
6:07:49In the previous lesson, we finished our final project, which is this.
6:07:53In this lesson I'm going to show you some more useful features of c s s.
6:07:57We're going to start off with responsive design.
6:08:00If we go to our reference design here,
6:08:03and I'm going to zoom out a little bit so you can see if I make the page
6:08:08smaller, you'll notice that we now have two videos in each row.
6:08:12If I make the page bigger, we have four videos.
6:08:16So notice that at every screen size,
6:08:19the layout adjusts so that the website looks good.
6:08:22So that's the idea of responsive design,
6:08:24making the website look as good as possible on every screen size. Now,
6:08:29if we make this a little bit more narrow and we switch to our current project,
6:08:35you'll notice that all of our content is sort of squished.
6:08:38So we're going to learn how to implement responsive design into our project.
6:08:43Let's go into our code and we're going to open the file
6:08:48called video dot css, which controls the video grid styles.
6:08:53Let's open that.
6:08:56And now inside we're going to adjust our video grid so that when the screen
6:09:01size is small, we only have two videos per row. And when the screen size is big,
6:09:06we have more than three videos per row.
6:09:10So let's go into our code and we're going to scroll down and find the video
6:09:14grid styles. So notice that for these styles,
6:09:17we set three columns of equal size.
6:09:22Now to make this responsive, we're going to use something called a media query.
6:09:27So to create a media query, we're going to type at media,
6:09:32and then we're going to give it a screen size.
6:09:34So we're going to say max dash with colon,
6:09:40maybe 600 pixels.
6:09:43And then we're going to type open squiggly bracket,
6:09:46and then close quickly bracket.
6:09:48So the way this works is that we're going to have a bunch of CSS in here,
6:09:52and this CSS will only activate if the screen size is 600
6:09:57pixels or less. That's what this max width means. So for example,
6:10:02let's target the video grid class inside here
6:10:08and let's set the grid dash template,
6:10:12dash columns to one fr, one Fr.
6:10:16That means from a screen size of zero to 600 pixels,
6:10:21we're only going to have two columns.
6:10:23So we save it and we start to resize.
6:10:27Notice that once we get to 600 pixels, we now have two columns in our grid.
6:10:33Now to figure out how big our screen size is,
6:10:36we can right click and inspect,
6:10:40and I'm going to click these three dots and move it back down to the bottom like
6:10:43this. And now when we resize,
6:10:46you should see the screen size at the top right of the page.
6:10:52So it's really up to us to pick a screen size where we're going to go from three
6:10:56columns to two.
6:10:57So I think even at this screen size,
6:11:02maybe at seven 50, it looks a little bit squished.
6:11:06So I'm going to increase this to 750 pixels.
6:11:12Let's save it. And now once we get to seven 50,
6:11:16we're going to have two videos in each row and it's not going to be as squished
6:11:20anymore.
6:11:22So that's the basics of how to create responsive designs using these media
6:11:26queries. Let's do another example.
6:11:30We're going to have four videos per row when our screen size gets really big.
6:11:34So let's set another at media. At media.
6:11:39And for this time we're going to set a minimum width of
6:11:44maybe a thousand pixels.
6:11:48And then inside here we're going to copy this and paste it here.
6:11:53We're going to change grid template columns to four columns. So one f fr,
6:11:57one fr.
6:11:59Now if we save it and we resize the browser to 1000
6:12:04pixels, it's going to become four videos per row.
6:12:08Now you might need to press command or control minus to make the webpage smaller
6:12:13to see this,
6:12:14but basically the way this works is that once the screen size hits a thousand
6:12:18pixels, this will activate and we have four columns instead of three.
6:12:26So the last example is that we can actually combine these two,
6:12:29so we can set at media and we can set the
6:12:34min dash width to 7 51 pixels
6:12:39and the max dash width to
6:12:449 99 pixels.
6:12:47So this will cover the space between these two measurements here.
6:12:51So let's actually put this in the middle.
6:12:56So from zero pixels to a max of seven 50, we're going to have these styles.
6:13:01And then from 7 51 to 9 99,
6:13:04we're going to have these styles. So we're going to set this to three columns,
6:13:10and then from a thousand and up, we're going to have four columns.
6:13:15So this is the basics of how to create a responsive design like this.
6:13:20You just have to write a lot of media queries. All right,
6:13:25so that's the basics of responsive design.
6:13:28We're going to go back to our webpages.
6:13:31I'm just going to zoom back in and we'll learn the next feature of css.
6:13:36So let's go to our project here and open our code.
6:13:40And let's scroll down to this dial the video time.
6:13:45So the next feature we're going to learn is sort of like CSS shortcuts.
6:13:49So instead of setting padding on the left,
6:13:51right top and bottom separately like this,
6:13:54we can actually use a property called padding,
6:13:58which is sort of like a shortcut for all four of these.
6:14:02So if we set the padding to four pixels,
6:14:05this is the same as setting padding on all four sides.
6:14:08So we don't need this code anymore.
6:14:11So it makes it a little cleaner for our code to use these shorthand properties.
6:14:16So another thing we can do with this is we can have two values,
6:14:19let's say four pixels and 10 pixels. Save it.
6:14:24So this first value is going to be the vertical padding. So padding top,
6:14:28padding bottom, and the second value is horizontal padding, padding,
6:14:32left and padding right?
6:14:36The next thing we can do is have four directions.
6:14:39So 20 pixels and 30 pixels. Let's see how that looks.
6:14:45So this is how we can set padding in all four directions using one line of css.
6:14:51This first value is the padding top second value is the padding, right?
6:14:55Third value is padding bottom, and fourth is padding left.
6:14:59You can think of this as first you start from the top and then you work your way
6:15:04clockwise around. So that's what these four values mean.
6:15:09Another shorthand property is margin,
6:15:13and this is a substitute for margin, left margin,
6:15:18right margin top and margin bottom.
6:15:21So this margin shorthand property works the same way as padding.
6:15:25If we have one value, this is all four directions. If we have two values,
6:15:30this first value is the vertical direction. Second is a horizontal direction,
6:15:36and if we have four values of margin,
6:15:38this is the top right bottom and left.
6:15:43So these are just examples.
6:15:45We're going to move our styles back to four pixels of padding on every side,
6:15:51and we're going to look at one final shorthand property, which is the border.
6:15:56So let's go into our header CSS file and find these styles for this search
6:16:00bar. So we're going to scroll up until we find our search bar,
6:16:05which is here. And notice for our borders, we always set a width,
6:16:09a border style, and a border color.
6:16:13So instead of setting these styles separately,
6:16:15we can use a shorthand called border. So for border,
6:16:20we can set one pixel. This is going to be the width.
6:16:23We can set another value of solid. This is going to be the border style,
6:16:28and we can set the third value of color.
6:16:34And so this one line of CSS can replace these three.
6:16:38If we delete that, then we save.
6:16:41You can see that everything still appears normally,
6:16:43and that's because this border property is a shorthand for the other three.
6:16:49The next thing we're going to learn is called inheritance.
6:16:52Let's go to our YouTube dot HTML file and we're going to scroll
6:16:57down to the video grid, which is right here.
6:17:03So inheritance means that for certain CSS properties,
6:17:06if we set the property on the outer element,
6:17:09it will get passed down to the inner elements like these. Let's do an example.
6:17:14We're going to set a property on the video grid.
6:17:18We're going to go to the video CSS file,
6:17:21and we're going to find the video grid styles, which is all of these.
6:17:26We're going to set it on this style here.
6:17:28So we're going to set it for all screen sizes. Let's add a style.
6:17:33We're going to make the text underlined. To do that,
6:17:37we're going to use this property text dash decoration
6:17:43underline. Now if I save this,
6:17:47you'll see that even though I set text decoration, underline on the video grid,
6:17:53all of the paragraphs inside have been underlined.
6:17:57So this is called inheritance.
6:17:59If we set this style on the outer element, which is the video grid,
6:18:04it gets passed down to all the inner elements,
6:18:07which are the paragraphs here. However,
6:18:12not all properties are affected by inheritance. For example,
6:18:16if we go back to the video CSS file,
6:18:19and we're going to add a border this time.
6:18:22So let's add a border and we're going to make it two pixels wide,
6:18:28a solid color, and let's just make it red.
6:18:33And if I save that, you'll see that the video grid has a border around it,
6:18:39but this border is not passed down to the inner elements here.
6:18:44So inheritance mostly just works with text properties like text decoration,
6:18:48underlying color, font, weight, and font family.
6:18:53It doesn't affect things like border padding or margin,
6:18:58so that's what inheritance means. Certain properties,
6:19:01mostly text properties will get passed down from the outer element to the
6:19:05inner elements. Now, this can save us some code. For example,
6:19:10if we go back to the video dot CSS file and we scroll down,
6:19:16you can see that the video time uses a style called font family reto aerial.
6:19:20So this changes the font of our text,
6:19:24and instead of putting it on the video time,
6:19:26we're just going to put it on the entire grid,
6:19:29and then it will get inherited by all the elements inside,
6:19:32which includes the video time.
6:19:34So I can scroll up to the video grid and I can set the font
6:19:39dash family up here so I can set Roto
6:19:45Ariel. If I save this,
6:19:49you'll see that nothing changed with the video time because this style is
6:19:54being inherited from the video grid. Now,
6:19:58we can actually take this even further. If we go to the YouTube dot html file,
6:20:03you'll see that this video grid is actually contained within the entire
6:20:09body. So all of our elements on the page are contained within the body.
6:20:15So if we want to set a sort of default textile on the entire page,
6:20:20we can actually just put everything in the body and that'll save us a lot of
6:20:24code. So let's actually go back to the video CSS file.
6:20:29We're going to remove this and save it.
6:20:35You'll see that the video time now goes back to the default font,
6:20:38which is times New Roman,
6:20:40and these paragraphs actually use a different set of styles.
6:20:45So if we go to the file called General css,
6:20:50we set the font family for these paragraphs using just a p
6:20:54selector here. If we remove this
6:20:59and save it,
6:21:00you'll see that it goes back to the default font of times new enrollment.
6:21:04Now we're going to set this style on the body so that it gets inherited
6:21:09to the entire webpage inside.
6:21:12So we'll go to General css and we're going to set
6:21:17font dash family to Reto
6:21:23aerial to take advantage of inheritance. If I save this,
6:21:29you'll see that all of the fonts went back to robo,
6:21:32and that's because we set it on the body and all of our elements are inside the
6:21:37body. So this style gets inherited to the inner elements.
6:21:42So using this,
6:21:43we can save more code if we go to our sidebar and our header.
6:21:48If I go to the sidebar first,
6:21:51you'll notice that we're also using font family roboto aerial.
6:21:54So we can simply get rid of this because this style is being inherited from the
6:21:59body.
6:22:02And if I go to the header dot css,
6:22:06you'll notice that we're also using Fond family Reto AO in a bunch of places.
6:22:11So we can just get rid of all of these and take advantage of
6:22:16inheritance to save us some code.
6:22:25All right, so there's one last thing about inheritance that I want to show you.
6:22:29We're going to go back to our video CSS file, which is right here.
6:22:35And now let's get rid of these properties that we are using to test with
6:22:41Save it. This time we're going to go to General css.
6:22:45We're going to set another style in the body,
6:22:48and we're going to set the property color red to
6:22:52change the text color of the entire page to red. If I save it,
6:22:58you'll see that a lot of the text is now red,
6:23:00like these sidebar and the video titles,
6:23:02but not all of the text has been turned to red. So why is this happening?
6:23:08We mentioned this in one of our earlier lessons.
6:23:10CSS follows a sort of priority when you set the same style on the same
6:23:15element.
6:23:16So for these video author and video stats paragraphs,
6:23:21first we set a color of red from the body, so that gets inherited down.
6:23:25But then if we look at the CSS for these in video CSS and
6:23:30go into the video author, which is right here,
6:23:35you can see that we also set the color to this gray color. So the
6:23:40color is being set both by these styles and by these styles that are inherited
6:23:45from the body. However,
6:23:47this style is more specific because it only targets the video author and the
6:23:51video stats while the style in the body targets the entire page.
6:23:57So that's why this style has higher priority than the inherited style.
6:24:03This is called CSS specificity. Generally,
6:24:06if we set these same style on the same elements like we have in this situation,
6:24:11the style that is more specific, for example,
6:24:14this style targets only the video author and video stats,
6:24:17the style that is more specific has higher priority,
6:24:20and it will override a more general style, which is what we have here.
6:24:26So using inheritance and specificity,
6:24:29we're able to both set a default style on the outer element,
6:24:33and then if we need to,
6:24:34we can go to the inner element and then override that style.
6:24:38Now in this course,
6:24:39we didn't go through a lot of detail about specificity and its rules,
6:24:43and that's because we were mostly focused on building out this project,
6:24:47but you can find all the details about specificity in the HTML and CSS reference
6:24:51below the video. For now,
6:24:54let's go back into general CSS and let's get rid of this
6:24:59practice style that we were using, and now we're ready to move on.
6:25:06Next, we're going to learn about semantic elements.
6:25:08If we go back to our YouTube dot html file,
6:25:14so we learned about a bunch of elements like the diviv, the image,
6:25:17and the button. There's also another set of elements called semantic elements.
6:25:22So for example, header is a semantic element,
6:25:26and another example is the nav element.
6:25:30So these elements actually work the same way as a diviv,
6:25:33except they have a special meaning to screen readers, search engines,
6:25:37and any other kind of device or robot that is reading our webpage.
6:25:42So to have the structure of our webpage recognized correctly in a screen reader,
6:25:46we should actually replace some of our divs with semantic elements.
6:25:51So for example, we can remove this diviv and replace it with a header.
6:25:56So it works the same way as a diviv, except it's for the robots.
6:26:01So let's scroll down. We're going to turn this into a header,
6:26:07and then we can also scroll down to our sidebar,
6:26:10and we're going to change this to a nav element because
6:26:15the sidebar on the real YouTube should help us navigate through the website.
6:26:22Another semantic element we can use is called main.
6:26:26So this should contain the main contents of your website,
6:26:30which for us is this part.
6:26:33We're going to move everything inside here To the main
6:26:38element. So I think it's this
6:26:43I might be missing. Okay, so move all of that into Maine,
6:26:48and let's scroll back up. Now,
6:26:52inside Maine, we're going to have a video grid,
6:26:56but we might also have other things below the video grid.
6:27:00So the video grid is known as a section of our main content.
6:27:05Let's save that and scroll all the way down to the end of our video grid
6:27:10and remove this with section.
6:27:15So that's how Symantec elements work. They're just the same as divs,
6:27:19except they give a special meaning and structure to our page for search engines
6:27:23and screen readers. Now,
6:27:26the final thing I want to show you in this course is how to write comments.
6:27:31So comments are pieces of code that the computer ignores,
6:27:34but you can read yourself to remind you of information or to tell yourself
6:27:39what's going on in the code. So for example,
6:27:42if we scroll up to our header,
6:27:44maybe I forgot how we created this tool tip.
6:27:48So we can actually add a comment in the code that reminds us.
6:27:52So let's add a comment here.
6:27:54We're going to type less than exclamation dash, dash,
6:27:58and we're going to end the comment with dash greater than like this.
6:28:02So this is a comment. If I save the webpage,
6:28:07you'll see that this text appears nowhere on the webpage,
6:28:10and that's because the computer basically ignores comments.
6:28:15So we can add comments like put position,
6:28:19absolute inside position relative to remind us that we
6:28:24need to put a position absolute inside a position relative to create this
6:28:29tool tip in css. We also have comments.
6:28:33So for example, if we go here,
6:28:36we can write a comment by writing slash star and ending it with
6:28:41star slash. Now, everything in between here is a comment.
6:28:45So we can say this style below will be
6:28:51inherited. So as you can see comments,
6:28:54add extra information into our code without affecting our webpage.
6:28:59So it's a really useful tool when you're working on a team to document how your
6:29:03code works. And now, for everything in this course, if you ever forget,
6:29:08remember that you can always Google it. For example, if I go to Google,
6:29:12I can search things like CSS rounded corners,
6:29:17and it will give us the border radius property.
6:29:23I can also search for something like css, text Don't wrap,
6:29:29and it will give us the white space property and the valley white
6:29:34space, no wrap. So this is how you learn from here.
6:29:39You take the techniques that we learn in this course,
6:29:41such as the [inaudible] technique, using grid, flexbox and position,
6:29:47and then you try to recreate things that you see on the internet.
6:29:50And if you ever forget, you can Google and get the exact code that you need.
6:29:57So now that we learned all the major skills that we need to build complex
6:30:00websites like YouTube,
6:30:02here are some challenge exercises that you can do to create other popular
6:30:06websites on your own.
6:30:13Thanks so much for taking this course with me.
6:30:15I hope you now realize that creating websites is not as intimidating as it
6:30:19seems.
6:30:20We just need to create each part of the website step by step using the major
6:30:24features of HTML and CSS that we learned in this course. Now,
6:30:28where do we go from here as the next step?
6:30:31I recommend learning the JavaScript programming language.
6:30:35JavaScript is what makes our webpage interactive. For example,
6:30:38if we click something, type some text or drag something onto the page,
6:30:43JavaScript is what updates our page.
6:30:46So it's a natural progression from HTML and css. Now,
6:30:49if you want to learn JavaScript,
6:30:51I have a full JavaScript course for absolute beginners that you can find by
6:30:55clicking on this link. Again, thanks so much. For watching.
6:30:58My name is Simon from Super simple.dev.
6:31:01I want to make a tech career possible for anyone. If you have any comments,
6:31:04questions, or feedback, please leave them down in the comments section below.
6:31:08If you want to support this channel and you want more courses like this,
6:31:11please click the subscribe button. Thanks so much, and I'll see you in the next.

About this transcript

This page contains the full transcript of YouTube transcript (G3e-cpL7ofc) , generated from the public captions YouTube serves with the video. The transcript has 59,768 words across 5,704 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.