Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,240 --> 00:00:04,470
Welcome to the complete HTML
and CSS course. In this course,
2
00:00:04,471 --> 00:00:07,950
we're going to learn how to build
websites from a beginner to a professional
3
00:00:07,951 --> 00:00:11,850
level, and by the end of this course,
we're going to build youtube.com.
4
00:00:12,750 --> 00:00:15,930
Now you don't need any previous
coding or technical experience.
5
00:00:16,170 --> 00:00:20,170
This course is designed to be your first
step to becoming a software engineer.
6
00:00:20,520 --> 00:00:24,990
We're going to start from the very basics
of HTML and CSS and build our way up
7
00:00:24,991 --> 00:00:27,360
step by step. And along the way,
8
00:00:27,361 --> 00:00:30,930
we're going to learn all the major skills
that we need to create websites at a
9
00:00:30,940 --> 00:00:32,040
professional level.
10
00:00:32,790 --> 00:00:36,690
You can find the different sections of
this course below the video here and
11
00:00:36,691 --> 00:00:38,700
here. And after each section,
12
00:00:38,790 --> 00:00:42,360
I'm going to give you a bunch of
exercises that you can do on your own to
13
00:00:42,850 --> 00:00:45,330
practice the skills that
we learned in total.
14
00:00:45,331 --> 00:00:49,860
This course is going to have
more than 100 exercises. Lastly,
15
00:00:49,861 --> 00:00:51,390
you don't have to worry
about taking notes.
16
00:00:51,600 --> 00:00:56,190
I created an HTML and CSS reference that
will list everything that we learned in
17
00:00:56,191 --> 00:00:58,860
this course. With that
said, let's get started.
18
00:01:04,709 --> 00:01:06,450
I am going to be doing
this course on a Mac,
19
00:01:06,720 --> 00:01:10,440
but everything is the same for a
Windows computer. Before we begin,
20
00:01:10,441 --> 00:01:14,850
we're going to need two pieces of
software, a web browser and a code editor.
21
00:01:15,690 --> 00:01:18,180
A web browser lets us view
websites on the internet.
22
00:01:18,600 --> 00:01:21,960
It's also going to let us view the
website that we create in this course.
23
00:01:22,440 --> 00:01:25,650
The most popular web browser for
web development is Google Chrome.
24
00:01:26,280 --> 00:01:30,000
A code editor helps us
write our HTML and CSS code.
25
00:01:30,570 --> 00:01:34,080
The most popular code editor for
web development is called VS.
26
00:01:34,081 --> 00:01:37,950
Code or Visual Studio Code.
To install both of these,
27
00:01:37,980 --> 00:01:41,870
we can go to google.com
and then search for Google
28
00:01:42,570 --> 00:01:47,310
Chrome or for VS code and then
29
00:01:47,320 --> 00:01:52,080
open the first result and follow the
instructions to download and install.
30
00:01:53,460 --> 00:01:56,130
Once we have those two installed,
we can start the course.
31
00:01:57,300 --> 00:02:01,500
We'll begin by learning what is html.
HTML stands for
32
00:02:01,501 --> 00:02:05,700
hypertext markup language. You don't
have to worry about what that means.
33
00:02:05,970 --> 00:02:09,120
Just know that it's a tool
that we use to create websites.
34
00:02:09,570 --> 00:02:14,400
Every website from YouTube to Google
to Amazon uses a combination of
35
00:02:14,870 --> 00:02:18,960
HTML and CSS to create everything
that we see on the website.
36
00:02:20,130 --> 00:02:22,920
The easiest way to
understand what HTML is,
37
00:02:23,220 --> 00:02:26,400
is that we're simply giving
instructions to a computer.
38
00:02:27,180 --> 00:02:30,600
We're telling the computer
what to do step by step.
39
00:02:31,140 --> 00:02:34,770
The computer will then follow our
instructions to create our website.
40
00:02:35,670 --> 00:02:39,510
So I find the best way to learn HTML
is to jump in and give it a try.
41
00:02:39,810 --> 00:02:43,590
So we're going to create our first
HTML file and our first website.
42
00:02:44,400 --> 00:02:47,490
Let's go to our computer and we're
going to create a new folder.
43
00:02:48,570 --> 00:02:51,780
So this folder is going to contain
all the code for this course.
44
00:02:52,500 --> 00:02:57,240
I'm going to call this
HTML dash CSS dash course.
45
00:02:59,590 --> 00:03:02,200
Next, we're going to open this
folder in our code editor.
46
00:03:02,710 --> 00:03:04,720
So I'm going to open vs code,
47
00:03:08,350 --> 00:03:10,690
and then I'm going to click file open
48
00:03:12,220 --> 00:03:15,460
and I'm going to find the folder that
we just created, which is this one.
49
00:03:19,690 --> 00:03:20,680
Now once that's open,
50
00:03:20,710 --> 00:03:24,040
you should see the folder name at
the top here and on the side here.
51
00:03:25,780 --> 00:03:28,150
Now let's create our first HTML file.
52
00:03:28,870 --> 00:03:33,610
We're going to click this icon to create
a new file and we're going to call this
53
00:03:33,620 --> 00:03:36,490
file website dot html.
54
00:03:38,230 --> 00:03:41,440
So we have to make sure that
this file ends with html.
55
00:03:41,920 --> 00:03:46,480
This tells a computer that this file
contains HTML code rather than just text.
56
00:03:47,290 --> 00:03:51,730
So as I mentioned, HTML is basically some
instructions you give to the computer.
57
00:03:52,450 --> 00:03:54,250
We're going to learn
our first instruction,
58
00:03:54,730 --> 00:03:59,500
which is less than button greater
59
00:03:59,501 --> 00:04:03,880
than, and we also need to type
lesson slash button greater than,
60
00:04:04,360 --> 00:04:06,850
but our code editor might
auto complete this for us.
61
00:04:07,930 --> 00:04:12,880
So this is an instruction to create
a button and inside the button we're
62
00:04:12,881 --> 00:04:14,740
going to have the text. Hello.
63
00:04:16,329 --> 00:04:19,809
Now let's save our file and we're going
to learn how to open this in our web
64
00:04:19,810 --> 00:04:22,600
browser. To open our new website,
65
00:04:22,601 --> 00:04:25,510
we're going to go to the
folder that contains our code.
66
00:04:26,320 --> 00:04:28,420
We're going to find our HTML file.
67
00:04:29,020 --> 00:04:32,410
We're going to right click
open with Google Chrome.
68
00:04:35,800 --> 00:04:39,970
And now you can see that we have our first
website that has a button with a text
69
00:04:39,980 --> 00:04:43,150
Hello inside. And if we
look back to our code,
70
00:04:43,990 --> 00:04:48,550
that's exactly the instruction that we
gave to the computer. So as you can see,
71
00:04:48,551 --> 00:04:52,420
HTML is pretty straightforward. It's
pretty easy to understand what's going on.
72
00:04:53,470 --> 00:04:57,940
Now let's try another instruction. We
can give to the computer on a new line.
73
00:04:57,941 --> 00:05:01,480
We're going to type less
than P, greater than,
74
00:05:02,110 --> 00:05:05,020
and we also need to type less
than slash p greater than,
75
00:05:05,380 --> 00:05:07,720
and our code editor might
auto complete this for us too.
76
00:05:08,770 --> 00:05:13,180
So the P here stands for a paragraph.
This is a paragraph of text.
77
00:05:13,840 --> 00:05:15,940
Inside our paragraph,
we can put some text.
78
00:05:16,120 --> 00:05:19,840
So let's put the text paragraph of text.
79
00:05:20,680 --> 00:05:25,480
Now we can save this and to get our
website to reflect our most current code,
80
00:05:25,840 --> 00:05:30,520
we're going to go to our webpage and
refresh. And now you can see that our
81
00:05:30,521 --> 00:05:34,930
website is displaying a paragraph of text
just like we told the computer to do.
82
00:05:35,950 --> 00:05:38,230
So that's basically how HTML works.
83
00:05:38,590 --> 00:05:43,300
The computer reads our HTML
code from top to bottom and then
84
00:05:43,301 --> 00:05:48,190
follows those instructions and
creates a button and a paragraph
85
00:05:48,220 --> 00:05:49,053
of text.
86
00:05:50,860 --> 00:05:54,700
If we reverse the order of
these lines, for example,
87
00:05:54,701 --> 00:05:59,660
if I put the paragraph up
here and I save it and refresh
88
00:05:59,661 --> 00:06:04,400
the page, then the paragraph
will appear on top because again,
89
00:06:04,401 --> 00:06:07,940
the computer is just following
our instructions one by one.
90
00:06:09,140 --> 00:06:11,240
Now I'm going to introduce
some terminology.
91
00:06:11,810 --> 00:06:16,750
So each of these things
that we're displaying on the
webpage is called an HTML
92
00:06:16,760 --> 00:06:17,593
element.
93
00:06:17,630 --> 00:06:22,400
So a button is a type of HTML element
and a paragraph is another type of
94
00:06:22,401 --> 00:06:23,570
HTML element.
95
00:06:24,230 --> 00:06:28,760
So element is just a generic term that
we use to describe anything that we can
96
00:06:28,770 --> 00:06:29,990
display on the webpage,
97
00:06:30,290 --> 00:06:34,430
and we're going to be using this term
element throughout this course. So now I
98
00:06:34,431 --> 00:06:38,690
want to explain why we have to write all
of these symbols that's less than this,
99
00:06:38,691 --> 00:06:43,340
greater than, and this less than
slash This is something called syntax.
100
00:06:43,700 --> 00:06:48,140
Syntax are the rules for how a coding
language like HTML should be written.
101
00:06:48,590 --> 00:06:52,130
If you think of a language like English,
we have something called grammar,
102
00:06:52,160 --> 00:06:54,230
which is the rules of the language.
103
00:06:54,590 --> 00:06:58,910
Syntax is basically the same thing
except for coding languages. Now,
104
00:06:58,911 --> 00:07:02,960
the biggest difference between a language
like English and a coding language is
105
00:07:02,961 --> 00:07:06,440
that in English, you don't have to
follow the rules of grammar perfectly.
106
00:07:06,830 --> 00:07:09,890
People can still understand
you, but in a coding language,
107
00:07:10,160 --> 00:07:12,140
if you don't follow the rules of syntax,
108
00:07:12,380 --> 00:07:16,100
the computer won't understand
your code. For example,
109
00:07:16,220 --> 00:07:20,480
let's break the rules of syntax by
deleting this greater than symbol,
110
00:07:21,890 --> 00:07:25,070
and now we're going to save our file
and we're going to go to our website and
111
00:07:25,071 --> 00:07:28,340
refresh. And now you notice
that our button is gone,
112
00:07:28,670 --> 00:07:31,670
and that's because we're not
following the proper syntax.
113
00:07:31,850 --> 00:07:35,450
So the computer doesn't
understand our HTML code anymore.
114
00:07:36,860 --> 00:07:40,010
So let's put that greater design back
so that we're following the proper rules
115
00:07:40,020 --> 00:07:42,320
of syntax and we don't need this.
116
00:07:43,460 --> 00:07:45,590
So let's save and refresh our page.
117
00:07:46,010 --> 00:07:49,460
And now our button is back because
we're following the rules of syntax.
118
00:07:50,810 --> 00:07:53,720
So what exactly are the
syntax rules for H T M L?
119
00:07:54,680 --> 00:07:57,830
So this part of the code
is called an H T M L tag.
120
00:07:58,280 --> 00:08:00,860
It basically tells a computer
what we're trying to create.
121
00:08:01,790 --> 00:08:06,230
We write a tag by writing the less
than symbol. This is the tag name,
122
00:08:06,320 --> 00:08:09,110
which tells a computer what kind
of element we're trying to create,
123
00:08:09,560 --> 00:08:10,940
and then the greater then symbol.
124
00:08:11,780 --> 00:08:16,490
So every element consists of
two tags in opening tag and a
125
00:08:16,491 --> 00:08:20,390
closing tag. The closing tag
is the same as the opening tag,
126
00:08:20,600 --> 00:08:23,180
except it has a slash in
front of the tag name.
127
00:08:23,630 --> 00:08:25,670
That's how you can tell
it is a closing tag.
128
00:08:27,440 --> 00:08:31,820
You can think of the opening tag as the
start of the button and the closing tag
129
00:08:31,821 --> 00:08:33,110
as the end of the button.
130
00:08:33,530 --> 00:08:37,100
And then in between is a content
or the text inside the button.
131
00:08:38,720 --> 00:08:42,200
And the same thing for the paragraph.
The paragraph has an opening tag,
132
00:08:42,740 --> 00:08:45,950
a closing tag, and some
content inside the paragraph.
133
00:08:47,150 --> 00:08:50,270
So as long as we follow
these syntax rules for html,
134
00:08:50,600 --> 00:08:52,790
we have an opening tag and a closing tag,
135
00:08:53,060 --> 00:08:56,010
and the closing tag starts with
a slash in front of the tag name.
136
00:08:56,670 --> 00:09:01,500
Then our computer will know what to do
and display our elements on our webpage.
137
00:09:02,790 --> 00:09:06,870
The next element that we're going to
learn is a link to another website. For
138
00:09:06,871 --> 00:09:11,430
example, if we go to Google and
we search for something on Google,
139
00:09:11,820 --> 00:09:14,520
it will give us a bunch of links
and when we click these links,
140
00:09:14,820 --> 00:09:16,500
it will take us to another website.
141
00:09:17,100 --> 00:09:19,770
So we're going to learn how
to do that in our HTML code.
142
00:09:20,580 --> 00:09:25,110
So we'll go back to our website here
and in our code we're going to type less
143
00:09:25,111 --> 00:09:27,210
than a greater than.
144
00:09:28,560 --> 00:09:31,800
So this A here represents
an anchor element.
145
00:09:32,250 --> 00:09:34,860
An anchor is basically a
link to another website.
146
00:09:35,940 --> 00:09:40,650
So inside this anchor we're going
to put the text of our link.
147
00:09:40,860 --> 00:09:44,670
So let's put the text as link to YouTube.
148
00:09:45,990 --> 00:09:50,250
We're going to save this and the
refresh, and now we have a link,
149
00:09:50,670 --> 00:09:53,580
but if we click this, it doesn't
actually take us to YouTube,
150
00:09:54,270 --> 00:09:58,260
and that's because we haven't told the
computer where this link is supposed to
151
00:09:58,261 --> 00:10:01,740
take us. Right now we just have
a link without a destination.
152
00:10:02,370 --> 00:10:04,530
So to set a website to link to,
153
00:10:04,950 --> 00:10:07,800
we have to learn a little
bit more HTML syntax.
154
00:10:08,490 --> 00:10:12,360
So we're going to go into the opening
tag and we're going to type space
155
00:10:13,350 --> 00:10:16,680
HREF equals double quotes, double quotes.
156
00:10:18,240 --> 00:10:22,580
So inside these quotes we're going to
copy and paste YouTube's website url.
157
00:10:23,070 --> 00:10:27,660
So to get that we can go to our
webpage and then type in youtube.com.
158
00:10:29,100 --> 00:10:31,860
And at the top here we have the url.
159
00:10:31,861 --> 00:10:36,690
So we're going to copy this
and paste this into our quotes.
160
00:10:37,920 --> 00:10:39,600
And now we're going to save our file.
161
00:10:41,010 --> 00:10:44,370
We're going to go back to
our website and refresh.
162
00:10:45,300 --> 00:10:49,230
And now we have a link that we can
click. So when we click this link,
163
00:10:49,740 --> 00:10:52,050
it's now going to take us to youtube.com.
164
00:10:52,560 --> 00:10:56,260
So that's how we create a link
to another website with html.
165
00:10:58,080 --> 00:11:01,050
Now let's go back here and
explain what this syntax means.
166
00:11:01,920 --> 00:11:04,320
So this is called an HTML attribute.
167
00:11:04,620 --> 00:11:09,120
An attribute basically modifies how
an element behaves. In this example,
168
00:11:09,121 --> 00:11:13,890
we are using the href attribute and it
determines where this link element will
169
00:11:13,900 --> 00:11:17,340
take us When we click it right
now it's going to youtube.com,
170
00:11:17,730 --> 00:11:20,370
but if we change this, it will
take us to a different website.
171
00:11:20,760 --> 00:11:24,270
So this attribute is modifying
how the link element behaves.
172
00:11:25,650 --> 00:11:30,630
So the syntax rules for an attribute
are we have to have a space between the
173
00:11:30,631 --> 00:11:34,590
attribute and the tag name.
Otherwise, if I write href here,
174
00:11:35,340 --> 00:11:38,400
the browser is just going to think
that this whole thing is a tag name.
175
00:11:38,760 --> 00:11:40,590
So that's why we have to have a space.
176
00:11:41,340 --> 00:11:44,850
So then we're going to have an
equal sign and double quotes.
177
00:11:45,660 --> 00:11:49,980
So the text to the left of the equal
sign is known as the attributes name,
178
00:11:50,730 --> 00:11:55,660
and on the right side is the value.
The value must be surrounded by
179
00:11:55,661 --> 00:12:00,190
double quotes as you can see here. So
you can kind of think of it like this.
180
00:12:00,580 --> 00:12:02,470
The name tells us what we're modifying.
181
00:12:03,010 --> 00:12:05,560
The value tells us what
we are modifying it to.
182
00:12:06,040 --> 00:12:10,330
So the H tells us we're modifying the
destination of this link and we're
183
00:12:10,331 --> 00:12:13,300
modifying it to youtube.com.
184
00:12:14,920 --> 00:12:19,510
We can also have multiple attributes
on an element to add another attribute,
185
00:12:19,511 --> 00:12:22,060
we just separated with a space like this,
186
00:12:22,690 --> 00:12:25,690
and now we're going to add another
attribute to our link element,
187
00:12:26,050 --> 00:12:28,090
and this one is called target.
188
00:12:29,440 --> 00:12:33,550
So the target attribute determines whether
this link opens in the current page
189
00:12:33,850 --> 00:12:37,870
or in a new tab. So by default, if
we don't have a target attribute,
190
00:12:38,020 --> 00:12:40,570
it opens in the current page like this.
191
00:12:44,470 --> 00:12:47,770
But if we set the target
attribute to underscore blank,
192
00:12:48,460 --> 00:12:51,040
now this link element
will open in a new tab.
193
00:12:51,490 --> 00:12:55,060
So let's go to our webpage and
refresh and click this link.
194
00:12:55,300 --> 00:12:57,220
YouTube will now open in a new tab.
195
00:12:59,470 --> 00:13:04,120
So by using attributes we
can modify different parts
of this element's behavior.
196
00:13:04,810 --> 00:13:09,640
The H RF attribute modifies where this
link goes and the target attribute
197
00:13:09,641 --> 00:13:13,810
modifies whether this link opens in
a new tab or in the current page.
198
00:13:14,890 --> 00:13:19,450
Keep in mind that the h r and target
attributes only work on the link element.
199
00:13:20,050 --> 00:13:23,620
The button and the paragraph elements
have their own set of attributes that we
200
00:13:23,621 --> 00:13:27,640
can modify, and we're going to learn
these later on in the course. But for now,
201
00:13:27,641 --> 00:13:32,230
I just wanted to introduce you to the
idea of using attributes to modify our
202
00:13:32,231 --> 00:13:33,700
HTML elements.
203
00:13:35,890 --> 00:13:39,190
The last thing we're going to learn in
this lesson is some weird quirks of the
204
00:13:39,640 --> 00:13:40,540
HTML syntax.
205
00:13:41,080 --> 00:13:45,130
So something that a lot of beginners
have trouble with is that in html,
206
00:13:45,220 --> 00:13:48,040
if you have multiple spaces
like this, for example,
207
00:13:48,041 --> 00:13:50,410
if we save this file and we reload,
208
00:13:51,430 --> 00:13:55,270
you'll notice that all of these spaces
just appear as one space on the website,
209
00:13:56,020 --> 00:13:57,850
and that's because
according to the syntax,
210
00:13:58,420 --> 00:14:00,640
extra spaces are essentially ignored.
211
00:14:02,530 --> 00:14:05,680
So beginners usually have trouble
with this because for example,
212
00:14:05,681 --> 00:14:09,160
if they want to add space between
this button and this link,
213
00:14:09,670 --> 00:14:14,440
they would start adding spaces in
front of the link thinking that it will
214
00:14:14,500 --> 00:14:18,100
move it away from the button. So
if we save this and we refresh,
215
00:14:18,410 --> 00:14:19,720
nothing happens.
216
00:14:19,810 --> 00:14:23,950
And that's because all of these spaces
are essentially ignored in html.
217
00:14:25,840 --> 00:14:28,990
So later in the course, we're going to
learn how to deal with these situations,
218
00:14:29,290 --> 00:14:30,820
but for now, just keep this in mind.
219
00:14:31,840 --> 00:14:34,150
So let's get rid of these
extra spaces for now.
220
00:14:35,560 --> 00:14:40,300
And another weird quirk of the
syntax rule is that if I put my
221
00:14:40,330 --> 00:14:45,310
cursor here and I press enter to create
a new line and I put my cursor here,
222
00:14:45,320 --> 00:14:48,940
again, these new lines
also count as spaces,
223
00:14:48,970 --> 00:14:51,010
so the browser essentially ignores them.
224
00:14:53,180 --> 00:14:57,260
If I save the file and reload, you'll see
that the new line doesn't do anything.
225
00:14:59,030 --> 00:15:03,200
So this actually makes organizing
our HTML code very flexible.
226
00:15:03,740 --> 00:15:04,340
For example,
227
00:15:04,341 --> 00:15:08,360
if I wanted some more space between these
elements so that it's easier to read
228
00:15:08,370 --> 00:15:09,203
in my code,
229
00:15:09,440 --> 00:15:13,850
I can just add as much spaces as I
want and it won't get reflected in the
230
00:15:13,851 --> 00:15:17,780
website because extra spaces like
these new lines are just ignored.
231
00:15:19,580 --> 00:15:24,560
A lot of people like to put the content
of the element on its own line like this
232
00:15:25,250 --> 00:15:29,840
so that the tags basically align
with each other in the same column.
233
00:15:31,010 --> 00:15:34,520
And same thing for here. You'll
notice that this line is really long.
234
00:15:34,940 --> 00:15:39,350
We can actually add new lines here
to make our code easier to read.
235
00:15:40,370 --> 00:15:42,050
So when we organize our code like this,
236
00:15:42,290 --> 00:15:47,090
we generally indent or add spaces in
front of these lines. This helps us
237
00:15:47,091 --> 00:15:50,810
clearly tell the difference between
the elements, tags and its contents.
238
00:15:51,260 --> 00:15:52,970
If we didn't have this indenting,
239
00:15:53,390 --> 00:15:57,200
then it's pretty hard to tell where
this element starts and where it ends,
240
00:15:57,530 --> 00:15:59,420
especially when we have a lot of code.
241
00:16:00,530 --> 00:16:03,050
Now your indents might look
a little different from mine.
242
00:16:03,500 --> 00:16:07,460
It might look something like this
where you have more spaces than I do.
243
00:16:08,120 --> 00:16:12,950
This happens because by default vs.
Code uses four spaces per indent.
244
00:16:13,100 --> 00:16:17,570
Generally in HTML and css,
we use two spaces per indent.
245
00:16:18,590 --> 00:16:19,423
To update this,
246
00:16:19,580 --> 00:16:23,030
we're going to go down to this bottom
toolbar and click this section,
247
00:16:23,930 --> 00:16:26,540
and then we're going to
click indent using spaces,
248
00:16:27,380 --> 00:16:29,510
and we'll change this from four to two.
249
00:16:30,500 --> 00:16:33,170
So now this file is going to
use two spaces per indent,
250
00:16:33,710 --> 00:16:37,880
so we can get rid of this and
press tab to have proper indenting.
251
00:16:40,490 --> 00:16:42,920
Now that only affects
it for the current file.
252
00:16:43,310 --> 00:16:47,390
We can change it for every file going
forward by going to the bottom left here
253
00:16:47,780 --> 00:16:50,840
and clicking this icon and
then going into settings.
254
00:16:52,310 --> 00:16:55,640
And in here we're going
to search for tab size,
255
00:16:56,690 --> 00:17:01,100
and I'm going to scroll down and we'll
change the tab size from four to two.
256
00:17:03,800 --> 00:17:08,780
All right, so we just learned the
basics of html, how to write HTML code,
257
00:17:08,839 --> 00:17:10,819
and then turn that into a website.
258
00:17:11,510 --> 00:17:16,349
We also learned how to write HTML
attributes which modify the behavior of an
259
00:17:16,358 --> 00:17:19,159
element, and we learned about syntax,
260
00:17:19,220 --> 00:17:22,520
which are the rules that we had
to follow when writing our code.
261
00:17:25,069 --> 00:17:28,700
Here are some exercises that you can try
on your own to practice what we learned
262
00:17:28,701 --> 00:17:32,180
in this lesson. Feel free to pause
the video here if you need to.
263
00:17:33,080 --> 00:17:36,500
You can find these solutions as well
as more exercises on my website.
264
00:17:36,530 --> 00:17:39,500
Super simple.dev. The
link is below the video.
265
00:17:51,000 --> 00:17:51,540
In this lesson,
266
00:17:51,541 --> 00:17:56,280
we're going to learn CSS or cascading
style sheets based on the name.
267
00:17:56,281 --> 00:17:58,290
It's used to style our webpage,
268
00:17:58,620 --> 00:18:02,280
so it's used to change the
appearance of our H C M L elements.
269
00:18:04,050 --> 00:18:06,900
So I've actually prepared a project
that we can do in this lesson.
270
00:18:07,380 --> 00:18:11,130
So we're going to open this
project by going to super
271
00:18:11,550 --> 00:18:16,550
simple.dev/exercises/buttons.
272
00:18:20,610 --> 00:18:24,750
So on this webpage I have some really
nice looking buttons from famous websites,
273
00:18:25,050 --> 00:18:29,760
namely YouTube and Twitter that we
can copy and practice our CSS with.
274
00:18:31,020 --> 00:18:34,410
So we're going to go into our code and
we're actually going to create a new file
275
00:18:34,411 --> 00:18:35,580
for this exercise.
276
00:18:36,600 --> 00:18:40,500
So let's create a new file
and let's call it buttons dot
277
00:18:41,260 --> 00:18:42,093
html.
278
00:18:44,010 --> 00:18:46,980
And we're going to open our
new HTML file in our browser.
279
00:18:47,670 --> 00:18:49,860
So that's open the folder
that contains our code.
280
00:18:50,520 --> 00:18:53,880
We're going to right click
open with Google Chrome.
281
00:18:56,700 --> 00:19:01,380
And now I'm going to set this up by
moving our reference design to the
282
00:19:01,381 --> 00:19:05,190
bottom like this so that it's
easier for us to copy it with css.
283
00:19:07,320 --> 00:19:11,100
I'm just going to move that to the
corner and then we can work here.
284
00:19:13,080 --> 00:19:15,990
So first, let's work on
creating the subscribe button.
285
00:19:16,770 --> 00:19:20,490
So just like we learned before, we're
going to create a button using H T M L,
286
00:19:21,750 --> 00:19:25,110
so less than button, greater than,
287
00:19:25,950 --> 00:19:29,530
and then insider button. We're
going to have the text subscribe.
288
00:19:32,370 --> 00:19:36,690
And now let's save and refresh our
page. And now we have our button.
289
00:19:38,070 --> 00:19:41,310
Next we're going to start changing the
appearance of this button so that it
290
00:19:41,311 --> 00:19:43,500
looks like the subscribe
button from YouTube.
291
00:19:45,600 --> 00:19:49,200
Let's go into our code and we're going
to start writing some CSS to change the
292
00:19:49,201 --> 00:19:54,000
appearance of this H T M L
element. So to write css,
293
00:19:54,001 --> 00:19:57,910
we have to create a new
element called a style element.
294
00:20:00,240 --> 00:20:04,620
So this style element is unique in that
it doesn't appear visibly on the page.
295
00:20:04,980 --> 00:20:08,820
So for example, if we save our
file and then we reload the page,
296
00:20:09,270 --> 00:20:11,670
the style element doesn't
actually create anything.
297
00:20:13,800 --> 00:20:18,570
So the purpose of this element is that
inside this element we can write CSS code
298
00:20:18,870 --> 00:20:23,430
which modifies the appearance
of other elements. For example,
299
00:20:23,440 --> 00:20:27,960
let's write our first bit of CSS
code. We're going to type button
300
00:20:29,610 --> 00:20:32,010
open squiggly bracket,
close squiggly bracket.
301
00:20:34,530 --> 00:20:35,970
And then inside these brackets,
302
00:20:36,330 --> 00:20:40,470
we're basically going to give instructions
to the computer on how to modify the
303
00:20:40,471 --> 00:20:42,420
appearance. For example,
304
00:20:42,421 --> 00:20:46,170
we can set the background dash color
305
00:20:47,770 --> 00:20:49,510
red and semicolon.
306
00:20:50,890 --> 00:20:55,090
So make sure that you write this out
exactly as I have it here so that we're
307
00:20:55,091 --> 00:20:57,820
following the syntax rules for css.
308
00:20:58,420 --> 00:21:01,120
So let's save this file
and refresh our page.
309
00:21:01,780 --> 00:21:05,140
And now you can see that we set the
background color of the button to red.
310
00:21:06,430 --> 00:21:09,790
So as you can see, c s
s is similar to H T M L.
311
00:21:10,180 --> 00:21:14,380
We're simply giving instructions to the
computer and then the computer follows
312
00:21:14,381 --> 00:21:18,790
our instructions step by step.
And just like H T M L,
313
00:21:18,791 --> 00:21:23,440
we have to follow certain syntax
rules when writing our CSS so that
314
00:21:23,441 --> 00:21:25,330
the computer understands our code.
315
00:21:26,620 --> 00:21:30,640
So what are the syntax rules for
css? How does this code work?
316
00:21:32,110 --> 00:21:35,380
So the word at the front here
is called a CSS selector.
317
00:21:35,890 --> 00:21:40,600
It tells a computer which elements on
the page we are targeting with our CSS
318
00:21:40,601 --> 00:21:42,220
code. In this case,
319
00:21:42,221 --> 00:21:45,490
we are targeting all buttons on the
page and we're going to change the
320
00:21:45,491 --> 00:21:48,850
background color of all
buttons on the page to red.
321
00:21:50,470 --> 00:21:53,590
Now, inside these brackets, there are
other rules that we have to follow.
322
00:21:54,640 --> 00:21:58,660
The text to the left of this
colon is called the CSS property.
323
00:21:59,050 --> 00:22:03,550
It tells a computer what we are
changing to the right of the colon
324
00:22:04,090 --> 00:22:08,920
is the CSS value. It tells a computer
what we're changing the property to.
325
00:22:09,850 --> 00:22:13,570
In this case, we're changing the
property background color to red,
326
00:22:13,930 --> 00:22:18,490
and that's exactly what the computer did.
The colon is here to just separate the
327
00:22:18,491 --> 00:22:23,320
property and the value and the
semicolon here is just like a period in
328
00:22:23,330 --> 00:22:27,820
English. In English, you end
sentences with a period in css,
329
00:22:27,880 --> 00:22:30,910
you end a style with a semicolon.
330
00:22:31,570 --> 00:22:33,610
So that's what all of this syntax means.
331
00:22:35,490 --> 00:22:38,920
So we can actually add multiple
styles inside these brackets.
332
00:22:39,430 --> 00:22:41,170
So let's go ahead and add another style.
333
00:22:41,200 --> 00:22:44,860
We're going to change the text
color to white to match this design.
334
00:22:45,820 --> 00:22:49,300
So the property for changing
the text color is called color.
335
00:22:50,050 --> 00:22:52,090
So notice that it's not called text color,
336
00:22:52,330 --> 00:22:53,980
it's just something that
we have to remember.
337
00:22:55,120 --> 00:22:59,140
We're going to change it to white
and we'll end it with as semicolon.
338
00:22:59,800 --> 00:23:02,260
Let's save and refresh.
339
00:23:02,890 --> 00:23:06,310
And now you can see that we change the
text color of this button to white.
340
00:23:07,780 --> 00:23:09,940
And that's basically how c s s works.
341
00:23:10,270 --> 00:23:14,470
We tell the computer what we're targeting
and then we give some styles and the
342
00:23:14,471 --> 00:23:18,340
computer is going to apply
these styles one by one.
343
00:23:20,080 --> 00:23:24,190
So let's do another example. This
time we'll set the border property.
344
00:23:24,700 --> 00:23:28,330
So notice that our button has a border
while the subscribe button here doesn't
345
00:23:28,340 --> 00:23:32,680
have a border. So we're going
to set the border property
346
00:23:34,450 --> 00:23:36,340
colon two, none,
347
00:23:37,600 --> 00:23:40,120
and we're going to save
this file and refresh.
348
00:23:41,050 --> 00:23:44,710
And now we just remove the border.
So if you look at our styles here,
349
00:23:44,890 --> 00:23:47,600
it's actually pretty straightforward.
They're pretty easy to read.
350
00:23:47,930 --> 00:23:52,190
We set the background color to red,
text color to white and border to none.
351
00:23:52,910 --> 00:23:55,940
So just like html, CSS is
pretty straightforward.
352
00:23:56,120 --> 00:23:58,460
We're essentially just giving
the computer instructions.
353
00:24:00,320 --> 00:24:04,700
So the general technique for going
from something that looks like this to
354
00:24:04,701 --> 00:24:09,200
something that looks like this is to
just change these styles one by one.
355
00:24:09,830 --> 00:24:13,760
So we're going to continue changing
styles one by one until we get our design
356
00:24:13,770 --> 00:24:14,603
here.
357
00:24:15,050 --> 00:24:19,130
The next style I'm going to change is
the height. So our button's a little bit
358
00:24:19,140 --> 00:24:20,660
short, I'm going to make it taller.
359
00:24:22,070 --> 00:24:26,660
So I'm going to set the height
to something like 50 px.
360
00:24:28,280 --> 00:24:30,380
The PX here represents pixels.
361
00:24:30,920 --> 00:24:34,100
Pixels are a very common unit of
measurement in the digital world,
362
00:24:34,101 --> 00:24:38,510
image sizes are measured in pixels,
video sizes are measured in pixels,
363
00:24:38,840 --> 00:24:43,340
and your screen sizes also
measured in pixels. In this case,
364
00:24:43,341 --> 00:24:45,740
we're going to set the
button high, two 50 pixels.
365
00:24:46,130 --> 00:24:49,250
And don't worry too much about
knowing what 50 pixels looks like.
366
00:24:49,550 --> 00:24:51,860
The more that you write
CSS and work with pixels,
367
00:24:52,250 --> 00:24:55,490
the more you get a sense for how big
these measurements turn out to be.
368
00:24:56,630 --> 00:25:00,470
So for now, let's save this
file and refresh the page.
369
00:25:01,340 --> 00:25:03,680
And now we have a button
that is 50 pixels tall,
370
00:25:04,250 --> 00:25:06,140
but it actually looks like
it's a little too tall.
371
00:25:06,260 --> 00:25:10,040
So I'm going to change the heights
to something like 30 pixels,
372
00:25:11,120 --> 00:25:12,740
and I'm going to refresh the page again,
373
00:25:13,490 --> 00:25:15,950
and I actually want it to
be a little bit taller,
374
00:25:15,951 --> 00:25:20,330
so I'm going to change it to maybe 36.
I'm going to
375
00:25:20,331 --> 00:25:23,690
refresh and I think that
looks pretty good to me.
376
00:25:24,980 --> 00:25:26,060
So you see that in css.
377
00:25:26,070 --> 00:25:29,030
We do a lot of trial and error
to get our measurements right
378
00:25:30,560 --> 00:25:34,400
Now let's keep working step by
step to get to our design. Next,
379
00:25:34,401 --> 00:25:36,560
we're going to adjust the width.
380
00:25:37,880 --> 00:25:40,850
So let's change this to
something like a hundred pixels.
381
00:25:41,510 --> 00:25:45,350
Let's see how that looks.
I'm going to save it refresh,
382
00:25:46,370 --> 00:25:49,340
and I think it looks a
little bit too small,
383
00:25:49,341 --> 00:25:52,700
so I'm going to increase
it just a little bit. 1 0 5
384
00:25:54,380 --> 00:25:57,350
and refresh. Okay, I think
that looks good enough for me.
385
00:25:59,060 --> 00:26:02,690
Next we're going to change the background
color because currently our red is not
386
00:26:02,691 --> 00:26:03,800
the same as our design.
387
00:26:04,550 --> 00:26:07,790
So VS code has a really nice
feature which is a color picker.
388
00:26:08,360 --> 00:26:10,730
So if we hover over this color box here,
389
00:26:11,330 --> 00:26:15,530
it gives us access to a color picker
that we can pick another color with.
390
00:26:16,310 --> 00:26:19,190
So I'm going to pick something that's
a little closer to what I see at the
391
00:26:19,191 --> 00:26:21,800
bottom, and don't worry, it
doesn't have to be perfect.
392
00:26:22,490 --> 00:26:25,190
I'm going to pick something like 200 0 0.
393
00:26:26,240 --> 00:26:30,080
I'm going to save this and refresh. Okay,
394
00:26:30,081 --> 00:26:32,060
so I think that looks close enough.
395
00:26:32,780 --> 00:26:35,270
So you might be wondering
what this value means.
396
00:26:35,420 --> 00:26:38,510
We went from a color of red to RGB
397
00:26:38,840 --> 00:26:40,430
200 0 0.
398
00:26:42,230 --> 00:26:45,930
So this RGB value is another
way of measuring color.
399
00:26:46,350 --> 00:26:50,490
It's a more precise way of measuring
color than just using a word like red or
400
00:26:50,491 --> 00:26:51,323
white.
401
00:26:51,840 --> 00:26:56,190
So the way that RGB works is that pretty
much every color can be created using a
402
00:26:56,191 --> 00:26:59,130
combination of red, green, and blue.
403
00:26:59,580 --> 00:27:01,650
So that's what this syntax represents.
404
00:27:02,820 --> 00:27:06,120
The R represents how much
red we have in this color.
405
00:27:06,510 --> 00:27:10,320
G represents how much green
and B represents how much blue.
406
00:27:11,850 --> 00:27:15,630
And these three numbers represent
how much red we have, how much green,
407
00:27:15,660 --> 00:27:20,490
and how much blue. The minimum value
is zero and the maximum value is
408
00:27:20,850 --> 00:27:22,050
255.
409
00:27:23,130 --> 00:27:27,570
So if we removed all the red and
green and we just have maximum blue
410
00:27:28,260 --> 00:27:31,680
and we save, that's going
to get us a blue color.
411
00:27:33,060 --> 00:27:37,470
On the other hand, if we have all
green color and we get rid of the blue,
412
00:27:38,910 --> 00:27:43,830
we're going to have a green color.
So this is basically how RGB works.
413
00:27:43,920 --> 00:27:47,760
It's a combination of red, green, and
blue to create any color that we want.
414
00:27:48,480 --> 00:27:51,990
Now, don't worry too much about
knowing what an RGB value looks like.
415
00:27:52,380 --> 00:27:56,850
For example, if you have a random value
like this, if you gave this to me,
416
00:27:56,851 --> 00:27:58,710
I wouldn't even know what this color was.
417
00:27:59,220 --> 00:28:03,360
Usually I just use the color picker to
pick the color that I want and then it
418
00:28:03,361 --> 00:28:05,340
will give me the RGB value that I need.
419
00:28:06,210 --> 00:28:10,590
The only RGB values I suggest
you remember are if we set
420
00:28:10,830 --> 00:28:15,090
all the colors to the
maximum value. So 2 55, 2 55,
421
00:28:15,091 --> 00:28:18,480
and 2 55, this creates white.
422
00:28:19,410 --> 00:28:21,690
So we save it and refresh
that creates white.
423
00:28:22,250 --> 00:28:24,600
If we set all of these three to zero,
424
00:28:25,530 --> 00:28:30,210
that creates black and we refresh,
that creates a black color.
425
00:28:32,220 --> 00:28:34,860
So now let's go back
to what we had before,
426
00:28:35,100 --> 00:28:39,690
which I think was 200 0 0,
and we'll save and refresh.
427
00:28:41,700 --> 00:28:43,710
And the next thing we're
going to change is here.
428
00:28:43,711 --> 00:28:46,200
We might not be able to see
it, but if we zoom in here,
429
00:28:46,920 --> 00:28:51,750
this button has rounded corners
while our button has pointy corners.
430
00:28:52,230 --> 00:28:53,910
So to make rounded corners,
431
00:28:54,300 --> 00:28:58,140
the CSS property for doing that is border
432
00:28:59,160 --> 00:29:03,390
dash radius, and the border
radius takes a pixel measurement.
433
00:29:03,750 --> 00:29:07,740
The higher the pixels, the more round
the corners will be. So for now,
434
00:29:07,741 --> 00:29:11,310
let's try colon two pixels and save.
435
00:29:11,970 --> 00:29:13,320
Now if we refresh the page,
436
00:29:13,710 --> 00:29:16,620
our button now has rounded
corners just like our design.
437
00:29:17,370 --> 00:29:19,560
So I'm going to zoom back
out and zoom back out.
438
00:29:20,820 --> 00:29:24,270
So the last thing I'm going to change
is if we hover over this button,
439
00:29:24,300 --> 00:29:27,420
you'll notice that our mouse
turns into this sort of hand.
440
00:29:28,050 --> 00:29:29,640
This hand is called a pointer.
441
00:29:30,870 --> 00:29:35,820
So we're going to change
the cursor, the mouse.
442
00:29:35,880 --> 00:29:38,340
This thing that you point around
is usually called the cursor,
443
00:29:38,850 --> 00:29:40,950
and we're going to change
the cursor to a pointer.
444
00:29:42,970 --> 00:29:44,740
Let's save and refresh.
445
00:29:45,400 --> 00:29:49,420
And that's how you get this hand
whenever your mouse is over this button.
446
00:29:50,530 --> 00:29:55,390
So that's basically how we go from a
basic HTML button to something that
447
00:29:55,400 --> 00:29:59,290
looks more professional. We
create the button with html,
448
00:29:59,650 --> 00:30:04,630
and then we set the styles one by
one. Now you might be wondering,
449
00:30:04,660 --> 00:30:07,060
how do I know all of these CSS properties?
450
00:30:07,390 --> 00:30:09,370
How are you supposed to
memorize all of these?
451
00:30:10,480 --> 00:30:14,620
So usually when I don't know the CSS
property for something, for example,
452
00:30:14,630 --> 00:30:16,300
if I want to create rounded corners,
453
00:30:16,810 --> 00:30:21,700
I would go to Google and search
something like CSS and what I
454
00:30:21,701 --> 00:30:24,730
want to do, so let's say
I want round corners,
455
00:30:26,470 --> 00:30:31,210
and usually the first few links
give some really good suggestions
456
00:30:31,211 --> 00:30:33,850
on what the property is. So here,
457
00:30:33,851 --> 00:30:38,740
right away we have the border radius
property in the first link and it gives
458
00:30:38,741 --> 00:30:40,780
us some sample code that we can use.
459
00:30:42,940 --> 00:30:45,880
So that's how I discover
all of the CSS properties.
460
00:30:46,360 --> 00:30:48,790
I look at a design and I ask myself, okay,
461
00:30:48,791 --> 00:30:52,630
what do I need to achieve this design?
And then I search for it in Google.
462
00:30:53,320 --> 00:30:55,570
So don't worry. As you
use CSS more and more,
463
00:30:55,780 --> 00:30:58,660
you're going to have to Google things
that you don't know and you're just get
464
00:30:58,661 --> 00:31:01,780
used to the process of finding
answers by searching for them.
465
00:31:03,190 --> 00:31:04,720
But for the purposes of this course,
466
00:31:04,780 --> 00:31:08,620
I'm going to give you a lot of these
CSS properties so that you can get some
467
00:31:08,630 --> 00:31:09,670
good practice with them.
468
00:31:11,440 --> 00:31:14,350
The next step we're going to
do is to copy this join button.
469
00:31:14,980 --> 00:31:19,960
So let's create a new button
on our page with html,
470
00:31:21,430 --> 00:31:22,870
and this is going to be the join button.
471
00:31:22,871 --> 00:31:26,200
So we're going to put the
text join inside this button,
472
00:31:26,830 --> 00:31:31,240
let's save it and refresh.
And unfortunately,
473
00:31:31,241 --> 00:31:34,360
it looks like our join button
looks like the subscribe button,
474
00:31:34,990 --> 00:31:36,820
and that's because in our C s s,
475
00:31:37,390 --> 00:31:42,010
this word button means that all
of these styles are targeted
476
00:31:42,250 --> 00:31:47,050
to all buttons on the page.
So how do we get these styles to
477
00:31:47,051 --> 00:31:48,970
only target the subscribe button?
478
00:31:49,810 --> 00:31:53,620
So we're going to learn a new HTML
attribute that we can use for this.
479
00:31:54,010 --> 00:31:57,580
So remember in the previous lesson
we learned that attributes modify the
480
00:31:57,581 --> 00:32:00,130
behavior of elements. In this lesson,
481
00:32:00,131 --> 00:32:03,880
we're going to learn a very useful
attribute that is used a lot in css.
482
00:32:04,780 --> 00:32:06,700
We're going to go to
the opening tag again,
483
00:32:07,270 --> 00:32:11,080
and we're going to add a new
attribute called the class attribute.
484
00:32:12,220 --> 00:32:15,460
So we're going to type
class equals quotes. Quotes.
485
00:32:16,780 --> 00:32:21,010
So the class attribute basically
lets us label HTML elements.
486
00:32:21,460 --> 00:32:26,440
For example, let's label this
button the subscribe button.
487
00:32:29,320 --> 00:32:32,020
And also my code is getting
a little long for this line,
488
00:32:32,170 --> 00:32:36,040
so I'm going to put the text on a
new line to make it easier to read.
489
00:32:36,490 --> 00:32:41,210
So remember, according to HTML syntax,
these extra spaces don't matter.
490
00:32:41,420 --> 00:32:45,890
They're ignored. So now that
we set the class attribute,
491
00:32:46,190 --> 00:32:51,050
we've essentially set a label to this
button and we can target this label in
492
00:32:51,220 --> 00:32:54,530
our css. So to target a class in css,
493
00:32:55,190 --> 00:32:59,870
we can start with a dot, and then
we're going to type out the class name.
494
00:33:00,440 --> 00:33:03,950
So we're going to type
out subscribe dash button.
495
00:33:06,200 --> 00:33:10,400
So according to CSS syntax, if
we start this code with a dot,
496
00:33:10,790 --> 00:33:15,710
that means we're going to target a class
name instead of an element name like
497
00:33:15,711 --> 00:33:16,543
button.
498
00:33:16,970 --> 00:33:21,920
So here we're going to start targeting
just any element that has the class
499
00:33:22,670 --> 00:33:23,503
subscribe button.
500
00:33:23,600 --> 00:33:28,220
So if we save and refresh now
you'll see that all of these
501
00:33:28,221 --> 00:33:32,630
styles only apply to elements
that have the class subscribe,
502
00:33:33,290 --> 00:33:37,220
and our join button does not
have any of these styles. Now,
503
00:33:37,221 --> 00:33:40,430
multiple elements can have these
same class. So for example,
504
00:33:41,390 --> 00:33:45,860
if I set the class of the join
button to subscribe dash button,
505
00:33:48,020 --> 00:33:52,220
all these styles will be applied to any
element with the subscribe button class.
506
00:33:52,460 --> 00:33:53,540
That's what this dot means.
507
00:33:53,870 --> 00:33:58,070
And that means these are going
to be applied to this and this.
508
00:33:58,490 --> 00:34:00,710
So if we save and refresh,
509
00:34:01,430 --> 00:34:05,750
now the join button has these styles
again because it has a class of subscribe
510
00:34:05,751 --> 00:34:07,850
button. But for our purposes,
511
00:34:07,851 --> 00:34:10,340
we actually want this to have
a different set of styles.
512
00:34:10,699 --> 00:34:13,309
So let's give a different
class to the join button.
513
00:34:14,270 --> 00:34:15,650
We're going to give the class join,
514
00:34:17,030 --> 00:34:21,260
and I'm also going to reformat my code
a little to make it easier to read.
515
00:34:22,070 --> 00:34:24,110
So let's save and refresh.
516
00:34:25,159 --> 00:34:29,029
And now we're back to where we can
start modifying our join button.
517
00:34:30,500 --> 00:34:34,580
Now let's start styling our join button
to match our design. So remember,
518
00:34:34,581 --> 00:34:39,560
the general strategy is to create
the element with HTML like this and
519
00:34:39,570 --> 00:34:42,500
then style it one by one
until you match your design.
520
00:34:43,760 --> 00:34:47,600
So first we're going to target the
class. That's what this dot means.
521
00:34:47,960 --> 00:34:52,610
We're going to target the
class join dash button. Okay,
522
00:34:52,670 --> 00:34:57,620
so let's set the background
dash color to white.
523
00:34:58,700 --> 00:35:02,840
Let's save it and refresh. And next,
524
00:35:02,870 --> 00:35:04,160
let's deal with the border.
525
00:35:05,000 --> 00:35:08,120
So our border is a little bit gray.
526
00:35:08,180 --> 00:35:13,160
We can set it to maybe
border dash color to
527
00:35:13,161 --> 00:35:17,690
blue, and let's see how that
looks. Let's save it and refresh.
528
00:35:19,010 --> 00:35:22,640
Okay, so it looks a little darker
than what we have in our design.
529
00:35:23,060 --> 00:35:25,970
Let's go into our color picker
and pick a more accurate color.
530
00:35:26,510 --> 00:35:30,530
So I'm just going to do this by eye.
Don't worry if it's not totally accurate.
531
00:35:30,620 --> 00:35:32,630
We're just trying to get
something that's close enough.
532
00:35:33,110 --> 00:35:37,370
I'm going to go over here and
I'm going to pick something like
533
00:35:38,010 --> 00:35:42,480
maybe something like this.
Let's save it refresh,
534
00:35:43,380 --> 00:35:46,080
and that's a little bit too dark.
535
00:35:46,081 --> 00:35:48,630
So I'm going to pick something
a little bit lighter,
536
00:35:50,010 --> 00:35:52,950
save it and refresh. Okay,
537
00:35:52,951 --> 00:35:57,540
I think that's pretty good. But we
also noticed that our border's a little
538
00:35:57,541 --> 00:36:01,380
weird. So on the top it looks like it's
a darker, it's a lighter shade of blue,
539
00:36:02,010 --> 00:36:05,730
and at the bottom it's kind of a
darker shade of blue. So to fix that,
540
00:36:05,731 --> 00:36:10,560
we're going to set the border style to be
541
00:36:10,620 --> 00:36:12,510
a solid color.
542
00:36:13,950 --> 00:36:16,200
Let's save this and refresh.
543
00:36:16,740 --> 00:36:19,440
And now we get a solid color all around.
544
00:36:20,460 --> 00:36:25,230
The next thing we can change is our border
looks a little bit thick compared to
545
00:36:25,590 --> 00:36:30,270
the design, so we're going to
change the border dash width.
546
00:36:31,380 --> 00:36:34,530
So you'll see that a lot of these
styles are pretty self-explanatory.
547
00:36:35,820 --> 00:36:38,670
So we're going to set the border
width to let's say one pixel.
548
00:36:39,930 --> 00:36:44,040
Let's save it and refresh.
Okay, so that looks pretty good.
549
00:36:45,630 --> 00:36:47,580
Next we're going to set the tex color.
550
00:36:48,150 --> 00:36:52,290
So we're going to set the tex color to
blue and have it the same as our border.
551
00:36:53,220 --> 00:36:58,060
So remember, the property to set
Tex color is called color colon,
552
00:36:58,680 --> 00:37:01,290
and we're going to copy
this color down here,
553
00:37:03,540 --> 00:37:07,440
save it and refresh. Okay, so that looks,
554
00:37:07,650 --> 00:37:10,080
it's a little light,
but I think it's okay.
555
00:37:11,640 --> 00:37:14,370
Now we're going to set
the height and the width.
556
00:37:15,300 --> 00:37:20,280
So let's set the height to be
something like 36 pixels to
557
00:37:20,281 --> 00:37:21,600
match our subscribe button
558
00:37:24,840 --> 00:37:28,080
refresh. Okay, and now we're
going to set the width.
559
00:37:28,560 --> 00:37:32,790
So let's try, I don't know, 60 pixels.
560
00:37:32,850 --> 00:37:36,570
Let's see how that looks.
Save and refresh. Okay,
561
00:37:36,571 --> 00:37:40,890
I'm going to set it to maybe 62.
562
00:37:41,200 --> 00:37:45,390
Okay, let's save and refresh. And again,
563
00:37:45,400 --> 00:37:47,460
we're going to set some rounded corners.
564
00:37:47,880 --> 00:37:51,510
So that is border dash radius,
565
00:37:52,350 --> 00:37:56,580
two pixels. We're going
to save it and refresh.
566
00:37:57,360 --> 00:38:00,150
And now we're almost there
to matching this design.
567
00:38:01,440 --> 00:38:06,210
The last one we're going to set is
cursor pointer to get that nice hand
568
00:38:06,211 --> 00:38:08,370
pointer when we're
hovering over the button.
569
00:38:08,820 --> 00:38:11,790
So refresh now when we're
hovering over the join button,
570
00:38:11,820 --> 00:38:13,650
we have this nice pointer icon.
571
00:38:15,690 --> 00:38:18,660
So another thing we notice is that
there's a lot of space between these two
572
00:38:18,661 --> 00:38:21,150
buttons and there's not a
lot of space between ours.
573
00:38:21,750 --> 00:38:26,250
So in CSS space is called
margin. So to add space,
574
00:38:26,251 --> 00:38:31,110
we're going to add some margin. So
let's go to the subscribe button styles.
575
00:38:31,770 --> 00:38:36,490
And we're going to add
some margin dash, right?
576
00:38:37,630 --> 00:38:41,710
So we're going to add some margin or
some space to the right of this button.
577
00:38:42,780 --> 00:38:46,240
And we're going to set this
space to maybe eight pixels.
578
00:38:46,270 --> 00:38:49,180
Let's see how that
looks. Save and refresh,
579
00:38:49,690 --> 00:38:53,440
and that looks pretty good to me. So
now we're done with the join button.
580
00:38:55,120 --> 00:38:59,230
Lastly, we're going to create this tweet
button. Let's go back into our code.
581
00:38:59,770 --> 00:39:02,950
And remember, our general
technique is to number one,
582
00:39:02,951 --> 00:39:06,520
create the element with
html, and then number two,
583
00:39:06,760 --> 00:39:09,070
style it with CSS one by one.
584
00:39:09,940 --> 00:39:14,230
So we're going to create
a button with a text
585
00:39:14,890 --> 00:39:19,360
tweet. I'm going to move my editor a
little bit to the right here so we can see
586
00:39:19,361 --> 00:39:21,580
it. I'll move this here as well.
587
00:39:23,620 --> 00:39:24,910
And let's refresh your page.
588
00:39:25,330 --> 00:39:29,560
So now this button has the same style
as a join button because it has a join
589
00:39:29,561 --> 00:39:32,800
button class, and that's
being targeted up here.
590
00:39:33,700 --> 00:39:35,050
So instead of the join button,
591
00:39:35,500 --> 00:39:40,330
we're going to give a class
or a label of tweet button.
592
00:39:42,070 --> 00:39:45,550
Now save and refresh. And now
we're back to the default styles.
593
00:39:46,240 --> 00:39:50,710
So in our css, we're going to write some
code. We're going to target the class.
594
00:39:51,070 --> 00:39:53,320
So we start with a dot. To target a class,
595
00:39:53,800 --> 00:39:57,490
we're going to target
the tweet button class.
596
00:39:59,890 --> 00:40:01,420
So just like our other buttons,
597
00:40:01,630 --> 00:40:05,980
we're going to adjust the style of this
button one by one until we match our
598
00:40:05,981 --> 00:40:10,840
design. So let's start off
with the background dash color.
599
00:40:12,370 --> 00:40:14,860
That set us to blue to start off with.
600
00:40:15,520 --> 00:40:19,570
Now I'm going to try my best to match
the Twitter blue that we have here.
601
00:40:20,200 --> 00:40:22,900
So I'm going to pick something like this,
602
00:40:23,710 --> 00:40:27,130
and I think that looks pretty good.
603
00:40:27,850 --> 00:40:32,110
Save it and refresh. Okay,
604
00:40:32,440 --> 00:40:34,720
we'll leave it like that for
now. We might adjust it later.
605
00:40:35,650 --> 00:40:38,240
Let's change the color now to white.
606
00:40:39,250 --> 00:40:42,640
So that'll change the text color. Okay,
607
00:40:43,420 --> 00:40:44,860
let's get rid of the border
608
00:40:48,400 --> 00:40:49,300
refresh and save.
609
00:40:50,140 --> 00:40:54,700
Let's give it a height of 36
610
00:40:54,701 --> 00:40:58,360
pixels to match our other buttons.
611
00:41:00,010 --> 00:41:04,690
And the color's a little bit off, so
I'm going to adjust it just a bit.
612
00:41:04,720 --> 00:41:07,870
Maybe it should be a
little more like this.
613
00:41:09,100 --> 00:41:12,880
Save it refresh. Okay, I'm
pretty happy with this.
614
00:41:13,540 --> 00:41:17,380
Now we're going to
adjust the width to maybe
615
00:41:17,470 --> 00:41:21,040
105. Let's see how that looks.
616
00:41:22,480 --> 00:41:25,690
Okay, that's a little too
much. Let's adjust it to 80.
617
00:41:28,810 --> 00:41:31,390
Let's adjust it to 70. So as you can see,
618
00:41:31,400 --> 00:41:35,420
there's a lot of trial and error
when we're working with c s s. Now,
619
00:41:35,421 --> 00:41:39,590
to get this rounded effect,
we can set a border radius.
620
00:41:40,520 --> 00:41:44,780
Let's start with two pixels. If we
refresh, we get rounded corners.
621
00:41:45,230 --> 00:41:49,970
If we start increasing the pixels for the
border radius, let's save and refresh.
622
00:41:50,600 --> 00:41:52,520
It starts getting rounder and rounder.
623
00:41:53,810 --> 00:41:58,310
So the trick to getting these
round buttons is we have
to set the border radius
624
00:41:58,460 --> 00:42:03,200
to half the height or the width,
whichever is lower. So in this case,
625
00:42:03,201 --> 00:42:07,610
the height is 36. If we set the borderer
radius to half of that, which is 18,
626
00:42:08,390 --> 00:42:12,530
save and refresh. That's how
we get this rounded color.
627
00:42:13,400 --> 00:42:16,310
The last thing we're going to
do is to bold the text in here.
628
00:42:18,080 --> 00:42:21,560
So in our design, this tweet
text here is very bold,
629
00:42:22,190 --> 00:42:25,280
so we're going to make our
font bold as well. So do that.
630
00:42:25,290 --> 00:42:29,360
We're going to set this
property called font dash. Wait,
631
00:42:30,200 --> 00:42:34,610
I'm going to set it to
bold save and refresh.
632
00:42:35,750 --> 00:42:36,950
Okay, looks pretty good.
633
00:42:37,010 --> 00:42:39,950
It looks like this font is
actually a little bigger than ours.
634
00:42:40,430 --> 00:42:43,730
So let's actually set the font dash size,
635
00:42:44,480 --> 00:42:47,630
set it to maybe 15, see how that looks,
636
00:42:49,640 --> 00:42:53,630
save and refresh. Okay, I
think that looks pretty close.
637
00:42:53,810 --> 00:42:57,470
I'm going to change the width to maybe 74.
638
00:42:58,130 --> 00:43:02,180
See how that looks? Okay, so
I think this is good enough.
639
00:43:02,690 --> 00:43:05,540
Currently we're just trying
to copy things by eye. Later.
640
00:43:05,541 --> 00:43:09,320
I'll show you a technique of how to copy
these colors and measurements exactly,
641
00:43:09,740 --> 00:43:10,190
but for now,
642
00:43:10,191 --> 00:43:13,910
it's good enough to be able to achieve
these designs just by looking at them.
643
00:43:15,560 --> 00:43:19,550
So the last thing for this button
is to add the cursor pointer.
644
00:43:20,420 --> 00:43:24,770
Let's save it and refresh. So
if we hover over this button,
645
00:43:24,800 --> 00:43:29,780
we now get a nice pointer for our cursor.
So the last thing I'm going to adjust
646
00:43:29,781 --> 00:43:32,960
here is the spacing between
these two buttons. Remember,
647
00:43:32,961 --> 00:43:35,210
spacing and CSS is called margin.
648
00:43:35,750 --> 00:43:39,460
So we're going to add to
the join button. Actually,
649
00:43:39,470 --> 00:43:43,400
let's add it to the tweet button just
for practice. We're going to add spacing.
650
00:43:43,401 --> 00:43:44,720
So we're going to add margin
651
00:43:46,460 --> 00:43:49,310
to the left colon,
652
00:43:49,490 --> 00:43:53,870
and let's make it eight pixels like
we had it for the subscribe button.
653
00:43:55,070 --> 00:43:58,880
Let's save it and
refresh. And there we go.
654
00:43:59,390 --> 00:44:04,340
So we took our basic buttons and we
were able to copy these really nice
655
00:44:04,341 --> 00:44:06,620
looking designs just by looking at them.
656
00:44:07,040 --> 00:44:11,660
And the technique that we use for doing
this is first we create the element with
657
00:44:12,020 --> 00:44:12,853
html,
658
00:44:13,490 --> 00:44:18,440
and then we style it with CSS one by
one until it looks close enough to
659
00:44:18,441 --> 00:44:19,273
our design.
660
00:44:22,730 --> 00:44:26,900
So here are a bunch of exercises from
other popular websites that you can try
661
00:44:26,901 --> 00:44:27,733
out for yourself.
662
00:44:28,370 --> 00:44:33,150
This is a good challenge for you to be
able to look at a website by I and use
663
00:44:33,151 --> 00:44:35,580
CSS to copy the styles that you see.
664
00:44:42,150 --> 00:44:44,910
In this lesson, we're going to
learn some intermediate CSS skills,
665
00:44:45,120 --> 00:44:48,450
such as how to create hovers,
transitions and shadows.
666
00:44:49,020 --> 00:44:52,770
For most buttons you see on the internet,
if we hover over them with our mouse,
667
00:44:53,040 --> 00:44:56,430
they change their style slightly,
some of them get darker,
668
00:44:56,490 --> 00:45:00,510
some of them get lighter. We're going
to learn how to do that in our code.
669
00:45:02,580 --> 00:45:05,730
So we're going to use the same
exercise as before. As a reminder,
670
00:45:05,731 --> 00:45:09,600
you can find it at super
simple.dev/exercises/buttons.
671
00:45:11,520 --> 00:45:15,540
These buttons, when we hover over
them, they actually change their style.
672
00:45:16,260 --> 00:45:20,640
So this is going to help us practice
learning about hovers. In addition,
673
00:45:20,940 --> 00:45:23,220
you'll notice that if we hover in and out,
674
00:45:23,550 --> 00:45:26,970
they change their style smoothly so
we can also learn about transitions.
675
00:45:27,300 --> 00:45:29,730
And lastly, this tweet
button, if we hover over it,
676
00:45:30,090 --> 00:45:34,320
it casts a little bit of a shadow,
so that'll help us practice shadows.
677
00:45:37,230 --> 00:45:40,770
But first, let's work on the hover
styles for the subscriber button.
678
00:45:41,820 --> 00:45:45,540
Let's go into our code and find the
styles for the subscribe button,
679
00:45:46,350 --> 00:45:50,370
which is everything here. And
now to create a hover effect,
680
00:45:50,940 --> 00:45:53,370
we're going to create a new block of css.
681
00:45:55,710 --> 00:45:57,810
We're going to use a.to target a class.
682
00:45:57,930 --> 00:46:02,220
So this time we're still targeting
the subscribe dash button,
683
00:46:03,750 --> 00:46:08,340
but this time we're going to
add colon hover, open bracket,
684
00:46:08,490 --> 00:46:09,323
close bracket.
685
00:46:10,650 --> 00:46:15,480
So inside these are styles that will
apply only when we hover over the button.
686
00:46:16,050 --> 00:46:20,190
That's what this colon
hover means. For example,
687
00:46:20,580 --> 00:46:24,810
we can set the background
dash color two green.
688
00:46:26,910 --> 00:46:30,120
Now let's save our file
and refresh the page.
689
00:46:31,440 --> 00:46:34,620
And when we hover over this button,
you'll notice that it's green.
690
00:46:35,340 --> 00:46:38,790
So the way that this works is
that if we are not hovering over,
691
00:46:39,480 --> 00:46:42,720
all of these styles apply. So
the background color is red.
692
00:46:43,440 --> 00:46:45,180
If we are hovering over the button,
693
00:46:45,660 --> 00:46:49,140
these styles now apply in
addition to these styles.
694
00:46:49,500 --> 00:46:52,470
So we're essentially adding
extra styles when we hover.
695
00:46:53,340 --> 00:46:56,460
So this colon hover is
known as a pseudo class.
696
00:46:57,660 --> 00:47:02,490
It basically adds extra styles in a
certain situation. So in this case,
697
00:47:02,550 --> 00:47:04,740
it's going to add extra
styles when we hover.
698
00:47:06,000 --> 00:47:10,530
Another example of a pseudo
class is dot subscribe button
699
00:47:11,130 --> 00:47:12,630
colon active.
700
00:47:14,160 --> 00:47:18,420
So the active pseudo class activates
when we click on the element.
701
00:47:19,590 --> 00:47:24,450
So when we click on the button, we can
set the background dash color to blue.
702
00:47:26,070 --> 00:47:30,670
Let's save this and refresh.
Now when we hover over,
703
00:47:31,360 --> 00:47:34,360
we're going to apply these styles. So the
background color is going to be green,
704
00:47:34,720 --> 00:47:39,340
and then when we click, we're
going to apply the active styles,
705
00:47:39,640 --> 00:47:41,440
and then the background
color is going to be blue.
706
00:47:43,330 --> 00:47:47,170
So let's look at our design and see
what kind of hover styles we have.
707
00:47:48,010 --> 00:47:51,220
Let's refresh. So when we hover
over our subscribe button,
708
00:47:51,790 --> 00:47:56,320
it seems to turn a little bit
more light, and if we click it,
709
00:47:57,070 --> 00:47:58,330
it becomes even lighter.
710
00:47:59,140 --> 00:48:04,120
So the way to make our button lighter is
using a new property that I'm going to
711
00:48:04,150 --> 00:48:08,950
introduce. So let's get rid of these
for now. Let's save and refresh.
712
00:48:09,370 --> 00:48:11,590
So we got rid of those
pseudo classs styles.
713
00:48:13,330 --> 00:48:16,720
We're going to set a CSS
property called opacity.
714
00:48:18,580 --> 00:48:22,630
So opacity tells us how
SeeThrough and HTML element is.
715
00:48:23,110 --> 00:48:25,780
It takes a value between zero and one.
716
00:48:26,950 --> 00:48:30,970
A value of one means that this
element is completely normal.
717
00:48:31,120 --> 00:48:35,830
So if we save this and refresh, you
can see that if we hover over it,
718
00:48:35,831 --> 00:48:39,160
it's completely normal. And
as we decrease the opacity,
719
00:48:39,400 --> 00:48:41,020
let's decrease it to 0.7.
720
00:48:43,360 --> 00:48:44,950
The elements start to fade.
721
00:48:46,030 --> 00:48:49,210
So if we decrease it even more to 0.3
722
00:48:51,070 --> 00:48:53,410
refresh, now it's even more faded.
723
00:48:53,920 --> 00:48:57,250
So the opacity is used
to fade out an element.
724
00:48:57,580 --> 00:49:00,580
If we go from one to zero, the
element's going to fade out.
725
00:49:01,810 --> 00:49:04,690
So if we said it's a zero and refresh,
726
00:49:05,350 --> 00:49:07,960
now it's basically completely
transparent and see through.
727
00:49:10,090 --> 00:49:12,070
If the opacity goes from zero to one,
728
00:49:12,130 --> 00:49:14,560
that means the element's
going to start to fade in.
729
00:49:14,890 --> 00:49:18,760
So that's how opacity works
for now. If we hover over it,
730
00:49:18,790 --> 00:49:22,960
let's set the opacity to maybe 0.8.
731
00:49:24,250 --> 00:49:28,240
So it's going to be a little bit see
through, but not totally see through.
732
00:49:28,241 --> 00:49:32,770
So let's refresh and hover over it. Okay,
733
00:49:33,250 --> 00:49:38,050
let's look at our design. So that looks
pretty close to what we have next,
734
00:49:38,051 --> 00:49:42,670
let's set the active styles. So in
our design, if we click on this,
735
00:49:42,730 --> 00:49:47,620
it gets even lighter. So we're going to
set an even lower opacity to make our
736
00:49:47,621 --> 00:49:50,230
button fade out even
more. When we click on it,
737
00:49:51,340 --> 00:49:56,230
let's set it to something like 0.4
738
00:49:57,490 --> 00:50:00,970
or 0.5. Let's say save it and refresh.
739
00:50:01,570 --> 00:50:04,060
Now when we hover over
it, now when we click,
740
00:50:04,690 --> 00:50:07,780
the button gets lighter and we
can compare that to our design,
741
00:50:08,830 --> 00:50:10,060
and that looks pretty good to me.
742
00:50:11,740 --> 00:50:14,470
Now we're going to work on the
hover styles for our join button.
743
00:50:15,070 --> 00:50:19,360
So if we look at our design, the colors
for this drawing button sort of inverts.
744
00:50:19,540 --> 00:50:23,860
So the background color and the text
color, they reverse. So to do that,
745
00:50:23,861 --> 00:50:26,950
we're going to go into
our code, and again,
746
00:50:26,960 --> 00:50:31,790
we're going to target the
join button with a dot join
747
00:50:31,791 --> 00:50:32,623
button.
748
00:50:33,380 --> 00:50:37,520
And we're going to add a pseudo
class called colon hover.
749
00:50:39,260 --> 00:50:43,790
And now all the styles inside here will
apply when we hover over this button.
750
00:50:44,930 --> 00:50:47,840
So when we hover over it, we
want to invert the colors.
751
00:50:48,200 --> 00:50:53,000
So we want to set the
background dash color to
752
00:50:53,001 --> 00:50:54,920
our text color, which is this
753
00:50:57,230 --> 00:50:58,580
copy paste.
754
00:51:00,530 --> 00:51:05,480
And we also want to set the text
color to our background color.
755
00:51:05,540 --> 00:51:09,440
So we're going to switch them
up. Let's copy paste here,
756
00:51:10,490 --> 00:51:12,050
save it and refresh.
757
00:51:14,120 --> 00:51:17,690
And now when we hover over our join
button, that looks pretty good.
758
00:51:20,270 --> 00:51:22,340
The next thing is when
we click the join button,
759
00:51:22,360 --> 00:51:24,020
you'll notice that it also fades out.
760
00:51:24,410 --> 00:51:28,070
So we're going to add an active
pseudo class to this button as well.
761
00:51:28,850 --> 00:51:33,500
So target the join button class
and add a pseudo class called
762
00:51:33,680 --> 00:51:34,513
active.
763
00:51:35,300 --> 00:51:39,050
So these styles will activate
when we click this element.
764
00:51:40,130 --> 00:51:44,480
So let's set the opacity to maybe 0.7,
765
00:51:44,481 --> 00:51:48,960
maybe save it, refresh, click it. Okay,
766
00:51:50,330 --> 00:51:53,030
so I think that looks close
enough. So 0.7 looks pretty good.
767
00:51:55,130 --> 00:51:59,990
So that is how we set hover styles and
other pseudo classes with our CSS code.
768
00:52:00,620 --> 00:52:04,670
Next, we're going to learn
how to transition smoothly
between these two styles.
769
00:52:05,060 --> 00:52:09,080
So for example, if we go back into our
project and we hover over this button,
770
00:52:09,560 --> 00:52:13,700
you notice that the background color
and the text color change smoothly,
771
00:52:16,160 --> 00:52:19,730
but for our colors, it
changes almost instantly.
772
00:52:19,910 --> 00:52:24,350
So how do we make this
transition? So to do that,
773
00:52:24,351 --> 00:52:26,990
we're going to scroll up to
our subscribe button. First,
774
00:52:28,970 --> 00:52:31,910
we're going to add a
property called transition.
775
00:52:33,680 --> 00:52:35,810
So transition property takes two values.
776
00:52:36,260 --> 00:52:39,920
The first one is what we want
to transition. So in our case,
777
00:52:40,250 --> 00:52:43,040
we want to transition
the opacity smoothly.
778
00:52:43,460 --> 00:52:47,480
So we want to smoothly fade out the
button when we hover over it instead of
779
00:52:47,690 --> 00:52:51,530
instantaneously. So let's
transition the opacity.
780
00:52:53,750 --> 00:52:57,140
And the second value is how
long this transition will take.
781
00:52:58,400 --> 00:53:01,910
For example, let's set it to
one s, which is one second,
782
00:53:02,780 --> 00:53:07,310
end it with a semicolon and
save. Let's go back and refresh.
783
00:53:08,720 --> 00:53:10,370
And now when we hover over our button,
784
00:53:10,530 --> 00:53:13,580
you'll notice that the
opacity changes smoothly.
785
00:53:14,240 --> 00:53:15,710
Now it might be a little bit hard to see,
786
00:53:15,711 --> 00:53:19,400
so let's change this to
0.1 to show you the effect
787
00:53:20,840 --> 00:53:21,673
refresh.
788
00:53:22,220 --> 00:53:25,980
So now you can see that the opacity
is changing smoothly over one second.
789
00:53:29,040 --> 00:53:33,600
So this is how you transition between
different styles when you're hovering over
790
00:53:33,601 --> 00:53:36,600
them. Now let's set it back to 0.8,
791
00:53:37,200 --> 00:53:40,560
and we're going to change one second
because it's a little bit too long.
792
00:53:41,370 --> 00:53:44,880
So usually a good transition
duration is something like
793
00:53:45,060 --> 00:53:49,470
0.15 seconds. So it's pretty fast,
794
00:53:49,471 --> 00:53:51,720
but it's not too fast
and it's not too slow.
795
00:53:52,620 --> 00:53:56,130
Let's go to our webpage and
refresh. Now when we hover over it,
796
00:53:56,520 --> 00:53:59,940
we get a nice smooth transition. It
might be a little bit hard to tell,
797
00:54:00,300 --> 00:54:02,160
but we do get a nice smooth transition
798
00:54:03,870 --> 00:54:07,230
instead of what we had before,
which transitioned immediately.
799
00:54:08,070 --> 00:54:09,420
Let's work on the join button now.
800
00:54:09,421 --> 00:54:12,300
So this one is a lot easier
to see the difference.
801
00:54:13,530 --> 00:54:16,290
Let's scroll down to the
join button. And again,
802
00:54:16,300 --> 00:54:21,030
we're going to add a transition.
So we're going to add transition,
803
00:54:23,010 --> 00:54:24,480
and we're going to give it two values,
804
00:54:24,870 --> 00:54:28,140
what we want to transition and how long.
First,
805
00:54:28,141 --> 00:54:33,090
let's transition the background
dash color and how long we're
806
00:54:33,350 --> 00:54:36,150
going to transition for
one second. As an example,
807
00:54:38,070 --> 00:54:41,640
let's save our file and refresh. Now,
808
00:54:41,641 --> 00:54:43,110
when we hover over the join button,
809
00:54:43,350 --> 00:54:46,620
the background color changes
smoothly over one second,
810
00:54:47,520 --> 00:54:50,370
but you notice that the tax
color changes immediately,
811
00:54:50,820 --> 00:54:54,450
whereas the tax color here
also kind of transitions.
812
00:54:55,890 --> 00:54:58,770
So to make the tax color
transition as well,
813
00:54:59,730 --> 00:55:02,370
we need to add another
property to transition.
814
00:55:02,790 --> 00:55:04,980
So we can actually transition
multiple properties.
815
00:55:05,340 --> 00:55:09,720
We just have to separate it with a
comma. So if we have a comma here,
816
00:55:09,730 --> 00:55:12,930
we can add another property
to transition. This time,
817
00:55:12,940 --> 00:55:17,790
I'm going to transition the color, and
we're also going to give it a duration,
818
00:55:17,910 --> 00:55:22,770
which is one second. So how long it
takes to transition this property,
819
00:55:24,090 --> 00:55:28,530
save it, and refresh. Now,
when we hover over this button,
820
00:55:28,920 --> 00:55:33,780
it will transition both background
color and the color smoothly over one
821
00:55:33,781 --> 00:55:37,530
second.
And that's basically how transitions work.
822
00:55:38,340 --> 00:55:43,290
So sometimes you might be tempted to
put this transition property into the
823
00:55:43,291 --> 00:55:48,150
hover because you think that we
want to transition when we hover,
824
00:55:48,180 --> 00:55:52,860
so we have to put it here. Now, the
problem with this is that if we refresh,
825
00:55:53,520 --> 00:55:55,740
when we hover over the
button, everything looks good.
826
00:55:56,070 --> 00:56:00,090
But as soon as we hover out,
these styles change immediately.
827
00:56:00,600 --> 00:56:03,960
And that's because remember, these
styles only apply when we're hovering.
828
00:56:04,590 --> 00:56:07,530
So if we are hovering,
then we have a transition.
829
00:56:08,010 --> 00:56:09,750
But as soon as we take off the hover,
830
00:56:10,500 --> 00:56:12,990
it's the same thing as
having no transition at all.
831
00:56:13,170 --> 00:56:16,270
So that's one common pitfall
of the transition property.
832
00:56:17,070 --> 00:56:19,200
So let's move it back
here where it should be.
833
00:56:19,980 --> 00:56:24,730
So just make sure that you put the
transition always in sort of base CSS
834
00:56:24,731 --> 00:56:25,563
style.
835
00:56:28,060 --> 00:56:31,180
The last thing we're going to learn in
this lesson is how to create shadows.
836
00:56:31,750 --> 00:56:35,890
If we go to our project and we look at
our design, I'm going to zoom in here.
837
00:56:36,790 --> 00:56:40,810
When I hover over the tweet button, it
creates a faint shadow under the button.
838
00:56:40,960 --> 00:56:44,950
So we're going to learn how to create
this. So let's zoom out for now.
839
00:56:46,420 --> 00:56:49,660
We're going to go down to
the tweet button styles,
840
00:56:50,200 --> 00:56:52,960
and the shadow is just
another CSS property.
841
00:56:53,410 --> 00:56:57,580
So the property for a
shadow is box dash shadow
842
00:56:59,110 --> 00:57:03,490
colon. Now, box shadow
actually takes four values.
843
00:57:04,210 --> 00:57:07,750
So I'm going to set the
values to zero for now,
844
00:57:08,890 --> 00:57:12,640
and then we're going to change them
one by one to see how they work.
845
00:57:13,570 --> 00:57:18,520
Let's save this and refresh.
And now we do have a shadow,
846
00:57:18,550 --> 00:57:21,310
but we can't see it because it's
right underneath the button.
847
00:57:23,350 --> 00:57:26,980
So the first value here determines
the horizontal position of the shadow.
848
00:57:27,850 --> 00:57:31,780
For example, I can set it
to 10 pixels, and if I save,
849
00:57:32,620 --> 00:57:36,130
the shadow will appear
10 pixels to the right.
850
00:57:37,180 --> 00:57:41,800
The second value sets the vertical
position of the shadow. For example,
851
00:57:41,801 --> 00:57:45,730
if I set it to 10 pixels
in the second value,
852
00:57:46,270 --> 00:57:47,800
it will push a 10 pixels down.
853
00:57:48,850 --> 00:57:53,350
So now you can see we actually do have
a shadow 10 pixels to the right and 10
854
00:57:53,351 --> 00:57:54,820
pixels down from the button.
855
00:57:55,930 --> 00:57:58,360
Now the third value here is the blur.
856
00:57:59,050 --> 00:58:01,990
So if we set the blur to maybe 10 pixels,
857
00:58:02,800 --> 00:58:07,600
save and refresh, now the
shadow becomes blurred,
858
00:58:08,350 --> 00:58:10,870
and the last valley is
obviously the color.
859
00:58:11,200 --> 00:58:13,300
So we can actually change
it to whatever we want.
860
00:58:13,870 --> 00:58:18,310
We can actually change it to
something like red, save it refresh,
861
00:58:18,730 --> 00:58:20,200
and we get a red shadow.
862
00:58:21,010 --> 00:58:24,430
So this is basically how shadows work.
We have a horizontal position,
863
00:58:25,510 --> 00:58:30,190
a vertical position, blur
and color. So don't worry,
864
00:58:30,191 --> 00:58:31,750
the more that you work with shadows,
865
00:58:31,810 --> 00:58:34,810
the more you'll get familiar with
what these four values can do.
866
00:58:35,800 --> 00:58:38,170
So let's try creating a
more realistic shadow.
867
00:58:38,950 --> 00:58:41,590
Usually shadows aren't red or any color.
868
00:58:42,100 --> 00:58:45,790
They're usually kind of a darker
shade of whatever they're covering.
869
00:58:47,050 --> 00:58:48,340
So to create a color like that,
870
00:58:48,400 --> 00:58:52,780
we're going to need a new way of
measuring color. So let's get rid of this,
871
00:58:52,840 --> 00:58:56,530
and we're going to use
something called R G B A.
872
00:58:58,510 --> 00:59:01,630
Rrg. B A is the same thing as rrgb,
873
00:59:02,290 --> 00:59:04,150
except there's an A value.
874
00:59:04,720 --> 00:59:08,380
So this a value essentially
means the opacity of the color,
875
00:59:08,650 --> 00:59:09,730
how SeeThrough it is.
876
00:59:10,780 --> 00:59:13,930
We can set the RGB 2, 0, 0, 0.
877
00:59:14,650 --> 00:59:16,660
That gets us to black as we learned.
878
00:59:17,860 --> 00:59:22,670
And then the fourth value is our A
value. If we set it to one and save,
879
00:59:23,120 --> 00:59:27,560
this is going to be pure black.
But as we decrease a value,
880
00:59:27,830 --> 00:59:32,210
the color is going to get more and more
faded out and more and more transparent.
881
00:59:32,900 --> 00:59:36,200
So if we decrease it to 0.6,
882
00:59:37,460 --> 00:59:39,080
save and refresh.
883
00:59:39,710 --> 00:59:42,830
Now this color is getting more
transparent and faded out.
884
00:59:44,240 --> 00:59:48,140
So a pretty natural color for
shadow is something pretty faint,
885
00:59:48,200 --> 00:59:52,220
like 0.15. So for shadows,
886
00:59:52,230 --> 00:59:54,440
we usually don't want
it to be too noticeable.
887
00:59:54,710 --> 00:59:57,050
Shadows are best when they're very subtle.
888
00:59:58,340 --> 01:00:01,790
And now we kind of want to move the shadow
a little bit closer to the button so
889
01:00:01,791 --> 01:00:02,990
it looks a little more natural.
890
01:00:02,991 --> 01:00:07,940
So let's actually move it
maybe five pixels and five
891
01:00:07,941 --> 01:00:12,140
pixels. Let's see how that
looks. Save it and refresh. Okay,
892
01:00:12,150 --> 01:00:13,250
I think that looks pretty good.
893
01:00:14,480 --> 01:00:19,040
So that's how we create a natural looking
shadow with the box shadow property.
894
01:00:19,520 --> 01:00:24,080
We have four values, the horizontal
position, vertical position, the blur,
895
01:00:24,380 --> 01:00:26,960
and the color measured.
With R G B A,
896
01:00:27,710 --> 01:00:31,190
the value means opacity or
how C through this color is.
897
01:00:32,870 --> 01:00:37,040
The final step of this lesson is to only
make this shadow appear when we hover
898
01:00:37,041 --> 01:00:41,630
over the button. So for example,
for here, if we hover over,
899
01:00:41,960 --> 01:00:44,990
we can see the shadow. If
we're not, the shadow's gone.
900
01:00:45,080 --> 01:00:48,650
So this is another style of
button that we can create.
901
01:00:50,030 --> 01:00:53,930
So let's use what we
learned so far. Remember,
902
01:00:53,931 --> 01:00:56,420
we first use a.to target the class.
903
01:00:56,750 --> 01:00:59,960
So we're going to target
the tweet dash button class.
904
01:01:00,590 --> 01:01:04,580
We're going to add a pseudo
class here called hover,
905
01:01:06,050 --> 01:01:10,550
and then we're going to move our
shadow into the hover pseudo class.
906
01:01:10,940 --> 01:01:13,520
Let's cut and paste in here.
907
01:01:15,500 --> 01:01:19,370
So remember, the way this works
is that let's refresh first.
908
01:01:20,240 --> 01:01:23,870
If we are not hovering over the
button, we get all of these styles.
909
01:01:24,620 --> 01:01:28,100
If we are hovering over the button,
we're going to get these styles,
910
01:01:28,101 --> 01:01:29,030
these hover styles,
911
01:01:29,420 --> 01:01:32,930
as well as all of these. So these
styles get added on when we hover.
912
01:01:34,010 --> 01:01:37,700
So now when we refresh and
we hover over this button,
913
01:01:38,180 --> 01:01:41,840
we're going to get a pretty
subtle shadow. It's not perfect,
914
01:01:41,841 --> 01:01:44,150
but I think it's close
enough to what we want.
915
01:01:45,170 --> 01:01:48,020
Now the last thing we're going to
do is to transition the shadow.
916
01:01:49,070 --> 01:01:53,810
So we can actually transition the
shadow pretty easily by just adding the
917
01:01:54,350 --> 01:01:55,430
transition property,
918
01:01:57,920 --> 01:02:00,800
and we're going to tell it what we
want to transition and how long.
919
01:02:01,400 --> 01:02:03,830
So you want to transition
the box dash shadow,
920
01:02:05,120 --> 01:02:09,710
and let's transition it to something
natural, like 0.15 seconds.
921
01:02:11,000 --> 01:02:15,740
Now save and refresh. Now,
when we hover over this button,
922
01:02:15,770 --> 01:02:19,190
we get a nice transition
on the shadow like this.
923
01:02:21,480 --> 01:02:21,690
All right,
924
01:02:21,691 --> 01:02:25,260
so the last thing we're going to do
is I realize I forgot to change the
925
01:02:25,640 --> 01:02:26,100
durations here.
926
01:02:26,101 --> 01:02:30,780
So let's change it to 0.15 and 0.15.
927
01:02:31,470 --> 01:02:33,060
Let's save it and refresh.
928
01:02:34,380 --> 01:02:37,380
So now this looks something like
what we have in our designs.
929
01:02:39,090 --> 01:02:42,360
So we just learned some
intermediate H C M L skills,
930
01:02:42,690 --> 01:02:46,920
such as creating hover effects,
other pseudo classes, transitions,
931
01:02:47,040 --> 01:02:48,090
and shadows.
932
01:02:50,910 --> 01:02:54,750
Here are some more exercises from famous
websites that you can try to copy.
933
01:02:55,170 --> 01:02:57,810
This time. We're also going
to copy the hover styles.
934
01:03:00,690 --> 01:03:04,410
As always, you can find these solutions
and more exercises below the video.
935
01:03:12,960 --> 01:03:13,560
In this lesson,
936
01:03:13,561 --> 01:03:16,740
we're going to learn about one of the
most useful tools for web development
937
01:03:16,950 --> 01:03:18,420
called the Chrome Dev Tools,
938
01:03:18,780 --> 01:03:22,260
and we're going to use the dev tools
to get perfect colors for our buttons.
939
01:03:23,130 --> 01:03:25,350
So first of all, what
are the Chrome dev tools?
940
01:03:25,740 --> 01:03:29,040
So I find that it's all easier to
demonstrate it than to try to explain it.
941
01:03:29,430 --> 01:03:30,780
So let's go to our website
942
01:03:32,580 --> 01:03:37,410
and we're going to click in an
empty area and we're going to click
943
01:03:37,440 --> 01:03:41,760
inspect, and this will
open up the dev tools.
944
01:03:43,320 --> 01:03:48,240
So the cool thing about this is that we
can now see all the HTML on our page.
945
01:03:48,810 --> 01:03:51,660
If we draw down here, we
can see all the buttons.
946
01:03:52,530 --> 01:03:57,480
So this is a great way to visualize the
HTML as well as the CSS on our page.
947
01:03:57,840 --> 01:03:59,610
If I click into one of these buttons,
948
01:04:00,240 --> 01:04:04,920
I can see all the CSS that is
applied to this button. So what's
949
01:04:05,160 --> 01:04:09,090
better is that we can open the dev
tools in any website that we want,
950
01:04:09,360 --> 01:04:12,630
so we can actually open
it in super simple.dev
951
01:04:14,100 --> 01:04:18,480
and you can see all the HTML that is
on this website as well as all the
952
01:04:18,890 --> 01:04:19,650
css.
953
01:04:19,651 --> 01:04:22,950
So this is a really great tool where
you can open it in any website that you
954
01:04:22,951 --> 01:04:26,880
want and see the exact styles that
they're using on that website.
955
01:04:28,440 --> 01:04:32,100
The next feature I want to show you
is this pointer icon in the top left.
956
01:04:32,730 --> 01:04:36,090
So instead of trying to find
these buttons in all of this html,
957
01:04:36,540 --> 01:04:40,740
we can actually click this pointer
icon and it will let us hover over any
958
01:04:40,750 --> 01:04:43,380
element on the webpage
and show it down here.
959
01:04:43,920 --> 01:04:46,980
So if we hover over this
tweet button and click it,
960
01:04:47,610 --> 01:04:50,250
it will find the element
for us in the html.
961
01:04:51,390 --> 01:04:56,160
And now we can look at these styles
here to see what kind of styles and more
962
01:04:56,161 --> 01:04:56,560
importantly,
963
01:04:56,561 --> 01:05:00,930
what kind of background color is set on
this button so that we can get a perfect
964
01:05:00,960 --> 01:05:05,790
background color. So one thing to
note is that this background color is
965
01:05:05,791 --> 01:05:07,980
actually another way of measuring color.
966
01:05:08,490 --> 01:05:11,010
So currently we learned about rgb.
967
01:05:11,520 --> 01:05:15,480
Now we have another way of measuring
color, and this is called hex.
968
01:05:16,020 --> 01:05:20,020
It's basically the same as rgb.
The first two characters here,
969
01:05:20,050 --> 01:05:24,700
one in D represent how much red. The
second two represent how much green,
970
01:05:24,760 --> 01:05:29,080
and the third two represent how much
blue. So with a little bit of math,
971
01:05:29,081 --> 01:05:31,780
we can convert from hex to rgb.
972
01:05:33,220 --> 01:05:38,050
So I just google a hex
to RGB calculator and I
973
01:05:38,051 --> 01:05:42,700
find any calculator and
then I use it to convert
974
01:05:43,240 --> 01:05:44,080
the hex value.
975
01:05:44,081 --> 01:05:48,700
So I'm going to copy this into
the calculator and then convert it
976
01:05:49,330 --> 01:05:53,110
and it will give me the RGB value,
so it'll do that math for me.
977
01:05:54,280 --> 01:05:57,490
So that's just another way of
measuring color called hex.
978
01:05:58,450 --> 01:06:02,980
The next feature I want to show you in
the dev tools is this computer tab. So
979
01:06:02,981 --> 01:06:07,390
this tab actually shows us all the
final styles that are applied to this
980
01:06:07,391 --> 01:06:08,223
element.
981
01:06:08,530 --> 01:06:12,700
So we can actually scroll down here and
we can find the background color in the
982
01:06:12,701 --> 01:06:13,570
RGB value.
983
01:06:14,350 --> 01:06:17,770
We can also find things like the height,
984
01:06:17,980 --> 01:06:19,390
the final calculated height,
985
01:06:19,660 --> 01:06:23,860
the final calculated width so that we
can get the perfect size as well as the
986
01:06:23,861 --> 01:06:25,660
perfect background color.
987
01:06:26,860 --> 01:06:29,050
So let's actually just use
the background color here,
988
01:06:30,460 --> 01:06:34,540
and we're going to copy this
and paste this into our code.
989
01:06:35,140 --> 01:06:39,700
So we're going to get an exact color
instead of trying to guess it like we were
990
01:06:39,701 --> 01:06:43,750
before. So if I copy
and paste here, save it,
991
01:06:44,320 --> 01:06:45,460
and now refresh.
992
01:06:46,270 --> 01:06:49,840
Now our button has the exact
same color as what we have here.
993
01:06:51,130 --> 01:06:53,440
So the same thing happens
for the join button.
994
01:06:53,980 --> 01:06:58,420
Let's click this icon here and hover
over the join button to find it in the
995
01:06:58,421 --> 01:07:02,590
html click. And now we
can see all these styles,
996
01:07:02,860 --> 01:07:07,270
all the final computed styles on the
join button. So most importantly,
997
01:07:07,271 --> 01:07:12,190
we can find the order
color, which is this.
998
01:07:14,470 --> 01:07:15,400
Let's go into,
999
01:07:15,490 --> 01:07:19,570
let's copy it and put it into our CSS
so that we can get a perfect color.
1000
01:07:20,410 --> 01:07:23,890
End it with a semicolon to
follow the syntax rules.
1001
01:07:24,790 --> 01:07:27,940
Copy it there and copy it here.
1002
01:07:30,520 --> 01:07:33,070
Now we're going to save refresh,
1003
01:07:34,150 --> 01:07:39,130
and now our button color is going
to match the design. Exactly.
1004
01:07:40,390 --> 01:07:45,230
So that's how you use the dev tools
to get perfect color for our HTML
1005
01:07:45,240 --> 01:07:46,073
elements.
1006
01:07:48,040 --> 01:07:50,680
Now we're going to learn
about the CSS box model,
1007
01:07:51,010 --> 01:07:55,270
which basically allows us to add space
between our elements like this as well as
1008
01:07:55,271 --> 01:07:57,820
add space inside our
element to make it bigger.
1009
01:07:58,660 --> 01:08:02,980
The first part of the box model is
spacing on the outside of the element.
1010
01:08:03,370 --> 01:08:06,220
This is called margin.
If we look at our code,
1011
01:08:06,280 --> 01:08:08,800
we already worked with margin before here.
1012
01:08:08,801 --> 01:08:11,080
We set the margin right to eight pixels.
1013
01:08:11,860 --> 01:08:15,650
That means that we added space on the
outside of the button on the right of
1014
01:08:15,680 --> 01:08:20,450
eight pixels. If we change the margin
right to 30 pixels for example,
1015
01:08:21,260 --> 01:08:26,180
and save and refresh. Now there's
30 pixels of space on the outside,
1016
01:08:26,390 --> 01:08:31,130
on the right side of the button. So we
can add margin to all four directions,
1017
01:08:31,370 --> 01:08:33,649
top right, bottom and left.
1018
01:08:34,310 --> 01:08:38,090
Let's try adding margin to
the left side of the button.
1019
01:08:38,091 --> 01:08:41,750
This time we're going to add
margin left of 20 pixels,
1020
01:08:42,410 --> 01:08:44,240
save it and refresh.
1021
01:08:45,080 --> 01:08:49,490
And that adds space on the outside of
the button on the left of 20 pixels.
1022
01:08:50,240 --> 01:08:52,010
So that's basically how margin works.
1023
01:08:52,370 --> 01:08:55,370
It lets us add spacing on
the outside of the element.
1024
01:08:56,090 --> 01:08:59,840
The second part of the box model is
spacing on the inside of the element.
1025
01:09:00,170 --> 01:09:03,979
So basically all these spacing
in here around our text.
1026
01:09:05,330 --> 01:09:07,040
So currently if we look at our code,
1027
01:09:07,550 --> 01:09:10,069
we're setting the height
and width of our buttons.
1028
01:09:10,520 --> 01:09:13,370
And this is not actually a good idea.
I'll show you why.
1029
01:09:13,910 --> 01:09:18,830
I'm going to scroll down to the join
button because it's a little easier to
1030
01:09:18,831 --> 01:09:23,270
see and I'm going to
change the text to join my
1031
01:09:23,779 --> 01:09:26,868
channel, save it and refresh.
1032
01:09:27,710 --> 01:09:31,189
And you'll notice that the text is
actually overflowing the button like this,
1033
01:09:31,700 --> 01:09:33,380
and that's because if we scroll up,
1034
01:09:35,029 --> 01:09:36,738
we're setting the height and the width.
1035
01:09:37,100 --> 01:09:40,970
That means that we're forcing the button
to have a height of 36 pixels and a
1036
01:09:40,979 --> 01:09:45,319
width of 62 pixels. But here,
notice that our content is too big.
1037
01:09:45,950 --> 01:09:50,029
So what we want to do is to
remove these lines and save it
1038
01:09:50,960 --> 01:09:53,660
and refresh the page. And by default,
1039
01:09:53,661 --> 01:09:57,230
our button actually adjusts the size
automatically based on the content.
1040
01:09:58,190 --> 01:10:00,410
So now instead of setting
the height and the width,
1041
01:10:00,680 --> 01:10:04,940
we're going to achieve the same thing
by adding spacing on the inside of the
1042
01:10:04,941 --> 01:10:05,773
button.
1043
01:10:06,230 --> 01:10:10,910
So the spacing on the inside of the button
is called padding. Let's go into our
1044
01:10:10,911 --> 01:10:12,080
code and give it a try.
1045
01:10:13,190 --> 01:10:17,990
So we're going to add
padding dash left of 30
1046
01:10:18,080 --> 01:10:21,320
pixels, save it and refresh.
1047
01:10:22,400 --> 01:10:25,910
And you can see that padding add
spacing on the inside of the button.
1048
01:10:26,870 --> 01:10:29,720
And just like margin, we can set
padding in all four directions.
1049
01:10:30,080 --> 01:10:33,710
So let's try adding padding dash top
1050
01:10:35,160 --> 01:10:40,010
to 20 pixels, save that and refresh.
1051
01:10:41,240 --> 01:10:44,570
And now you can see that we added
padding on the top by 20 pixels.
1052
01:10:46,070 --> 01:10:50,000
So we can actually use the chrome dev
tools that we learned earlier to visualize
1053
01:10:50,001 --> 01:10:52,070
the margin and padding of our elements.
1054
01:10:52,700 --> 01:10:57,500
Let's go into a blank area of our webpage
and we're going to right click and
1055
01:10:57,501 --> 01:11:02,480
inspect and then click this top
left icon and then click our
1056
01:11:02,910 --> 01:11:03,743
subscribe button.
1057
01:11:04,310 --> 01:11:08,840
So I'm going to drag this down and then
we're going to go into the computed
1058
01:11:08,870 --> 01:11:09,703
tab.
1059
01:11:11,990 --> 01:11:16,110
So this section is basically the
box model. We have our margin,
1060
01:11:16,140 --> 01:11:18,210
which is a space on the
outside of the element.
1061
01:11:18,510 --> 01:11:21,960
You can see that highlighted
in orange. We have the border,
1062
01:11:21,990 --> 01:11:24,690
which we learned earlier,
and we have the padding,
1063
01:11:24,720 --> 01:11:27,060
which is the space on the
inside of the element,
1064
01:11:27,270 --> 01:11:30,600
which you can see highlighted
in green buttons by default,
1065
01:11:30,601 --> 01:11:35,400
have a padding of six pixels on the
left and right and one pixel on top and
1066
01:11:35,401 --> 01:11:36,233
bottom.
1067
01:11:37,170 --> 01:11:41,190
So let's click this top left again and
go to our drawing button and click this
1068
01:11:41,191 --> 01:11:45,690
button. In this example we have
padding on the top of 20 pixels,
1069
01:11:45,720 --> 01:11:49,590
which is what we have in our code. We
have padding on the left of 30 pixels,
1070
01:11:49,980 --> 01:11:51,210
also what we have in our code.
1071
01:11:51,390 --> 01:11:56,100
And then we have a default padding of
six pixels on the right and one pixel at
1072
01:11:56,101 --> 01:12:00,930
the bottom. And for this button we
have a border of one pixel wide,
1073
01:12:01,050 --> 01:12:02,790
which you can see here in our code.
1074
01:12:05,100 --> 01:12:08,550
So all of these combined
make up the c s s box model.
1075
01:12:08,940 --> 01:12:13,110
This basically determines how much space
and element takes up on the page and
1076
01:12:13,111 --> 01:12:15,420
how far it is away from other elements.
1077
01:12:18,060 --> 01:12:19,770
So now that we learned the box model,
1078
01:12:19,830 --> 01:12:22,740
we're going to use it to
recreate our design here.
1079
01:12:23,460 --> 01:12:27,120
So currently if we look at our
code, we're using height and width.
1080
01:12:27,450 --> 01:12:29,370
Let's replace this with the box model.
1081
01:12:30,180 --> 01:12:33,960
Let's get rid of this
and save it and refresh.
1082
01:12:35,010 --> 01:12:37,230
And now our buttons back
to what it was before.
1083
01:12:38,130 --> 01:12:42,090
And now we're going to add padding to
this button so that it matches the design
1084
01:12:42,570 --> 01:12:43,403
at the bottom here.
1085
01:12:45,060 --> 01:12:49,620
So let's add some padding dash top of 10
1086
01:12:49,621 --> 01:12:50,453
pixels.
1087
01:12:50,580 --> 01:12:54,930
So we'll add spacing on the inside of
the button at the top here of 10 pixels.
1088
01:12:55,560 --> 01:13:00,450
We're also going to add padding
dash bottom of 10 pixels.
1089
01:13:01,080 --> 01:13:04,320
So let's save that and refresh. Okay,
1090
01:13:04,350 --> 01:13:08,760
so now we have space at the top and
bottom, so that looks pretty close.
1091
01:13:09,210 --> 01:13:12,900
We're also going to add space on
the inside on the left, right?
1092
01:13:13,470 --> 01:13:18,360
So we're going to add
padding dash left of 16
1093
01:13:18,361 --> 01:13:22,470
pixels and padding on the right
1094
01:13:22,920 --> 01:13:24,510
of 16 pixels.
1095
01:13:25,290 --> 01:13:28,020
So let's save that and refresh.
1096
01:13:28,560 --> 01:13:31,770
And I think this looks close
enough. So using padding,
1097
01:13:31,771 --> 01:13:34,560
we added spacing on the
inside of our button.
1098
01:13:35,130 --> 01:13:40,050
And the good thing about this is that
if we change the text like this and save
1099
01:13:40,051 --> 01:13:44,220
it and refresh, the button
will resize with the text,
1100
01:13:44,430 --> 01:13:46,440
but it will keep the
spacing on the inside.
1101
01:13:47,370 --> 01:13:50,730
So using padding is a better
alternative to height and width.
1102
01:13:52,290 --> 01:13:56,580
So let's save that and refresh the page
1103
01:13:57,440 --> 01:14:00,630
and let's actually move these
buttons back closer together.
1104
01:14:01,110 --> 01:14:02,580
So currently if we scroll up,
1105
01:14:02,880 --> 01:14:07,500
we have margin on the right of 30 pixels.
So spacing on the
1106
01:14:07,501 --> 01:14:09,840
outside of the button on
the right of 30 pixels,
1107
01:14:10,530 --> 01:14:15,490
we're going to change back to eight
pixels so that it's closer like we have
1108
01:14:15,491 --> 01:14:20,140
in our design, save it and refresh. Okay,
1109
01:14:20,150 --> 01:14:21,160
so that looks pretty good.
1110
01:14:21,580 --> 01:14:24,880
Now one thing you'll notice is that our
buttons are not aligned with each other.
1111
01:14:25,270 --> 01:14:28,900
So the join button is all the way at
the top while our subscribe button is a
1112
01:14:28,901 --> 01:14:33,010
little bit below. So why is
this happening? By default,
1113
01:14:33,070 --> 01:14:36,970
the browser tries to align
our buttons based on the text.
1114
01:14:37,030 --> 01:14:40,570
So notice that the text
is in one line like this.
1115
01:14:41,050 --> 01:14:43,360
So that's the default
behavior of the browser.
1116
01:14:43,930 --> 01:14:47,320
This is because browsers in the
beginning were mostly text-based.
1117
01:14:48,100 --> 01:14:51,940
Now to override this behavior and
align everything to the top like we had
1118
01:14:51,941 --> 01:14:52,773
before,
1119
01:14:52,960 --> 01:14:57,190
we can go into our CSS and we're
going to add a property called
1120
01:14:57,640 --> 01:15:00,250
vertical dash Align,
1121
01:15:01,270 --> 01:15:06,130
and we're going to set this to top. So
instead of aligning the buttons based on
1122
01:15:06,160 --> 01:15:07,630
the text like this,
1123
01:15:07,930 --> 01:15:12,550
we're just going to align everything
to the top If we save that and
1124
01:15:12,551 --> 01:15:16,630
refresh. Now the subscribe
button is aligned to the top,
1125
01:15:16,840 --> 01:15:20,800
which is right there. Let's do the
same thing for the tweak button.
1126
01:15:21,550 --> 01:15:25,090
We're going to scroll down
and we're going to add
1127
01:15:25,870 --> 01:15:29,980
vertical dash align top here as well.
1128
01:15:30,550 --> 01:15:35,290
Save and refresh. And now
everything's aligned properly again.
1129
01:15:35,920 --> 01:15:37,360
Now let's work on the join button.
1130
01:15:37,870 --> 01:15:40,750
I'm going to scroll down and
remove this extra text here,
1131
01:15:43,090 --> 01:15:47,920
save it and refresh. And now we're going
to go to our CSS for the join button.
1132
01:15:47,980 --> 01:15:52,450
So I'll scroll up to right here and
we're going to adjust the padding.
1133
01:15:53,800 --> 01:15:57,100
So let's actually just borrow the padding
from the subscribe button because they
1134
01:15:57,101 --> 01:15:57,970
look pretty similar.
1135
01:15:58,540 --> 01:16:03,400
So I'll scroll up here
and copy these and just
1136
01:16:03,401 --> 01:16:05,800
move them down to the
joint button right here.
1137
01:16:07,330 --> 01:16:11,380
Save that and refresh. Okay,
so that looks pretty good,
1138
01:16:11,440 --> 01:16:13,960
except our joint button
looks a little bit off.
1139
01:16:14,020 --> 01:16:16,690
It looks a little bit taller
than our subscribe button,
1140
01:16:17,170 --> 01:16:21,220
and that's because the border actually
adds a little bit of size to this button,
1141
01:16:21,580 --> 01:16:24,070
so it adds one pixel
on the top and bottom.
1142
01:16:24,370 --> 01:16:28,810
That's why this button is taller than
the subscribe button. So to compensate,
1143
01:16:29,170 --> 01:16:34,060
we're actually going to reduce the
padding at the top and the bottom by one
1144
01:16:34,061 --> 01:16:37,810
pixel, say save it and refresh.
1145
01:16:39,010 --> 01:16:43,030
And now they're the same size. We have
nine pixels of space on the inside,
1146
01:16:43,300 --> 01:16:45,820
plus the one pixel of the border width,
1147
01:16:46,240 --> 01:16:50,170
and that matches the 10 pixels of space
on the inside of the subscribe button.
1148
01:16:51,610 --> 01:16:55,180
And I'll leave changing the tweet
button up to you as an exercise.
1149
01:16:56,590 --> 01:16:58,600
So that is a CSS box model.
1150
01:16:59,020 --> 01:17:03,820
Every element can have spacing on the
outside called margin space on the inside
1151
01:17:03,821 --> 01:17:06,010
called padding as well as a border.
1152
01:17:06,400 --> 01:17:10,280
And these properties determine how much
space and element takes up on the page.
1153
01:17:14,300 --> 01:17:18,140
Here's some exercises of using the box
model to get yourself more familiar with
1154
01:17:18,150 --> 01:17:19,910
this concept and these properties.
1155
01:17:33,600 --> 01:17:37,280
For most of the course, we've been
working with buttons. In this lesson,
1156
01:17:37,281 --> 01:17:40,790
we're going to work with text and
we're going to learn how to style text.
1157
01:17:41,390 --> 01:17:42,920
So just like our button lesson,
1158
01:17:43,130 --> 01:17:46,460
I've created an exercise that
we can practice with text.
1159
01:17:46,940 --> 01:17:48,260
So we're going to go to super
1160
01:17:48,261 --> 01:17:52,190
simple.dev/exercises/text.
1161
01:17:54,260 --> 01:17:58,340
And now we have some texts from YouTube
and Apple that we're going to learn how
1162
01:17:58,341 --> 01:18:00,650
to copy. So first of all,
1163
01:18:00,651 --> 01:18:05,570
let's create a new HTML file where
we can focus on practicing text
1164
01:18:05,571 --> 01:18:06,403
styles.
1165
01:18:06,710 --> 01:18:11,330
So I'm going to go here and create
a new file and let's just call this
1166
01:18:11,690 --> 01:18:13,720
text dot html.
1167
01:18:15,650 --> 01:18:18,410
And now we're going to open
this file in our browser.
1168
01:18:19,550 --> 01:18:24,230
So open the folder that contains
our code and right click
1169
01:18:24,590 --> 01:18:26,060
open with Google Chrome.
1170
01:18:28,130 --> 01:18:32,150
I'm actually going to put
this up here. All right,
1171
01:18:32,180 --> 01:18:33,470
so now we're ready to begin.
1172
01:18:35,120 --> 01:18:39,260
If you've ever written a text document
before using something like Google Docs
1173
01:18:39,320 --> 01:18:43,070
or Microsoft Word, you've
probably seen something like this.
1174
01:18:43,820 --> 01:18:47,570
This is a toolbar that allows us
to change the style of our text.
1175
01:18:48,020 --> 01:18:52,760
We can change the font, the text size,
we can make it bold, we can center it,
1176
01:18:53,060 --> 01:18:56,930
et cetera. In css, we have a
style for each of these things.
1177
01:18:58,070 --> 01:19:02,030
Let's go to our code and we're going to
first start by creating some text on our
1178
01:19:02,031 --> 01:19:02,863
page.
1179
01:19:03,050 --> 01:19:07,670
So let's first create a paragraph
and then insider paragraph.
1180
01:19:07,760 --> 01:19:09,650
Let's start with the text here.
1181
01:19:10,340 --> 01:19:14,120
So I'm going to copy and
paste this into our paragraph,
1182
01:19:15,110 --> 01:19:19,400
and I'm just going to reorganize
the code a little bit and save.
1183
01:19:20,240 --> 01:19:24,260
Remember that in H T M L, these extra
spaces and new lines don't matter.
1184
01:19:25,220 --> 01:19:29,600
Now refresh the page and we have our
first paragraph that we can practice with.
1185
01:19:30,950 --> 01:19:34,880
Next, let's create a style element
so we can write some CSS code.
1186
01:19:37,850 --> 01:19:42,530
Now we'll set a class on this paragraph
so that we can target it in CSS
1187
01:19:43,430 --> 01:19:48,260
class equals video dash title because
1188
01:19:48,350 --> 01:19:50,810
this is a video title that
I copied from YouTube.
1189
01:19:51,800 --> 01:19:54,110
So let's save it and refresh.
1190
01:19:54,980 --> 01:19:59,300
And now we can start targeting
this paragraph in our css.
1191
01:19:59,900 --> 01:20:03,080
So remember, we're going to
start with a.to target a class,
1192
01:20:03,530 --> 01:20:06,650
and we're going to
target video dash title.
1193
01:20:08,280 --> 01:20:13,050
So the first thing we're going to
change is the font to change the
1194
01:20:13,051 --> 01:20:17,490
font. The CSS property
is font dash family.
1195
01:20:19,110 --> 01:20:22,500
So websites by default use the
font called Times New Roman.
1196
01:20:23,100 --> 01:20:27,360
We're going to change the
font to a font called aerial,
1197
01:20:28,740 --> 01:20:32,640
save it and refresh. And now
you can see we changed the font.
1198
01:20:33,780 --> 01:20:34,770
Let's go to the next one.
1199
01:20:35,490 --> 01:20:39,780
So this is the font size and we can
change the font size using the property
1200
01:20:40,200 --> 01:20:42,330
font dash size,
1201
01:20:43,080 --> 01:20:45,930
and let's change it to
something like 30 pixels,
1202
01:20:47,250 --> 01:20:51,240
save it and refresh.
And now we have a bigger font.
1203
01:20:52,140 --> 01:20:54,420
The next example is, let's make it bold.
1204
01:20:55,260 --> 01:21:00,030
We're going to go here and we're
going to set the font dash weight
1205
01:21:00,810 --> 01:21:01,860
to be bold,
1206
01:21:03,720 --> 01:21:07,650
save it and refresh. And
now we have bold font.
1207
01:21:08,190 --> 01:21:12,540
So as you can see, CSS has properties
for doing all of these things,
1208
01:21:13,170 --> 01:21:17,340
and for most of these properties it's
pretty easy to Google them. For example,
1209
01:21:17,341 --> 01:21:20,100
let's Google for how
to make a font italic.
1210
01:21:20,970 --> 01:21:25,140
So we'll go to Google and we just
need to search something like css,
1211
01:21:25,620 --> 01:21:30,270
text italic. And now in the first result,
1212
01:21:31,110 --> 01:21:34,950
we're going to go in here,
and if you scroll down,
1213
01:21:34,960 --> 01:21:37,980
you can see this CSS font style italic.
1214
01:21:39,390 --> 01:21:42,720
So I'm going to copy this
and paste it in my code,
1215
01:21:44,310 --> 01:21:48,600
save it and refresh. And
now we have italic text.
1216
01:21:50,490 --> 01:21:54,270
The last one I'm going to show you for
now is how to center this text because in
1217
01:21:54,271 --> 01:21:59,160
our exercise we have an exercise
where the text is centered to center
1218
01:21:59,161 --> 01:22:03,840
text. We're going to go to our code
and we're going to type text dash a
1219
01:22:03,841 --> 01:22:04,650
line.
1220
01:22:04,651 --> 01:22:09,210
So this is the property for centering
text or putting it to the left or to the
1221
01:22:09,211 --> 01:22:13,020
right. Now we're going to
give a value of center,
1222
01:22:14,190 --> 01:22:18,570
save it and refresh, and
that's how we center our text.
1223
01:22:19,650 --> 01:22:24,390
So that was pretty easy right now let's
go ahead and try to copy this style in
1224
01:22:24,400 --> 01:22:27,270
our exercise. So if you remember,
1225
01:22:27,360 --> 01:22:31,830
the general strategy for creating
anything that we see is first create the
1226
01:22:31,831 --> 01:22:35,790
element with HTML and then
style it with CSS one by one.
1227
01:22:36,510 --> 01:22:39,000
Let's go ahead and do
that for this exercise.
1228
01:22:39,900 --> 01:22:43,950
So I'm just going to resize this
back and we're going to start
1229
01:22:45,090 --> 01:22:49,950
by resetting all of these
styles, save it and refresh.
1230
01:22:51,540 --> 01:22:55,520
First I'm going to start with the
font family. So for this exercise,
1231
01:22:55,521 --> 01:22:59,460
I actually use the font family aerial
just to make it easier for us. So we're
1232
01:22:59,461 --> 01:23:03,510
going to set the font dash family to
1233
01:23:03,840 --> 01:23:08,140
aerial, save it and refresh.
1234
01:23:08,980 --> 01:23:11,380
Next, I'm going to change the font weight.
1235
01:23:11,590 --> 01:23:15,160
So this font is bold and I want
to make my font bold as well.
1236
01:23:15,820 --> 01:23:20,320
So I'm going to add
font, dash weight, bold,
1237
01:23:21,580 --> 01:23:25,810
save it, and refresh. Next,
let's change the font size.
1238
01:23:26,410 --> 01:23:30,910
So I'm going to change this
font size to something bigger,
1239
01:23:31,240 --> 01:23:33,070
like maybe 20 pixels,
1240
01:23:33,970 --> 01:23:36,340
save it and refresh.
1241
01:23:37,180 --> 01:23:41,140
And it looks a little too
big comparing to the design.
1242
01:23:41,141 --> 01:23:45,280
So let's tone it down just a
little bit. Maybe 18 pixels,
1243
01:23:46,090 --> 01:23:50,380
save and refresh. Okay, so I
think that looks close enough.
1244
01:23:51,250 --> 01:23:55,660
Next, you'll notice that this text
sort of wraps around to a second line,
1245
01:23:55,960 --> 01:23:56,920
while ours doesn't.
1246
01:23:57,580 --> 01:24:02,140
The way to make this happen is we're
going to set a width on this title. Now,
1247
01:24:02,141 --> 01:24:05,230
I know that in the previous section
we said it's bad to set a width,
1248
01:24:05,950 --> 01:24:09,880
but here it's actually what we
want because if we set a width,
1249
01:24:10,210 --> 01:24:14,920
we're going to force the text onto a
second line. So let's go ahead and set a
1250
01:24:14,921 --> 01:24:15,910
width right now,
1251
01:24:16,840 --> 01:24:21,370
and I'll set it to something like
400 pixels. Let's see how that looks.
1252
01:24:22,420 --> 01:24:26,170
Save it and refresh. Okay, so
it needs to be less than that.
1253
01:24:26,410 --> 01:24:30,760
Let's do 300 pixels,
save and refresh. Okay,
1254
01:24:30,761 --> 01:24:32,230
so that looks right to me now.
1255
01:24:33,220 --> 01:24:37,960
And the final thing with the title is I
notice there's more spacing between the
1256
01:24:37,970 --> 01:24:39,970
lines here than what we have.
1257
01:24:40,510 --> 01:24:43,120
So to adjust the spacing between lines,
1258
01:24:43,600 --> 01:24:47,170
the property is called line dash height.
1259
01:24:48,280 --> 01:24:51,310
So don't worry if it seems like we're
learning a lot of new properties.
1260
01:24:51,670 --> 01:24:55,150
The point of this lesson is for us to
go through some complicated examples
1261
01:24:55,151 --> 01:24:55,960
together,
1262
01:24:55,961 --> 01:24:59,380
which will prepare you for the exercises
that you can practice on your own.
1263
01:25:00,580 --> 01:25:04,270
So for this line height, let's
try something like 20 pixels,
1264
01:25:05,260 --> 01:25:07,900
save it and refresh. Okay,
1265
01:25:07,901 --> 01:25:12,010
so it looks like that didn't work.
Let's change it to 26,
1266
01:25:12,070 --> 01:25:16,030
maybe save it and refresh. Okay,
1267
01:25:16,660 --> 01:25:21,160
maybe 24, save and refresh. Okay,
1268
01:25:21,161 --> 01:25:25,990
so I think that looks pretty close.
Next, let's work on the second paragraph.
1269
01:25:26,770 --> 01:25:28,990
So we're going to create a new paragraph,
1270
01:25:30,880 --> 01:25:33,370
3.4 M views.
1271
01:25:34,990 --> 01:25:36,310
And now to create this dot,
1272
01:25:36,400 --> 01:25:39,190
we're going to create something
called an HTML entity.
1273
01:25:39,910 --> 01:25:43,990
So an HTML entity lets us type out
special characters, for example,
1274
01:25:43,991 --> 01:25:48,970
this dot and this check mark to get
the H html entity. For this dot,
1275
01:25:49,480 --> 01:25:52,990
we're going to Google html entity
1276
01:25:54,490 --> 01:25:59,200
middle dot. And now if we scroll down,
1277
01:25:59,740 --> 01:26:04,100
this will give us some HTML code
that we can copy into our code.
1278
01:26:04,670 --> 01:26:07,520
So I'm going to copy this
and then paste it here.
1279
01:26:08,360 --> 01:26:11,000
And that's going to
create a dot on our page.
1280
01:26:11,510 --> 01:26:15,320
So if I save it and
refresh, that's what we get.
1281
01:26:16,610 --> 01:26:19,640
Now I'm going to type out the rest
of the text in this paragraph.
1282
01:26:21,530 --> 01:26:24,050
Now save that and refresh.
1283
01:26:24,920 --> 01:26:29,090
So now remember the general process
is we created the element with html.
1284
01:26:29,300 --> 01:26:32,300
Now we're going to style
it one by one. First,
1285
01:26:32,301 --> 01:26:34,730
let's give this a class
so we can target it.
1286
01:26:35,540 --> 01:26:38,270
Let's call this video dash stats.
1287
01:26:40,340 --> 01:26:44,570
And now in our S, we're
going to style this text.
1288
01:26:46,220 --> 01:26:50,300
We're going to start with
font, dash family, aerial,
1289
01:26:51,140 --> 01:26:55,340
save, and refresh. And then we're
going to change the font size.
1290
01:26:55,400 --> 01:26:58,610
So it looks like our design is a
little bit smaller than what we have.
1291
01:26:59,600 --> 01:27:03,260
Let's change the font
size to maybe 14 pixels,
1292
01:27:04,160 --> 01:27:08,360
save and refresh, and I think
that looks pretty close.
1293
01:27:09,050 --> 01:27:10,610
Next, let's change the color.
1294
01:27:11,960 --> 01:27:15,470
So let's set a color of maybe gray
1295
01:27:17,300 --> 01:27:20,990
and refresh. Okay, so
that's a little too light.
1296
01:27:21,560 --> 01:27:23,060
So to get an exact color,
1297
01:27:23,510 --> 01:27:28,100
we can right click in a blank area
of the webpage, click inspect,
1298
01:27:29,420 --> 01:27:32,540
and then we're going to inspect
the styles of this element.
1299
01:27:33,140 --> 01:27:36,380
So the trick to doing that is we're
going to click this top left icon,
1300
01:27:37,310 --> 01:27:39,230
hover over this element and click it.
1301
01:27:39,890 --> 01:27:42,590
And then we can find all its
styles in the computer tab.
1302
01:27:43,940 --> 01:27:46,850
So if we scroll down, we
can get the text color.
1303
01:27:47,510 --> 01:27:50,930
So let's copy this and save.
1304
01:27:53,360 --> 01:27:58,220
Let's refresh. And that looks
pretty good compared to the design.
1305
01:27:59,810 --> 01:28:03,020
Next, let's adjust the spacing
between these two paragraphs.
1306
01:28:03,740 --> 01:28:05,390
So remember from the previous lesson,
1307
01:28:05,690 --> 01:28:08,900
the spacing outside of an
element is called the margin,
1308
01:28:09,500 --> 01:28:12,950
but if we look at our code, we
didn't actually set any margin yet.
1309
01:28:13,310 --> 01:28:15,830
So why is there so much space
between these two paragraphs?
1310
01:28:16,580 --> 01:28:18,470
And the reason is if we write,
1311
01:28:18,471 --> 01:28:21,980
click in an empty area of the
webpage and click inspect,
1312
01:28:23,090 --> 01:28:27,800
And we click this icon
And hover over this paragraph.
1313
01:28:28,280 --> 01:28:31,940
This paragraph already has
margin at the top and bottom.
1314
01:28:32,810 --> 01:28:33,710
So if we click this,
1315
01:28:33,770 --> 01:28:38,510
go to computed as 14 pixels of
margin at the top and 14 at the
1316
01:28:38,520 --> 01:28:41,720
bottom. And the same
thing for this paragraph.
1317
01:28:42,140 --> 01:28:46,870
And the reason for this is
because paragraphs by default
come with margin at the
1318
01:28:46,880 --> 01:28:48,320
top and at the bottom.
1319
01:28:49,070 --> 01:28:53,150
So that's why there's all this spacing
that we have here where we didn't set it
1320
01:28:53,151 --> 01:28:53,983
in the css.
1321
01:28:55,250 --> 01:28:58,730
So the general process is we're
going to remove the default spacing,
1322
01:28:58,820 --> 01:29:02,640
and then we're going to set our own
spacing. So let's go into our code,
1323
01:29:03,840 --> 01:29:08,550
and first we're going to
remove the margin dash bottom
1324
01:29:09,510 --> 01:29:13,290
of the title, set that to zero,
1325
01:29:13,410 --> 01:29:18,180
and we're also going to remove
the margin at the top of the
1326
01:29:18,210 --> 01:29:20,640
second paragraph and set it to zero,
1327
01:29:21,990 --> 01:29:24,150
save that and refresh.
1328
01:29:24,510 --> 01:29:27,480
And now there's no default spacing
between these and they're really close
1329
01:29:27,481 --> 01:29:32,430
together. Next, we can set a
more precise margin bottom.
1330
01:29:33,510 --> 01:29:36,960
So let's set it to maybe 20
pixels. Let's see how that looks.
1331
01:29:37,620 --> 01:29:41,460
Save it and refresh. Okay,
so let's way too much space.
1332
01:29:42,030 --> 01:29:44,820
Let's tone it down to
something like maybe five,
1333
01:29:45,570 --> 01:29:48,840
save and refresh. Okay,
1334
01:29:48,841 --> 01:29:51,690
so I think this looks pretty
close to the design actually.
1335
01:29:52,230 --> 01:29:54,270
Let's move on to the next paragraph.
1336
01:29:55,200 --> 01:30:00,150
We're going to move all the way down
and create a new paragraph element with
1337
01:30:00,151 --> 01:30:01,110
this text inside.
1338
01:30:04,590 --> 01:30:08,160
And now for this check mark, we're
also going to use an HTML entity.
1339
01:30:08,760 --> 01:30:13,370
Now I know that you can actually copy
this and put it into our code directly,
1340
01:30:14,100 --> 01:30:15,660
but some browsers might not support this,
1341
01:30:15,661 --> 01:30:18,060
so that's why we're using HTML entities.
1342
01:30:18,870 --> 01:30:23,640
We're going to go to Google and we're
going to search HTML entity check
1343
01:30:23,700 --> 01:30:24,533
mark.
1344
01:30:25,860 --> 01:30:29,070
And I'm going to scroll down
and grab the HTML entity here.
1345
01:30:29,610 --> 01:30:34,170
So here we actually have three. I'm
just going to take the first one, copy,
1346
01:30:34,650 --> 01:30:39,420
paste, save it. Let's go back and refresh.
1347
01:30:40,080 --> 01:30:44,520
Okay, so that looks pretty good. Next,
let's keep styling these one by one.
1348
01:30:44,910 --> 01:30:48,360
So I'm going to go a little bit faster
here because it's basically the same
1349
01:30:48,361 --> 01:30:49,980
thing that we've been
doing for the first two.
1350
01:30:50,880 --> 01:30:55,860
It's called this one video author,
and then we'll style it up here.
1351
01:30:59,430 --> 01:31:03,900
So we'll set the font family to your
aerial, like the rest of the paragraphs.
1352
01:31:04,830 --> 01:31:07,950
Going to set the color to
the same as this paragraph,
1353
01:31:09,060 --> 01:31:10,590
it's a copy and paste.
1354
01:31:15,120 --> 01:31:17,460
Okay, that looks pretty good. Oh yeah,
1355
01:31:17,461 --> 01:31:20,550
we have to set the font size
looks a little too big right now.
1356
01:31:21,120 --> 01:31:25,650
Set the font size to 14 pixels.
Next we're going to
1357
01:31:25,710 --> 01:31:27,420
reset the default spacing here.
1358
01:31:28,410 --> 01:31:33,360
So we're going to set the margin dash
bottom and remove it by setting it
1359
01:31:33,361 --> 01:31:37,290
to zero, and also remove the margin top
1360
01:31:40,050 --> 01:31:43,050
and set it to zero, save and refresh.
1361
01:31:43,590 --> 01:31:45,690
And now we're going to
set a more precise margin.
1362
01:31:45,900 --> 01:31:50,400
So let's try maybe 30
pixels, see how that looks.
1363
01:31:51,360 --> 01:31:55,890
Okay, that's way too much.
Maybe 20 pixels. Okay,
1364
01:31:55,900 --> 01:32:00,100
I think that looks about right. Then
we're going to do the third paragraph.
1365
01:32:00,970 --> 01:32:01,840
Let's go down here,
1366
01:32:02,770 --> 01:32:06,730
create the element and
then style of it with css.
1367
01:32:07,120 --> 01:32:11,200
I'm just going to copy
and paste this in here,
1368
01:32:12,580 --> 01:32:14,890
save and refresh.
1369
01:32:17,290 --> 01:32:21,430
First, let's give a class to the
text so that we can target it.
1370
01:32:21,580 --> 01:32:23,830
Let's call this video dash description.
1371
01:32:28,330 --> 01:32:31,570
Go up here, video dash description.
1372
01:32:33,160 --> 01:32:37,210
We want a font family of aerial,
1373
01:32:38,050 --> 01:32:39,520
a font size
1374
01:32:42,070 --> 01:32:46,960
of 14 pixels and the same color,
1375
01:32:50,710 --> 01:32:55,450
and we save it and refresh.
Okay, that looks pretty good.
1376
01:32:56,020 --> 01:32:59,860
And now we want to give it a width
to make it wrap around like this.
1377
01:33:00,970 --> 01:33:05,050
So let's set the width to the
same as the title, which is 300
1378
01:33:07,150 --> 01:33:09,760
with 300 pixels,
1379
01:33:10,690 --> 01:33:13,180
save and refresh. Okay,
1380
01:33:13,240 --> 01:33:16,900
so it looks like this IO is
actually on a separate line.
1381
01:33:17,650 --> 01:33:20,050
Let's make it two 80,
1382
01:33:20,890 --> 01:33:25,180
save and refresh. All right,
so that looks pretty good,
1383
01:33:25,750 --> 01:33:29,500
and I'm also going to make it two 80 up
here just to make sure they're the same.
1384
01:33:32,560 --> 01:33:36,040
So the last thing I'm going to change
is the height or the space between these
1385
01:33:36,050 --> 01:33:39,280
lines. To do that, we're
going to use line height.
1386
01:33:40,030 --> 01:33:44,830
Let's scroll down and then add another
property called line dash height.
1387
01:33:46,030 --> 01:33:49,330
And let's set this to 20 pixels.
Let's see how that looks.
1388
01:33:50,020 --> 01:33:52,060
Save and refresh,
1389
01:33:53,320 --> 01:33:56,380
and let's set it to maybe 22 pixels,
1390
01:33:57,220 --> 01:34:00,910
save and refresh. Okay, so
I'm pretty happy with this.
1391
01:34:01,630 --> 01:34:06,220
And lastly, we're going to modify the
space between these two paragraphs. First,
1392
01:34:06,221 --> 01:34:08,500
we're going to reset the default margin.
1393
01:34:09,550 --> 01:34:14,230
Let's get rid of the margin bottom on
the first one here and the margin top
1394
01:34:14,500 --> 01:34:18,130
on the second one. So margin dash top,
1395
01:34:18,670 --> 01:34:23,170
I'm going to get rid of it and
set it to zero, save and refresh.
1396
01:34:23,650 --> 01:34:28,510
And then we're going to set a margin
bottom, maybe the same thing as up here,
1397
01:34:28,760 --> 01:34:32,980
20 pixels, save and refresh.
1398
01:34:34,330 --> 01:34:36,010
All right, so that
looks really good to me.
1399
01:34:37,060 --> 01:34:41,140
We just recreated a really nice looking
style that you can find on youtube.com.
1400
01:34:41,560 --> 01:34:46,450
And the general process that we use is
first we created the elements with html,
1401
01:34:46,780 --> 01:34:49,630
and then we style them
with CSS one by one.
1402
01:34:51,880 --> 01:34:53,950
So before we move on to the next exercise,
1403
01:34:54,280 --> 01:34:56,170
I'm going to show you a
way to clean up our code.
1404
01:34:56,770 --> 01:35:00,590
So if you notice all of our styles
right now have a line called font,
1405
01:35:00,591 --> 01:35:01,460
family Aerial.
1406
01:35:02,150 --> 01:35:06,830
Now we can actually clean this up and
remove the duplication by creating a new
1407
01:35:06,831 --> 01:35:07,663
style.
1408
01:35:07,970 --> 01:35:12,920
This time we're going to target all
paragraphs on the page and we're going
1409
01:35:12,921 --> 01:35:17,630
to give all paragraphs,
font, dash, family colon,
1410
01:35:18,260 --> 01:35:20,360
ariel, save.
1411
01:35:21,680 --> 01:35:26,480
So this style is going to apply to all
paragraphs, which means all of these.
1412
01:35:26,930 --> 01:35:31,910
That means that we actually don't
need this line in any of these
1413
01:35:31,911 --> 01:35:35,420
class styles anymore, so we can
actually remove all of these.
1414
01:35:36,350 --> 01:35:39,020
Now if I save it and I refresh,
1415
01:35:39,410 --> 01:35:43,220
you can see that nothing changes because
this is doing the same thing as the
1416
01:35:43,221 --> 01:35:44,420
code that we had before.
1417
01:35:45,680 --> 01:35:50,030
So you can also see from this example
that an element can be targeted by two
1418
01:35:50,040 --> 01:35:53,870
sets of styles.
For example, for this code here,
1419
01:35:54,320 --> 01:35:58,640
we're targeting all P elements on the
page and all elements with a class of
1420
01:35:58,641 --> 01:36:01,550
video dash title. If we scroll down here,
1421
01:36:02,090 --> 01:36:06,530
here we have AP element that
has a class of video dash title,
1422
01:36:06,980 --> 01:36:11,930
which means it's going to be targeted by
both this set of styles and this set of
1423
01:36:11,931 --> 01:36:15,380
styles. So it's being targeted
by multiple sets of styles.
1424
01:36:16,520 --> 01:36:21,200
Now another thing that we can clean up
is remember how we reset the margins
1425
01:36:21,260 --> 01:36:25,310
for all of our paragraphs. Instead of
doing it for each one individually,
1426
01:36:25,730 --> 01:36:29,450
we can actually put it all
up here. So for example,
1427
01:36:29,990 --> 01:36:34,610
we can set the margin dash top to zero
1428
01:36:35,450 --> 01:36:38,800
and the margin dash bottom to zero zero,
1429
01:36:40,070 --> 01:36:42,200
we save it and we refresh.
1430
01:36:43,220 --> 01:36:47,540
It looks pretty much the same except
we're now cleaning up all of the default
1431
01:36:47,541 --> 01:36:52,430
styles up here so that we don't have to
do it in our code at the bottom. So we
1432
01:36:52,440 --> 01:36:55,700
don't need this anymore or this
1433
01:36:57,230 --> 01:37:01,310
or this. If we save that and refresh,
1434
01:37:01,880 --> 01:37:06,860
we still get the same thing because we've
reset all of our styles in this set of
1435
01:37:06,861 --> 01:37:07,693
styles.
1436
01:37:08,690 --> 01:37:12,140
Now the last concept I want to show you
before we move on to the next exercise
1437
01:37:12,770 --> 01:37:15,650
is the fact that in this set of styles,
1438
01:37:16,220 --> 01:37:18,770
we're setting the margin bottom to zero,
1439
01:37:19,460 --> 01:37:23,630
but here we're also setting the margin
bottom to five pixels and the margin
1440
01:37:23,631 --> 01:37:26,360
bottom to 20 pixels.
So how does that work?
1441
01:37:26,750 --> 01:37:29,690
We're setting it to zero
here and to five and 20 here.
1442
01:37:30,320 --> 01:37:32,480
Which style does the element actually get?
1443
01:37:33,050 --> 01:37:37,280
And the answer is we're getting these
style down here. So if we refresh,
1444
01:37:37,290 --> 01:37:41,270
you'll notice that there's still 20
pixels of space between these two
1445
01:37:41,271 --> 01:37:42,103
paragraphs.
1446
01:37:43,130 --> 01:37:46,910
Now you might think that it's
because this line is at the top,
1447
01:37:47,390 --> 01:37:49,220
and then once we get to this line,
1448
01:37:49,520 --> 01:37:54,440
it overrides anything that comes
before it. But if we actually move
1449
01:37:54,441 --> 01:37:56,340
this to the top
1450
01:37:59,100 --> 01:38:00,990
and we save and reload,
1451
01:38:01,410 --> 01:38:04,710
you'll see that we still have
20 pixels of margin bottom.
1452
01:38:05,340 --> 01:38:10,000
So why is this happening? This is
something called CSS specificity.
1453
01:38:10,920 --> 01:38:13,230
If we have multiple lines
setting the same property,
1454
01:38:13,530 --> 01:38:17,760
there's actually a priority that the
browser follows. So in this situation,
1455
01:38:18,150 --> 01:38:21,030
this style has more
priority than this style,
1456
01:38:21,660 --> 01:38:23,910
and to determine which
one has more priority,
1457
01:38:24,240 --> 01:38:27,000
we have to look at this
word before the brackets.
1458
01:38:27,720 --> 01:38:31,170
So this word tells us what
these styles are targeting.
1459
01:38:31,890 --> 01:38:33,780
This is known as a selector.
1460
01:38:34,920 --> 01:38:39,480
This is another selector that
targets a particular class.
1461
01:38:40,260 --> 01:38:44,920
Now the selector that is the most
specific is going to have higher priority.
1462
01:38:45,360 --> 01:38:48,690
So this selector is actually
more specific than paragraphs.
1463
01:38:49,230 --> 01:38:53,490
So what I mean by specific is that this
targets all paragraphs on the page,
1464
01:38:54,090 --> 01:38:59,090
and this targets a specific class.
So not all paragraphs are going
1465
01:38:59,091 --> 01:39:01,920
to have this class of video dash stats.
1466
01:39:02,220 --> 01:39:04,530
So that's why this is more specific.
1467
01:39:05,010 --> 01:39:08,880
It targets a smaller group
of elements than this.
1468
01:39:09,270 --> 01:39:13,350
That's why this line has
priority over this line.
1469
01:39:14,190 --> 01:39:17,940
So that's just an introduction
to CSS specificity. For now,
1470
01:39:17,941 --> 01:39:22,720
just know that a class name
like this has more priority
1471
01:39:23,040 --> 01:39:25,350
than an element name like this.
1472
01:39:26,190 --> 01:39:30,780
So I'm going to move this code back
and we'll continue with the rest
1473
01:39:31,080 --> 01:39:34,200
of this exercise. Next,
1474
01:39:34,201 --> 01:39:36,930
we're going to copy this text from Apple.
1475
01:39:37,500 --> 01:39:41,010
So you can see that there is a background
color and the text is centered.
1476
01:39:41,370 --> 01:39:43,830
And also if I hover over
this part of the text,
1477
01:39:44,190 --> 01:39:48,930
we get a pointer on our mouse
and we have an underlying
1478
01:39:48,931 --> 01:39:51,150
text. So let's see how we can do this.
1479
01:39:53,040 --> 01:39:57,490
First we'll create the element and then
we'll style it one by one. So we'll go
1480
01:39:57,500 --> 01:39:59,970
down here and we're going
to create a new paragraph
1481
01:40:01,860 --> 01:40:05,100
and let's copy this text
into that paragraph.
1482
01:40:05,820 --> 01:40:10,230
Let's copy and paste. Whoops. Okay,
1483
01:40:10,380 --> 01:40:14,370
save it and refresh.
Okay, so that looks good.
1484
01:40:15,120 --> 01:40:18,240
So usually if you have a greater
then or less than symbol,
1485
01:40:18,600 --> 01:40:22,710
you want to create it with an HTML
entity because the browser could confuse
1486
01:40:22,711 --> 01:40:25,110
these symbols with an HTML tag.
1487
01:40:26,160 --> 01:40:30,330
So I'm going to search
for the HTML entity for
1488
01:40:30,810 --> 01:40:35,760
greater than. So this is
the symbol that we want,
1489
01:40:36,180 --> 01:40:38,550
and I'm just going to copy
and paste this into our code,
1490
01:40:41,820 --> 01:40:45,330
save it, and refresh. Next,
1491
01:40:45,360 --> 01:40:50,010
let's actually add some
space at the bottom of this
paragraph so that we can see
1492
01:40:50,020 --> 01:40:51,360
our new paragraph clearly.
1493
01:40:52,080 --> 01:40:56,710
So we're going to here and just add some
1494
01:40:56,860 --> 01:41:01,210
margin to the bottom because it's a
little bit too cluttered right now.
1495
01:41:02,560 --> 01:41:04,150
All right, so that looks pretty good.
1496
01:41:05,320 --> 01:41:08,230
We're going to start by adding
a class to our paragraph,
1497
01:41:08,530 --> 01:41:12,760
so we can target it in
our CSS class equals maybe
1498
01:41:13,270 --> 01:41:14,950
apple dash text,
1499
01:41:16,450 --> 01:41:20,500
save it and refresh and
1500
01:41:21,700 --> 01:41:26,440
apple text. Okay,
1501
01:41:26,500 --> 01:41:31,210
and first I'm actually also going
to give some spacing at the bottom
1502
01:41:32,200 --> 01:41:35,290
so it's easier for us
to see our actual code.
1503
01:41:36,220 --> 01:41:39,370
So 50 pixels at the
bottom, save and refresh,
1504
01:41:40,480 --> 01:41:42,790
and now it's a little easier
to see what we're working with.
1505
01:41:43,930 --> 01:41:46,330
So next I'm going to change the font size.
1506
01:41:46,750 --> 01:41:50,140
One thing you'll notice is that
the font family is already aerial.
1507
01:41:50,710 --> 01:41:51,670
If we scroll back up,
1508
01:41:52,150 --> 01:41:55,720
we have this set of styles that
target all paragraph elements.
1509
01:41:56,020 --> 01:41:58,540
So it's already set our
font family two aerial.
1510
01:41:59,470 --> 01:42:03,700
Let's scroll back down and
let's adjust the font size.
1511
01:42:04,210 --> 01:42:06,160
So this one looks a little bit smaller,
1512
01:42:06,490 --> 01:42:11,290
so let's set it to maybe 14
pixels. Let's see how that looks.
1513
01:42:12,070 --> 01:42:15,580
Save it and refresh. Okay,
1514
01:42:15,581 --> 01:42:18,460
so I think that looks pretty
similar to the design.
1515
01:42:20,410 --> 01:42:24,340
And now the next step is let's
set a background color of red.
1516
01:42:25,390 --> 01:42:25,540
Now,
1517
01:42:25,541 --> 01:42:29,860
a trick for getting the background color
is we're going to right click in an
1518
01:42:29,861 --> 01:42:31,870
empty area, inspect,
1519
01:42:33,040 --> 01:42:37,480
click this icon and click the
element we want to copy styles for,
1520
01:42:38,530 --> 01:42:41,290
and then go to the computer
tab and scroll down.
1521
01:42:41,830 --> 01:42:43,210
Now we have the background color.
1522
01:42:43,750 --> 01:42:47,410
I'm just going to copy
this and paste it in here.
1523
01:42:47,560 --> 01:42:49,690
So background dash color,
1524
01:42:50,740 --> 01:42:54,970
we're going to paste
that save and we refresh.
1525
01:42:55,660 --> 01:42:59,170
Okay, we next we're going
to do the text color.
1526
01:43:00,040 --> 01:43:04,570
So let's set the text color
to white color dash white
1527
01:43:06,220 --> 01:43:10,600
save and refresh. And now
if we look at our design,
1528
01:43:10,780 --> 01:43:14,530
this text is actually centered
on the page. So remember,
1529
01:43:14,540 --> 01:43:17,920
the property for centering
text is text dash,
1530
01:43:17,950 --> 01:43:20,200
align center,
1531
01:43:21,490 --> 01:43:24,400
save and refresh. Okay,
1532
01:43:24,401 --> 01:43:29,290
and the last thing is there's some
spacing at the top and the bottom here.
1533
01:43:30,070 --> 01:43:34,660
So here we actually want to add spacing
inside our paragraph. And remember from
1534
01:43:34,661 --> 01:43:39,040
the previous lesson, spacing on the
inside of an element is called padding.
1535
01:43:40,000 --> 01:43:42,310
We're going to add some
padding to the top,
1536
01:43:43,360 --> 01:43:47,590
maybe 10 pixels and then
padding to the bottom
1537
01:43:49,540 --> 01:43:54,140
and 10 pixels. Let's see how
that looks. Save and refresh.
1538
01:43:54,590 --> 01:43:57,680
Okay, so I think we could add
a little bit more padding,
1539
01:43:58,220 --> 01:44:00,950
so let's change it to maybe 18 pixels,
1540
01:44:02,450 --> 01:44:06,620
save and refresh. All right, so
I think this looks close enough.
1541
01:44:07,190 --> 01:44:11,120
Now the last thing we're going to
work on is this text here that becomes
1542
01:44:11,121 --> 01:44:14,300
underlined when we hover over it. First,
1543
01:44:14,330 --> 01:44:16,460
let's learn how to create underlying text.
1544
01:44:16,940 --> 01:44:20,240
We're going to practice our Googling
skills and we're just going to search for
1545
01:44:20,241 --> 01:44:24,260
CSS text underlying. So keep it simple.
1546
01:44:26,360 --> 01:44:30,740
And then in the first link we
have the text decoration property.
1547
01:44:31,370 --> 01:44:35,000
We scroll down, we have an overline
line through and underline.
1548
01:44:36,470 --> 01:44:40,520
So let's grab this piece of code.
I'm going to just copy it in here,
1549
01:44:41,750 --> 01:44:45,530
save and refresh. Now unfortunately,
1550
01:44:45,680 --> 01:44:48,890
this property actually
affects the entire paragraph,
1551
01:44:49,610 --> 01:44:53,630
but we want it to only affect this
part of the text. So how do we do that?
1552
01:44:54,260 --> 01:44:57,080
We're going to need to learn
something called a text element.
1553
01:44:58,100 --> 01:45:02,030
So a text element is an element
that is inside a line of text.
1554
01:45:02,570 --> 01:45:05,570
So let's do an example
just to see how it works.
1555
01:45:06,860 --> 01:45:09,650
We're going to go to the bottom and
we're going to create a new paragraph to
1556
01:45:09,651 --> 01:45:14,360
practice with. And let's actually just
copy this text and put it in there,
1557
01:45:16,610 --> 01:45:17,960
save and refresh.
1558
01:45:18,710 --> 01:45:22,070
And now we're going to create some
text elements on this paragraph.
1559
01:45:22,520 --> 01:45:27,200
So the first text element I'm going
to show you is called the strong
1560
01:45:27,230 --> 01:45:28,063
element.
1561
01:45:29,600 --> 01:45:34,130
So now let's copy maybe this
text and then put it in there
1562
01:45:35,930 --> 01:45:38,810
and save and refresh.
1563
01:45:41,240 --> 01:45:45,950
So the strong element here creates this
bolded text that you see on the webpage.
1564
01:45:46,730 --> 01:45:51,110
So the thing to know about text elements
is that they essentially exist inside a
1565
01:45:51,111 --> 01:45:55,820
line of text and then they modify
that part of the text so they're not
1566
01:45:55,821 --> 01:45:57,050
modifying the whole thing.
1567
01:45:58,460 --> 01:46:02,750
Another text element we can
create is the you element.
1568
01:46:03,890 --> 01:46:07,430
So this one creates some
text that is underlined.
1569
01:46:08,000 --> 01:46:09,830
So if we move this text into here,
1570
01:46:10,610 --> 01:46:13,070
save it and refresh,
1571
01:46:14,030 --> 01:46:16,100
we now get an underlying text element.
1572
01:46:16,700 --> 01:46:20,660
So that is how we style specific
parts of a line of text.
1573
01:46:21,890 --> 01:46:25,580
The final text element I want
to show you is called the span.
1574
01:46:26,390 --> 01:46:30,980
So let's create a span element
and we're going to put this
1575
01:46:30,981 --> 01:46:35,540
text inside. So cut and paste,
1576
01:46:37,250 --> 01:46:40,790
save it, and refresh. Okay,
1577
01:46:40,910 --> 01:46:45,410
so the span element is here, but
you'll notice that nothing changed.
1578
01:46:45,830 --> 01:46:50,790
And that's because the span element is
the most generic text element. It has
1579
01:46:50,791 --> 01:46:51,720
no styles.
1580
01:46:52,320 --> 01:46:56,700
So the span is really useful because
we can actually give it a class
1581
01:46:57,750 --> 01:47:01,230
and we can style it ourselves
and give it any style we want.
1582
01:47:02,160 --> 01:47:06,360
Now we could add the class attribute
to these other text elements like the
1583
01:47:06,361 --> 01:47:07,800
strong and the U element,
1584
01:47:08,340 --> 01:47:11,400
but notice that these text
elements come with a default style,
1585
01:47:11,790 --> 01:47:13,350
and that may not be what we want,
1586
01:47:13,380 --> 01:47:17,640
especially in this situation where we
don't actually want a style until we hover
1587
01:47:17,641 --> 01:47:21,300
over it. So that's why we
use the span text element.
1588
01:47:21,750 --> 01:47:26,400
It lets us modify a specific part of the
text without affecting the whole thing,
1589
01:47:26,970 --> 01:47:30,090
and it's the most flexible and
we can style it however we want.
1590
01:47:31,110 --> 01:47:34,860
So if we give it a class of span example
1591
01:47:36,210 --> 01:47:37,830
and then go to our css,
1592
01:47:38,340 --> 01:47:41,220
and then we target span example,
1593
01:47:44,340 --> 01:47:47,250
we can give it any styles
that we want. For example,
1594
01:47:47,251 --> 01:47:49,770
we can set a color of red.
1595
01:47:50,550 --> 01:47:54,450
Now if we save this and refresh the span,
1596
01:47:54,451 --> 01:47:56,880
now turns this part of the text red.
1597
01:47:57,990 --> 01:48:01,860
The other cool thing is that everything
we know about CSS still applies.
1598
01:48:04,710 --> 01:48:09,660
So we can target span example colon hover,
1599
01:48:10,530 --> 01:48:14,250
and these styles will only apply
when we hover over the span.
1600
01:48:15,300 --> 01:48:19,140
So in this case, let's underline
it because that's what we want.
1601
01:48:19,830 --> 01:48:24,360
So if we do text dash
decoration and underline
1602
01:48:25,140 --> 01:48:28,860
just like up here, save it and refresh.
1603
01:48:29,610 --> 01:48:32,880
Now this span has a color of red here,
1604
01:48:33,330 --> 01:48:37,920
and when we hover over it, these style
apply and it's going to get underlined.
1605
01:48:39,090 --> 01:48:42,480
Let's use what we learned
here. To finish up our example,
1606
01:48:44,730 --> 01:48:48,090
we're going to first remove this line
because we don't want to underline the
1607
01:48:48,091 --> 01:48:48,923
whole thing.
1608
01:48:49,500 --> 01:48:54,450
Let's refresh and we want to create a
span so that we only target this part of
1609
01:48:54,451 --> 01:48:56,580
the text. Let's go back down.
1610
01:48:57,570 --> 01:48:59,970
I'm going to resize it a little
bit just so that we can see.
1611
01:49:02,490 --> 01:49:05,250
Okay, so we're going
to scroll down to here.
1612
01:49:06,330 --> 01:49:09,570
I'm going to wrap this in a span.
1613
01:49:10,290 --> 01:49:13,230
So just going to move this into here,
1614
01:49:15,450 --> 01:49:17,970
save refresh.
1615
01:49:19,890 --> 01:49:22,380
And now we're going to style this span.
1616
01:49:22,560 --> 01:49:27,150
So remember we're going to give it a
class so that we can target it in our css.
1617
01:49:28,050 --> 01:49:32,220
Let's call this the shop link, save it,
1618
01:49:32,400 --> 01:49:36,960
and let's go here and we're
going to style it now.
1619
01:49:37,980 --> 01:49:39,570
So shop dash link.
1620
01:49:41,520 --> 01:49:45,780
So remember the style for this is that
the mouse turns into this pointer.
1621
01:49:47,140 --> 01:49:50,860
So to do that, we're going to use
a property cursor, dash pointer,
1622
01:49:52,210 --> 01:49:56,950
save and refresh. So now when we
hover over it, our mouse is a pointer.
1623
01:49:58,720 --> 01:50:01,690
And the last thing is that we want it
to be underlined when we hover over it.
1624
01:50:02,320 --> 01:50:05,530
So let's create a hover
style shop dash link,
1625
01:50:06,370 --> 01:50:10,000
and we're going to give this
pseudo class colon hover,
1626
01:50:12,520 --> 01:50:15,520
and we're going to underline
it with text decoration,
1627
01:50:17,560 --> 01:50:18,393
underline,
1628
01:50:20,590 --> 01:50:25,480
save it and refresh. And
now when we hover over this,
1629
01:50:25,900 --> 01:50:29,800
it's going to turn our mouse into a
pointer and it's going to underline it.
1630
01:50:30,220 --> 01:50:32,950
So we've achieved the exact
same styles as art design.
1631
01:50:35,320 --> 01:50:37,570
So there's one last thing I'm
going to show you in this lesson.
1632
01:50:38,260 --> 01:50:39,400
Let's go back into our code.
1633
01:50:39,940 --> 01:50:44,380
We're going to scroll all the way to
the bottom and recall that in H T M L,
1634
01:50:44,770 --> 01:50:49,750
if we have multiple spaces like this,
it will combine them all into one space.
1635
01:50:50,230 --> 01:50:52,480
So if I save this and refresh,
1636
01:50:53,080 --> 01:50:55,510
you'll see that only
one space shows up here.
1637
01:50:56,200 --> 01:50:59,590
So I'm going to show you how to
get over this problem. Basically,
1638
01:50:59,591 --> 01:51:02,740
instead of typing out
multiple spaces in our html,
1639
01:51:03,400 --> 01:51:07,480
all we have to do is set a
margin left on this text element.
1640
01:51:08,020 --> 01:51:12,130
So we're going to set a margin left on
this element and it's going to add spaces
1641
01:51:12,131 --> 01:51:16,840
on the left. So as an
example, let's scroll up
1642
01:51:18,370 --> 01:51:22,240
and we're going to add margin left
1643
01:51:23,140 --> 01:51:27,910
to our span element here, and
let's do something like 12 pixels,
1644
01:51:28,840 --> 01:51:33,520
save it and refresh. And now we
have spacing between our words.
1645
01:51:34,300 --> 01:51:37,990
So this is how we achieve
multiple spaces between our words,
1646
01:51:38,350 --> 01:51:40,360
even though H T M L combines them.
1647
01:51:41,650 --> 01:51:46,540
So that is how we create really
professional looking text like this and
1648
01:51:46,541 --> 01:51:49,900
like this, we first create
the element with H T M L,
1649
01:51:50,110 --> 01:51:52,870
and then we style it one by one with css.
1650
01:51:53,710 --> 01:51:56,410
And if we want to style only
just a part of the text,
1651
01:51:56,650 --> 01:51:59,440
we have to use a text element like a span.
1652
01:52:21,000 --> 01:52:21,680
In this lesson,
1653
01:52:21,681 --> 01:52:25,360
we're going to learn the proper structure
of html and that's going to give us
1654
01:52:25,361 --> 01:52:30,070
access to all the features of
html. So up until this point,
1655
01:52:30,130 --> 01:52:33,790
we've actually haven't been following
that structure. For example,
1656
01:52:34,210 --> 01:52:36,700
if we look at our code, if we scroll down,
1657
01:52:37,150 --> 01:52:40,270
we can see that we're creating
elements directly like this.
1658
01:52:40,690 --> 01:52:44,890
If we go to our website
however, and we write click and
1659
01:52:46,550 --> 01:52:48,020
we look at our html,
1660
01:52:48,890 --> 01:52:53,150
we can see that we have some elements
here called the HTML element,
1661
01:52:53,270 --> 01:52:55,580
the head element and the body element.
1662
01:52:56,330 --> 01:53:01,070
So this is a structure that we're actually
supposed to have in our HTML file,
1663
01:53:01,460 --> 01:53:05,720
and because we don't have it, the browsers
automatically creating this for us.
1664
01:53:06,530 --> 01:53:09,740
So this was fine in the previous
lessons because we're just learning,
1665
01:53:10,190 --> 01:53:13,610
but it's actually best to
have this structure in our
code because we're actually
1666
01:53:13,611 --> 01:53:18,320
missing some useful features. So let's
go ahead and learn what this structure
1667
01:53:18,321 --> 01:53:19,640
is and add it to our code.
1668
01:53:20,990 --> 01:53:25,000
So we're going to go back to all of
our code and add in this structure.
1669
01:53:26,120 --> 01:53:29,000
Let's go back to our very first HTML file,
1670
01:53:30,140 --> 01:53:34,430
and at the top I'm going to add some
spaces and we're going to learn what the
1671
01:53:34,440 --> 01:53:35,630
proper structure is.
1672
01:53:36,620 --> 01:53:40,850
Every HTML file is going to
start with less than exclamation
1673
01:53:41,330 --> 01:53:45,290
doc type space, H T M L, greater that.
1674
01:53:45,980 --> 01:53:49,190
So you just have to type this line
out exactly as I have it here.
1675
01:53:49,910 --> 01:53:51,440
This is not really an element,
1676
01:53:51,710 --> 01:53:54,530
it's just a special line that
has a meaning to the browser.
1677
01:53:55,190 --> 01:53:59,570
This tells a browser to use a modern
version of html. If we don't have this,
1678
01:53:59,600 --> 01:54:03,110
it sort of falls back to an older
version that has less features.
1679
01:54:04,610 --> 01:54:08,510
The next part of these structure
is to create an H T M L element.
1680
01:54:09,740 --> 01:54:12,740
So this says there's a
webpage inside this element.
1681
01:54:13,100 --> 01:54:14,210
There's not much meaning to it,
1682
01:54:14,330 --> 01:54:18,830
we just have to have this at the top and
the closing tag at the bottom of every
1683
01:54:18,940 --> 01:54:23,930
H T M L file. Next we're going
to create this head element,
1684
01:54:24,920 --> 01:54:27,860
so head and closing tag,
1685
01:54:28,880 --> 01:54:32,090
and we're going to create
the body element. So body
1686
01:54:34,010 --> 01:54:35,060
and closing tag.
1687
01:54:36,980 --> 01:54:41,690
So this is the proper structure of all
of our HTML files and this is how we're
1688
01:54:42,140 --> 01:54:44,360
supposed to start and end our files.
1689
01:54:45,680 --> 01:54:49,370
So here you can see that we have
an element inside. Another element,
1690
01:54:49,910 --> 01:54:54,590
this is called nesting. So not only
can we have text inside an element,
1691
01:54:54,920 --> 01:54:57,530
we can have other
elements inside elements.
1692
01:54:58,100 --> 01:55:01,220
We've actually already seen an example
of this in the previous lesson.
1693
01:55:01,610 --> 01:55:05,420
We put a text element, like
a span inside a paragraph,
1694
01:55:05,810 --> 01:55:09,140
and that allows us to have some text
in the paragraph that was styled
1695
01:55:09,200 --> 01:55:12,980
differently. Here we have our
second example of nesting.
1696
01:55:13,670 --> 01:55:18,020
We have a head and a body
element inside an HTML element.
1697
01:55:18,980 --> 01:55:22,280
So this doesn't actually do anything
visually unlike our previous example,
1698
01:55:22,640 --> 01:55:25,700
but it's part of the HTML syntax
rules that we have to follow.
1699
01:55:26,510 --> 01:55:29,990
Every file has one and
only one HTML element,
1700
01:55:30,530 --> 01:55:33,170
and this element represents
the entire webpage.
1701
01:55:34,280 --> 01:55:37,340
And the HTML element is
designed for nesting.
1702
01:55:37,850 --> 01:55:41,870
It's designed to contain one head
element and one body element,
1703
01:55:42,530 --> 01:55:47,190
and then everything on our webpage is
supposed to go either inside the head or
1704
01:55:47,191 --> 01:55:48,090
inside the body.
1705
01:55:48,540 --> 01:55:53,070
So both of these elements are also
designed for nesting or to have elements
1706
01:55:53,071 --> 01:55:53,903
inside.
1707
01:55:55,500 --> 01:55:59,970
The body element here is supposed to
contain all the elements that are visible
1708
01:55:59,971 --> 01:56:03,480
on the page. So let's
actually open this website.
1709
01:56:04,020 --> 01:56:07,200
We're going to go into our folder that
contains our code and we're going to
1710
01:56:07,201 --> 01:56:09,660
right click open with Chrome.
1711
01:56:10,950 --> 01:56:14,040
So on this website you can see
that the paragraph is visible,
1712
01:56:14,070 --> 01:56:19,020
the button and the link is visible. So
all of this is visible on the website,
1713
01:56:19,650 --> 01:56:23,220
so it should go into this body section.
1714
01:56:27,000 --> 01:56:31,560
Inside the head element are all the
elements that are not visible on the page.
1715
01:56:31,980 --> 01:56:34,230
So here's an example of such an element.
1716
01:56:34,860 --> 01:56:37,350
We're going to create
an element called title.
1717
01:56:39,120 --> 01:56:44,010
So the text inside the title here is
going to change the text in the tab
1718
01:56:44,011 --> 01:56:46,170
here. So for example,
1719
01:56:47,460 --> 01:56:50,190
if I use the text first website,
1720
01:56:52,110 --> 01:56:55,380
that's going to show up in the
tab. So if I save and refresh,
1721
01:56:56,040 --> 01:56:57,960
that's where the title element shows up.
1722
01:56:58,530 --> 01:57:02,250
But notice that this title element
doesn't actually show up on the page and
1723
01:57:02,251 --> 01:57:04,350
that's why it belongs in the head section.
1724
01:57:05,610 --> 01:57:09,060
So the title is the first feature that
we get from following this structure.
1725
01:57:09,780 --> 01:57:13,380
The second feature that we get that's
really useful is the ability to
1726
01:57:13,381 --> 01:57:17,790
automatically reload our webpage
whenever we change our code.
1727
01:57:18,840 --> 01:57:21,600
So you may have noticed that
every time we change our code,
1728
01:57:23,040 --> 01:57:27,450
we have to go to our website and then
refresh the page to see our new code.
1729
01:57:28,140 --> 01:57:32,850
Now we can actually avoid
this by following this
structure and then installing a
1730
01:57:32,851 --> 01:57:34,320
VS code extension.
1731
01:57:34,950 --> 01:57:39,600
So let's go to this extension area here
and we're going to install the extension
1732
01:57:40,080 --> 01:57:44,520
live server. I'm going to install this,
1733
01:57:46,950 --> 01:57:50,670
and now we can use the live server
to reload our page automatically.
1734
01:57:51,130 --> 01:57:55,140
Whenever our code changes to open
this website in a live server,
1735
01:57:55,150 --> 01:57:59,910
we're going to right click and
we're going to click open with
1736
01:57:59,911 --> 01:58:00,743
live server.
1737
01:58:03,720 --> 01:58:08,280
And now we've opened this website and it
will automatically refresh whenever we
1738
01:58:08,281 --> 01:58:12,870
change our code. So if I change
the code like this and I save now,
1739
01:58:12,871 --> 01:58:16,260
it automatically refreshes without
having us to go back and forth.
1740
01:58:17,970 --> 01:58:21,060
So that's a really useful feature
to speed up our development.
1741
01:58:21,750 --> 01:58:25,620
Now let's get some more practice and
we're going to convert both of these HTML
1742
01:58:25,621 --> 01:58:28,560
files to use the proper structure First.
1743
01:58:28,561 --> 01:58:32,070
I'm going to actually just
delete all the extra tabs here.
1744
01:58:33,060 --> 01:58:36,060
And now let's work on the buttons file.
1745
01:58:37,950 --> 01:58:42,580
Now the live server doesn't really work
if we don't have that HTML structure in
1746
01:58:42,581 --> 01:58:45,040
our code. So let's add
that structure first.
1747
01:58:46,510 --> 01:58:48,460
I'm going to go up here and we're
going to create the structure.
1748
01:58:48,490 --> 01:58:50,770
So remember we start with a doc type
1749
01:58:53,290 --> 01:58:58,060
space, H T M L, and then we're
going to create an H T M L element.
1750
01:59:01,030 --> 01:59:03,190
And then inside we're
going to create a head
1751
01:59:04,840 --> 01:59:07,180
and we're going to create a body element.
1752
01:59:09,790 --> 01:59:13,240
And remember, the body contains
everything that is visible on the page.
1753
01:59:13,690 --> 01:59:15,130
So if we scroll down,
1754
01:59:16,600 --> 01:59:18,910
these three buttons are
visible on the page.
1755
01:59:19,630 --> 01:59:22,420
So we're going to you move
these into the body element
1756
01:59:26,320 --> 01:59:29,920
And now they're in the right
place. Now for this style element,
1757
01:59:30,430 --> 01:59:34,210
remember that we said the style element
doesn't actually create anything visible
1758
01:59:34,220 --> 01:59:38,200
on the page, but it could change
the style of other elements.
1759
01:59:38,740 --> 01:59:42,370
So this is a good example of something
that should go in the head element
1760
01:59:42,550 --> 01:59:44,920
because it doesn't show
up visibly on the page.
1761
01:59:45,640 --> 01:59:49,630
So we're going to copy all of this
and put it into the head element.
1762
01:59:52,510 --> 01:59:55,480
We're going to go up and we're
going to save this in here.
1763
01:59:56,440 --> 01:59:59,080
So now all of our CSS code
is in the right place,
1764
01:59:59,560 --> 02:00:01,180
and now that we have the proper structure,
1765
02:00:01,660 --> 02:00:05,980
we can open this with our live server
just to make sure everything looks good,
1766
02:00:08,530 --> 02:00:11,440
let's go here and add a
title like we learned.
1767
02:00:12,850 --> 02:00:15,250
And this is going to change
the text at the top of the tab.
1768
02:00:15,940 --> 02:00:20,620
So let's call this
buttons practice, save it,
1769
02:00:21,040 --> 02:00:25,450
and you'll notice that it automatically
reloads. Now we're going to learn
1770
02:00:25,451 --> 02:00:28,090
another feature that we get
from following this structure.
1771
02:00:28,870 --> 02:00:29,800
If we look at our code,
1772
02:00:30,070 --> 02:00:35,050
we have all of our CSS code together
along with our HTML code. Now,
1773
02:00:35,051 --> 02:00:39,220
this gets confusing because we have a
lot of lines of code and we're mixing two
1774
02:00:39,230 --> 02:00:41,920
different languages.
To solve this problem,
1775
02:00:41,921 --> 02:00:45,070
we can move all of our
CSS into a different file.
1776
02:00:46,000 --> 02:00:50,980
So let's copy all of this and we're
going to create a new file to just
1777
02:00:50,981 --> 02:00:52,150
contain our css.
1778
02:00:53,110 --> 02:00:57,160
We're going to go here and create
a new file and let's call it
1779
02:00:57,940 --> 02:00:59,950
buttons dot css.
1780
02:01:01,540 --> 02:01:06,070
Make sure your file ends in dot CSS to
tell the computer that this file contains
1781
02:01:06,480 --> 02:01:07,313
CSS code.
1782
02:01:09,400 --> 02:01:12,790
And now we're going to move
our code into that file
1783
02:01:15,970 --> 02:01:19,330
and save and save here.
1784
02:01:21,250 --> 02:01:23,350
Now you'll notice that we
lost all of our styles,
1785
02:01:23,440 --> 02:01:27,730
and that's because we now need to
load this new CSS file into our
1786
02:01:28,130 --> 02:01:29,650
html. To do that,
1787
02:01:29,651 --> 02:01:33,730
we're going to learn a new
element called the link element.
1788
02:01:35,290 --> 02:01:39,320
So the link is sort of a special element
because it doesn't require a closing
1789
02:01:39,321 --> 02:01:41,180
tag like we've seen so far.
1790
02:01:41,750 --> 02:01:44,570
Elements like these are
called void elements.
1791
02:01:45,020 --> 02:01:49,400
So if we search for
Google and we search Void
1792
02:01:49,401 --> 02:01:51,320
elements html,
1793
02:01:52,730 --> 02:01:56,540
this will give us a list of elements
that don't need a closing tag.
1794
02:01:56,990 --> 02:02:00,920
So these are the exceptions to the rule
that everything has to have a closing
1795
02:02:00,921 --> 02:02:04,370
tag. So don't worry too much
about memorizing all of these.
1796
02:02:04,790 --> 02:02:07,730
You'll get more used to it the
more that you write H T M L.
1797
02:02:08,000 --> 02:02:10,370
And I'll introduce Void
elements to you one by one.
1798
02:02:11,210 --> 02:02:13,310
So here we're going to learn
our first void element,
1799
02:02:13,340 --> 02:02:18,200
which doesn't need a closing tag, but
this element takes two attributes.
1800
02:02:18,950 --> 02:02:23,390
The first one is called r e
L, which stands for relation.
1801
02:02:23,480 --> 02:02:27,350
So what kind of thing are
we linking? In this case,
1802
02:02:27,360 --> 02:02:30,290
we're going to link in a style sheet,
1803
02:02:32,000 --> 02:02:33,950
and then we have to tell
it another attribute,
1804
02:02:34,070 --> 02:02:38,000
which is H Ref.
So this tells a link,
1805
02:02:38,270 --> 02:02:41,210
we what file we're going
to link into this file.
1806
02:02:42,350 --> 02:02:46,610
So here we're going to link
our CSS file into our html.
1807
02:02:47,300 --> 02:02:50,810
So we're going to link buttons css. Okay,
1808
02:02:51,140 --> 02:02:54,170
now let's go back to our page. You
notice we don't have our styles,
1809
02:02:54,530 --> 02:02:59,060
and now when I save this, we
get all of our styles back,
1810
02:02:59,390 --> 02:03:04,340
and that's because we're loading all
the CSS code found in Buttons css,
1811
02:03:04,580 --> 02:03:08,440
which is all the code we
had before into our html.
1812
02:03:08,930 --> 02:03:13,250
So this is another way to load CSS
without having to write it all in our
1813
02:03:13,510 --> 02:03:15,050
HTML file. Now,
1814
02:03:15,051 --> 02:03:19,970
the big benefit of this is that each
file contains less code and each file
1815
02:03:19,980 --> 02:03:24,230
contains one type of code. So in
this file we only have H T M L code,
1816
02:03:24,620 --> 02:03:27,290
and in this file we only have c s s code.
1817
02:03:27,680 --> 02:03:30,530
So it makes the files
smaller and more focused,
1818
02:03:30,740 --> 02:03:35,630
and that's going to help us develop
easier. Now, before we move on,
1819
02:03:35,631 --> 02:03:38,960
I do want to talk about the HF attribute.
1820
02:03:39,800 --> 02:03:44,180
So the way that the computer finds
this file is that it's going to search
1821
02:03:44,540 --> 02:03:46,880
right beside our HTML file.
1822
02:03:47,360 --> 02:03:50,510
So it's going to search right beside
the file that this code is in.
1823
02:03:51,290 --> 02:03:53,930
So it's going to look for a
file called Buttons Dos css,
1824
02:03:54,290 --> 02:03:57,020
it finds it and it loads it into our html.
1825
02:03:57,920 --> 02:04:01,880
But if this file was in a folder,
let's create a new folder.
1826
02:04:02,600 --> 02:04:04,460
Let's call this styles.
1827
02:04:05,990 --> 02:04:08,540
Let's put the CSS file in our new folder.
1828
02:04:10,880 --> 02:04:13,340
And now you notice that
these styles are gone,
1829
02:04:13,880 --> 02:04:17,720
and that's because this link can't
find Buttons dot CSS anymore.
1830
02:04:18,500 --> 02:04:21,920
What it's trying to do is it's trying to
look for a file called Buttons dot css
1831
02:04:22,190 --> 02:04:24,740
beside our html, and
there's nothing there.
1832
02:04:26,090 --> 02:04:27,980
So to link a file that's inside a folder,
1833
02:04:28,430 --> 02:04:33,020
you first have to give the name of the
folder that's beside the HTML file. In
1834
02:04:33,021 --> 02:04:36,920
this case it's Styles. Next,
1835
02:04:36,930 --> 02:04:38,700
we have to type a slash.
1836
02:04:39,090 --> 02:04:43,050
So this slash means we're
going into the Styles folder,
1837
02:04:44,010 --> 02:04:47,250
and then inside we're going
to find the buttons dot css.
1838
02:04:47,700 --> 02:04:50,130
So this is something called File Paths,
1839
02:04:50,310 --> 02:04:54,600
and this is basically how we locate
different files within our HTML code.
1840
02:04:55,080 --> 02:04:59,700
So let's save this, and now we're able
to successfully link our CSS file.
1841
02:05:00,600 --> 02:05:03,030
So that's a little bit
about how file paths work.
1842
02:05:03,450 --> 02:05:06,870
We're going to need to use this later
on in this course when we recreate
1843
02:05:06,871 --> 02:05:11,040
youtube.com. Now let's
get some more practice,
1844
02:05:11,430 --> 02:05:16,170
and we're going to convert our final
file into the proper HTML structure.
1845
02:05:18,570 --> 02:05:23,220
So let's create the structure first
because we can't use Live Server just
1846
02:05:23,230 --> 02:05:27,450
yet. We're going to
write a doc type space,
1847
02:05:27,920 --> 02:05:32,820
HTML at the top, and then we're
going to have an HTML element.
1848
02:05:34,080 --> 02:05:36,630
And then inside we're going
to have a head element,
1849
02:05:38,100 --> 02:05:40,080
and then we're going
to have a body element.
1850
02:05:41,910 --> 02:05:44,550
Now everything that is visible
is going to go inside the body.
1851
02:05:45,180 --> 02:05:49,740
So if we scroll down, all
of our paragraphs are going
to go inside the body,
1852
02:05:51,510 --> 02:05:55,590
cut and paste, save it,
1853
02:05:56,460 --> 02:06:01,200
and now anything that's not visible is
going to go inside the head. So if we
1854
02:06:01,201 --> 02:06:04,410
scroll down, the style element
is not visible on the page,
1855
02:06:04,980 --> 02:06:09,090
so it's going to go inside
the head element, cut
1856
02:06:10,920 --> 02:06:15,240
and paste. All right,
1857
02:06:15,540 --> 02:06:18,030
so now we have a proper HTML structure.
1858
02:06:18,750 --> 02:06:23,700
We're going to open this with live
server, move it to the left here,
1859
02:06:24,150 --> 02:06:27,450
everything looks good, and we're
going to do some more practice.
1860
02:06:27,570 --> 02:06:31,890
We're going to set the title
again just to get more repetition.
1861
02:06:32,640 --> 02:06:36,600
It's called this text Practice, save It.
1862
02:06:37,050 --> 02:06:39,120
And you'll notice that
the title is set up here.
1863
02:06:39,630 --> 02:06:43,050
And we're going to move all
of this into a CSS file.
1864
02:06:43,770 --> 02:06:48,480
So let's create a new file called text dot
1865
02:06:49,030 --> 02:06:49,863
css,
1866
02:06:51,090 --> 02:06:54,810
and we're going to move all
of the CSS code into there.
1867
02:06:55,800 --> 02:07:00,510
So let's cut and paste it into here.
1868
02:07:02,550 --> 02:07:06,810
Next we're going to link the
CSS file in this HTML file.
1869
02:07:07,950 --> 02:07:12,570
So let's create a link element.
It needs two attributes,
1870
02:07:13,020 --> 02:07:15,780
R, e, L, and H ref.
1871
02:07:19,050 --> 02:07:21,510
So we're going to link a style sheet,
1872
02:07:23,070 --> 02:07:27,030
and the file is located
right beside the HTML file.
1873
02:07:27,510 --> 02:07:31,080
So all we need to do is link text, css,
1874
02:07:31,980 --> 02:07:33,840
save it, and refresh.
1875
02:07:34,800 --> 02:07:39,280
And it's back to where we were again.
Let's practice moving this into a folder.
1876
02:07:41,470 --> 02:07:45,340
Now we're unable to find text
CSS beside our HTML file,
1877
02:07:45,700 --> 02:07:47,200
but there is a Styles folder.
1878
02:07:47,740 --> 02:07:50,800
So we're going to look
inside the Styles folder.
1879
02:07:51,310 --> 02:07:52,990
Going to use a slash to go inside,
1880
02:07:53,650 --> 02:07:56,560
and we're going to link
this text CSS file.
1881
02:07:57,610 --> 02:08:01,510
And that is how we use file
paths to link CSS files.
1882
02:08:03,160 --> 02:08:06,820
The last feature we're going to look at
that we get from this structure is the
1883
02:08:06,821 --> 02:08:09,640
ability to add a new
fonts onto our website.
1884
02:08:10,270 --> 02:08:14,830
So websites have a set of fonts by
default that we can use. For example,
1885
02:08:14,831 --> 02:08:16,420
one of them is called Aerial.
1886
02:08:16,930 --> 02:08:19,660
Another one that we've seen
is called Times New Roman.
1887
02:08:20,050 --> 02:08:24,100
That's basically the font that
we get on a fresh website. Now,
1888
02:08:24,110 --> 02:08:25,720
in addition to these default fonts,
1889
02:08:26,050 --> 02:08:28,870
we can actually load new
fonts from the internet,
1890
02:08:29,170 --> 02:08:31,750
and we're going to learn how to
do that within this structure.
1891
02:08:32,830 --> 02:08:34,360
So let's go to our webpage.
1892
02:08:35,060 --> 02:08:40,030
And Google actually provides a lot of
really great free fonts that we can use.
1893
02:08:40,630 --> 02:08:42,190
So we're going to open a new tab,
1894
02:08:42,790 --> 02:08:46,270
and we're going to
search for Google Fonts,
1895
02:08:47,580 --> 02:08:51,430
and we're going to go
into this first link. Now,
1896
02:08:51,431 --> 02:08:53,770
this website might look a
little different for you,
1897
02:08:54,310 --> 02:08:57,220
but the general process
is the same. First,
1898
02:08:57,230 --> 02:08:59,290
we're going to search
for a font that we like.
1899
02:08:59,650 --> 02:09:02,480
So a good font to use here is Robo,
1900
02:09:02,740 --> 02:09:07,320
and this is the font that we're going to
use for our final project. We're going
1901
02:09:07,321 --> 02:09:08,530
to pick this font,
1902
02:09:09,190 --> 02:09:11,980
and then inside here we're going
to pick the styles that we want.
1903
02:09:12,580 --> 02:09:15,670
So for example, I'm going
to pick the regular style.
1904
02:09:16,840 --> 02:09:20,500
And I'm also going to
pick the bold style here.
1905
02:09:21,880 --> 02:09:26,770
So I'm going to pick the bold
style and then I'm going to go
1906
02:09:26,890 --> 02:09:29,110
to the basket of fonts that I selected,
1907
02:09:29,860 --> 02:09:33,850
and then Google is going to give me the
code that I need to load these fonts.
1908
02:09:35,200 --> 02:09:39,940
All we need to do is copy
this code exactly and then
1909
02:09:39,941 --> 02:09:43,100
put it in our head section of our html.
1910
02:09:43,690 --> 02:09:46,870
So we're going to put it in our
structure in this head section.
1911
02:09:48,880 --> 02:09:52,540
And now we've loaded a new font
that we can use on our website.
1912
02:09:53,620 --> 02:09:57,160
So now let's go back to our website
and we're going to use this new font.
1913
02:09:58,300 --> 02:10:01,750
So remember that currently
we set our fonts to aerial.
1914
02:10:02,560 --> 02:10:06,700
This time we loaded the font called
reto, and that's what we're going to use.
1915
02:10:07,030 --> 02:10:10,540
So let's change aero here to Reto.
1916
02:10:11,740 --> 02:10:14,170
Now when I save the
font is going to change.
1917
02:10:17,290 --> 02:10:18,123
And there you go.
1918
02:10:18,580 --> 02:10:22,480
It might not look that much different
because Reto is very similar to aerial.
1919
02:10:22,780 --> 02:10:27,310
But if we inspect and we
click on this element and
1920
02:10:28,000 --> 02:10:29,230
go to the computer tab,
1921
02:10:29,740 --> 02:10:34,070
we'll see that the font
family has now been to Reto.
1922
02:10:34,640 --> 02:10:39,560
So this is how we can load a huge
selection of fonts from Google onto
1923
02:10:39,561 --> 02:10:41,810
our webpage and use them on our website.
1924
02:10:42,680 --> 02:10:46,550
So those are the features that we get
from following this HTML structure.
1925
02:10:47,150 --> 02:10:51,260
Every website that we create from
now on will always have an HTML tag,
1926
02:10:51,590 --> 02:10:54,410
a head and a body and
a doc type at the top.
1927
02:11:11,420 --> 02:11:14,330
Now we're ready to work on the
final project of this course,
1928
02:11:14,600 --> 02:11:17,750
recreating youtube.com. Just like before,
1929
02:11:17,751 --> 02:11:21,800
I've created a page on my website that'll
show us what the final project looks
1930
02:11:21,810 --> 02:11:22,643
like.
1931
02:11:23,030 --> 02:11:26,690
So first we're to close all of our
browser tabs because we're going to start
1932
02:11:26,691 --> 02:11:27,523
over again,
1933
02:11:27,980 --> 02:11:32,630
and then we're going to open a
new page and we're going to go to
1934
02:11:32,810 --> 02:11:33,643
super
1935
02:11:33,860 --> 02:11:38,860
simple.dev/exercises/youtube.
1936
02:11:41,720 --> 02:11:44,870
So on this page you can see what
our final project will look like.
1937
02:11:45,350 --> 02:11:49,220
So we're going to learn how to
recreate youtube.com that you see here.
1938
02:11:50,600 --> 02:11:53,480
So first, let's set up our
project in our code editor.
1939
02:11:54,890 --> 02:11:59,780
So let's go into here and
let's actually create a
1940
02:11:59,781 --> 02:12:02,510
folder that's going to contain
all of our previous code.
1941
02:12:03,020 --> 02:12:05,630
So the final project is going
to contain a lot of code,
1942
02:12:05,870 --> 02:12:08,990
so we don't want to get it
confused with the previous lessons.
1943
02:12:09,800 --> 02:12:14,430
So let's call this
intro dash two dash html
1944
02:12:15,860 --> 02:12:18,560
and we're going to put
everything inside this folder.
1945
02:12:20,780 --> 02:12:25,550
We're going to put this
in here and these HTML
1946
02:12:25,551 --> 02:12:26,600
files in here as well.
1947
02:12:29,240 --> 02:12:33,080
Next we're going to create a new
HTML file for our final project.
1948
02:12:33,650 --> 02:12:38,390
So let's create a file
called YouTube dot html,
1949
02:12:39,500 --> 02:12:41,870
and I actually put it inside this folder.
1950
02:12:41,930 --> 02:12:44,600
I'm going to take it out
by dragging it down here.
1951
02:12:46,880 --> 02:12:51,650
So now we have an intro to html
folder and our YouTube dot html
1952
02:12:51,980 --> 02:12:56,630
and we're ready to get started. First,
1953
02:12:56,631 --> 02:13:00,050
we're going to set up the proper
structure of HTML that we learned in the
1954
02:13:00,470 --> 02:13:01,303
previous lesson.
1955
02:13:01,670 --> 02:13:06,140
So we're going to start off with
a lesson exclamation doc type
1956
02:13:06,950 --> 02:13:07,940
and html,
1957
02:13:09,080 --> 02:13:13,250
and then we're going to create an HTML
element that's going to contain our
1958
02:13:13,251 --> 02:13:17,630
entire webpage. And inside here
we're going to have a head element
1959
02:13:19,550 --> 02:13:21,890
And we're also going
to have a body element.
1960
02:13:25,340 --> 02:13:29,060
Now that we have the structure,
we can open it with live server.
1961
02:13:32,190 --> 02:13:33,810
And now we have our blank page.
1962
02:13:33,870 --> 02:13:37,620
So this page is going to automatically
reload when we change our code.
1963
02:13:39,090 --> 02:13:41,130
Now before we can work
on the final project,
1964
02:13:41,370 --> 02:13:44,130
we need to learn two more HTML elements,
1965
02:13:44,490 --> 02:13:48,600
how to load images onto our website
and how to create a search box.
1966
02:13:49,920 --> 02:13:52,140
So let's start with loading images first.
1967
02:13:53,340 --> 02:13:56,850
So I'm going to show you how you can
download these thumbnails from my website.
1968
02:13:57,570 --> 02:14:01,230
We're going to right click
in a blank area and inspect.
1969
02:14:02,130 --> 02:14:06,690
Now if we click this icon in
the top left and hover over an
1970
02:14:06,691 --> 02:14:08,880
image and click it,
1971
02:14:09,170 --> 02:14:12,600
and you might need to drag
this down to see the html,
1972
02:14:13,710 --> 02:14:18,030
we can find the image in the html,
and here is the URL for the image.
1973
02:14:18,540 --> 02:14:23,460
So we can actually click this and
it will open the image in a new tab
1974
02:14:24,060 --> 02:14:29,040
and we can control S to save it.
So make sure we save this image
1975
02:14:29,580 --> 02:14:33,720
in the folder that contains all of our
code. So that's this folder for me.
1976
02:14:35,010 --> 02:14:39,150
I'm going to save it. And now in
my code editor I can see the image.
1977
02:14:40,080 --> 02:14:43,740
Next we're going to create an HTML
element to load this onto our page.
1978
02:14:44,490 --> 02:14:45,840
So I'm going to go back to my page here,
1979
02:14:46,890 --> 02:14:51,590
and then we're going to go into the
body and create the image element which
1980
02:14:51,720 --> 02:14:55,020
is less than img, greater than.
1981
02:14:55,890 --> 02:14:59,430
Now the image element is unique
because it's another void element.
1982
02:15:00,300 --> 02:15:02,940
So we mentioned void elements
briefly in the previous lesson.
1983
02:15:03,300 --> 02:15:06,000
It's an element that doesn't
require a closing tag.
1984
02:15:06,330 --> 02:15:08,730
So this is one of those
exceptions to the rule.
1985
02:15:09,840 --> 02:15:14,100
So the image element takes
one attribute called src.
1986
02:15:15,300 --> 02:15:19,500
Now this attribute tells a computer
which image to display on the website.
1987
02:15:20,070 --> 02:15:20,670
So for us,
1988
02:15:20,671 --> 02:15:25,500
that image is the one we downloaded
called thumbnail one WebP.
1989
02:15:26,190 --> 02:15:30,390
So we're going to display
thumbnail dash one dot WebP,
1990
02:15:31,770 --> 02:15:35,640
and when I save it, the image
is now loaded onto our website.
1991
02:15:36,990 --> 02:15:41,640
So this source attribute
works the same way as the
1992
02:15:41,650 --> 02:15:43,620
link attribute that we saw earlier.
1993
02:15:45,210 --> 02:15:48,750
It follows the rules of file
paths to locate our file.
1994
02:15:49,260 --> 02:15:54,180
So just as a reminder, if we
type thumbnail one dot WebP here,
1995
02:15:54,480 --> 02:15:59,100
it's going to look for a
file named thumbnail one dot
WebP right beside our HTML
1996
02:15:59,101 --> 02:16:02,040
file. It's going to find it and
then load it onto our website.
1997
02:16:02,970 --> 02:16:06,780
But now we're actually going to create
a folder because we have multiple
1998
02:16:06,790 --> 02:16:08,520
thumbnails and we want to organize them,
1999
02:16:09,510 --> 02:16:14,040
we're going to create a folder called
thumbnails and we're going to drag this
2000
02:16:14,041 --> 02:16:18,930
into that folder. So now
for this source attribute,
2001
02:16:19,530 --> 02:16:24,180
we don't have a file beside our
HTML called thumbnail one WebP,
2002
02:16:24,420 --> 02:16:26,040
and then you see this error here.
2003
02:16:26,100 --> 02:16:28,710
So this means that there is
an error loading an image.
2004
02:16:29,530 --> 02:16:31,270
Now to find it in the thumbnails file,
2005
02:16:32,049 --> 02:16:36,068
we're going to type
thumbnails slash thumbnail one
2006
02:16:36,709 --> 02:16:41,289
WebP. So first it's going to look for
a file or folder called thumbnails.
2007
02:16:41,290 --> 02:16:44,260
Beside the HTML file, it finds this one,
2008
02:16:44,590 --> 02:16:49,120
and then the slash here means to
go inside the folder and then find
2009
02:16:49,420 --> 02:16:52,360
this file inside that
folder, which is here.
2010
02:16:53,709 --> 02:16:56,138
So that's how we load
images onto our page.
2011
02:16:57,340 --> 02:17:00,040
Now we're going to learn how
to style our image elements.
2012
02:17:00,490 --> 02:17:05,200
So let's go into our head section
here and create a style element.
2013
02:17:07,540 --> 02:17:08,468
Now before we do that,
2014
02:17:08,469 --> 02:17:12,549
I forgot to do something which is
let's create a title for our page.
2015
02:17:12,790 --> 02:17:17,290
So we can call this youtube.com clone,
2016
02:17:18,280 --> 02:17:21,879
and if we save this, the title will
show up in the tabs. All right,
2017
02:17:21,888 --> 02:17:26,228
so let's learn how to style
our image. So as always,
2018
02:17:26,230 --> 02:17:31,209
we're going to give it a class attribute
and let's just call this thumbnail.
2019
02:17:32,138 --> 02:17:34,808
And now we can target
this class in our css.
2020
02:17:35,468 --> 02:17:38,009
So dot thumbnail.
2021
02:17:40,150 --> 02:17:44,680
Now all of the CSS properties that
we learned so far apply to the image.
2022
02:17:44,950 --> 02:17:46,990
Some of them make sense
and some of them don't.
2023
02:17:48,040 --> 02:17:52,990
So one property that obviously doesn't
make sense is something like font dash
2024
02:17:53,049 --> 02:17:56,318
size. So if I save it,
2025
02:17:56,330 --> 02:18:00,040
you'll see nothing changes because
there is no text inside this element.
2026
02:18:00,100 --> 02:18:04,660
It's an image. So even though this
works, it doesn't really change anything.
2027
02:18:05,830 --> 02:18:09,490
Now a property that does make
sense for an image is width.
2028
02:18:10,570 --> 02:18:13,180
So this was set the width of this image.
2029
02:18:13,718 --> 02:18:16,539
Let's make it smaller to
match what we have here.
2030
02:18:17,320 --> 02:18:21,430
So let's make the width
something like 300 pixels.
2031
02:18:22,629 --> 02:18:26,079
Now we save it and now the width
of this image is 300 pixels.
2032
02:18:26,770 --> 02:18:30,820
So one thing you might notice is that
when we set the width of an image,
2033
02:18:31,299 --> 02:18:34,599
the height also changes.
So before we had this
2034
02:18:36,400 --> 02:18:40,120
notice that the image was a lot taller,
but as soon as we set the width,
2035
02:18:40,629 --> 02:18:45,519
the height also adjusts. So that's one
behavior of images that we should know.
2036
02:18:46,180 --> 02:18:47,410
When we set the width,
2037
02:18:47,770 --> 02:18:51,850
the height will also adjust so that
the image has the same dimensions.
2038
02:18:52,270 --> 02:18:57,040
What I mean by same dimensions is that
it keeps the same shape. So for example,
2039
02:18:57,340 --> 02:18:58,990
if I set the height as well,
2040
02:18:59,770 --> 02:19:03,730
this is going to cause the image to
lose its shape or lose its dimensions.
2041
02:19:04,299 --> 02:19:08,769
Let's set the height to something
like 600 pixels, save it,
2042
02:19:09,580 --> 02:19:12,400
and now you'll see that the
image is 600 pixels tall,
2043
02:19:12,790 --> 02:19:15,639
but it's lost its shape and
now it's become stretched.
2044
02:19:16,270 --> 02:19:19,870
So that behavior of an
image sort of keeps us safe,
2045
02:19:19,959 --> 02:19:22,779
so it keeps the image looking nice. Now,
2046
02:19:22,780 --> 02:19:27,190
if we really wanted an image
that was exactly 300 pixels
2047
02:19:27,558 --> 02:19:32,449
by 300 pixels, what can we do?
So this image, as you can see,
2048
02:19:32,450 --> 02:19:37,430
is getting stretched out.
So in addition to all the CSS properties
2049
02:19:37,431 --> 02:19:38,420
that we've learned so far,
2050
02:19:38,808 --> 02:19:42,919
the image element has its own properties
that are specific to an image.
2051
02:19:43,638 --> 02:19:47,539
So one of these is called object fit.
2052
02:19:49,340 --> 02:19:54,260
So this determines what happens if
this size doesn't match the images
2053
02:19:54,261 --> 02:19:57,620
dimensions or the images
shape. So for example,
2054
02:19:58,160 --> 02:19:59,960
I can set a value of cover.
2055
02:20:01,490 --> 02:20:05,990
So this tells the image to
cover this 300 by 300 area,
2056
02:20:06,560 --> 02:20:08,300
but it's also going to keep its shape.
2057
02:20:08,570 --> 02:20:11,630
So this area might not be big
enough to show the whole image,
2058
02:20:11,930 --> 02:20:15,140
which may or may not be okay
depending on what we want to do.
2059
02:20:16,040 --> 02:20:20,540
Now we can adjust which part of the
image that we see using another property
2060
02:20:20,900 --> 02:20:24,110
called object dash position.
2061
02:20:25,640 --> 02:20:28,490
So currently we're looking
at the center of the image.
2062
02:20:29,270 --> 02:20:33,920
We can set the object position to left
to view the left side of the image,
2063
02:20:34,340 --> 02:20:38,960
or we can also set it to the right to
view the right side of the image in the
2064
02:20:38,970 --> 02:20:41,570
case that the image
doesn't fit in our area.
2065
02:20:43,010 --> 02:20:46,640
Another value we can give
to object fit is contain.
2066
02:20:48,380 --> 02:20:49,370
So if we save this,
2067
02:20:50,180 --> 02:20:55,040
the entire image is going to shrink
until it is contained in this 300 by
2068
02:20:55,050 --> 02:20:59,720
300 area. So I'm going to set a border
so that we can see what this is doing.
2069
02:21:00,560 --> 02:21:04,820
I'm going to set a border of two pixels,
Border width, two pixels
2070
02:21:06,470 --> 02:21:11,300
border style of solid order color of red.
2071
02:21:12,620 --> 02:21:17,090
So here the border shows
us our 300 by 300 area and
2072
02:21:17,091 --> 02:21:21,170
contain makes the image shrink
until it is contained in the area,
2073
02:21:21,800 --> 02:21:25,310
but that means that it might not be able
to cover the entire area if it's not
2074
02:21:25,320 --> 02:21:27,530
the right shape. So in this case,
2075
02:21:27,531 --> 02:21:30,800
the object position can
move the image to the top
2076
02:21:32,240 --> 02:21:33,440
or to the bottom.
2077
02:21:35,600 --> 02:21:38,570
So that's basically how
images work. As you can see,
2078
02:21:38,630 --> 02:21:42,800
a lot of the CSS properties that we
learned before like width and height and
2079
02:21:42,801 --> 02:21:45,380
border can be applied
to the image element.
2080
02:21:45,770 --> 02:21:50,750
And the image element also has some of
its own properties that determine how the
2081
02:21:50,751 --> 02:21:53,810
image is displayed. So for now,
2082
02:21:53,811 --> 02:21:56,690
let's create something that's
kind of like our final website.
2083
02:21:57,380 --> 02:22:01,220
So I'm going to set
the image with two 300,
2084
02:22:01,730 --> 02:22:05,330
and I'm not going to set a height so that
the image doesn't stretch and we don't
2085
02:22:05,331 --> 02:22:09,650
have to do all this stuff and I can
actually just remove all of this.
2086
02:22:10,340 --> 02:22:14,090
So the only thing I'm doing is telling
the image to shrink down to a width of
2087
02:22:14,091 --> 02:22:18,350
300 and to shrink the height as well
so that the image keeps its shape.
2088
02:22:19,940 --> 02:22:24,470
So we're going to stick with this for
now and this is going to correspond to
2089
02:22:24,500 --> 02:22:26,760
this part of our final project,
2090
02:22:27,060 --> 02:22:30,840
and we're going to start learning how
to build out the entire video preview.
2091
02:22:32,190 --> 02:22:35,340
The next element we're going to learn
in this lesson is how to create search
2092
02:22:35,341 --> 02:22:36,960
boxes like the one you see up here.
2093
02:22:37,860 --> 02:22:41,910
So let's go back into our website and
we'll learn the code for creating a search
2094
02:22:41,911 --> 02:22:42,743
box.
2095
02:22:43,830 --> 02:22:47,790
The HTML for creating
a text box is less than
2096
02:22:48,330 --> 02:22:49,920
input greater than.
2097
02:22:50,670 --> 02:22:54,750
So the input element is a void
element, just like the image element,
2098
02:22:55,140 --> 02:22:57,120
it doesn't require a closing tag.
2099
02:22:57,900 --> 02:23:00,840
So the input element has several
attributes that we can give it.
2100
02:23:01,410 --> 02:23:03,180
One of them is called the type.
2101
02:23:04,230 --> 02:23:08,730
So we set the type equals text,
it's going to give us a text box.
2102
02:23:09,630 --> 02:23:10,980
I'm going to save this,
2103
02:23:11,460 --> 02:23:14,850
and now in our HTML you
can see we have a text box.
2104
02:23:17,340 --> 02:23:21,210
Another type that we can give to
this input is called checkbox.
2105
02:23:21,930 --> 02:23:25,470
So if I save this, now we have a checkbox.
2106
02:23:26,460 --> 02:23:30,690
So for our purposes we're going to set
the type to a text box because we want to
2107
02:23:30,691 --> 02:23:33,690
create the YouTube search box up here.
2108
02:23:35,850 --> 02:23:39,270
So you also notice that this
text box has a word search in it,
2109
02:23:39,660 --> 02:23:42,630
and when I start typing,
that search word is gone.
2110
02:23:43,260 --> 02:23:47,160
So this is sort of like a label for the
user telling them what to put into this
2111
02:23:47,161 --> 02:23:50,130
text box. And this is
known as a placeholder.
2112
02:23:51,060 --> 02:23:52,680
So if we go back to our website,
2113
02:23:53,010 --> 02:23:57,180
we're going to add a placeholder
to our new text box. To do that,
2114
02:23:57,240 --> 02:24:00,510
we're just going to give
the attribute placeholder
2115
02:24:02,700 --> 02:24:06,930
and let's set the placeholder
as search. We save it.
2116
02:24:07,260 --> 02:24:10,680
Now we have a placeholder that
disappears when we start typing.
2117
02:24:11,220 --> 02:24:15,840
So that's how we create what we
see on YouTube. So for the text
2118
02:24:15,841 --> 02:24:16,590
box,
2119
02:24:16,591 --> 02:24:20,760
all of the CSS properties that we learned
so far can be used on the text box.
2120
02:24:21,180 --> 02:24:26,160
So let's look at some examples.
Let's add a class attribute first,
2121
02:24:26,460 --> 02:24:31,200
like always so that we can target
it. Let's call it search dash bar.
2122
02:24:32,250 --> 02:24:33,750
And then inside our css,
2123
02:24:34,260 --> 02:24:38,220
we're going to target
dot search bar class.
2124
02:24:39,060 --> 02:24:43,710
And then inside we can set our usual
CSS properties. So for example,
2125
02:24:44,190 --> 02:24:44,770
in this case,
2126
02:24:44,771 --> 02:24:49,500
we can set a font dash size
and let's add it to 20 pixels,
2127
02:24:50,280 --> 02:24:55,020
save it and reload. And now you can
see that the font size has changed.
2128
02:24:56,070 --> 02:24:58,980
Another thing we can change
is margin or the spacing.
2129
02:24:59,460 --> 02:25:03,120
So let's add some margin to the left
2130
02:25:03,930 --> 02:25:06,690
of 12 pixels, save it.
2131
02:25:07,170 --> 02:25:09,360
And now we have some spacing on the left.
2132
02:25:09,810 --> 02:25:13,860
So basically everything that we've
learned so far about CSS properties we can
2133
02:25:13,861 --> 02:25:18,210
use on the search box. For now,
2134
02:25:18,211 --> 02:25:22,350
let's remove these example styles and
we're going to style the search box to
2135
02:25:22,351 --> 02:25:24,680
look like our final project
later in the scores.
2136
02:25:45,910 --> 02:25:46,630
In this lesson,
2137
02:25:46,631 --> 02:25:50,350
we're going to learn one
of the most important CSS
properties called the display
2138
02:25:50,820 --> 02:25:54,070
property, and we're going to use this
to start building out our final project.
2139
02:25:54,910 --> 02:25:58,960
We're going to start off by taking a
look at our final project and we're going
2140
02:25:58,961 --> 02:26:01,060
to start building out the text here.
2141
02:26:01,570 --> 02:26:03,820
So we're going to create
paragraphs for these text.
2142
02:26:04,810 --> 02:26:09,610
So let's go into our code and we're
going to create three paragraphs.
2143
02:26:11,350 --> 02:26:14,140
So here's one of them,
and we can copy the text.
2144
02:26:15,070 --> 02:26:16,630
So copy and paste.
2145
02:26:22,750 --> 02:26:26,440
So here's another paragraph
and we're going to copy this
2146
02:26:28,210 --> 02:26:29,590
and paste it in our code.
2147
02:26:32,470 --> 02:26:33,790
And here's a final paragraph
2148
02:26:40,660 --> 02:26:43,150
and we'll save. So here,
2149
02:26:43,151 --> 02:26:46,630
I'm actually going to use the H T M L
entity again instead of this special
2150
02:26:46,631 --> 02:26:50,350
character. So to save us some time,
I'm just going to type it out here.
2151
02:26:52,900 --> 02:26:55,420
Now I'm going to save this
and go back to my webpage.
2152
02:26:56,170 --> 02:26:58,300
And now we have the text
that we're going to use,
2153
02:26:59,380 --> 02:27:00,760
but you might notice something weird.
2154
02:27:01,270 --> 02:27:04,510
How come this text box
is beside our image?
2155
02:27:05,050 --> 02:27:08,050
If we look at our paragraphs,
they are on top of each other,
2156
02:27:08,051 --> 02:27:10,150
so one after another on each line.
2157
02:27:10,870 --> 02:27:13,690
How come text boxes and images
appear on the same line?
2158
02:27:14,800 --> 02:27:18,940
So this is due to the display property
in C S s and we're going to learn what
2159
02:27:18,941 --> 02:27:23,500
that is right now. In H T M L,
there are three types of elements.
2160
02:27:24,070 --> 02:27:26,920
The first type of element
is called a block element.
2161
02:27:27,610 --> 02:27:30,280
A block element takes up the entire line.
2162
02:27:30,850 --> 02:27:34,120
So a paragraph by default
is a block element.
2163
02:27:34,870 --> 02:27:39,670
We can see that in our dev tools by
right clicking in the browser and then
2164
02:27:39,671 --> 02:27:44,170
clicking inspect, And then
clicking this icon in the top left
2165
02:27:44,740 --> 02:27:47,680
right here and then
hovering over our paragraph.
2166
02:27:48,340 --> 02:27:51,340
So you can see that even
though the text goes to here,
2167
02:27:51,670 --> 02:27:56,470
the paragraph extends to the end of the
line because the paragraph by default
2168
02:27:56,680 --> 02:28:00,460
is a block element. Block
elements take up the entire line.
2169
02:28:01,660 --> 02:28:05,650
So let's go into our code and I'm going
to demonstrate another property of block
2170
02:28:05,651 --> 02:28:06,483
elements.
2171
02:28:08,020 --> 02:28:11,020
If we set a class on the
paragraph and we style it,
2172
02:28:11,620 --> 02:28:15,070
so let's set a class of video dash title,
2173
02:28:16,270 --> 02:28:21,010
let's save it and we're
going to style it and let's
2174
02:28:21,230 --> 02:28:24,890
it a width of 300 pixels,
2175
02:28:26,180 --> 02:28:27,770
save and refresh.
2176
02:28:28,460 --> 02:28:31,430
And now this paragraph is only 300 pixels,
2177
02:28:32,030 --> 02:28:34,430
so it's not stretching to
the end of the line anymore.
2178
02:28:34,970 --> 02:28:38,810
Let's verify that using the dev tools
by clicking this top left and then
2179
02:28:38,820 --> 02:28:39,653
hovering over.
2180
02:28:40,280 --> 02:28:44,960
So you see that the paragraph itself
only takes a width of 300 like we set in
2181
02:28:44,961 --> 02:28:45,793
our css,
2182
02:28:46,100 --> 02:28:50,720
but it still takes up the entire
line denoted by the orange part
2183
02:28:50,810 --> 02:28:55,700
on the right here. If we click on
this paragraph and we go to the
2184
02:28:55,710 --> 02:28:59,690
computer tab, notice that there
is no margin on the right side,
2185
02:29:00,110 --> 02:29:02,870
but we still have a ton of
orange area on the right.
2186
02:29:03,590 --> 02:29:05,450
So this is how block elements work.
2187
02:29:05,840 --> 02:29:08,600
Regardless of how much
space they actually take up,
2188
02:29:09,050 --> 02:29:10,640
they take up the entire line,
2189
02:29:10,910 --> 02:29:15,470
so they're forced to be on their own
line like this paragraph and these two
2190
02:29:15,471 --> 02:29:19,250
paragraphs. So that's what
a block element means.
2191
02:29:19,760 --> 02:29:22,790
The second type of element
is an inline block element.
2192
02:29:23,330 --> 02:29:28,130
An inline block element only takes up
as much space as it needs to and doesn't
2193
02:29:28,131 --> 02:29:29,510
take up the entire line.
2194
02:29:30,350 --> 02:29:35,150
An example of an inline block element
is the image element and the input
2195
02:29:35,151 --> 02:29:35,983
element.
2196
02:29:36,740 --> 02:29:39,800
They only take up as much space as
they need to and they don't take up the
2197
02:29:39,801 --> 02:29:40,633
entire line.
2198
02:29:40,760 --> 02:29:45,230
So another element could appear beside
them like we see here. So that's the
2199
02:29:45,231 --> 02:29:46,430
inline block element.
2200
02:29:46,820 --> 02:29:50,960
The third type of basic HTML element
is called the inline element.
2201
02:29:51,530 --> 02:29:54,170
Inline elements are
basically just text elements.
2202
02:29:54,500 --> 02:29:58,250
They appear within a line
of text. So if you remember,
2203
02:29:58,251 --> 02:30:00,950
we briefly introduce the element strong.
2204
02:30:01,760 --> 02:30:06,500
So this element appears
within a line of text like
2205
02:30:06,501 --> 02:30:07,333
this.
2206
02:30:08,330 --> 02:30:13,250
So this element makes a part of the text
bold and it appears within a line of
2207
02:30:13,251 --> 02:30:17,570
text. So those are the three
basic types of HTML elements,
2208
02:30:17,960 --> 02:30:22,340
a block element, which takes up the
entire line and inline block element,
2209
02:30:22,520 --> 02:30:24,890
which only takes up as
much space as it needs to,
2210
02:30:25,310 --> 02:30:29,000
and an inline element which
appears within a line of text.
2211
02:30:29,900 --> 02:30:34,040
Now the most interesting of these three
are the block elements and the inline
2212
02:30:34,041 --> 02:30:37,790
block elements because they determine
how these elements are displayed on the
2213
02:30:37,791 --> 02:30:42,620
page, whether beside each other
or above and below. In addition,
2214
02:30:42,650 --> 02:30:47,570
we can use a CSS property called display
to easily switch between block and
2215
02:30:47,600 --> 02:30:50,150
inline block. So let's
see how that would work.
2216
02:30:51,260 --> 02:30:54,140
So first let's start by switching
from block to inline block.
2217
02:30:54,770 --> 02:30:58,040
We're going to switch both of these
paragraphs to inline block elements.
2218
02:30:58,670 --> 02:31:01,940
Let's go into our code and we're
going to give this a class.
2219
02:31:03,020 --> 02:31:07,640
Let's call this video dash
author and let's call this
2220
02:31:08,420 --> 02:31:13,070
video dash stats. And we're
going to style these classes.
2221
02:31:13,580 --> 02:31:18,440
So we're going to style the
video dash author as well as the
2222
02:31:18,650 --> 02:31:21,420
video stats,
2223
02:31:22,830 --> 02:31:27,750
and we're going to set both of
these to display inline dash block
2224
02:31:28,860 --> 02:31:32,910
and this one as well
display inline dash block.
2225
02:31:33,810 --> 02:31:36,210
I'm going to introduce a
little bit of CSS syntax here.
2226
02:31:37,080 --> 02:31:39,900
If we have two sets of CSS
styles that are the same,
2227
02:31:40,410 --> 02:31:44,760
we can actually use a different
syntax by adding a comma here.
2228
02:31:46,080 --> 02:31:50,190
So this comma means that we're going
to target both the video author class
2229
02:31:50,730 --> 02:31:54,090
and the video stats class
with this set of styles.
2230
02:31:54,390 --> 02:31:57,870
So this is how we target multiple
things in CSS with a comma.
2231
02:31:59,460 --> 02:32:02,670
So as you can see, these two elements
now appear beside each other.
2232
02:32:03,120 --> 02:32:07,200
They're both inline block elements and
only take up as much space as they need
2233
02:32:07,201 --> 02:32:11,640
to. If we click the top left in
the DEF tools and hover over this,
2234
02:32:12,090 --> 02:32:16,170
you'll notice that this paragraph is
now only taking up as much space as the
2235
02:32:16,171 --> 02:32:21,090
text and the same thing for this
paragraph. So as you can see,
2236
02:32:21,091 --> 02:32:23,910
even though paragraphs by
default are block elements,
2237
02:32:24,300 --> 02:32:29,040
we can change them very easily to inline
block with the display property so that
2238
02:32:29,041 --> 02:32:30,420
we can put them beside each other.
2239
02:32:31,200 --> 02:32:33,120
Next we're going to try
the opposite direction.
2240
02:32:33,480 --> 02:32:37,110
We're going to go from an inline
block element to a block element,
2241
02:32:38,130 --> 02:32:42,870
and we're going to put these two on
separate lines. So let's go into our code
2242
02:32:43,230 --> 02:32:45,540
and we're going to style
the thumbnail class.
2243
02:32:46,110 --> 02:32:51,000
So I'm going to scroll up here and
I'm going to convert this to display
2244
02:32:52,110 --> 02:32:55,860
block, and now it will turn
the image into a display block,
2245
02:32:56,100 --> 02:33:00,810
and this will cause the image to take
up the entire line pushing the text box
2246
02:33:01,050 --> 02:33:03,720
down to the next line. If I save it,
2247
02:33:04,800 --> 02:33:07,590
now you can see that this image
is taking up the entire line.
2248
02:33:07,980 --> 02:33:11,430
We're going to verify this by clicking
the top left and then hovering over this
2249
02:33:11,431 --> 02:33:13,830
image. So using this property,
2250
02:33:13,831 --> 02:33:18,600
we can control whether an element appears
on the same line or on a different
2251
02:33:18,610 --> 02:33:22,260
line, and that's what we're
going to do to copy this design.
2252
02:33:23,220 --> 02:33:24,780
The search bar is at the top.
2253
02:33:25,080 --> 02:33:29,190
We have an image and then three
paragraphs each on a different line.
2254
02:33:29,760 --> 02:33:32,310
So we're going to use a display
property to achieve this.
2255
02:33:33,150 --> 02:33:34,050
Let's go into our code.
2256
02:33:34,710 --> 02:33:39,270
And first let's put the
search box at the top,
2257
02:33:41,310 --> 02:33:45,780
Save it. And since our image
is already display block,
2258
02:33:46,050 --> 02:33:47,460
it's going to take up the entire line,
2259
02:33:47,730 --> 02:33:50,910
so it's forced to take up a
line below the search box.
2260
02:33:51,270 --> 02:33:54,240
So I think this is pretty good as
long as these search box is up there,
2261
02:33:54,630 --> 02:33:56,610
then we're good to go. Next,
2262
02:33:56,611 --> 02:34:01,410
we're going to turn these back into
display block because we want these on
2263
02:34:01,411 --> 02:34:05,490
separate lines like our
design here. So to do that,
2264
02:34:05,491 --> 02:34:09,720
we're going to go into our code and
we could change this to display block,
2265
02:34:10,260 --> 02:34:13,500
but remember that paragraphs
by default are display block,
2266
02:34:14,100 --> 02:34:18,040
so we can just get rid
of this code, save it,
2267
02:34:18,700 --> 02:34:23,230
and now our elements are appearing at
least in the same structure as the design
2268
02:34:23,770 --> 02:34:26,740
from top to bottom. And each
element is taking up its own line.
2269
02:34:27,370 --> 02:34:28,990
So that is the display property.
2270
02:34:29,020 --> 02:34:31,960
It allows us to control how
an element is displayed,
2271
02:34:32,410 --> 02:34:36,310
whether they're a block element and take
up the whole line or they're an inline
2272
02:34:36,311 --> 02:34:39,370
block element and only take up
as much space as they need to.
2273
02:35:01,550 --> 02:35:02,290
In this lesson,
2274
02:35:02,291 --> 02:35:06,610
we're going to learn about the most
important HTML element called the diviv
2275
02:35:06,640 --> 02:35:10,240
element.
For example, here's twitter.com.
2276
02:35:10,720 --> 02:35:12,910
If you look at the HTML that Twitter uses,
2277
02:35:13,270 --> 02:35:17,920
you can see that they're using lots and
lots of divs. Here's another example,
2278
02:35:17,950 --> 02:35:21,060
Instagram. If we look at Instagram's html,
2279
02:35:21,220 --> 02:35:24,280
we can also see that they're
using lots and lots of divs.
2280
02:35:26,170 --> 02:35:29,170
So what exactly is a diviv
and why is it used so much?
2281
02:35:29,830 --> 02:35:32,140
So the diviv element stands for division,
2282
02:35:32,560 --> 02:35:36,490
but an easy way to understand this
is that the diviv is just a box.
2283
02:35:37,450 --> 02:35:39,670
We're going to go into our
code and look at an example.
2284
02:35:40,930 --> 02:35:44,740
So below our paragraphs,
let's create a diviv element,
2285
02:35:46,480 --> 02:35:50,080
and inside we're going to have
some text. This is a diviv,
2286
02:35:51,340 --> 02:35:52,173
save it.
2287
02:35:52,360 --> 02:35:57,100
And now we have our first diviv element
on the page to show you that the diviv
2288
02:35:57,130 --> 02:36:00,640
is just a box. We're going
to right click and inspect,
2289
02:36:02,500 --> 02:36:07,240
And then we're going to click this top
left icon and hover over the diviv.
2290
02:36:08,020 --> 02:36:11,170
So as you can see, we created
a box around our text.
2291
02:36:11,620 --> 02:36:15,640
You'll notice that this box stretches to
the end, and that's because the diviv,
2292
02:36:15,700 --> 02:36:18,970
like the paragraph by
default is a block element,
2293
02:36:19,030 --> 02:36:23,530
so it takes up the entire line, but
like we learned in the previous lesson,
2294
02:36:23,830 --> 02:36:27,690
we can easily change this to an inline
block using the display property.
2295
02:36:28,180 --> 02:36:32,320
So let's go ahead and do that and it'll
be more clear that this is really a box.
2296
02:36:33,430 --> 02:36:34,690
So we're going to set a class here.
2297
02:36:35,380 --> 02:36:38,650
We're going to call
this diviv dash example,
2298
02:36:40,690 --> 02:36:42,010
and now we're going to style it
2299
02:36:44,050 --> 02:36:48,100
and change the display to inline block
2300
02:36:49,570 --> 02:36:53,110
So that it doesn't take up the
entire line anymore, save it.
2301
02:36:53,830 --> 02:36:57,640
And now if we go to our webpage,
click this icon and hover over.
2302
02:36:58,450 --> 02:37:02,380
You can clearly see that the diviv
just creates a box around our content.
2303
02:37:02,710 --> 02:37:07,030
In this case, our content is some text.
So that's basically what a diiv is.
2304
02:37:07,660 --> 02:37:10,420
Now the second question is
why is a diiv so useful?
2305
02:37:11,290 --> 02:37:16,130
The key feature of a diiv is that
it can contain any other inside.
2306
02:37:16,760 --> 02:37:19,430
So right now we only have
some text inside the diviv,
2307
02:37:20,120 --> 02:37:23,810
but we can actually put
paragraphs, we can put images,
2308
02:37:23,820 --> 02:37:27,740
we can put any elements inside
divs as well as other divs.
2309
02:37:28,520 --> 02:37:30,440
Divs are meant to be containers.
2310
02:37:30,950 --> 02:37:34,190
And if we look at the YouTube
design that we have in our project,
2311
02:37:34,700 --> 02:37:37,970
we use containers everywhere.
So here's a container,
2312
02:37:38,630 --> 02:37:42,140
here's another container,
and here's another container.
2313
02:37:42,890 --> 02:37:47,210
These containers allow us to group all
of these elements together so that we can
2314
02:37:47,211 --> 02:37:51,440
create a layout that looks like this.
Here's another example from Twitter.
2315
02:37:52,070 --> 02:37:56,930
Here's a container, here's another
container, and here's another container.
2316
02:37:58,580 --> 02:38:01,220
In order to build complex
real world website,
2317
02:38:01,550 --> 02:38:05,600
we need containers to group our elements
together and lay them out on the page.
2318
02:38:06,110 --> 02:38:09,710
And the diviv is the perfect
solution for this container problem,
2319
02:38:10,070 --> 02:38:11,990
and that's why it's used so much.
2320
02:38:13,070 --> 02:38:16,850
Let's go back to our website and we're
going to practice using our diviv as a
2321
02:38:16,860 --> 02:38:17,693
container.
2322
02:38:18,440 --> 02:38:23,360
So we're going to create a container just
like our final project for this entire
2323
02:38:23,510 --> 02:38:28,130
video preview here. So that means we're
going to put all of these elements,
2324
02:38:28,220 --> 02:38:32,930
this image, and all three
paragraphs inside our diviv.
Let's see how that works.
2325
02:38:34,490 --> 02:38:38,810
So I'm going to get rid of this text first
and then I'm going to change this div
2326
02:38:38,900 --> 02:38:42,980
to a class of video dash preview
2327
02:38:44,480 --> 02:38:47,690
because this is going to contain all
these elements that are part of a video
2328
02:38:47,691 --> 02:38:48,523
preview.
2329
02:38:49,160 --> 02:38:53,390
And then I'm going to move the
image and the three paragraphs
2330
02:38:53,870 --> 02:38:54,710
into the diviv.
2331
02:38:59,360 --> 02:39:00,193
Now save,
2332
02:39:01,010 --> 02:39:04,730
and you might not notice any difference
because the diviv is simply just drawing
2333
02:39:04,760 --> 02:39:07,400
a box around the content inside,
2334
02:39:08,900 --> 02:39:13,730
but we can right click and
inspect and we can see the
2335
02:39:13,731 --> 02:39:15,830
diviv in our H T M L here.
2336
02:39:16,460 --> 02:39:20,060
And inside the diviv we have
our image and our paragraphs.
2337
02:39:20,930 --> 02:39:24,410
The diviv is just creating a
box around all this content.
2338
02:39:25,490 --> 02:39:28,130
So now I'll show you why
containers are so useful.
2339
02:39:29,060 --> 02:39:33,890
We're going to go into our code and we're
going to change the width of our diviv
2340
02:39:33,891 --> 02:39:37,910
element here. So we're going to
go up here and we can remove this.
2341
02:39:38,930 --> 02:39:41,420
Let's style the video preview class,
2342
02:39:44,420 --> 02:39:49,160
and we're going to set
a width of 300 pixels.
2343
02:39:49,820 --> 02:39:50,653
Let's see how that looks.
2344
02:39:53,540 --> 02:39:55,250
So the page doesn't look any different,
2345
02:39:55,580 --> 02:39:59,570
but if we click the icon in the top
left and then hover over our paragraphs,
2346
02:40:00,020 --> 02:40:04,250
we'll notice something interesting.
This paragraph is a block element,
2347
02:40:04,370 --> 02:40:07,730
so it's supposed to take up the
entire line, but in this case,
2348
02:40:07,940 --> 02:40:10,520
because this paragraph is inside a diviv,
2349
02:40:11,030 --> 02:40:13,500
it takes up the entire line in diviv.
2350
02:40:14,490 --> 02:40:18,270
So the way that block elements actually
work is that they take up the entire
2351
02:40:18,271 --> 02:40:22,050
line in their container
rather than on the page.
2352
02:40:23,340 --> 02:40:26,370
So that's really useful because
if we look at our final project,
2353
02:40:27,450 --> 02:40:31,290
so for these paragraphs, we want them
to appear on separate lines like this.
2354
02:40:31,620 --> 02:40:33,870
So we do want them to
take up their own line,
2355
02:40:34,440 --> 02:40:38,100
but we don't necessarily want them to
take up the line on the entire page
2356
02:40:38,370 --> 02:40:42,930
because we have some stuff on the right
side here. So to solve this problem,
2357
02:40:43,200 --> 02:40:47,850
we put the paragraphs inside a container
so that they take up their own line
2358
02:40:48,000 --> 02:40:52,590
in the container and not in the page.
And that's how we can create a layout like
2359
02:40:52,591 --> 02:40:55,710
this. Let's go back to our website.
2360
02:40:56,370 --> 02:40:58,290
If we hover over our diviv now,
2361
02:40:59,190 --> 02:41:01,710
so this blue box on the
left is our container.
2362
02:41:02,160 --> 02:41:06,540
It groups all the elements together and
keeps it within that blue area that you
2363
02:41:06,541 --> 02:41:08,250
see. Now,
2364
02:41:08,251 --> 02:41:11,820
a really cool thing about this is that
notice that the blue box doesn't actually
2365
02:41:11,821 --> 02:41:13,230
take up the entire page.
2366
02:41:13,650 --> 02:41:18,090
So we can actually have a second
box beside it on the right.
2367
02:41:18,630 --> 02:41:22,950
So we can add another blue box on the
right containing another video preview.
2368
02:41:24,630 --> 02:41:27,060
So now we're going to do
that, but first of all,
2369
02:41:27,090 --> 02:41:29,490
a diviv by default is a block element.
2370
02:41:29,940 --> 02:41:32,010
So notice on the right
side it's all orange.
2371
02:41:32,040 --> 02:41:36,210
That's because this diviv is taking
up the entire line. In this case,
2372
02:41:36,211 --> 02:41:38,400
we don't want it to take
up the entire line anymore.
2373
02:41:38,880 --> 02:41:42,510
That's why we're going to convert
it into an inline block element.
2374
02:41:43,470 --> 02:41:44,550
So let's go into our code.
2375
02:41:45,510 --> 02:41:50,340
We're going to go into the video
preview and we're going to type display
2376
02:41:50,970 --> 02:41:54,990
inline block. Let's save it.
2377
02:41:55,860 --> 02:41:59,430
And now we can see that our diviv is a
display inline block and it's actually
2378
02:41:59,431 --> 02:42:03,420
appearing beside our search bar
because this is also an inline block.
2379
02:42:03,810 --> 02:42:07,530
So they're both only taking up
as much space as they need to,
2380
02:42:07,890 --> 02:42:10,980
and now they can appear
beside each other. However,
2381
02:42:10,981 --> 02:42:14,670
we do want the search box to
be at the top in its own line.
2382
02:42:15,270 --> 02:42:17,730
So we're going to practice using
the display property. Again,
2383
02:42:18,780 --> 02:42:23,310
we're going to set the
search bar to display block
2384
02:42:24,540 --> 02:42:28,560
so that it takes up the entire line
and everything else is forced below it,
2385
02:42:29,430 --> 02:42:34,380
save it and refresh. And now if
we hover over this input element,
2386
02:42:34,740 --> 02:42:38,970
we can see that we forced it to
take up the entire line. Next,
2387
02:42:38,971 --> 02:42:42,750
we're going to create another video
preview beside this one because this is
2388
02:42:42,751 --> 02:42:43,380
inline block.
2389
02:42:43,381 --> 02:42:48,330
Now we can put another diviv here.
So I'm just going to simplify this
2390
02:42:49,020 --> 02:42:51,180
by making a copy of our current code.
2391
02:42:52,860 --> 02:42:55,680
So I'm just going to copy and paste,
2392
02:42:56,730 --> 02:43:00,120
and now we have two
video previews, save it.
2393
02:43:00,990 --> 02:43:04,590
And there we go. We now have two
video previews beside each other.
2394
02:43:05,010 --> 02:43:08,820
So they are two containers
right beside each other.
2395
02:43:09,210 --> 02:43:11,010
And remember in our css,
2396
02:43:11,650 --> 02:43:15,670
we set the width of these
containers to 300 pixels.
2397
02:43:16,090 --> 02:43:17,920
So that's the amount of
space that they take.
2398
02:43:18,400 --> 02:43:22,870
And we set their display to inline block
so they don't take up the entire line
2399
02:43:23,230 --> 02:43:24,670
and they can appear beside each other.
2400
02:43:25,180 --> 02:43:29,740
And now we're on our way to creating a
layout that looks like this. In fact,
2401
02:43:29,770 --> 02:43:34,270
let's actually replace the second
video preview here with this
2402
02:43:34,271 --> 02:43:36,040
content. So to do that,
2403
02:43:36,041 --> 02:43:38,800
we're going to download the
thumbnail and then change the text.
2404
02:43:39,490 --> 02:43:41,950
So let's right click and inspect.
2405
02:43:42,940 --> 02:43:45,610
I'm going to click this top
left and then click this image.
2406
02:43:46,120 --> 02:43:48,880
And now I can download the
thumbnail by going to this url.
2407
02:43:49,840 --> 02:43:51,970
And then clicking down here,
2408
02:43:53,440 --> 02:43:56,590
I'm going to control S
to save the thumbnail.
2409
02:43:57,010 --> 02:44:01,570
So I'm going to save it in the
folder that contains my code in the
2410
02:44:01,571 --> 02:44:05,980
thumbnails folder along with our
previous thumbnail. So save it here,
2411
02:44:06,580 --> 02:44:09,730
and I should see it in my
code editor right there.
2412
02:44:11,470 --> 02:44:15,340
Next, we're going to swap out the
thumbnails. So instead of thumbnail one,
2413
02:44:15,341 --> 02:44:18,670
we're going to set thumbnail two
and we're going to change the text.
2414
02:44:19,510 --> 02:44:24,460
So I'm going to change this
text here to be my title.
2415
02:44:25,930 --> 02:44:28,120
And I noticed we're still
using the strong element,
2416
02:44:28,660 --> 02:44:31,870
which we can now delete because
it was just for an example.
2417
02:44:36,550 --> 02:44:40,150
And I'm also going to
change the channel name here
2418
02:44:42,790 --> 02:44:46,510
and the video stats,
which is 19,000,004 years
2419
02:44:49,090 --> 02:44:53,680
and for years ago.
So now if I say
2420
02:44:53,690 --> 02:44:58,360
this, we have two different video
previews, but now we have a problem,
2421
02:44:59,050 --> 02:45:01,810
you'll notice that these two
aren't aligned with each other,
2422
02:45:02,770 --> 02:45:06,520
and that's because this
container is actually a little
bit taller than this one.
2423
02:45:07,240 --> 02:45:10,960
This piece of text here wraps
around to a second line.
2424
02:45:11,080 --> 02:45:14,890
While this one does not,
however, to make it look better,
2425
02:45:14,891 --> 02:45:16,810
we want to align these at the top.
2426
02:45:17,470 --> 02:45:20,140
So we learned this way back
in one of the earlier lessons,
2427
02:45:20,200 --> 02:45:23,440
and we're going to review how to do
that. We're going to go into our code
2428
02:45:24,940 --> 02:45:29,110
And we just have to set this
property vertical align,
2429
02:45:30,310 --> 02:45:34,300
and we're going to set it to top so
that these elements align at the top.
2430
02:45:34,720 --> 02:45:38,110
I'm going to save it. And
now that looks pretty good.
2431
02:45:39,880 --> 02:45:44,170
We now have two different video previews
and they are aligned with each other.
2432
02:45:44,740 --> 02:45:48,700
The last thing we'll do is to add
some space between them. So remember,
2433
02:45:48,730 --> 02:45:51,790
the space outside of an
element is called margin,
2434
02:45:52,270 --> 02:45:55,660
and we're going to add margin to
this entire container right now.
2435
02:45:56,380 --> 02:45:59,440
So we'll go into our code. And
in the video preview styles,
2436
02:45:59,980 --> 02:46:03,250
we're going to add margin dash, right?
2437
02:46:04,780 --> 02:46:08,920
And let's set it to something
like 15 pixels, save it.
2438
02:46:09,500 --> 02:46:11,480
And now we add in margin on the right.
2439
02:46:12,320 --> 02:46:16,790
And now the interesting thing about
this is if we right click and inspect,
2440
02:46:18,380 --> 02:46:21,860
and then in our HTML we find
our diviv, which is here,
2441
02:46:22,880 --> 02:46:25,760
you'll see that the margin is
applied on the entire diviv.
2442
02:46:27,050 --> 02:46:28,910
So that's how the div element works.
2443
02:46:29,000 --> 02:46:32,960
It's a container that groups other
elements together so that we can create
2444
02:46:32,961 --> 02:46:37,190
complex layouts like this and
eventually our YouTube project.
2445
02:46:58,570 --> 02:47:02,030
All right, so this is probably the
most important lesson of this course.
2446
02:47:02,510 --> 02:47:05,510
We're going to learn a technique
called the nested layouts technique,
2447
02:47:05,870 --> 02:47:09,740
and this is going to get us to a
professional level with HTML and css.
2448
02:47:10,400 --> 02:47:12,510
So what is the nested layouts technique?
2449
02:47:13,220 --> 02:47:16,160
The basic idea is that there
are two types of layouts.
2450
02:47:16,730 --> 02:47:19,760
The first one is a vertical
layout, which looks like this,
2451
02:47:19,850 --> 02:47:24,110
where items are on top of each other.
And then the second one is a horizontal
2452
02:47:24,111 --> 02:47:28,160
layout, which looks like this
where items are beside each other.
2453
02:47:29,180 --> 02:47:32,990
And by using a combination of
vertical and horizontal layouts,
2454
02:47:33,320 --> 02:47:37,670
we can create almost anything that
we see on a website. So for example,
2455
02:47:37,730 --> 02:47:40,700
let's take the YouTube video
preview that we've been working on.
2456
02:47:42,140 --> 02:47:44,900
We can break this down by
using a vertical layout.
2457
02:47:45,440 --> 02:47:49,250
And then inside this vertical layout,
we're going to have a horizontal layout.
2458
02:47:50,150 --> 02:47:54,290
And then inside this horizontal layout,
we're going to have a vertical layout.
2459
02:47:55,640 --> 02:48:00,140
So as you can see, we have layouts
inside layouts, inside layouts,
2460
02:48:00,560 --> 02:48:04,850
and that's why it's called the nested
layouts technique. And using this,
2461
02:48:04,910 --> 02:48:08,540
we can pretty much break down almost
everything that we see on a professional
2462
02:48:08,541 --> 02:48:13,130
website into a series of layouts and
then recreate them using our code.
2463
02:48:14,480 --> 02:48:17,870
So now we're going to go through together
a way that we can practice using the
2464
02:48:17,871 --> 02:48:22,340
nested layouts technique to break down
a design. We're going to go to our final
2465
02:48:22,341 --> 02:48:24,380
project. If you close it,
2466
02:48:24,381 --> 02:48:28,280
you can go to super
simple.dev/exercises/youtube.
2467
02:48:29,270 --> 02:48:32,390
And what we're going to do is we're going
to take a screenshot of one of these
2468
02:48:32,391 --> 02:48:33,223
designs,
2469
02:48:33,380 --> 02:48:37,790
and then we're going to use an image
editing software to draw out the layout.
2470
02:48:38,420 --> 02:48:41,420
So first, let's create
a screenshot on Windows.
2471
02:48:41,421 --> 02:48:44,240
You can use an app called SNP on Mac.
2472
02:48:44,270 --> 02:48:48,140
We're going to type command shift
n four to create a screenshot.
2473
02:48:49,280 --> 02:48:51,020
So let's take a screenshot of this
2474
02:48:53,300 --> 02:48:58,070
and then we're going to upload this
into an image editing software. Now,
2475
02:48:58,071 --> 02:49:00,290
feel free to use anything
that you're comfortable with,
2476
02:49:00,800 --> 02:49:04,010
but if you don't know what to
use, we can go to a new tab.
2477
02:49:05,120 --> 02:49:08,430
And we're going to search
for Google drawings,
2478
02:49:11,040 --> 02:49:14,700
And we're going to use this to
practice the nested layouts technique.
2479
02:49:16,170 --> 02:49:18,960
So once we have this open,
we're going to upload our image.
2480
02:49:19,470 --> 02:49:22,980
I'm going to go to my computer
and upload the screenshot.
2481
02:49:25,440 --> 02:49:29,880
And now we're just going to draw some
rectangles to represent our layout.
2482
02:49:30,690 --> 02:49:35,220
So we're going to go up here to shapes
and we're going to create a rectangle.
2483
02:49:36,060 --> 02:49:39,810
And first we're going to create
a vertical layout one and two.
2484
02:49:40,770 --> 02:49:43,350
So I'm just going to
draw a rectangle here.
2485
02:49:45,480 --> 02:49:49,350
Let's change the background to transparent
so we can see what's underneath.
2486
02:49:50,150 --> 02:49:54,810
And I'll make the border a little
more thick and change it to red
2487
02:49:56,220 --> 02:49:57,090
so it's easier to see.
2488
02:49:59,490 --> 02:50:04,200
And now I'm going to copy
this and paste it to create a
2489
02:50:04,201 --> 02:50:08,010
duplicate. And I'm just
going to move it down here
2490
02:50:10,530 --> 02:50:15,060
and resize the rectangle
like this. All right,
2491
02:50:15,120 --> 02:50:19,170
so just like that we created
a vertical layout for now.
2492
02:50:19,200 --> 02:50:20,970
Don't worry about the video time here.
2493
02:50:21,390 --> 02:50:25,440
We're going to recreate this later in
the course using another feature of css.
2494
02:50:27,330 --> 02:50:31,860
And now looking at our design, we
have a horizontal layout one and two.
2495
02:50:33,090 --> 02:50:34,560
So to create a horizontal layout,
2496
02:50:34,680 --> 02:50:37,110
we're going to draw it out
again using rectangles.
2497
02:50:38,070 --> 02:50:41,670
So let's go in here and we're
going to create another rectangle,
2498
02:50:43,440 --> 02:50:47,820
and we're going to draw out the
horizontal layout like this.
2499
02:50:48,060 --> 02:50:48,893
So here's one,
2500
02:50:50,070 --> 02:50:54,090
change the background to your
transparent and make it bold.
2501
02:50:55,380 --> 02:50:59,580
And I'm going to use the blue color
to represent a horizontal layout.
2502
02:51:00,990 --> 02:51:04,620
Now I'm going to copy
this and paste it here
2503
02:51:06,750 --> 02:51:07,950
and resize it a little bit
2504
02:51:11,940 --> 02:51:15,540
like that. And now we have
our horizontal layout.
2505
02:51:16,530 --> 02:51:20,970
And finally inside here we're going
to have a vertical layout like this.
2506
02:51:21,840 --> 02:51:23,940
So again, we're just going
to keep drawing rectangles.
2507
02:51:24,870 --> 02:51:29,730
I'm going to copy this
and paste it and move it
2508
02:51:29,731 --> 02:51:33,000
down here and resize it a little
bit so that we can see it.
2509
02:51:34,620 --> 02:51:38,250
So right here, and then copy this
2510
02:51:39,750 --> 02:51:40,890
and then paste it again.
2511
02:51:42,270 --> 02:51:44,760
We're going to create the second
part of our vertical layout
2512
02:51:47,220 --> 02:51:51,840
like that, and then copy
and paste it one last time
2513
02:51:53,460 --> 02:51:54,293
Down here.
2514
02:51:59,520 --> 02:52:03,960
So that's how we use the nested layouts
technique to visualize and break down a
2515
02:52:03,961 --> 02:52:08,830
design into a combination of
vertical layouts and horizontal
2516
02:52:08,831 --> 02:52:11,740
layouts. Now let's do some more practice.
2517
02:52:11,920 --> 02:52:15,460
We're going to take another design and
break that down using this technique.
2518
02:52:16,390 --> 02:52:20,470
So we're going to open a new
tab and we're going to go to
2519
02:52:21,220 --> 02:52:24,970
twitter.com/super
2520
02:52:25,570 --> 02:52:27,100
simple dev,
2521
02:52:29,890 --> 02:52:31,300
and we're going to take,
2522
02:52:31,390 --> 02:52:35,200
just take one of my tweets here
and take a screenshot of this.
2523
02:52:37,540 --> 02:52:40,570
And we're going to break down this
design using the same technique.
2524
02:52:41,570 --> 02:52:43,300
So let's go back to Google drawings,
2525
02:52:45,130 --> 02:52:49,000
and we're going to create a
new drawing to practice with.
2526
02:52:51,550 --> 02:52:54,160
And let's upload that
screenshot that we just took
2527
02:52:55,750 --> 02:52:57,940
onto this new drawing right here.
2528
02:53:00,700 --> 02:53:02,050
So now we're going to do the same thing.
2529
02:53:02,170 --> 02:53:05,440
We're going to draw rectangles
to represent the nested layouts.
2530
02:53:06,400 --> 02:53:10,420
So let's take a look at this to see
how we can break this down immediately.
2531
02:53:10,421 --> 02:53:15,070
I see that we have a
horizontal layout one and
2532
02:53:15,130 --> 02:53:18,400
two, so we can break it
down into that. First,
2533
02:53:19,270 --> 02:53:23,860
let's draw a rectangle to represent that.
2534
02:53:23,950 --> 02:53:25,360
So here's the first one,
2535
02:53:29,020 --> 02:53:33,790
and I'm just going to make it blue
to represent a horizontal layout And
2536
02:53:34,060 --> 02:53:38,080
copy and paste it like this.
2537
02:53:40,630 --> 02:53:42,910
Okay, so that's our horizontal layout.
2538
02:53:45,880 --> 02:53:47,950
And now looking at the design inside here,
2539
02:53:48,370 --> 02:53:51,820
I can see that we can break it down
further into a vertical layout.
2540
02:53:52,570 --> 02:53:54,850
So I'm going to draw some more rectangles,
2541
02:53:57,070 --> 02:53:59,560
and I'm just going to draw right here
2542
02:54:02,740 --> 02:54:07,390
and style it a little bit and make it
red to represent the vertical layout.
2543
02:54:08,380 --> 02:54:10,960
So copy and paste,
2544
02:54:12,040 --> 02:54:13,780
and I'm just going to move it down here.
2545
02:54:16,990 --> 02:54:19,600
Okay. Okay,
2546
02:54:19,610 --> 02:54:23,290
so that's two copy and paste
2547
02:54:24,520 --> 02:54:25,510
to get three.
2548
02:54:32,650 --> 02:54:33,850
So it doesn't have to be perfect.
2549
02:54:33,851 --> 02:54:37,360
It's just here to help us
visualize the design. All right,
2550
02:54:37,361 --> 02:54:41,170
so we have a horizontal layout, and
then inside we have a vertical layout.
2551
02:54:41,800 --> 02:54:46,450
And now looking at this, we can also
break this down into a horizontal layout.
2552
02:54:47,140 --> 02:54:49,360
Let's draw some more rectangles. Actually,
2553
02:54:49,361 --> 02:54:54,040
I'm going to just copy
this one and paste it and
2554
02:54:54,041 --> 02:54:58,750
resize it here. So I'm going
to break this down further
2555
02:55:01,960 --> 02:55:04,340
into a horizontal inside here.
2556
02:55:09,140 --> 02:55:13,460
And finally, we can break this part
down further into a horizontal layout.
2557
02:55:14,030 --> 02:55:18,110
So let's copy this
again and paste it here.
2558
02:55:24,320 --> 02:55:25,820
And I'm just going to
2559
02:55:29,540 --> 02:55:32,420
create a few of them
Like this.
2560
02:55:34,610 --> 02:55:35,450
So just like that,
2561
02:55:35,451 --> 02:55:40,220
we broke down this design into a
combination of vertical and horizontal
2562
02:55:40,221 --> 02:55:42,660
layouts using the nested
layouts technique.
2563
02:55:43,220 --> 02:55:45,890
So now that we have a good
understanding of how this works,
2564
02:55:46,250 --> 02:55:49,310
we're going to learn how to
recreate this using code.
2565
02:55:50,870 --> 02:55:52,850
So let's go back into our project.
2566
02:55:53,450 --> 02:55:55,490
I'm going to delete all
these extra tabs here.
2567
02:55:56,960 --> 02:56:00,200
So we're going to go from something that
looks like this to something that looks
2568
02:56:00,201 --> 02:56:03,320
like our final design
here. Now, before we start,
2569
02:56:03,321 --> 02:56:05,660
we actually need to download
this channel profile picture.
2570
02:56:06,290 --> 02:56:10,340
So remember to do that, we
can right click and inspect,
2571
02:56:11,870 --> 02:56:14,990
click the top left icon here,
and then click this picture.
2572
02:56:15,860 --> 02:56:19,190
And we have the URL to download it
here. So I'm going to hover over it,
2573
02:56:20,000 --> 02:56:24,170
scroll down and click this
link. Now, control S to save.
2574
02:56:25,160 --> 02:56:27,980
And I'm going to save it in the
folder that contains our code,
2575
02:56:29,030 --> 02:56:30,410
which is right here.
2576
02:56:32,480 --> 02:56:34,520
And now this should show
up in our code editor.
2577
02:56:35,840 --> 02:56:39,680
So I'm actually going to create a folder
to store all of these channel profile
2578
02:56:39,681 --> 02:56:41,960
pictures since we're going
to have a lot of them.
2579
02:56:42,440 --> 02:56:45,650
So I'm going to call this
channel dash pictures,
2580
02:56:47,750 --> 02:56:49,340
And I'll put this in there.
2581
02:56:52,760 --> 02:56:57,530
Now we're ready to create our layouts.
So let's go back to our final design
2582
02:56:59,120 --> 02:57:00,800
and see what kind of layouts we have.
2583
02:57:02,240 --> 02:57:06,290
So we're going to have a vertical
layout, that's one and two,
2584
02:57:06,650 --> 02:57:09,170
so two rows. And then
inside the second row,
2585
02:57:09,171 --> 02:57:13,760
we're going to have a horizontal
layout, which is one and two.
2586
02:57:14,840 --> 02:57:16,850
Now, inside the second horizontal layout,
2587
02:57:17,210 --> 02:57:21,440
we're going to have a vertical
layout one, two, and three.
2588
02:57:23,300 --> 02:57:26,960
So that's how we're going to
break down this design. And again,
2589
02:57:26,990 --> 02:57:28,730
don't worry about the video time here.
2590
02:57:29,060 --> 02:57:31,190
We're going to recreate
this later in the course.
2591
02:57:32,510 --> 02:57:34,850
Let's go into our code and
we're going to implement that.
2592
02:57:35,810 --> 02:57:38,630
So make sure that we have our
project open on the left here.
2593
02:57:38,960 --> 02:57:42,530
And we're going to start by
creating some vertical layouts.
2594
02:57:43,400 --> 02:57:46,070
To create a vertical layout.
We're going to create two divs.
2595
02:57:49,880 --> 02:57:52,100
So this is going to be
our vertical layout.
2596
02:57:53,060 --> 02:57:55,910
Now remember that divs are
block elements by default,
2597
02:57:56,420 --> 02:58:00,020
so they're going to take up the entire
line and appear one on top of another.
2598
02:58:00,350 --> 02:58:02,700
And that's exactly what we
want for a vertical layout.
2599
02:58:03,720 --> 02:58:07,140
So let's look at our design. Here.
We have the image in the first row.
2600
02:58:07,350 --> 02:58:11,850
So I'm going to move
this up, Cut and paste.
2601
02:58:13,080 --> 02:58:15,780
And then in the second row
we have everything else.
2602
02:58:16,500 --> 02:58:19,920
So I'm going to put everything
here in the second row.
2603
02:58:20,160 --> 02:58:22,260
So cut and paste.
2604
02:58:24,330 --> 02:58:25,920
Let's save it and refresh.
2605
02:58:26,970 --> 02:58:29,520
Now we're going to create a
horizontal layout down here.
2606
02:58:30,300 --> 02:58:32,610
One column's going to have
the channel profile picture,
2607
02:58:32,880 --> 02:58:34,830
and the other column is
going to have the text.
2608
02:58:35,460 --> 02:58:37,650
Let's create the channel
profile picture. First,
2609
02:58:38,640 --> 02:58:43,110
we're going to create an image element.
We're going to give it the source
2610
02:58:44,850 --> 02:58:47,550
Of the picture that we
downloaded in the beginning.
2611
02:58:48,600 --> 02:58:53,460
So that picture is in this folder. So
we're going to go into this folder first,
2612
02:58:53,730 --> 02:58:57,090
which is channel dash pictures.
2613
02:58:58,080 --> 02:59:00,660
And then remember to have a
slash to go into that folder.
2614
02:59:01,170 --> 02:59:05,070
And then channel one jpeg, save it.
2615
02:59:06,480 --> 02:59:10,230
And now if we look at our current website,
the image is actually in its own row,
2616
02:59:10,290 --> 02:59:12,860
and that's because the
paragraph is a block element,
2617
02:59:12,870 --> 02:59:14,430
so it has to appear on its own line.
2618
02:59:15,420 --> 02:59:19,590
We're going to change this by creating
a horizontal layout, like one and two.
2619
02:59:20,430 --> 02:59:24,480
So to do that, we're going to
create two divs. Here's one diviv,
2620
02:59:25,290 --> 02:59:27,420
and here is another diviv.
2621
02:59:29,040 --> 02:59:33,030
Now the difference here is that we're
going to make these divs inline block
2622
02:59:33,031 --> 02:59:33,863
elements.
2623
02:59:33,990 --> 02:59:37,890
So remember that inline block is what
allows elements to appear beside each
2624
02:59:37,891 --> 02:59:38,850
other like this,
2625
02:59:39,210 --> 02:59:43,140
while block elements force the element
to take up the entire line so they will
2626
02:59:43,150 --> 02:59:44,270
appear vertically.
2627
02:59:45,840 --> 02:59:49,290
So we're going to make these two divs
inline block elements to create our
2628
02:59:49,291 --> 02:59:54,270
horizontal layout. Let's reference
our design first. In the first column,
2629
02:59:54,271 --> 02:59:57,990
we have the channel profile picture.
So I'm just going to move this
2630
02:59:59,550 --> 03:00:04,440
Into the first diviv here.
And then in the second diviv,
2631
03:00:04,470 --> 03:00:08,700
we have all the text. So I'm going
to move all of the text here,
2632
03:00:10,290 --> 03:00:12,300
cut and paste.
2633
03:00:14,340 --> 03:00:18,240
Now let's make these divs inline blocks
so that they appear next to each other.
2634
03:00:19,260 --> 03:00:22,650
I'm going to give a class so
that we can target it with css.
2635
03:00:23,220 --> 03:00:26,460
Let's call this the channel picture.
2636
03:00:27,600 --> 03:00:30,960
And then we're also going to give a class
to this div so that we can target it.
2637
03:00:31,920 --> 03:00:34,680
Let's call this the video dash info.
2638
03:00:36,840 --> 03:00:38,130
And now in our css,
2639
03:00:40,470 --> 03:00:42,420
we're going to make the channel picture
2640
03:00:44,310 --> 03:00:49,200
picture display in line dash block.
2641
03:00:50,670 --> 03:00:54,820
And we're also going to make the
video info display inline block.
2642
03:00:54,830 --> 03:00:58,980
So they appear next to
each other video dash info
2643
03:01:00,490 --> 03:01:03,730
display in line block,
2644
03:01:04,900 --> 03:01:06,370
save it and refresh.
2645
03:01:08,050 --> 03:01:10,120
Now you'll notice that they're
still on top of each other,
2646
03:01:10,420 --> 03:01:13,330
and that's because divs by default
have a width of a hundred percent.
2647
03:01:13,780 --> 03:01:18,220
So we need to decrease the width of these
two divs so that they appear next to
2648
03:01:18,221 --> 03:01:22,390
each other. So remember that for the
video preview card. So this whole thing,
2649
03:01:22,900 --> 03:01:25,300
we set the diviv to 300 pixels,
2650
03:01:25,750 --> 03:01:27,610
and that's how they can
appear beside each other.
2651
03:01:28,180 --> 03:01:30,970
So we're going to do the same thing
for our horizontal layout down here
2652
03:01:33,160 --> 03:01:34,300
for the channel picture,
2653
03:01:34,660 --> 03:01:38,530
let's set a width of 50 pixels.
2654
03:01:39,940 --> 03:01:41,230
And then for the video info,
2655
03:01:41,231 --> 03:01:45,040
we're going to set a width to 200 pixels.
2656
03:01:46,390 --> 03:01:50,350
So this is the first column
of our horizontal layout.
It's going to take up 50
2657
03:01:50,351 --> 03:01:53,440
pixels like this, and then
this is the second column.
2658
03:01:53,470 --> 03:01:54,940
It's going to take up 200 pixels.
2659
03:01:55,390 --> 03:01:59,500
It's going to appear beside the first
column because both of them are display
2660
03:01:59,501 --> 03:02:02,950
inline block. So let's save this,
2661
03:02:03,790 --> 03:02:05,350
and you'll notice it looks really weird.
2662
03:02:06,460 --> 03:02:08,770
So let's look at our code
and see what the problem is.
2663
03:02:09,400 --> 03:02:10,360
I'm going to scroll up here,
2664
03:02:10,750 --> 03:02:13,510
and you'll notice that we set
the width of the video title,
2665
03:02:13,930 --> 03:02:18,250
which is this text to 300. So
we're forcing it to overflow here,
2666
03:02:18,370 --> 03:02:21,850
and that's not what we want.
So we just need to remove this
2667
03:02:24,220 --> 03:02:25,450
and not force the width.
2668
03:02:27,070 --> 03:02:29,410
So if we don't force a width of 300,
2669
03:02:29,680 --> 03:02:33,310
the paragraph will just take up
the entire space of the container,
2670
03:02:33,760 --> 03:02:35,170
which is 200 pixels.
2671
03:02:36,190 --> 03:02:39,160
Now the second thing we notice is
that this image is overflowing,
2672
03:02:39,640 --> 03:02:41,350
and that's because images by default,
2673
03:02:41,680 --> 03:02:45,340
they overflow.
So they keep their original dimensions,
2674
03:02:45,400 --> 03:02:48,760
so they keep their original size
and that causes them to overflow.
2675
03:02:49,240 --> 03:02:53,830
So we want to resize this image so
that it only takes up 50 pixels.
2676
03:02:55,030 --> 03:02:56,740
Let's go ahead and do that right now.
2677
03:02:58,330 --> 03:03:00,790
Let's give it a class so
that we can resize it.
2678
03:03:01,390 --> 03:03:05,260
And I'm going to call this
the profile dash picture.
2679
03:03:06,700 --> 03:03:11,410
And then I'll scroll up
here dot profile dash
2680
03:03:11,411 --> 03:03:12,243
picture.
2681
03:03:13,120 --> 03:03:17,980
And then I'm going to resize the
width to 50 pixels so that it
2682
03:03:17,981 --> 03:03:21,160
fits exactly this
column. Going to save it.
2683
03:03:22,090 --> 03:03:23,140
And now that looks pretty good.
2684
03:03:25,540 --> 03:03:29,740
We can actually see the layout
in our browser by right clicking
2685
03:03:29,860 --> 03:03:34,090
inspect and finding this html.
2686
03:03:35,290 --> 03:03:38,890
So I can click this top left
icon and just click this picture.
2687
03:03:39,880 --> 03:03:42,520
So I'll show you what it
looks like in the html.
2688
03:03:44,470 --> 03:03:48,340
So here we have a vertical
layout, so one and two,
2689
03:03:49,180 --> 03:03:52,180
and then here we have
horizontal layout one and two.
2690
03:03:56,110 --> 03:04:00,260
Now, a better way to do this is actually
to set this to a hundred percent.
2691
03:04:01,970 --> 03:04:05,840
So this means the image will take up
the entire space of its container.
2692
03:04:06,290 --> 03:04:11,120
So if we look at our html, this
image is inside this container.
2693
03:04:11,630 --> 03:04:14,780
If we set it to a hundred percent, it'll
take up the space in the container,
2694
03:04:15,110 --> 03:04:19,790
which is basically the 50 pixels
that we have here. Let's save it.
2695
03:04:22,220 --> 03:04:25,820
Next. Remember that we've seen this
problem before, they're not aligned.
2696
03:04:27,500 --> 03:04:31,010
So we're going to align this
inline block element to the top.
2697
03:04:32,510 --> 03:04:34,790
To do that, we're going
to use this property here,
2698
03:04:34,880 --> 03:04:37,130
vertical align top that we've seen before.
2699
03:04:38,330 --> 03:04:42,620
So vertical dash, align, top,
2700
03:04:44,240 --> 03:04:48,110
save it. All right, so we're almost there,
2701
03:04:48,230 --> 03:04:50,150
but notice that these two aren't aligned.
2702
03:04:51,110 --> 03:04:53,420
This paragraph has some margin at the top.
2703
03:04:54,110 --> 03:04:58,790
Remember that paragraphs by default
come with margin at the top and at the
2704
03:04:58,791 --> 03:04:59,623
bottom.
2705
03:04:59,960 --> 03:05:03,230
So we're going to go into our code and
we're going to get rid of this margin at
2706
03:05:03,231 --> 03:05:06,680
the top. So let's scroll up. Oh,
2707
03:05:06,770 --> 03:05:10,940
so we actually deleted that style.
So let's create a new style here.
2708
03:05:11,420 --> 03:05:14,540
We're going to target
the video dash title.
2709
03:05:15,560 --> 03:05:18,470
We're going to target the
class video dash title,
2710
03:05:19,520 --> 03:05:23,810
set the margin dash top two zero,
2711
03:05:25,490 --> 03:05:27,350
and that's going to
eliminate the space up here.
2712
03:05:31,190 --> 03:05:35,150
So I'm going to pause here because we've
actually created the nested layout that
2713
03:05:35,151 --> 03:05:38,810
we need. Let's look into our
H T M L in the dev tools.
2714
03:05:39,770 --> 03:05:41,990
And if we look at this video preview,
2715
03:05:42,440 --> 03:05:45,440
we have a vertical layout one and two.
2716
03:05:46,790 --> 03:05:51,080
Inside the vertical layout, we have
a horizontal layout one and two.
2717
03:05:52,160 --> 03:05:55,730
And then inside our horizontal layout,
we have another vertical layout,
2718
03:05:56,180 --> 03:05:57,590
1, 2, 3.
2719
03:05:59,330 --> 03:06:04,070
So that's a practical example of using
the nested layout technique to create a
2720
03:06:04,071 --> 03:06:06,590
layout that's a similar shape to this.
2721
03:06:08,510 --> 03:06:13,400
The only thing that's left to do
is to style our website with CSS
2722
03:06:13,401 --> 03:06:17,990
one by one until it looks like this.
So we're going to do that right now.
2723
03:06:19,070 --> 03:06:22,250
So let's go into our code, and we're
going to style these elements one by one.
2724
03:06:23,390 --> 03:06:27,230
So I'm actually going to move this down
here so that I can see it a lot easier.
2725
03:06:33,620 --> 03:06:36,920
So the first thing I noticed
is that the image is round.
2726
03:06:37,580 --> 03:06:41,090
So remember to create a round
image or round anything,
2727
03:06:41,570 --> 03:06:43,280
we're going to use rounded corners.
2728
03:06:43,790 --> 03:06:48,740
So we're going to set
the border dash radius to
2729
03:06:48,890 --> 03:06:53,450
let's say 20 pixels. Save it.
So we have rounded corners,
2730
03:06:53,451 --> 03:06:56,040
and it's getting more round,
but it's not a full circle yet.
2731
03:06:56,820 --> 03:06:59,220
So let's set this to maybe 50 pixels.
2732
03:07:01,140 --> 03:07:02,760
So now it looks a little too big.
2733
03:07:03,570 --> 03:07:06,840
Let's set the width to
something like 40 pixels.
2734
03:07:09,600 --> 03:07:14,220
I think that looks pretty close and
we can always change it later. Next,
2735
03:07:14,221 --> 03:07:18,150
there's some spacing between the
first row and the second row.
2736
03:07:19,110 --> 03:07:23,580
So let's go in here. I'm
going to set a class here.
2737
03:07:24,660 --> 03:07:28,770
Call this the thumbnail dash row.
2738
03:07:29,880 --> 03:07:34,350
And then we're going to
style this thumbnail row.
2739
03:07:35,760 --> 03:07:40,350
And remember to add spacing
to the bottom, we add margin
2740
03:07:42,270 --> 03:07:46,560
dash bottom, and let's add
a margin of maybe 10 pixels.
2741
03:07:47,370 --> 03:07:52,260
Save it. Okay, maybe 12 pixels.
Okay, so that looks good enough.
2742
03:07:53,070 --> 03:07:54,960
And finally, we can style the text.
2743
03:07:57,330 --> 03:08:01,620
So this YouTube project is actually
using the Google font called reto.
2744
03:08:02,220 --> 03:08:05,940
We learned in a previous lesson how to
load Google fonts and in particular,
2745
03:08:05,941 --> 03:08:08,460
how to load robo. So we're
going to do that again.
2746
03:08:09,600 --> 03:08:11,250
Let's go to a new tab.
2747
03:08:11,940 --> 03:08:14,790
We're going to search for Google fonts,
2748
03:08:16,500 --> 03:08:21,360
and we're going to load reto onto our
page. So if you don't have this here,
2749
03:08:21,361 --> 03:08:25,500
this is from my previous session,
we can actually search for robo
2750
03:08:27,330 --> 03:08:32,040
and then just open it here. And then
we select these styles that we want.
2751
03:08:32,100 --> 03:08:34,590
So I'm going to get the regular style,
2752
03:08:35,370 --> 03:08:38,250
and then this seems like a bolded font.
2753
03:08:38,251 --> 03:08:43,020
So I'm going to get the medium
font and the bold font just in
2754
03:08:43,021 --> 03:08:47,670
case. So I'm going to go up
to see the styles I selected.
2755
03:08:48,390 --> 03:08:50,280
And then that looks pretty good.
2756
03:08:51,540 --> 03:08:55,200
And Google will give me the code that
I need to load this onto my website.
2757
03:08:55,980 --> 03:08:57,030
So I'm going to copy this
2758
03:08:59,130 --> 03:09:01,320
and just paste it into my head section.
2759
03:09:02,220 --> 03:09:07,200
So right in between here. All right,
2760
03:09:07,740 --> 03:09:12,390
so now I loaded the robo font, and
we're going to use it in our page.
2761
03:09:14,610 --> 03:09:19,530
So we're going to target all
paragraphs and we're going
2762
03:09:19,531 --> 03:09:23,890
to change their font family to reto.
2763
03:09:24,510 --> 03:09:29,160
And we're also going to use a backup
font with this comma of aerial.
2764
03:09:30,870 --> 03:09:34,260
So this syntax here with a
comma is called a font stack.
2765
03:09:34,740 --> 03:09:37,050
This basically lets us
set up a backup font.
2766
03:09:37,470 --> 03:09:40,800
If for whatever reason Reto
fails to load from Google,
2767
03:09:41,100 --> 03:09:44,430
then it will fall back to our
backup font, which is aerial,
2768
03:09:46,560 --> 03:09:50,250
save it. Next,
2769
03:09:50,251 --> 03:09:52,170
I'm going to change the size of the font.
2770
03:09:53,230 --> 03:09:57,070
So let's change the video title to maybe
2771
03:09:58,330 --> 03:10:01,900
14 pixels. Save it. Okay,
2772
03:10:01,930 --> 03:10:06,310
I think that looks pretty good.
Next, I'm going to make it bold.
2773
03:10:06,940 --> 03:10:11,080
So font dash weight bold,
2774
03:10:11,770 --> 03:10:12,603
save it.
2775
03:10:14,140 --> 03:10:17,380
So this looks like it's a little
bit too bold compared to this font.
2776
03:10:18,040 --> 03:10:20,890
So I'm actually going to
change this valley to 500.
2777
03:10:22,210 --> 03:10:25,990
So if you recall, we actually
selected three styles of fonts,
2778
03:10:26,590 --> 03:10:30,670
the irregular 400,
medium, 500, and bold 700.
2779
03:10:31,330 --> 03:10:35,710
So when we set the font weight to bold,
it actually corresponds to a number,
2780
03:10:35,920 --> 03:10:39,700
which is 700. A regular
font weight is 400,
2781
03:10:40,150 --> 03:10:42,040
and a semi bold is 500.
2782
03:10:43,540 --> 03:10:46,720
So usually we use the number value
because it's a little more precise.
2783
03:10:47,230 --> 03:10:50,440
So usually instead of
typing font weight bold,
2784
03:10:51,130 --> 03:10:55,060
we wouldn't use font
weight 700. In our case,
2785
03:10:55,570 --> 03:11:00,010
our font is a little too bold, so
we're going to decrease this to 500,
2786
03:11:01,600 --> 03:11:05,020
which is the medium size that
we picked on Google fonts.
2787
03:11:05,800 --> 03:11:10,120
So let's save this. And
that looks pretty close.
2788
03:11:11,050 --> 03:11:13,630
Next, we're going to change
the space between the lines.
2789
03:11:14,980 --> 03:11:19,480
So remember the property to do
that, it's called line height.
2790
03:11:20,830 --> 03:11:25,720
And let's try 14 pixels.
That's not enough,
2791
03:11:26,830 --> 03:11:29,350
maybe 20 pixels. All right,
2792
03:11:29,351 --> 03:11:31,930
so I think that looks pretty
good and close to our design.
2793
03:11:32,470 --> 03:11:37,270
You might notice that the text here is
shorter than what we have in the design.
2794
03:11:37,960 --> 03:11:42,280
You may or may not see this because this
text actually depends on the size of
2795
03:11:42,281 --> 03:11:45,430
the webpage. So depending
on how wide your webpage is,
2796
03:11:47,020 --> 03:11:50,830
the length of this text will
change. And in our current website,
2797
03:11:50,831 --> 03:11:53,500
we actually haven't
implemented this resizing,
2798
03:11:54,040 --> 03:11:57,820
so we are going to fix this later. Next,
2799
03:11:57,821 --> 03:11:59,530
I'm going to style this paragraph.
2800
03:12:00,150 --> 03:12:04,750
So let's go into our HTML here
and look at the class name.
2801
03:12:04,751 --> 03:12:05,950
So it's the video author,
2802
03:12:06,880 --> 03:12:10,450
and it looks like we don't
have any styles for that yet.
2803
03:12:10,510 --> 03:12:12,370
So I'm going to write it down here.
2804
03:12:13,600 --> 03:12:16,930
So we're going to style the
class video dash author.
2805
03:12:19,930 --> 03:12:23,020
The first thing I notice is the
font size. So it's a lot smaller.
2806
03:12:23,590 --> 03:12:27,640
So font dash size. Let's try 12
pixels. Let's see how that looks.
2807
03:12:28,930 --> 03:12:33,490
Okay, so I think that looks pretty close.
And we're going to change the color.
2808
03:12:35,050 --> 03:12:38,500
Color. Now remember to get an exact color,
2809
03:12:38,501 --> 03:12:41,140
we can right click inspect spec,
2810
03:12:42,370 --> 03:12:47,260
and then click this top
left icon. Click this text,
2811
03:12:48,100 --> 03:12:52,070
go to the computer tab.
And if we scroll down,
2812
03:12:52,071 --> 03:12:54,230
we should get the text color right here.
2813
03:12:54,740 --> 03:12:58,820
So RGB 96, 96, 96, save that.
2814
03:13:00,170 --> 03:13:01,490
And if we go back,
2815
03:13:06,590 --> 03:13:10,880
okay, that looks perfect. Next,
I'm going to style this paragraph.
2816
03:13:11,810 --> 03:13:15,710
So in our code, this paragraph
is called video dash stats,
2817
03:13:16,520 --> 03:13:20,030
and I'm not sure if we have a style
for this. Doesn't look like we do.
2818
03:13:20,780 --> 03:13:25,100
So I'm going to write a new
one. so.video dash stats,
2819
03:13:26,600 --> 03:13:31,220
we're going to set the font size to
12 pixels because these two look the
2820
03:13:31,221 --> 03:13:34,010
same. Okay,
2821
03:13:34,040 --> 03:13:38,630
and then we're going to set the color
as well since these two look the same.
2822
03:13:41,210 --> 03:13:45,380
And now remember that whenever we have
these duplicate styles like this and
2823
03:13:45,381 --> 03:13:49,790
this, we can actually target
multiple classes by adding a comma.
2824
03:13:50,600 --> 03:13:55,280
So we're going to target the video
dash author class as well as the video
2825
03:13:55,490 --> 03:13:57,020
dash stats class.
2826
03:13:57,710 --> 03:14:00,650
So this is going to help us
reduce duplication of our code.
2827
03:14:01,280 --> 03:14:05,750
So I'm going to delete these lines,
save it, everything looks okay.
2828
03:14:07,310 --> 03:14:10,610
And the last thing we're going to modify
is the spacing between the paragraphs.
2829
03:14:11,090 --> 03:14:15,740
So remember that paragraphs by default
come with margin at the top and at the
2830
03:14:15,741 --> 03:14:18,950
bottom. Now, instead of
removing them individually,
2831
03:14:19,430 --> 03:14:23,990
I'm actually going to go up to the top
of our page. So we did this once before.
2832
03:14:24,680 --> 03:14:28,190
We're going to get rid of the default
margin for all paragraphs on the page.
2833
03:14:29,030 --> 03:14:29,690
So to do that,
2834
03:14:29,691 --> 03:14:34,550
we're going to go into these styles and
we're going to set the margin dash top
2835
03:14:34,940 --> 03:14:35,773
to zero.
2836
03:14:36,770 --> 03:14:41,630
And we're also going to set
the margin dash bottom two
2837
03:14:41,631 --> 03:14:46,400
zero. And this will get rid of
all the default margins. Save it.
2838
03:14:47,750 --> 03:14:50,450
And now we can set a more precise
margin at the bottom here.
2839
03:14:51,230 --> 03:14:52,580
So under the video title,
2840
03:14:53,450 --> 03:14:58,280
let's set a margin bottom of maybe 15
2841
03:14:58,400 --> 03:15:02,630
pixels. Save it. Okay, looks
like it's a little too much,
2842
03:15:02,631 --> 03:15:06,530
maybe 12 pixels. Okay,
2843
03:15:06,531 --> 03:15:09,980
I think that looks pretty good.
And now under the video author,
2844
03:15:10,040 --> 03:15:11,180
we're going to add some margin.
2845
03:15:13,910 --> 03:15:16,850
So currently we have some styles
that apply to both of these.
2846
03:15:17,390 --> 03:15:22,280
I'm going to target.video
dash author individually down
2847
03:15:22,281 --> 03:15:25,070
here. So for the video author,
2848
03:15:25,071 --> 03:15:27,860
I'm going to add a margin dash bottom
2849
03:15:29,510 --> 03:15:32,720
of maybe six pixels, save it,
2850
03:15:34,040 --> 03:15:37,970
and maybe four pixels. Okay,
2851
03:15:37,971 --> 03:15:41,120
so I think that looks pretty close.
And now if we look at our website,
2852
03:15:41,450 --> 03:15:45,230
you can tell that it's actually really
close to the final design that we have
2853
03:15:46,370 --> 03:15:49,500
now to finish off the second
video preview you have a choice.
2854
03:15:49,980 --> 03:15:53,850
You can either do everything that we did
in the code here to give yourself more
2855
03:15:53,851 --> 03:15:57,900
practice or if you want to save time
and move on to the next section,
2856
03:15:58,290 --> 03:16:02,430
we can just copy all of this
HTML and replace this part here
2857
03:16:05,130 --> 03:16:09,840
And then just swap out the thumbnail
as well as the channel profile
2858
03:16:09,841 --> 03:16:12,690
picture, which you'll need
to download first from here,
2859
03:16:13,140 --> 03:16:14,940
as well as swap out all of the text.
2860
03:16:15,330 --> 03:16:18,540
So I'm just going to fast forward this
video to finish up this second video
2861
03:16:18,541 --> 03:16:19,290
preview,
2862
03:16:19,291 --> 03:16:23,280
but feel free to pause it and try
yourself to give yourself more practice.
2863
03:16:29,190 --> 03:16:33,210
And there we go. In this lesson we
learn in the nested layouts technique,
2864
03:16:33,450 --> 03:16:37,140
which is one of the most important
techniques for being able to break down a
2865
03:16:37,141 --> 03:16:40,920
design that you see on a website
and recreate it using code.
2866
03:17:01,800 --> 03:17:04,470
In this lesson we're going
to learn about CSS grid,
2867
03:17:04,830 --> 03:17:09,360
which is a much better way to create
these horizontal layouts as well as to
2868
03:17:09,361 --> 03:17:14,250
create a grid like this that you
see in our final project. First,
2869
03:17:14,251 --> 03:17:16,500
we're going to open up the
website we were working on.
2870
03:17:16,980 --> 03:17:18,450
So I have it open right here.
2871
03:17:19,560 --> 03:17:22,080
And remember that for
our horizontal layouts,
2872
03:17:22,380 --> 03:17:26,070
we were creating them using something
called display inline block.
2873
03:17:26,700 --> 03:17:29,430
So if we go into our
code and we scroll down,
2874
03:17:32,010 --> 03:17:36,690
we were using display inline
block and a width to put these two
2875
03:17:36,720 --> 03:17:37,553
side by side.
2876
03:17:38,240 --> 03:17:41,640
Now there are some problems with display
inline block that I want to show you
2877
03:17:41,641 --> 03:17:42,473
right now.
2878
03:17:43,080 --> 03:17:47,130
We're going to set the background
color of these to gray,
2879
03:17:47,820 --> 03:17:50,400
so this will make it easier
to see what the problem is.
2880
03:17:52,500 --> 03:17:53,430
Now let's save it.
2881
03:17:55,260 --> 03:17:58,560
And now you can see that there's a
little bit of space between these two,
2882
03:17:59,160 --> 03:18:01,140
and this causes some alignment problems.
2883
03:18:02,190 --> 03:18:05,730
So the width of this entire
container here, the width here,
2884
03:18:06,840 --> 03:18:09,120
we set it to 300 pixels,
2885
03:18:10,110 --> 03:18:14,730
but we set the channel picture to 50
pixels here and the video info to 200.
2886
03:18:15,630 --> 03:18:20,040
So you would expect that we can actually
set this to two 50 to take up the
2887
03:18:20,041 --> 03:18:22,860
entire 300 pixels, but if I save it,
2888
03:18:24,030 --> 03:18:26,550
you can see that it's too long
and it wraps to the next line.
2889
03:18:27,090 --> 03:18:31,920
So we have to set it to something
like 2 45 and that will cause it to
2890
03:18:31,930 --> 03:18:33,060
appear beside each other.
2891
03:18:34,200 --> 03:18:38,400
So this is one problem with inline block
is that it has some alignment problems.
2892
03:18:38,880 --> 03:18:41,130
Now you might be wondering
where this space is coming from.
2893
03:18:41,850 --> 03:18:44,010
If we scroll down to our html,
2894
03:18:46,350 --> 03:18:49,990
we can see that there's actually
some space between these two divs,
2895
03:18:50,500 --> 03:18:55,450
and we learned earlier that H TML combines
multiple spaces together and that's
2896
03:18:55,451 --> 03:19:00,400
what shows up here. So we could remove
this and save and get rid of that
2897
03:19:00,401 --> 03:19:03,310
space, but that means our
code is less easy to read.
2898
03:19:04,510 --> 03:19:08,500
Now the second problem that inline block
has is that it's not vertically aligned
2899
03:19:08,530 --> 03:19:09,363
like you see here.
2900
03:19:10,060 --> 03:19:14,230
So now we're going to learn
a new technique called CSS
Grid that's going to help
2901
03:19:14,231 --> 03:19:19,150
us create perfectly aligned
horizontal layouts to learn grid.
2902
03:19:19,240 --> 03:19:22,960
We're going to create a new file where
we're just going to practice using grids.
2903
03:19:23,560 --> 03:19:28,000
So let's go into our code editor
and we're going to create a new file
2904
03:19:28,750 --> 03:19:32,060
called grid html.
2905
03:19:33,430 --> 03:19:36,820
And remember, for every HTML file,
we want the proper structure.
2906
03:19:37,480 --> 03:19:39,610
So at the top we're
going to have a doc type,
2907
03:19:41,760 --> 03:19:44,410
and then we're going to
have an HTML element.
2908
03:19:45,430 --> 03:19:50,080
And then inside we're going to
have a head element and a body
2909
03:19:50,470 --> 03:19:53,590
element. Now that we have
the proper structure,
2910
03:19:53,650 --> 03:19:55,960
we can open this file in live server.
2911
03:19:56,470 --> 03:19:59,740
So let's right click and
open with live server.
2912
03:20:04,780 --> 03:20:08,680
And then let's set the title
or the text in the tabs here
2913
03:20:10,390 --> 03:20:13,450
to two grid practice
2914
03:20:15,040 --> 03:20:17,950
so we know what this file
is about. Let's save it.
2915
03:20:19,120 --> 03:20:22,270
So I'm going to resize my windows here
just so we can see what's going on.
2916
03:20:24,640 --> 03:20:28,660
We're going to start off in the body
and we're going to create a diviv.
2917
03:20:29,590 --> 03:20:32,080
And then inside this diviv
we're going to create two divs.
2918
03:20:34,000 --> 03:20:38,020
So let's call this Diviv
one and let's call this
2919
03:20:38,770 --> 03:20:43,750
Diviv two. Save it. And
now to help us learn,
2920
03:20:43,990 --> 03:20:46,840
I'm actually going to show you
a new way of writing c s s.
2921
03:20:47,590 --> 03:20:49,420
So if we go to the opening tag here,
2922
03:20:50,050 --> 03:20:53,440
we can set a special attribute
called a style attribute.
2923
03:20:54,520 --> 03:20:58,900
Now the style attribute is unique
because it lets us write CSS code inside.
2924
03:20:59,620 --> 03:21:04,180
So let's write the code
background dash color light
2925
03:21:04,930 --> 03:21:07,360
blue,
And we save it.
2926
03:21:07,870 --> 03:21:11,350
We can see that these styles that we
wrote here are applied to this element.
2927
03:21:12,310 --> 03:21:16,780
So this code here is another
way of writing CSS called inline
2928
03:21:16,781 --> 03:21:20,530
styles. We're writing our
CSS inside a line of html.
2929
03:21:21,610 --> 03:21:24,040
We've already learned two
other ways of writing css.
2930
03:21:24,430 --> 03:21:28,660
One of them is the style element and the
other is to put our CSS in a separate
2931
03:21:28,661 --> 03:21:32,020
file. This is a third way of writing css.
2932
03:21:32,620 --> 03:21:36,700
Now generally we don't use this in Rio
websites because it makes our HTML harder
2933
03:21:36,701 --> 03:21:40,570
to read. In Rio websites, we put
our styles in a separate file,
2934
03:21:41,080 --> 03:21:45,040
but for now, since we're learning, this
is pretty useful because number one,
2935
03:21:45,050 --> 03:21:48,200
it only affects the element
with the style attribute.
2936
03:21:49,430 --> 03:21:54,160
And the other thing is that the
CSS code is right beside our HTML
2937
03:21:54,470 --> 03:21:56,750
so that when you go and
review this file later,
2938
03:21:57,020 --> 03:21:58,670
it's very easy to see what's going on.
2939
03:21:59,630 --> 03:22:01,520
So let's practice with
the style attribute.
2940
03:22:01,850 --> 03:22:03,830
We're going to add another
one to this second div.
2941
03:22:04,610 --> 03:22:07,490
So let's set this style
to background color,
2942
03:22:09,260 --> 03:22:12,650
and we'll set a background
color of light pink.
2943
03:22:14,150 --> 03:22:17,570
Let's save it. And now we have the
two divs we're going to work with.
2944
03:22:19,640 --> 03:22:22,490
Now, currently we just have
two divs inside another.
2945
03:22:23,150 --> 03:22:27,170
There's nothing new going on here, but
now we're going to create our first grid.
2946
03:22:28,280 --> 03:22:33,170
So what is a grid? A grid is a
layout that has rows and columns.
2947
03:22:33,680 --> 03:22:36,050
For example, this is a two by three grid.
2948
03:22:36,350 --> 03:22:41,330
We have two rows and three
columns. This is a one by two grid.
2949
03:22:41,450 --> 03:22:43,760
We have one row and two columns.
2950
03:22:44,270 --> 03:22:47,870
So we're going to learn how to make
this kind of structure in our html.
2951
03:22:48,380 --> 03:22:51,920
To do that, we're going to style
this outer diviv or the container.
2952
03:22:52,760 --> 03:22:55,940
So let's see how that works. We're
going to set a style attribute here.
2953
03:22:57,380 --> 03:23:00,260
And to create a grid, we're
going to need two steps.
2954
03:23:01,580 --> 03:23:04,280
The first step is to set
the display property,
2955
03:23:05,360 --> 03:23:07,970
and we're going to set display to grid.
2956
03:23:08,990 --> 03:23:13,340
The second step is we need to set
how many columns our grid has.
2957
03:23:14,150 --> 03:23:18,480
So to do that we're going to use
this property grid dash template,
2958
03:23:18,770 --> 03:23:19,910
dash columns,
2959
03:23:21,650 --> 03:23:23,960
and we're going to give
this property two values,
2960
03:23:24,650 --> 03:23:27,530
100 pixels and 100 pixels.
2961
03:23:28,370 --> 03:23:32,510
So these two values define
how wide our grid columns are.
2962
03:23:33,200 --> 03:23:36,320
The first column is going to
have a width of 100 pixels,
2963
03:23:36,800 --> 03:23:40,190
and the second column is going to
have a width of 100 pixels as well.
2964
03:23:40,700 --> 03:23:43,670
And our grid will have two
columns. So if we save this,
2965
03:23:44,870 --> 03:23:47,840
you'll see that we created
our first one by two grid.
2966
03:23:49,070 --> 03:23:53,570
Now I want to point out a few
characteristics of a grid. First of all,
2967
03:23:53,660 --> 03:23:57,560
notice that this diviv is no
longer taking up the entire line.
2968
03:23:58,670 --> 03:24:01,280
So recall that divs are
displayed blocked by default.
2969
03:24:01,520 --> 03:24:03,230
They're supposed to
take up the entire line,
2970
03:24:03,770 --> 03:24:06,440
but when this element is inside a grid,
2971
03:24:06,950 --> 03:24:08,840
it's actually placed into the grid,
2972
03:24:09,020 --> 03:24:11,630
so it only takes up the
entire column instead.
2973
03:24:13,520 --> 03:24:17,660
The second thing you'll notice is that
there's no extra space between these two,
2974
03:24:18,470 --> 03:24:20,630
unlike with display inline block.
2975
03:24:22,160 --> 03:24:25,040
And the third thing to
notice is that, for example,
2976
03:24:25,130 --> 03:24:29,510
let's add another element into
the second. Let's add a paragraph
2977
03:24:31,400 --> 03:24:35,780
of text, save it when
we add more elements.
2978
03:24:35,870 --> 03:24:40,430
This makes the second taller than the
first one, but they're vertically aligned,
2979
03:24:41,090 --> 03:24:43,860
and that's another difference
between grids and display.
2980
03:24:43,861 --> 03:24:48,270
In line block grids maintain
alignment much better.
2981
03:24:49,290 --> 03:24:50,760
All right, so that is our basic grid.
2982
03:24:51,240 --> 03:24:53,760
Now we're going to create
another grid to practice with.
2983
03:24:54,480 --> 03:24:57,600
We're going to go into our code,
we're going to copy all of this,
2984
03:24:58,710 --> 03:25:00,630
and then we're going to paste it below.
2985
03:25:02,070 --> 03:25:04,470
And it's a little bit
weird, the formatting.
2986
03:25:04,471 --> 03:25:09,150
So we can select this and press
tab to move it back into a normal
2987
03:25:09,650 --> 03:25:13,890
position. Let's save it. And
now we have our second grid,
2988
03:25:14,190 --> 03:25:18,030
but let's actually add some space to the
top so that we can see it more clearly.
2989
03:25:19,320 --> 03:25:24,120
We're going to add some
margin dash top of 30
2990
03:25:24,121 --> 03:25:28,050
pixels. Save it. Okay,
that looks pretty good.
2991
03:25:28,590 --> 03:25:30,840
And this time we're going
to add a third column.
2992
03:25:31,530 --> 03:25:35,790
So this property actually takes any
number of values that you give it.
2993
03:25:36,600 --> 03:25:40,410
So if we add a third
value here of 200 pixels,
2994
03:25:41,250 --> 03:25:44,520
it's going to create a third
column that is 200 pixels wide.
2995
03:25:46,110 --> 03:25:50,850
So the number of values determine the
number of columns and the value itself
2996
03:25:50,851 --> 03:25:54,180
determines the width of the
column. So if we save it,
2997
03:25:55,920 --> 03:25:58,920
we do have three columns here,
but we only have two divs,
2998
03:25:58,980 --> 03:26:03,210
so we need another div to fill
out the third column. To do that,
2999
03:26:03,211 --> 03:26:04,890
let's copy our first diff,
3000
03:26:05,910 --> 03:26:10,080
and then we're just going to paste
it down here and call it div three.
3001
03:26:11,220 --> 03:26:14,130
So now we have three diffs to
fill out the three columns,
3002
03:26:14,460 --> 03:26:19,290
and you can see that our third column
is 200 pixels versus 100 pixels that we
3003
03:26:19,291 --> 03:26:24,150
saw right here. So let's actually
change the text here so that we can
3004
03:26:24,151 --> 03:26:28,470
see what's going on. So
100 pixels, 100 pixels,
3005
03:26:28,920 --> 03:26:32,370
and 200 pixels. Save it.
3006
03:26:34,170 --> 03:26:37,920
So now let's see what happens when
we add another div to our grid here.
3007
03:26:38,670 --> 03:26:41,940
So let's copy this second
diviv and then duplicate it.
3008
03:26:43,470 --> 03:26:44,970
Copy it and paste.
3009
03:26:45,870 --> 03:26:49,590
Can actually get rid of this
paragraph here and save it.
3010
03:26:50,580 --> 03:26:55,500
And now you can see that this fourth
diviv wraps around to a second row.
3011
03:26:56,610 --> 03:26:59,880
So whenever we have more elements
than we have columns here,
3012
03:27:00,420 --> 03:27:03,510
it starts to wrap around
and create new rows.
3013
03:27:04,950 --> 03:27:07,170
So that's the basics of how grids work.
3014
03:27:07,830 --> 03:27:11,940
Now I'm going to show you a special
value that we can use with grids. First,
3015
03:27:11,970 --> 03:27:15,750
let's copy this and then create
a new grid to practice with
3016
03:27:17,760 --> 03:27:21,210
space it here. And then
select this and tab.
3017
03:27:22,110 --> 03:27:24,810
And this time we're only
going to have two columns.
3018
03:27:24,811 --> 03:27:28,950
So let's get rid of this third column.
And let's only have two diffs here.
3019
03:27:31,530 --> 03:27:36,450
And we can also get rid of
this paragraph. For this grid,
3020
03:27:36,510 --> 03:27:39,990
we're going to have two columns.
The first one is 100 pixels,
3021
03:27:40,500 --> 03:27:44,200
and the second one, we're
going to change it to one fr.
3022
03:27:45,070 --> 03:27:49,510
So FR is a special value in
grid that stands for free space.
3023
03:27:49,840 --> 03:27:53,350
It means to take up the remaining
amount of space on this grid.
3024
03:27:54,250 --> 03:27:55,210
So if I save it,
3025
03:27:56,410 --> 03:28:01,120
you can see that the first column here
is 100 pixels and the second column
3026
03:28:01,570 --> 03:28:03,220
has a width of one fr.
3027
03:28:03,250 --> 03:28:07,930
So it takes up the remaining amount of
space that we have. If I resize the page,
3028
03:28:08,230 --> 03:28:12,970
it'll take up the remaining amount of
space. So that's what one FR means.
3029
03:28:14,380 --> 03:28:18,460
I'm going to change this to one fr so
that it's easier to see when we review
3030
03:28:18,461 --> 03:28:19,293
this file.
3031
03:28:20,950 --> 03:28:25,120
So this fr value is exactly what
we need in our final design.
3032
03:28:25,660 --> 03:28:27,010
If I open my final design,
3033
03:28:27,670 --> 03:28:30,670
you can see that we have
a horizontal layout here.
3034
03:28:31,120 --> 03:28:33,340
The first column is about 50 pixels,
3035
03:28:33,850 --> 03:28:37,450
and we want the second column to take
up the remaining amount of space,
3036
03:28:37,990 --> 03:28:40,480
which is exactly what
we need, one FR four.
3037
03:28:41,560 --> 03:28:43,600
Now before we go and update our project,
3038
03:28:43,870 --> 03:28:46,870
I'm going to show you another
property of this FR value.
3039
03:28:48,130 --> 03:28:51,880
Let's copy on this diviv
and create another grid
3040
03:28:53,230 --> 03:28:54,063
below it.
3041
03:28:56,170 --> 03:29:01,000
And this time we're going to add
a third column that is also one
3042
03:29:01,120 --> 03:29:05,170
fr. And I'm going to add another
diviv to fill out this third column.
3043
03:29:06,130 --> 03:29:09,790
Let's copy this and paste
it into a third diviv.
3044
03:29:10,510 --> 03:29:14,740
This one is also going to be
one F fr. So let's save it here.
3045
03:29:15,760 --> 03:29:19,510
And for this example, the second
column and the third column,
3046
03:29:19,570 --> 03:29:20,980
both have one ffr.
3047
03:29:21,760 --> 03:29:26,350
So one FFR tells the columns to take up
the remaining amount of space and the
3048
03:29:26,351 --> 03:29:31,060
number in front of it tells us relatively
how much of the remaining space
3049
03:29:31,330 --> 03:29:35,230
this column gets. Since in this
example, both of them are one,
3050
03:29:35,620 --> 03:29:38,440
they'll get an equal amount
of the remaining space.
3051
03:29:38,920 --> 03:29:42,760
So here these two are equal and
they take up the remaining space.
3052
03:29:43,540 --> 03:29:46,630
If we change the third column to two fr,
3053
03:29:46,990 --> 03:29:49,690
so let's change this to two fr and save.
3054
03:29:50,800 --> 03:29:53,650
The second and third column will
take up the remaining space,
3055
03:29:53,980 --> 03:29:57,520
but the third column will be twice
as wide as the second column.
3056
03:29:58,180 --> 03:30:00,610
So this number here is
sort of like a ratio.
3057
03:30:01,390 --> 03:30:04,600
This second column will have a
one-third of the remaining space,
3058
03:30:05,140 --> 03:30:08,410
and this third column will have
two thirds of the remaining space.
3059
03:30:10,450 --> 03:30:12,100
Now that we understand that concept,
3060
03:30:12,310 --> 03:30:17,080
we're going to go back into our project
and use grids to create this horizontal
3061
03:30:17,081 --> 03:30:19,060
layout instead of inline block.
3062
03:30:21,490 --> 03:30:26,320
Let's go to our code and we're
going to scroll down into the
3063
03:30:26,321 --> 03:30:29,290
H T M L for this which is right here,
3064
03:30:30,100 --> 03:30:32,200
and I'm going to collapse
it so it's easier to see.
3065
03:30:32,590 --> 03:30:36,130
We have the channel picture and
the video info, which is these two.
3066
03:30:37,240 --> 03:30:41,000
So to create a grid, remember we
need to create it on the container,
3067
03:30:41,570 --> 03:30:42,880
which is this diviv.
3068
03:30:43,610 --> 03:30:48,530
So let's set a class
name video dash info dash
3069
03:30:48,531 --> 03:30:52,220
grid, and then we'll target
this class in our CSS above.
3070
03:30:53,060 --> 03:30:57,260
Going to scroll up, and I'm going
to actually put it right here,
3071
03:30:58,400 --> 03:31:00,260
video dash info dash grid,
3072
03:31:01,430 --> 03:31:05,120
because this is right above the
channel picture and the video info.
3073
03:31:05,600 --> 03:31:10,550
So it's beside other related
styles. Now remember,
3074
03:31:10,560 --> 03:31:12,680
to create a grid, we need two steps.
3075
03:31:13,130 --> 03:31:16,760
The first one is to set the
display property to grid.
3076
03:31:18,560 --> 03:31:23,420
This creates our grid, and then we need
to set how many columns our grid has.
3077
03:31:24,500 --> 03:31:28,580
So we're going to set grid
dash template, dash columns.
3078
03:31:29,780 --> 03:31:31,160
And for our purposes,
3079
03:31:31,490 --> 03:31:35,600
let's set a column of 50 pixels
for the channel profile picture.
3080
03:31:37,700 --> 03:31:41,510
And then we want the second column to
take up the remaining amount of space.
3081
03:31:42,080 --> 03:31:47,060
So as we learn, that is
one fr. Now if we save it,
3082
03:31:47,150 --> 03:31:51,350
you'll notice that the space between the
inline blocks is gone. So unlike here,
3083
03:31:52,070 --> 03:31:55,130
and you'll also notice that
these two are vertically aligned.
3084
03:31:56,600 --> 03:31:57,860
So now that we have our grid,
3085
03:31:57,920 --> 03:32:01,970
we can actually remove all of these inline
block styles because we're not using
3086
03:32:01,980 --> 03:32:05,300
them anymore. So we can
actually remove all of these
3087
03:32:06,920 --> 03:32:10,760
and all of these. Let's save it.
3088
03:32:11,450 --> 03:32:14,420
And now let's set a grid for
the second video preview.
3089
03:32:15,110 --> 03:32:16,340
We're going to scroll down.
3090
03:32:18,800 --> 03:32:21,440
So remember we're going to set
the styles on the container here,
3091
03:32:22,130 --> 03:32:25,190
and then these two divs are
going to appear in our grid.
3092
03:32:26,780 --> 03:32:29,000
So we've already created
this CSS at the top.
3093
03:32:29,330 --> 03:32:34,220
We just need to set a class
of video, dash info dash grid,
3094
03:32:35,540 --> 03:32:36,373
save it,
3095
03:32:36,650 --> 03:32:41,630
and then all the styles that we
wrote up here will target that class.
3096
03:32:42,320 --> 03:32:46,340
So now we have both of our grids and
you can see our horizontal layout is
3097
03:32:46,341 --> 03:32:48,710
perfectly aligned with
the rest of our layout.
3098
03:32:49,370 --> 03:32:51,350
And now we can remove
this background color
3099
03:32:53,060 --> 03:32:54,650
and this part of the project is done.
3100
03:32:56,210 --> 03:33:00,170
The last thing we're going to learn about
grids is if we go to our final design,
3101
03:33:00,740 --> 03:33:05,570
we're going to learn how to
build a bigger grid like this. So
3102
03:33:05,571 --> 03:33:09,290
notice that there's a little bit of
spacing between the columns as well as
3103
03:33:09,291 --> 03:33:12,470
between the rows. Now before we start,
3104
03:33:12,800 --> 03:33:16,910
you might have a bigger screen and
you might see four videos in each row.
3105
03:33:17,960 --> 03:33:18,560
So for now,
3106
03:33:18,561 --> 03:33:22,940
let's actually resize the browser so
that we see three videos in each row.
3107
03:33:23,510 --> 03:33:26,840
So I'm doing this because not everyone
has a big screen to work with,
3108
03:33:27,350 --> 03:33:29,720
and this will make sure that
everyone can follow along.
3109
03:33:30,950 --> 03:33:35,060
So I'm going to zoom back in and just
make sure I have three videos in each row.
3110
03:33:35,420 --> 03:33:38,160
And we're going to learn how
to create this kind of layout.
3111
03:33:38,910 --> 03:33:40,800
Let's go into our grid practice file,
3112
03:33:41,940 --> 03:33:46,650
and we'll go back into our code
again and into our grid html file,
3113
03:33:48,630 --> 03:33:50,610
and we're going to create
another grid to practice with.
3114
03:33:50,820 --> 03:33:54,810
So let's copy this and then
just paste it down here.
3115
03:33:59,460 --> 03:34:02,640
And now for this example,
let's look at our final design.
3116
03:34:03,630 --> 03:34:06,990
We essentially want three
columns of equal size.
3117
03:34:07,590 --> 03:34:11,850
And when we resize the page, notice
that the columns resize as well.
3118
03:34:12,930 --> 03:34:15,450
So notice that if I resize too
much, it becomes two columns.
3119
03:34:15,780 --> 03:34:17,610
We're going to deal with
this later in the course.
3120
03:34:17,640 --> 03:34:18,630
We're not going to deal with that.
3121
03:34:19,230 --> 03:34:21,450
We're just going to deal with
three columns that we have here.
3122
03:34:22,950 --> 03:34:26,940
So for this layout, we want
something like one F fr, one F fr,
3123
03:34:26,941 --> 03:34:30,240
and one FFR to divide this space evenly.
3124
03:34:31,500 --> 03:34:36,180
Let's go into our file here and
we're going to set three columns,
3125
03:34:36,660 --> 03:34:40,410
one F fr, one F fr, and one ffr.
3126
03:34:40,830 --> 03:34:44,760
So this will create three equal
columns that will resize with the page.
3127
03:34:45,510 --> 03:34:50,130
Let's set this to one FFR as well
so that it's clear what's going on.
3128
03:34:50,760 --> 03:34:51,593
Let's save it.
3129
03:34:53,460 --> 03:34:55,920
And now we have the three columns
we're going to be working with.
3130
03:34:58,440 --> 03:35:03,090
Let's also set the height so that
it looks a little bit like our video
3131
03:35:03,091 --> 03:35:05,040
previews that we have here.
3132
03:35:06,330 --> 03:35:10,710
So let's go into our HTM file
and we're going to set the height
3133
03:35:11,610 --> 03:35:12,990
to 200 pixels.
3134
03:35:13,920 --> 03:35:16,890
And let's also set the height
of these other columns as well.
3135
03:35:17,790 --> 03:35:21,720
200 pixels and 200 save it. Okay,
3136
03:35:21,730 --> 03:35:24,420
so that looks pretty good, but
they're a little bit too much.
3137
03:35:24,421 --> 03:35:25,500
At the bottom of the page,
3138
03:35:26,070 --> 03:35:29,550
we're going to add some spacing at the
bottom of the website so that we can
3139
03:35:29,551 --> 03:35:30,420
scroll these up.
3140
03:35:31,440 --> 03:35:36,300
Let's go back up into our HTML and
we're going to scroll up to the body
3141
03:35:36,301 --> 03:35:37,133
tag.
3142
03:35:37,200 --> 03:35:41,310
We're actually going to add some spacing
inside the bottom of the body tag.
3143
03:35:42,240 --> 03:35:45,540
So remember that spacing on
the inside is called padding.
3144
03:35:45,930 --> 03:35:50,580
So padding dash bottom.
And let's set it to something
3145
03:35:50,581 --> 03:35:55,200
like a thousand pixels. So it's
a lot easier for us to practice.
3146
03:35:55,620 --> 03:35:59,400
So now that we have a lot of space at
the bottom, we can scroll all the way up
3147
03:36:01,170 --> 03:36:02,820
and see our grid clearly.
3148
03:36:04,590 --> 03:36:09,450
So remember that in a grid, if we have
more elements, then we have columns,
3149
03:36:09,750 --> 03:36:12,090
it'll start wrapping
around to the second row.
3150
03:36:12,690 --> 03:36:16,980
So all we had to do is add three
more divs. So we're just going to,
3151
03:36:17,700 --> 03:36:19,380
let's actually copy the pink one first.
3152
03:36:20,700 --> 03:36:23,070
Let's copy it and paste it,
3153
03:36:25,110 --> 03:36:28,710
and then we'll add a blue and a
pink at the bottom. So let's copy
3154
03:36:30,270 --> 03:36:31,103
and paste it.
3155
03:36:31,800 --> 03:36:35,950
So we just need six divs to work with
that have alternating colors like this.
3156
03:36:36,930 --> 03:36:37,763
So let's save it.
3157
03:36:38,830 --> 03:36:42,340
And now we essentially have our
video preview that we see here,
3158
03:36:42,760 --> 03:36:45,760
and we're going to learn how to create
these space between the columns and the
3159
03:36:45,770 --> 03:36:50,050
rows. So it's actually really
easy to create this space.
3160
03:36:50,350 --> 03:36:52,570
We just need two CSS properties.
3161
03:36:53,110 --> 03:36:57,190
The first one is called column dash gap.
3162
03:36:59,080 --> 03:37:01,060
So it's pretty straightforward
what this means.
3163
03:37:01,600 --> 03:37:04,660
We're setting some space or
a gap between the columns.
3164
03:37:05,410 --> 03:37:10,330
So let's set a column gap of 20 pixels.
Let's see how that looks. Save it.
3165
03:37:11,580 --> 03:37:15,850
And now all of our columns have a
gap, just like our final design here.
3166
03:37:17,140 --> 03:37:22,060
Next we're going to set the space
between the rows and we have
3167
03:37:22,061 --> 03:37:26,920
a similar and straightforward
property for that called row dash cap.
3168
03:37:27,940 --> 03:37:32,380
And let's set this to something
like 40 pixels, save it.
3169
03:37:32,920 --> 03:37:36,820
And now we have space between the
rows, just like our final design.
3170
03:37:38,050 --> 03:37:40,360
So that's how we create a grid like this.
3171
03:37:40,990 --> 03:37:43,930
First we define our three
columns. So in this case,
3172
03:37:43,931 --> 03:37:47,920
we want to divide it up into three
equal columns that resize with the page.
3173
03:37:48,340 --> 03:37:51,310
That's why we used one
ffr, one ffr, one ffr.
3174
03:37:52,210 --> 03:37:55,330
And then we just add some space
between the columns using column gap,
3175
03:37:55,450 --> 03:37:59,680
which creates this. And we add space
between the rows using row gap,
3176
03:38:00,010 --> 03:38:01,000
which creates this.
3177
03:38:02,140 --> 03:38:06,400
Let's go back into our website we were
working on and we're going to apply these
3178
03:38:06,401 --> 03:38:09,460
skills to here. Let's go back here.
3179
03:38:10,330 --> 03:38:13,210
We're going to scroll
down. And first of all,
3180
03:38:13,211 --> 03:38:18,190
let's just create six of these video
previews so we can organize them into a
3181
03:38:18,191 --> 03:38:22,630
grid that looks like this,
two rows and three columns.
3182
03:38:23,590 --> 03:38:27,640
So we're going to go into a code and
we're going to copy both of these
3183
03:38:29,590 --> 03:38:31,240
and we're just going to make duplicates.
3184
03:38:31,630 --> 03:38:35,320
So copy it and paste it.
3185
03:38:35,680 --> 03:38:39,790
So now if we save, we have four
and we're going to create two more.
3186
03:38:40,510 --> 03:38:45,400
So paste it again, save.
And now we have six.
3187
03:38:50,410 --> 03:38:53,830
So remember to create a
grid, we need a container.
3188
03:38:54,100 --> 03:38:56,830
So we need a container for
all of these video previews.
3189
03:38:57,760 --> 03:39:01,210
So let's create a diviv, and this
is going to be our container.
3190
03:39:01,990 --> 03:39:06,070
We're going to call this
the video dash grid.
3191
03:39:08,290 --> 03:39:11,890
And now let's move all of these
video previews inside our new grid.
3192
03:39:12,400 --> 03:39:13,600
Just going to move all of them,
3193
03:39:15,340 --> 03:39:18,280
cut it and paste it in here.
3194
03:39:21,400 --> 03:39:25,720
Let's save it. Scroll back up.
And now to create the grid,
3195
03:39:25,730 --> 03:39:29,080
we want to set styles on
this container element.
3196
03:39:30,160 --> 03:39:31,510
So let's go into our css.
3197
03:39:32,530 --> 03:39:36,200
We're going to target the video dash grid.
3198
03:39:37,190 --> 03:39:38,720
And remember we have two steps.
3199
03:39:39,050 --> 03:39:42,440
The first step is to
set the display to grid,
3200
03:39:43,010 --> 03:39:47,630
and the second step is to set how
many columns we have grid dash
3201
03:39:47,631 --> 03:39:49,970
template, dash columns,
3202
03:39:53,150 --> 03:39:54,410
and for our example,
3203
03:39:54,411 --> 03:39:59,060
we want three equal columns
that take up the entire space.
3204
03:40:00,140 --> 03:40:05,030
So let's set one fr, one fr and one fr.
3205
03:40:07,460 --> 03:40:11,480
Now if we look at our page, we now
have the three columns in our grid,
3206
03:40:12,140 --> 03:40:14,630
but you might notice that
if I resize this down,
3207
03:40:15,140 --> 03:40:17,000
it actually doesn't resize with the page.
3208
03:40:18,440 --> 03:40:21,950
So the reason this happens is
because if we go and scroll up,
3209
03:40:23,240 --> 03:40:25,640
we set a width on the video preview,
3210
03:40:26,090 --> 03:40:31,070
which sort of forces the width to be
300 pixels and earlier we also set
3211
03:40:31,130 --> 03:40:33,260
the width of the thumbnail to 300.
3212
03:40:34,610 --> 03:40:37,910
So instead of setting the width like
this, which will force the width,
3213
03:40:38,510 --> 03:40:42,650
we actually just want these elements
to take up all the space in the columns
3214
03:40:42,680 --> 03:40:45,170
that they're inside of. So to do that,
3215
03:40:45,171 --> 03:40:49,580
we can remove this property
here and let's save it.
3216
03:40:50,390 --> 03:40:51,440
And for images,
3217
03:40:51,500 --> 03:40:56,480
a weird behavior is that they always
keep their original size to get them to
3218
03:40:56,481 --> 03:41:01,460
fit inside their container or inside
the column of the grid. We have
3219
03:41:01,470 --> 03:41:06,230
to set a width of a
hundred percent save it,
3220
03:41:06,710 --> 03:41:10,940
and now they'll only take up a hundred
percent of their container. Now,
3221
03:41:10,941 --> 03:41:13,520
we also don't need the
display block here anymore,
3222
03:41:13,940 --> 03:41:18,020
so this image is taking up a hundred
percent. It's already on its own line,
3223
03:41:18,290 --> 03:41:22,250
so display block is not
necessary. So let's delete that.
3224
03:41:23,330 --> 03:41:27,410
And now we're going to deal with
this video preview with for this,
3225
03:41:27,411 --> 03:41:32,060
we can just get rid of the with
here and the display inline block
3226
03:41:32,600 --> 03:41:35,660
and also vertical line, which
relates to inline block.
3227
03:41:36,440 --> 03:41:40,280
And we can get rid of the margin since
we're going to create this space using
3228
03:41:40,281 --> 03:41:42,500
the column gap property
we learned earlier.
3229
03:41:43,490 --> 03:41:47,600
So let's just get rid of all of
these styles. And now if we save,
3230
03:41:49,100 --> 03:41:53,660
we can now see that our video previews
are fitting perfectly inside of our grid.
3231
03:41:54,350 --> 03:41:58,130
The final step is we're going to add some
space to the columns and to the rows.
3232
03:41:58,850 --> 03:42:03,050
So let's go into our CSS here.
And remember the two properties,
3233
03:42:03,350 --> 03:42:07,010
they're pretty straightforward
are column dash gap,
3234
03:42:07,910 --> 03:42:12,530
and let's set a column gap
of maybe 15 pixels. Save it.
3235
03:42:13,160 --> 03:42:15,200
Okay, let's compare that to our design,
3236
03:42:17,240 --> 03:42:18,770
and I'm going to resize it a little bit.
3237
03:42:19,610 --> 03:42:22,400
So I think this looks pretty
close to what we have,
3238
03:42:23,030 --> 03:42:24,680
maybe 16 pixels.
3239
03:42:26,240 --> 03:42:28,070
And then we're going to set a row gap.
3240
03:42:28,790 --> 03:42:32,250
Let's set a row dash gap of maybe 40,
3241
03:42:33,480 --> 03:42:36,210
save it and compare it to our design.
3242
03:42:37,260 --> 03:42:41,100
So I think that looks pretty
close to what we have now,
3243
03:42:41,110 --> 03:42:42,780
the design might look
a little bit smaller,
3244
03:42:42,840 --> 03:42:44,820
and that's because we
have the sidebar here,
3245
03:42:45,090 --> 03:42:49,110
but we're going to deal with that
in a later lesson. So for now,
3246
03:42:49,170 --> 03:42:50,130
this looks perfect.
3247
03:42:52,020 --> 03:42:54,990
The last thing we're going to do
is to swap out the thumbnails,
3248
03:42:55,290 --> 03:42:59,460
the channel profile pictures as well
as the rest of the text to match our
3249
03:42:59,461 --> 03:43:03,090
design. So I'll let you get some
practice doing that. Remember,
3250
03:43:03,100 --> 03:43:06,420
you'll have to download the thumbnail
and the channel profile picture first.
3251
03:43:07,590 --> 03:43:08,130
For now,
3252
03:43:08,131 --> 03:43:12,540
let's just do six of these videos and
then we can add the rest of them at the
3253
03:43:12,541 --> 03:43:13,373
end of the course.
3254
03:43:14,970 --> 03:43:18,450
So pause the video right now
and swap out all the thumbnails,
3255
03:43:18,451 --> 03:43:22,500
the channel pictures and the text, and
I'll see you back after you've done that.
3256
03:43:26,070 --> 03:43:28,860
So this is what it looks like
after I swapped everything out.
3257
03:43:29,340 --> 03:43:32,400
So that's the end of this lesson.
We learned about CSS grid,
3258
03:43:32,700 --> 03:43:36,540
which is a great way to create these
horizontal layouts that are perfectly
3259
03:43:36,550 --> 03:43:40,260
aligned and to create this
bigger grid that we see here.
3260
03:43:43,500 --> 03:43:46,470
Here's some exercises to get
yourself familiar with grids.
3261
03:44:02,030 --> 03:44:04,230
In this lesson we're going
to learn about Flexbox,
3262
03:44:04,260 --> 03:44:06,240
which is another way to create layouts.
3263
03:44:06,480 --> 03:44:10,350
And we're going to use Flexbox to create
the header at the top of the page.
3264
03:44:11,280 --> 03:44:15,810
So Flexbox is similar to CSS Grid. It
can create the same kind of layouts,
3265
03:44:15,870 --> 03:44:19,650
but it's more flexible just
like the previous lesson.
3266
03:44:19,710 --> 03:44:24,210
Let's go into our code and create a
new file just to practice Flex Box.
3267
03:44:25,050 --> 03:44:29,070
We're going to create a new file by
clicking this icon and let's call it
3268
03:44:29,700 --> 03:44:33,780
flex box dot html. And remember,
3269
03:44:33,781 --> 03:44:35,820
we always start with the HTML structure.
3270
03:44:36,390 --> 03:44:41,080
We're going to have a doc type
at the top and then an HTML
3271
03:44:41,081 --> 03:44:41,913
element,
3272
03:44:42,330 --> 03:44:46,200
a head element and a body element.
3273
03:44:48,150 --> 03:44:51,210
Let's save it. And now we
can open this in live server.
3274
03:44:51,270 --> 03:44:54,450
So right click and open with live server.
3275
03:44:57,850 --> 03:45:01,800
Now in this lesson we're also going to
compare Flexbox to grid to show what
3276
03:45:01,801 --> 03:45:03,660
these similarities and differences are.
3277
03:45:04,290 --> 03:45:09,000
So we're also going to go into our code
and open the grid dot html from the
3278
03:45:09,001 --> 03:45:12,420
previous lesson. And we're also
going to open this in live server.
3279
03:45:12,570 --> 03:45:15,240
So right click and open with live server.
3280
03:45:18,300 --> 03:45:21,090
Just going to move these beside
each other and resize the page.
3281
03:45:22,050 --> 03:45:23,460
And now we're ready to begin.
3282
03:45:26,100 --> 03:45:29,740
So we're going to start off
in our flexbox dot html.
3283
03:45:30,430 --> 03:45:33,820
And first we're going to go into the
head section and we're going to add a
3284
03:45:33,850 --> 03:45:34,683
title.
3285
03:45:35,950 --> 03:45:40,390
Let's call this flex box
practice and then save.
3286
03:45:41,410 --> 03:45:45,250
So this is just going to remind us that
this file is for flex box practice and
3287
03:45:45,251 --> 03:45:46,083
it's going to show up here.
3288
03:45:47,140 --> 03:45:51,130
Next we're going to go into the body
and start creating some flex boxes.
3289
03:45:52,030 --> 03:45:54,130
So just like for grid, we're
going to create a diviv,
3290
03:45:55,600 --> 03:45:57,550
and inside we're going to have two divs,
3291
03:45:58,720 --> 03:46:03,250
so diviv one and Diviv two.
3292
03:46:06,940 --> 03:46:11,770
So we're going to use inline CSS again
just like we did for grid like here,
3293
03:46:12,370 --> 03:46:16,000
so that we keep our CSS
code close to our HTML code,
3294
03:46:16,330 --> 03:46:19,810
and it'll be easier to understand what's
going on when we review this file in
3295
03:46:19,820 --> 03:46:23,740
the future. So insider diviv set a style.
3296
03:46:24,820 --> 03:46:29,800
And for this div we're going to set
the background color to light blue like
3297
03:46:29,801 --> 03:46:33,940
before. And then for the second diviv,
3298
03:46:33,941 --> 03:46:35,980
we'll also set it to light pink.
3299
03:46:36,580 --> 03:46:40,150
So style equals background, dash color,
3300
03:46:41,410 --> 03:46:43,900
light pink, save it.
3301
03:46:45,340 --> 03:46:49,810
And now we have the two divs we can
work with. So just like with grid,
3302
03:46:49,960 --> 03:46:53,110
Flexbox requires a container
or this outer diviv.
3303
03:46:53,860 --> 03:46:55,990
This container is going
to be the flex box.
3304
03:46:56,110 --> 03:46:59,650
And then these elements are going
to be placed into our flex box.
3305
03:47:00,700 --> 03:47:04,120
So now let's learn how to turn
our container into a flex box.
3306
03:47:05,320 --> 03:47:09,220
We're going to set a style here
and we're going to do two steps.
3307
03:47:10,090 --> 03:47:14,530
The first one is to set the
display property to flex.
3308
03:47:15,160 --> 03:47:18,070
This creates a flex
box. In the second step,
3309
03:47:18,190 --> 03:47:22,930
we're going to set the
flex dash direction to row.
3310
03:47:24,400 --> 03:47:28,360
This means we're going to align these
elements horizontally in a horizontal
3311
03:47:28,361 --> 03:47:29,193
layout.
3312
03:47:29,860 --> 03:47:34,300
So now let's save this file and we
can see the effect that Flexbox has.
3313
03:47:35,980 --> 03:47:39,670
So inside of Flexbox, these
divs, which are block elements,
3314
03:47:40,000 --> 03:47:41,920
don't behave like block elements anymore.
3315
03:47:42,520 --> 03:47:44,950
They behave more like
inline block elements.
3316
03:47:45,190 --> 03:47:48,370
They only take up as much
horizontal space as they need to.
3317
03:47:49,960 --> 03:47:54,520
Now compare that to grid where we
first set the columns and then the
3318
03:47:54,521 --> 03:47:59,170
elements went inside the columns. So the
layout is a little more rigid for grid.
3319
03:48:00,010 --> 03:48:01,360
If we go back to our flex box,
3320
03:48:01,840 --> 03:48:06,130
if we add some more text to
this first diviv and save
3321
03:48:07,090 --> 03:48:10,870
notice that it expands to take
up as much space as it needs to.
3322
03:48:11,770 --> 03:48:15,640
So this is a flexible box and
that's why we call it flex box.
3323
03:48:16,870 --> 03:48:19,990
Now there's one other thing I want to
point out about flex box is that if we
3324
03:48:19,991 --> 03:48:23,800
make this second diviv taller,
just like our grid example here,
3325
03:48:24,880 --> 03:48:26,890
the flex box will be vertically aligned.
3326
03:48:27,710 --> 03:48:32,360
Let's go into our code and let's
add a paragraph to make this diviv
3327
03:48:32,361 --> 03:48:36,260
taller. If I save it, you'll
see that it got taller,
3328
03:48:36,590 --> 03:48:38,570
but we still maintain vertical alignment.
3329
03:48:39,470 --> 03:48:44,150
So flexbox is another way to create these
horizontal layouts while maintaining
3330
03:48:44,151 --> 03:48:46,940
alignment. All right,
3331
03:48:47,030 --> 03:48:50,420
let's go through some more examples to
see these similarities and differences
3332
03:48:50,421 --> 03:48:53,990
between flex box and grid. We'll
start with these similarities. First,
3333
03:48:54,860 --> 03:48:58,620
we'll go into our code and we're going
to create another flex box to practice
3334
03:48:58,630 --> 03:49:02,450
with. So we'll just copy this
and then paste it down here.
3335
03:49:04,190 --> 03:49:07,700
I'm going to select this and
press tab. I'll scroll down.
3336
03:49:09,590 --> 03:49:13,850
So we'll also add some spacing to the
top of this because we want to make it
3337
03:49:13,860 --> 03:49:15,050
easier to separate.
3338
03:49:15,350 --> 03:49:19,850
So let's add some margin
dash top of 30 pixels,
3339
03:49:20,690 --> 03:49:24,740
save it. That looks pretty good.
And now for this first diviv,
3340
03:49:24,920 --> 03:49:27,290
we're going to set the
width to 100 pixels.
3341
03:49:28,100 --> 03:49:32,300
So I'm just going to organize my CSS a
little bit here and we're going to set
3342
03:49:32,330 --> 03:49:37,160
the width to 100 pixels and let's also
3343
03:49:37,161 --> 03:49:41,990
change the text to 100 pixels so that
we know what's going on. So let's
3344
03:49:41,991 --> 03:49:42,823
save it.
3345
03:49:43,700 --> 03:49:47,240
So now our first flex box
element is 100 pixels wide.
3346
03:49:48,350 --> 03:49:49,280
For the second diviv,
3347
03:49:49,640 --> 03:49:52,400
we're going to tell it to take
up the remaining amount of space.
3348
03:49:53,000 --> 03:49:56,900
So if you remember from grid,
that's equivalent to one fr,
3349
03:49:57,320 --> 03:50:01,730
we're going to learn how to do that in
flex box. So for this one in our code,
3350
03:50:02,300 --> 03:50:07,040
we're going to add a new
style and we're going to add a
3351
03:50:07,050 --> 03:50:10,070
style specific to flex box called flex.
3352
03:50:10,730 --> 03:50:12,230
And we're going to set this to one.
3353
03:50:13,430 --> 03:50:17,210
And we're also going to
change this text here to flex
3354
03:50:18,830 --> 03:50:20,960
one. Let's save it.
3355
03:50:22,070 --> 03:50:25,670
And now we can see that flex one causes
this diviv to take up the remaining
3356
03:50:25,671 --> 03:50:26,503
amount of space.
3357
03:50:27,080 --> 03:50:31,310
So Flex one is the flex box
equivalent to one FR in grid.
3358
03:50:32,600 --> 03:50:34,040
So let's go through another example.
3359
03:50:34,910 --> 03:50:38,420
We're going to copy this
and then paste it again.
3360
03:50:41,060 --> 03:50:44,270
And for this example, we're going to
add another diviv to the bottom here.
3361
03:50:44,990 --> 03:50:46,820
So let's copy this first diviv,
3362
03:50:48,290 --> 03:50:51,890
copy it and paste so that
we have alternating colors.
3363
03:50:52,790 --> 03:50:57,500
And then we're going to set the
flex on the second diviv to flex
3364
03:50:57,650 --> 03:51:01,970
two. And let's change
the text to flex two.
3365
03:51:05,870 --> 03:51:10,070
So you can see that flex two is
the equivalent of two FR and grid.
3366
03:51:11,090 --> 03:51:14,510
So two items that both have flex are
going to take up the remaining amount of
3367
03:51:14,511 --> 03:51:15,343
space.
3368
03:51:15,860 --> 03:51:19,550
But this number here tells us relatively
how much of the remaining space it
3369
03:51:19,551 --> 03:51:20,383
takes.
3370
03:51:20,870 --> 03:51:24,830
So this element with flex two is going
to take twice the amount of the remaining
3371
03:51:25,650 --> 03:51:27,300
as this element with flex one.
3372
03:51:27,900 --> 03:51:31,320
So the value here works the
same as E value with fr.
3373
03:51:33,330 --> 03:51:36,510
So you can see that the basic things
that we do with the grid we can also do
3374
03:51:36,520 --> 03:51:39,930
with flex box. Now let's
talk about the differences.
3375
03:51:40,920 --> 03:51:45,300
So if we go to our grid examples and
we look at that, this example here,
3376
03:51:46,140 --> 03:51:48,390
the layout is more rigid for grid.
3377
03:51:49,650 --> 03:51:53,160
If we go into our grid code and
we scroll down to this example,
3378
03:51:54,150 --> 03:51:57,530
which is right here, one FFR and two ffr,
3379
03:51:58,320 --> 03:52:03,030
you'll see that we first define three
columns and then these elements go into
3380
03:52:03,031 --> 03:52:07,860
those columns.
So if I move this element to the second
3381
03:52:08,290 --> 03:52:10,920
position, so I'm just going
to cut and move it down here.
3382
03:52:12,420 --> 03:52:16,320
This item is now going to go into the
second column and it's going to take up
3383
03:52:16,321 --> 03:52:20,040
one FR of space, even though
we wrote 100 pixels here.
3384
03:52:20,820 --> 03:52:21,810
So if I save this,
3385
03:52:22,380 --> 03:52:26,820
you'll see that this one FR element
goes into the 100 pixel column.
3386
03:52:26,970 --> 03:52:29,340
So it only takes up a
hundred pixels of space.
3387
03:52:29,790 --> 03:52:33,900
And the layout here is not
changing for flex box. However,
3388
03:52:34,380 --> 03:52:37,290
if we go to our flex box
example and our code,
3389
03:52:38,070 --> 03:52:40,380
if we change the order of the elements,
3390
03:52:40,440 --> 03:52:44,760
so let's cut this and paste
it down here, save it.
3391
03:52:45,360 --> 03:52:47,670
You'll notice that the
layout actually changes.
3392
03:52:48,270 --> 03:52:52,440
So this element here actually
keeps its width of flex one,
3393
03:52:53,130 --> 03:52:56,670
and then the second element keeps
its width of a hundred pixels.
3394
03:52:57,510 --> 03:53:01,290
So the elements take their width
along with them if they move around,
3395
03:53:01,740 --> 03:53:06,420
and that causes us to have flexible
layouts depending on how many elements we
3396
03:53:06,421 --> 03:53:11,160
have and what order they're in.
So that's the biggest difference between
3397
03:53:11,161 --> 03:53:12,540
flex box and grid.
3398
03:53:13,830 --> 03:53:17,070
So what's the advantage of having
a flexible layout like this?
3399
03:53:18,090 --> 03:53:22,260
Let's go to our final project and
we're going to resize the browser.
3400
03:53:23,070 --> 03:53:27,420
And you'll notice that in the header in
the right section we have four icons or
3401
03:53:27,421 --> 03:53:31,530
images. Now we could create this
horizontal layout using a grid.
3402
03:53:32,130 --> 03:53:34,020
However, when we're locked out of YouTube,
3403
03:53:34,380 --> 03:53:36,600
you'll notice that we
only have three icons.
3404
03:53:36,870 --> 03:53:40,260
So the layout actually changes because
we only have three elements now.
3405
03:53:41,070 --> 03:53:45,660
So this would be a great situation to
use flex box instead of grid when we want
3406
03:53:45,661 --> 03:53:48,420
a flexible layout
dependent on our content.
3407
03:53:50,250 --> 03:53:54,240
So that's the basics of how Flexbox
works to create layouts and the main
3408
03:53:54,241 --> 03:53:56,130
difference between Flexbox and grid.
3409
03:53:57,030 --> 03:54:00,510
We're going to go back to our practice
file and we're going to go through some
3410
03:54:00,520 --> 03:54:04,830
other examples of Flexbox to help us
build the header of our final project.
3411
03:54:06,030 --> 03:54:06,540
So first,
3412
03:54:06,541 --> 03:54:11,340
let's actually save this as it is
so that we get a reminder that the
3413
03:54:11,341 --> 03:54:12,660
layout is flexible.
3414
03:54:13,230 --> 03:54:17,250
I'm going to change this to light blue
and the other one to light pink so that
3415
03:54:17,251 --> 03:54:19,650
we have alternating colors
and it's easier to see.
3416
03:54:25,840 --> 03:54:27,370
All right, let's go
back into our grid coat,
3417
03:54:28,030 --> 03:54:30,880
and we're also going to move this
back into its original position.
3418
03:54:31,510 --> 03:54:34,900
So just to remind us that for
grid, the layout is more rigid,
3419
03:54:36,490 --> 03:54:38,320
let's save it. And now we're back.
3420
03:54:38,980 --> 03:54:43,090
So we'll go back to our Flexbox
file and our flex box html,
3421
03:54:43,810 --> 03:54:45,250
and we're going to do another example.
3422
03:54:45,760 --> 03:54:50,740
So let's copy this and we're going
to create another flex box to
3423
03:54:51,160 --> 03:54:51,993
practice with.
3424
03:54:55,540 --> 03:54:57,250
Now for these next examples,
3425
03:54:57,370 --> 03:55:02,260
we're going to use them to learn how
to create the header up here. So first,
3426
03:55:02,261 --> 03:55:04,300
let's create something
that looks like the header.
3427
03:55:04,720 --> 03:55:08,590
We're going to create a box
that has roughly the same shape.
3428
03:55:09,340 --> 03:55:13,690
So we'll go into our file here and we're
going to make this flex box have the
3429
03:55:13,691 --> 03:55:14,950
same shape as a header.
3430
03:55:17,170 --> 03:55:21,970
So let's set the height
to 70 pixels and let's
3431
03:55:21,971 --> 03:55:25,330
set a border so that we
can see the actual box.
3432
03:55:26,110 --> 03:55:29,680
So we're going to set a
border width of one pixel,
3433
03:55:30,550 --> 03:55:33,460
a border style of a solid color,
3434
03:55:34,300 --> 03:55:39,190
and we'll set the border color
to gray. And when we save it,
3435
03:55:39,640 --> 03:55:42,160
we can now see our flex
box using the border.
3436
03:55:43,180 --> 03:55:46,420
I'm going to add a little bit of spacing
to the bottom of the page here so that
3437
03:55:46,421 --> 03:55:49,120
we can scroll this up.
So remember to do that,
3438
03:55:49,150 --> 03:55:53,800
we're going to scroll up and add some
padding to the bottom of the body.
3439
03:55:56,530 --> 03:55:58,330
We're going to add a style to the body,
3440
03:55:59,170 --> 03:56:00,850
and we're going to add
some space to the bottom.
3441
03:56:00,860 --> 03:56:04,870
So padding bottom 1000 pixels,
3442
03:56:07,660 --> 03:56:11,770
and now we can scroll this flex box up
to the top so that it's easier to work
3443
03:56:11,771 --> 03:56:16,600
with. Now let's scroll back down to
the example we were working with,
3444
03:56:17,260 --> 03:56:21,670
which is right here. So
for each of these divs,
3445
03:56:21,730 --> 03:56:23,890
let's change the width to 100 pixels.
3446
03:56:24,280 --> 03:56:27,460
So I'll change this one to 100 pixels,
3447
03:56:28,030 --> 03:56:30,250
and let's also change
the text to 100 pixels
3448
03:56:31,990 --> 03:56:35,860
for this one's also 100 pixels
and the third one to 100 pixels.
3449
03:56:40,930 --> 03:56:43,630
Now let's save it. And we
have our three divs here.
3450
03:56:44,290 --> 03:56:47,740
So notice that these three divs
are aligned to the left side,
3451
03:56:49,240 --> 03:56:53,230
so we can actually change how they
are aligned horizontally. To do that,
3452
03:56:53,231 --> 03:56:57,850
we're going to use a flex box
property called justify dash content.
3453
03:56:59,620 --> 03:57:04,300
So this determines how these elements
are laid out horizontally. For example,
3454
03:57:04,450 --> 03:57:07,780
the default value is start. If we save it,
3455
03:57:07,900 --> 03:57:10,540
they'll be aligned to the
start or the left side.
3456
03:57:11,830 --> 03:57:14,770
If we change this to end now,
3457
03:57:14,771 --> 03:57:17,050
they will be aligned to
the end or the right side.
3458
03:57:17,770 --> 03:57:22,760
We can also change this to center
to put all of our elements in the
3459
03:57:22,761 --> 03:57:27,530
center. So that's how we control how these
elements are positioned horizontally.
3460
03:57:28,700 --> 03:57:30,200
We're going to go through
another example here.
3461
03:57:30,680 --> 03:57:34,640
We're going to copy this whole flex box
and we're going to create another one
3462
03:57:34,641 --> 03:57:37,670
below it. Let's copy it and paste it.
3463
03:57:40,460 --> 03:57:44,810
And for this one we're going
to set a special value of space
3464
03:57:46,040 --> 03:57:46,873
dash between.
3465
03:57:49,700 --> 03:57:53,810
So what space between does is that it
spreads out our elements evenly across
3466
03:57:53,820 --> 03:57:57,890
this horizontal space and to make sure
that there's equal amount of space
3467
03:57:58,130 --> 03:57:59,450
between each element.
3468
03:58:00,950 --> 03:58:05,720
So this is really useful if we
go back to our header to spread
3469
03:58:05,730 --> 03:58:07,700
out these four icons evenly.
3470
03:58:09,620 --> 03:58:14,420
Now the last example we're going to go
through for flex box is how to align
3471
03:58:14,450 --> 03:58:19,430
elements vertically. So let's copy
this again and create another flex box.
3472
03:58:20,720 --> 03:58:23,930
So let's copy this, paste it down here.
3473
03:58:28,490 --> 03:58:33,230
And for this one we're going
to set another flex box
property called align dash
3474
03:58:33,260 --> 03:58:37,880
items. So this determines how these
elements are aligned vertically.
3475
03:58:38,540 --> 03:58:40,610
The default value is stretch,
3476
03:58:41,210 --> 03:58:44,510
which you can see here the elements
are stretching to fill up the vertical
3477
03:58:44,520 --> 03:58:49,460
space, but we also have some options.
We can align them to the start,
3478
03:58:50,420 --> 03:58:52,910
so they will no longer
stretch to the vertical space.
3479
03:58:52,911 --> 03:58:55,640
They will just take up as much
vertical space as they need to,
3480
03:58:56,180 --> 03:59:00,410
and they will be placed at the
top or we can put them at the end,
3481
03:59:01,190 --> 03:59:06,050
which will place them at the bottom of
the container and we can put them in
3482
03:59:06,060 --> 03:59:06,893
the center,
3483
03:59:09,260 --> 03:59:13,550
which will place them vertically
centered. If we look at our final project,
3484
03:59:13,551 --> 03:59:14,150
again,
3485
03:59:14,151 --> 03:59:17,360
you'll notice that all of these things
in the header are vertically centered.
3486
03:59:18,350 --> 03:59:21,380
So now we learned all these skills that
we need and we're ready to build the
3487
03:59:21,381 --> 03:59:22,820
header for our project.
3488
03:59:24,350 --> 03:59:26,930
Let's go to the code for our
project we were working on,
3489
03:59:27,320 --> 03:59:32,030
which was YouTube dot html. And make
sure you have this open in your browser.
3490
03:59:34,550 --> 03:59:39,320
I'm going to resize the window here
and also the code editor so that it's
3491
03:59:39,321 --> 03:59:41,450
easier to see what's going on. As we code,
3492
03:59:44,060 --> 03:59:47,750
We're first going to create an element
at the top to represent our header.
3493
03:59:48,530 --> 03:59:53,210
So let's scroll down. And currently
all we have is this input.
3494
03:59:53,840 --> 03:59:55,910
So we're going to create a new diviv
3495
03:59:57,830 --> 04:00:00,980
and we're going to give
it a class of header.
3496
04:00:01,790 --> 04:00:05,180
So this diviv is going to represent
the header in the final project.
3497
04:00:07,250 --> 04:00:10,280
And now let's put our search
bar into our new header.
3498
04:00:11,030 --> 04:00:13,760
So we'll cut this and paste it in here.
3499
04:00:17,330 --> 04:00:21,570
Next. If we look at our final project,
the header has three sections.
3500
04:00:21,930 --> 04:00:23,730
We have a section on the left,
3501
04:00:24,150 --> 04:00:28,950
a middle section with the search bar and
the right section here with some icons.
3502
04:00:30,270 --> 04:00:33,900
So we're going to simplify this by first
creating these three sections and then
3503
04:00:33,901 --> 04:00:38,220
aligning them and then filling out these
sections with the appropriate elements.
3504
04:00:39,270 --> 04:00:42,510
So let's go back down here and we're
going to create three sections.
3505
04:00:42,540 --> 04:00:44,250
So we'll just use three divs here.
3506
04:00:45,690 --> 04:00:49,980
So let's call this class
equals left dash section.
3507
04:00:51,570 --> 04:00:56,490
We'll create another diviv, we'll call
it class equals middle dash section.
3508
04:00:57,400 --> 04:01:02,310
We'll create another div and
we'll give it a class of right
3509
04:01:02,550 --> 04:01:03,480
dash section
3510
04:01:06,340 --> 04:01:10,710
and we'll put the search bar into
the middle section Right here.
3511
04:01:14,620 --> 04:01:18,270
And now let's style this diviv so that
we have roughly the same dimensions.
3512
04:01:21,480 --> 04:01:22,590
So before we do that,
3513
04:01:23,340 --> 04:01:26,310
you'll notice that we already have
a lot of CSS code in this file,
3514
04:01:26,820 --> 04:01:30,360
and the best practice is actually
to put the CSS in a separate file.
3515
04:01:30,900 --> 04:01:32,700
So before we write even more css,
3516
04:01:32,970 --> 04:01:35,880
let's go ahead and put
this into its own CSS file.
3517
04:01:36,900 --> 04:01:39,030
So we're actually going to
have multiple CSS files,
3518
04:01:39,840 --> 04:01:44,460
one file for styles of the video
preview and another for every
3519
04:01:44,461 --> 04:01:45,810
style of the header.
3520
04:01:46,620 --> 04:01:50,550
So let's actually create a new folder
first to organize all of our different
3521
04:01:50,551 --> 04:01:55,440
files of css. So we'll create a new
folder and let's just call this styles.
3522
04:01:56,670 --> 04:01:58,980
Inside we're going to
create two CSS files.
3523
04:01:59,640 --> 04:02:04,020
The first one is going to
be called video dot css,
3524
04:02:05,010 --> 04:02:08,880
and the second is going
to be header dot css.
3525
04:02:10,680 --> 04:02:13,980
So first we're going to
go into our YouTube htl.
3526
04:02:14,550 --> 04:02:19,080
We're going to move all of this
into the video dot CSS file.
3527
04:02:20,520 --> 04:02:23,220
So let's move this into here.
3528
04:02:24,930 --> 04:02:28,410
Now all these styles for these videos
are separated into their own file.
3529
04:02:30,060 --> 04:02:32,100
Now if I scroll up to the top here,
3530
04:02:33,150 --> 04:02:35,550
you'll notice we also have
some styles for the header.
3531
04:02:35,880 --> 04:02:37,680
So this actually belongs in the header,
3532
04:02:38,040 --> 04:02:41,670
and we're going to move this
into our header dot CSS file.
3533
04:02:43,410 --> 04:02:48,090
So we're grouping related styles
together to make it easier to read. Now,
3534
04:02:48,091 --> 04:02:50,190
for the top of this file, again,
3535
04:02:51,210 --> 04:02:53,880
we have this code that targets
all paragraphs on the page.
3536
04:02:54,240 --> 04:02:56,790
So this is not actually
specific to our videos.
3537
04:02:57,180 --> 04:03:01,800
So I'm actually going to create
another file called general
3538
04:03:02,160 --> 04:03:03,060
dot css,
3539
04:03:03,900 --> 04:03:08,850
and that's going to contain all
the general CSS code like this
3540
04:03:08,910 --> 04:03:11,130
where we target all paragraph
elements on the page.
3541
04:03:11,610 --> 04:03:15,900
So move this piece of code into general.
3542
04:03:18,700 --> 04:03:19,450
So just like that,
3543
04:03:19,451 --> 04:03:24,250
we have three CSS files and they're
all very focused on one part
3544
04:03:24,340 --> 04:03:27,880
of our webpage. So this is
generally what we want to do.
3545
04:03:28,240 --> 04:03:32,530
We want to organize our code and separate
them into different files depending on
3546
04:03:32,531 --> 04:03:35,440
what the code does. Next,
3547
04:03:35,441 --> 04:03:40,390
we're going to go into our HTML file and
we can remove this and let's save it.
3548
04:03:43,210 --> 04:03:46,090
But now you can see that all of
these styles that we had are gone,
3549
04:03:46,540 --> 04:03:50,860
so we need to link them back
into our html. To do that,
3550
04:03:50,861 --> 04:03:55,570
we're going to create a link element.
We'll have an attribute of re,
3551
04:03:56,560 --> 04:03:57,940
which tells it what we're linking.
3552
04:03:58,030 --> 04:04:02,710
So we're linking a style sheet and we
also tell it what file we're linking with
3553
04:04:02,711 --> 04:04:07,540
hf. So here beside our HTML file,
3554
04:04:07,840 --> 04:04:11,890
we have a styles folder. So we're
going to first link the styles folder,
3555
04:04:12,280 --> 04:04:16,600
and then we're going to type a slash
to go into it and link general dot css.
3556
04:04:19,420 --> 04:04:23,110
And now we're going to link our
other two CSS files. So to do that,
3557
04:04:23,111 --> 04:04:25,180
we just need to copy and paste this,
3558
04:04:26,680 --> 04:04:29,620
and then we're going
to link header dot css.
3559
04:04:31,450 --> 04:04:34,210
And for the third one, we're
going to link video dot css.
3560
04:04:36,130 --> 04:04:36,963
And if we save it,
3561
04:04:36,970 --> 04:04:41,140
we linked all of our code in three
separate files and we're back to where we
3562
04:04:41,150 --> 04:04:43,540
were. Next,
3563
04:04:43,570 --> 04:04:46,360
let's focus on our header
styles and create our header.
3564
04:04:47,170 --> 04:04:51,790
We're going to go into this file And we
actually don't need this display block
3565
04:04:51,791 --> 04:04:55,600
anymore. So we use this to put
the search bar on a separate line,
3566
04:04:56,260 --> 04:04:58,960
but now the search bar is
inside a bunch of divs,
3567
04:04:59,050 --> 04:05:03,550
so the divs will create that
separate line for us. Now,
3568
04:05:03,560 --> 04:05:07,210
the one other thing that we had to do is
that notice that there is some spacing
3569
04:05:07,690 --> 04:05:12,640
on the left side, on the right
side and at the top. So by default,
3570
04:05:12,670 --> 04:05:16,780
if we right click and inspect
and we look at the body.
3571
04:05:17,350 --> 04:05:21,520
So the body element has eight pixels
of margin on every side by default.
3572
04:05:23,110 --> 04:05:26,800
Now to get a more precise design, we
actually want to set this to zero.
3573
04:05:26,801 --> 04:05:28,960
So we're going to reset
these default styles.
3574
04:05:29,860 --> 04:05:34,000
So we'll go into our CSS code and
we're going to go into the general file
3575
04:05:35,280 --> 04:05:39,340
and we're going to target the body and
we're going to get rid of all margins.
3576
04:05:39,820 --> 04:05:44,470
An easier way to do this is to set
the margin property and set it to
3577
04:05:44,471 --> 04:05:49,090
zero. So this will set all margins in
all directions to zero. Let's save it.
3578
04:05:49,660 --> 04:05:52,240
And now our elements are right
up to the edge of the page.
3579
04:05:53,500 --> 04:05:55,030
Next we're going to work on our header.
3580
04:05:56,440 --> 04:06:01,180
So I'm actually going to make this
wider so that we can have both of these
3581
04:06:01,181 --> 04:06:02,290
files on each side.
3582
04:06:03,190 --> 04:06:06,340
So we're going to have the HTML on
the left and the CSS on the right.
3583
04:06:07,300 --> 04:06:10,600
So the first thing we'll do is we're
going to add a height to this header so
3584
04:06:10,610 --> 04:06:12,250
that it looks like our design here.
3585
04:06:13,510 --> 04:06:18,350
So let's go into our header file. And
remember we set a class of header,
3586
04:06:18,710 --> 04:06:21,890
so we'll target that using dot header,
3587
04:06:23,210 --> 04:06:26,510
and we'll set a height of maybe 40 pixels.
3588
04:06:28,250 --> 04:06:28,520
Okay,
3589
04:06:28,521 --> 04:06:33,290
so let's compare that to our design.
Looks like our design is a lot taller.
3590
04:06:34,280 --> 04:06:37,820
Let's change it to maybe 55 pixels.
3591
04:06:39,170 --> 04:06:43,700
Let's compare that. So I'm just comparing
this to the bottom edge of here,
3592
04:06:44,810 --> 04:06:45,950
and that looks pretty good.
3593
04:06:48,290 --> 04:06:51,620
So next we're going to position these
three sections, the left section,
3594
04:06:51,710 --> 04:06:54,200
the middle section, and the right section.
3595
04:06:56,210 --> 04:06:57,350
So in our code,
3596
04:06:58,460 --> 04:07:02,120
we can't actually see the sections right
now because they don't have any content
3597
04:07:02,121 --> 04:07:02,953
in them.
3598
04:07:03,080 --> 04:07:08,060
Let's just call this the left
section and then add the text here
3599
04:07:08,070 --> 04:07:11,930
as well. The right section,
3600
04:07:13,160 --> 04:07:15,860
save it. And now we have
these three. However,
3601
04:07:15,861 --> 04:07:18,120
you'll notice that they're
being aligned vertically,
3602
04:07:18,530 --> 04:07:21,200
and that's because divs by
default are display block,
3603
04:07:21,590 --> 04:07:24,170
and we haven't made this
into a flex box yet.
3604
04:07:25,490 --> 04:07:27,200
So to create a horizontal layout,
3605
04:07:27,320 --> 04:07:30,680
we're going to turn our header
container here into a flex box.
3606
04:07:31,550 --> 04:07:34,790
We're going to set the display to flex,
3607
04:07:35,420 --> 04:07:40,220
and we're also going to set
the flex dash direction to
3608
04:07:40,230 --> 04:07:43,820
row to lay them out
horizontally slots safe.
3609
04:07:45,020 --> 04:07:49,400
And now our sections only take up as
much space as we need to as we saw in our
3610
04:07:49,401 --> 04:07:52,250
examples. Next,
3611
04:07:52,251 --> 04:07:54,890
let's give these a background
color so it's easier to see them.
3612
04:07:56,120 --> 04:08:00,560
So for the left section we're
going to target it And we'll set a
3613
04:08:00,561 --> 04:08:04,250
background dash color of light blue.
3614
04:08:05,870 --> 04:08:07,310
And for the middle section
3615
04:08:10,130 --> 04:08:13,460
we'll set a background
color of light pink.
3616
04:08:14,900 --> 04:08:17,870
And for the right section, we're going
to set a background color of light blue,
3617
04:08:20,420 --> 04:08:21,530
right section,
3618
04:08:22,610 --> 04:08:26,630
background color of light blue.
3619
04:08:29,330 --> 04:08:34,190
So now how do we create this layout?
So let's analyze it a little bit.
3620
04:08:34,730 --> 04:08:39,650
If we resize the page, notice that
this middle section is also resizing.
3621
04:08:41,510 --> 04:08:44,690
So to achieve this, we're going
to use a property called flex.
3622
04:08:45,230 --> 04:08:49,370
So if you recall in our examples, flex
takes up the remaining amount of space.
3623
04:08:50,660 --> 04:08:52,640
So if I look at the header
in our final project,
3624
04:08:53,120 --> 04:08:56,360
when I resize this right
section is not changing,
3625
04:08:56,370 --> 04:08:59,420
its width and neither is the left section.
3626
04:08:59,510 --> 04:09:01,550
So these will have a predefined width,
3627
04:09:02,030 --> 04:09:04,940
and then this will be flex
because as you can see,
3628
04:09:05,330 --> 04:09:07,850
it's growing as the page is being resized.
3629
04:09:09,350 --> 04:09:12,770
So that's an example of how to
analyze these layouts. Don't worry,
3630
04:09:12,771 --> 04:09:15,240
you'll get better with
more practice. For now,
3631
04:09:15,241 --> 04:09:19,230
we're going to do this example
together. On the left section,
3632
04:09:19,440 --> 04:09:24,000
we're going to set a fixed width.
Let's set this to maybe 200 pixels.
3633
04:09:24,690 --> 04:09:27,390
See how that looks. We'll
compare it to our design.
3634
04:09:28,350 --> 04:09:29,700
So it's actually a little too much.
3635
04:09:29,730 --> 04:09:32,700
I wanted to end right here
after the YouTube logo.
3636
04:09:33,450 --> 04:09:37,530
So we're going to go back and
let's change this to one 50 pixels.
3637
04:09:38,820 --> 04:09:41,370
And let's compare it. So
that looks pretty close.
3638
04:09:43,230 --> 04:09:45,420
For this middle section,
we wanted to stretch.
3639
04:09:45,990 --> 04:09:49,920
So remember the property to
do that is called flex one.
3640
04:09:51,180 --> 04:09:54,240
So now the middle section is
stretching. And for the right section,
3641
04:09:54,241 --> 04:09:57,660
we also want a fixed
width. So let's compare it.
3642
04:09:57,810 --> 04:09:59,160
We want it to be somewhere here.
3643
04:10:00,060 --> 04:10:03,690
Let's try setting a width of 200 pixels
3644
04:10:05,160 --> 04:10:07,920
and then let's compare these two. Okay,
3645
04:10:07,921 --> 04:10:11,910
so I think this is pretty close to
the structure that we have here.
3646
04:10:13,440 --> 04:10:17,700
So what we're doing is we're just
simplifying the structure into the bigger
3647
04:10:17,701 --> 04:10:20,550
picture, and then we'll go in
and add these smaller details.
3648
04:10:23,520 --> 04:10:27,750
Now we're going to set some spacing
on the left and the right side of this
3649
04:10:27,751 --> 04:10:31,110
middle section. So remember to do
that, we're going to set our margins.
3650
04:10:31,710 --> 04:10:32,970
So on the left side,
3651
04:10:33,690 --> 04:10:38,190
let's set a margin dash left of maybe
3652
04:10:38,790 --> 04:10:42,210
30 pixels, save it. And let's compare.
3653
04:10:42,720 --> 04:10:47,520
There's definitely more than 30 pixels.
Let's change it to maybe 70 pixels.
3654
04:10:48,000 --> 04:10:51,810
Save it and compare. So
this compared to this,
3655
04:10:52,410 --> 04:10:56,610
I think that's close enough.
So now for the right section,
3656
04:10:56,611 --> 04:11:00,210
we're also going to add a little bit
of space. So if we look at our design,
3657
04:11:00,630 --> 04:11:02,520
so it's less space than we have here.
3658
04:11:03,090 --> 04:11:07,320
So we're going to add a margin to
the right of the middle section,
3659
04:11:10,050 --> 04:11:14,280
and we'll set it to
maybe 30 pixels, save it.
3660
04:11:15,480 --> 04:11:19,560
And that looks pretty close to
what we have here, maybe 35 pixels.
3661
04:11:21,690 --> 04:11:26,070
Okay, so now if we resize our page,
3662
04:11:26,520 --> 04:11:29,940
you'll notice that the middle section
is growing and shrinking with the page.
3663
04:11:30,360 --> 04:11:32,490
And the right and left are
staying the same width,
3664
04:11:32,880 --> 04:11:35,040
which is exactly what we have here.
3665
04:11:36,690 --> 04:11:39,450
So there's one other detail we're
going to copy for this middle section.
3666
04:11:40,020 --> 04:11:43,110
Notice that if I resize the
browser and make it wider,
3667
04:11:43,950 --> 04:11:47,850
at some point the middle section stops
growing. So at roughly this point,
3668
04:11:48,390 --> 04:11:50,280
the middle section will stop growing.
3669
04:11:50,610 --> 04:11:54,750
If the browser gets wider and it just
keeps the same width and is centered
3670
04:11:54,751 --> 04:11:57,300
horizontally, we're going
to learn how to do that.
3671
04:11:57,990 --> 04:12:02,220
Let's go back into our project and we're
going to limit the width of this middle
3672
04:12:02,221 --> 04:12:03,053
section first.
3673
04:12:03,600 --> 04:12:07,920
So we'll go into our code and
the property to do that is called
3674
04:12:08,400 --> 04:12:09,990
max dash with.
3675
04:12:11,560 --> 04:12:13,570
And let's set it to 300 pixels.
3676
04:12:15,040 --> 04:12:18,340
So this property says the width
can be less than 300 pixels,
3677
04:12:18,760 --> 04:12:23,620
but as soon as it grows to be over 300
pixels, we're going to limit it to 300.
3678
04:12:23,950 --> 04:12:25,900
So that's what we see here. Now,
3679
04:12:25,901 --> 04:12:29,560
when we resize the browser
to be less than 300 pixels,
3680
04:12:29,650 --> 04:12:33,490
notice that it's shrinking and growing
again, but when the browser gets wider,
3681
04:12:34,270 --> 04:12:37,600
it's limited to 300 pixels
because of this line of code.
3682
04:12:39,790 --> 04:12:40,090
Next,
3683
04:12:40,091 --> 04:12:44,710
we want to distribute these three sections
evenly across our horizontal space.
3684
04:12:45,250 --> 04:12:49,840
So just like what we have here. Now
remember to do that in flex box.
3685
04:12:51,310 --> 04:12:52,900
We have an example here.
3686
04:12:53,830 --> 04:12:58,480
If we go back into our code and go
into our flex box practice file,
3687
04:13:00,460 --> 04:13:02,350
we can find that example in our code.
3688
04:13:02,890 --> 04:13:07,840
And remember that we achieved this
using a property called justify
3689
04:13:07,841 --> 04:13:09,610
content space between,
3690
04:13:10,030 --> 04:13:12,940
and we set this property
on our flex box container,
3691
04:13:13,510 --> 04:13:15,970
and that's what we're going to
do for our project right now.
3692
04:13:16,840 --> 04:13:19,270
So we're going to go up
to our flex box container.
3693
04:13:20,080 --> 04:13:25,000
Let's go back to our YouTube hdml
and to spread these out evenly
3694
04:13:25,001 --> 04:13:26,890
across the entire horizontal space.
3695
04:13:27,760 --> 04:13:32,440
And we're going to set
justify dash content space
3696
04:13:32,650 --> 04:13:35,710
dash between. Let's save it.
3697
04:13:37,120 --> 04:13:41,470
And now they take up the entire space.
So if we compare this to our design,
3698
04:13:42,730 --> 04:13:46,720
we'll notice that the middle section is
still a little bit too narrow compared
3699
04:13:46,721 --> 04:13:50,380
to our design.
So let's increase the max width here.
3700
04:13:50,980 --> 04:13:54,340
So let's increase it to 400
pixels, see how that looks.
3701
04:13:55,750 --> 04:13:57,580
Okay, so it's still bigger.
3702
04:13:57,790 --> 04:14:00,790
Let's increase it to 500 pixels.
3703
04:14:02,110 --> 04:14:06,820
See how that looks. Okay, so I think
that looks close enough to our design.
3704
04:14:07,630 --> 04:14:12,220
So this middle section in pink is
roughly equal to this middle section
3705
04:14:12,550 --> 04:14:16,210
over here. So that's
the end of this lesson.
3706
04:14:16,540 --> 04:14:20,590
We learned about Flex Box and we used
it to create the layout for our header.
3707
04:14:21,340 --> 04:14:24,880
So in this situation, we were
mostly focused on our content size.
3708
04:14:25,330 --> 04:14:29,530
We wanted to make sure the middle
section had a max width and at least some
3709
04:14:29,531 --> 04:14:30,610
space in between.
3710
04:14:31,150 --> 04:14:35,320
So that's why we used a flex box because
we were focused on our content size
3711
04:14:35,321 --> 04:14:38,110
first. And then the layout
doesn't matter as much.
3712
04:14:38,320 --> 04:14:42,970
We just use a flex box to spread out
our content evenly across the horizontal
3713
04:14:42,971 --> 04:14:47,950
space. So when we focus on content
size first, we use a flex box.
3714
04:14:48,400 --> 04:14:52,900
When we want to create a grid, we use
grid. And for most other situations,
3715
04:14:52,930 --> 04:14:56,980
for example, this horizontal layout
that we created in the layers technique,
3716
04:14:57,430 --> 04:15:01,900
we can use either grid or flexbox. In
most situations, they do the same thing.
3717
04:15:06,430 --> 04:15:10,520
So here are some exercises that you can
practice using Flexbox to get yourself
3718
04:15:10,521 --> 04:15:12,290
more familiar with how it works.
3719
04:15:24,770 --> 04:15:26,420
And now that we have the general layout,
3720
04:15:26,540 --> 04:15:30,170
we're going to finish up the rest
of the header. Before we do that,
3721
04:15:30,171 --> 04:15:33,770
we're going to download all of these
icons and images that you see here.
3722
04:15:34,670 --> 04:15:37,670
To do that, we're going
to right click inspect,
3723
04:15:38,600 --> 04:15:43,100
and then click this in the top left and
then click the icon we want to download.
3724
04:15:43,610 --> 04:15:45,470
And then we can find the URL down here.
3725
04:15:46,010 --> 04:15:50,180
I'm going to hover over it and then
click this link to open in a new tab
3726
04:15:50,870 --> 04:15:52,910
and then save it with control S.
3727
04:15:53,780 --> 04:15:56,810
So I'm going to save this in the
folder that contains our code,
3728
04:15:57,170 --> 04:16:00,590
which is this one. So
I'm going to save it.
3729
04:16:01,340 --> 04:16:04,250
And then in our code editor,
we should see this icon,
3730
04:16:04,520 --> 04:16:07,250
so we can collapse this by pressing that.
3731
04:16:08,120 --> 04:16:11,750
And then now we have our icon right
here called the hamburger menu.
3732
04:16:13,400 --> 04:16:16,280
Now looking at our header, we
have a lot of icons to download.
3733
04:16:16,281 --> 04:16:20,750
So let's organize them using a folder.
We're going to create a new folder,
3734
04:16:21,710 --> 04:16:23,810
and let's call this icons.
3735
04:16:25,430 --> 04:16:28,340
And we're going to put the icon
we downloaded into that folder.
3736
04:16:28,550 --> 04:16:30,860
So this one right here into this folder.
3737
04:16:33,680 --> 04:16:37,250
And now we're going to do the same steps
to download all of these other icons
3738
04:16:37,251 --> 04:16:41,480
and this image that we see here. So
we're going to do the same steps.
3739
04:16:41,481 --> 04:16:45,920
Click the top left and then click the
icon we want to download and we can find
3740
04:16:45,921 --> 04:16:46,753
the link here.
3741
04:16:47,930 --> 04:16:51,260
I'm going to fast forward the video here
because it's just a bunch of repetitive
3742
04:16:51,270 --> 04:16:54,470
steps, and we'll continue after
we downloaded all the icons.
3743
04:16:58,910 --> 04:17:00,740
So when you get to the notification icon,
3744
04:17:00,860 --> 04:17:02,960
don't worry about this
notification number here.
3745
04:17:03,020 --> 04:17:05,240
We're going to learn how to
do that in the next section.
3746
04:17:06,050 --> 04:17:09,110
And for this channel profile
picture, when I download it,
3747
04:17:09,200 --> 04:17:12,230
I'm actually going to save it in a
different folder from the other icons.
3748
04:17:12,650 --> 04:17:15,260
So if I download this here and save it,
3749
04:17:15,800 --> 04:17:19,700
I'm going to put this in the channel
pictures folder instead of the icons
3750
04:17:19,701 --> 04:17:22,640
folder, because technically
it's a channel picture.
3751
04:17:26,120 --> 04:17:27,770
So once we have all of that downloaded,
3752
04:17:28,040 --> 04:17:32,330
let's check in our code editor and we
should see all of the icons that we need
3753
04:17:32,340 --> 04:17:34,700
for the header inside the icons folder,
3754
04:17:35,090 --> 04:17:39,020
as well as the channel profile picture
on the right in the channel pictures
3755
04:17:39,021 --> 04:17:39,853
folder.
3756
04:17:40,760 --> 04:17:44,570
And now we're ready to complete
our header in our current project.
3757
04:17:45,710 --> 04:17:48,500
So in our left section we have this,
3758
04:17:48,530 --> 04:17:51,710
which is a called a hamburger
menu and the YouTube logo.
3759
04:17:52,520 --> 04:17:57,350
So N our HTML. In this
file, in our left section,
3760
04:17:57,351 --> 04:18:02,060
we're going to have an image and
we're going to tell it what to
3761
04:18:02,070 --> 04:18:05,960
load. So loading and SVG is the
same thing as any other image.
3762
04:18:06,470 --> 04:18:09,060
And we're going to go into the icons
folder and we're going to load the
3763
04:18:09,061 --> 04:18:10,680
hamburger menu dot svg.
3764
04:18:12,270 --> 04:18:15,780
And then we're also going
to load the YouTube logo,
3765
04:18:16,260 --> 04:18:17,280
which is right here.
3766
04:18:19,380 --> 04:18:21,630
So YouTube logo dot svg,
3767
04:18:23,010 --> 04:18:26,280
save that and look at
our webpage and refresh.
3768
04:18:27,840 --> 04:18:31,470
So the images are loaded, but they're
way too big. Let's make them smaller.
3769
04:18:32,850 --> 04:18:35,700
We're going to set a class so
that we can target them with css.
3770
04:18:36,270 --> 04:18:41,010
So hamburger dash menu. And for this one,
3771
04:18:41,580 --> 04:18:44,880
let's set a class of YouTube dash logo.
3772
04:18:46,620 --> 04:18:47,850
And now in our css,
3773
04:18:48,000 --> 04:18:52,830
let's go in here and target the hamburger
3774
04:18:53,760 --> 04:18:54,810
menu class.
3775
04:18:56,520 --> 04:19:00,480
And let's set the height to
something like 20 pixels.
3776
04:19:01,380 --> 04:19:04,980
And same thing for the YouTube logo.
3777
04:19:06,300 --> 04:19:08,880
We'll set the height to 20 pixels.
3778
04:19:11,940 --> 04:19:14,910
So that looks pretty good.
Now, if we look at our design,
3779
04:19:15,180 --> 04:19:19,500
we'll notice that these images are
actually aligned vertically in the center.
3780
04:19:20,070 --> 04:19:23,490
So in our flex box practice
file, we learn how to do this.
3781
04:19:24,000 --> 04:19:25,740
If we look at our code, again,
3782
04:19:27,570 --> 04:19:29,220
if we look at our flex box code,
3783
04:19:29,790 --> 04:19:31,980
let's scroll all the way
down to the last example.
3784
04:19:33,600 --> 04:19:36,030
We did this using a align items center,
3785
04:19:37,050 --> 04:19:39,630
so that aligns them vertically
in the center like this.
3786
04:19:40,440 --> 04:19:44,280
We'll go back to our header c s s
and just have this as a reference.
3787
04:19:45,900 --> 04:19:49,800
So for our left section, we're
going to set a line, dash items,
3788
04:19:51,000 --> 04:19:55,650
colon center. However, you'll
notice that it didn't do anything.
3789
04:19:56,160 --> 04:20:01,020
And that's because if we look at
our html. The header is a flex box,
3790
04:20:01,500 --> 04:20:03,810
but this left section
here is still a regular,
3791
04:20:04,680 --> 04:20:09,150
it's a element inside the flex box,
but this itself is not a flex box.
3792
04:20:09,210 --> 04:20:13,080
So Align items doesn't do anything
Now to fixes.
3793
04:20:13,081 --> 04:20:17,310
We can actually turn the left
section into a flex box using Display
3794
04:20:18,390 --> 04:20:23,190
Flex, And if we save it now
the left section is a flex
3795
04:20:23,191 --> 04:20:26,730
box, so align items will align
it vertically in the center.
3796
04:20:27,750 --> 04:20:30,810
So Flex Box doesn't
actually go down two layers.
3797
04:20:30,870 --> 04:20:35,250
It only affects elements on the first
layer like this Diviv and this Diviv.
3798
04:20:35,850 --> 04:20:39,600
If we go down another level, like
here, flex box doesn't affect it.
3799
04:20:40,140 --> 04:20:44,550
That's why we have to turn this into
a flex box as well in order to use
3800
04:20:44,551 --> 04:20:46,620
properties like Align Items center.
3801
04:20:47,460 --> 04:20:52,020
So this situation of putting a flex
box inside another flex box is totally
3802
04:20:52,021 --> 04:20:56,010
valid. If we want to target another
level of elements like this,
3803
04:20:57,480 --> 04:20:59,520
let's go into our design and compare it.
3804
04:21:00,600 --> 04:21:05,070
And you can see that for our design
there is some spacing on the left and
3805
04:21:05,230 --> 04:21:07,270
right of the hamburger menu.
3806
04:21:07,840 --> 04:21:12,820
So we can create that
right now using margin
3807
04:21:12,821 --> 04:21:17,620
dash left of 20 pixels
and margin dash right
3808
04:21:18,190 --> 04:21:22,930
of 20 pixels. So we'll add 20
pixels on both of these sides.
3809
04:21:23,470 --> 04:21:25,360
So if I go back and forth,
3810
04:21:25,810 --> 04:21:29,230
you'll notice that this icon is a
little bit bigger than our project,
3811
04:21:29,710 --> 04:21:33,520
so we can actually adjust our height here
to make our icon a little bit bigger.
3812
04:21:34,060 --> 04:21:38,860
We can maybe set this
to 24 and let's compare
3813
04:21:38,870 --> 04:21:40,900
it. Okay, so that looks pretty close.
3814
04:21:42,400 --> 04:21:46,930
So now I notice that this icon is a
little bit to the right of our website,
3815
04:21:47,170 --> 04:21:50,260
which is here. So you notice that
it's a little bit to the right,
3816
04:21:50,650 --> 04:21:52,110
we need to add more spacing.
3817
04:21:52,540 --> 04:21:57,490
So let's add margin left of
maybe 24 pixels. Save it.
3818
04:21:58,000 --> 04:21:59,290
Now if we compare the two.
3819
04:22:01,450 --> 04:22:04,900
So that looks pretty much close to what
we need and the YouTube logo is also in
3820
04:22:04,901 --> 04:22:07,150
the same place, so that's a bonus for us.
3821
04:22:07,900 --> 04:22:12,220
So now it looks like the left section is
pretty much done in our project and we
3822
04:22:12,230 --> 04:22:14,770
can get rid of this background
color that we were practicing with.
3823
04:22:17,110 --> 04:22:18,940
First. We're actually
going to remove the width.
3824
04:22:19,390 --> 04:22:24,250
So this width of 150 pixels is forcing
the left section to only end up here.
3825
04:22:24,470 --> 04:22:26,350
However, if we remove this,
3826
04:22:26,980 --> 04:22:31,330
the left section will stretch to contain
all of its content. So if we save it,
3827
04:22:31,750 --> 04:22:35,320
you can see that it stretches. Now
we can remove the background color
3828
04:22:36,880 --> 04:22:40,870
and that's done. Next we're going
to work on this middle section.
3829
04:22:41,440 --> 04:22:45,580
So for this middle section in
our design, we have an icon here,
3830
04:22:46,000 --> 04:22:48,790
a button here. And if we resize,
3831
04:22:49,150 --> 04:22:53,410
you'll notice that the search box also
resizes. So this search box is going to
3832
04:22:53,411 --> 04:22:58,240
grow with the rest of the page. So
we already learned how to do that.
3833
04:22:58,660 --> 04:23:01,270
As a reminder, it's flex one.
3834
04:23:02,020 --> 04:23:06,250
So first let's go in and create these
two buttons first because that's the easy
3835
04:23:06,251 --> 04:23:07,083
part.
3836
04:23:08,050 --> 04:23:11,500
Let's go into our code in
the middle section here.
3837
04:23:12,070 --> 04:23:14,860
After the search bar, we're
going to create two buttons.
3838
04:23:15,340 --> 04:23:20,320
So let's create one button here
and another button down here.
3839
04:23:21,550 --> 04:23:24,550
So inside this first button we're
going to have this search icon.
3840
04:23:25,360 --> 04:23:29,830
So if we go into our icons folder,
it's this icon here, search dot svg.
3841
04:23:30,610 --> 04:23:32,290
So we can create an image element,
3842
04:23:33,160 --> 04:23:37,840
source and icons slash search svg.
3843
04:23:39,400 --> 04:23:42,070
In the second button we're going
to have our voice search icon,
3844
04:23:42,430 --> 04:23:43,390
which is this one,
3845
04:23:44,530 --> 04:23:49,120
and we're going to create another
image element and we're going to load
3846
04:23:49,420 --> 04:23:53,170
icons slash voice search icon.
3847
04:23:55,360 --> 04:23:58,810
Now let's save it and
see how that looks. Okay,
3848
04:23:58,811 --> 04:24:02,500
so that didn't work out very well
probably because if you remember when we
3849
04:24:02,501 --> 04:24:04,850
loaded this icon here, it was super big.
3850
04:24:05,360 --> 04:24:09,680
So the two icons we loaded are probably
super big and we only see the top left
3851
04:24:09,681 --> 04:24:10,820
corner, which is empty.
3852
04:24:11,630 --> 04:24:15,050
So first let's make our icon smaller
and make our buttons a little bigger.
3853
04:24:15,860 --> 04:24:17,210
Let's go into our html.
3854
04:24:17,840 --> 04:24:22,430
We're going to add some classes so that
we can target it with css. It's class.
3855
04:24:22,431 --> 04:24:24,620
Let's call this the search dash button.
3856
04:24:25,910 --> 04:24:30,860
And let's call this one
the voice dash search dash
3857
04:24:30,861 --> 04:24:31,693
button.
3858
04:24:34,670 --> 04:24:36,080
So we're going to go to
the middle section here.
3859
04:24:36,770 --> 04:24:40,190
We're going to target
the search button first.
3860
04:24:41,840 --> 04:24:46,580
Let's set the height to something
like 40 pixels and set the
3861
04:24:46,581 --> 04:24:49,670
width to something like 60 pixels.
3862
04:24:50,990 --> 04:24:54,080
And for the voice search button,
if we look at our design,
3863
04:24:54,110 --> 04:24:58,850
it's pretty much round. So let's
target voice search button.
3864
04:25:02,420 --> 04:25:06,860
Let's set a height of 40
pixels and we'll set the width
3865
04:25:07,220 --> 04:25:12,170
to 40 pixels as well.
So let's save it. Okay,
3866
04:25:12,171 --> 04:25:14,570
so that looks super weird, but
we're going to fix this right now.
3867
04:25:15,350 --> 04:25:19,820
So remember that we want to align these
in the center vertically just like this.
3868
04:25:20,510 --> 04:25:24,260
To do that, our middle section
is also going to be a flex box,
3869
04:25:24,740 --> 04:25:29,390
and then we can use the align items
property that we use for the left
3870
04:25:29,400 --> 04:25:30,233
section.
3871
04:25:30,860 --> 04:25:34,880
So let's make this middle section
a flex box and we're going to set
3872
04:25:35,420 --> 04:25:39,920
display to flex and
we're going to set a line
3873
04:25:40,910 --> 04:25:42,050
dash items
3874
04:25:43,820 --> 04:25:48,080
to center just like our left section.
So now if we save,
3875
04:25:48,680 --> 04:25:51,950
you'll see that everything is aligned to
the center and now it's ready for us to
3876
04:25:51,951 --> 04:25:56,930
style. So there is one thing that I
left out which is flex direction row.
3877
04:25:57,980 --> 04:26:01,370
So this tells a flex box to lay
out our content horizontally.
3878
04:26:01,880 --> 04:26:04,850
And this is actually the default
value, so we don't actually need it.
3879
04:26:05,780 --> 04:26:09,170
I put it here just for our
practice code before our header.
3880
04:26:09,470 --> 04:26:14,330
We can be safe actually leaving that line
out and just having display flex and a
3881
04:26:14,600 --> 04:26:17,930
item center. So now
that the layout is good,
3882
04:26:18,020 --> 04:26:22,370
we're going to go back to our tried and
true method of styling this one by one
3883
04:26:22,371 --> 04:26:27,140
with css. The first thing I'm
going to adjust is this search bar.
3884
04:26:27,200 --> 04:26:31,190
So notice that it stretches to fill up
the content when we resize the page.
3885
04:26:32,060 --> 04:26:33,560
To do that, we're going
to go into our code,
3886
04:26:34,340 --> 04:26:35,840
we're going to target the search bar,
3887
04:26:36,950 --> 04:26:41,780
search dash bar right here.
And remember to
3888
04:26:41,810 --> 04:26:43,940
stretch it to take up the remaining space.
3889
04:26:44,270 --> 04:26:48,470
We're going to set flex one and save.
3890
04:26:50,270 --> 04:26:52,610
Now let's make the search
box similar to the design.
3891
04:26:53,360 --> 04:26:58,280
So I'm actually going to move this
here side by side so that it's easier
3892
04:26:58,281 --> 04:26:59,113
to copy from.
3893
04:27:00,350 --> 04:27:04,050
So I'll go back into my code and the
first thing I'll adjust is the height.
3894
04:27:04,590 --> 04:27:07,290
So let's set a height of 40 pixels.
3895
04:27:09,070 --> 04:27:13,860
That looks a little too much. Let's set
the height to 36. See how that looks.
3896
04:27:14,790 --> 04:27:17,430
So I think it's still a little
too much. Let's set a 2 34.
3897
04:27:18,660 --> 04:27:23,550
And that looks pretty good to me. Next,
let's adjust this placeholder text.
3898
04:27:24,150 --> 04:27:28,230
So to adjust the placeholder, we actually
need another sort of pseudo class.
3899
04:27:28,770 --> 04:27:33,030
So we're going to type dot search
bar to target the search bar,
3900
04:27:33,270 --> 04:27:37,140
and then we're going to type
colon, colon placeholder.
3901
04:27:38,760 --> 04:27:43,410
So this is how you target the placeholder
on an input element like this.
3902
04:27:44,550 --> 04:27:47,370
So first, let's set the font dash family
3903
04:27:49,200 --> 04:27:53,120
to the one we're using for this
page. If we go to general css,
3904
04:27:53,400 --> 04:27:55,560
we're using Reto aerial,
3905
04:27:56,040 --> 04:27:59,970
so we're going to set
that to Roberto Aerial,
3906
04:28:00,810 --> 04:28:03,630
save it. So the font changed a little bit.
3907
04:28:04,350 --> 04:28:06,390
We're going to change the
font size to make it bigger.
3908
04:28:06,810 --> 04:28:10,800
Font size 16 pixels. Let's see.
3909
04:28:11,880 --> 04:28:13,350
Okay, I think that looks a little bigger.
3910
04:28:15,090 --> 04:28:19,350
And the next we'll notice that on the
inside of this input we have a little bit
3911
04:28:19,351 --> 04:28:21,330
of space, while we don't
have that much space here.
3912
04:28:22,140 --> 04:28:24,990
So we're going to set some padding
on the left of our search bar.
3913
04:28:25,890 --> 04:28:30,360
So let's set the padding
dash left to 12 pixels,
3914
04:28:30,990 --> 04:28:35,310
save it. Okay, that looks okay.
Let's actually set it to 10 pixels.
3915
04:28:36,690 --> 04:28:38,700
And then when we start
typing into the search bar,
3916
04:28:38,790 --> 04:28:40,440
notice that the font is bigger,
3917
04:28:40,950 --> 04:28:45,690
but for here we still have the small font.
So we can set the font size
3918
04:28:47,040 --> 04:28:50,910
to 16 pixels, see how that looks. Okay,
3919
04:28:50,911 --> 04:28:53,070
so that looks pretty
close to what we have.
3920
04:28:54,630 --> 04:28:56,430
And next I'm going to change the border.
3921
04:28:56,760 --> 04:29:00,720
So I'll set the border
dash width to one pixels,
3922
04:29:01,590 --> 04:29:04,350
the border style, we want it to be solid.
3923
04:29:05,460 --> 04:29:09,840
And finally I'm going to set
a border dash color of gray.
3924
04:29:10,170 --> 04:29:12,560
Let's see how that looks. Okay,
3925
04:29:12,561 --> 04:29:15,030
so I can't really tell the
color because of the background.
3926
04:29:15,690 --> 04:29:19,020
We're going to remove this light pink
background because we don't need it
3927
04:29:19,021 --> 04:29:22,500
anymore. And that looks a little too dark.
3928
04:29:22,530 --> 04:29:27,060
So I'm going to pick something
lighter, maybe something like this
3929
04:29:30,090 --> 04:29:35,040
save. And I think that's
close enough to that. Next,
3930
04:29:35,041 --> 04:29:37,770
let's adjust the height again,
because when we set the border,
3931
04:29:37,771 --> 04:29:39,390
it actually made it a little bit smaller.
3932
04:29:39,990 --> 04:29:44,820
So we'll set the height to 36
and now aligns with the buttons.
3933
04:29:46,410 --> 04:29:48,570
And I'm also going to
create rounded corners.
3934
04:29:48,810 --> 04:29:51,930
So that property is border dash radius.
3935
04:29:52,920 --> 04:29:54,660
Let's set it to two pixels.
3936
04:29:56,790 --> 04:29:59,980
Now the last style we're going
to adjust for this is the shadow.
3937
04:30:00,130 --> 04:30:02,050
So if we zoom into this search box,
3938
04:30:02,380 --> 04:30:06,100
there's actually a little bit of shadow
in the inside while our search box does
3939
04:30:06,110 --> 04:30:10,840
not have that. So we'll go back into our
code and we're going to add a shadow.
3940
04:30:11,560 --> 04:30:16,450
So we're going to use this from one
of the very early lessons box dash
3941
04:30:16,480 --> 04:30:17,313
shadow.
3942
04:30:19,330 --> 04:30:22,720
And if we want a shadow on the inside
of the element instead of the outside,
3943
04:30:23,080 --> 04:30:26,200
we just need to set
inset at the beginning.
3944
04:30:26,380 --> 04:30:28,690
So this will put this
box shadow in the inside.
3945
04:30:29,890 --> 04:30:33,310
Now we have our usual values,
which is the horizontal position.
3946
04:30:34,030 --> 04:30:35,680
So let's set it to one pixels.
3947
04:30:36,220 --> 04:30:40,120
So it's going to be moved one pixels
to the right and the vertical position,
3948
04:30:40,480 --> 04:30:41,620
let's set it to two pixels.
3949
04:30:41,980 --> 04:30:46,120
The shadow will be moved two pixels
to the bottom. Let's set a blur of
3950
04:30:46,690 --> 04:30:51,580
maybe five pixels and we'll
set the shadow color to R G
3951
04:30:51,581 --> 04:30:55,060
B A 0 0 0, which is black.
3952
04:30:55,450 --> 04:31:00,400
And then transparency set
to only 0.15 to get a very
3953
04:31:00,410 --> 04:31:03,580
transparent black. So let's save this.
3954
04:31:05,140 --> 04:31:06,250
So that's way too much.
3955
04:31:06,280 --> 04:31:11,110
Let's actually reduce the blur to
three pixels maybe and then change
3956
04:31:11,111 --> 04:31:16,090
this to 0.05. So we're doing a
lot of trial and error with css,
3957
04:31:16,091 --> 04:31:20,170
which is normal. So I think this
looks pretty close to our design.
3958
04:31:20,171 --> 04:31:24,460
I think it looks close enough for now
we're going to move on and style the
3959
04:31:24,461 --> 04:31:27,850
buttons. So first,
3960
04:31:27,851 --> 04:31:30,490
let's resize this icon inside the button.
3961
04:31:32,260 --> 04:31:36,730
So let's give this a
class of search dash icon,
3962
04:31:38,200 --> 04:31:39,033
save it,
3963
04:31:39,340 --> 04:31:43,240
and then in here in the dot search icon,
3964
04:31:44,170 --> 04:31:48,250
we're going to make it a little smaller.
So let's set the height to 20 pixels,
3965
04:31:49,000 --> 04:31:53,860
see how that looks. Okay, so that looks
too small. I'm going to try 25 pixels.
3966
04:31:55,510 --> 04:31:57,400
All right, so that size
looks pretty similar.
3967
04:31:57,760 --> 04:32:00,880
Now you'll notice that this one is
vertically aligned while ours is not.
3968
04:32:01,360 --> 04:32:06,280
So we can either turn the search button
into a flex box or we can just do a
3969
04:32:06,281 --> 04:32:07,280
simpler solution.
3970
04:32:07,750 --> 04:32:11,410
We're going to add some spacing to
the top of this icon to push it down.
3971
04:32:11,890 --> 04:32:16,720
So margin dash top of maybe four pixels
3972
04:32:17,410 --> 04:32:21,610
to push that down just a little bit.
Okay, so I think that looks close enough.
3973
04:32:23,350 --> 04:32:27,910
Let's finish off this button. We're
going to set a background color
3974
04:32:29,590 --> 04:32:30,580
of gray,
3975
04:32:30,640 --> 04:32:34,930
and then I'm going to adjust it to match
that. So I'm going to pick something
3976
04:32:34,940 --> 04:32:37,780
like this, maybe two 40
3977
04:32:39,370 --> 04:32:43,510
and then save it. That looks pretty
good, but now our borders are messed up.
3978
04:32:43,810 --> 04:32:48,310
So we're going to set the
border border with of one
3979
04:32:48,320 --> 04:32:52,210
pixel border dash style of
3980
04:32:52,990 --> 04:32:57,960
solid color and border
color is going to be the
3981
04:32:57,970 --> 04:33:02,660
same as our text box. So we can
go up here and just copy that
3982
04:33:05,660 --> 04:33:09,169
and right there, save it. And there we go.
3983
04:33:09,348 --> 04:33:10,789
That looks pretty close right now.
3984
04:33:12,470 --> 04:33:16,550
So now we want to move this button into
this input element a little bit like you
3985
04:33:16,551 --> 04:33:20,900
see here, so that we only have one
edge to do that. Here's a little trick.
3986
04:33:21,830 --> 04:33:25,099
We can set some spacing on
the left, some margin left,
3987
04:33:25,669 --> 04:33:28,069
except this time we're going
to add negative spacing.
3988
04:33:29,060 --> 04:33:33,140
So we're going to add negative one
spacing, normal margin adds space,
3989
04:33:33,141 --> 04:33:37,849
and it pushes the element negative margin
subtracts space and pulls the element
3990
04:33:37,880 --> 04:33:41,990
to that side. So margin left of a negative
number, we'll pull it to the left.
3991
04:33:42,740 --> 04:33:46,009
So let's pull it to the
left by one pixel, save it,
3992
04:33:46,758 --> 04:33:48,019
and that looks really good.
3993
04:33:48,680 --> 04:33:51,020
Now we're going to make our
button a little bit longer.
3994
04:33:52,520 --> 04:33:57,140
Let's change it to 66. Finally,
3995
04:33:57,141 --> 04:34:00,590
we're going to style this
voice search icon first.
3996
04:34:00,710 --> 04:34:03,110
We notice that there's a little
bit of space between these two.
3997
04:34:03,680 --> 04:34:06,710
So let's set a margin on the
right side of the button.
3998
04:34:07,310 --> 04:34:11,840
So this time it's normal margin margin of
3999
04:34:11,868 --> 04:34:13,549
maybe eight pixels.
4000
04:34:15,618 --> 04:34:18,139
I think that looks pretty close.
I'm actually going to set it to 10.
4001
04:34:20,118 --> 04:34:22,848
And then for this button, I'm
first going to make it round.
4002
04:34:23,688 --> 04:34:27,708
So let's go into these styles of
this button. And to make it round,
4003
04:34:27,710 --> 04:34:30,619
we just have to make the
corners as round as possible.
4004
04:34:31,310 --> 04:34:33,410
Let's set the border radius
4005
04:34:35,210 --> 04:34:36,890
and I'm going to set it to 20 pixels.
4006
04:34:37,430 --> 04:34:40,669
So a trick here is that if you set
this to half the width of the height,
4007
04:34:41,060 --> 04:34:45,439
it will make it round. So let's save
this. And now we have a round button,
4008
04:34:45,528 --> 04:34:46,789
but we have a weird border.
4009
04:34:47,390 --> 04:34:49,669
Let's actually get rid of it
because it's not in our design.
4010
04:34:50,598 --> 04:34:54,258
So border and none to
get rid of the border.
4011
04:34:56,660 --> 04:35:00,110
So it's looking really close. Our icon
is a little bit bigger than this one,
4012
04:35:00,740 --> 04:35:02,810
so we're going to target it in here.
4013
04:35:03,438 --> 04:35:08,028
Class equals voice dash, search dash icon,
4014
04:35:08,720 --> 04:35:12,980
and then NR css. We'll
target that. So voice dash,
4015
04:35:12,981 --> 04:35:16,520
search dash icon. So for this,
4016
04:35:16,521 --> 04:35:21,290
let's set a height of maybe
20 pixels. See how that looks.
4017
04:35:21,380 --> 04:35:24,050
It's a little bit small.
Let's increase it to 24.
4018
04:35:25,040 --> 04:35:26,210
I think that looks pretty good.
4019
04:35:26,660 --> 04:35:28,880
And next we're going to
try to vertically align it.
4020
04:35:29,300 --> 04:35:32,779
We're going to add a little bit of
margin on the top to push it down.
4021
04:35:33,110 --> 04:35:36,439
So margin dash top and four pixels.
4022
04:35:38,630 --> 04:35:42,680
Okay, that looks pretty good. The last
thing is to change the background color.
4023
04:35:43,160 --> 04:35:48,110
So we're going to change the
background color to let's
4024
04:35:48,111 --> 04:35:50,060
say gray. And then I'll
pick another color.
4025
04:35:50,840 --> 04:35:54,080
So this time let's pick maybe 2 45
4026
04:35:56,220 --> 04:36:00,990
and then save. Oh, so I
accidentally put it on the icon.
4027
04:36:01,020 --> 04:36:02,640
We actually want to put
this on the entire button.
4028
04:36:03,270 --> 04:36:07,830
So I'm going to cut and paste
this onto the button styles.
4029
04:36:08,580 --> 04:36:11,880
Let's save. And I think
that looks pretty close.
4030
04:36:12,810 --> 04:36:14,790
So this color is a
little bit off from this,
4031
04:36:14,820 --> 04:36:17,099
but I think it's okay if we
look at the bigger picture.
4032
04:36:18,508 --> 04:36:23,219
So now we've completed the middle
section and you can compare it here
4033
04:36:23,910 --> 04:36:27,060
to here. So we're looking
really good so far.
4034
04:36:27,660 --> 04:36:29,610
Next we're going to
finish the right section.
4035
04:36:29,758 --> 04:36:33,239
So I'm going to put them side by side
again so it's easier for us to copy.
4036
04:36:35,910 --> 04:36:39,300
So the right section has
three icons and an image.
4037
04:36:39,598 --> 04:36:41,848
So we're going to add
them to our HTML first.
4038
04:36:42,720 --> 04:36:44,580
So let's go into the right section here.
4039
04:36:46,688 --> 04:36:50,909
And we're going to create an image
and we're going to load this,
4040
04:36:50,910 --> 04:36:53,580
which is the upload icon.
4041
04:36:54,090 --> 04:36:58,800
So icons slash upload
4042
04:36:59,580 --> 04:37:04,560
dot svg, and then we'll
add another one. So image.
4043
04:37:06,270 --> 04:37:09,029
And this one is going to be icons slash.
4044
04:37:09,390 --> 04:37:13,919
This one is called YouTube apps svg.
4045
04:37:14,758 --> 04:37:18,359
And then the last one is the
notification icon, which is here.
4046
04:37:19,320 --> 04:37:20,550
So image element.
4047
04:37:21,210 --> 04:37:25,050
And we're going to load
icons slash notifications
4048
04:37:26,770 --> 04:37:27,603
svg.
4049
04:37:28,110 --> 04:37:32,400
And finally we're going to create another
image and we're going to load this
4050
04:37:32,401 --> 04:37:34,830
channel profile picture. So source.
4051
04:37:35,730 --> 04:37:37,980
And this one is located
in a different folder.
4052
04:37:38,160 --> 04:37:42,570
It's in the channel pictures folder,
and it's called my channel dot jpeg.
4053
04:37:43,618 --> 04:37:47,159
So let's save it refresh. And again,
4054
04:37:47,160 --> 04:37:51,840
our SVGs are massive, so let's go
ahead and resize them in our css.
4055
04:37:53,550 --> 04:37:56,160
So first, let's add classes
to all of these images.
4056
04:37:56,669 --> 04:38:00,179
So we're going to set this
one to upload dash icon,
4057
04:38:00,300 --> 04:38:04,890
so upload dash icon. The next one
is going to be YouTube apps icon.
4058
04:38:05,040 --> 04:38:09,180
So class equals YouTube
dash apps dash icon.
4059
04:38:10,258 --> 04:38:12,629
Next one we'll do notifications dash icon.
4060
04:38:12,750 --> 04:38:16,619
So class equals notifications dash icon.
4061
04:38:17,820 --> 04:38:19,919
And lastly, we're going to name
this a little bit different.
4062
04:38:20,220 --> 04:38:24,630
Let's give it a class and let's
call this one current dash
4063
04:38:24,660 --> 04:38:29,189
user dash picture so it's a little
more clear that this is different
4064
04:38:32,490 --> 04:38:34,110
and we can target it with css.
4065
04:38:34,410 --> 04:38:39,060
So let's go down into the right section
here and we'll scroll up and we'll
4066
04:38:39,061 --> 04:38:43,500
first resize the icons.
Let's resize the upload icon.
4067
04:38:44,520 --> 04:38:49,349
Let's set a height of 24
pixels and then we'll do the
4068
04:38:51,060 --> 04:38:55,450
YouTube apps icon that's set a height of
4069
04:38:55,660 --> 04:38:59,710
24 pixels. And then
the notifications icon,
4070
04:39:00,758 --> 04:39:03,609
which is right here. Icon.
4071
04:39:04,360 --> 04:39:07,090
Let's set a height of this 24 pixels again
4072
04:39:08,740 --> 04:39:12,040
and the current user picture. So
notice it's a little bit taller.
4073
04:39:13,060 --> 04:39:16,300
Let's target that current
dash user dash picture,
4074
04:39:17,560 --> 04:39:22,360
and we're going to set a height of 32
pixels to make it a little bit taller.
4075
04:39:23,110 --> 04:39:26,890
Let's save it. And now we have
the icons we're going to use.
4076
04:39:29,050 --> 04:39:32,110
Again, we want to align these
vertically in the center.
4077
04:39:32,890 --> 04:39:36,099
Remember to do that we're going to
scroll up to our middle section,
4078
04:39:36,340 --> 04:39:38,920
which is all the way up here.
4079
04:39:39,820 --> 04:39:43,210
We first have to turn this
container into a flex box,
4080
04:39:43,570 --> 04:39:48,310
and then we can use online item
center. So inside our H C M L,
4081
04:39:48,340 --> 04:39:52,210
we have to turn this into a
flex box. Let's scroll down
4082
04:39:54,220 --> 04:39:55,930
to the right section styles here.
4083
04:39:57,040 --> 04:40:01,360
We're going to turn
this display colon flex,
4084
04:40:04,210 --> 04:40:08,710
and then we're going to set
align dash items colon center
4085
04:40:09,490 --> 04:40:13,600
to align them vertically.
So let's save it. Okay,
4086
04:40:13,780 --> 04:40:17,590
next we want to distribute them
evenly across the horizontal space.
4087
04:40:18,160 --> 04:40:19,870
And remember from our practice code,
4088
04:40:20,410 --> 04:40:25,390
that one's called justify
dash content space
4089
04:40:25,570 --> 04:40:28,240
dash between. Let's save it.
4090
04:40:28,960 --> 04:40:32,050
And now these icons are space
evenly across the space,
4091
04:40:33,670 --> 04:40:36,220
so it looks like they're a little
bit too far apart from each other.
4092
04:40:36,610 --> 04:40:38,620
We can adjust that by adjusting the width.
4093
04:40:38,800 --> 04:40:42,820
So let's decrease the width to bring
everything closer together to match our
4094
04:40:42,821 --> 04:40:47,620
design. And I actually think this,
4095
04:40:47,860 --> 04:40:49,810
all the icons look good enough.
4096
04:40:50,410 --> 04:40:53,530
The only last thing we're going
to change is this picture here.
4097
04:40:53,770 --> 04:40:58,030
So notice it's still a square. We want
to make it a circle. So as a review,
4098
04:40:58,060 --> 04:41:00,790
we're going to use border
radius to make it a circle.
4099
04:41:04,000 --> 04:41:06,730
So let's set it to border radius.
4100
04:41:07,450 --> 04:41:11,890
And the trick we learned is half of
this will make it round. So 16 pixels,
4101
04:41:12,820 --> 04:41:17,470
save it. And now we have a round
channel profile picture. Lastly,
4102
04:41:17,500 --> 04:41:20,710
we're pretty much done with this so we
can get rid of the blue background color.
4103
04:41:21,400 --> 04:41:24,160
So we'll scroll up and get rid of this.
4104
04:41:27,880 --> 04:41:31,900
Now I actually noticed that we have
spacing to the right here in our design.
4105
04:41:32,320 --> 04:41:35,500
So that's one thing I missed.
So let's add that right now.
4106
04:41:36,790 --> 04:41:41,680
So we're going to add margin
right to this section of
4107
04:41:41,681 --> 04:41:43,990
maybe 24 pixels. Save it.
4108
04:41:44,830 --> 04:41:47,770
And I think that's a little
too much. I can't really tell.
4109
04:41:48,340 --> 04:41:52,130
Let's send it to 20 just to be safe.
Okay, so I'm happy with how this looks.
4110
04:41:54,230 --> 04:41:57,320
All right, so that's basically
the content in our header.
4111
04:41:57,740 --> 04:42:00,440
If we look at it right now,
it looks really professional.
4112
04:42:00,890 --> 04:42:03,860
So I know that while we were working
on it, it looked a little bit weird,
4113
04:42:03,890 --> 04:42:06,530
it looked unfinished, but you
just got to trust the process.
4114
04:42:06,800 --> 04:42:10,730
And at the end we have a
really professional result
that looks like our design.
4115
04:42:12,050 --> 04:42:14,960
Now there's going to be one
last case I'm going to show you,
4116
04:42:15,920 --> 04:42:18,110
and this is a weird behavior of flex box.
4117
04:42:18,650 --> 04:42:22,520
So if I resize my browser
and I make it smaller,
4118
04:42:23,030 --> 04:42:26,240
notice that these icons start
to get closer to each other.
4119
04:42:28,530 --> 04:42:31,460
So this happens because
flex Box is flexible.
4120
04:42:32,030 --> 04:42:36,260
When we start not having enough space,
it'll start shrinking the items inside.
4121
04:42:37,520 --> 04:42:41,600
But if we look at our final
project and we shrink the browser,
4122
04:42:42,020 --> 04:42:46,310
notice that this doesn't shrink and we
sort of forced only the search bar to
4123
04:42:46,311 --> 04:42:51,290
shrink. So let's go back into
our project and into our code.
4124
04:42:51,950 --> 04:42:56,270
And Flexbox has a special property to
prevent certain items from shrinking.
4125
04:42:56,930 --> 04:42:59,690
So we're going to scroll down
to the right section here.
4126
04:43:00,980 --> 04:43:03,410
And to prevent the right
section from shrinking,
4127
04:43:04,100 --> 04:43:08,570
we're just going to set this
property flex dash shrink
4128
04:43:09,350 --> 04:43:13,010
colon zero. So this means
that no matter what happens,
4129
04:43:13,280 --> 04:43:15,680
we're going to keep this width
and we're not going to shrink.
4130
04:43:15,860 --> 04:43:18,680
So zero means don't shrink if we save it.
4131
04:43:19,280 --> 04:43:21,650
And now you're going to
see that it doesn't shrink,
4132
04:43:23,600 --> 04:43:24,980
but now when we resize it,
4133
04:43:25,100 --> 04:43:29,450
notice that the search bar
doesn't actually shrink all
the way like our design.
4134
04:43:30,260 --> 04:43:35,210
So the way to achieve this is to go
into our HTML and then we're going to
4135
04:43:35,211 --> 04:43:39,440
go into our search bar,
which is right here.
4136
04:43:41,330 --> 04:43:45,320
So normally search bars have a default
width and we can't really see that
4137
04:43:45,321 --> 04:43:49,880
because we set flex to one. So
it's sort of growing with a page,
4138
04:43:50,180 --> 04:43:53,630
but as soon as it hits that default
width, it's not going to go down anymore.
4139
04:43:54,500 --> 04:43:59,480
So to remove that default width,
we can just set width to zero,
4140
04:44:00,320 --> 04:44:01,153
we save it,
4141
04:44:01,520 --> 04:44:05,330
and now you can see that the search
box will start shrinking as much as
4142
04:44:05,810 --> 04:44:08,420
possible. So to recap,
4143
04:44:08,480 --> 04:44:12,800
we set flex shrink of zero to this
right section so it doesn't shrink,
4144
04:44:13,340 --> 04:44:17,210
and then we set a width of zero to
the search bar so that it does shrink.
4145
04:44:21,020 --> 04:44:25,040
Here are some exercises to get yourself
familiar with using Flexbox to create
4146
04:44:25,560 --> 04:44:26,393
flexible layouts.
4147
04:44:39,710 --> 04:44:43,220
Now we're going to learn the last major
skill that we need to finish off our
4148
04:44:43,221 --> 04:44:45,890
project. We're going
to learn CSS position.
4149
04:44:46,250 --> 04:44:50,280
So position helps us do things like keep
the header at top of the page while we
4150
04:44:50,290 --> 04:44:54,030
scroll. It also helps us keep the
sidebar at the top of the page.
4151
04:44:54,840 --> 04:44:55,673
And lastly,
4152
04:44:55,840 --> 04:45:00,080
whenever we see an element on top of
another element that's using CSS position,
4153
04:45:00,450 --> 04:45:03,660
for example here, the video
time is on top of the thumbnail,
4154
04:45:04,350 --> 04:45:08,490
the notification number is on top of
the icon. And when I hover over this,
4155
04:45:08,491 --> 04:45:11,070
we have a tool tip on top of the page.
4156
04:45:12,030 --> 04:45:15,060
So CSS position adds another
dimension to our page.
4157
04:45:16,380 --> 04:45:19,890
So just like the previous lessons,
we're going to create a new HTML file,
4158
04:45:19,920 --> 04:45:23,790
just a practice position. I'm
going to go into my code editor,
4159
04:45:24,810 --> 04:45:29,490
we're going to create a new file and
let's put it right here beside the other
4160
04:45:29,491 --> 04:45:33,060
ones new file. Let's call this position
4161
04:45:34,770 --> 04:45:37,650
html. Now as always,
4162
04:45:37,651 --> 04:45:39,990
we're going to start
with the HTML structure.
4163
04:45:40,410 --> 04:45:45,090
So we're going to have doc
type at the top and then an
4164
04:45:45,091 --> 04:45:49,170
HTML element inside we have a head element
4165
04:45:50,250 --> 04:45:52,080
and then we have a body element.
4166
04:45:55,080 --> 04:45:59,850
Now we can right click and
open with live server and we're
4167
04:45:59,851 --> 04:46:01,710
ready to begin. So first,
4168
04:46:01,770 --> 04:46:06,390
let's add a title so that we
know what this HTML file is
4169
04:46:06,391 --> 04:46:09,090
for. Let's call this position practice.
4170
04:46:11,910 --> 04:46:13,710
Say save it, and then
it should show up here.
4171
04:46:15,510 --> 04:46:19,590
We're going to start in the body again,
and we're going to create two divs.
4172
04:46:20,730 --> 04:46:25,560
It's called this diviv one
and another diviv Diviv two.
4173
04:46:27,090 --> 04:46:31,050
And I'm just going to resize this a
little bit so we can see it side by side.
4174
04:46:37,250 --> 04:46:38,340
So just like before,
4175
04:46:38,341 --> 04:46:42,540
we're going to use inline styles so
that our CSS is close to our HTML code.
4176
04:46:43,230 --> 04:46:44,610
I'm going to set a style
4177
04:46:46,680 --> 04:46:51,390
and then we're going to set this
one to background dash color and
4178
04:46:51,400 --> 04:46:52,233
light blue.
4179
04:46:53,910 --> 04:46:57,780
And we're going to set the height and
the width to 200 pixels. So height,
4180
04:46:57,960 --> 04:47:01,620
200 pixels and with 200 pixels.
4181
04:47:03,030 --> 04:47:06,090
Next we're going to set the
second diviv to be the same size,
4182
04:47:06,150 --> 04:47:09,930
but with background color light
pink. So again, we set a style
4183
04:47:11,610 --> 04:47:15,990
and then we set a background
dash color of light pink
4184
04:47:16,950 --> 04:47:21,540
height of 200 pixels and width of 200
4185
04:47:21,541 --> 04:47:22,373
pixels.
4186
04:47:24,450 --> 04:47:27,310
So CSS position is just
the position property.
4187
04:47:27,780 --> 04:47:31,920
So let's go into our first diviv and
we're going to set the position property
4188
04:47:32,850 --> 04:47:37,560
to static And then save.
4189
04:47:38,520 --> 04:47:41,220
So position static is
the default position.
4190
04:47:41,670 --> 04:47:44,130
It's the same thing as if you
don't have this line at all.
4191
04:47:45,630 --> 04:47:50,140
Now we're going to learn a second position
property that allows us to stick an
4192
04:47:50,141 --> 04:47:52,960
element to the top of the page
like this while we scroll.
4193
04:47:53,950 --> 04:47:55,870
And that is called position fixed.
4194
04:47:56,470 --> 04:48:01,300
So we're going to create a new element
at the top here and let's call this our
4195
04:48:01,301 --> 04:48:05,110
header. So we're going to learn how to
create something that works like this.
4196
04:48:07,090 --> 04:48:09,400
So for this diviv, we're
going to set a style
4197
04:48:11,260 --> 04:48:13,240
of background color,
4198
04:48:14,290 --> 04:48:17,680
black and a text color of white.
4199
04:48:21,670 --> 04:48:24,520
And now we're going to learn how to
stick this to the top of the page.
4200
04:48:25,750 --> 04:48:27,790
So first of all, we need
to be able to scroll,
4201
04:48:27,940 --> 04:48:30,910
and right now I don't have enough
content to make the page scroll.
4202
04:48:31,570 --> 04:48:35,830
So what I'll do is we'll go to the body
here and we're going to set a style.
4203
04:48:36,970 --> 04:48:41,500
And then inside the body we're going
to set a style of height and something
4204
04:48:41,501 --> 04:48:43,900
really big, like 3000 pixels.
4205
04:48:45,910 --> 04:48:50,290
So we just need to make sure that
we're able to scroll this page. Next,
4206
04:48:50,291 --> 04:48:53,200
we're going to make this header
stick at the top. To do that,
4207
04:48:53,201 --> 04:48:55,190
we're going to use the position property,
4208
04:48:55,690 --> 04:48:58,600
and this time we're going
to set a position of fixed.
4209
04:49:00,910 --> 04:49:02,920
Now when I save it and I start scrolling,
4210
04:49:03,280 --> 04:49:06,820
notice how the header element is
sticking to the page when I scroll.
4211
04:49:07,600 --> 04:49:08,980
So that's how we make it stick.
4212
04:49:10,570 --> 04:49:14,140
So the first thing to note is that
when we set position fixed like this,
4213
04:49:14,530 --> 04:49:18,340
it doesn't take us space on the
page anymore. So before we add this,
4214
04:49:18,700 --> 04:49:19,533
and if I save it,
4215
04:49:20,620 --> 04:49:24,370
so notice that it takes up the top of
the page and then these two divs up here
4216
04:49:24,371 --> 04:49:27,670
below this header. But
when we add position fixed,
4217
04:49:29,080 --> 04:49:32,710
it no longer takes up that space at the
top of the page because it's sort of
4218
04:49:32,720 --> 04:49:36,250
floating above the page now. So
that's one way to think about it.
4219
04:49:37,330 --> 04:49:41,680
So the position property has four special
properties we can use to move this
4220
04:49:41,681 --> 04:49:44,710
element around. The
first one is called top.
4221
04:49:45,940 --> 04:49:49,750
The way that top works is that we can
set a pixel measurement. For example,
4222
04:49:49,751 --> 04:49:51,310
if we set zero pixels,
4223
04:49:52,450 --> 04:49:57,250
this is going to make the top of our
element zero pixels from the top of our
4224
04:49:57,251 --> 04:49:59,680
browser window here. So if I save it,
4225
04:50:01,120 --> 04:50:05,050
notice that the top of our element is
right on the top edge of the browser
4226
04:50:05,051 --> 04:50:08,020
window. If I set top to 10 pixels,
4227
04:50:09,190 --> 04:50:13,120
the top of our element is now 10 pixels
from the top of the browser window.
4228
04:50:13,780 --> 04:50:18,640
So top specifies how far away our
element is from the top of the window,
4229
04:50:20,890 --> 04:50:23,380
the next property we can set is left.
4230
04:50:24,130 --> 04:50:26,230
So if we set left to zero pixels,
4231
04:50:27,700 --> 04:50:31,660
then the left side of our element will
be on the left edge of our window.
4232
04:50:32,380 --> 04:50:35,080
If we set left to 50 pixels, for example,
4233
04:50:36,160 --> 04:50:39,910
now the left side of our element will be
50 pixels from the left of our window.
4234
04:50:40,480 --> 04:50:44,860
So left tells us how much space is between
the element and the left edge of the.
4235
04:50:46,850 --> 04:50:51,230
So we can set this in all four
directions we've seen top left.
4236
04:50:51,620 --> 04:50:52,880
We can also set bottom.
4237
04:50:52,940 --> 04:50:57,890
And right now a special feature
of these properties is that if
4238
04:50:57,891 --> 04:51:02,360
we set it in opposite directions, the
element will stretch. So for example,
4239
04:51:02,780 --> 04:51:04,100
if we set it to left,
4240
04:51:04,130 --> 04:51:08,810
and so these two are opposite directions
and we set the right to 50 pixels,
4241
04:51:09,830 --> 04:51:11,660
notice that the element stretches.
4242
04:51:12,230 --> 04:51:16,700
So now this element is 50 pixels
from the left of the page right here,
4243
04:51:17,270 --> 04:51:20,450
and it is also 50 pixels
from the right of the page.
4244
04:51:20,780 --> 04:51:24,110
So it will stretch the element
to meet these two conditions.
4245
04:51:25,880 --> 04:51:27,620
Same thing with top and bottom.
4246
04:51:27,980 --> 04:51:32,000
So if I set bottom to
100 pixels and save it,
4247
04:51:32,690 --> 04:51:37,160
the element will stretch so that it is
10 pixels from the top and it is 100
4248
04:51:37,170 --> 04:51:38,570
pixels from the bottom.
4249
04:51:40,760 --> 04:51:45,440
So this is how we move this element
around and resize it with position fixed.
4250
04:51:46,370 --> 04:51:49,340
Now let's try creating the
header that we see here.
4251
04:51:50,420 --> 04:51:53,600
So as you can see for this header,
it's at the top edge of the page.
4252
04:51:53,960 --> 04:51:56,930
It's also on the left edge
and on the right edge.
4253
04:51:57,410 --> 04:52:02,180
So that means that it's zero
pixels from the top as a shorthand,
4254
04:52:02,181 --> 04:52:03,230
we can just write zero.
4255
04:52:03,830 --> 04:52:08,390
It's zero pixels from the left and
it's zero pixels from the right.
4256
04:52:10,250 --> 04:52:14,960
Now for the bottom we might first try
to calculate how far the bottom of this
4257
04:52:14,970 --> 04:52:16,850
element is from the bottom of the page.
4258
04:52:17,270 --> 04:52:19,580
Now that's not going to
work if we resize the page,
4259
04:52:19,910 --> 04:52:22,340
so we need a different approach. So first,
4260
04:52:22,370 --> 04:52:26,030
let's save this file and
go into our practice file.
4261
04:52:26,510 --> 04:52:29,000
So now you can see that this
element is sticking to the top,
4262
04:52:29,300 --> 04:52:32,030
the left and the right, which
is what we have in our code.
4263
04:52:32,570 --> 04:52:36,170
Now we have to figure out the height
of this diviv. So in this case,
4264
04:52:36,200 --> 04:52:40,190
instead of using bottom, because
remember the bottom can resize,
4265
04:52:41,750 --> 04:52:44,750
we want to use simply height.
4266
04:52:47,450 --> 04:52:49,010
So in addition to these properties,
4267
04:52:49,130 --> 04:52:53,030
we can simply use height and
width to also resize this element.
4268
04:52:53,450 --> 04:52:55,310
It all depends on what
situation you're in.
4269
04:52:55,910 --> 04:52:58,640
If you want this fixed element
to resize with the page,
4270
04:52:59,030 --> 04:53:01,490
then you would use top
left, right, and bottom.
4271
04:53:01,910 --> 04:53:05,390
If you just wanted to have a specific
height or width and you don't want it to
4272
04:53:05,391 --> 04:53:07,580
resize, then you use height and width.
4273
04:53:08,180 --> 04:53:13,130
So here we're going to set the height
to 50 pixels and we don't want it
4274
04:53:13,131 --> 04:53:16,130
to resize with the page. So
that's exactly what we have here.
4275
04:53:17,060 --> 04:53:18,470
Now when we start scrolling,
4276
04:53:18,530 --> 04:53:21,650
you'll notice that our header
sticks to the top of the page.
4277
04:53:21,980 --> 04:53:25,910
So that's how we create something like
the YouTube header that we see here.
4278
04:53:27,830 --> 04:53:30,500
Now, one last problem is that
if we go to our practice file,
4279
04:53:31,040 --> 04:53:32,780
notice that if we scroll right to the top,
4280
04:53:33,110 --> 04:53:37,550
the header is covering our first diviv.
So we need to add some spacing at the
4281
04:53:37,551 --> 04:53:40,760
top to push our content
down below the header.
4282
04:53:42,350 --> 04:53:43,980
To do that, we go into our code,
4283
04:53:44,610 --> 04:53:49,410
and the first thing you might think
to do is to add margin to the top.
4284
04:53:49,530 --> 04:53:51,150
So we're going to add spacing to the top,
4285
04:53:51,540 --> 04:53:54,540
and let's add a little more
than 50 pixels, so 60 pixels.
4286
04:53:56,100 --> 04:54:00,960
So if we save it and make sure you scroll
up all the way to the top of the page,
4287
04:54:01,710 --> 04:54:04,440
you'll notice that we have 60
pixels of space at the top,
4288
04:54:04,740 --> 04:54:07,590
and now our content is
not covered by the header.
4289
04:54:08,940 --> 04:54:13,170
Now this is not the best solution
because if our content order changes,
4290
04:54:13,230 --> 04:54:15,930
for example, if I move
this diviv down here,
4291
04:54:17,100 --> 04:54:18,660
notice that it doesn't work anymore.
4292
04:54:19,200 --> 04:54:23,040
So what we want instead is to always
have space at the top of our page
4293
04:54:23,250 --> 04:54:27,540
regardless of what the content is.
So if I move this to the top here
4294
04:54:29,430 --> 04:54:33,360
and remove margin top, I'm going to
show you the proper way to do this.
4295
04:54:36,750 --> 04:54:38,580
So to properly handle this situation,
4296
04:54:38,610 --> 04:54:43,350
we need to add spacing to the body
element. So let's scroll up to the body.
4297
04:54:44,430 --> 04:54:47,520
So we have two choices for adding
space to the top of our page.
4298
04:54:47,850 --> 04:54:51,180
We can either use margin
or we can use padding.
4299
04:54:52,080 --> 04:54:56,970
Generally the best practice is to use
padding at the top. So we're just going to
4300
04:54:56,971 --> 04:55:01,710
add spacing on the inside
of our webpage at the top of
4301
04:55:01,711 --> 04:55:05,820
60 pixels, save it and
scroll all the way up.
4302
04:55:07,230 --> 04:55:10,980
And now we have plenty of space at the
top of the page and our header is not
4303
04:55:10,981 --> 04:55:12,300
covering our contents.
4304
04:55:14,400 --> 04:55:18,330
So now that we learn position fix and how
to move this element around and resize
4305
04:55:18,331 --> 04:55:19,020
it,
4306
04:55:19,021 --> 04:55:22,890
we're going to go into the project we
were currently working on and we're going
4307
04:55:22,900 --> 04:55:26,460
to put our header and stick
it to the top of the page.
4308
04:55:27,480 --> 04:55:30,060
So let's learn how to do that first,
4309
04:55:30,061 --> 04:55:33,480
I'm going to resize my windows a
little bit so it's easier to work with.
4310
04:55:34,110 --> 04:55:35,250
I'm going to put it right here.
4311
04:55:35,970 --> 04:55:40,380
And then we're going to open the YouTube
dot html file, which is our project.
4312
04:55:42,210 --> 04:55:44,820
So remember we put our
CSS into separate files.
4313
04:55:45,030 --> 04:55:47,520
So I'm going to open
the header dot CSS file,
4314
04:55:47,940 --> 04:55:50,880
and I'll put it on the side so
you guys can see it side by side.
4315
04:55:52,770 --> 04:55:55,650
So just like we learned, we're
going to go into the header here.
4316
04:55:56,550 --> 04:56:00,150
We're going to set a
style of position fixed,
4317
04:56:00,960 --> 04:56:05,340
and remember to move this, we're going
to use top, left, bottom, and right.
4318
04:56:06,210 --> 04:56:09,750
So top we want our header to
stick to the top of the page.
4319
04:56:10,080 --> 04:56:14,910
We're going to set that to zero.
We want our header zero pixels from
4320
04:56:14,911 --> 04:56:19,290
the left, so on the left edge of the
page and also zero pixels from the right.
4321
04:56:22,140 --> 04:56:25,260
And finally, we're going to set a
height. So we already have it up here,
4322
04:56:25,890 --> 04:56:27,630
so let's save it and see how it looks.
4323
04:56:29,970 --> 04:56:32,610
So the first thing we noticed is
that we lost our background color.
4324
04:56:33,150 --> 04:56:36,960
Now the only reason we had a background
color was because if we didn't have
4325
04:56:37,350 --> 04:56:38,100
position fixed,
4326
04:56:38,101 --> 04:56:42,250
this header takes space on the page
and the page happens to be white.
4327
04:56:42,310 --> 04:56:46,870
So the header appears to be white, but
now that it's floating above the page,
4328
04:56:47,080 --> 04:56:51,580
we'll notice that it's
actually transparent. So to
add our background color,
4329
04:56:51,581 --> 04:56:55,190
again, we just need to set
the background color property.
4330
04:56:56,320 --> 04:56:59,500
So let's set this to white, save it,
4331
04:57:00,070 --> 04:57:01,360
and now we're back to where we were.
4332
04:57:02,980 --> 04:57:05,530
Now if we go to our project
and we start scrolling,
4333
04:57:06,010 --> 04:57:08,620
you'll notice that our header
sticks to the top while we scroll.
4334
04:57:08,890 --> 04:57:13,270
So that's exactly what we want. Next we
have this problem where the header is
4335
04:57:13,271 --> 04:57:16,240
covering our content. So remember,
4336
04:57:16,241 --> 04:57:19,960
the way to fix this is to add
padding to the top of our body.
4337
04:57:20,890 --> 04:57:25,810
We're going to go into our code and
we're going to go into this file
4338
04:57:25,811 --> 04:57:29,710
general css. That's where
we have styles for the body.
4339
04:57:31,000 --> 04:57:35,920
And then we're going to set
a padding dash top of maybe
4340
04:57:36,040 --> 04:57:40,780
60 pixels. Let's take a look.
Okay, so that looks pretty good.
4341
04:57:41,230 --> 04:57:42,970
Let's compare to our design.
4342
04:57:43,060 --> 04:57:46,660
If I scroll to the top here and
just compare it a little bit,
4343
04:57:46,960 --> 04:57:51,400
I noticed that our videos are appearing
at a higher position than our design,
4344
04:57:51,580 --> 04:57:53,290
so we're going to push
them down a little more.
4345
04:57:54,340 --> 04:57:57,280
Let's set this to maybe 80 pixels.
4346
04:57:57,850 --> 04:58:00,460
Save it so we push them down even more.
4347
04:58:01,930 --> 04:58:04,090
And I think that looks
close enough to our design.
4348
04:58:06,580 --> 04:58:10,630
So the last thing I noticed is that
we're missing the border at the bottom of
4349
04:58:10,631 --> 04:58:12,940
our header here. So let's
go ahead and add that.
4350
04:58:16,000 --> 04:58:17,680
So let's go back into our header css.
4351
04:58:18,250 --> 04:58:22,090
We're going to add a border to the bottom
so we can actually add borders to one
4352
04:58:22,091 --> 04:58:26,830
side at a time. We don't have to add
borders to all four sides. To do that,
4353
04:58:26,860 --> 04:58:29,890
we're going to set these same
border properties we had before.
4354
04:58:30,190 --> 04:58:31,630
So we're going to start with border width,
4355
04:58:32,830 --> 04:58:37,600
but in the middle we're going to tell it
a direction. So we can tell it bottom.
4356
04:58:38,380 --> 04:58:42,460
We're going to also tell it top left.
So we have all these four directions.
4357
04:58:43,120 --> 04:58:45,130
In this case, we want
a border at the bottom,
4358
04:58:45,550 --> 04:58:47,560
and we're going to set it to one pixels.
4359
04:58:48,550 --> 04:58:50,440
And the other border
properties are the same.
4360
04:58:50,710 --> 04:58:53,950
So border style is going to be solid,
4361
04:58:54,400 --> 04:58:56,110
but we only want it at the bottom,
4362
04:58:56,200 --> 04:59:00,970
so it's going to be border bottom style.
And then lastly, border dash,
4363
04:59:01,150 --> 04:59:05,140
bottom dash color. And
let's set it to gray.
4364
04:59:05,650 --> 04:59:08,380
And I'm going to pick a
lighter shade of gray.
4365
04:59:08,410 --> 04:59:12,430
So maybe right there, save it.
4366
04:59:12,431 --> 04:59:14,110
Let's compare it to our design.
4367
04:59:14,590 --> 04:59:16,720
It looks like it's a little
darker than what we have.
4368
04:59:17,290 --> 04:59:19,570
I'm just going to adjust the
color to match our design.
4369
04:59:20,410 --> 04:59:22,750
And it's not going to be
perfect, but remember,
4370
04:59:22,751 --> 04:59:27,370
you can always inspect the design
and then make it perfect. Okay,
4371
04:59:27,371 --> 04:59:30,790
so now if I compare it, I think
that looks pretty close enough.
4372
04:59:31,270 --> 04:59:35,020
And now if I scroll, you notice that
the header is sticking to the top,
4373
04:59:35,021 --> 04:59:38,710
which is exactly what we want. Next,
4374
04:59:38,720 --> 04:59:40,490
we're going to how to create this sidebar.
4375
04:59:41,030 --> 04:59:44,390
So the sidebar is just like the
header, it sticks while we scroll.
4376
04:59:45,770 --> 04:59:48,530
So this is another
example of position fixed.
4377
04:59:49,130 --> 04:59:53,600
We're going to go back to our practice
file, and I'll resize my pages here
4378
04:59:55,940 --> 05:00:00,200
and I'm going to open position
dot html we were practicing with.
4379
05:00:00,950 --> 05:00:04,040
And this time below the header,
we're going to create our sidebar.
4380
05:00:04,460 --> 05:00:08,510
So let's create a diviv, and this
diviv is going to be our sidebar.
4381
05:00:10,760 --> 05:00:13,070
Now for the sidebar, let's set a style.
4382
05:00:14,180 --> 05:00:18,200
And then inside we're going to set a
background color of green this time.
4383
05:00:18,710 --> 05:00:21,410
So a background dash, color green,
4384
05:00:21,710 --> 05:00:26,120
and a text color of white so that it's
easier to distinguish between all of
4385
05:00:26,121 --> 05:00:29,900
these different elements. Next,
4386
05:00:29,901 --> 05:00:32,030
we're going to stick the
sidebar to our browser.
4387
05:00:32,480 --> 05:00:34,970
So remember to do that we're
going to use position fixed.
4388
05:00:35,570 --> 05:00:40,250
So position fixed and save it.
4389
05:00:40,910 --> 05:00:41,960
And now when we scroll,
4390
05:00:41,961 --> 05:00:45,260
you'll notice that the sidebar is
sticking to our browser while we scroll.
4391
05:00:47,510 --> 05:00:51,170
Lastly, we're going to put the sidebar
in the right place using top left,
4392
05:00:51,171 --> 05:00:55,460
right height or width. So let's
look at our sidebar. In our design,
4393
05:00:56,210 --> 05:01:00,680
we notice that the sidebar is sticking
to the bottom, so we want bottom zero.
4394
05:01:01,040 --> 05:01:03,470
It's sticking to the left,
so we want left zero.
4395
05:01:04,010 --> 05:01:06,920
And for the top it's actually not
reaching to the top of the page,
4396
05:01:07,310 --> 05:01:08,990
otherwise it would cover up the header.
4397
05:01:10,490 --> 05:01:14,480
So there's quite a difference between
the sidebar here and the top of the page.
4398
05:01:14,990 --> 05:01:18,230
So let's go back into our practice
file and learn how to position that.
4399
05:01:21,020 --> 05:01:22,250
Let's start with left.
4400
05:01:22,880 --> 05:01:25,280
We want the sidebar to stick
to the left side of the page.
4401
05:01:25,640 --> 05:01:29,060
So we're going to say zero
pixels from the left, save it.
4402
05:01:29,750 --> 05:01:32,420
Now we want our sidebar to
stick to the bottom of the page.
4403
05:01:32,780 --> 05:01:36,620
So we're going to say bottom
and zero pixels from the bottom.
4404
05:01:38,660 --> 05:01:42,110
And finally, we want it to be at the top
of the page, but not cover the header.
4405
05:01:42,650 --> 05:01:46,790
So let's set the top to 50 pixels.
4406
05:01:47,720 --> 05:01:49,970
So it's going to meet right
where the header ends.
4407
05:01:50,570 --> 05:01:53,870
We're going to set this to
50 pixels and then save.
4408
05:01:55,970 --> 05:02:00,020
And finally, we want to set the width
of the sidebar. So for the sidebar,
4409
05:02:00,050 --> 05:02:02,480
we don't want it to resize with the page,
4410
05:02:03,710 --> 05:02:07,970
so that's why we're going to use the
width property instead of something like,
4411
05:02:08,180 --> 05:02:09,013
right.
4412
05:02:10,430 --> 05:02:14,600
So let's go back into our practice file
and we're going to set the width to
4413
05:02:14,810 --> 05:02:17,870
maybe 72 pixels, save it.
4414
05:02:18,590 --> 05:02:22,430
And that looks like what we have
in our design, so that's perfect.
4415
05:02:23,030 --> 05:02:27,500
Now we have the same problem again
where our fixed element is covering our
4416
05:02:27,501 --> 05:02:30,680
content. So let's scroll back to the top.
4417
05:02:32,180 --> 05:02:36,110
We're going to add padding to our body
so that these elements are not covered by
4418
05:02:36,120 --> 05:02:40,710
the sidebar. So in this case, we
want extra space on the left side.
4419
05:02:41,190 --> 05:02:44,400
So I'm going to set padding dash left,
4420
05:02:45,270 --> 05:02:47,760
and let's set it to 80 pixels,
4421
05:02:48,360 --> 05:02:51,720
which is more than the
sidebars with 72 pixels.
4422
05:02:52,440 --> 05:02:54,240
So now if we save this,
4423
05:02:55,890 --> 05:02:58,440
we have 80 pixels of padding
on the left side of the page,
4424
05:02:58,860 --> 05:03:01,590
and now the sidebar is
not covering our content.
4425
05:03:02,580 --> 05:03:04,530
So that's how we position a sidebar.
4426
05:03:07,650 --> 05:03:11,520
Now we're going to create the
sidebar in our project here.
4427
05:03:12,510 --> 05:03:15,000
So let's go back into YouTube dot html,
4428
05:03:15,720 --> 05:03:18,330
going to resize my page so
that we can see it better.
4429
05:03:19,740 --> 05:03:21,630
And we're going to create
a sidebar on the left.
4430
05:03:22,560 --> 05:03:27,420
So let's go into our code and we're
going to put the sidebar right below our
4431
05:03:27,421 --> 05:03:29,910
header. So let's scroll
down below our header here,
4432
05:03:31,140 --> 05:03:34,920
and I'm going to create a diviv.
This is going to be our sidebar,
4433
05:03:35,970 --> 05:03:40,950
and I'm going to give a class of sidebar
4434
05:03:40,980 --> 05:03:45,450
so that we can target it in
our css. Now for these styles,
4435
05:03:45,510 --> 05:03:50,190
let's actually put them in a separate
CSS file. So if we scroll up to the top,
4436
05:03:50,550 --> 05:03:53,850
we have CSS files for our
header for our videos,
4437
05:03:54,360 --> 05:03:58,830
so it makes sense to split up our sidebar
styles into their own file so that we
4438
05:03:58,831 --> 05:04:00,030
organize our code better.
4439
05:04:00,870 --> 05:04:04,890
We're going to go into our code editor
and then go into the styles folder here.
4440
05:04:05,670 --> 05:04:09,690
And we're going to create a new file
and we're going to call it sidebar
4441
05:04:10,810 --> 05:04:15,330
css. And I'm going to put
it on the side like this.
4442
05:04:18,390 --> 05:04:22,140
Next we're going to load
sidebar CSS into our html.
4443
05:04:22,830 --> 05:04:26,070
So we just have to do one of these
again, I'm just going to copy them.
4444
05:04:27,090 --> 05:04:31,680
And then instead of video css,
we're going to load sidebar css.
4445
05:04:33,510 --> 05:04:37,590
And now we're ready to style this
sidebar that we just created.
4446
05:04:40,380 --> 05:04:42,960
So let's target the sidebar class
4447
05:04:44,460 --> 05:04:48,840
and we're going to set position
to fixed to make it stick.
4448
05:04:50,160 --> 05:04:54,030
Now for the sidebar, we want it to be
zero pixels from the left of our browser.
4449
05:04:54,780 --> 05:04:56,910
So let's set left to zero.
4450
05:04:57,780 --> 05:05:02,670
And we also want it to stick to the
bottom of our browser, so bottom to zero.
4451
05:05:04,290 --> 05:05:06,360
And finally, we want it
to stretch to the top,
4452
05:05:06,450 --> 05:05:08,250
but we don't want it to cover our header.
4453
05:05:08,940 --> 05:05:13,320
So let's set the top to whatever
the height of our header is.
4454
05:05:13,920 --> 05:05:17,670
So if we go to header
dot css, which is here,
4455
05:05:18,390 --> 05:05:20,940
we can check the height of
our header is 55 pixels.
4456
05:05:21,750 --> 05:05:25,470
So we're going to go into our sidebar
here and we're going to get the sidebar to
4457
05:05:25,471 --> 05:05:29,100
end 50 pixels or 55 pixels from the top.
4458
05:05:29,790 --> 05:05:33,030
So let's set that to 55 pixels, save it.
4459
05:05:34,770 --> 05:05:36,250
So with position fix,
4460
05:05:36,280 --> 05:05:40,060
the element is no longer on the page
anymore and it doesn't have a background
4461
05:05:40,061 --> 05:05:44,710
color, so we just have to set
that. Again, background dash color.
4462
05:05:45,310 --> 05:05:48,610
I'm going to set it to white, save it.
4463
05:05:49,060 --> 05:05:50,440
And now we have our sidebar.
4464
05:05:51,130 --> 05:05:53,980
The final thing is to make our
sidebar as wide as our design,
4465
05:05:54,250 --> 05:05:55,083
which is right here.
4466
05:05:57,310 --> 05:06:01,030
So we're going to set
the width to 72 pixels,
4467
05:06:02,110 --> 05:06:05,500
save it, and let's
compare it to our design.
4468
05:06:06,400 --> 05:06:09,940
And I think it's hard to see because it's
white here and it's a little bit gray
4469
05:06:09,941 --> 05:06:11,800
here, but I think that's close enough.
4470
05:06:15,190 --> 05:06:18,790
Now the next problem we have is that
the sidebar is covering our content.
4471
05:06:19,240 --> 05:06:20,030
So as we learn,
4472
05:06:20,031 --> 05:06:23,560
we're going to add some padding to
the left to push our content over.
4473
05:06:24,460 --> 05:06:28,450
So let's go into our general
styles. So general css,
4474
05:06:29,440 --> 05:06:30,730
and we're going to style the body.
4475
05:06:32,500 --> 05:06:35,890
We're going to add padding
to the left of our body,
4476
05:06:36,880 --> 05:06:40,330
and let's add padding of 80 pixels again.
4477
05:06:41,980 --> 05:06:45,820
And now our sidebar is no longer covering
our content because we added a bunch
4478
05:06:45,821 --> 05:06:47,770
of padding to the left of our page.
4479
05:06:49,120 --> 05:06:53,380
So that's how we use position fixed to
create elements that stick to the page
4480
05:06:53,381 --> 05:06:56,140
while we scroll, like our
header and our sidebar
4481
05:06:59,260 --> 05:06:59,590
for now,
4482
05:06:59,591 --> 05:07:03,190
here's some exercises that you can do on
your own to get a better understanding
4483
05:07:03,220 --> 05:07:04,920
of CSS position.
4484
05:07:17,590 --> 05:07:20,620
Now we're going to learn another
position property that we can use.
4485
05:07:21,280 --> 05:07:25,600
Let's go into our position, practice
file. And the same in our code editor.
4486
05:07:26,170 --> 05:07:30,790
We're going to open up position, HTML
and then close all of these files.
4487
05:07:31,900 --> 05:07:34,150
So I'm going to resize it so
that we can see it better.
4488
05:07:37,420 --> 05:07:40,340
So this time we're going
to learn position absolute.
4489
05:07:40,990 --> 05:07:42,940
Let's do an example to see how it works.
4490
05:07:43,540 --> 05:07:47,800
So let's scroll down and we're going
to create a diviv below our sidebar to
4491
05:07:48,220 --> 05:07:49,300
practice position. Absolute.
4492
05:07:50,110 --> 05:07:53,470
Let's create a diviv and then
let's call this absolute.
4493
05:07:55,420 --> 05:07:59,230
And now we're going to set some
styles on the diviv. So style equals,
4494
05:08:00,880 --> 05:08:05,590
and then inside here we're going
to set position with a value of
4495
05:08:06,190 --> 05:08:07,023
absolute.
4496
05:08:08,620 --> 05:08:11,920
And we're also going to set a background
color of red so that it's easier to
4497
05:08:11,921 --> 05:08:16,780
see. So background color of red, and
then the text color is going to be white.
4498
05:08:17,300 --> 05:08:20,770
So color of white, save it.
4499
05:08:21,430 --> 05:08:25,960
And now we have our position, absolute
element. So before we continue,
4500
05:08:25,990 --> 05:08:29,440
make sure we scroll all the
way up to the top of our page.
4501
05:08:30,790 --> 05:08:35,090
Now, position absolute also takes
the same values as position fixed.
4502
05:08:35,630 --> 05:08:39,290
So top, left, bottom and right
as well as width and height,
4503
05:08:39,680 --> 05:08:43,760
but they behave a little bit differently.
So first we're going to set left.
4504
05:08:43,820 --> 05:08:48,080
So let's set the left property
to zero and let's save it.
4505
05:08:49,070 --> 05:08:53,030
And now the left side of our element is
zero pixels from the left side of our
4506
05:08:53,031 --> 05:08:56,360
page. So this works the
same way as position fixed,
4507
05:08:57,590 --> 05:08:59,510
and we set left to 10 pixels.
4508
05:09:01,580 --> 05:09:05,600
Now there will be 10 pixels between our
element and the left side of our page.
4509
05:09:07,220 --> 05:09:11,960
Now let's try setting top. So I'm
going to set the top to 10 pixels,
4510
05:09:12,920 --> 05:09:15,530
save it and make sure you
scroll all the way up.
4511
05:09:16,130 --> 05:09:19,880
So you'll notice that our element is
now 10 pixels from the top of the page.
4512
05:09:21,140 --> 05:09:24,470
So mostly these properties work
the same as position fixed,
4513
05:09:24,710 --> 05:09:28,160
but with one key difference.
For position fixed,
4514
05:09:28,460 --> 05:09:33,200
the elements are placed in the browser
window while for position absolute the
4515
05:09:33,201 --> 05:09:35,090
elements are placed on the page.
4516
05:09:35,570 --> 05:09:40,370
Now what I mean by this is that
when we scroll the browser window or
4517
05:09:40,371 --> 05:09:45,170
just this visible part is not moving,
only the page is moving up and down.
4518
05:09:46,190 --> 05:09:50,030
So for position fixed, we're going to
put these elements on the browser window,
4519
05:09:50,031 --> 05:09:53,960
which doesn't move when we scroll.
So if we scroll up to the header,
4520
05:09:54,740 --> 05:09:58,700
if I say top and 10
pixels, this puts a header,
4521
05:09:58,701 --> 05:10:02,810
10 pixels from the top of the browser
window, not from the top of the page,
4522
05:10:02,840 --> 05:10:06,800
which is constantly moving up and
down. But for position absolute,
4523
05:10:07,430 --> 05:10:08,630
if we scroll down to there,
4524
05:10:10,010 --> 05:10:12,920
we're putting it 10 pixels
from the top of the page,
4525
05:10:13,160 --> 05:10:15,050
which scrolls up and down when we move.
4526
05:10:17,000 --> 05:10:20,920
So that's a key difference between
the two position fixed positions,
4527
05:10:20,921 --> 05:10:22,010
the element in the browser,
4528
05:10:22,070 --> 05:10:26,080
which doesn't move when we scroll
and position absolute positions,
4529
05:10:26,081 --> 05:10:29,210
the element on the page which
does move when we scroll.
4530
05:10:31,580 --> 05:10:36,470
So let's go back up and
reset this to zero so that we
4531
05:10:36,471 --> 05:10:40,480
have our proper header again and do some
more practice with position absolute.
4532
05:10:41,960 --> 05:10:42,710
So for example,
4533
05:10:42,711 --> 05:10:47,510
if I wanted to put this absolute element
in the top right corner here on our
4534
05:10:47,511 --> 05:10:51,320
page, we can do something like right,
4535
05:10:52,070 --> 05:10:56,120
and we'll put it 10 pixels
from the right and then top.
4536
05:10:57,800 --> 05:11:01,610
We can put it maybe 60 pixels
from the top, it was 60,
4537
05:11:03,380 --> 05:11:06,110
save it, and we scroll all the way up,
4538
05:11:06,950 --> 05:11:10,730
and that's how we place an element on a
precise location on our page like this.
4539
05:11:13,220 --> 05:11:15,920
And because it's on our
page when we scroll,
4540
05:11:16,040 --> 05:11:20,150
the page will move up and this absolute
element will move up with the page.
4541
05:11:20,960 --> 05:11:24,710
Now, one thing that's weird is that this
element is appearing above our header,
4542
05:11:25,790 --> 05:11:30,380
and that's because this element was
written in our code below our header.
4543
05:11:31,230 --> 05:11:31,860
So generally,
4544
05:11:31,861 --> 05:11:36,150
an element that is written below is
going to appear in front of elements that
4545
05:11:36,151 --> 05:11:38,220
are written above it. Now,
4546
05:11:38,221 --> 05:11:42,330
we can actually override this if we
scroll up by adding another property
4547
05:11:42,870 --> 05:11:45,360
called Z dash index.
4548
05:11:47,370 --> 05:11:51,870
So Z index determines which elements
appear in front and which elements appear
4549
05:11:51,871 --> 05:11:55,260
behind. So the default Z index is zero.
4550
05:11:55,560 --> 05:11:58,380
This is the same thing as if
you didn't have this at all,
4551
05:11:59,040 --> 05:12:03,660
but an element with a higher Z index
will appear in front of elements with a
4552
05:12:03,661 --> 05:12:04,680
lower Z index.
4553
05:12:05,970 --> 05:12:09,450
So if we set the Z index
of the header to one,
4554
05:12:09,930 --> 05:12:13,740
it's going to have a higher Z index
than the absolute element which has a
4555
05:12:13,741 --> 05:12:16,740
default Z index of zero. If we save it,
4556
05:12:17,490 --> 05:12:22,380
now the header will appear
in front. Just as an example,
4557
05:12:22,381 --> 05:12:26,670
if we scroll down and
we set the Z dash index
4558
05:12:27,450 --> 05:12:29,850
of this absolute element
and we set it to two,
4559
05:12:30,960 --> 05:12:35,070
now it's going to appear in front again
because our Z index here is greater than
4560
05:12:35,071 --> 05:12:36,420
our Z index here.
4561
05:12:37,170 --> 05:12:41,310
So usually we set this to something
like 100 so that we can have a lot of
4562
05:12:41,311 --> 05:12:44,400
elements in between. If our
page has a lot of layers,
4563
05:12:46,020 --> 05:12:48,090
and usually if we don't
care about the Z index,
4564
05:12:48,091 --> 05:12:51,150
we can just remove it and
have a default of zero.
4565
05:12:54,030 --> 05:12:57,030
Now that we learn position
absolute, where do we use this?
4566
05:12:57,480 --> 05:12:59,880
The truth is we don't use
it like this very much.
4567
05:13:00,210 --> 05:13:03,720
This is not a common situation that we
run into when we're creating websites.
4568
05:13:04,860 --> 05:13:08,490
However, position absolute has another
key feature that makes it really,
4569
05:13:08,491 --> 05:13:10,770
really useful to demonstrate.
4570
05:13:11,130 --> 05:13:15,450
We're going to take this element and
we're going to make a copy of it and we're
4571
05:13:15,451 --> 05:13:19,110
going to put it inside the sidebar.
So right here.
4572
05:13:20,730 --> 05:13:25,170
So we're going to put a position
absolute inside a position fixed.
4573
05:13:26,910 --> 05:13:28,080
So now when we save,
4574
05:13:28,830 --> 05:13:32,460
you'll notice that this element is
not being placed on the page anymore.
4575
05:13:33,060 --> 05:13:37,860
What it's actually doing is placing this
element relative to this position fixed
4576
05:13:37,861 --> 05:13:42,300
element. So now right of 10
pixels is actually 10 pixels.
4577
05:13:42,330 --> 05:13:44,220
From the right of the fixed element,
4578
05:13:44,221 --> 05:13:49,110
which is the sidebar top of 60
pixels is 60 pixels from the top
4579
05:13:49,111 --> 05:13:51,870
of the sidebar, not from
the top of the page.
4580
05:13:52,380 --> 05:13:56,940
So whenever a position absolute is
inside a position fixed element,
4581
05:13:57,360 --> 05:14:00,630
it's going to be placed a relative
to this position fixed element.
4582
05:14:02,580 --> 05:14:05,960
So this is the most important
feature of position absolute.
4583
05:14:06,270 --> 05:14:07,920
So let me show you why it's so useful.
4584
05:14:08,490 --> 05:14:12,030
Let's say that we wanted a close
button on the top right of our sidebar.
4585
05:14:12,420 --> 05:14:14,730
We want to be able to close
our sidebar if we want to.
4586
05:14:15,720 --> 05:14:20,610
I'm going to change this to an X so
that it's kind of like a close button.
4587
05:14:21,030 --> 05:14:23,520
And then to put it in the
top right of our sidebar,
4588
05:14:24,030 --> 05:14:28,740
we just have to set the top
to zero and the right to zero.
4589
05:14:29,320 --> 05:14:32,680
So if I save that, now this
element is in the top right,
4590
05:14:33,670 --> 05:14:37,390
and that's because if position
absolute is inside position fixed,
4591
05:14:37,780 --> 05:14:42,010
top zero means zero pixels from the
top of the position, fixed element,
4592
05:14:42,490 --> 05:14:47,200
right? Zero means zero pixels from the
right of the position fixed element.
4593
05:14:49,480 --> 05:14:53,950
So this is how we attach elements
to the corners or the sides of other
4594
05:14:53,951 --> 05:14:56,500
elements. If we look at our final project,
4595
05:14:57,010 --> 05:14:59,740
we can see that going
on in our videos here.
4596
05:14:59,741 --> 05:15:04,450
We have the video time in the corner
of our thumbnail here we have the
4597
05:15:04,451 --> 05:15:07,960
notification count in the top
right corner of this icon.
4598
05:15:09,040 --> 05:15:11,040
And using position absolute,
4599
05:15:11,470 --> 05:15:14,440
it allows us to put elements
in the corner like this.
4600
05:15:16,300 --> 05:15:18,820
So there's one last thing
we need to learn here.
4601
05:15:18,821 --> 05:15:22,270
We have a position absolute
inside a position, fixed element.
4602
05:15:22,600 --> 05:15:24,100
That's why we can put it in the corner.
4603
05:15:24,520 --> 05:15:27,910
But notice that this is still a position
fixed element and it sticks to the
4604
05:15:27,911 --> 05:15:32,890
page. But in our final project, these
videos are not sticking to the page,
4605
05:15:32,900 --> 05:15:34,300
they're scrolling with the page,
4606
05:15:34,750 --> 05:15:39,730
and we're still able to put stuff in
the corners. So how do we achieve this?
4607
05:15:41,470 --> 05:15:42,210
And to do this,
4608
05:15:42,211 --> 05:15:46,010
we're going to learn another value for
the position property called position
4609
05:15:46,610 --> 05:15:51,250
relative. We're going to scroll
down to our two divs at the bottom.
4610
05:15:52,510 --> 05:15:53,710
And for our second diviv,
4611
05:15:53,860 --> 05:15:57,730
we're going to set the
position to relative
4612
05:15:59,080 --> 05:16:02,020
and save it. Now, if
we go back to our page,
4613
05:16:02,710 --> 05:16:04,600
we'll notice that
nothing actually changed.
4614
05:16:05,770 --> 05:16:07,450
And that's how position relative works.
4615
05:16:07,720 --> 05:16:10,540
It's still displays the element as normal,
4616
05:16:11,050 --> 05:16:13,990
except if we put position
absolute in here,
4617
05:16:14,380 --> 05:16:18,640
it will position it relative to this
element instead of relative to the page.
4618
05:16:19,060 --> 05:16:22,930
So let's go through an example to
see what I mean. If I scroll up here,
4619
05:16:23,380 --> 05:16:25,150
let's copy this absolute element.
4620
05:16:25,720 --> 05:16:30,280
Let's copy it and then paste
it inside this position,
4621
05:16:30,281 --> 05:16:34,300
relative element, save it,
4622
05:16:35,080 --> 05:16:39,070
and then reformatted a bit,
press tab. And if we save this,
4623
05:16:39,610 --> 05:16:43,790
you'll notice that we get the same
effect as when we put position absolute
4624
05:16:43,840 --> 05:16:44,530
imposition.
4625
05:16:44,531 --> 05:16:49,150
Fixed right of 10 pixels now means 10
4626
05:16:49,151 --> 05:16:53,470
pixels from the right of the position,
relative element, not 10 pixels.
4627
05:16:53,471 --> 05:16:54,640
From the right of the page,
4628
05:16:55,180 --> 05:16:59,900
top of 60 pixels means 60 pixels
from the top of the position,
4629
05:17:00,420 --> 05:17:03,580
relative element, not 60 pixels
from the top of the page.
4630
05:17:06,010 --> 05:17:07,330
So two things are happening here.
4631
05:17:07,720 --> 05:17:11,050
When position absolute is
inside position relative,
4632
05:17:11,500 --> 05:17:15,070
this will be positioned on
the element, not on the page.
4633
05:17:15,400 --> 05:17:16,810
So that's what we just talked about.
4634
05:17:17,440 --> 05:17:21,520
The second thing that happens here is
that position relative causes this whole
4635
05:17:21,521 --> 05:17:25,630
element to display normally. So that's
what we get in our final project.
4636
05:17:26,170 --> 05:17:30,230
Notice that these videos are displayed.
Normally they scroll with the page,
4637
05:17:30,860 --> 05:17:33,140
but we have something in
the bottom right corner.
4638
05:17:33,710 --> 05:17:35,930
So these are all positioned relative.
4639
05:17:36,500 --> 05:17:38,750
And then to put something
in the bottom right corner,
4640
05:17:39,110 --> 05:17:41,750
we're going to put a
position absolute inside.
4641
05:17:43,490 --> 05:17:47,410
So let's actually go through an
example here. So we have our position,
4642
05:17:47,730 --> 05:17:50,180
relative element. We have
position absolute inside.
4643
05:17:50,570 --> 05:17:53,990
I'm going to put this in the bottom
right corner, just like our design.
4644
05:17:54,710 --> 05:17:58,700
So let's change this to five minutes
4645
05:18:00,080 --> 05:18:01,940
and pretend this is our final project.
4646
05:18:02,570 --> 05:18:04,970
Let's change the
background color to black.
4647
05:18:07,520 --> 05:18:10,280
And now we're going to put this
on the bottom right corner.
4648
05:18:10,820 --> 05:18:12,260
So let's get rid of this first.
4649
05:18:14,780 --> 05:18:19,250
And we're going to put this 10
pixels from the bottom of the
4650
05:18:19,690 --> 05:18:22,880
position, relative element. So
we're going to say bottom 10 pixels.
4651
05:18:24,530 --> 05:18:27,860
And we're also going to put it 10
pixels from the right of this position,
4652
05:18:27,861 --> 05:18:30,920
relative element. So right of 10 pixels.
4653
05:18:33,260 --> 05:18:35,300
And that's how we position
this in the corner.
4654
05:18:36,440 --> 05:18:39,890
And because this is positioned
relative, if we scroll the page,
4655
05:18:39,950 --> 05:18:41,750
it acts like normal content.
4656
05:18:43,910 --> 05:18:45,960
So now that we learned
the technique of position,
4657
05:18:45,970 --> 05:18:48,200
absolute inside position relative,
4658
05:18:48,590 --> 05:18:53,510
we're going to apply that to our project
and create the video time as well as
4659
05:18:53,520 --> 05:18:54,920
the notification number here.
4660
05:18:56,270 --> 05:19:00,860
So let's go back to our project
and we're going to add video times
4661
05:19:00,861 --> 05:19:04,430
first. So let's go to YouTube dot html.
4662
05:19:05,240 --> 05:19:10,220
And we're also going to open the
video CSS file. I'm going to put it
4663
05:19:10,310 --> 05:19:13,910
down here because we're working
with styles for the videos.
4664
05:19:15,530 --> 05:19:18,260
So first we're going to find our
thumbnail, which is right here.
4665
05:19:19,040 --> 05:19:21,290
And now remember to put
something in the corner.
4666
05:19:21,830 --> 05:19:26,810
We're going to need position absolute
inside a position relative element.
4667
05:19:27,470 --> 05:19:31,670
So if we look at our code, what could
be our position, relative element?
4668
05:19:32,240 --> 05:19:35,990
Well, it can't really be the image element
because image elements aren't really
4669
05:19:35,991 --> 05:19:38,300
containers. We can't
put something inside it.
4670
05:19:38,960 --> 05:19:42,290
So what we could use is
this thumbnail, row element.
4671
05:19:42,680 --> 05:19:44,390
This could be our relative element.
4672
05:19:44,870 --> 05:19:48,590
And then the video time will be the
absolute element inside of here.
4673
05:19:50,630 --> 05:19:54,080
So first, let's create our video
time. We're going to create a diviv,
4674
05:19:56,180 --> 05:19:59,960
and let's give it a
class of video dash time.
4675
05:20:01,010 --> 05:20:03,620
And then inside we're
going to put a video time.
4676
05:20:03,621 --> 05:20:07,910
So let's go to our final project and
we're going to copy one of these. So 14,
4677
05:20:07,920 --> 05:20:11,930
20. Then inside I'm going to put 1420.
4678
05:20:13,520 --> 05:20:18,350
Let's save it and go back. So
right now is just a normal diviv.
4679
05:20:19,070 --> 05:20:22,160
Let's go to our CSS file. And
we're going to style this.
4680
05:20:22,850 --> 05:20:24,170
Let's scroll all the way down,
4681
05:20:26,040 --> 05:20:29,520
and we're going to target
video dash time class.
4682
05:20:31,530 --> 05:20:36,450
And let's set the background dash
color to black and the text color
4683
05:20:37,470 --> 05:20:39,840
to white. So just like our final project.
4684
05:20:41,340 --> 05:20:45,180
So now we're ready to position it
properly. We're going to need position,
4685
05:20:45,540 --> 05:20:48,630
absolute inside position
relative. So first,
4686
05:20:48,631 --> 05:20:50,580
let's set the position relative on here.
4687
05:20:51,390 --> 05:20:55,860
We're going to scroll up to
thumbnail row, which is right here.
4688
05:20:56,490 --> 05:20:59,260
We're going to set position relative.
4689
05:21:02,760 --> 05:21:05,430
And remember, position relative
doesn't really change anything.
4690
05:21:05,490 --> 05:21:08,760
Everything appears normal.
That's one of the benefits of it.
4691
05:21:09,510 --> 05:21:14,100
And if we scroll down, we're
going to change this to position
4692
05:21:16,510 --> 05:21:20,130
absolute and now top, bottom, left,
4693
05:21:20,131 --> 05:21:24,060
and will be placed inside our
position relative element.
4694
05:21:24,450 --> 05:21:28,890
So if we save it, and now if we want
to put it in the bottom right corner,
4695
05:21:29,400 --> 05:21:33,480
we just have to say bottom
zero pixels from the bottom,
4696
05:21:34,320 --> 05:21:36,510
and also zero pixels from the right.
4697
05:21:39,060 --> 05:21:43,650
So let's set the position from the
bottom to maybe 10 pixels. Save it,
4698
05:21:45,180 --> 05:21:49,980
and let's set the position from the
right side to maybe five pixels. Save it.
4699
05:21:50,610 --> 05:21:52,650
Okay, let's change this
to maybe eight pixels.
4700
05:21:54,000 --> 05:21:55,260
So I think that looks pretty good,
4701
05:21:57,150 --> 05:22:00,850
and if we compare it to our final
design, it's in the right position.
4702
05:22:01,530 --> 05:22:04,800
So that's how we put an element
in the corner of another element.
4703
05:22:05,280 --> 05:22:09,030
We need a position absolute
inside a position relative.
4704
05:22:10,710 --> 05:22:14,850
So finally, let's style this one
by one until it matches our design.
4705
05:22:15,390 --> 05:22:18,690
I'm actually going to move this to
the bottom here so that it's easier to
4706
05:22:18,691 --> 05:22:19,523
compare.
4707
05:22:23,340 --> 05:22:25,560
The first thing we're going
to do is to change the font.
4708
05:22:26,130 --> 05:22:30,330
So we're going to set font dash family to
4709
05:22:30,450 --> 05:22:32,910
reto aerial,
4710
05:22:33,750 --> 05:22:35,760
like the rest of our fonts.
4711
05:22:38,490 --> 05:22:40,410
And next, let's change the font size.
4712
05:22:41,400 --> 05:22:45,570
Let's change it to font dash
size of maybe 12 pixels.
4713
05:22:47,730 --> 05:22:50,670
That looks pretty good. Let's
make it a little bit bolder.
4714
05:22:51,420 --> 05:22:55,470
Let's change the font dash weight to 500.
4715
05:22:56,670 --> 05:22:59,400
And remember a font
weight of 400 is normal,
4716
05:22:59,850 --> 05:23:04,740
700 is bold and 500 is
semi bold. Let's save that.
4717
05:23:05,700 --> 05:23:10,050
That looks pretty good. And next we need
spacing on the inside of this element.
4718
05:23:10,140 --> 05:23:11,010
So that's padding.
4719
05:23:12,300 --> 05:23:16,500
So let's add some padding on the left of
4720
05:23:17,190 --> 05:23:18,030
maybe two pixels.
4721
05:23:19,320 --> 05:23:24,220
And same for padding on the right
two pixels and then padding on
4722
05:23:24,221 --> 05:23:26,200
the top of four pixels,
4723
05:23:26,800 --> 05:23:31,420
and then padding on the
bottom of four pixels. Save.
4724
05:23:31,421 --> 05:23:36,100
That looks pretty good. Let's add some
more padding on the left and right.
4725
05:23:36,670 --> 05:23:40,720
Changes to four pixels
and four pixels. Okay,
4726
05:23:40,721 --> 05:23:42,940
so I'm pretty happy with that. Next,
4727
05:23:42,941 --> 05:23:46,030
we're going to make our corner
rounded kind of like this.
4728
05:23:47,170 --> 05:23:51,280
So to do that we're going to
use border radius, chain Z,
4729
05:23:51,281 --> 05:23:56,170
border dash radius to two pixels, save it.
4730
05:23:58,150 --> 05:24:03,100
And I think that looks pretty close
to our design. And there we go.
4731
05:24:03,101 --> 05:24:06,580
We created the video time in the
bottom right corner of the thumbnail.
4732
05:24:08,020 --> 05:24:09,640
Now to give you guys a bit more practice,
4733
05:24:09,880 --> 05:24:13,390
I'm going to get you to add the video
time to all of our other videos.
4734
05:24:13,810 --> 05:24:15,220
So inside our html,
4735
05:24:15,790 --> 05:24:20,410
you're going to add this video time
to the next video here and all the
4736
05:24:20,411 --> 05:24:21,820
videos in the H T M L.
4737
05:24:23,530 --> 05:24:26,470
So take some time to complete that
and then we'll continue the lesson.
4738
05:24:30,910 --> 05:24:33,640
So now that we have the video
time for all of our videos,
4739
05:24:33,910 --> 05:24:37,930
we're going to run into another problem.
If we start scrolling up on this page,
4740
05:24:38,350 --> 05:24:41,140
you'll notice that the thumbnails
appear above our header.
4741
05:24:41,830 --> 05:24:45,880
But another thing is that
the other content like this
text and the channel image
4742
05:24:46,270 --> 05:24:49,540
will appear below our header.
So what exactly is going on?
4743
05:24:50,350 --> 05:24:55,090
So we mentioned this briefly in the
practice file. If an element like this
4744
05:24:55,091 --> 05:24:59,860
video preview is written below
another element like the header up
4745
05:24:59,861 --> 05:25:04,570
here, the element that is written
below will appear in front.
4746
05:25:05,710 --> 05:25:08,170
That's what's happening
here. We have a header,
4747
05:25:08,500 --> 05:25:10,720
and then below that we have the thumbnail,
4748
05:25:10,810 --> 05:25:14,470
which is going to appear on
top of the header. However,
4749
05:25:14,471 --> 05:25:19,090
what I didn't mention is that this rule
doesn't apply to position static or
4750
05:25:19,091 --> 05:25:22,110
these elements with the
default position. Position,
4751
05:25:22,120 --> 05:25:23,800
static will always appear at the back.
4752
05:25:24,100 --> 05:25:28,450
So that's why you see that these always
appear at the back as soon as we set it
4753
05:25:28,480 --> 05:25:31,570
to something that's not position
static like position relative.
4754
05:25:32,080 --> 05:25:35,530
The rules of which element was
written first start to apply.
4755
05:25:36,220 --> 05:25:38,920
So in this case, because if we scroll up,
4756
05:25:39,610 --> 05:25:44,440
the thumbnail row is positioned relative
and it's written below the header in
4757
05:25:44,441 --> 05:25:47,350
the code. It's going to
appear on top of the header,
4758
05:25:47,650 --> 05:25:50,770
which is what we see and
remember, to fix this,
4759
05:25:50,800 --> 05:25:55,420
we need to set a property of Z index.
Let's go into our header c s s
4760
05:25:55,430 --> 05:25:58,360
file. We're going to open this file here.
4761
05:26:00,040 --> 05:26:01,090
And then inside the header,
4762
05:26:01,150 --> 05:26:05,860
we need to set a Z dash index to make the
4763
05:26:05,861 --> 05:26:08,110
header appear above the thumbnails.
4764
05:26:08,950 --> 05:26:13,810
So let's set a Z index of 100 so that
we have room if we want to put stuff
4765
05:26:13,811 --> 05:26:17,380
between these two. Now, if I save it,
4766
05:26:18,340 --> 05:26:20,260
the header has a Z index of 100.
4767
05:26:21,260 --> 05:26:26,210
The thumbnail row has a default Z index
of zero. 100 is greater than zero.
4768
05:26:26,360 --> 05:26:30,440
That means the header will appear
on top of all the thumbnails.
4769
05:26:30,890 --> 05:26:34,910
So if we go back and we start scrolling,
you'll notice that we're now all good.
4770
05:26:37,460 --> 05:26:41,240
The last thing we'll learn is how to
create this notification count in the top
4771
05:26:41,241 --> 05:26:45,060
right corner of this icon.
So let's go into our html,
4772
05:26:45,350 --> 05:26:50,270
so YouTube dot html and find where
the code for this notification is.
4773
05:26:50,690 --> 05:26:54,230
So if we scroll down to the header and
then scroll down to the right side,
4774
05:26:55,100 --> 05:26:58,220
that's this code here, notification icons.
4775
05:26:58,850 --> 05:27:01,520
So I'm going to resize my windows
so we can see it properly here.
4776
05:27:03,860 --> 05:27:06,770
And now we want to put a notification
number in the top right corner.
4777
05:27:07,340 --> 05:27:08,720
So remember, like we've been doing,
4778
05:27:08,810 --> 05:27:12,560
we need a position absolute
inside a position relative.
4779
05:27:15,260 --> 05:27:19,970
So if we look at our html, what could
we use as our position relative element?
4780
05:27:20,510 --> 05:27:24,380
So it can't really be this image because
we can't put stuff inside an image
4781
05:27:24,381 --> 05:27:28,190
element. So one option
is this diviv up here,
4782
05:27:28,820 --> 05:27:33,350
but a better option is actually
to wrap this image element
4783
05:27:33,440 --> 05:27:37,040
inside a diviv. So we're
going to create a div here,
4784
05:27:37,790 --> 05:27:40,670
and we're going to put this
image inside this diviv.
4785
05:27:42,890 --> 05:27:47,000
So remember that the diviv just
creates a box around whatever's inside.
4786
05:27:47,630 --> 05:27:51,530
So it's not going to change the
appearance of this image. However,
4787
05:27:51,650 --> 05:27:55,280
by creating this diviv, we can
now make this position relative,
4788
05:27:55,640 --> 05:27:59,030
and that's going to help us add
stuff to the top right corner.
4789
05:28:01,310 --> 05:28:04,580
So let's give this diviv a class
so that we can style it later.
4790
05:28:05,270 --> 05:28:08,180
Let's call it notifications. Dash,
4791
05:28:08,360 --> 05:28:10,430
icon dash container.
4792
05:28:12,590 --> 05:28:14,960
And inside we're going to
have our notification count.
4793
05:28:15,530 --> 05:28:20,150
Let's create a diviv for our notification
count. Let's give it a count of three.
4794
05:28:22,010 --> 05:28:26,870
Alexa at this class equals
notifications with an
4795
05:28:26,871 --> 05:28:28,880
S dash count.
4796
05:28:30,470 --> 05:28:33,020
And now we're ready to style
this and put it in the corner.
4797
05:28:33,980 --> 05:28:35,840
So let's go into header dot css.
4798
05:28:36,290 --> 05:28:39,110
I'm going to put it on the side
so we can see it more clearly.
4799
05:28:42,140 --> 05:28:43,160
And now to start off,
4800
05:28:43,790 --> 05:28:47,240
let's scroll down to where we
have our notification code.
4801
05:28:47,540 --> 05:28:51,680
So let's scroll all the way down
and we'll find it right here.
4802
05:28:53,150 --> 05:28:55,850
And now remember, we're going
to have position relative,
4803
05:28:56,150 --> 05:28:58,800
and then inside we're going
to have position absolute.
4804
05:28:59,630 --> 05:29:02,960
So let's style the dot notifications
4805
05:29:04,820 --> 05:29:06,920
dash icon dash container
4806
05:29:08,840 --> 05:29:11,840
and set this to position relative.
4807
05:29:13,430 --> 05:29:17,960
And then the notifications
count, dashed count,
4808
05:29:18,680 --> 05:29:22,600
and we'll set to position absolute.
4809
05:29:27,300 --> 05:29:29,520
So we want to put this
in the top right corner.
4810
05:29:30,180 --> 05:29:35,010
So let's set the top to
zero pixels and the right
4811
05:29:35,310 --> 05:29:39,450
to zero pixels and to see it better.
Let's set a background color.
4812
05:29:39,930 --> 05:29:42,990
So background dash color of red,
4813
05:29:44,040 --> 05:29:45,960
and a text color of white.
4814
05:29:48,900 --> 05:29:52,080
And now if we save that, it's
sort of in the top right corner,
4815
05:29:52,170 --> 05:29:53,490
but it's a little bit too big.
4816
05:29:53,970 --> 05:29:57,060
So we're going to style it
just like our design here.
4817
05:29:58,140 --> 05:30:02,280
So I'm going to move this up here actually
so that we have a better reference.
4818
05:30:06,360 --> 05:30:09,180
And now we're going to style
it by first changing the font.
4819
05:30:09,990 --> 05:30:14,670
Let's change the font dash family to
4820
05:30:15,170 --> 05:30:17,520
reto aerial,
4821
05:30:18,030 --> 05:30:21,870
like before Next, we'll
change the font size.
4822
05:30:22,050 --> 05:30:26,730
So this is pretty small. Let's change
the font dash size to maybe 10 pixels.
4823
05:30:28,830 --> 05:30:31,560
Okay, should be a little bit
bigger. Let's set it to 12 pixels.
4824
05:30:32,400 --> 05:30:36,960
That looks pretty good. And let's add
some spacing on the inside of the element.
4825
05:30:37,560 --> 05:30:42,060
Let's add some padding
left of maybe four pixels,
4826
05:30:42,780 --> 05:30:45,420
padding right of four pixels,
4827
05:30:45,960 --> 05:30:48,030
padding top of two,
4828
05:30:48,990 --> 05:30:51,930
and padding dash bottom of two pixels.
4829
05:30:54,720 --> 05:30:58,110
And remember to make this a circle,
we're going to give it round corners.
4830
05:30:58,620 --> 05:31:02,940
So let's set the border
dash radius to 10 pixels.
4831
05:31:06,000 --> 05:31:08,400
So it looks like we're a
little bit too tall here.
4832
05:31:08,490 --> 05:31:11,850
We're going to stretch out the sides
by adding more padding to the sides.
4833
05:31:12,330 --> 05:31:16,500
Let's change this to maybe
five pixels left and right.
4834
05:31:17,070 --> 05:31:21,540
Save it. Okay, maybe six
pixels left and right.
4835
05:31:21,660 --> 05:31:25,680
Save it. Okay, so that looks
like a pretty good circle. Next,
4836
05:31:25,681 --> 05:31:28,380
we'll change the background color
to something that looks like that.
4837
05:31:29,310 --> 05:31:32,010
So I'm just going to pick
something like this, maybe
4838
05:31:33,510 --> 05:31:34,920
save.
Perfect.
4839
05:31:36,780 --> 05:31:40,830
And I'm going to change the font size
down just a little bit more because this
4840
05:31:40,831 --> 05:31:45,360
is pretty small. Let's
change this to 11, save that,
4841
05:31:45,990 --> 05:31:50,880
and let's change the padding
left and the right because
4842
05:31:50,881 --> 05:31:53,580
it'll, it's a little bit
long on the horizontal side.
4843
05:31:55,110 --> 05:31:56,520
And now we have a circle again.
4844
05:31:57,510 --> 05:32:01,230
So notice that we put this element in
the top right corner using these two
4845
05:32:01,231 --> 05:32:05,190
properties, but it's not enough.
We actually want it out even more.
4846
05:32:05,970 --> 05:32:09,990
So we're already at the top edge of
our position. Relative container,
4847
05:32:10,350 --> 05:32:15,120
how can we go even higher? So the
trick here is to use negative numbers.
4848
05:32:16,960 --> 05:32:20,590
So now this will be positioned
beyond the top edge of our container.
4849
05:32:21,130 --> 05:32:22,030
So if I save it here,
4850
05:32:23,080 --> 05:32:27,610
this is now five pixels beyond the
top edge of our relative container.
4851
05:32:28,240 --> 05:32:31,630
Same thing with right, if we set
it to negative five pixels here,
4852
05:32:32,380 --> 05:32:36,610
it's now five pixels beyond the right
edge. So I'm just going to adjust the
4853
05:32:36,611 --> 05:32:38,770
valleys here so that
it matches our design.
4854
05:32:40,270 --> 05:32:44,830
So let's set the top to something
like negative two. Okay,
4855
05:32:44,890 --> 05:32:48,160
so I think that looks pretty close to
our design and I'm pretty happy with it.
4856
05:32:48,910 --> 05:32:51,220
So in this lesson, we
learned CSS position,
4857
05:32:51,580 --> 05:32:54,040
which is one of the most
important skills in css.
4858
05:32:55,120 --> 05:32:59,140
It allows us to create elements like
this header and sidebar that stick to the
4859
05:32:59,141 --> 05:33:03,880
page while we scroll, and it allows us
to add elements on top of other elements.
4860
05:33:04,150 --> 05:33:04,690
For example,
4861
05:33:04,691 --> 05:33:08,950
the video time on top of the thumbnail
and the notification count on top of the
4862
05:33:08,951 --> 05:33:12,640
notification icon. So with that,
4863
05:33:12,641 --> 05:33:17,590
we learned all the major skills that
we need in H T M L and CSS to complete
4864
05:33:17,770 --> 05:33:19,900
our project. In the last lesson,
4865
05:33:19,901 --> 05:33:22,930
we're going to create all the
other features that we're missing,
4866
05:33:23,290 --> 05:33:25,900
including the sidebar, the tooltip,
4867
05:33:26,230 --> 05:33:30,640
and making our current project
look like the final design. Here
4868
05:33:52,420 --> 05:33:54,760
in this lesson, we're going
to finish our final project.
4869
05:33:55,090 --> 05:33:56,500
We're going to create the sidebar,
4870
05:33:56,830 --> 05:34:00,910
we'll resize our video so that it
looks like our design here. And lastly,
4871
05:34:00,911 --> 05:34:04,180
we're going to create the tooltip.
When we hover over these icons,
4872
05:34:05,140 --> 05:34:06,790
we'll start off with the sidebar.
4873
05:34:07,360 --> 05:34:10,900
So I'm going to rearrange my windows here
so that it's a little easier to copy.
4874
05:34:11,500 --> 05:34:13,450
So I put the design on the left.
4875
05:34:14,170 --> 05:34:16,900
I'm going to put our current
sidebar on the right here,
4876
05:34:17,590 --> 05:34:20,050
and I'll resize my windows
so we can see it better.
4877
05:34:22,000 --> 05:34:23,350
And now we're ready to begin.
4878
05:34:24,040 --> 05:34:28,330
So let's open our code editor and
we're going to open YouTube dot
4879
05:34:28,780 --> 05:34:32,710
html. And then we're going to
scroll down to the sidebar code,
4880
05:34:33,400 --> 05:34:34,720
which is right here.
4881
05:34:36,190 --> 05:34:40,930
So let's take a look at the design of
this sidebar. Our reference design.
4882
05:34:41,860 --> 05:34:45,430
If I hover over it, you can see
that is just a bunch of boxes.
4883
05:34:45,850 --> 05:34:49,420
And inside each box we
have an icon, some text,
4884
05:34:49,780 --> 05:34:52,590
and they're centered
horizontally and vertically.
4885
05:34:52,990 --> 05:34:56,260
So we're going to start step by step.
We're first going to create the box.
4886
05:34:58,780 --> 05:35:02,710
Let's go into our code.
And instead of this text,
4887
05:35:02,800 --> 05:35:04,870
we're going to create six boxes.
4888
05:35:05,860 --> 05:35:09,100
We're going to use a
diviv to create each box.
4889
05:35:09,700 --> 05:35:13,880
Let's give this diviv a class of sidebar
4890
05:35:14,590 --> 05:35:15,560
dash link.
4891
05:35:17,210 --> 05:35:20,060
And I'm going to copy
and paste this six times
4892
05:35:21,470 --> 05:35:24,350
4, 5, 6. Next,
4893
05:35:24,360 --> 05:35:28,340
we're going to style these so that
they have the same size as these boxes.
4894
05:35:29,630 --> 05:35:31,520
I'm going to go into our css.
4895
05:35:33,530 --> 05:35:36,110
So let's go into sidebar css.
4896
05:35:37,310 --> 05:35:40,670
I'm going to put this on the right
side here so we can see it better.
4897
05:35:41,540 --> 05:35:43,430
And now we're ready to style these.
4898
05:35:44,630 --> 05:35:48,290
Let's target the class sidebar link.
4899
05:35:49,640 --> 05:35:54,350
And for each of these, let's give it a
background color so that we can see them.
4900
05:35:54,830 --> 05:35:56,930
And let's set it to light gray.
4901
05:35:59,510 --> 05:36:03,380
And we'll also give them a height
because without any content in the divs,
4902
05:36:03,650 --> 05:36:05,060
they have a height of zero.
4903
05:36:05,840 --> 05:36:10,790
So let's set a height of 50 pixels and
4904
05:36:10,791 --> 05:36:14,780
let's save it and let's
see how that looks. Okay,
4905
05:36:14,840 --> 05:36:17,150
so it's hard to tell the
difference between them.
4906
05:36:17,570 --> 05:36:21,680
So let's add some spacing at the bottom
of each div so that we can differentiate
4907
05:36:21,690 --> 05:36:22,523
them.
4908
05:36:22,640 --> 05:36:27,560
I'm going to add margin dash bottom of one
4909
05:36:27,561 --> 05:36:31,760
pixel, save it. Okay, so from this,
4910
05:36:31,761 --> 05:36:34,940
it looks like our boxes
are a little bit too short,
4911
05:36:35,450 --> 05:36:40,310
so we're going to make them taller.
Let's try a height of maybe 75.
4912
05:36:42,350 --> 05:36:44,180
Okay, so I think that's pretty close.
4913
05:36:44,630 --> 05:36:49,010
We can get rid of this margin at the
bottom and actually increase this to
4914
05:36:49,011 --> 05:36:53,180
76 so that we compensate for
the margin that we removed.
4915
05:36:54,050 --> 05:36:58,250
And next, when we look at the design,
these boxes are usually white,
4916
05:36:58,340 --> 05:37:00,260
but when we hover over
them, they turn gray.
4917
05:37:01,100 --> 05:37:05,210
So instead of having this
background color gray here,
4918
05:37:06,350 --> 05:37:10,220
we're just going to set the background
color when we hover over this.
4919
05:37:10,640 --> 05:37:14,720
So let's set a hover style dot sidebar,
4920
05:37:15,530 --> 05:37:17,960
dash link hover.
4921
05:37:19,910 --> 05:37:24,890
And when we hover, we're going
to set the background color to
4922
05:37:25,130 --> 05:37:29,330
light and gray. Let's save it.
4923
05:37:30,110 --> 05:37:32,090
And now when we hover, it's light gray,
4924
05:37:32,630 --> 05:37:35,570
but our design is actually
a lot lighter than that.
4925
05:37:35,750 --> 05:37:37,280
So I'm going to change the color here.
4926
05:37:38,090 --> 05:37:42,710
I'm going to pick something a little
lighter than this, maybe something here.
4927
05:37:44,210 --> 05:37:48,710
Save that and check it out.
And yep,
4928
05:37:48,740 --> 05:37:49,640
I think that looks pretty close.
4929
05:37:50,900 --> 05:37:53,870
Next we're going to add the
content in each of these boxes.
4930
05:37:54,680 --> 05:37:57,650
So first we actually need to
download all of these icons.
4931
05:37:58,010 --> 05:38:01,640
So we did the before for these icons.
And just a reminder to do that,
4932
05:38:01,650 --> 05:38:04,550
we're going to right click and inspect.
4933
05:38:05,930 --> 05:38:08,780
So you'll see that this
actually covers up the sidebar.
4934
05:38:09,170 --> 05:38:13,590
What we can do is click these three dots
in the top right and then we can move
4935
05:38:13,770 --> 05:38:16,350
the dev tools to another
side of the webpage.
4936
05:38:16,710 --> 05:38:18,510
So I'm going to move it
to the right side here.
4937
05:38:19,800 --> 05:38:21,720
And now we can see the full sidebar.
4938
05:38:22,590 --> 05:38:24,690
Then we're going to click
this in the top left,
4939
05:38:25,470 --> 05:38:29,700
click one of these icons and you'll
get the URL to download them here.
4940
05:38:30,240 --> 05:38:33,480
So hover over this URL
and then click this.
4941
05:38:35,010 --> 05:38:36,450
And now we can control S,
4942
05:38:37,470 --> 05:38:42,450
and I'll save it in the folder
that contains my code in the icons
4943
05:38:42,451 --> 05:38:43,283
folder.
4944
05:38:43,890 --> 05:38:47,970
So make sure you do this for all six of
these icons and I'll see you back after
4945
05:38:47,971 --> 05:38:52,140
you're done. All right,
4946
05:38:52,170 --> 05:38:55,770
so once we've downloaded all of
the icons from the sidebar here,
4947
05:38:56,190 --> 05:38:58,210
we're going to add them to our html.
4948
05:38:58,950 --> 05:39:01,470
So let's go into each of
these and add our icons
4949
05:39:03,120 --> 05:39:06,420
inside this first diviv, we're
going to add an image element,
4950
05:39:07,110 --> 05:39:08,820
and we're going to set a source attribute.
4951
05:39:10,230 --> 05:39:14,610
And we're going to load
the icon icons slash
4952
05:39:15,210 --> 05:39:18,210
home dot svg because
this is the home icon.
4953
05:39:19,980 --> 05:39:23,910
And let's save it. And now we have
our icon. It's a little bit too big,
4954
05:39:23,911 --> 05:39:26,430
but we're going to
resize it after. For now,
4955
05:39:26,460 --> 05:39:31,290
let's copy this and add the
icons for all of these other
4956
05:39:31,291 --> 05:39:34,800
boxes. So we're going to add for this one,
4957
05:39:34,801 --> 05:39:38,240
we're going to add the
explore icon. So explore svg,
4958
05:39:40,320 --> 05:39:44,970
and for this one is the
subscriptions. And then for this one,
4959
05:39:45,060 --> 05:39:46,400
it's originals.
4960
05:39:48,960 --> 05:39:52,620
And then for this one
it's YouTube dash music.
4961
05:39:53,820 --> 05:39:57,930
And the last one is library.
So I'm going to go down here,
4962
05:39:58,470 --> 05:40:02,070
change this to library. Perfect.
4963
05:40:03,420 --> 05:40:06,030
Next, we're going to
make these icons smaller.
4964
05:40:06,840 --> 05:40:11,730
So usually we would set a
class on these images so
4965
05:40:11,731 --> 05:40:13,530
that we can style them with css.
4966
05:40:14,100 --> 05:40:17,430
But for this lesson I'm going to show
you another wave that we can target these
4967
05:40:17,460 --> 05:40:18,293
images.
4968
05:40:18,750 --> 05:40:22,470
So let's go into our sidebar styles
and we're going to learn a new CSS
4969
05:40:22,471 --> 05:40:23,303
technique.
4970
05:40:24,120 --> 05:40:27,480
So we already learned that this
text before the brackets here,
4971
05:40:27,990 --> 05:40:31,830
this tells a computer which elements
we're styling. In this case,
4972
05:40:31,860 --> 05:40:36,210
the dot means we're targeting a class
and we're styling all elements that have
4973
05:40:36,220 --> 05:40:39,060
the class sidebar link,
which are these elements.
4974
05:40:40,710 --> 05:40:43,950
So this bit of text is
called a CSS selector,
4975
05:40:44,460 --> 05:40:48,000
and there's actually a lot of different
selectors that we can use in css.
4976
05:40:49,770 --> 05:40:51,900
So we already learned
the class name selector,
4977
05:40:51,930 --> 05:40:54,180
which looks like this
and starts with a dot.
4978
05:40:54,630 --> 05:40:56,970
And we learned the element name selector,
4979
05:40:57,180 --> 05:40:58,950
which just starts with the elements name.
4980
05:41:00,510 --> 05:41:05,340
Another thing we can do with CSS is to
combine selectors together. For example,
4981
05:41:05,341 --> 05:41:07,890
if we said dot sidebar,
4982
05:41:08,580 --> 05:41:12,520
dash link and then
wrote a comma down here,
4983
05:41:12,521 --> 05:41:14,050
we can add another selector.
4984
05:41:15,340 --> 05:41:18,010
So let's say we also
want to target header.
4985
05:41:19,510 --> 05:41:23,860
So now all of the styles inside the
brackets will target all elements with the
4986
05:41:23,861 --> 05:41:27,730
sidebar link class and all
elements with the header class.
4987
05:41:29,440 --> 05:41:32,080
This is an example of a
more advanced selector.
4988
05:41:33,010 --> 05:41:36,310
Another selector we can
use is instead of a comma,
4989
05:41:36,970 --> 05:41:41,740
we can use a space and
then type another selector
4990
05:41:41,830 --> 05:41:46,600
like image. So when we have
a space between these two,
4991
05:41:47,200 --> 05:41:52,180
this means that we're targeting all
images inside all sidebar links.
4992
05:41:52,630 --> 05:41:56,110
So we're going to target these
images inside sidebar links only.
4993
05:41:56,530 --> 05:41:59,230
We're not going to target
all images on the page.
4994
05:42:00,730 --> 05:42:05,500
So let's style these images and make
them smaller. We're going to set a height
4995
05:42:07,420 --> 05:42:12,400
and let's try 24 pixels.
Let's see how that looks. Okay,
4996
05:42:12,401 --> 05:42:16,690
so I think that looks pretty close
to what we have in the design. Next,
4997
05:42:16,691 --> 05:42:19,570
we're going to center these
horizontally and vertically.
4998
05:42:19,870 --> 05:42:21,310
And finally add the text.
4999
05:42:22,780 --> 05:42:26,200
So to center something vertically
is actually challenging In css,
5000
05:42:26,650 --> 05:42:29,070
the best way to do it is to use a flexbox.
5001
05:42:29,770 --> 05:42:33,280
If we look into our code editor
and open our Flexbox example,
5002
05:42:33,400 --> 05:42:34,960
so flexbox html,
5003
05:42:35,620 --> 05:42:38,770
and then we right click
and open with live server,
5004
05:42:39,850 --> 05:42:42,310
we have a bunch of
examples of using flexbox.
5005
05:42:42,820 --> 05:42:46,060
In the last example here we're
doing vertical alignment.
5006
05:42:46,930 --> 05:42:51,460
If we scroll down to
our example in our html,
5007
05:42:52,450 --> 05:42:55,810
we have this property
called align items center.
5008
05:42:57,310 --> 05:43:00,550
So this vertically
centers our content here.
5009
05:43:00,551 --> 05:43:03,520
We also have an example
of horizontal centering.
5010
05:43:04,330 --> 05:43:07,780
If we scroll up to that
example, which is this one,
5011
05:43:08,320 --> 05:43:10,900
we have the property
justified content center.
5012
05:43:12,550 --> 05:43:15,580
So using justified content
center and Align item center,
5013
05:43:15,940 --> 05:43:18,850
we can put it both horizontally
and vertically centered.
5014
05:43:19,480 --> 05:43:23,260
So let's go back into our project
and use a flex box to center these.
5015
05:43:24,160 --> 05:43:29,140
We're going to go back to our CSS
and we're going to make each of
5016
05:43:29,150 --> 05:43:31,210
these sidebar links a flex box.
5017
05:43:32,020 --> 05:43:36,340
So let's set the display property to flex,
5018
05:43:37,210 --> 05:43:42,130
and we're going to set
justify dash content
5019
05:43:43,090 --> 05:43:46,900
to center. So this will center
horizontally, let's save it.
5020
05:43:47,560 --> 05:43:48,970
And now they're horizontally centered.
5021
05:43:49,600 --> 05:43:54,310
And then align dash items center for
5022
05:43:54,311 --> 05:43:58,840
vertical center. So this
is coming along great.
5023
05:43:59,530 --> 05:44:04,060
Next we're going to add the text.
So underneath each of these,
5024
05:44:04,840 --> 05:44:09,100
let's add a diviv. So for this first one,
5025
05:44:09,620 --> 05:44:13,280
it's going to be called home.
And I'm just going to copy these
5026
05:44:14,990 --> 05:44:17,960
and replace it with each
of these texts. So explore
5027
05:44:19,730 --> 05:44:22,460
this one is subscriptions,
5028
05:44:26,660 --> 05:44:27,560
originals,
5029
05:44:31,150 --> 05:44:31,983
YouTube,
5030
05:44:32,820 --> 05:44:37,160
music and library.
5031
05:44:39,950 --> 05:44:41,990
Now let's start styling
this text a little bit.
5032
05:44:42,620 --> 05:44:45,440
I'm going to use this
advanced CSS selector. Again,
5033
05:44:46,280 --> 05:44:49,430
we're going to go into
the sidebar link class,
5034
05:44:49,880 --> 05:44:53,000
and then we're going to target
all the divs inside sidebar link.
5035
05:44:53,810 --> 05:44:54,800
So we're going to target divs.
5036
05:44:55,370 --> 05:44:57,740
So this is not going to
target all divs on the page,
5037
05:44:58,040 --> 05:45:00,470
only the divs inside sidebar link.
5038
05:45:02,210 --> 05:45:03,800
Let's change the font here first.
5039
05:45:04,280 --> 05:45:08,780
So we'll set the font dash family to reto
5040
05:45:10,730 --> 05:45:15,590
aerial like before, and let's
make the text smaller. Next,
5041
05:45:15,830 --> 05:45:20,570
we're going to set the font
dash size to maybe 12 pixels.
5042
05:45:22,100 --> 05:45:24,980
Okay, maybe 10 pixels, save it.
5043
05:45:25,820 --> 05:45:29,810
And now the next problem we have is that
our elements are appearing beside each
5044
05:45:29,811 --> 05:45:34,100
other, not on top of each
other. So why is this happening?
5045
05:45:34,730 --> 05:45:39,710
So remember that we can set a
property called flex dash direction
5046
05:45:40,430 --> 05:45:41,750
colon row.
5047
05:45:43,490 --> 05:45:47,720
If we go into our flex
box example, Flexbox html,
5048
05:45:48,320 --> 05:45:52,460
let we scroll all the way to the top.
This was the first thing that we learned.
5049
05:45:52,520 --> 05:45:55,190
Display flex and flex direction row.
5050
05:45:56,360 --> 05:46:01,190
So if we open this in our browser
and we scroll to the first example,
5051
05:46:02,720 --> 05:46:06,530
flex direction row causes our
elements to be displayed horizontally.
5052
05:46:07,070 --> 05:46:10,760
So notice that these two are divs, but
they're displayed next to each other,
5053
05:46:10,820 --> 05:46:15,620
not on top of each other. Now to change
this, we're actually going to go back
5054
05:46:17,180 --> 05:46:19,910
and we're going to use
flex direction column.
5055
05:46:21,500 --> 05:46:24,500
So where flex direction row
displays them horizontally,
5056
05:46:24,890 --> 05:46:29,630
flex direction column displays our
elements vertically. So if we save it
5057
05:46:31,280 --> 05:46:33,950
now it's displaying our elements
one on top of each other.
5058
05:46:35,690 --> 05:46:40,370
So this is another direction that we
can use for our flex boxes. By default,
5059
05:46:40,430 --> 05:46:44,270
flex boxes are flex direction row,
so they will appear horizontally,
5060
05:46:44,720 --> 05:46:48,650
but we can set flex direction column
when we don't want that behavior.
5061
05:46:49,730 --> 05:46:53,630
So for flex direction column, these
two properties are actually switched.
5062
05:46:54,020 --> 05:46:58,190
So if I remove both of
them first and I first use
5063
05:46:58,250 --> 05:47:02,360
justify dash content colon center,
5064
05:47:04,580 --> 05:47:05,413
Save it.
5065
05:47:05,780 --> 05:47:10,260
Justify content now affects the
vertical direction instead of the
5066
05:47:10,261 --> 05:47:12,900
horizontal direction
with flex direction row.
5067
05:47:13,770 --> 05:47:16,410
And if I use align dash items,
5068
05:47:16,800 --> 05:47:21,300
center align items now affects
the horizontal direction.
5069
05:47:21,960 --> 05:47:25,290
So for flex direction column,
these two are reversed.
5070
05:47:25,560 --> 05:47:28,140
It's a little bit confusing,
but the more they use flex box,
5071
05:47:28,170 --> 05:47:32,130
the more you'll get used to it.
All right, so we're almost done.
5072
05:47:32,190 --> 05:47:36,300
We're just going to add some space
between these two to add some space.
5073
05:47:36,301 --> 05:47:38,940
Let's add some margin bottom to the image.
5074
05:47:39,870 --> 05:47:42,690
So margin dash bottom,
5075
05:47:43,260 --> 05:47:46,950
maybe four pixels, save it.
5076
05:47:48,780 --> 05:47:51,780
Okay, I think that looks
pretty close to me,
5077
05:47:52,770 --> 05:47:56,430
and it looks like our elements
are a little bit too tall.
5078
05:47:57,960 --> 05:48:02,550
So I'm actually going to scroll up and
adjust the height here to maybe 74.
5079
05:48:03,780 --> 05:48:07,140
Save it. And okay, that looks pretty good.
5080
05:48:08,970 --> 05:48:13,140
So one last thing with the sidebar is
that I notice in our design it kind of
5081
05:48:13,150 --> 05:48:17,040
covers the header while ours does not.
So to change that,
5082
05:48:17,041 --> 05:48:21,750
remember we can change
the Z dash index to be
5083
05:48:21,751 --> 05:48:26,190
higher than whatever the header is.
So if we go into our header styles,
5084
05:48:26,220 --> 05:48:30,270
header dot css, notice
that the Z index is 100.
5085
05:48:31,140 --> 05:48:34,080
So we're going to change our
Z index to bigger than that.
5086
05:48:34,440 --> 05:48:36,540
So 200 save it.
5087
05:48:37,170 --> 05:48:40,980
And now our sidebar is
covering our header. Next,
5088
05:48:40,981 --> 05:48:45,510
I want to move all of these icons down
a little bit more so that it's aligned.
5089
05:48:46,530 --> 05:48:50,430
So to do that, I'm going to add some
padding or spacing to the top of this.
5090
05:48:52,200 --> 05:48:54,120
So we're going to add some padding
5091
05:48:55,620 --> 05:48:59,820
dash top of maybe five pixels.
Let's see how that looks.
5092
05:49:00,690 --> 05:49:02,670
Okay, so that looks perfect.
5093
05:49:03,420 --> 05:49:07,560
And actually one last thing is I'm going
to make the cursor a pointer when we
5094
05:49:07,561 --> 05:49:08,393
hover her over it.
5095
05:49:09,270 --> 05:49:13,680
So let's go into our sidebar
link and we'll set the cursor
5096
05:49:14,760 --> 05:49:17,520
to a pointer, save it.
5097
05:49:18,480 --> 05:49:20,130
And now this looks good to go.
5098
05:49:22,890 --> 05:49:26,640
Next we're going to resize these
videos to match the design.
5099
05:49:27,330 --> 05:49:31,110
So I'm going to move
this back into one window
5100
05:49:31,950 --> 05:49:36,870
and I'm going to resize this so that we
have three videos in each row and now
5101
05:49:36,871 --> 05:49:39,330
we can properly switch
back and forth to compare.
5102
05:49:39,990 --> 05:49:42,030
So as I switch back and
forth between these,
5103
05:49:42,360 --> 05:49:45,150
you can see that there's a size
difference between the videos.
5104
05:49:45,420 --> 05:49:49,380
So we're going to fix
that. So for our website,
5105
05:49:49,500 --> 05:49:53,760
I notice that the left edge here can
be moved to the right a little more.
5106
05:49:54,000 --> 05:49:57,690
So if we look at our design,
it's more to the right,
5107
05:49:58,290 --> 05:50:01,890
go back to our current project
design more to the right.
5108
05:50:02,700 --> 05:50:06,610
So to move this to the right,
we're actually using padding.
5109
05:50:06,700 --> 05:50:10,180
So we had to increase our padding
on the left side of the page.
5110
05:50:10,750 --> 05:50:14,260
Let's go back into our code and
we're going to find the padding,
5111
05:50:14,800 --> 05:50:16,760
which is in general css.
5112
05:50:17,410 --> 05:50:22,300
So remember we added padding to the left
side of the body that's pushing these
5113
05:50:22,301 --> 05:50:23,890
elements over here.
5114
05:50:24,850 --> 05:50:29,080
So let's increase the padding to maybe
5115
05:50:29,170 --> 05:50:30,003
96,
5116
05:50:30,580 --> 05:50:35,560
save it and let's compare
it to the design. All right,
5117
05:50:35,570 --> 05:50:36,850
so I think that looks perfect.
5118
05:50:37,990 --> 05:50:42,160
And we also have padding on the
right while our website does not.
5119
05:50:42,730 --> 05:50:47,110
So let's actually also
add padding dash right
5120
05:50:48,640 --> 05:50:50,170
of 24 pixels.
5121
05:50:51,310 --> 05:50:54,640
Now if we save that there
and compare it to our design,
5122
05:50:55,180 --> 05:50:59,140
our videos are now exactly the right
size. So that looks great to me.
5123
05:51:01,270 --> 05:51:04,000
The next thing we're going to
tweak is if we look at our design,
5124
05:51:04,510 --> 05:51:09,010
the background color here is a light
gray while our background color is white.
5125
05:51:09,580 --> 05:51:13,930
So we're going to make the background
color of our entire page a shade of gray
5126
05:51:13,931 --> 05:51:14,763
like this.
5127
05:51:15,310 --> 05:51:20,140
So let's go into our CSS
and in our body styles in
5128
05:51:20,141 --> 05:51:21,070
general css,
5129
05:51:21,760 --> 05:51:26,650
let's set the background dash color to
5130
05:51:26,860 --> 05:51:27,760
light gray.
5131
05:51:28,720 --> 05:51:32,530
And I'm going to hover over
this and select a lighter color,
5132
05:51:33,460 --> 05:51:36,880
maybe 2 48. Save it.
5133
05:51:37,720 --> 05:51:40,090
And let's compare it to our design.
5134
05:51:40,091 --> 05:51:45,070
So this is our website and this is the
design. I think that looks pretty close.
5135
05:51:47,470 --> 05:51:50,740
And the last few details I
want to adjust is this part.
5136
05:51:51,370 --> 05:51:54,640
So if I look at my design and
I compare it to my website,
5137
05:51:55,090 --> 05:51:57,760
it looks like our channel
pictures are a little bit too big.
5138
05:51:58,150 --> 05:52:01,900
So if I look at the design here, so
we could make them a little smaller.
5139
05:52:02,950 --> 05:52:07,420
So let's go into our code and
we're going to go into the video
5140
05:52:07,421 --> 05:52:10,750
styles. Let's open video css.
5141
05:52:13,000 --> 05:52:16,780
We're going to find the profile
picture. So if I scroll down,
5142
05:52:17,740 --> 05:52:22,630
so this image here is the channel picture.
It has a class of profile picture.
5143
05:52:23,170 --> 05:52:26,800
We're going to decrease
the width to maybe 36,
5144
05:52:27,790 --> 05:52:30,340
save it compared to our design.
5145
05:52:31,600 --> 05:52:33,610
So I think that's the right size. Next,
5146
05:52:33,611 --> 05:52:38,350
I'm going to adjust some of these spacing
here. So if I compare to the design,
5147
05:52:39,250 --> 05:52:43,240
there's actually a little bit less
spacing here, then our website.
5148
05:52:43,810 --> 05:52:46,960
So I'm going to decrease
that. So for our website,
5149
05:52:46,961 --> 05:52:51,400
we're adding some margin
bottom to the thumbnail.
5150
05:52:51,880 --> 05:52:52,713
The thumbnail row.
5151
05:52:55,060 --> 05:52:59,290
I'm going to decrease this to maybe
eight pixels. Let's see how that looks.
5152
05:53:00,340 --> 05:53:03,950
And then compared to our design,
so I'm pretty happy with that.
5153
05:53:04,550 --> 05:53:08,210
And finally, I'm going to adjust
the spacing between these two.
5154
05:53:09,110 --> 05:53:11,540
So for our video title,
if we go into our code
5155
05:53:14,270 --> 05:53:18,110
And scroll up here, it
has a margin bottom of 12.
5156
05:53:18,200 --> 05:53:20,570
I'm going to decrease
it a little bit to 10,
5157
05:53:22,130 --> 05:53:26,660
save it and compare it. Okay,
5158
05:53:26,690 --> 05:53:29,390
so I think that's good enough.
It doesn't have to be perfect,
5159
05:53:29,420 --> 05:53:30,290
it's a little bit off,
5160
05:53:31,040 --> 05:53:35,540
but I think that our current website
here looks really good to me. Anyways,
5161
05:53:37,250 --> 05:53:40,760
the final thing we're going to do in this
lesson is we're going to create these
5162
05:53:40,850 --> 05:53:43,070
tooltip when we hover over these icons.
5163
05:53:43,880 --> 05:53:47,390
So before we learn how to make
these appear, when we hover over,
5164
05:53:47,780 --> 05:53:51,560
let's just create these tooltip
and place them below each icon.
5165
05:53:52,910 --> 05:53:57,080
So let's go into our website and we're
going to add some tooltip to these.
5166
05:53:57,710 --> 05:54:01,130
So we'll go into our code and I'm going
to resize the windows so we can see
5167
05:54:01,131 --> 05:54:05,450
better. So we're going
to go into our html,
5168
05:54:05,510 --> 05:54:07,400
we're going to scroll up to our header.
5169
05:54:08,240 --> 05:54:11,060
And let's first find the search icon here,
5170
05:54:12,080 --> 05:54:16,340
which is in the middle section,
and then the search button here.
5171
05:54:17,750 --> 05:54:18,890
So to create the tooltip,
5172
05:54:18,920 --> 05:54:22,430
we're actually going to use the position
property that we learned earlier.
5173
05:54:22,431 --> 05:54:26,480
So remember that we use position to put
this number in the top right corner.
5174
05:54:27,020 --> 05:54:31,940
We're going to use position to put a
tool tip below the element right here.
5175
05:54:32,990 --> 05:54:36,470
So let's first add a tool
tip inside the button.
5176
05:54:36,980 --> 05:54:38,390
So we're going to create a diviv
5177
05:54:40,370 --> 05:54:44,090
and let's call this search, let's save it.
5178
05:54:44,630 --> 05:54:45,770
And now that's our tool tip.
5179
05:54:46,250 --> 05:54:49,400
And now we need to position this
tool tip relative to our button.
5180
05:54:49,970 --> 05:54:51,530
So remember from the previous lesson,
5181
05:54:51,590 --> 05:54:55,770
we need position absolute
inside position relative.
5182
05:54:56,330 --> 05:54:58,460
So let's first add those
position properties.
5183
05:54:59,510 --> 05:55:03,620
So we're going to go into the header
CSS file because we're working with the
5184
05:55:03,621 --> 05:55:05,390
header. So let's open that up
5185
05:55:07,640 --> 05:55:09,710
and I'm going to move it
to the right side here.
5186
05:55:11,630 --> 05:55:14,900
And now we're going to scroll down
until we find our search button.
5187
05:55:15,620 --> 05:55:18,770
So I'm going to scroll, scroll,
scroll, and it's right here.
5188
05:55:19,490 --> 05:55:23,930
So we're going to set this search button,
which is our container to position
5189
05:55:25,580 --> 05:55:30,440
Colon relative save it,
5190
05:55:30,710 --> 05:55:33,620
and nothing happens because that's
how position relative works.
5191
05:55:34,400 --> 05:55:38,280
And now the magic comes when we
set this to position absolute.
5192
05:55:38,810 --> 05:55:42,980
So we're actually going to set a class
here so that we can target it a little
5193
05:55:42,981 --> 05:55:45,470
easier. We're going to call this tool tip
5194
05:55:47,120 --> 05:55:50,330
and we're going to use that advanced
CSS selector we learned earlier.
5195
05:55:51,140 --> 05:55:55,550
So we're going to target
search dash button first,
5196
05:55:56,450 --> 05:55:58,310
and then we're going to type a space.
5197
05:55:59,090 --> 05:56:01,920
And then we're going to type tool tip.
5198
05:56:05,520 --> 05:56:08,190
So this means that we're
targeting the dot tool tip class,
5199
05:56:08,550 --> 05:56:12,450
not on the entire page, but
only inside the search button.
5200
05:56:13,140 --> 05:56:17,160
So now we don't have to come up with a
unique name for this specific tool tip.
5201
05:56:18,120 --> 05:56:21,160
So if we save it, we're
going to set this to position
5202
05:56:22,960 --> 05:56:27,900
absolute. And now we have an absolute
element inside a relative element.
5203
05:56:28,740 --> 05:56:31,890
So if we save that, now we
can start positioning this.
5204
05:56:32,610 --> 05:56:35,400
Let's give a background color
so that we can see it better.
5205
05:56:36,060 --> 05:56:40,110
So background dash color of maybe gray.
5206
05:56:41,740 --> 05:56:46,170
And let's add the text color
to white. So color colon white.
5207
05:56:48,480 --> 05:56:50,400
Let's give it some padding on the inside,
5208
05:56:51,000 --> 05:56:55,470
some padding top of maybe four pixels,
5209
05:56:57,150 --> 05:56:58,590
padding dash bottom,
5210
05:56:59,040 --> 05:57:03,690
four pixels padding left four pixels
5211
05:57:03,780 --> 05:57:07,950
and padding right for pixels, save it.
5212
05:57:08,730 --> 05:57:12,930
And let's actually increase the
padding on the left and right to eight.
5213
05:57:13,410 --> 05:57:16,770
See how that looks. Okay,
I'm pretty happy with that.
5214
05:57:17,820 --> 05:57:22,770
And now I'm going to set some rounded
corners so we don't have to exactly match
5215
05:57:22,771 --> 05:57:27,480
our design. We can make it close enough
so we can set some rounded corners,
5216
05:57:27,840 --> 05:57:31,020
border dash radius of four pixels.
5217
05:57:32,460 --> 05:57:35,250
It's a little too much
for me set to two pixels.
5218
05:57:36,720 --> 05:57:38,910
And I'm also going to make
the font a little bit smaller.
5219
05:57:39,510 --> 05:57:44,190
So I'm going to set the
font dash size to 12 pixels.
5220
05:57:45,150 --> 05:57:47,820
Save it. I think that
looks pretty good to me.
5221
05:57:49,620 --> 05:57:51,660
Next we're going to
use the property's top,
5222
05:57:51,960 --> 05:57:56,490
bottom left and right to position
this within the relative element.
5223
05:57:57,330 --> 05:58:01,560
So for our cases, let's
start with bottom zero.
5224
05:58:02,070 --> 05:58:05,700
So this means that the bottom of our
tooltip will be at the bottom of the
5225
05:58:05,710 --> 05:58:08,700
button. If I save this,
that's exactly what we have.
5226
05:58:09,240 --> 05:58:13,710
Now to move it even further to the bottom,
we're going to use negative pixels.
5227
05:58:13,800 --> 05:58:17,460
So let's set negative 20. Save it.
5228
05:58:18,660 --> 05:58:20,430
Okay, so I think that's
looking pretty good.
5229
05:58:20,790 --> 05:58:25,440
Let's increase it a little bit more,
increase it to 30 pixels, save it.
5230
05:58:26,010 --> 05:58:27,600
Okay, so I'm happy with that position.
5231
05:58:28,410 --> 05:58:33,240
Now we're going to learn how to make this
tooltip appear when we hover over this
5232
05:58:33,241 --> 05:58:34,073
button.
5233
05:58:35,670 --> 05:58:40,650
So the trick here is we're going to
set the opacity or how see through
5234
05:58:40,660 --> 05:58:44,760
the tooltip is to zero, which
is completely invisible.
5235
05:58:45,390 --> 05:58:49,560
And then when we hover over this button,
we're going to set the opacity to one.
5236
05:58:50,460 --> 05:58:54,060
So how do we actually change this
when we hover over the button?
5237
05:58:54,750 --> 05:58:58,770
So we're actually going to use a
combination of this advanced CSS
5238
05:58:59,680 --> 05:59:02,500
and pseudo classes which are like hover.
5239
05:59:05,440 --> 05:59:09,040
So first we're going to target
the search dash button class,
5240
05:59:10,030 --> 05:59:13,030
and we're going to add a
pseudo class colon hover.
5241
05:59:14,560 --> 05:59:19,330
And now we're going to type
another selector. We're
going to type dot tool tip,
5242
05:59:22,390 --> 05:59:23,740
and we're going to set some styles here.
5243
05:59:24,370 --> 05:59:29,140
So what this does is that we're going
to target the tool tips only when we're
5244
05:59:29,150 --> 05:59:31,150
hovering over this search button.
5245
05:59:31,990 --> 05:59:36,730
So up here notice that we're targeting
the tool tips inside the search button,
5246
05:59:36,740 --> 05:59:40,720
regardless of whether if we're
hovering over it or not. In this case,
5247
05:59:40,750 --> 05:59:43,900
we're going to target all
tooltip inside the search button,
5248
05:59:43,930 --> 05:59:47,410
but only when we hover over
it. So when we hover over it,
5249
05:59:47,950 --> 05:59:49,720
we can set the tooltip opacity
5250
05:59:52,450 --> 05:59:53,283
To one.
5251
05:59:53,920 --> 05:59:57,850
So this is a neat trick that you
can do to create tooltip like this.
5252
05:59:58,510 --> 06:00:03,130
So if we go into our webpage when
I'm not hovering over the button,
5253
06:00:03,430 --> 06:00:07,600
you'll notice that the opacity is zero.
But when I'm hovering over the button,
5254
06:00:07,900 --> 06:00:11,830
this tooltip will have an opacity
of one which looks like this.
5255
06:00:13,630 --> 06:00:16,990
And now because we're changing the
opacity, we can set a transition.
5256
06:00:17,740 --> 06:00:22,720
So let's set a transition. We need
to tell that what to transition,
5257
06:00:22,990 --> 06:00:27,430
which is opacity and how long
the transition will take.
5258
06:00:27,850 --> 06:00:31,510
Let's say 0.15 seconds, save it.
5259
06:00:32,290 --> 06:00:35,620
And when we hover over this,
now we get our tooltip.
5260
06:00:37,360 --> 06:00:40,600
Now the last thing I want to show you
is if we hover over the actual tooltip,
5261
06:00:41,170 --> 06:00:44,680
you'll notice that because
it's inside this button,
5262
06:00:45,700 --> 06:00:47,740
when we hover over the
tooltip with our mouse,
5263
06:00:48,130 --> 06:00:50,890
it also counts as
hovering over the button.
5264
06:00:53,770 --> 06:00:58,690
We can fix this by disabling hovers on
the tooltip and only allow hovers on the
5265
06:00:58,691 --> 06:01:03,210
button. So to disable the
hover on this tooltip,
5266
06:01:03,790 --> 06:01:07,810
we're going to use another
CSS property called pointer
5267
06:01:08,650 --> 06:01:11,230
Events none.
5268
06:01:13,450 --> 06:01:15,640
This means that when our
mouse hovers over the tooltip,
5269
06:01:15,730 --> 06:01:17,050
it's not going to do anything.
5270
06:01:18,550 --> 06:01:21,400
So that's how we create
these tooltip on our webpage.
5271
06:01:21,850 --> 06:01:24,340
Let's do the same thing with
this voice search button.
5272
06:01:24,970 --> 06:01:29,470
We're going to go into our HTML and
we're just going to copy this tool tip
5273
06:01:30,520 --> 06:01:35,200
and just move it down here into the
voice search button, just like that.
5274
06:01:35,890 --> 06:01:39,880
And let's change the text
to search with your voice,
5275
06:01:41,290 --> 06:01:45,100
Save it. And now remember
to position this,
5276
06:01:45,220 --> 06:01:49,090
we're going to have position
absolute inside position relative.
5277
06:01:50,590 --> 06:01:52,840
So let's turn this to
position relative first.
5278
06:01:53,380 --> 06:01:55,030
I'm actually going to
make it easier for us.
5279
06:01:55,690 --> 06:01:58,010
I'm going to first target
the search dash button,
5280
06:02:00,200 --> 06:02:03,170
and I'm going to put this inside here.
5281
06:02:04,610 --> 06:02:07,070
And I'm also going to target with a comma,
5282
06:02:07,850 --> 06:02:10,910
the voice search button. So this one,
5283
06:02:12,480 --> 06:02:14,930
now this code is going to
apply to both of these,
5284
06:02:15,230 --> 06:02:18,710
so it saves us a little bit of
coding. Same thing down here.
5285
06:02:19,220 --> 06:02:21,800
We're going to apply all of these
styles to the search button,
5286
06:02:21,801 --> 06:02:24,260
tooltip and comma,
5287
06:02:25,220 --> 06:02:28,040
the voice search button dot tooltip.
5288
06:02:29,630 --> 06:02:33,560
So using these advanced CSS
selectors can save us a lot of code.
5289
06:02:34,220 --> 06:02:37,880
We're going to scroll down all
the way here to and use a comma
5290
06:02:40,130 --> 06:02:44,060
and set this to the voice
5291
06:02:44,870 --> 06:02:49,790
search button. So make sure you don't
have a comma at the end there. Save it.
5292
06:02:50,480 --> 06:02:51,950
Now when I hover over this,
5293
06:02:52,550 --> 06:02:56,000
you'll notice that it doesn't really
work because the text is sort of wrapping
5294
06:02:56,001 --> 06:02:56,833
around.
5295
06:02:57,500 --> 06:03:02,390
I'm going to fix that by setting
this property white space,
5296
06:03:03,020 --> 06:03:05,750
no wrap, save it.
5297
06:03:06,500 --> 06:03:08,960
And this will prevent the
text from wrapping around.
5298
06:03:10,310 --> 06:03:13,940
Now the last thing I want to do is do
center this tool tip with the button.
5299
06:03:15,590 --> 06:03:16,110
To do this,
5300
06:03:16,111 --> 06:03:20,270
we can use a flex box because remember
with flex box we can center horizontally
5301
06:03:20,271 --> 06:03:23,630
and vertically. In this case,
we want to center horizontally.
5302
06:03:24,680 --> 06:03:28,250
So we're going to make we're scroll up
and we're going to make these buttons
5303
06:03:28,280 --> 06:03:29,180
flex boxes.
5304
06:03:29,960 --> 06:03:34,910
So let's set display flex. By default,
5305
06:03:34,911 --> 06:03:36,560
it's flex direction row.
5306
06:03:36,980 --> 06:03:40,430
So justify content is going
to center horizontally.
5307
06:03:41,090 --> 06:03:44,540
So justify content center, save it.
5308
06:03:45,710 --> 06:03:47,750
So now if we hover over our buttons,
5309
06:03:47,900 --> 06:03:50,810
you'll notice that the tooltip
are aligned horizontally,
5310
06:03:51,680 --> 06:03:56,330
but you also notice that our icons are
not vertically aligned very well. So
5311
06:03:56,331 --> 06:04:00,260
let's go back into our code and we're
going to align them in the center with
5312
06:04:01,010 --> 06:04:05,930
align dash items center, save it.
5313
06:04:06,560 --> 06:04:11,120
So that didn't seem to work, but
if we scroll down into our code,
5314
06:04:12,260 --> 06:04:13,640
so way earlier in the course,
5315
06:04:13,650 --> 06:04:18,620
we actually added margin top
to the search icon as well as
5316
06:04:18,890 --> 06:04:20,090
the voice search icon.
5317
06:04:20,840 --> 06:04:25,700
So we just need to get rid of this margin
top and let the flex box handle the
5318
06:04:25,701 --> 06:04:28,400
vertical centering. So if we save that,
5319
06:04:28,970 --> 06:04:32,570
now the icons are perfectly
centered and if we hover over,
5320
06:04:32,571 --> 06:04:34,040
we have a centered tooltip.
5321
06:04:35,810 --> 06:04:38,330
The tooltips for these
icons are the same thing,
5322
06:04:38,990 --> 06:04:42,650
except if we scroll down, we
currently just have an image.
5323
06:04:43,070 --> 06:04:47,070
We're going to need a container like
this that's going to act as our position
5324
06:04:47,430 --> 06:04:50,090
relative container. So
let's create a diviv
5325
06:04:51,650 --> 06:04:53,660
that's going to contain our upload icon.
5326
06:04:54,410 --> 06:04:57,270
Let's cut this and then paste it in here.
5327
06:04:58,530 --> 06:05:02,940
Let's give a class of upload dash
5328
06:05:02,970 --> 06:05:04,680
icon dash container.
5329
06:05:07,080 --> 06:05:10,230
And then inside this container
we're going to have our tool tip.
5330
06:05:10,560 --> 06:05:14,310
So let's copy this and
then paste it in here.
5331
06:05:15,750 --> 06:05:20,610
And let's call this, let's
look at our design create.
5332
06:05:23,400 --> 06:05:26,400
So our tooltip is going
to have the text create.
5333
06:05:29,850 --> 06:05:30,220
Next.
5334
06:05:30,221 --> 06:05:34,320
We're going to change this to position
relative and position absolute inside.
5335
06:05:34,950 --> 06:05:35,880
So let's scroll up.
5336
06:05:36,440 --> 06:05:41,370
And we already have this code here that
sets to position relative and centers
5337
06:05:41,371 --> 06:05:45,420
everything. And we're going to
add to this the upload icon,
5338
06:05:45,421 --> 06:05:49,770
container dot upload,
dash icon, dash container,
5339
06:05:51,150 --> 06:05:51,983
save it.
5340
06:05:53,790 --> 06:05:57,780
And then we need a position
absolute on this tool tip. So again,
5341
06:05:57,781 --> 06:06:02,160
we can just add it in here so we don't
have to copy all this code again with a
5342
06:06:02,161 --> 06:06:06,870
comma dot upload dash
icon, dash container,
5343
06:06:09,260 --> 06:06:12,960
tooltip save it.
5344
06:06:13,830 --> 06:06:17,250
And lastly, we're going to
scroll down and add it to here.
5345
06:06:17,251 --> 06:06:18,870
So that appears when we hover.
5346
06:06:21,000 --> 06:06:24,510
So let's set dot upload dash icon,
5347
06:06:24,511 --> 06:06:29,250
container and dot. When we hover over it,
5348
06:06:29,910 --> 06:06:33,450
the tooltip is going
to have opacity of one.
5349
06:06:34,290 --> 06:06:38,670
Let's save it and hover over. All
right, so that looks pretty good,
5350
06:06:39,750 --> 06:06:41,460
but let's change the font here.
5351
06:06:42,270 --> 06:06:46,740
So let's go into this code
which sets our tooltip
5352
06:06:46,741 --> 06:06:47,460
styles,
5353
06:06:47,461 --> 06:06:52,050
and let's set the font dash family to reto
5354
06:06:53,550 --> 06:06:57,930
aerial. Like before. If we
save it and we hover over it,
5355
06:06:58,230 --> 06:07:00,990
now we have a nice looking
tooltip on our icons.
5356
06:07:01,950 --> 06:07:03,510
So that's how we create these tooltip.
5357
06:07:03,511 --> 06:07:05,910
When we hover over these
icons and these buttons,
5358
06:07:06,330 --> 06:07:09,270
creating tooltip for these two
other icons are the same thing,
5359
06:07:09,600 --> 06:07:12,600
and I'm going to leave it as an
exercise for you to do on your own.
5360
06:07:14,010 --> 06:07:16,380
So in this lesson, we
finished up our final project.
5361
06:07:16,440 --> 06:07:20,400
We created the sidebar resize,
our videos created the tooltip,
5362
06:07:20,760 --> 06:07:22,500
and now if we compare it to our design,
5363
06:07:22,890 --> 06:07:26,130
our project looks pretty
much perfect and ready to go.
5364
06:07:29,580 --> 06:07:33,480
So here's some exercises you can try on
your own to wrap up everything that we
5365
06:07:33,481 --> 06:07:34,590
learned in this course.
5366
06:07:49,470 --> 06:07:52,830
In the previous lesson, we finished
our final project, which is this.
5367
06:07:53,440 --> 06:07:56,920
In this lesson I'm going to show you
some more useful features of c s s.
5368
06:07:57,610 --> 06:07:59,890
We're going to start off
with responsive design.
5369
06:08:00,790 --> 06:08:02,740
If we go to our reference design here,
5370
06:08:03,760 --> 06:08:08,290
and I'm going to zoom out a little
bit so you can see if I make the page
5371
06:08:08,291 --> 06:08:12,130
smaller, you'll notice that we
now have two videos in each row.
5372
06:08:12,790 --> 06:08:16,330
If I make the page bigger,
we have four videos.
5373
06:08:16,870 --> 06:08:18,880
So notice that at every screen size,
5374
06:08:19,360 --> 06:08:22,180
the layout adjusts so that
the website looks good.
5375
06:08:22,540 --> 06:08:24,820
So that's the idea of responsive design,
5376
06:08:24,970 --> 06:08:29,830
making the website look as good as
possible on every screen size. Now,
5377
06:08:29,831 --> 06:08:34,810
if we make this a little bit more narrow
and we switch to our current project,
5378
06:08:35,350 --> 06:08:38,020
you'll notice that all of our
content is sort of squished.
5379
06:08:38,410 --> 06:08:42,400
So we're going to learn how to implement
responsive design into our project.
5380
06:08:43,900 --> 06:08:48,520
Let's go into our code and
we're going to open the file
5381
06:08:48,910 --> 06:08:52,960
called video dot css, which
controls the video grid styles.
5382
06:08:53,650 --> 06:08:54,483
Let's open that.
5383
06:08:56,590 --> 06:09:01,360
And now inside we're going to adjust
our video grid so that when the screen
5384
06:09:01,361 --> 06:09:06,340
size is small, we only have two videos
per row. And when the screen size is big,
5385
06:09:06,550 --> 06:09:08,710
we have more than three videos per row.
5386
06:09:10,090 --> 06:09:14,950
So let's go into our code and we're
going to scroll down and find the video
5387
06:09:14,951 --> 06:09:17,980
grid styles. So notice
that for these styles,
5388
06:09:17,981 --> 06:09:21,160
we set three columns of equal size.
5389
06:09:22,210 --> 06:09:26,320
Now to make this responsive, we're going
to use something called a media query.
5390
06:09:27,670 --> 06:09:31,480
So to create a media query,
we're going to type at media,
5391
06:09:32,500 --> 06:09:34,330
and then we're going to
give it a screen size.
5392
06:09:34,810 --> 06:09:39,760
So we're going to say max dash with colon,
5393
06:09:40,450 --> 06:09:42,280
maybe 600 pixels.
5394
06:09:43,630 --> 06:09:46,150
And then we're going to
type open squiggly bracket,
5395
06:09:46,151 --> 06:09:47,560
and then close quickly bracket.
5396
06:09:48,760 --> 06:09:51,970
So the way this works is that we're
going to have a bunch of CSS in here,
5397
06:09:52,570 --> 06:09:57,370
and this CSS will only activate
if the screen size is 600
5398
06:09:57,371 --> 06:10:02,170
pixels or less. That's what this
max width means. So for example,
5399
06:10:02,770 --> 06:10:06,640
let's target the video
grid class inside here
5400
06:10:08,050 --> 06:10:11,680
and let's set the grid dash template,
5401
06:10:12,100 --> 06:10:15,790
dash columns to one fr, one Fr.
5402
06:10:16,560 --> 06:10:20,650
That means from a screen
size of zero to 600 pixels,
5403
06:10:21,010 --> 06:10:22,960
we're only going to have two columns.
5404
06:10:23,470 --> 06:10:26,920
So we save it and we start to resize.
5405
06:10:27,520 --> 06:10:32,170
Notice that once we get to 600 pixels,
we now have two columns in our grid.
5406
06:10:33,700 --> 06:10:35,710
Now to figure out how
big our screen size is,
5407
06:10:36,070 --> 06:10:38,950
we can right click and inspect,
5408
06:10:40,300 --> 06:10:43,930
and I'm going to click these three dots
and move it back down to the bottom like
5409
06:10:43,940 --> 06:10:46,510
this. And now when we resize,
5410
06:10:46,520 --> 06:10:49,630
you should see the screen size
at the top right of the page.
5411
06:10:52,280 --> 06:10:56,270
So it's really up to us to pick a screen
size where we're going to go from three
5412
06:10:56,271 --> 06:10:57,170
columns to two.
5413
06:10:57,890 --> 06:11:01,310
So I think even at this screen size,
5414
06:11:02,120 --> 06:11:06,830
maybe at seven 50, it looks
a little bit squished.
5415
06:11:06,860 --> 06:11:11,090
So I'm going to increase
this to 750 pixels.
5416
06:11:12,200 --> 06:11:15,470
Let's save it. And now
once we get to seven 50,
5417
06:11:16,460 --> 06:11:20,930
we're going to have two videos in each
row and it's not going to be as squished
5418
06:11:20,931 --> 06:11:21,763
anymore.
5419
06:11:22,310 --> 06:11:26,360
So that's the basics of how to create
responsive designs using these media
5420
06:11:26,361 --> 06:11:29,630
queries. Let's do another example.
5421
06:11:30,110 --> 06:11:34,100
We're going to have four videos per row
when our screen size gets really big.
5422
06:11:34,760 --> 06:11:38,450
So let's set another at media. At media.
5423
06:11:39,470 --> 06:11:44,150
And for this time we're going
to set a minimum width of
5424
06:11:44,151 --> 06:11:46,190
maybe a thousand pixels.
5425
06:11:48,440 --> 06:11:52,430
And then inside here we're going
to copy this and paste it here.
5426
06:11:53,240 --> 06:11:57,710
We're going to change grid template
columns to four columns. So one f fr,
5427
06:11:57,800 --> 06:11:58,633
one fr.
5428
06:11:59,360 --> 06:12:04,220
Now if we save it and we
resize the browser to 1000
5429
06:12:04,230 --> 06:12:07,460
pixels, it's going to
become four videos per row.
5430
06:12:08,240 --> 06:12:13,010
Now you might need to press command or
control minus to make the webpage smaller
5431
06:12:13,011 --> 06:12:13,843
to see this,
5432
06:12:14,440 --> 06:12:18,980
but basically the way this works is that
once the screen size hits a thousand
5433
06:12:18,990 --> 06:12:23,870
pixels, this will activate and we
have four columns instead of three.
5434
06:12:26,420 --> 06:12:29,000
So the last example is that we
can actually combine these two,
5435
06:12:29,390 --> 06:12:34,220
so we can set at media and we can set the
5436
06:12:34,250 --> 06:12:38,450
min dash width to 7 51 pixels
5437
06:12:39,380 --> 06:12:43,970
and the max dash width to
5438
06:12:44,120 --> 06:12:45,470
9 99 pixels.
5439
06:12:47,030 --> 06:12:51,350
So this will cover the space
between these two measurements here.
5440
06:12:51,830 --> 06:12:53,330
So let's actually put this in the middle.
5441
06:12:56,720 --> 06:13:01,040
So from zero pixels to a max of seven
50, we're going to have these styles.
5442
06:13:01,760 --> 06:13:04,280
And then from 7 51 to 9 99,
5443
06:13:04,760 --> 06:13:09,440
we're going to have these styles. So
we're going to set this to three columns,
5444
06:13:10,700 --> 06:13:14,660
and then from a thousand and up,
we're going to have four columns.
5445
06:13:15,650 --> 06:13:20,420
So this is the basics of how to
create a responsive design like this.
5446
06:13:20,840 --> 06:13:25,730
You just have to write a lot
of media queries. All right,
5447
06:13:25,731 --> 06:13:27,800
so that's the basics of responsive design.
5448
06:13:28,430 --> 06:13:30,830
We're going to go back to our webpages.
5449
06:13:31,310 --> 06:13:35,300
I'm just going to zoom back in and
we'll learn the next feature of css.
5450
06:13:36,380 --> 06:13:39,260
So let's go to our project
here and open our code.
5451
06:13:40,280 --> 06:13:43,940
And let's scroll down to
this dial the video time.
5452
06:13:45,170 --> 06:13:48,950
So the next feature we're going to
learn is sort of like CSS shortcuts.
5453
06:13:49,800 --> 06:13:51,840
So instead of setting padding on the left,
5454
06:13:51,900 --> 06:13:54,420
right top and bottom separately like this,
5455
06:13:54,870 --> 06:13:57,750
we can actually use a
property called padding,
5456
06:13:58,620 --> 06:14:01,590
which is sort of like a
shortcut for all four of these.
5457
06:14:02,280 --> 06:14:04,410
So if we set the padding to four pixels,
5458
06:14:05,130 --> 06:14:08,010
this is the same as setting
padding on all four sides.
5459
06:14:08,190 --> 06:14:10,170
So we don't need this code anymore.
5460
06:14:11,370 --> 06:14:15,360
So it makes it a little cleaner for our
code to use these shorthand properties.
5461
06:14:16,200 --> 06:14:19,440
So another thing we can do with
this is we can have two values,
5462
06:14:19,980 --> 06:14:23,640
let's say four pixels
and 10 pixels. Save it.
5463
06:14:24,180 --> 06:14:28,050
So this first value is going to be
the vertical padding. So padding top,
5464
06:14:28,200 --> 06:14:32,700
padding bottom, and the second value
is horizontal padding, padding,
5465
06:14:32,701 --> 06:14:34,380
left and padding right?
5466
06:14:36,600 --> 06:14:39,060
The next thing we can do
is have four directions.
5467
06:14:39,510 --> 06:14:43,230
So 20 pixels and 30 pixels.
Let's see how that looks.
5468
06:14:45,750 --> 06:14:50,490
So this is how we can set padding in all
four directions using one line of css.
5469
06:14:51,060 --> 06:14:55,380
This first value is the padding top
second value is the padding, right?
5470
06:14:55,890 --> 06:14:59,190
Third value is padding bottom,
and fourth is padding left.
5471
06:14:59,640 --> 06:15:04,110
You can think of this as first you start
from the top and then you work your way
5472
06:15:04,140 --> 06:15:08,040
clockwise around. So that's
what these four values mean.
5473
06:15:09,570 --> 06:15:12,030
Another shorthand property is margin,
5474
06:15:13,110 --> 06:15:17,790
and this is a substitute
for margin, left margin,
5475
06:15:18,150 --> 06:15:20,670
right margin top and margin bottom.
5476
06:15:21,540 --> 06:15:24,990
So this margin shorthand property
works the same way as padding.
5477
06:15:25,530 --> 06:15:30,240
If we have one value, this is all four
directions. If we have two values,
5478
06:15:30,690 --> 06:15:35,040
this first value is the
vertical direction. Second
is a horizontal direction,
5479
06:15:36,090 --> 06:15:37,950
and if we have four values of margin,
5480
06:15:38,910 --> 06:15:42,060
this is the top right bottom and left.
5481
06:15:43,650 --> 06:15:45,120
So these are just examples.
5482
06:15:45,180 --> 06:15:49,560
We're going to move our styles back to
four pixels of padding on every side,
5483
06:15:51,630 --> 06:15:55,290
and we're going to look at one final
shorthand property, which is the border.
5484
06:15:56,010 --> 06:16:00,810
So let's go into our header CSS file
and find these styles for this search
5485
06:16:00,811 --> 06:16:05,490
bar. So we're going to scroll
up until we find our search bar,
5486
06:16:05,491 --> 06:16:09,360
which is here. And notice for our
borders, we always set a width,
5487
06:16:09,870 --> 06:16:12,330
a border style, and a border color.
5488
06:16:13,830 --> 06:16:15,630
So instead of setting
these styles separately,
5489
06:16:15,900 --> 06:16:20,040
we can use a shorthand
called border. So for border,
5490
06:16:20,100 --> 06:16:23,190
we can set one pixel. This
is going to be the width.
5491
06:16:23,760 --> 06:16:27,690
We can set another value of solid.
This is going to be the border style,
5492
06:16:28,140 --> 06:16:31,050
and we can set the third value of color.
5493
06:16:34,530 --> 06:16:37,680
And so this one line of CSS
can replace these three.
5494
06:16:38,640 --> 06:16:40,530
If we delete that, then we save.
5495
06:16:41,190 --> 06:16:43,230
You can see that everything
still appears normally,
5496
06:16:43,350 --> 06:16:46,890
and that's because this border property
is a shorthand for the other three.
5497
06:16:49,120 --> 06:16:51,550
The next thing we're going to
learn is called inheritance.
5498
06:16:52,330 --> 06:16:57,100
Let's go to our YouTube dot HTML
file and we're going to scroll
5499
06:16:57,110 --> 06:17:01,840
down to the video grid,
which is right here.
5500
06:17:03,370 --> 06:17:06,370
So inheritance means that
for certain CSS properties,
5501
06:17:06,850 --> 06:17:09,550
if we set the property
on the outer element,
5502
06:17:09,940 --> 06:17:14,800
it will get passed down to the inner
elements like these. Let's do an example.
5503
06:17:14,830 --> 06:17:17,170
We're going to set a
property on the video grid.
5504
06:17:18,100 --> 06:17:20,260
We're going to go to the video CSS file,
5505
06:17:21,430 --> 06:17:26,020
and we're going to find the video
grid styles, which is all of these.
5506
06:17:26,560 --> 06:17:28,660
We're going to set it on this style here.
5507
06:17:28,670 --> 06:17:33,250
So we're going to set it for all
screen sizes. Let's add a style.
5508
06:17:33,280 --> 06:17:37,390
We're going to make the
text underlined. To do that,
5509
06:17:37,400 --> 06:17:41,710
we're going to use this
property text dash decoration
5510
06:17:43,570 --> 06:17:47,110
underline. Now if I save this,
5511
06:17:47,920 --> 06:17:52,840
you'll see that even though I set text
decoration, underline on the video grid,
5512
06:17:53,440 --> 06:17:56,440
all of the paragraphs
inside have been underlined.
5513
06:17:57,220 --> 06:17:59,080
So this is called inheritance.
5514
06:17:59,530 --> 06:18:03,940
If we set this style on the outer
element, which is the video grid,
5515
06:18:04,510 --> 06:18:07,150
it gets passed down to
all the inner elements,
5516
06:18:07,210 --> 06:18:12,100
which are the paragraphs here. However,
5517
06:18:12,110 --> 06:18:16,060
not all properties are affected
by inheritance. For example,
5518
06:18:16,061 --> 06:18:18,340
if we go back to the video CSS file,
5519
06:18:19,330 --> 06:18:21,490
and we're going to add a border this time.
5520
06:18:22,210 --> 06:18:27,070
So let's add a border and we're
going to make it two pixels wide,
5521
06:18:28,330 --> 06:18:32,290
a solid color, and let's just make it red.
5522
06:18:33,910 --> 06:18:38,530
And if I save that, you'll see that
the video grid has a border around it,
5523
06:18:39,010 --> 06:18:42,580
but this border is not passed
down to the inner elements here.
5524
06:18:44,230 --> 06:18:48,910
So inheritance mostly just works with
text properties like text decoration,
5525
06:18:48,940 --> 06:18:52,630
underlying color, font,
weight, and font family.
5526
06:18:53,080 --> 06:18:56,590
It doesn't affect things like
border padding or margin,
5527
06:18:58,360 --> 06:19:01,060
so that's what inheritance
means. Certain properties,
5528
06:19:01,120 --> 06:19:05,890
mostly text properties will get passed
down from the outer element to the
5529
06:19:05,891 --> 06:19:10,600
inner elements. Now, this can
save us some code. For example,
5530
06:19:10,630 --> 06:19:15,310
if we go back to the video dot
CSS file and we scroll down,
5531
06:19:16,000 --> 06:19:20,530
you can see that the video time uses a
style called font family reto aerial.
5532
06:19:20,980 --> 06:19:23,140
So this changes the font of our text,
5533
06:19:24,700 --> 06:19:26,560
and instead of putting
it on the video time,
5534
06:19:26,890 --> 06:19:29,020
we're just going to put
it on the entire grid,
5535
06:19:29,380 --> 06:19:32,260
and then it will get inherited
by all the elements inside,
5536
06:19:32,320 --> 06:19:33,610
which includes the video time.
5537
06:19:34,330 --> 06:19:39,160
So I can scroll up to the video
grid and I can set the font
5538
06:19:39,490 --> 06:19:44,020
dash family up here so I can set Roto
5539
06:19:45,380 --> 06:19:49,460
Ariel. If I save this,
5540
06:19:49,790 --> 06:19:54,470
you'll see that nothing changed with
the video time because this style is
5541
06:19:54,480 --> 06:19:58,730
being inherited from the video grid. Now,
5542
06:19:58,731 --> 06:20:03,020
we can actually take this even further.
If we go to the YouTube dot html file,
5543
06:20:03,980 --> 06:20:08,930
you'll see that this video grid is
actually contained within the entire
5544
06:20:09,740 --> 06:20:14,660
body. So all of our elements on the
page are contained within the body.
5545
06:20:15,110 --> 06:20:19,880
So if we want to set a sort of
default textile on the entire page,
5546
06:20:20,360 --> 06:20:24,260
we can actually just put everything in
the body and that'll save us a lot of
5547
06:20:24,261 --> 06:20:28,220
code. So let's actually go
back to the video CSS file.
5548
06:20:29,960 --> 06:20:33,950
We're going to remove this and save it.
5549
06:20:35,210 --> 06:20:38,540
You'll see that the video time
now goes back to the default font,
5550
06:20:38,570 --> 06:20:39,710
which is times New Roman,
5551
06:20:40,490 --> 06:20:44,630
and these paragraphs actually
use a different set of styles.
5552
06:20:45,050 --> 06:20:48,560
So if we go to the file
called General css,
5553
06:20:50,030 --> 06:20:54,650
we set the font family for
these paragraphs using just a p
5554
06:20:54,710 --> 06:20:57,860
selector here. If we remove this
5555
06:20:59,420 --> 06:21:00,253
and save it,
5556
06:21:00,560 --> 06:21:03,500
you'll see that it goes back to the
default font of times new enrollment.
5557
06:21:04,580 --> 06:21:08,360
Now we're going to set this style on
the body so that it gets inherited
5558
06:21:09,440 --> 06:21:11,900
to the entire webpage inside.
5559
06:21:12,980 --> 06:21:17,060
So we'll go to General
css and we're going to set
5560
06:21:17,840 --> 06:21:21,840
font dash family to Reto
5561
06:21:23,510 --> 06:21:27,620
aerial to take advantage of
inheritance. If I save this,
5562
06:21:29,090 --> 06:21:32,640
you'll see that all of the
fonts went back to robo,
5563
06:21:32,990 --> 06:21:37,190
and that's because we set it on the body
and all of our elements are inside the
5564
06:21:37,191 --> 06:21:41,480
body. So this style gets
inherited to the inner elements.
5565
06:21:42,950 --> 06:21:43,670
So using this,
5566
06:21:43,671 --> 06:21:48,290
we can save more code if we go
to our sidebar and our header.
5567
06:21:48,770 --> 06:21:50,210
If I go to the sidebar first,
5568
06:21:51,080 --> 06:21:54,290
you'll notice that we're also
using font family roboto aerial.
5569
06:21:54,890 --> 06:21:59,750
So we can simply get rid of this because
this style is being inherited from the
5570
06:21:59,751 --> 06:22:00,583
body.
5571
06:22:02,450 --> 06:22:04,910
And if I go to the header dot css,
5572
06:22:06,770 --> 06:22:11,270
you'll notice that we're also using Fond
family Reto AO in a bunch of places.
5573
06:22:11,780 --> 06:22:16,010
So we can just get rid of all
of these and take advantage of
5574
06:22:16,011 --> 06:22:18,230
inheritance to save us some code.
5575
06:22:25,640 --> 06:22:28,700
All right, so there's one last thing
about inheritance that I want to show you.
5576
06:22:29,630 --> 06:22:33,770
We're going to go back to our video
CSS file, which is right here.
5577
06:22:35,510 --> 06:22:39,140
And now let's get rid of these
properties that we are using to test with
5578
06:22:41,210 --> 06:22:45,270
Save it. This time we're
going to go to General css.
5579
06:22:45,330 --> 06:22:47,310
We're going to set
another style in the body,
5580
06:22:48,000 --> 06:22:52,680
and we're going to set
the property color red to
5581
06:22:52,690 --> 06:22:56,790
change the text color of the
entire page to red. If I save it,
5582
06:22:58,020 --> 06:23:00,150
you'll see that a lot
of the text is now red,
5583
06:23:00,240 --> 06:23:02,400
like these sidebar and the video titles,
5584
06:23:02,730 --> 06:23:06,720
but not all of the text has been turned
to red. So why is this happening?
5585
06:23:08,160 --> 06:23:10,110
We mentioned this in one
of our earlier lessons.
5586
06:23:10,440 --> 06:23:15,030
CSS follows a sort of priority when
you set the same style on the same
5587
06:23:15,031 --> 06:23:15,863
element.
5588
06:23:16,110 --> 06:23:20,280
So for these video author
and video stats paragraphs,
5589
06:23:21,120 --> 06:23:25,050
first we set a color of red from the
body, so that gets inherited down.
5590
06:23:25,740 --> 06:23:30,600
But then if we look at the
CSS for these in video CSS and
5591
06:23:30,610 --> 06:23:34,380
go into the video author,
which is right here,
5592
06:23:35,520 --> 06:23:40,470
you can see that we also set the
color to this gray color. So the
5593
06:23:40,471 --> 06:23:45,330
color is being set both by these styles
and by these styles that are inherited
5594
06:23:45,331 --> 06:23:47,220
from the body. However,
5595
06:23:47,230 --> 06:23:51,960
this style is more specific because it
only targets the video author and the
5596
06:23:51,961 --> 06:23:56,550
video stats while the style in
the body targets the entire page.
5597
06:23:57,120 --> 06:24:01,950
So that's why this style has higher
priority than the inherited style.
5598
06:24:03,210 --> 06:24:06,720
This is called CSS specificity. Generally,
5599
06:24:06,730 --> 06:24:10,740
if we set these same style on the same
elements like we have in this situation,
5600
06:24:11,250 --> 06:24:13,770
the style that is more
specific, for example,
5601
06:24:14,130 --> 06:24:17,310
this style targets only the
video author and video stats,
5602
06:24:17,820 --> 06:24:20,490
the style that is more
specific has higher priority,
5603
06:24:20,910 --> 06:24:25,590
and it will override a more general
style, which is what we have here.
5604
06:24:26,640 --> 06:24:29,240
So using inheritance and specificity,
5605
06:24:29,550 --> 06:24:32,910
we're able to both set a default
style on the outer element,
5606
06:24:33,270 --> 06:24:34,260
and then if we need to,
5607
06:24:34,290 --> 06:24:37,830
we can go to the inner element
and then override that style.
5608
06:24:38,760 --> 06:24:39,540
Now in this course,
5609
06:24:39,541 --> 06:24:42,930
we didn't go through a lot of detail
about specificity and its rules,
5610
06:24:43,290 --> 06:24:46,500
and that's because we were mostly
focused on building out this project,
5611
06:24:47,070 --> 06:24:51,930
but you can find all the details about
specificity in the HTML and CSS reference
5612
06:24:51,960 --> 06:24:54,600
below the video. For now,
5613
06:24:54,601 --> 06:24:59,460
let's go back into general
CSS and let's get rid of this
5614
06:24:59,700 --> 06:25:04,020
practice style that we were using,
and now we're ready to move on.
5615
06:25:06,030 --> 06:25:08,460
Next, we're going to learn
about semantic elements.
5616
06:25:08,910 --> 06:25:12,000
If we go back to our
YouTube dot html file,
5617
06:25:14,070 --> 06:25:17,280
so we learned about a bunch of
elements like the diviv, the image,
5618
06:25:17,281 --> 06:25:21,840
and the button. There's also another set
of elements called semantic elements.
5619
06:25:22,530 --> 06:25:25,530
So for example, header
is a semantic element,
5620
06:25:26,490 --> 06:25:29,220
and another example is the nav element.
5621
06:25:30,330 --> 06:25:33,390
So these elements actually
work the same way as a diviv,
5622
06:25:33,540 --> 06:25:37,320
except they have a special meaning
to screen readers, search engines,
5623
06:25:37,710 --> 06:25:41,380
and any other kind of device or
robot that is reading our webpage.
5624
06:25:42,130 --> 06:25:46,270
So to have the structure of our webpage
recognized correctly in a screen reader,
5625
06:25:46,720 --> 06:25:49,990
we should actually replace some of
our divs with semantic elements.
5626
06:25:51,100 --> 06:25:55,330
So for example, we can remove this
diviv and replace it with a header.
5627
06:25:56,290 --> 06:26:00,400
So it works the same way as a
diviv, except it's for the robots.
5628
06:26:01,030 --> 06:26:04,360
So let's scroll down. We're
going to turn this into a header,
5629
06:26:07,060 --> 06:26:09,400
and then we can also
scroll down to our sidebar,
5630
06:26:10,120 --> 06:26:14,050
and we're going to change
this to a nav element because
5631
06:26:15,040 --> 06:26:19,900
the sidebar on the real YouTube should
help us navigate through the website.
5632
06:26:22,480 --> 06:26:26,110
Another semantic element
we can use is called main.
5633
06:26:26,950 --> 06:26:29,950
So this should contain the
main contents of your website,
5634
06:26:30,460 --> 06:26:32,230
which for us is this part.
5635
06:26:33,520 --> 06:26:38,200
We're going to move everything inside here
To the main
5636
06:26:38,201 --> 06:26:41,110
element. So I think it's this
5637
06:26:43,240 --> 06:26:47,440
I might be missing. Okay, so
move all of that into Maine,
5638
06:26:48,790 --> 06:26:52,930
and let's scroll back up. Now,
5639
06:26:52,931 --> 06:26:56,050
inside Maine, we're going
to have a video grid,
5640
06:26:56,470 --> 06:26:59,680
but we might also have other
things below the video grid.
5641
06:27:00,190 --> 06:27:04,570
So the video grid is known as
a section of our main content.
5642
06:27:05,950 --> 06:27:10,600
Let's save that and scroll all the
way down to the end of our video grid
5643
06:27:10,870 --> 06:27:12,400
and remove this with section.
5644
06:27:15,490 --> 06:27:19,030
So that's how Symantec elements
work. They're just the same as divs,
5645
06:27:19,060 --> 06:27:23,500
except they give a special meaning and
structure to our page for search engines
5646
06:27:23,501 --> 06:27:26,920
and screen readers. Now,
5647
06:27:26,921 --> 06:27:30,340
the final thing I want to show you in
this course is how to write comments.
5648
06:27:31,360 --> 06:27:34,540
So comments are pieces of code
that the computer ignores,
5649
06:27:34,900 --> 06:27:39,190
but you can read yourself to remind
you of information or to tell yourself
5650
06:27:39,191 --> 06:27:42,130
what's going on in the
code. So for example,
5651
06:27:42,280 --> 06:27:44,290
if we scroll up to our header,
5652
06:27:44,940 --> 06:27:47,890
maybe I forgot how we
created this tool tip.
5653
06:27:48,310 --> 06:27:51,790
So we can actually add a comment
in the code that reminds us.
5654
06:27:52,420 --> 06:27:53,830
So let's add a comment here.
5655
06:27:54,100 --> 06:27:57,970
We're going to type less
than exclamation dash, dash,
5656
06:27:58,510 --> 06:28:01,690
and we're going to end the comment
with dash greater than like this.
5657
06:28:02,650 --> 06:28:06,820
So this is a comment.
If I save the webpage,
5658
06:28:07,240 --> 06:28:10,030
you'll see that this text
appears nowhere on the webpage,
5659
06:28:10,360 --> 06:28:13,180
and that's because the computer
basically ignores comments.
5660
06:28:15,670 --> 06:28:18,550
So we can add comments like put position,
5661
06:28:19,950 --> 06:28:24,850
absolute inside position
relative to remind us that we
5662
06:28:24,851 --> 06:28:29,800
need to put a position absolute inside
a position relative to create this
5663
06:28:29,801 --> 06:28:33,670
tool tip in css. We also have comments.
5664
06:28:33,790 --> 06:28:35,920
So for example, if we go here,
5665
06:28:36,760 --> 06:28:41,480
we can write a comment by writing
slash star and ending it with
5666
06:28:41,481 --> 06:28:45,230
star slash. Now, everything
in between here is a comment.
5667
06:28:45,740 --> 06:28:50,510
So we can say this style below will be
5668
06:28:51,080 --> 06:28:54,590
inherited. So as you can see comments,
5669
06:28:54,591 --> 06:28:59,150
add extra information into our
code without affecting our webpage.
5670
06:28:59,720 --> 06:29:03,500
So it's a really useful tool when you're
working on a team to document how your
5671
06:29:03,501 --> 06:29:08,390
code works. And now, for everything
in this course, if you ever forget,
5672
06:29:08,720 --> 06:29:12,560
remember that you can always Google
it. For example, if I go to Google,
5673
06:29:12,620 --> 06:29:16,520
I can search things like
CSS rounded corners,
5674
06:29:17,200 --> 06:29:21,460
and it will give us the
border radius property.
5675
06:29:23,540 --> 06:29:28,250
I can also search for something
like css, text Don't wrap,
5676
06:29:29,540 --> 06:29:34,460
and it will give us the white
space property and the valley white
5677
06:29:34,461 --> 06:29:39,080
space, no wrap. So this is
how you learn from here.
5678
06:29:39,500 --> 06:29:41,750
You take the techniques that
we learn in this course,
5679
06:29:41,960 --> 06:29:46,430
such as the [inaudible] technique,
using grid, flexbox and position,
5680
06:29:47,540 --> 06:29:50,390
and then you try to recreate things
that you see on the internet.
5681
06:29:50,720 --> 06:29:54,620
And if you ever forget, you can Google
and get the exact code that you need.
5682
06:29:57,590 --> 06:30:00,860
So now that we learned all the major
skills that we need to build complex
5683
06:30:00,861 --> 06:30:02,090
websites like YouTube,
5684
06:30:02,660 --> 06:30:06,140
here are some challenge exercises that
you can do to create other popular
5685
06:30:06,150 --> 06:30:07,250
websites on your own.
5686
06:30:21,560 --> 06:30:23,480
Thanks so much for taking
this course with me.
5687
06:30:23,900 --> 06:30:27,620
I hope you now realize that creating
websites is not as intimidating as it
5688
06:30:27,621 --> 06:30:28,453
seems.
5689
06:30:28,460 --> 06:30:32,870
We just need to create each part of the
website step by step using the major
5690
06:30:32,871 --> 06:30:36,980
features of HTML and CSS that
we learned in this course. Now,
5691
06:30:36,981 --> 06:30:39,560
where do we go from here as the next step?
5692
06:30:39,570 --> 06:30:42,590
I recommend learning the
JavaScript programming language.
5693
06:30:43,220 --> 06:30:46,820
JavaScript is what makes our
webpage interactive. For example,
5694
06:30:46,821 --> 06:30:50,930
if we click something, type some
text or drag something onto the page,
5695
06:30:51,260 --> 06:30:53,510
JavaScript is what updates our page.
5696
06:30:54,170 --> 06:30:58,100
So it's a natural progression
from HTML and css. Now,
5697
06:30:58,110 --> 06:30:59,300
if you want to learn JavaScript,
5698
06:30:59,360 --> 06:31:03,410
I have a full JavaScript course for
absolute beginners that you can find by
5699
06:31:03,411 --> 06:31:06,590
clicking on this link. Again,
thanks so much. For watching.
5700
06:31:06,620 --> 06:31:08,840
My name is Simon from Super simple.dev.
5701
06:31:09,170 --> 06:31:12,680
I want to make a tech career possible
for anyone. If you have any comments,
5702
06:31:13,080 --> 06:31:16,520
questions, or feedback, please leave
them down in the comments section below.
5703
06:31:16,790 --> 06:31:19,790
If you want to support this channel
and you want more courses like this,
5704
06:31:20,060 --> 06:31:23,660
please click the subscribe button. Thanks
so much, and I'll see you in the next.
511429
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.