All language subtitles for [English] Introduction To Responsive Web Design - HTML & CSS Tutorial [DownSub]

building websites used to be simple, we had
a single design, we had to make the site look

exactly like that design. And then we were
done. Now there's some problems with that

browsers used to render things differently.
But at the end of the day, we just had this

one layout to do, it was completely static,
we just had to recreate what probably a Photoshop

document that we were given look like. And
that was it. Now we have to take design, and

we have to make it work on every device from
sometimes a watch screen up to an 80 inch

television. That's not necessarily something
that's super easy to do. But we have the fundamentals

down, we understand how to make a static site.
So it's time to get into the responsive frame

of mind. And we're going to work our way up
from getting a design to simply work on a

single screen size, to be able to being able
to get it to work on any device, thinking

responsively isn't easy at first. But we are
going to work our way up, we're going to be

exploring the do's and don'ts. And we're going
to look at how we can plan things out to make

our life a little bit easier in the long run.
But do know, this is just an introduction

to thinking responsively we're not covering
everything there is in this module about how

to build a responsive website, we're getting
our feet wet with it, we're gonna start looking

at a few new things. But I don't want to overwhelm.
As I've said, before, I'd like teaching through

projects, we get a project, we're gonna learn
the different things, we need to get that

project to work. And then as we get into more
complex projects, we can add on more complexity

to the CSS, so we're always adding on new
things. We're not just dumping it all on it

first. And this module is really going to
set the stage for everything that's going

to come, we're going to look at how to approach
a layout. So you see a late late when you

when you see that late, what do you do? How
do you start planning, what do you how your

system start moving forward? Before we jump
into the layouts, that we're going to look

at CSS units, because we've seen pixels so
far, but we have a whole bunch of different

ones, we have ones that are absolute, we have
relatives, and percentage or sort of relative

units as well. And we're going to be looking
at all of those, we're going to be looking

at the basics of Flexbox. And if you did the
CSS Crash Course, you touched on Flexbox,

right at the end of it. But we didn't really
get into it, we just saw what it makes columns.

And that was it. So this one's not going to
be a deep dive, I have a full module later

on in the course, we're going to do a deep
dive into Flexbox to really make sure we understand

the ins and outs of it. Because Flexbox is
complex. And again, I don't want to throw

all this complexity at you and overwhelm you,
here's how we can start using Flexbox to just

make things start working. And once you are
comfortable being able to do that, later on,

we've had a lot of practice with it, we can
up the complexity on it a little bit, and

also the basics of media queries. So media
queries are an essential tool in adapting

our site to different screen sizes, we're
going to be seeing in this just how they can

work and how we can start using them to make
our websites work across different sizes,

we are going to work on a few different things.
But this is the main thing we're going to

be focusing on, which is a three page website
that we're going to be doing and we're going

to be making it fully responsive, we're going
to look at how we can go from the mobile view

of that up to this full screen site just like
this one. If you need a lot of fun, I'm really

looking forward to it. So let's jump into
the lessons and start learning how we can

start thinking responsively. Before we can
really take a dive into making responsive

websites, the first thing that we need to
do is take a bit of a deeper dive into CSS

units. Because there are many different types
of units that we can use. We have absolute

units. And this is what we've already been
using, we have relative units. And we also

have percentage, which is a bit of a special
case. So absolute units, you've already seen

these, this is the pixel, they're the easiest
ones to understand, because they're a fixed

size, and they're always the same size. We
also have a whole bunch of other ones that

you don't see come up too often your points
centimeters, millimeters inches. If you can

think of a unit that exists in the real world,
you can use that unit in your designs. Now

the thing that's weird about those ignoring
pixels, we're just thinking like the point

centimeter millimeter inch, if you put your
like a ruler up on the screen, they're not

really going to correspond to it, you shouldn't
really be using them. Unless you're doing

print styles, you can make a stylesheet or
a set of styles for a document to be printed.

In that case, that's fine. But the rest of
the time, if you need an absolute fixed unit

go with your pixel, we also have percentages.
So percentages are mainly used for width.

And they're pretty easy to understand. Because
it's a percentage that's relative to the parent.

Now I said they're usually used for width,
because on height, things get a little weird.

Sometimes it's relative to the height of the
parent, sometimes it's actually relative to

the width of the parents. But we're not setting
heights very often, we're going to see some

use cases later on in this course where we
will be setting heights. But for now we're

going to be sticking with percentages for
width, because that's usually where we're

going to be using them. And it makes it really
easy both to do something that's going to

be like 80% of the whole browser window. Or
if it's children, sometimes you want to call

them so one of them is 60%. And one of them
is 40% or 70% and 30%. And you know they're

taking up 100% total. So it's much easier
than trying to calculate the actual pixel

dimensions on things when you use percentages.
The last type is relative units. And there

are two different types of relative units.
There's units that are relative to font sizes,

and there's units that are relative to the
viewport. So the viewport is your browser

window. In this starting to think responsively
we're not going to get into the viewport unit

we're going to focus on the one ones that
are relative to font size, because they're

used so much more. The viewport units have
special cases, they are definitely used in

some situations, and we are going to look
at them in this course, just not in this module.

Now, the idea of having units that are relative
to font size, it might sound a little bit

complicated, but once you start playing around
with them, it's really not that bad. So as

I said, we're only going to be paying attention
to the ones that are relative to font size

for now, and not that the viewport units.
So the two units we're going to be seeing

are M and REM. There are actually other ones
as well, you have a CH unit and some others,

but we're not going to get into them. For
now we're going to focus on the M and the

REM, because these are the ones that are used
the most often. The viewport units, just you

know them, we have the VW VHV min V max, they
stand for the viewport width and height, and

then the viewport minimum or maximum, which
those ones are weird, and they they have specific

use cases. But the VW and VH are pretty handy.
We're gonna as I said, we're not going to

get to them in this module, though. So that's
it for our quick introduction into the different

units. In the next one, we're going to get
our hands dirty with a little bit of code.

And since we've already been using pixels,
and which is an absolute unit a lot, we're

going to take a dive in the next video and
look at how percentages work and get our hands

dirty with a layout. So we're gonna start
with percentages instead of m and m just because

it's much easier to understand how they work.
And so if we look at a layout like this, when

we will be making this layout in the next
module of the course, once we've learned how

to think responsibly, because we're going
to make it responsive, we're going to make

this work on small screens up to big screens.
And that's going to be our project in the

next one. But for now just looking at this
and thinking about it with what we know at

the moment, I would have a set width on the
total size of this. So say I say the entire

document here is 960 pixels. So I set a width,
I put a container on the whole thing or something

and they say width 960 pixels. So that's fine.
And this is a common size we used to use in

the really, really old days. And then I have
the two parts here. So I need to define an

individual width for the left and the right
side. So I might say, well, I want that left

side to be about 70% of that. So I need to
calculate what that is. So I do 960 times

point seven. And that would give me 672 pixels.
So now I know the width and height, set the

width of 672 pixels for my left side. But
then there's also the other side, and I have

to find out the fixed pixel value for that
side. And all then I also have padding in

there. So then I have to start subtracting
padding and doing all this. It's annoying,

right? You don't want to have to start thinking
about all of these things. And this is for

a fixed width. Imagine now you're trying to
bring all those numbers into it for you're

trying to like adjust it for different screen
sizes. So instead of complicating matters,

when we think responsibly, we want to simplify
matters a big part of thinking responsively.

And I sorry, if I ever say respond responsibly,
they're so similar. So if we when we start

to think responsively, it's all about trying
to simplify and not complicate matters. So

you remember this layout, we just finished
it. But let's say we wanted to turn this into

a more responsive layout, instead of the fixed
layout like we have. Now, we can do that.

So let's go and take a look at how we can
do it. And you can probably guess the one

thing that we really need to change is this
fixed container width, because right now it

has a width of 620 pixels. So we have a set
width on that container. I'm also going to

turn this border back on, just so we can really
visualize what's happening. While we're playing

with this, I'm gonna save that for the moment,
we're gonna come and take a look at it. And

you can see when I play with the screen size,
we're set at 620 pixels. So it's working at

big screens. But if we go smaller, all of
a sudden, I run into this problem where I

have side scrolling. So I get a scroll bar
to go left and right. Because my screen is

too small for the content that's in there,
my content is wider than my viewport width.

And that causes the side scrolling issue.
So if I was going to open this page on a cell

phone, that would it just wouldn't work, right,
I wouldn't get this issue, I wouldn't be able

to see it, I get this weird problem there
that I'm not even going to worry about right

now. It just does not look good. So how can
we fix it, as I mentioned, we want to change

this from a set width to a percentage. So
what I want you to do right now is change

this over to a percentage, it has to be 100%
or less, and I would go with less than 100%,

it would defeat the purpose of the container.
If not, try different sizes, see what they

look like play around with the screen size
in the player here. And then once you're happy,

and you sort of see what's going on, I'm going
to dive in and we'll look into it in a little

bit more detail. Great, so um, you know, it's
pretty evident, let's say I do 50% on this,

I think it's obvious what's going to happen
is those containers are now 50% of the total

screen size, you might have got a little surprise
with your image sticking off the side. And

we'll get to that in a little bit. But we
can see with the container. Now as I grow

or shrink my screen. That container is adjusting
itself automatically, which is pretty cool,

I think. Because we know the containers with
this set to 50%. I know I have 25% on the

left there and 25% on the right leftover.
So that's pretty cool that I can sort of make

this container that adapts to my screen size.
Now the problem is my image. So before we

see how we can actually fix that thing, that's
going With the image and understanding that

what I really want you to understand is what
is this 50% of. So if my container is 50%,

it's always going to be 50% of its parent.
So we have a few different containers here.

As we can see, this container here is 50%
of section one, this one is 50% of my header,

and this one is 50% of section two. Now, my
header, my section one, and my section two

don't have widths on them. And block level
elements, by default have a width of 100%.

So section one, Section two, and my header
are all 100% of my screen size. So that just

means that my container ends up being 50%
of my screen size. Now what would happen if

I came and set a width of 500 pixels on my
header? Can you take a guess, before you come

in, look at what's actually happening on the
page, what do you think has happened to the

container that was inside my header. So let's
go and take a look at it. And you can see

that I've limited my header to 500 pixels,
and this container is 50% of that 500. So

I had 25% there, 50% here, and then another
25% there. So this container is now smaller

than this container on this side. Because
each one is only looking at its parent, and

it's not looking at anything else, then normally,
I'm not gonna have a set width on something,

because that makes that whole thing look pretty
ugly. So we're gonna get rid of that and go

back and take a look at it. And there we go,
we fixed that. So just remember, always, when

you're using a percentage, if that percentage
is always relative to its parent, but a lot

of the time the parent is defaulting to 100%,
we're going to run into situations where maybe

that's a little bit different. Even if you
feel a little bit confused right now, in the

long run, it does actually make our lives
much, much, much easier. I'm going to leave

this video for here. So you can play around
with it a little bit, make sure you really

understand how that's working. If you're a
little bit unclear, try playing with the width

of your header of your section one in your
section two to really see how this affects

it and then maybe even play around with this
width as a percentage, just to really make

sure it's clear. And then once you figure
that out, in the next video, we're going to

look at how we can fix that problem that's
going on with the image. Okay, so we have

our containers that are set at 50% of our
total screen size. But we have this really

awkward problem that's going on with our image,
our image just does not look very good when

it's sticking out the side like that. So how
can we fix it? Can you think of a way that

we could solve that problem? Is there something
that we've looked at so far that would solve

it, because we have all the tools, we need
to be able to fix that. So see if you can

think about it coming to code, try playing
around with something and see if you can solve

the width of the image. So hopefully, what
you thought of is you can actually set a width

on your image. So if we take a look here,
images are a little bit weird. And what you

probably don't remember is when we first were
looking at block and inline, I mentioned that

images are actually an inline element, they
can flow with text, if I put an image in a

paragraph, the text on that line will will
actually flow with a put that image in the

paragraph itself, they're a bit of a special
case, there's things that are a little bit

different with them, but they are technically
an inline element. So they're not defaulting

to 100% when they're defaulting to the size
of themselves what that size of the image

is. So what we can actually do is we can come
in, and I like grouping it sort of here with

all the other things that I'm doing in the
general area instead of the more specific

areas where I'm styling things. And I can
select my images. So IMG. I'm not putting

a dot, I'm not putting anything else because
I'm selecting my image itself. So I'm going

to select my image, I'm gonna give this a
width. Now this width for now, I'm going to

give this a width of 250 pixels. It's a set
unit, we're not going to leave it there. But

just to show you what that does. So look at
that my my image size has shrunk down, the

one thing you have to be really careful with
if you set a width on an image is not to also

set a height to it. Because if I set a height
on this image, which you can do, it will actually

end up stretching the image and distorting
it and making it look really, really ugly.

Whereas if you only put one or the other,
so I could say a height, or I could say a

width, either one is going to work. And if
I if I only have one of them, it's automatically

going to handle the second property. So it's
going to keep it in proportion instead of

stretching it. So you know now that we can
set a width on an image, how do you think

we can get that image to match the size of
the container? So hopefully, you said use

a percentage. And what I want you to do is
set it and see if you picked the right percentage

try and set and actual size on this using
percentage and see if it's fitting the way

you think it would. Alright, so there's two
answers people usually think of one of them

is to give it a width of 100%. And the other
one is a width of 50%. And the reason a lot

of people think a 50% is because on my container,
we gave that a width of 50% here. So if this

has a width of 50% it makes sense to give
the image a width of 50%. But if you did that

You might have noticed it didn't work is pretty
small. But if you shrink this, you'll see

it's it is growing and shrinking with my page.
So the percentage is working, just not what

we thought it was. So we just have to remember
what I said before about how percentages work,

a percentage is always based on the width
of the parent. So if we come in, we look in

our index here, when we set the width of the
container, this was 50%, of the width of section

one, which automatically was the full size
of my screen. So it ends up being 50% of my

screen width. This image, on the other hand,
its parent is the container itself. So this

image is whatever percentage I set for a width
and image will be a percentage of this container

width. So if we come into my styles, now,
my image actually wanted to be 100%. So if

we go and look, again, we can see that it
has been fixed. And now whatever I do here,

my image is going to grow and shrink with
the size of that container, and match everything

that's around it, which just makes the layout
work much better. So if I come down and get

rid of that magenta border, and we go and
look at it again, we can see that it looks

nice and fancy, and it fits well. With the
overall look of the document, the only thing

is a 50% width is a little bit small. So if
I come down to this, everything is getting

a little bit smushed, I'd rather that it's
sticking closer to the sides. And I'm not

getting like this massive, it's almost acting
like padding. You know, look how small that

images, I can barely see it. So it's really
common to not have a width of at 50%. But

to do like a 90% or something like that, because
on small screens, that's going to look a lot

better. That's sort of that that cell phone
type of look that you're probably used to

having and seeing. But as this gets bigger,
we do at one point, now we're getting too

big lines of text going from one side all
the way to the other is really, really awkward.

So we want to try and avoid having text that
stretches from one side to the other. Like

what's happening right now. And the next video,
we're going to look at how we can do that.

We've got our layout working, it's looking
nice and dandy, but it's getting too big.

Now when we're getting up to these big sizes,
we don't want that to happen. What we can

do to do that is a new property, we're not
worrying about a new value. Right now we're

thinking of a new property, it works with
the width. And you probably saw the name of

this lesson was min and max width, so we can
actually set a width and a maximum or minimum

width on an element as well. So I'm going
to come and put that border back on here of

two pixels solid magenta, just so we can really
see what's happening once again. And let's

come and give this we have a width of 90%.
But I'm also going to give it a max width

of 600 pixels. Let's do 620 because that was
our original design. So we'll stick with the

620 that we originally had. So now if we come
and take a look at this, and I refresh, you're

gonna see it's it's working in our small screen
sizes, or containers growing, it's staying

at 90%. But at one point, it's going to get
locked into play. And right around here, it

stops growing, because it's hit its maximum
width. And that means at large screen sizes,

my text and line lengths aren't going to get
too long. But at small screens, everything

works nice and perfectly. So we've sort of
got the best of both worlds going now, we

can set a set value for the maximum size we
want, where we can keep a percentage to let

it shrink when we want it to, we can also
set a min width. So if I came on here and

said min width, I'm going to set it pretty
big of 500 pixels, I wouldn't normally do

this on the container. But just for demonstration
purposes, we have our max, so it's never going

to grow bigger than 620. And if I go this
way, it will never get smaller than 500. So

when I hit 500 pixels, you can see it stops.
And then I get sidescrolling again, which

is why I wouldn't set a min width on my container.
But it does demonstrate how that property

works. So for now, I'm going to take this
off, I just wanted to introduce the idea of

the minimum width in there. But for the max
width, I will leave it on there, when we're

starting to think respond responsively for
the container, this is a really really common

property to set on something to give a maximum
size, that size really depends on the layout

and what you're building. So I'm not going
to say that there's a specific MAX SIZE that

you should be going, you will base it on the
design that you're doing, I will be going

more in depth some best practices for total
length and total sizes in a little bit. Interestingly

enough, if you put your max width above your
width, it's still going to work because there

are two different values max width and width
are two different ones. Same with min width,

you can put them in any order in your CSS
and it won't have an effect, it's going to

work no matter what. So play around with them,
see if you can get used to it or figure it

out. If it's something that you're finding
a little bit confusing, don't stress about

it too much. We're gonna be using these a
lot in the following projects that we're going

to be building, it's just gonna help reinforce
it, the more we use it, so you'll get the

hang of it in no time. So we're moving on
to the M unit. But if you're wanting to get

more practice with percentages, don't worry.
We're going to get a lot we're going to be

using them throughout this course. But there's
two others that we really need to look into.

So a quick recap on what relative units are,
they call them relative units, because they're

relative to something else, they're either
relative to a font size, or to the size of

a viewport. So the M and the ram are both
relative to the font size of other elements.

So M's are always relative to their parents
font size, and the font size is an inherited

property. So if you don't declare it anywhere,
it's getting it from the size that you set

on the body. And if you didn't set it, the
body is actually inheriting it from the root

the HTML element, and that has the the 16
sit on it. Now that I say by default, his

people can override the font size in the browser
in their settings. And so that can actually

change what the default is on that property.
But we're not going to worry about that at

all right now. But let's go and take a look
at how they work. So I've kept the site that

we were already working on, but I've deleted
some stuff. And we're gonna be playing around

with this a little bit. So before we get into
the unit itself, I want you to think way back,

and we're going to create a list. So remember
how lists work, you can do either an ordered

or unordered list, I really don't mind, see
if you can remember how they are. But if you

don't, that's okay, it's been a long time
since we've seen a list. But do your best

to try and remember, before I go and put one
in here and just give it like 234 elements,

make sure there's not just one list item in
there, but there should be multiple list items

in there. Alright, so I'm going to go ahead
and create my own list, I'm going to do an

unordered list. So it's a ul, and I'm going
to close that ul. And I'm going to come into

here and just create a few list items. So
open and close Li and I'm going to put in

a few here. And I'll fast forward while I
put the content inside of these. Alright,

so let's go and take a look quickly at what
my list looks like there. So we have a bulleted

list since I used an unordered list. And we
can start styling things up a little bit.

So let's come over to my CSS file here. And
what I'm going to do is I'm going to set my

URL to have a font size of one M. And when
I do that, nothing's actually going to change

because one means copy the font size of the
parent, now the parent doesn't have a font

size on it. So it's going to go down and down
and down until it finds something that does

have a font size on it. So the font size is
being declared all the way up here on my body.

So the font size is 18 pixels here. So that
means if I change this 18 pixels to say 25

pixels, everything stays the same. So my paragraphs
got bigger, this got bigger because as an

inherited property, it's sort of the same
as setting something as one m, you're saying

match, one M is saying match the font size
of the parent. So it won't actually have an

effect, where it will have an effect is and
I'm going to bring my URL all the way to the

top here, just so I don't have to scroll up
and down. If I change this font size to 1.5,

that's the same as saying that this is so
1.5 m is equal to 150% of the font size of

the parent. So we can go and look at how that
would work. So if I refresh, now, this is

massive. It's now 150%, the size of my paragraphs
here, which are the 25 pixel. So whatever

I change on here, if I change this down to
10 pixels, this will now so it'd be 1.5. m

is 150%. So that means in this case, it would
be equal to 15 pixels. So you can do a quick

math to figure out exactly as you can see,
this is super, super tiny, down here at the

bottom. Where is this list, at least it's
at a readable size. So it's always a relative

unit. But as I said, it's always relative
to its parent. So in this case, it's inside

of section one. So if I said section one has
a font size of 20 pixels, this font size is

now 30 pixels, because it's going to be 1.5
times bigger than the font size of its parent.

So it's always a font size that is relative
to its parent. Now, you may be wondering why

we'd want to do that. But imagine on these,
let's get rid of this for the moment, I'm

going to comment it out because we're going
to need that later. But let's say on my h1

here, instead of setting a font size of 36
pixels, I said this is three M and then I

said this one here is two M. And then I have
my body which is set to say 16 pixels for

now. So if I come and take a look at that,
everything is sized and it's all looking good.

But if I come and change this number, and
I set this to 10 pixels, everything is going

to adjust with that. So now all of those units
have automatically adjusted in size. My headings

are smaller, my list is smaller, my paragraphs
are smaller, my headings have shrunk, everything

is reacting together instead of each being
a completely separate unit. And this can be

really, really handy, where you can change
one font size and have it affect your entire

site. It's very handy. It's very useful, but
there is a big problem with EMS. We're going

to see what that is in the next video. Before
we get there though, if you want to just play

around in here, try different sizes. See if
you can get the hang of it play around maybe

with your h1 and h2 sizes, and then modifying
this type Playing with apparent font sizes

if you want to, and just get a little bit
of a handle of how it's working. Just like

percentages, though, these are units we're
going to be using a lot from now on, I just

want you to get a vague idea of how they're
working before we dive in and start using

them a lot. So even if it's a little bit weird,
right now, it will be something you get used

to a lot faster than you might think. So as
I mentioned, at the end of the last video,

there is a problem with the M unit, M's are
super convenient. For some things, we're going

to see some use cases where I use them all
the time. But when we use them for font size,

it can create this weird cascading effect
where things just get out of control. And

it can be really, really mad. So if we come
and look, I'm just continuing where we left

off, nothing is different from before, what
I'm going to do is up here, I'm going to keep

my font size at 10 pixels. So it's really,
really tiny on my body. But what I'm going

to do on section one is I'm going to give
section one, a font size to two M. So the

font size on my section one is twice as big
as on the rest of it. But if we come and look

at what's actually happened is now this is
an h2 and this is an h2. But this h2 is huge.

And why is it so much bigger, and this is
size 10. This is not 1.5 times bigger than

that this is not 15 pixels, but I have my
list here is set to 1.5 M. So why is it so

gigantic, I mean, what's going on. And to
make matters even worse, why not? You know,

you can make this even crazier. on my list
items themselves, if I decided to set a font

size of 1.5 m just for fun, you know why not?
All of a sudden, they're massive, you know,

this is getting out of control, literally
getting out of control. And if you had other

nested elements, it can get even worse and
worse and worse, because it's looking at the

font size of the parent. So right now my list
item is looking at the font size of my list,

and it's gonna be 1.5 times bigger than my
list. So it's doing this multiplication through

all of these different elements until it finally
you know, multiplies all throwing from 10

times two. So we're at 20 times 1.5, we're
hitting 30. And then we're going to use 1.5.

So you know it's getting massive, it's just
getting out of control big. That's also why

my section one has a font size of two M, my
h2 has a font size of two M. So we're getting

that cascading effect even here. Which is
why if we look here, my h2 at the top here

is a lot bigger than the h2 that's down here,
even though their font size is set to the

same value. And it's because it's this one
is multiplying that two M by the 1.5 m to

get to this total gigantic size. If you're
really good, and you're really know how to

control this stuff, maybe you can do this
on purpose and get away with it. But there's

a solution that just makes our lives so much
easier. So I don't do this, I don't mess around

with AMS for fun sighs so let's go and see
what the solution is. Before I go into the

solution, which is the REM unit, I just don't
want to poop on the M too much. It is a super

useful unit. And after we've seen these two
and we understand what a REM is, I'm going

to go into when we might want to choose which
one and hopefully make all of it a lot more

clear on why both of these are super useful
and super important when we start thinking

responsively. So the REM is an M, but it's
short for root m. And what does that mean?

Well, it means it's always instead of being
relative to the parent like the M is it's

always relative to the root of our document.
And I've used the word route a few times.

And the root of an HTML page is always the
HTML element itself. That's where a lot of

the defaults are coming from, even though
we haven't actually been styling that in our

CSS up until now. So you may be wondering
how does this make our life easier. And let's

go and take a look at how. So remember right
now we get these giant sizes coming in. Even

though this is set to two m and this is set
to two M, this one is getting gigantic, it's

getting out of control, because it's two m
times 1.5 m, and it's scaling up and it's

a compounding factor that's going on. Whereas
if we use root m, we lose that. So on my font

sizes here, I'm going to switch that to an
REM instead of an M. And the same thing here.

And the same thing here. And the same thing
on my headings. And let's go and take a look

at it right away without doing anything else.
And look at that this font size is now the

same as this font size. And this is a lot
bigger than this one. But that's because I

do have my font size set to one and a half
REM here. So this font size will be bigger,

I guess we'll get rid of that comment because
it doesn't really apply anymore. And here

we used to have that double compounding factor
that was going on my list item was compounding

through this which was then compounding again
through that. If I take this off now and we

take a look, it's going to look exactly the
same because it's just set to that one size

that's relative to the HTML element. But you
remember that cool thing with me is when I

change the font size of my body and everything
just worked around that and sort of scaled

up and down with that one unit. So it's almost
like EMS and rems Ramos a creating a scale

instead of creating these set font sizes.
So what we can do is on our tml element, we

can set a font size on here. So I'm gonna
say a font size of 10 pixels. And we go and

take a look at what that's done. Everything
has shrunk down, everything on this page has

gotten a lot smaller. And if I come on the
HTML element here, and I make this 30 pixels,

everything will have gotten much, much, much
bigger except for this paragraph, why hasn't

that paragraph gotten bigger? What's going
on? Can you figure it out? See if Remember,

the paragraph is inheriting its font size,
the section two doesn't have a font size on

it, nothing that is contained except for the
body has it. And this is an absolute unit,

it's not relative to anything, we have this
in the pixel. So this is where it's sitting,

and it will not change. So we've, what we've
managed to do. So if we switch this over from

that to one M, and M by one m, I do mean one
REM for font size, I'm always going to stick

with rems. And you can see here what's happened
is, everything is going to keep that nice

scaling feature where everything is scaling
up or down with something else without the

possibility of running into that compounding
issue. Now the one thing I wouldn't actually

do is set a set font size on my HTML element
like this. Usually, I'm just leaving it at

the default. Or I might use a percentage if
I need to play with it. And you'll see some

people recommend setting the percentage really
low here to shrink things. If you set it to

62.5%. This makes the default, which was 16,
now become 10. So when you instead of having

to think of one rim as 16 pixels, and then
it's hard to do math, like what 16 times 1.5.

It's easy now because this is 10, and then
that becomes 10. So this is 20. This is 15,

it makes it much easier to think that way.
I don't do that I you did for a little while,

because it is easier, I will admit, but after
some time, you really do get used to working

on the scale of 16 pixels. And when you need
to scale this up, and you're gonna see when

we start getting into mobile, when we start
doing different designs you're going to have

on a mobile screen, you're probably gonna
have a smaller font size. And when you get

to a bigger screen, you will up the font size,
you can up the scale on it. But instead of

using the percentage, maybe you just keep
this at 100 as the default and then the bigger

size, you just bumped it up to 110 and everything
or 120. And everything just scales up with

it. So I tend to just not even bother with
this and I leave my rems like that and play

around with it. And I've gotten used to doing
that. And that's how I'm going to be working

throughout the rest of this course. So you
will get a chance to see and I'm going to

explain myself every time I'm using these
units, especially for the next little while,

while we're doing them, including the next
video where I'm going to explain that ends

still do have a purpose. And we're going to
see what the purpose is, and how I decide

between m and REM and what my rule of thumb
for them is. Alright, so we've seen percentages,

we've seen EMS, we've seen RAMs, of course,
we've seen pixels. So how do we decide which

one to use, and in what situation if we go
back to pixels, and when we're using them

a bit of a history lesson before we move forward,
the pixels used to cause some pretty big problems

because they were fixed unit but not in the
same way like a centimeter is because the

centimeter is you take a measure and you can
measure it, whereas a pixel was a.on your

screen. And that's technically what a pixel
really is. But in CSS, the pixel doesn't look

at the dots on the screen anymore. It now
follows what we call the reference pixel.

A reference pixel is a fixed size. And they
had to come up with a solution because the

problem was we started getting these devices
that were different resolutions. So imagine

if you had a retina display and a regular
display, and you set something to 18 pixels,

it looked fantastic on your normal screen.
But on that Retina display, it would be half

that size, and then just be really small.
And so we couldn't set things in pixels at

all. So AMS and Rams verse, you know, we needed
them pretty much. But the reference pixel,

the idea here is they switched the pixel.
So instead of following a doubt on the screen,

it's following a set size just like an inch
or a centimeter would that size, I'm not going

to go too much into it, it's pretty much 196
of an inch and the way they calculated as

the if you're an arm's length away from the
screen on a 96 DPI screen. And I know it's

kind of complicated, it really doesn't matter
for what we're up to right now. But it's just

to say it's a fixed unit. It's not a.on your
screen anymore. It sounds weird. And it sort

of is it's had a lot of benefit and a lot
of really good things. But it also makes my

answer to what unit we should use a little
less concrete than I used to have. And I used

to always say you use EMS for this rems for
this and you just avoid pixels. But you can

get away with using pixels for a lot of things
now, because the fact that a pixel if you

said something to 10 pixels on all the screens,
it should look like it's the same size, regardless

of the resolution of that display. So a lot
of those problems we had with pixels don't

exist anymore. There are other advantages
to using M and REM. So for font size, we're

going to stick with them some of those advantages
we're going to see as we progress through

this course so I am going to be sticking with
them. And my general rule of thumb is for

font size, I'm going to use REM because it
prevents that cascading awkwardness from happening.

And for padding and margin. I'm going to Use
m, and we're going to see why in the next

video, we're going to run through this, we're
going to be using all of those. For width,

I'm either using M or percentage, I mean,
you're going to use an M, when it's a set

size, or I'm going to use a percentage, we
might also use pixels in there to be honest,

it you can sort of get away with on width,
so I'm not too concerned about which one you're

going to be using. So if you're more comfortable
with pixels on widths, that's fine. I tend

to do that a lot. But it is sort of I sort
of like sticking with the same units whenever

I'm using them. So that is my general rule
of thumb. But those are a rule of thumb. And

they're not hard and fast rules. Sometimes
I will set a font size and an M if I have

a good reason for it, because I understand
how they work. And sometimes I will set a

margin or padding using REM, because I want
it to be a set size. And I don't want it to

be relative to whatever I don't want it to
be relative to that font size, I want to be

relative to the root for one reason or another.
This might all seem really theoretical and

confusing and not super clear right now. So
in the next video, we're going to see how

these work with an actual example. And hopefully,
it just helps cement things a little bit.

The next one is just more of an example. And
then we're going to build out a layout. And

we're going to be using all of these. And
we're going to sort of be cementing all the

different concepts that we've covered up until
now, in this how to think responsively module

that's going to be looking at an actual example,
you might recognize this, I wanted to first

run through an example that we've seen before.
So we're not focused too much on the markup,

we're just focused on how the different units
affect different things. And then we're going

to go through and actually build a full layout.
In this, this is the original code that we

sort of left off with when we did a lot of
this in creating our this little card component

thing that we made together. So if we take
a look at it now, one of the reasons I did

choose this is because there's button buttons
in there and buttons are a great example for

lots of things including setting up and using
M's and rems, and when you might want to use

one for one thing and something else for the
other. And what I'm going to do is I'm going

to create a extra class that I can put on
my buttons, it's going to shrink or grow the

font size, because it's really going to illustrate
everything. So let's call it button big enough

that a font size of let's say 1.5 REM, which
is going to give us a pretty big font size.

And then let's come on a button small. And
let's give that one a font size of point seven,

five REM which will be pretty small. So now
I should be able to put those font sizes on

those two buttons. So let's come and do that.
I'm going to give my first one here, the class

of button big. And the second one here, the
class of button small. So this is sort of

my default button class. And then we're modifying
it with these two modifiers, like we did with

the colors before. So if we come and look
at how that's affected things, you can see

it has grown in shrunk the font sizes on those.
And that's awesome. But the button hasn't

really this button was forced to get bigger
because the content inside of it do get bigger.

So we do have the padding that's on these.
The problem is on this big button, the text

is taking up a lot more room than it is on
this small one, this button didn't really

scale up when I change that font size. And
let's let's bring in like a default button

here to actually I'll stick that one right
in the middle. We'll just put default here.

And we won't have any modifier class on that
just so we have a reference point of what

the original button look like, we see our
three button sizes. If you look at this button,

the space on this side looks a lot bigger
than the space on the side it read through

the exact same size. But the problem is my
font size has gotten a lot bigger, my button

really should be scaling up with those sizes.
So remember, I always said I put font sizes

in rim, it stops some weird stuff from happening.
But I like putting my margins and my padding

using AMS. So if we come here where I had
my padding of 15 pixels and 30 pixels, I'm

actually going to change this and I'm going
to change my padding on this on the top and

the bottom 2.5 M and on the left and the right
to 1.25 M. And let's go and take a look at

my buttons. Now. Notice how the shape of them
is much more similar one to the next, learn

more about me, I'm going to change that just
because it looks different. Because it's such

a long amount of text inside the button, it's
going to keep the length of the text more

similar in all of my buttons. And you can
see it just looks like the button is getting

bigger and bigger or smaller and smaller.
Because the padding around it is scaling up

and down with the font size of that button.
Now you might be wondering one thing, why

is it scaling with the font size that I'm
putting on the button itself, because this

it's not paying attention to the parent is
paying attention to the font size of its own

element, right? Like this is my padding here
is point five and 1.25 on the button. And

so if I look at that button, it's paying attention
to the padding that or it's paying attention

to the font size that I put on this class.
So it's looking at this font size. This is

where I mentioned that it's a little bit weird
when you're using EMS, because with EMS, if

you're doing it on the font size property,
it's looking at the parent if you do it on

Any other property, it's no longer looking
at the parent, it's M is relative to the font

of this element should put, say, font size.
So m becomes relative to the font size of

that element of this element here, when it's
put on your padding, or when it's put on your

margins. Or even if you did it on like a width
or height or something like that, you would

be looking at this one size rather than the
parents font size. This is where scaling and

this compounding factor is good because it
won't compound out of control, it's going

to compound or scale according to what's here.
Whereas if I use rems, for this, it becomes

a set value just like when I use pixels. So
if I come back and I set those in REM, this

space is exactly the same as this space, which
is exactly the same as this space, these two

sizes are exactly the same, but because the
font size is bigger, this looks a lot smaller

visually than it does on this one. Let's switch
those back to em just so we can see it again.

And now we can see that it's more of this
like scaling up that's going on rather than

this set size around the text of my button.
So that is how I choose between M's and rems,

when it comes to setting things and why I'm
putting M's for margins and paddings. And

why I'm setting rems, for my font sizes, the
font sizes, it stops that weird cascading

from happening AMS because I can take advantage
and make it relative to the font size that's

in there. This also makes it really easy when
I'm sitting margins on paragraphs or on heading

because if I come and I go, I want to add
I want to change the margin bottom on my h1.

I know my font size is 24 pixels. So if I
came and I said margin bottom is one m, I

know now that my margin bottom is exactly
24 pixels. So that would literally be 24 pixels.

For my margin bottom. If I came in I said
margin bottom is two M, well, then my margin

bottom would actually be 48 pixels, and so
on and so forth. So it's relative to the font

size of that actual element. Now, obviously,
and now I've said I don't like setting pixels

here. So you do have to think about it a little
bit. But that also means if I come in, I set

my font size here to three REM and you don't
know exactly what now we've got a nice big

font size on that. But we don't know exactly
what three REM is, well, it doesn't really

matter, I don't have to worry about exactly
how big that is, I can come and look at my

font size and I go I want the space underneath,
we will have that I can come and say margin.

Bottom is point five m because it's point
five of whatever this font size is. So now

my space is about half of my font size, where
I go, I want it to be bigger than my font

size, I do two M and now my space after is
twice whatever my font size was. So it's always

relative to that element itself, which makes
it really, really easy when you're dealing

with your typography. And the big advantages.
When I change my font size, this will adapt

automatically. And I won't have to change
both of them. Because when we start changing

font sizes, which we will be doing for different
screens, we're gonna have a small screen and

a big screen, the font size has to change
on it. So if you're changing the font size,

it's nice that you don't have to go and change
your margins. Because they've all been set

in em the same way here, when I'm changing
my font sizes, I don't have to go and change

the padding for those sizes, then of course
there are percentages and in general percentages,

I will be using for the width, you could technically
use them on a font size, and they'll work

a lot like m but that also runs into that
scaling and compounding issue. And the same

reason I don't like to use M's on font sizes
is the same reason I wouldn't use a percentage

on a font size, the two of them work extremely
similar to one another. So REM is sort of

the safe bet there now in we're going to be
jumping back into Flexbox. And actually building

out layouts and practicing and using all of
these things that we have learned up until

now plus going back into Flexbox, which we
haven't seen in a really long time since pretty

much the crash course and we're going to be
looking at understanding it and how it works

a little bit better as we learn to start thinking
responsibly. Alright, so let's get into responsive

layout basics using Flexbox. before we actually
start making the layout, which we will be

doing in this video, just a refresher on Flexbox.
So elements normally have a display of block

or display of inline as their default from
the browser. So display block would be are

things like our divs, or header or footer,
or main are each one all the way to h6, our

paragraphs are lists and list items are also
included in that. And we have our inline elements

like are a strong m n span. So those ones
stay in the flow with the items that are around

them. We are going to be using divs for our
columns. And we can't you know because divs

are block they're going 100% of the width.
But they're also even if we change that even

if we say they're 10% width, they're still
going to stack one on top of each other. We

can change this behavior by setting the display
property to flex on the parent element. When

we do that it changes the behavior of all
of its direct children. So if we have something

that looks like this. So this is a a section
of content. And then inside that section,

we have four divs, like this, if we set display
flex on that parent section, the items inside

of it will turn into columns automatically.
So they'll switch and they won't stack, they'll

also no longer be 100% went, they're going
to shrink to fit the content that's inside

of them on the horizontal axis. So it's very,
very different. But it's also very easy to

do. So we're going to practice with this layout
here. It's not the most beautiful layout,

but it's going to bring us into being able
to do some fantastic stuff. Because if you

see here, we are looking at how we can do
this for a big screen. But we're also going

to get to the point where we can make this
work on a small screen as well, we want it

to work on both. There's a lot of interesting
things that are in this layout. So we have

content and stretching the full size. Here
we have three columns, here, we have two columns,

these two have different colored backgrounds
on them, this one is bigger than those two.

And this one's even bigger than that. So how
can we do this? How can we set it all up to

be the right sizes, and to get spacing between
them and get all these different things that

we need in here. So we're gonna be doing all
of this not in this video, but over the course

of the next few videos. But we're going to
sort of set the stage with the HTML in this

one, we're going to be ignoring the mobile
layout for the moment, we're going to focus

on how we're going to set up our columns and
organize it. Because this is the most important

thing now is how is this content organized,
the hardest thing to do with a layout is when

you look at it, just breaking it down in how
you're going to organize it, where do you

need to do Where are all the different pieces
going to fall? It's not super easy. At the

very beginning, the very first thing is, all
of this is being held in the middle of the

screen with a certain size on it. In the last
module, we had three containers because we

needed backgrounds that were full size in
this situation, we don't need that. So we

can have one single container for all of the
content on our page. And that container is

now this light pink background. But what we
also need is we need to create some columns.

So I'm going to put a div of columns here.
And I'm gonna have a div of columns here,

that's going to have these. So once we have
those columns in place, then we need to create

individual the individual columns. So I have
this here is one columns. And then another,

you'll also see these often and there's a
popular framework called bootstrap, that will

say row. So that's a row of content with three
columns inside of it. So we have our you know,

we have a row of content or my columns container,
I'm going to call it columns, because it's

my columns container. And then inside my columns
container, I have three individual columns.

And then over here, I have this big one that's
gonna have display flex, and then it's gonna

have two of them inside of it. So this is
sort of the structure of my site when I'm

breaking it down visually. The reason I know
that I need to have these green boxes, and

then for each individual column, is because
if not, if we didn't have those, and I just

put my all my age twos and my paragraphs directly
in the columns parent, then each individual

paragraph and each h2 would become its own
column, they would each break off into their

own things they wouldn't keep, they wouldn't
stay organized. So when we look at something

like that, we have to visualize where each
individual column is, so we can organize it

properly. And in this case, this is how I'm
going to be organizing it. So I'm going to

leave this here, and I'm going to see if you
can go ahead and do it, I've already set up

the file, I've linked it to a style sheet
that has nothing in it, I've given you all

the text. So just organizing it look at this
picture, and go based on what you see here.

So go ahead and do it. If you don't want to
copy and paste all the text at least make

the structure like you've seen me do in previous
videos, where you're putting in all the elements.

And then I'm going to go through and do it
as well. And I'll bring the text and so if

you don't want to bother copying the text
back and forth, you don't have to. But if

you want to go through the full length, by
all means go for it. I'm only going to do

that in this video. In the next one, we're
going to start applying the CSS to it. But

if you want to jump ahead and just try and
do the whole thing on your own, go for it.

In the next video though, I am sharing the
colors, the exact colors that I'm going to

be using and the font sizes. But if you just
want to estimate and try your best to get

it to work based on what you've learned so
far, go for it by all means. But if you're

not too sure, on the Flexbox thing, it's been
a little while you can wait for me. So let's

jump into it right now. So here in my body,
as I said, I'm going to start with a div with

a class of container, which is just going
to hold all of my content. Now we could in

this case, actually set a width on the body,
I tend to try and avoid doing stuff like that,

because all of a sudden, somebody wants to
come in and add like a new section to your

site that's actually full width. And then
you go Oh man, I have to change. So much content

had to change on my markup. So I like having
a container or a wrapper that's going to contain

all of my content and not touch the width
on my body. personal preference there. But

I like thinking ahead and thinking things
are always changing. So I don't want to run

into any problems in the long run. In my container,
I need my h1 and I need my image. So that's

gonna have an SRC on it and an Alp on it.
And then we can come down and start doing

the rest of it to need our two parent column
containers. So that was it. What I said I

would call columns. So div class equals columns,
close div. And we're gonna have two of those.

So you can copy and paste that or just write
it all out, depending on how fast you can

type. And there we go, we have the basic structure.
Now inside of this column, I'm going to have

three actual columns. So I'm going to do a
div class equals just co L, because it's faster,

right. And we can close that div. And I'm
going to take that, and we need three of them

inside of here. And I'm going to take that
same thing here. And I'm going to have two

of them over there. So that is sort of the
basic like actual structure of my site. Right

now, the different pieces are in place, obviously,
I need to put the content inside of those

columns. But from a structural point of view,
this is all of my layout, stuff like this

is my main layout items that I put into place.
Now it's just adding the content to those

to the layout parts of my markup. So let's
go through and do that really quickly. So

here, it would be an h2, followed by a paragraph,
I have the same thing in the next one. Except

in this case, we actually end up with two
paragraphs. And then my last one, we just

have a single paragraph all on its own, which
is the exact same thing we have here. And

we can copy this one and bring it down there.
Because that is what we have, we have h2 paragraph,

this is an h2 with two paragraphs. This is
just one big long paragraph, and h2 with a

paragraph and then our individual paragraph
there. So now we not only have the structure

of it, but we have all of the content elements
in place, we just have to place the content

actually in there, I'm not going to do that
in this video. When you start the next video,

all the content will already be there, all
of the colors and font sizes will be on a

slide in that video. So if you want to jump
to there, now, you'll be able to try and do

all the styling, and all of the content will
already be in place for you. It's time to

make the columns in this layout into actual
columns instead of stacking one on top of

each other. So as promised, I've put all the
content in here and I want you to give it

a go. So we have everything we need in place,
we have all my paragraphs, all my content

is in here, we just need to actually get this
to be columns instead of stacking one on top

of each other. So if you want to go ahead
and go for it, just as a quick reminder, we

want these two parents to be the display flex,
and then everything should more or less fall

into place a little bit. I've also given you
the colors that we're going to be using and

the font sizes. So I'm going to start this
one off by putting in the columns. And then

I'll also throw in the colors for my text
and setting up the font sizes. But first,

I'm just gonna set up my columns to make sure
they're working to make sure we understand

that, then I'm going to run through and set
up all my colors except for the background

color on these two, because I'm going to look
at that in the next video as a quick refresher,

which is going to get us ready to set the
different sizes on these two middle columns

here. So you have the right starting point,
do as much as you can on your own before you

watch me do it. See if you can get the whole
thing done. Even if you get stuck anywhere,

of course, come and see how I did it or when
you're done, come and see if we did it in

the same way. Alright, so I'm gonna jump over
to my CSS file here. And as I said, I'm going

to start with my container normally and start
with my body. But let's just get the lay of

stuff working first. So let's actually come
up here and make a comment called layout.

And I'll come here and my container, I said,
I want it to have a maximum width of 980 pixels.

Now if we left it like that, when we come
and look at it, if we make our screen big

enough, we're gonna see that it's, it's nothing's
gonna grow outside of that space. So I could

set my max width of 980. And then I could
come on here and set the margin of zero auto

to center it on the screen. And now it's looking
pretty good. And this is one of those rare

times because we don't have a background color
that's going anywhere one side to the other.

That default margin on the body, maybe it's
not such a bad thing, because it's preventing

our text from touching the side there, it's
getting a little bit too close. For me, I

like keeping things a little bit further off
than that. So I am also going to give this

a width of about 90%. So it will always keep
a little bit more distance off the sides than

what we had before. It's not perfect, but
I like that a little bit better. So I'm going

to stick with that maybe even 95 we could
get away with let's bump that up to 95. And

keep going. The more fun part and the part
that you have been waiting for is coming onto

my call and then on here, setting this up.
So on my columns here, we do a display of

flex. And just like that, we should be able
to come into here and see I have three columns.

And if I scroll down, I get my two columns
there. Now it doesn't look exactly like the

layout that we had because this one is much
longer than those two. And it really depends

on just how the screen is and how it is set
up. Plus this column is supposed to be wider

than the other ones. So when we do that it
should fix everything we want. Now you'll

notice there's something weird happening down
here where it's sort of already falling into

line, but this one is much Smaller are narrower
than this one. So we do have some work to

do. Now we are having a big issue, which is
with my image, it is causing some side scrolling.

So the first thing I'm gonna ask you to do
right now is go ahead and fix that issue with

the side scrolling. If you remember how I
did it last time. Somebody come here, I'm

gonna stick under layout, because images are
part of my layout most of the time, and I'm

going to give this a max width of 100%. Now,
you probably did a width of 100%, which is

perfectly fine. And what you want to be doing
anyway, the only difference between giving

it a width of 100% or a maximum width of 100%,
is it means my image can never get bigger

than it was supposed to be. So if my max width
here was actually like 1200, and I made this

much bigger than what we had before, my image
one stop growing when it gets to its native

size of 980 pixels, whereas it will still
shrink to fit the content. If my its area

is smaller than it read, the only reason I
would do that is if an image goes beyond or

bigger than it originally was, it will start
losing a little bit of quality. So because

of that, I'm going to stick with a max width
of 100%, instead of just having a width of

100%. And letting it grow. It's not too noticeable
now. But if it really does get a lot bigger

than it was intended to be, it's gonna get
really, really blurry and nasty looking. So

I'm going to stick with a max width there.
And we'll bring this down to 980. Just like

that. And we have our nice three columns that
are coming into place. So that is nice and

done. So we are well on the way, the next
thing I'm going to do is just to go through

and fix up some of these colors, except I'm
going to save these two background colors

for the next video, like I had already mentioned.
So let's go and do that. I'm going to come

up to the top here. And we're going to look
at this slide really fast. And I'm just going

to be running through all of the things we
see here. So I'm going to set the font size

and my colors. And then that's it for now.
So that's all in place when we jump into the

next one. So on the body itself, I'm going
to come up here and we had the font size that

I said would be 1.125 rim, the next thing
we want is the color because the color throughout

the entire design, except for those areas
that are on the white background and the h1

are using that 7070 color. So I'm going to
set that right there, I'm also going to go

and put the margin to zero just because I
tend to do that in every design, even this

one where it's not essential to have. Now
we can get into our type biography. And I'll

come into here and start writing a little
bit. So my h1, which has a font size of three

rim, and also has that color of 3126 14, I'm
going to leave the margin alone, I think for

this, in this case, I don't think we really
need to change it. And I'm going to come on

my h2 and give that font size of 1.5 rim.
And I think that's all we really need to do.

Let's go and just take a quick look. And the
one thing I did forget actually is that span

in the middle. So let's set that up, I'm going
to come into my index, and you want me to

do I'm going to give you a little mini challenge.
I'm going to put a span here, but I'm not

going to put a class on it. Now this isn't
something I would normally do. But it's not

terribly uncommon actually to see this with
spans. Because spans are always nested inside

of an element. So a lot of the time that span
will be nested in titles all the time. So

you have a span that's always in an h1 and
h2 or h3, and that span is always doing the

exact same thing. Instead of taking time to
give it a class people will make a compound

selector. So using a compound selector, see
if you can change the color of that, instead

of giving it a class. So what we can do is
my h1, then there we go. I spell it right.

And on that we can give that one the color
to overwrite. So that would be B seven 832

F, just like that. And let's go take a look.
And there we go, Oh, I just one last thing

that I forgot on there is just the text align
center text align, center that I can put on

that as well. So everything is in place. In
the next video, as I said, we're going to

give these their dark background color. And
then after that, we'll see how we can actually

get these columns to start behaving properly.
Alright, so our layer is falling into place.

Now we want to add the background color to
these two. So before we do that, I'm going

to give you a hint. And I'm going to see if
you can solve it if you haven't already. And

that is we're going to do this in a very similar
way to how we did our buttons, where we have

a main class that's controlling our button.
And then we had a secondary class that we

would use to modify that to add colors or
change the colors of our button. So with that

hint to see if you can figure out how to add
that background color and a little bit of

padding to those two divs. And once you get
it or if you get stuck, I'll show you how

I would do it. Alright, so I'm gonna go back
into my index to do this. And I'm going to

find the divs in question, which is this one
is the first one we need because it's the

third column inside of that first section
there. And on that call, I'm going to give

this a call BG class. Now it could just be
background. It could be pretty much anything

you want. The reason I'm starting it with
the C Yo L is because I'm modifying a column.

The specific reason for this is to act as
a column modifier. So I'm putting called BG,

to modify my column, it just helps me stay
a little bit more organized, could you do

it in another way, 100%, you might have another
name that you came up with, which was amazing.

And it probably is, there's not one naming
convention that you have to use or follow.

In fact, there's tons of really good and well
thought out naming conventions out there,

that all look at things in a little bit of
a different way. The important thing is that

you do have a naming convention. And there's
a little bit of logic to how you're doing

it, because then other people can figure it
out. Or when you come back to a project six

months later, you understand what you were
doing. So I'm going to put called BG there.

And I'm going to come down here and do a call
BG on this one as well. And then I'm going

to come up into my styles where I set up my
columns, I will do my call bg. And I'll give

that the background color that we need. So
I'll write background, and let's get that

dark color that we want. And let's give it
a little bit of padding. So I'm gonna give

it padding of 8.5 M, because I don't want
a lot. And as I said, I'm usually using M's

for my padding. Again, I'm thinking my font
size is 16 pixels, half of that sounds pretty

good. Maybe I want one, but I'm going to look
at it and see what it actually looks like.

And then I can decide if I thought if I think
it looks alright, they're stuck together right

now, which is a little bit of an issue. So
let's actually come on to my columns here

and just give us a bit of a margin of like
one m top and bottom and zero on the left

and right, just to help give us a little bit
of space between things. And we can see that

the padding doesn't look too bad, probably
a little bit small. Actually, because I'm

looking at the two sides there, I can see
that the top and bottom is about what I want.

But that's including that margin that's on
my text by default. So let's go and boost

that up to maybe a one at the end. And I think
that looks a little bit better. So over here,

I'm going to take off the margin that's on
that text, especially on the top. So we're

just going to go into my typography section
here and add in my paragraph and give that

a margin top of zero. And there we go, it
is working this bottom one will end up with

a little bit of extra space. As you can see,
actually right now they're stretching, we're

going to look at how we can fix this stretching
behavior eventually as well. And it will leave

a little bit of extra space on the bottom.
But it isn't the end of the world. Oh, and

looking at this, this text is a little bit
hard to read. So on that call BG anytime a

column has a background color, we can also
have it come and get an actual color too.

And we'll give it the FFF or just white keyword
would be fine as well. So at least we can

read our text a little bit better, super.
So our layout is coming together, it's working,

it is responsive, it's changing in size, it
will work in different screens. That's pretty

exciting, right? It's not set at one screen
now. But our column widths are all screw with

and we want to change those I did the background
color first on these on purpose, because it's

the same technique that we're going to use
to actually change the size of the other ones,

we're gonna use a modifier class that can
control the size of our columns. So I'm going

to try and go ahead and do that right now
on this one, and whether you get it or not,

we'll see in the next video, how I am going
to approach it, the one thing not to worry

about yet is this spacing between them, it's
just thinking about the logic behind it. And

then we can go through and worry about how
to create those spaces, because we're actually

going to see a new property to be able to
do that. Alright, so let's fix the width on

our columns here to get them to be the sizes
that we want them to be. So if you remember

I said that I'm gonna use a modifier class
once again. Now you don't have to necessarily

use a modifier class, but we're going to get
really used to using modifier classes. So

I want you to sort of get in that mindset.
Now you originally I was going to look at

it was we can use our call, which would be
this would just be one width, and we could

have a call two and a call three. But I'm
going to set up the same idea. But I might

have a call one call to call three and there
could technically I guess be a call for that

would stretch the whole width. Now I am going
to keep this slide. I didn't keep this slide

here though, before I thought of that, because
I did want to look at the idea of why I'm

calling it call two and why I'm calling it
column three. And the way I'm looking at it

is this is a four column layout I have, if
I divided this into equal spaces, I have four

if I took the smallest column, I could have
four of them across the entire width of this

layout. So it's a four column layout. This
one is double the width of this one, and this

is three times the width of my sort of default
or my smallest column here. So I have my column

two, which is going to be double the size
and this one which is going to be triple the

size. So what I want you to do is if you didn't
do it on the last video, when I said you have

a chance because you weren't really sure what
to do, try giving it a go now that I've explained

a little bit more, and then I'm going to look
at sort of the trickiest thing was how do

you decide exactly how big they should be?
Alright, so I hope you got it. So what I'm

gonna do now is I'm gonna come over here,
and I'm going to come in actually to my index

here first, and we have to add those class
columns to here. So this is a column and it's

going to have the width of a column one. Then
I'm going to have this one have the column

two and this one is also going Maybe a column
one. Down here, I'm gonna have a column three.

And this last one will be a column one. So
if I come over to my styles now, and I come

and create some styles for those, so we're
gonna have a call one, a call to, and a call

three. And what unit do you think would make
the most sense for setting the sizes on these?

Like, if you were going to do what's the easiest
way you can decide the width that one of these

would be? You know, pixels would be a nightmare?
Just because you don't? How many pixels big?

Should it be the screens always changing.
And then well, then it's not going to work

at all the screen sizes, M's, and Rams Same
deal. It just it's not going to function.

This is where percentages really come into
play. So my call one, I can give this a width.

The question is, how big do I make it? Well,
I just said when we're looking at that last

slide, we're going to divide this up into
four. So if I made this 25%, then I know that

this one should be a width of 50%. And I know
that this one here should be a width of 75%.

So let's come and look and see how that worked
on my layout. And look at that. Everything

is lining up. This is a call one and this
is a call one. So now they're actually the

same size as one another, they're working
out the way we'd wanted them to work out before

they're matching each other. That's that's
perfect right before this was bigger, but

it was a lot bigger. Now everything is lining
up with one another. The only problem we have

now is there's no space between our columns.
And there's a lot of different ways we can

approach this lack of space, a lot of popular
ways are using margins and padding to create

space. But then this first column needs a
different style, because you can't have any

margin on the left or this one needs a different
style because it can't have anything on the

right side. And then you know the same thing
here, you start getting into a little bit

of issues or problems with it. And luckily,
Flexbox actually has a really good way to

solve this problem. We're gonna see that solution
in the next video. Alright, so everything

in our layout is starting to come together.
But the problem now is our columns are stuck

together. So as I mentioned in the last video,
we can fix this by adding some margin to them.

But then you have the problem, how much margin
do you add, and then stuff doesn't really

fit as well. So luckily, Flexbox has a way
to make it a little bit easier. And it's something

called justified content. And this is a new
property that we're going to be using. We've

already seen when we have Flexbox. When we
do display flex, this is what's happening,

right, the parent gets display flex, and we
get columns. Now we can add a new thing called

justify content. And there's a few different
properties on justify content, but one of

them is called space between. And what that's
going to do is it's going to take the extra

space that we had, and it's going to put it
between all the elements. So we look here

as an example, we had all this extra space
that was left over on the left side. So when

we add this justify content space between
it's taking that extra space, and it's putting

it in between the columns, instead of leaving
it over on the right side. So what I'm going

to do is first I'm going to exaggerate that
a lot, where I'm going to change all these

numbers, but let's make them like pretty small,
I'm gonna say it's 1020, and 30%. And as you

can see, we get all this leftover space and
it's just floating over here on the side of

our page, we get all this empty space like
that. So what I can do is on where I have

display flex, so it's always on the parent
in the same place that you declared display

flex, we can then come down and you are just
d phi d phi content. So it's just like that

two words, but they're hyphenated all properties,
they'll always just like we've started seeing

max width is max width with a hyphen in it.
So justify content is the same. And then it

will be space between there are two other
vowels you can use. And we're going to look

at those in a second. But this is the one
we're going to be focusing on for now, which

is space between. So now if we go and look
at our design, we can see that we have this

giant space between them because it's taken
all that space that was left over on the right

side. And it's evenly distributed it between
our columns now, which is awesome. Now in

this exact situation, it isn't the best, but
it is pretty cool. Now the other two options

you do have between other than space between
your space around. So what space around is

going to do is it's also going to put the
space on the left and the right space between

make sure that the item that's farthest to
the left and the item that's farthest to the

right stay all the way on the sides. We're
a space around we'll put space around each

item. Now the thing that's a little bit weird
is the way evenly distributes that space,

it's taking the space and it's evenly putting
some on the right side of our element here

and on the left side, and then it's putting
some on the right side of this one and on

the left side and the right and the left.
So what that does is it does create this thing

where the right space and the left space are
always smaller than the spaces in between,

because it's doubled. Since this one you're
getting equal spacing on each side of each

element. So these get bigger spaces than on
the two ends. So more recently, they've come

up with one that to fix that problem. And
that one is spaced evenly. And what space

evenly does is it tries to make it visually
look like it's balanced. This despite width

display. than anything else, it will make
all the spaces be even, instead of doing that

weird space around things, so space seemingly
is a really nice solution. But for now we're

going to stick with space between and it's
probably the one that you're going to be using

the most often. So what we can do now is we
can fix the actual width we had on here. Now

Originally, we had this as 2550, and 75. But
the problem with that is, that doesn't leave

any space for our space between to redistribute
because when we add all of those up, we're

always hitting 100% 25 and 25 is 50 plus 50,
is 100. And if we come and look down at the

bottom, we have 75 plus 20 fives, we have
100% space there as well. And so for simplicity,

now, I'm just going to reduce a lot, we're
gonna take 5% off each one of these, so this

will become 45. And this one will become 70,
we take 5% off on all of them, it's going

to leave us a whole bunch of extra space that
this space between can now redistribute in

between our different items. So if we go and
take a look, we have our nice big gaps in

between all of them. Now, everything should
be lining up pretty well. And it is working

out nicely when we go on bigger or smaller
screens. Now it's not 100% perfect, because

our padding is making these columns a little
bit bigger than what they were. But for the

purposes of what we're up to right now, I
do think it is good enough, and it is working

really well. So I am really happy with it.
In the last one, we saw how we can control

our columns on the horizontal and we can space
things out on the horizontal axis, which is

our main axis. In this video, we're going
to be seeing the Align items property, which

works with Flexbox, just like justify content
does. And what this does is it allows us to

control our items on the vertical axis instead
of the horizontal. So when we do our display

flex, we get all those different block level
elements, which turned into columns and stacked

next to each other when they become flex items.
And one of the things they do when this happens

is they actually stretch the whole height
of the div and the height of the div is generally

controlled by the item which has the biggest
height. So this a lot of time is actually

a good thing. It's something that we wanted
in CSS forever, because it used to be almost

impossible to match heights of different items.
And now we can actually do it really easily.

But it's not something we always want to do.
Sometimes we want things to align to the top.

And so we can use align items, and we use
the value of flex start to be able to do it

where they'll all shrink and be just dependent
on the height of whatever is inside of them.

And this is one of the ones you'll probably
use the most often. The next one you can do

is Center, which is also really, really handy
vertically centering in CSS used to be an

absolute nightmare. And a lot of the time
you want to be able to vertically center stuff,

you can do it with Flexbox, which is super
nice. And if you want to align things all

on the bottom, you can do it with flex. And
there's also the stretch, which is the default.

And just if you ever need to reset and go
back to the way things were if to overwrite

something, there's also another one called
baseline that I'm not really going to get

into too much. Now. It's the one that people
don't use very often it deals with the text

inside the elements. And it's a little bit
weird, but there is the baseline one as well.

So to take a look at an actual layout, what
I've done is I've taken the layout that we

were working on before and they've eliminated
a bunch of the content just so we can focus

on these three columns here, I put a blue
border on our columns container just so we

can see it. And I've put the pink border or
the magenta border here on our columns, all

of these borders are just to help illustrate
what's happening with all of it. So as I mentioned,

when we do a display flex, everything turns
into a column. And by default, they stretch

to match the height of their parent and the
height of the parent. In this case, if you

remember, any block level element, by default
will be a height of zero, but grow to fit

the content that's inside of them. This is
the one that has the biggest height on it.

So our parent is growing to fit this middle
container. And that means these other ones

are stretching to match its height. Sometimes
that's a good thing. But it's kind of weird

that this brown box on the right side is stretching
to fit the height there, I find that really,

really awkward. So what I'm gonna do is I'm
actually gonna put this on the side. So we

can take a look at it while we're working
and really see things live while I'm editing

some code here. So let's come down on to where
we have display flex, and we have our justify

content. So again, that's for the main axis,
or generally the horizontal, we can switch

that and we're gonna see that a little bit
later on. But for now justify content is on

the horizontal axis and then align items,
we'll be dealing with the vertical axis, or

you're going to start hearing me say across
axis a lot more. So up and down at the current

moment. So what I can do on this is I can
do a flex start. And when I do that, you'll

see here, everything has shrunk to fit the
content of what's inside of it. And this is

sort of the behavior that you might expect
to be the default. And it's the one that you

as I said, you probably if you want to override
the default, this is the one you'll probably

use the most often. If I turn off the border,
which is right here, you won't really see

you won't actually see a difference on those
first two columns when I do it, it's just

that brown column that's jumping to really
long or shrinking down. In reality, this one

is doing it to it just because there's no
background and there's no border on it. It

doesn't actually make a big difference. So
if you don't have any background colors or

any borders, you probably won't have to worry
about This too much. But as soon as you have

something that has a border has a background
color has a shadow on it, which we'll be exploring

a bit later, all of those things will affect
what's going on. So that's where you might

want to bring in your flex start to make sure
everything is shrinking down to where you

want it to be, we also saw that we have a
flex end. So that's going to push everything

to sit along the bottom might seem a little
bit weird it is. But you might be wondering

when I would use it, not terribly often, probably,
but it is something that could come up. And

then we have our center, which you'll use
more often than you might think. And it can

be really, really handy. As I also mentioned
there is the baseline, you'll notice that

the way the baseline one works is it's taking
this first line of text and it's making this

is a bigger font size than this one, it's
making sure all the text on that first line

is actually sitting on like there's this imaginary
line that goes the whole way across under

the first line of text and every box. So if
we actually came and just for one, change

the h2 font size here, let's just double it
up to three, it's pushed my brown box further

down. So everything is matching this. The
first line is lorem ipsum. Right at the top,

the bottom of those letters is lined up with
the bottom of this, the baseline is dealing

with the bottom of the first line of the text,
you probably won't use it very often. But

I figure I'll bring it up because you might
run into it at one point or another. So that

is how the Align items works. Let's go back
to flex start. Now. The one thing that does

drive me a little nuts is its flex start flex
and of course center and flex center. I don't

know how they decided that or why they decided
it. But that's what it is. And we do have

to live with it. For any module, the course
is all about starting to think responsively.

And one of the most important things to building
a responsive layout is understanding media

queries. So we've been looking at this big
screen layout. But we want to be able to make

this work at small screens. And to be able
to do that we need to know how media queries

work. So you might be asking what is a media
query? Well, it's this feature in CSS that

lets us add new styles that target only specific
conditions. So the basic syntax of a media

query looks something like this. But there
are a few other things that we do need to

include in here for it to actually do something.
So the first one is the media type. And we

can also include media features. So media
features are certain things about the media

type that we're looking at. So we can be very
specific with the situations that we're trying

to target to put in additional CSS, the media
type itself, it lets us target different types

of media. As the name implies, we have a screens,
we can target our screens specifically. So

I can read at media screen, we also have print,
and I said there was a third one. So the third

one is speech. Under media conditions. Those
let us target specific conditions within that

media type be include width, so you can do
something like that media, min width 600 pixels,

orientation. So you can actually say like
I want an orientation is landscape or portrait.

You can also look for specific features of
that device like hover, can that user's primary

input device actually hover? So where are
they using a mouse? Or are they not you might

be on a tablet, and then the browser actually
will know that you're not using a mouse and

that you can't really hover. So you can actually
put write specific CSS that targets only devices

where you have that or maybe where you don't
have that ability. So that's really, really

cool that we can do that. Both media types
and conditions are optional. So you don't

have to include both all the time. But you
do need to have one or the other. Because

if you don't have a type or condition, it's
kind of useless, then we're not targeting

anything. So we do want to always have one
or the other. So for example, we can target

only screens. So I can say at media screen
and have some some styles there, or maybe

more commonly would be at media print. And
you might be going well, why why would you

target print, we're building a website. And
you're right, but let's say you had a recipe

website, and you wanted to make it. So if
somebody hit command p, they can actually

print out the recipe directions really well,
I'm sure you've also seen these recipe websites,

where it's like 10,000 words, before you actually
see the recipe you can hold up, you can actually

like literally make all of that through CSS
disappear, and only have the recipe itself

show up. And you can format it perfectly to
print on the page. And people would love you

for that. So something really cool you could
do through a media query and some CSS, we

can also choose only a condition such as the
width of the viewport. So if I don't include

the media type, and I just put the condition,
it's actually defaulting to a media type of

all so this is gonna look at all media that
have a minimum width of 960 pixels. In this

case, the one thing that's really important
is if you want to combine a type and the condition

with it, you actually have to use the word
and so we would write something like this

at media screen, and min width of 960 pixels
really quickly. While we're here, you might

also see times where there's the only word
in there, don't worry about it. It was for

old browsers, we don't have to worry about
it too much. These days, we can literally

just write screen. Another example here would
be screen and orientation portrait. For now

we're really going to be focused on the sizes
so we're not going to worry too much about

some other stuff. We're all going to take
a look at orientation in this video as well

though, but for this course, the focus As
on min and max width and making sure we understand

those, because those are the ones that we'll
be using the most often. And let's start with

a really, really, really basic example. And
this is not a realistic example. But it's

the type of example that sort of hammers home
exactly how these actually work. So let's

give this a background that is pink. And we
can take a look at it. Well, now my my website

has a pink background. And that's it. That's
all right. But let's come in here and write

a media query. So I'm going to do at media,
I'm going to do my opening, close parentheses.

And then I'm going to do my squiggly braces.
So we come into here, and I'm going to use

my min width, min width of 400 pixels, which
is pretty small. But again, this is just a

really basic example. So if you remember,
this is the same as saying all and minimum

width of 400 pixels, we really don't need
to bother with that. So we can just have our

media condition here of 400 pixels for all
of our media types. And let's change our background

color. Now, one thing, I do this all the time,
but I'll just write background here. But this

doesn't work, and then go whoops. The reason
that doesn't work is because we need to tell

it well, what are we changing the background
of so you literally have to come and write

your selector again. And this looks a little
bit weird when you're not used to it that

we have this like nesting inside of CSS and
HTML, we're used to seeing nesting, but in

CSS, it can look a little strange. Just have
to get used to it, though, because that's

how it works. So we have my media query opening
close curly braces, and then I have my body

selector inside of there. And I can say that
the background here is let's change it over

to purple. So now if I come and take a look
at small screens, it will be pink. And then

when they pass a certain width, it will be
purple. So what's happening is this here is

saying from a minimum width of 400 pixels
and bigger from that size and bigger because

it's starting at that minimum width. And we
can do another one here, let's say an app

media, minimum width 650 pixels. And we can
say on this one, my body has a background

of orange. So let's go take a look again,
let's go smaller, so it really small screens,

it's going to our default pink, that's just
like, Well, when I say default pink, I just

mean like the original style on my body of
pink, then as we make it bigger, oh, we're

getting over to that minimum with the 400
pixels. And then as we keep getting bigger,

we're going to hit there's my 650 pixels,
and then it will stay that color for as long

as we're there. So that is the basics of how
it works. Now one thing that's really important

here is, let's bring this comment down here
and put 650. Because the order of these is

really, really important. And this goes back
to a little bit the same way. If you remember

when we were looking at the pseudo classes
for links, a link, a hover a visited a active,

all of those, you could actually be in more
than one of those states at a time. Because

if you're clicking on something, it's active,
but you're also hovering over it. So the order

that you put those selectors in changed, if
what you actually wanted would would kick

in, right. So it's the same thing here. So
if I move this one, up to here, it's just

always gonna be purple. So let's go take a
look. It's purple. And it's purple, and it's

purple. And then it's pink, this completely
gets skipped over. Because it's looking at

this and it's saying from a minimum width
of 650 pixels and bigger. But well, this condition

matches, you know, this is 400, and bigger.
So 400, and bigger includes 650, and bigger.

So it goes here, but it goes Oh, well. It's
the same as if I had here, I paragraphs should

be red color, red. And then I said my paragraphs
should be color. yellow, yellow is going to

win because yellow is second here. So if we
come and look, my paragraphs are yellow, which

we don't want to do. But it's the same concept
that's coming here. This is true. And this

is true. So I'm going to take the second one.
So the order is really, really important.

Now one thing you can actually do, which we
didn't see in the slides, you can combine

two different media conditions as well. So
I could also write an ad here and say a max

width of 649 pixels. So now we've this CSS
will only work between 400 pixels, and 649

pixels. So now if we go and take a look, we
will still get our purple, but we will also

get our orange afterwards. Because this no
longer works. Once we get to above 649. max

width is always from zero Intel. This is a
maximum width of. So that's also really, really

important. So from a minimum of 400 pixels,
up to a width of 649 pixels. I'm going to

do one more I'm not going to delete this.
I'm just going to comment it out. And I do

want to look at this, but I'm gonna change
the number in here because it's going to make

it a little bit easier to play with. So let's
just bring this down to 500 pixels. So right

now we have the pink background which we'll
switch over to orange when we hit that specific

screen size. So pink over to orange, I said,
we're going to focus on a min and max width,

but I just do want to look at orientation
a little bit. So orientation. And I'm going

to make this one landscape. So a landscape
orientation when something is some when something

is wider than it is tall, and you have portrait,
which is when it's taller than it is wide.

So if we have the orientation of landscape
on there, we can see it's pink, it's pink,

it's pink, oh, well, now we have it as orange,
because you can see that it's wider than it

is tall. But that's fine, that little ground
here. So here, you can see actually, when

I'm switching only the height and not the
width, that it's actually switching between

the two of them, because right now it's wider
than it is tall. And now it's taller than

it is wide. So we can actually have CSS that
looks at the viewport height and width, and

applies certain rules too, which can be really,
really interesting. So it can also help when

you're dealing with like tablets or phones.
And when people are moving things around in

the orientation, you can even look at specific
aspects ratios, there's a whole bunch of extra

stuff that I didn't even really mention that
I'll link to in the notes of this lesson,

it's on the MDM page, I don't really want
you to take a deep dive into that, because

it can seem awfully confusing. But I do want
to make you aware that media queries, you

can do a whole bunch of stuff with it, it's
actually really, really powerful. But I'd

really encourage you to do now is to play
around a little bit with what we have here.

And I'm going to take this one off, actually,
and alternate this one back on and play around

with this, we're going to be using media queries
a lot in the project we're working on from

now on. But I'd really like you to play around
with it a little bit to make sure that you're

comfortable with them, because they're super,
super important to understand. And when you're

feeling a bit more comfortable with it, you
can jump into the next video where we're going

to be applying all of this into the project
that we've been working on. Our layout is

already a little bit responsive, because when
we grow it is working. But when we shrink

it a will shrink with our site. But we run
into this problem that we have it just getting

way too narrow at one point. And we do end
up with a bit of side scrolling, just because

the text doesn't have enough room to live
and to work. So we want to make it fully responsive.

How can we do that? Right, we want to make
it so at one point, these columns break and

it turns into them stacking on top of each
other instead. To do this, we actually we've

already started using display flex. And so
when we use display flex, it creates columns.

And that's because there's something called
flex direction and it's set to row. This is

the default behavior. So when we say row width
means that the parent is a row. So that means

all the children become columns within that
row, this is the default. So if you don't

declare this, it's just going to be there.
So you don't have to declare it a flex direction

row. It's just that's the way it's going to
work. But we can switch that flex direction

from row two column, this switch is the main
axis and that I'm going to be talking about

the main axis a lot in the next video, we're
just going to see a little bit of how we can

work for our layout in this one. But basically
what it means is the parent has become a column,

so all of the children inside of it have become
rows. So if we have our display flex, it's

doing this where all the children have become
columns. And when we add flex direction column,

it's making the parent now a column so the
parent is going up and down and all of the

children become rows. And you might say this
looks a little bit like the default when we

don't even have display flex. And you'd be
right. But there's reasons that we'd want

to do this. So let's go and give it a try
with our layout and see how it can work. We're

going to want to do this with a media query
as well. So let's just come to here where

we have our display flex. And as I said, the
default on that is already a flex direction

of row. So we don't need to declare that because
it's already there. If you want to, you always

can. But we don't need to. But what I want
to do is come and do a media query. So if

you're feeling really comfortable with media
queries, and you're sort of got the hang of

it, when you're playing around in the last
video, I'd encourage you to go ahead now and

create a media query, we're going to target
a screen size of about 600 pixels. And because

we've already set it up for big screens, we're
going to use max width. So remember, max width

is meaning from small Intel that maximum size.
So for the small screens, I'm going to target

a max width of about 600 pixels, and we're
going to switch the flex direction on it.

So if you want to give that a try, you think
you can do it, go ahead and do that in a few

seconds. I'll do it myself. Let's go and make
my media query now. So remember, it is always

add media, then we always have our parentheses.
And then we have our curly braces, I'm going

to push return to give myself the space. But
I'm going to come in here and set my max width.

So max width 600 pixels. And then we can come
into here. Now one thing and I do this too,

and I've been writing media queries for a
long time, is I'll just start writing the

properties I want. So I'll come in here and
do a flex direction. So if you did this and

it didn't work, it's because we have to choose
our selector again. So it's a little weird

that we have like these nested selectors inside
immediate queries, but that is how we are

going to be working. So I'm going to do a
dot columns to select my columns and then

make a opening closing curly braces and now
I can come in here and do a flex direction.

And my flex direction will be calling. So
let's go and see if this works. So everything

is looking great on the big sizes. And then
when we shrink down and we hit 600 pics Boom,

look at that everything is stacking on top
of each other. Now, it's not perfect, right?

It's not great, but everything is stacking,
which is what we want it to happen to begin

with. So that is really, really good. But
what's the problem? Why are these so not taking

up all the space like we want them to? Well,
if you remember, we set widths on all of these.

So that is where the problem is coming in
right now. So what we can do is create a new

media query that is going to change all of
those to give them all a width of 100%. So

what I'd encourage you to do now is actually
to go ahead and try doing that, and seeing

if you can get it to work. So we can do it
all with one selector. But I want you to go

ahead and try doing that. Now that you've
seen how I've done it, we want to target the

exact same screen size. And once you've done
it, I do want to look at a bit of a best practice

of using media queries as well. Right, so
what we can do is I'm going to copy this media

query that we already have right here, and
I'm going to paste it down at the bottom.

And we can delete this here. If you tried
redefining these columns inside this media

query, it wouldn't have worked. The reason
it wouldn't have worked is because first we'd

be doing the media query, and then we'd be
following it up with these. And these would

overwrite the media query, because this would
only be looking at a max width. But this is

looking at all situations. So just like we
saw in the last video, the order of things

really matter. Media Queries should always
come after the default selector that you already

have. So we can come into here. And you could
either have done just call like that, because

all of my columns have the also have the call
selector on them. So I can say call width

100%. And it will work. Or if you went and
you did call one call to and call three, and

gave them the width of 100%. That would also
work. I actually prefer this even though it's

a little bit longer, just because we've set
the sizes here. And then we're explicitly

setting the sizes here. So it makes it really
obvious that we're resetting these specifically.

Whereas if you went with that call selector
just to see Oh, well, it might not be as obvious

that you're targeting these ones specifically.
But either way, I think it is perfectly fine.

So let's go and take a look and see if that
worked. And look at that it is working. Oh

my goodness, isn't that cool? Isn't that really
fun, that everything is pretty much falling

into place. And our whole layout is changing,
like boom, just like that, the whole thing

comes and just it works, which is really,
really handy. And really, really fun and cool.

Now, one thing, before we leave this video,
we do have that padding issue, I'm not going

to worry about that one, right now we're going
to worry about that in a future video. The

one thing that you are noticing now is actually
if two media queries, and you could simplify

things by having just one media query that
has everything in it. And a lot of people

will do this, where they're gonna have all
their styles. And then at the very, very,

very bottom of their style sheet, they're
gonna put all their media queries so that

way, they don't have to put like 10 media
queries that are all targeting the same size,

they can just have one media query. So even
this called eg I could bring up to here, just

to clean it up. And then I have my media query
at the bottom that's making the changes that

I need to, it does make for you writing less
CSS, but sometimes when you have a really

complicated stylesheet, personally, I find
it complicates matters a little bit. And while

it will make your CSS file a little bit heavier
and a little bit bigger, I've seen some there

have been some tests done on when you're repeating
yourself a lot with media queries, how big

of an impact it has, and it's really not that
bad. So if you prefer keeping your media like

your columns, and then your media query for
your column here, and then your these and

then the media query for those there, there's
no problem with it. That's actually the way

I prefer to work, I find it much easier when
I want to make changes, all my columns, styles

are grouped together. And then all of these
are grouped together. But if you want to work

one way or another way, that is completely
fine. So let's take a look at how flex directions

actually working. And what's really going
on with this. So when we have a display flex,

we've seen the decree its columns, the reason
it's creating columns is because the flex

direction on it is row. And that's the default
behavior. So if you don't declare wrote this,

it will be row and there's nothing you really
have to do there. So that's where it makes

columns. And it's doing that because it's
treating the parent or the flex container,

like a row of content. So that means inside
of it, all the flex items, or all the direct

children are going to turn into individual
columns. Now what we can do is we can change

our flex directions, we can say flex direction
is column. And what that's doing, is it switching

the main axis. What do I mean by that? If
we have a something that has a display flex

on it, it looks something like this, we have
our flex container, it's a row. So we have

our columns of children inside of it. But
if I change my flex direction to column, now

the parent is becoming the column. And these
are becoming rows inside of it. And this sort

of makes it look like the original default
behavior. So you might be going well what's

the real point of this? It's really important
to understand you're switching the main axis.

So you're keeping all of the Flexbox properties,
all the amazing things that you can do. Now

we've rotated our main axis from being horizontal
to being vertical. Why does that matter? Well,

let's say we have something that looks like
this. We've done our display flex on it's

we've made our columns, we know we can use
justify content space between and that's going

to space all of them out. It takes all the
empty space that we had that was left over

here, and it redistributes it in between each
one of my columns. And that's just super handy.

Well, if I take my display flex, but I go
in and add a flex direction of column on it

with my justify content space between now
it's going to redistribute the space that

was down here between each one of them, because
justify content is always working on the main

axis. And we've switched the main axis it
was going left to right, but now it's working

vertically, it's working up and down. So if
I wanted redistribute the space, I can use

my justify content vertically now. So that's
really cool. So always remember, when I change

my flex direction, justify content will now
work vertically, and align items will now

work horizontally, because we switch them
in axis. justify content always works on the

main axis align items always works on the
cross axis. So a few reasons you might want

to do something like that are examples of
how things change. So we have my flex container

over here, and the line items flex start,
they'll usually line up at the top like that,

instead of stretching to their whole height.
If I switch the flex direction, they're going

to do something like this, where they're all
getting sucked to the flex start, which is

on the left side. Now, my flex end would be
on the opposite side over there. We know that

we can center items vertically, which is super
amazing with Flexbox. Well, now we can center

them like this. And of course, you can combine
that with your justify content. So it's not

the line items is centering it horizontally,
and then by justified content space between

is spacing them out vertically, as long as
the container is big enough to have empty

space on the vertical axis, they're always
remember, when you use flex direction, you're

switching the main axis align items now works
horizontally and justified content now works

vertically. Element because the now it's time
to look at how we can create a navigation

for a website. And all this flex stuff really
comes into play when we're styling a responsive

navigation for a site. Before we get into
the CSS, we need to know the markup behind

them. Traditionally speaking, we use an unordered
list and the unordered list will be placed

in another element because the nav will be
telling the browser that this is the main

navigation for our site. So it will look something
like this where we have a nav inside the nav,

we have the UL which is our unordered list.
And then we have our list items which are

links, there is some debate these days on
whether or not we really need it to be in

the list. The reason that we have traditionally
done it this way is for accessibility reasons.

And because it is a list of the different
pages that are on our site. These days, there

is some discussion about whether we need to
or if we could just have a nav with a bunch

of links in it. Some people do this, but most
sites you ever work on will be set up this

way. And this is still by far the most popular
and common way that you will see navigations

created. So it's really important that we
understand how to style a navigation when

it's set up like this, if you can do it this
way, it's much simpler if you didn't have

the list items. So I do want to show you the
more complicated way because again, it is

the one that you will run into in the real
world. So I want you able to do that. Once

you're done in this course through the next
bunch of videos, this is what we're going

to be working on which will be the navigation
for the bigger site that we will be working

on. And we're going to start with this one
here, then we're going to move into making

it look like this instead. And then we're
going to make this the responsive version

of this one right here. I'm going to go back
to this slide and leave this one here for

now and encourage you just to try and write
it all up and set it all up. So here are all

the colors and all the different things that
I will be using. And just to give you a little

bit of just see how I visualize this, when
I'm looking at it, I put these pink boxes

in to say I have my big, I have this big thing
that's going to be the whole size here, then

I'm going to have an element here. And that's
going to have my h1 and a paragraph. And then

I'm gonna have another one here, which is
the nav with the honor list. And the reason

that I'm setting it up like this is this is
going to be my header. And I'm, I need to

keep these two things grouped together, this
is just going to be a div called site title

or whatever you want to call it, it could
be called logo, it could be site title, or

just title, which is the main sort of title
of my actual website. It's almost like a logo,

but we're just using some text for it. And
then as I said, we need to have our NAB. So

that's what this is going to be for. If you
want to start off and do it on your own before

you watch me do it. In this video, I'm only
going to be doing the markup you can see I

have given you everything you need here to
do it. And I've also already linked to the

Google Font and given you the two font families
listed right here. So if you want to go ahead

and do more, by all means, see if you can
get the whole thing working. In this video

though, I'm only doing the markup. And then
the next one, I'm going to start doing the

CSS for it. Alright, so let's jump right into
it. So I'm gonna go in my body. As I mentioned,

I'm gonna have my header and close header.
And let's get inside of there. And we can

start putting some stuff. So I had that first
part that had my title in it. And I said,

I'm going to group that in a div. So let's
give that a div class. And I'm going to close

that div. And then we can give our class a
name. So let's just call this site title.

And in there, I'm going to have an h1 because
it's really the title of my entire page or

my entire site, and I'll come down and also
put a paragraph now my paragraph I will give

a class to have some title, and close paragraph,
I'm not using an h2 because h2 is really aren't

meant to be subtitles, they're meant to be
titles for different sections of the website,

we build out the full site, hope we're gonna
see them, we're gonna have a few h2 and threes

in the larger scale site once we get to that.
So for now, I'm just doing a p class of subtitles.

So I can style that different from my other
paragraphs that I will have within this site,

once we get to a bigger one. After that, I'm
going to come and give myself my nav, and

close nav. And we can come into here. And
I'll have my ul, and close ul. So that's my

unordered list. And then I need my list items.
So Li, and inside my Li, I do need a link.

So a href is equal to and close a, and let's
just take this whole thing and copy it, paste

them there. And now I can come through and
fill this out. I'm just gonna put hashtags

for now because we don't have anywhere to
go. Once we build up the whole site for this

rectory I have a three page sites, we're gonna
have to put in real links in here eventually.

But for now, we'll put the placeholder, this
is my home ism in life. There we go, there

is all my content. And you can see it doesn't
look at all like what we want it to. So in

the next video, we are going to start styling
this up and making it look better, we have

to deal with some extra spacing, we have these
bullet points we need to disappear, there

is a whole bunch of stuff that we need to
do here. So we're gonna see how we get rid

of those bullet points, and then how we can
bring in Flexbox, and how it's going to work

for all of this and how it makes our life
much easier in setting up everything, how

many bullet points, we've got everything set
up, but it doesn't look so nice right now.

So let's go and take a look at how we can
do it, there is something new that we need

to look at is how do we even get rid of those
bullet points, which is kind of interesting.

So for this one, I'm going to leave this on
the side here. So we can at least see the

changes that I'm making happen live, we're
going to jump over to my styles. Now for now

we have all these fancy designs and the colors
and everything, I'm not going to worry about

those for now. Because I really want you to
be focused just on how Flexbox works. And

doing the overall styling and setting this
up. I don't want to distract with other CSS.

But we will be building out this whole thing
for an actual website. So we will be getting

into all of the different styles that we need
to do for this eventually, because I'm not

worried about it, I'm not going to be terribly
concerned with him organizing my CSS. So let's

start with my nav. And I don't have a lot
to do on that. Now you'll notice here that

I have my nav and a ul Li and I have my a
and we need to style all of these, there's

stuff that we need to do on all of them. But
what I what you will see some people do is

you will see people give classes to this.
And I actually do this on a regular basis

where you'll have a nav list. And then this
would be a all three of these would be a class

of nav list item, or nav Li and then my links
themselves could have a class on them of nav

link or something like that. And I have done
many projects like this, I think it makes

a lot of sense, it does make your CSS a little
bit more organized, or maybe not more organized,

but a little bit easier to read. So if you'd
prefer to take that approach, by all means

go for it. For now, though, I do want to show
that it is not the end of the world use compound

selectors. And this is a really common time
to use it, where I'll take my nav ul, we're

gonna have some styles on that, I'm gonna
have my nav Li, I'm gonna have some styles

on that. I'm gonna have my nav a, and have
some styles on that. And of course, my nav

a hover and have some stuff on there as well.
Now, what I will not do is have my nav, ul

Li and you will see tutorials online that
do this. And then here it would be my nav,

ul Li a. In the old days, it was a performance
issue, the more complicated your selectors,

the browser would take longer to read that
selector, because it would have to read Oh,

I got all my links. Oh, but now I have to
find the ones only in list items that are

only in my unordered lists that are only in
my nav and it would actually slow the rendering

of your CSS down a little bit. But browsers
have gotten really, really good and really,

really fast at reading CSS. So it's less of
a performance issue. It does hit on specificity

a little bit in that this is becoming more
specific for nothing. And it's just makes

it complicated to read and takes a bit more
of a cognitive load. When you're looking at

it, you got to think for half a second when
you don't really want to be thinking whereas

if I just leave it like this, it keeps it
nice and simple. So personally, I like to

keep it like that. And most people were advocate
if you are going to have compound selectors,

which are already sort of frowned upon, keep
them really, really simple when you do use

them. Before I jump in, I'm going to fast
forward I'm actually going to put a border

on all of these just so we can really easily
visualize what's actually happening. Alright,

so there we go. We can see all of my elements.
I didn't put one on the hover because I don't

think we need it. But we can see my ul my
Li and my a so the big pink box is the UL

the dotted orange box is my Li and then these
green boxes there are the links themselves

which are the AE and we can see that the UL
and the Li are block level elements because

even though the text is really short, those
are stretching the full size of what's happening.

But you will notice that my L eyes are starting
here. There's this big empty space next to

it, that's because of the way the URL is set
up to give us room for those dots. So the

first thing I'm going to do is turn off those
dots. And there is a list style that we haven't

really looked at, I'm just gonna put list
style to none, which will make those dots

disappear, I just can't forget my semi colon,
there we go. And now my list style of none,

it turns off the dots, there are other list
styles that you can go through. But for now,

we're just going to switch them off because
we don't need them. Now, if we think about

this, I have this ul, which is the big pink
box. And then inside of there, I have these

three orange dotted boxes. And those are my
allies. These are block level elements, how

can we make block level elements that are
one on top of each other switch and be one

next to each other instead, hope you said
display flex. So I can come on this ul and

I can use the display flex, and all of a sudden,
they shrink down to the content that's inside

of them. So these dotted orange boxes are
now the same size as my green one, we can

barely see those orange dots anymore, because
there's a little bit of overlap going on,

and they've gone next to one another. So that's
fantastic and really good. Now with display

flex, we've seen that we can do a justify
content and do a space either around or between

or evenly. So I'm going to do that really
fast. And you can see it space things out.

But we have this weird empty space left here
on the side, still, all of our paragraphs

and our headings have a default margin, top
and bottom. Because that we know erage because

the list normally has bullets or numbers on
the side, they have that default margin, top

and bottom. But they also have a default padding.
So it's really common to say padding zero,

that's going to get rid of that extra space
on the left sides, you can control things

properly. Now the problem with using space
between like this is it spreads things out

as far as we can get them to go. So depending
on the size of the window, this could actually

cause some problems. Or you can come in and
give this a width of 350 pixels. And now I'm

starting to get the spacing that I want. And
it looks nice. But now what happens if I add

a fourth item or a fifth item, and well, your
page when you first are creating it might

only have three pages later on, you might
create more whether it's a personal site for

you or a client site, then this number has
to be changed, or you have to change a media

query or it's a nightmare. So instead of doing
that, I'm going to remove the width from here,

and I'm going to remove my justify content.
And what I'm going to do is go into the list

items themselves. And I'm going to add a little
bit of margin to push them away from each

other. So in here, I'm going to do a margin
of zero for the top and the bottom. And when

I'm for the left and the right, the reason
I'm doing left and the right is because eventually

this will be a centered layout. And I want
the equal space on the left and the right.

If it was a left aligned or right aligned
text, we'd have to look at it differently.

And we're going to see that in a little bit.
But for a center to align one, I want that

margin on the left, and on the right now I
do have the problem that they're not centered.

And one thing people often will try is to
do a text align center. And it doesn't work.

The reason this doesn't work is because text
align center will send your text within its

parent. So if we look at this living social
life that's in my header, so if I come to

my header, and I do a text align, center,
it's centering Alright, actually, it's inside

the h1. So it's centering in that h1, which
is full width. And this paragraph, it's this

text here is centering within that paragraph,
which is full width. The problem here is home

is centered, but it's centered within its
Li and the lie is super small. So it's it's

super small because of our display flex here.
So I can't use a text align center on these

to actually move them to the middle. And I
won't lie I have been holding out on you.

We can use justify content for this. So the
same way we saw with a line items, we have

a flex and flex start and the center, we actually
have the same thing here, I can do flex end

and push things all the way to the end, or
flex start and keep things all the way, this

is the default. And it keeps things just starting
from the left side. Or I can do a center,

and it will center it exactly on the page.
So with that done, if I come through, and

I remove all these annoying borders, because
we don't really need them right now. So I'm

gonna leave this one here. If you want to
try and put additional styles or finish styling

it go for that. Or if you just want to play
around with the positioning and play around

with flex and the different things you can
do with it, by all means jump ahead and have

some fun with it. And then in the next videos,
after that, we're going to look at how we

can modify it a little bit and then start
making feet through taking off where we left

off. And we're gonna make this look a little
bit more like the actual design that we want

to have. So let's start from the top and sort
of work our way down. So I already have my

header there, but this doesn't need a background
on it. So let's add the background. And the

background for that one is the f8 f8 f8, which
is a really light color and you can't really

see it too well. So I'm going to make it a
bit darker for now. Just make it pink so we

can see it and we do see we have a bit of
a problem with the it's not touching the sides

of our page. And while we're here let's just
give this a padding on the top and bottom.

I'm going to put two m n zero just as a rough
estimate and we can always modify that but

I think it will work nicely. The reason I'm
doing two M is just through experience. I

know that 16 one M is 16 bits To me is going
to be 32 pixels. That sounds about right to

me. It's one of those things that I practice
with, I try and just use round numbers on

my M's. One thing and one piece of advice
I will give you in giving padding to things

is try not to go too small, but we're based
on a design and I think two M is going to

match my design more or less, I'm not aiming
to make it pixel perfect. I'm just making

me to make it look as close as I can. But
Sorry, I got sidetracked, we have this, this

problem of the space around. So how can I
fix that I want you to go and do it before

I do. So hopefully you came up under here
and you did, you're not making your body and

put in a margin of zero on there. At the same
time while I'm here. If I look at this, and

I also know the whole design, but I have this
subtitle here. And this is using Ubuntu. and

only the title is using Laura. So what I'm
actually going to do, and I also I you haven't

seen it, but I've seen the whole design for
this, I'm also going to take the Ubuntu font

family and put it on the entire thing. So
I don't have to read Eclair it throughout

any of these other things, the font size,
I'm going to leave alone the color for now

I'm going to leave alone as well. But maybe
when we get to the full site and we see the

whole layout, we can worry about adding a
color on the body for the header itself. I

think that is good, except we want to switch
this now to our f8 f8 f8 f8. Now we want to

start doing some type. As I said, I usually
do my type after my body. So I'm going to

come here, I'm going to make this a pretty
big section. So when I say big section, I

just put this big thing at the top and I'm
right type type for a word, I say all the

time, I have a lot of trouble saying it. There
we go, okay biography. And I'm going to come

down and we can start styling that up. So
I have my h1. And for some reason, everything

here is indented. So let's fix that. We go,
and it's everything in nothing. So my h1 and

let's give this the font family of Laura,
actually, we should just copy and paste to

be a little bit faster. Now, one thing you
might notice, or you might not have noticed,

but it is it might be showing as bold for
you. It's definitely I see this is bold. And

the reason it's showing as bold is I installed
Laura on my computer. And as we know, all

the headings, by default are bold, but I don't
want it to be bold, and I didn't even install

the bold version, I only have a Laura, I only
took the link to Google fonts for the regular.

But because I have the bold on my computer,
I see it, but other people visiting this site

might not. So I am going to explicitly say
I want the font weight to be 400. In this

case, I did not put that here, but I didn't
list bold, I probably should have written

lower regular or lower 400. And I didn't so
but I'm gonna change my font weight there.

And while we're here, we can set the color.
So the color for this one is the dark blue,

which is 143 774. And of course my font size,
which was which is to ram, I'm going to come

down now to my subtitle. So my subtitle is
a the font family is already Okay, the font

weight in this case, if you are bold, because
I said to be bold in my instructions here,

awesome. It works. If you noticed that in
my link, it was 700 all the better. But either

one is perfectly fine. I'm going to put 700
because that is what we want to get used to

writing, designers will often say bold or
black or extra bold because in the design

software, it doesn't use the numbers it gives
the weight, it just gives like a light or

a bold or things like that developers who
work a lot with coders might give you the

number, but there are some that won't. So
just something to keep in mind along the way.

If you wrote bold here, though, it's going
to give you the exact same result. So don't

worry too much about it. We'll also do the
color, which is 1792 D two, don't forget the

hashtag at the beginning or it won't work.
And last but not least my font size because

it needs to be pretty small, which is point
seven, five. And it's tiny, tiny. Now, the

one thing I want to do is I want to pull it
up, we have way too much space between these.

So can you fix that, see if you can fix it
and get rid of the space that's on there.

So I'm guessing the very first thing you did
was put a margin of zero on here and nothing

changes. So why did nothing change, I'll give
you a second to think about it. Now maybe

you already figured it out. And you did it
when I first asked you to. And if you did

amazing, that's awesome. The reason nothing
changed though is while this had a margin,

top and bottom that we just took off. This
also has a margin top and bottom, which is

still there. And this also has a margin top
and bottom on it, which is still there. So

this big space underneath is coming from my
h1. And this space underneath is coming from

my ul here. So on my subtitle, my margin zero
is helping but I'm an h1, I'm also going to

put a margin of zero on that to suck everything
up. It's also going to balance out that top

part I had a little bit better. Now there
are a couple of things, the text in this one

is all caps. And it is spread out a little
bit. I'm not going to worry about that quite

yet. We're going to get into that eventually.
The same with these with their all cap and

they're spread out I'm not going to stress
about that. I just want to set up the basics

of this for now we're going to explore typography
a whole lot more in the next module, which

is stepping up our style. But for now we're
just worried about responsiveness. I don't

want to overwhelm with too many new properties.
So let's get into this navigation because

we definitely need that To look a little bit
better, I tend because I need to change the

color of my nav a, and I need to remove the
text decoration of my nav a, I tend to put

all of my typography styles for my navigation
in the A here. So let's go and do that. I'm

going to say that their text decoration, since
we just mentioned that decoration is none,

we can set the color of it, which is the 70
7070, I can set my font weight to 700. And

of course, we want our nav a hover here. So
this is going to have a color on it. And I'm

just gonna use the bright blue. So it's really
obvious when we're on top of something, and

it really changes but I made a mistake. Oh,
my goodness, what's the mistake that I made,

I forgot something. Whenever we have a hover,
we should also have a focus state. So I'm

going to add that on there as well. Now, putting
the focus on here is not 100% necessary, because

when we focus, we're going to get the browser's
default to having a focus state already. So

you, I get like this glowing box that shows
up on something as well as my hover color

right now. But I prefer always making sure
that I have a focus state styled, that adds

more visual impact than what just the default
is. It's not 100% necessary, but don't turn

off that glove box, I'm not even going to
tell you how to do it right now. And there's

one last trick and that last trick is the
underlying that's on here, can you think of

a way to do it, it does involve adding another
class and everything else i think you know

how to do. So I'm going to let you see if
you can figure out how to do that. And in

the next video will give you the solution.
I'm going to come in. So not all websites

will include something like this. But it is
quite common to have something that shows

you what page you're actively on, am I on
the homepage, the about page, the Recent Posts

Page, or something like that. And as I mentioned,
it does involve an extra class. So I'm going

to come over here into my index. And on my
home, I'm going to come in and I'm gonna add

a class and we'll call it current page, you
will often see people call this active. So

this is the active page. The problem I have
with that is the active we have it's on a

link. And we active is a pseudo class for
our link for when we're clicking on it. So

people get really mixed up or they think they
can style the active state of a page by using

that pseudo class. And it's not at all how
it works the active if you remember, it's

when you're clicking on it. So I like either
using current or current page, I'm gonna use

current page because I think it's super obvious
what it is. And I'm going to keep that in

my navigation stuff here. And actually, I
put a big typography comment there. And I

never kept those going. So while we're here,
let's just really quickly do that. This would

be layout. And my nav is sort of a sub component
of the layout. So for that, I'm just going

to do navigation like this, instead of having
it as a big section. So we're gonna have our

navigation. And inside of my navigation styles,
this is part of it, we have my current page,

sometimes you'll see the current page is styled
as a different color. So you can literally

at this point come in and say color, and change
the color of it. And you can see that that

is now red, but it's going to keep that hover
color, but we have my color. And we can change

that. In this case, we don't want to change
the color, what I want to do is I want to

add an underline underneath, there's two different
ways of doing it. One of them is with something

called a pseudo element. And that just complicates
matters a little bit. And we're going to get

into them much later on, because they're super
useful for decoration. But we can get away

with just using a border to border I can say
it's a one pixel solid, and I can set the

current color that we're using to make it
the same as my text. Whoops, I made a mistake,

though, it's on all the sides. And we haven't
done a lot with borders. So I'm going to show

this one to you is because you might have
forgotten that we can just do a border bottom.

And now it's only going to put that underline
on the bottom. Now if you find it's a little

bit too close to the text itself, you can
also come through and add a little bit of

padding, the one thing I wouldn't do is only
add the padding to the current page, I would

add it to all the pages. And this is in general
a good idea for your navigation anyway. Because

if somebody is on a mobile version of your
site, they have to click with their fingers.

padding makes your button a little makes that
nav link a little bit bigger and it makes

it easier to click on. So if I come on here,
I might do padding, I went to five M and zero

on the left and the right. You don't have
to do this here on the left and the right.

The only problem is this border grows to match
that padding on the left and the right side.

For the mobile reason that I just explained,
it's probably better. But for now, I'm just

going to leave that as a zero. So the underlying
matches, and it does still give us a little

bit of extra room for what we can click on.
And the last thing that I'm going to look

at right now, though, is we want something
like this to show that it's an interactive

element. This is technically an interactive
element because it's a link to my homepage

still, but I'm already on this page. So why
would I click on it again. So even though

it's still gonna stay as a link, I don't really
want it to look like it's a link like I want

these two to look. So what I can do is actually
say that my current page, hover has a color

that is back to my default color because I
don't want it to change And if I do that,

now, when I'm hovering on top, it's not changing.
I know in the scrim of video, you just see

it as like a blue point your arrow. But if
you're looking at it in your own, it would

be a hand cursor. So it is people will still
know it's interactive, but it's sort of double

hinting at them that we probably don't want
to click on that, because we're already there.

So it's like an extra hint along the way.
Whereas these ones, it's really obvious that

those are things that we might want to click
on and visit. So with that done, I think it's

looking pretty good. In the next video, let's
look at how we can actually make this on the

left side and throw this over onto the right
side. And then after that, we can actually

make the whole thing off. So let's go into
we want to take this nice navigation we did

and I think it already looks pretty good.
But we want to up the game of it a little

bit and make it look like this, which is quite
common on sites that you see these days where

we have the navigation on the right and probably
a logo or something else on the left side.

And we can just keep going using what we know
about Flexbox to pull this off. So let's go

and take a look, what I'm gonna do is it will
be a bit wider. So I'm going to leave this

at a large size like this just for now. So
it doesn't mean we have to shrink and open

it. But that's okay. So before we get into
it, what I want to take a look at is how I'm

going to structure it. So we have already
my header which has that light gray background

on it and some padding on the top and the
bottom. Then I have already this div for my

site title. And I have my nav over here that
has my ul in it. But I need something that's

going to hold all of my content in the middle
of the page just to stop it from stretching

from one extreme end to the other. So for
that, you can probably guess the name of it

already. I'm going to call that div class
equals container. And I can come all the way

after my nav here, and I can close that container.
And I'll put a comment here, close container

just so I can remember what that is, if ever
I you know, I'm not sure why I have this random

div floating around. And because all of this
is nested inside of that container, I'm going

to select it all and push tab on my keyboard,
and it will just push it all over. So I can

see through the nesting and through my spacing
here that I'm inside of my container. I'll

jump back over to my style sheet now. And
we can start styling this. So I might say

biography, I'm going to come here to layout.
And the container is something very generic.

So here's my header, I'm going to put because
it's more generic, I'm going to do this right

at the top, I'm going to say container, let's
give it a width of let's say 90%, because

that's sort of what we've been doing and a
max width. And I'll stick with E, I'm going

to do 900 pixels. For now, we can always play
with this a little bit later to make it bigger

if we need to. And just so we can really see
it for now I'm going to give it a border of

one pixel solid magenta, just like we've been
doing up until now. So there it is, we just

need it to be centered on the page. Now, because
we can see it is limiting to that max width.

And it is shrinking when we're going to the
smaller sizes. So I'm going to let you center

it on the screen before I go ahead and do
it. I know I've had you do this one a lot.

But it is one of those things that people
forget with the margin auto on the left and

the right, especially early on when they're
writing a lot of CSS, they use a text align

and it doesn't work. And eventually they remember
and it sort of segments in so I'm trying to

submit it in as fast as I can by getting you
to do it as often as possible. So you can

see here now that it is working, and it's
centering on the screen, and because of my

max width, it does limit it to the total size
there. But now we want to take this and put

it on that side and take this and put it on
this side, we don't have the rest of our content.

And normally I would write all of my HTML
first. And then I would come through and write

my CSS. But we're not doing it this time,
just because we're focusing on just the navigation

here. So I wouldn't want to put a display
flex on a container if that container is going

to be reused in many places. So like I've
been talking about before, I like having modifier

classes, I'm going to call it container nav.
And we can come back in. And now I can edit

that. So I'm container, I would come down
right below that and add a container nav and

give this a display of flex. If you did this
ahead of time, and you were just sort of jumping

ahead because you wanted to practice and you
thought you know, and you give it a different

name, or you put it directly on the container,
whatever that div that you gave in, that's

completely fine. Or if you just had some sort
of like nav box and you put all of these styles

on it, it's okay, I just know I'm going to
be reusing the width, the max width and my

margin zero auto a few times on this site.
So I figure having a default container that

I can reuse multiple times makes a lot of
sense. And then if I need to change it, I

can so display a flex it makes our columns
we come and take a look. There we go. We have

two columns. Now. Now there are a few things
that we want to change. The easy way to fix

is this is getting centered in here. And we
don't want anything to be centered. That was

in my heading header header textilene Center,
which we don't need to have anymore, so we

can remove that and at least it will fix that
problem. And this part is perfectly fine.

But I want to move these all the way over
to the right side. Can you think of a way

we can do that that we've already looked at.
So if you remember this pink box here is my

container and it's also my container. Our
nav and on the container nav, I did display

flex, and have all this empty space left over
on this side. And how can redistribute empty

space to put it in between things we can use
justify content space between, so justify

content, space between. And there's only two
items in this case. So it just means all that

empty space gets put here in the middle. And
one last thing, as you can see, there is a

bit of a gap here. And you might be thinking
that's not a big deal, and probably isn't

the end of the world. But because I know I'm
going to be using a container and other content

here. And I want things to line up really
nicely. little differences like this make

the difference between someone who's a good
coder or a good designer, and someone who's

a little bit sloppy, and people who are hiring
are paying attention to details. So you do

need to learn how to be detail oriented and
look for these little things where things

aren't lining up. It's not as obvious when
you don't have a border on something. But

you'd still notice that it's not perfectly
lined up. So if you remember what I did, when

I created this, because it was center aligned,
I said, we can do a margin on the left and

the right side and everything would be fine,
because it's centered. And that means it's

Eve, there'll be equal margins on the left
and the right, which will keep it centered.

Now we have it on the right side. So that
means I only want my margins on the left.

This is one of the few times when I won't
use the shorthand. And I'll just say margin

left. In this case, I'll do two n. And we
can take a look. And now we've gotten rid

of that space. But I've kept everything here,
I did two M instead of one because before

I had one m on home and one m on about me
here. So one plus one, I was getting two on

the side. And I was getting two on this side
here as well. Whereas now, I'm only putting

march on the left, so I'm putting it as to
M that does mean there's a two M margin on

this side here. But that's fine. That's not
getting in the way of anything, it's just

giving us a little bit of breathing room.
And if anything, it's going to stop us when

we're shrinking from hitting that the the
social life tech sits right there. So it's

going to prevent us from smacking into that.
And that gives us the room that we need. Now

it's starting to look pretty ugly when I do
this, though. So the first thing I'm going

to do right now is I'm going to turn off this
border of magenta, because we don't want that

on there anymore, which makes it look a little
bit better. And in the next video, we're going

to add in a media query to prevent this weirdness
from happening. And we're going to add it.

So this actually falls underneath. And we
have a few different changes going on, we'll

get some practice with media queries. We want
to make our navigation responsive. And we

have to do that using a media query. So this
is what we currently have. And we want to

make it look like this when it reaches small
screen sizes, I'm gonna give you a little

bit of a hint right now I'm going to use the
breakpoint of 675 pixels when I do it. And

everything we need to be able to do this we
have learned now media queries we haven't

done a lot with. So if you're not super comfortable
with them, that's cool. Watch me and see how

I do it. But I'm going to encourage you to
see if you can figure it out. If you make

a mistake, that's fine, I'd even say go and
watch the video on media queries, and then

come back and do this because I want you to
make mistakes, because making mistakes is

how you're going to learn cuz you're gonna
get stuck on something and you're gonna watch

me do it. And then it's going to be like,
Oh, that's the stupid thing I was missing.

And then you're going to be able to do it,
you're going to do it, and it's going to reinforce

it. So try if you get stuck, go and watch
the media query video, if you still can't

do it, then you can watch me do it. Or once
you've got it, you can see how I do it, just

to see if we're on the same page or not. And,
of course, I will try and explain things in

as much detail as possible on how I'm doing
things. And again, the breakpoint I'm going

to be using is a max width of 675 pixels.
Alright, so the very first thing I'm going

to do is I'm going to come to my container
nav here, because this is where we have my

display of flex. And we know that if I do
a flex direction of column, it's going to

switch things. So now these are stacking one
on top of each other. Whereas before, when

we turn that off, they're going one next to
each other like that. So this is what I want

to be able to toggle on and off. So I mentioned
to max width, we're gonna stick with that

for now. And I'm going to create my media
query. So add media, I'm gonna put a space,

put my parentheses, put my my curly braces
and put a empty space. And I can come in and

put in my max width of 675 pixels. Now I got
that number it was through a little bit of

experimentation, and be talking about how
you can figure out what numbers you want here.

Not in this video, though. But when we start
working on the bigger layout. So in here,

I want to select once again, my container
now. And this is one of the mistakes I still

make, as I mentioned before, where I forget
that I have to redo my selector because I'm

looking here. So if that was the mistake you
made, just always remember when your intermediate

query, you still need your selectors, just
like as if you were outside of it. The other

thing is always the media query after your
selector and not before it or it will not

work. In this case, it might because we're
not overriding something, but still always

try and keep your media queries after your
selector. So we can in here do our flex direction

of column. And so now if we come back and
take a look at it, at large screens, it's

looking normal but when I hit that 675 Which
is really close to when the text there, you

can see it, the whole thing hops down. So
this is a good start. But now I also want

to change the direction, I want to bring these
to be stacking on one on top of each other.

And I want everything to be centered. So let's
see if we can do that. So here is where I

have my header. So we need another media query
for it. If you're going well, I just made

a media query, I didn't want to write the
whole thing out. And I did say before, you

can always keep them grouped together to make
it a little bit easier. You could also say

I'm in my layout, I'm going to put all my
layout ones together at the bottom. If you

didn't separate media query, that's completely
fine. You're not bloating, your CSS file too

much. Maybe it is, we talked about dry, and
it's not super dry, always writing them over.

And they are kind of long to write. So there's
nothing wrong with say grouping all my layout

ones together here. So still inside the media
query, and I'm paying attention like this

is the end of my media query. So I'm coming
inside my media query, and I'll select my

header. And on here, I'm going to do my text
align center. So that takes care of this.

And it centers it because if you remember
before, we've switched that we originally

had it on there, and we turned it off. So
now I'm adding that text align center back

in to center this and it goes back to almost
that original layout that we had the first

time now. But the cool thing is here, it's
like that. And then as we shrink down, we

switch from left align to center, and they
pop one on top of each other. So it's a really

good start. The next thing that I want to
do though, is I do want these to stack one

on top of each other as well, because we want
it to work at really small screens, and we

get to this tiny screen size, this looks pretty
terrible. So for that I have all my navigation

stuff, let's come all the way to the bottom
of all of that, I can put my media query,

I'm just pasting it because I already had
it copied. And I want to keep the same breakpoint,

you will have set you will have times we have
multiple breakpoints, but try not to have

them like 676. And then this other one 679.
If you have something at 675, just keep them

all at 675. And just so you don't get a whole
bunch of weird jumps going on, it makes your

life a lot easier as well to know when things
will be changing. We already have a display

flex on my nav ul. So I see my nav ul display
flex is making them go next to each other.

So that means the same way we did before I
can select that nav ul. And I can put a flex

direction on there, of column. And now we
can see that they're stacking one on top of

each other, but they're not centered. That's
weird. Why aren't they centered. That's because

of this margin left that I put on my nav Li.
So that means I have to come through, I have

to come down here and go to my nav, Li and
I want to redefine my margin. Now in this

case, they're really stuck close to each other
up and down. But the margin is breaking in

the left and right. So on my margin shorthand
here, I'm going to give it like a point 5am

on the top and the bottom, and on the left
in the right, I'm going to set it to zero.

But if we just did a point five on all sides,
it would probably be fine. And we can come

take a look. And look at that it is looking
awesome. And it's working at small screen

sizes, and it's working at big screen sizes,
and everything is great. And somewhere along

the way, I did lose my underlines if you want
a bit of practice, you could go and add that

back in yourself if you feel like it. But
right now I'm super happy with that you've

made a ton of progress navigations for one
of the simpler and smaller elements on a page,

they're super complicated, there's so many
different pieces to them through the header.

So we always have our header, we have something
on the left, we have something on the right,

then we have to get our navigational pieces
to go on the left and the right of each other.

And oh, for something that's really small,
and they they do take a lot of styling, though

you just did this, you just did one of the
more complicated parts of most websites. So

a bit of a pat on the back, probably a nice
time to take a little bit of a break. If you

feel like you want to revisit media queries
a little bit and go back through them do that

now before we move on, because we will be
using them a lot that we're going to start

building a whole layout. And I think it'd
be a good time to take a break now just to

help let everything absorb and sort of sink
in a little bit, before we go into the full

big layout that we're going to be building,
which is just going to be taking everything

we've learned so far and giving us a lot of
practice on all of that to help reinforce

things even more. But it will take us a while
to get through that layout, because it is

a pretty big thing that we will be building
out with lots of different pieces. We're doing

the whole thing, we're doing some to build
out the rest of the site. And we're doing

the whole thing, we're doing three whole pages
for this, it's really going to help reinforce

everything. And it's gonna also give you a
bit of an idea of how it works when you're

doing a whole site. I'm going to try and go
through naming conventions a little bit, as

well as just seeing how there's a lot of similarity
between the different pages. So once you've

done the homepage, you're actually really
close to being done, which is always really

nice. And we're also gonna be seeing how we
can make it responsive. So we're going to

be doing the small screens and the big screens,
I have all three of them done for the big

screens only two of them for the small screens
just because they're really similar to one

another the homepage and this Recent Posts
Page are almost identical so I didn't bother

doing a design for it. On the small screens
for there. We are actually going to be building

You know, from the small screens to the big
screens, which is the opposite of what we've

done so far, but it is the more common way
to work. It's called mobile first. And it's

much more common to work that way, it's a
little bit harder to share these in depth

designs through screen, but I'm gonna have
screenshots of them, I'm gonna be highlighting

the different things that I'm working on to
try and explain things as clearly as possible.

So we have a visual to go along with what
we're working on. But you can also come to

this link. This is I designed all of this
using Adobe XD, and this link will give you

all the design specs, and it's going to make
it really easy for you to get the text and

any information you need. So when you first
click on that link, it will bring you to a

page that looks a little bit like this, it's
a little bit bigger, and you can choose which

one of the designs you want to start looking
at. And you can click on it, and it will bring

you into that design. Once you're in the design,
it will probably be on the comment section.

And what we want to do is we want to click
where that big arrow is, which is to get into

the assets and to start seeing all the different
pieces that are in there. So once you're in,

you can get all the different colors I've
used. So I am going to list out the colors,

I'm gonna, I'm gonna have this as an available
slide, but with the actual hex codes written

out. But if you're in here and you click on
a color, it's automatically going to copy

it into your clipboard. So you can just paste
it right into the editor afterwards. And there

is all the font sizes and everything that
I've used here and all the different fonts

that I've used. So you can get all the different
character styles, it gives you the font weight,

the font color, the font size, all of that
stuff. The only problem is it also gives it

all in pixels. If you want to work in pixels,
because it's going to be easier, by all means

I'm going to do it with REM. But if you want
to do it in pixels, there's nothing wrong

with using pixels, like there used to be with
font sizes. So if you want to go that route,

there's no issue with it, when you want to
get the text, what you want to do is actually

click on one of those boxes. So if I click
on this, it's going to show me the size, don't

worry too much about the exact sizes of things,
it's going to give you spacing, again, I didn't

make this a pixel perfect design. So if the
spacing in your final one isn't exactly the

same, that is completely fine. But when you
click on a box, it's actually going to give

you all the text that's in there. Now the
only problem is it does not include line breaks.

So the continue reading and the title of it
will sort of be all jammed up in one big paragraph.

But it makes it a lot easier that you can
sort of click through and get the different

pieces of text. That way, I'm also going to
have a file in a scramble in the next video

where you can get the text from if you don't
want to be using the Adobe XD thing here.

If you're on a page and you want to get back
out of there, you want to go see one of the

other pages, you can navigate through them,
you can't see it at the bottom of the page,

you can there's a little navigation to go
through the different pages at the bottom.

Or you can just click up here where it says
the living living the simple life and it'll

bring you back to that grid that you started
on. So then you can choose which other page

you want to go and visit. So in a little more
detail, here are the three pages. For desktops.

When I'm writing my markup, I'm always focused
on looking at the most complicated part of

the design when I do my CSS, um, as I mentioned,
we're going to start mobile first. But when

it comes to the markup, we need to really
see the structure of the website when all

the different pieces are in the places that
they're going to end up at. And it's always

a more complicated layout when we're on a
desktop screen. So when I start writing HTML,

I'm going to be looking at these designs.
And then when I start my CSS, I might actually

be looking at the small screens, and then
we're gonna move on up to these bigger screens.

So in the next video, what I'm going to do
is I'm gonna break down how I analyze the

homepage, and I'm gonna start reading the
markup for that, and we're gonna make our

way and write the markup for that, we're gonna
get the whole thing down, we're gonna make

it responsive, it's gonna look great. And
then we're gonna move on to those other two

pages, because as I mentioned, they're going
to go pretty quickly, once we've finished

everything else here, I'm really looking forward
to this, I think it's gonna be so much fun.

So looking forward to seeing in the next video
where we can start calling. Guess on certain

things. Okay, so we're going to be focusing
on starting the basic structure. For our homepage,

I'm going to be doing the homepage, just the
markup over a few videos just to break it

up a little bit, because it's going to make
it a bit easier for you to find the parts

that you want or to focus on certain things.
So what I'm going to be doing in this one

is we're just doing the homepage, and I'm
looking at the basic overall structure of

my page. So we already have the navigation,
I'm going to be nice to you, we're not going

to redo the whole thing, we're going to be
continuing from where we left off with that

navigation, we're going to be adding this
whole section here as well as our footer down

at the bottom. And I can see that everything
here is being held in place by something,

it's not stretching out. So just like we used
on our navigation, we're going to use the

container to hold everything in place there.
Then, when I look at that, I see this is my

big piece that's holding everything. Okay,
what's the next step? That's the big picture.

But do I have something smaller than that?
So yes, when I look inside of there, I see

that there's two columns of content, I see
there's this main big column on this side.

And then this column on the other side, there's
no weird pieces sticking out, everything is

living inside of it very distinct column.
So I know I need to set up sort of a main

structure area and a sidebar on the side.
Then inside of those areas, I have these different

pieces. So to explain this color coding that
I've done a little bit, if we look here, this

is sort of this unique part of the website.
This is the featured post, it's the one that

stands out the most The layout is unique.
So that is its own component. It's going to

have its own sort of markup the way the code
or the HTML is written for that is going to

be a little bit unique. It's gonna have its
own class name. Then I have these three that

repeat themselves, they're all exactly the
same thing, just the content in them is changing,

the layout is the same, the colors are the
same, everything is identical, I just have

to change the text and the image for each
one. So each one of those will be exactly

the same structure, just with different texts
going in. So they can all have the same classes

on there, and they're going to work fine.
And then over on this side, same thing, I

have these two components, these two little
sidebar widget type things, they're looking

exactly the same from one another, the content
in them is different. But this mean styling,

the heading on them is identical. The big
parts, the important parts of them are the

same. So I'm going to give those the same
class as well. In this video, I'm just focusing

on that I'm going to do the big picture, I'm
going to set everything up. Then in the next

one, I'm going to break each one of these
up into its own video where we're going to

look at how to do the HTML just for this one,
just for this one, and then a third video

on the HTML for this one. And then we'll start
going into the CSS and we'll go back through

and do the CSS for each one of those as well
starting mobile first, and then graduating

up to big screens. So if you'd like and you
want to use that Adobe XD link, and you didn't

open it before, you can click here and open
it up. Or if you prefer, I have put text files

for everything, including all the pages. So
if you're being very ambitious, all the text

is currently there. The one that isn't there
is the recent posts, because the text is exactly

the same as the homepage, the layout will
change a little bit. But all the text is the

same. I didn't I put the sidebar and the footer
is separate text files. So on the homepage,

it's just those articles. And for the sidebar,
you can grab that from this file here, I have

already included all the images, but you're
gonna notice they're not the right size. And

I only have one version of all the images
even though the images are changing throughout

this. Now, you could have two different versions,
you can have the thumbnail version and a big

version, you'll notice even the cropping is
different than them, I'm going to show you

a trick where you can use one image. So it
just lessens the load a little bit, we don't

have to do two downloads, because we have
the same image here. And here. For example,

we can do all that with one image. Even though
the cropping is different, it might not be

the most common practice to do it this way.
But I want to show you a really neat trick

on how we can re crop images in a way that
is sort of new to CSS actually. And it's pretty

easy to do. So all the images are there, everything
is ready for you to get started. And we just

have to come right here after our header and
get to work. So I want you to do as much of

this as possible on your own. And of course,
then I'm going to go through and explain as

much as I can, as I'm going through it. And
again, I'm really going to be breaking up

my HTML a lot over different videos just to
keep the video lens down. Because I don't

want to give you one really long video where
you get if you have to come back to it later

and you have trouble finding the spot you're
looking for, I think it'd be a little bit

easier this way. So let's jump into it and
start with this main structure here where

I just have this big main area. And then I
have this footer down at the bottom. So what

I'm going to do, and I'm going to introduce
a few new elements here. And if you did this

on your own, I wouldn't have expected you
to have these, we have our header at the top,

which often includes things like the logo
and the navigation, that sort of what you

usually find up in your header. And next up,
if we go and look at our design, again, we

have this yellow box, right. But this yellow
box is pretty much holding in the position

of what we have up here where we have our
navigation and we use a container for that.

So we might as well start with a container.
So we can do our div class container, because

all of that does have to be held in the middle
of our page. And below all the way to the

bottom, we can have a footer and close our
footer, the footer, super simple. So we can

just throw in a couple of paragraphs right
now, when we do the footer, I might come back

and give these classes. But for the moment,
I really want to focus on the structure of

what's inside my container. Here, we're going
to look at two elements, which have a lot

of semantic meaning and which are really important
for the good structure of a site. So I'm going

to do a main and close main. And after here,
I'm going to put an aside and close aside.

So the main is literally the main content
of your website. The main, the main content

of the website with the focus of this page
is so the focus of this page is all these

articles that I have on my homepage here,
inside that we can have all of my articles

aside is it's a bit of a weird one. It can
fill in different roles depending in the context

that it's being used in, which can definitely
be confusing, I've been confused by aside

because there's lots of different information
out there on it. But the main way you can

think about it, if it's not being used inside
of a section of a main section of content.

So a div is not a main section of content.
And the side is sort of a secondary information

for your whole page. So if we come and look
at this, this is the main content. And then

I have the secondary stuff, which is like
these little widgets that are showing up on

the side here. So this is secondary. This
is the main content that I want people to

do. So the aside can be that as we go through
and find other situations. Hopefully we can

understand a little bit more how things like
a site and main do work. Main is the easy

one though, because it is the main content
and that also means you can only have one

main page mean is an important element to
use on a page. And it can actually affect

the accessibility experience of people that
are visiting your website. Because they use

assistive technologies. And one of the things
those can look for is your main, there are

literally people who are blind that visit
websites. So there are programs that will

read things out to them, this can be blind
or just have very bad vision, and it will

read the page out to them. Or it could be
if you have an injury, and you're having trouble

using a mouse and using keyboard navigation,
things like that. Having your header and having

a nav and having a main and an aside, this
really can help the experience some people

have on your website. Now the main has very
good browser support. But older browsers including

Internet Explorer 11, which people still use,
don't understand it. So if you really want

to be good, you can also add the rule of main
on there as well. It's not required for newer

browsers. If you do want to support some older
browsers such as Internet Explorer, then you

want to have your roll of Maine on there as
well. So I'm going to leave it now if this

is a little bit too much, or you're like this
isn't what I'm here for right now. That's

cool. I'm gonna put a link in the notes though,
for people who are interested to the ally

project, which is a one one y, which is short
for the accessibility project. It has lots

of information on accessibility, and best
steps you can take in putting your website

together, it is a fantastic resource to keep
on learning and learn about a part of the

web. That's super important. But the not enough
people focus on that with that little sidebar

to the way on my side, I'm going to give this
a class of sidebar. Now the reason I'm doing

that is not just keeping me aside it is possible
for websites have multiple sides on like the

main which can only have one of the side can
be used for a few different things like I

mentioned. So because of that, just like a
div, I'm always going to give it a class.

And aside, I'm also always going to give a
class that sort of works out for the main

content that we have here. Because I've put
in these two columns now, and we have our

footer, you can use, let's jump into our main
and start adding a few things. And once again,

there is a new element that we're going to
be exploring, which is the article and I think

this one's pretty self explanatory. So I'm
not going to do too much explanation on it.

But it is when you have an article on a website,
you can use the article element. So it's saying

this is an article. And an article sort of
this self contained little elements were when

we're inside of an article, if I put a heading.
So say I put an h2 in here, it's the headings

for this article, they know that that heading
is related to this article, which is really

cool and really useful. It's a little bit
self contained compared to other things. Now

if we come and look at this, this article
is a little bit different from the other three

articles we have on the page. So what I'm
going to do is I'm going to give this first

article, a class of Article feature. And then
on these ones here, I'm going to give them

a class of RT Cole recent, and I'll explain
my naming in one second, let's just add this

on to those ones. So first, I'm starting with
article and then putting featured just so

when I have in my CSS, I'm going to have my
article featured and my article recent, they're

not going to be separate from one another,
like them keeping everything together, it

makes my CSS a little bit easier for me to
read, if you prefer putting featured article

in recent article, because that's how you'd
actually say it. There's nothing wrong with

that at all. I prefer starting things with
sort of the the name of what it is, it's almost

like going into a modifier class of button.
And then button accent. It's my article featured

and my article recent. So I know they're both
articles, because that's the first thing I

see. And then I can see, oh, it's different
because this is my featured one or recent

one. In this article. If we take a look at
it, I have my image first I have the date.

And then I have a title, a paragraph. And
the last but not least, I do have the continue

reading, I'm going to do something a little
weird though. And then I'm not going to put

them in this order. So we can explore something
else with Flexbox when it comes time to style

it. And because we want to sort of follow
best practice. So the very first thing I'm

going to put in here is the h2. And I'm going
to give this a class of article title and

close h2. After my article title. Now what
I'm going to do is put my image, so we need

an SRC on that, which we'll get to after and
then a lt, which we'll do after. And we're

also going to add a class on this of our default
image, we can follow that up with a paragraph.

And actually, we need two different paragraphs
because we have one for the date and one for

the rest of the text. And then we need my
link down at the bottom. On the first paragraph.

There are two different paragraphs, but we're
using them for two different things. This

one is the date and how many comments the
post has this paragraph here is just sort

of like a regular paragraph. So on this first
one here, I'm going to give it a class of

article, Article info. And the reason I'm
doing info is because I'm going to put the

date and the comments in there and not just
have one or the other. So we can so if it

was just the data if you'd call it article
date, or if it was just the comments, we could

do article comments, but I'm just going to
call it article info like that. Then we can

come down to this one. I'm going to Give it
a class even though I don't know if it's really

necessary, but I'm going to call it article
body. And the reason body is body text, if

you're coming, I come from a you come actually
from a print background regular text you seen

an article is the body text, it's also we
have our you know, that's why we have the

body, it's the body of the page, this is the
body text of the so it's like the main content,

don't know if I'm actually going to end up
styling it, but you sort of get the idea that

I'm using a class for everything here. Because
when I get to my CSS, that way, I know, it's

super easy to select anything that I want
to select. So then I also have this down here,

I'm going to give this a class of, I'm gonna
call it read more instead of continue reading

just because continues really long. And I'll
probably make a typo. And it still gets the

same message across. So I think that works
out fine. Now, again, the order of this is

not the same order as here. So if you did
it in a different order, there's nothing really

wrong with that. The reason I'm doing it in
this order, is imagine if somebody were to

come on this page, and for some reason, the
CSS doesn't load, if they get it in the actual

order. And they see the content in the order
that we see here with no CSS, the hierarchy

and the order things are in there not really
the best, we have this useless sort of information

first, to be honest, followed by the title.
Also, imagine if using a screen reader, and

it's just going one piece to the next piece
through this head, it reads this, and then

it reads the title, it's kind of weird, you
read the title first. And you know if you're

interested in that without knowing the date
that it was published first. So I like putting

it this way. And we can actually use a cool
Flexbox technique and feature to change the

order of things here visually, without impacting
the actual order that they are in the markup.

So this actually makes more sense when you're
looking at it from a content perspective.

But with the styles, we can change the order
of it all, which is really, really cool. Now

these recent articles, they're a little bit
different. So I'm actually gonna break those

down in the next video, I was planning on
doing it in this one, but I don't want to

overwhelm we already went through quite a
bit there. So in the next video, we're going

to look at this because if we go and look
at it, oh my goodness, we actually have two

columns in these. So let's see how they've
closed in our recent articles here. As I mentioned,

right at the end of the last video, we actually
have two columns. Oh, my goodness, that complicates

matters. No, doesn't it. So I'm going to come
in here and create two divs, one for each

column, div, close div. But this first column
here is going to have a class on it of Article

recent main. And I'm going to give this one
a class is equal to Article recent secondary.

So it's like my main content and the secondary
content of my article. Now if you don't really

like those names, I maybe could come up with
a better name for them. A lot of people don't

like the idea that I'm repeating article recent.
I don't like the idea of just using main and

secondary because maybe I you have a main
and I have a secondary for something else

two that are just completely different. Could
you instead of doing it this way, have an

article recent and then use a descendant selector,
your compound selector to say like article

recent main space main and article recent
space secondary, yes, you're 100%. Good. But

again, I like trying to avoid those descendant
or those compound selectors when I can. So

I'm going to use my main and my secondary
on this, it does create a long class name

to have to write when we get to CSS. But it
does also make my CSS really easy to read

and understand when I'm working in it. So
I do like that, even if it does mean being

a little bit more verbose. The main content
here, this is where I'm going to have my h2,

which can have the same class as I have here,
is sometimes a featured article will have

a different like font settings. But right
now it's the same font size, the same font

color, the same font, everything. If these
two different articles had different font

sizes, I'd be looking at this in a completely
different way, I'd be giving this one like

featured article title and this one recent
article title or something like that, it's

the same, they're both the exact same styles
on them, I'm going to stick with the same

class, because I think that makes a lot of
sense. inside of there. I also have my body.

And I also have the continued readings, you
know what, we can copy all this and paste

it in here. And exactly like before, these
have the exact same styling on it as they

do up here. So we can keep the same class
names once you've styled at once we've styled

the whole thing, the main difference between
our featured article and this one is just

the structure of them is a little bit different.
So we can have the two columns in one, whereas

the other one doesn't have the two columns
in it, these two, I can grab, and I can throw

in this secondary over here, because they
really are secondary, secondary information.

And now that I have one of those built, well,
I can just copy that whole thing and paste

it right here. There's all the structure of
that. In the next video, I'll take a look

at the site. Now, the sidebar is actually
going to be pretty easy to set up pretty much

because we have just two different things
to create. They're really, really simple.

We only have one thing to actually create
in all of this, which is I'm going to call

it div class equals sidebar widget. Now, if
you are going Kevin just call it a widget.

Go for it. You can call it just a widget.
I just want to be super explicit that this

widget is meant to live in my sidebar, I don't
think I'd have a widget that would live somewhere

else. But when I'm styling it up, and when
I have it, I just want to be really clear

what this widget is actually being used for.
We have two widgets. So the widget, if we

come and look back at the design, the widget
is the same with a big gray background on

it. And then inside my two widgets, so it's
one and two, there's a little bit of content,

but it's really not that much on two separate
things a little bit. The first widget here

is going to have a h two on it. And the class
will be I'm just going to call it widget title.

Because I think if I put sidebar widget title,
people would start getting mad at me, I think

widget title is fine. It's very straightforward
what it's being used for. I do have an image

in here. So we have our SRC and our al t that
we need. And then in this case, I have a paragraph.

So you probably guessed it, I want a class
on this to let's call it widget, body, close

paragraph. And then I have my other widget
over here. Now this widget is a little bit

different, I have the same styling on this
as I do on this one. But the contents a little

bit different. I just have an image and a
title. So what I'm gonna say is this widget

sidebar here. So we're gonna start off with
one thing, which will be an h2, just like

before to have the class of widget title,
close h2. And then, instead of having an image

in a paragraph, we have a few like, they're
sort of like articles, but they're not really

articles. So I don't think they deserve to
be called an article. So I'm just going to

use a div class. And it's going to be called
a widget, recent post, close div. And we have

three recent posts, I'm just going to do one
and we'll copy and paste it a few times. For

my recent post my widget recent posts, the
reason I'm doing a widget Recent Posts is

if I come and look at it, I sort of have an
image, I have a title and then I've underlined

image, title, underline image title. And that
last one doesn't actually have an underline.

So we'll have to figure out how we can turn
off an underline on the last one. It's not

something hard to do. But it's something new
and really cool that you can do with CSS.

I always get excited about the CSS parts,
these markup parts aren't as exciting. But

I digress. Let's go and look. So what I would
do here is I'm going to put an h3 in this

case. And the reason I'm doing an h3 is because
they are a title. It's a title for the post.

But it's a sub section to this. So recent
posts, this is like the category recent posts.

And then I have these three different recent
posts that are in there. And once again, I'm

putting my h3 before the image. And one part
of it is because I really want to practice

something with Flexbox, where you can change
the visual order of things. And I do think

it does make more sense to have it structured
this way with the title followed by an image.

If you did it the other way around, though,
it probably wouldn't be the end of the world.

So this do we give it the really long title
of widget recent post title, I'm going to

keep the widget recent post title if you wanted
to shorten it up. If you're doing your own

site, and you said widget post title, I think
that'd be perfectly fine. I don't think there's

any issue with that. The reason I wouldn't
want just post title or when Yeah, the reason

I wouldn't want something that doesn't have
the word widget in it is because I wouldn't

want people to get it confused with this article
recent because we have article recent but

then this article title here. So if we only
put something in here that involve the word

recent, say recent post title, that can really
get confused. And when you're looking at it,

you'd think it actually belongs up with my
recent articles. It's very verbose. But what's

wrong with being a little bit verbose, it
just makes your code much easier in the long

run, when to know exactly what it's being
used for. So I don't mind being a little bit

verbose. If you have a shorter way of writing
it, or you can come up with a better name,

there's nothing wrong with that, by all means
come up with shorter ways of writing it, I

might be a little if this was a personal site
that I was doing, I might try and come up

with things that are a little bit shorter,
just because I don't like typing. But when

we're learning especially, I think it's super
useful to being super clear what things are

being used for. And it is a good habit to
build up when you're coming up with your class

names. Anyway, it does make class naming a
little bit harder sometimes, but it's usually

worth the trouble. So my image has a source
on it, it will have an Alp on it. And it will

have a class on it. And you know what, I forgot
to put an image. I forgot to put a class on

this one. Now I think both images are gonna
be treated the same way. So I'm going to call

this one widget image. And with with his widget
spelt with a D. Man, which is a weird word

a, I was thinking maybe it was only widget,
but it's with the JIT. All of a sudden, after

looking at a whole bunch of times, I went
oh my goodness, I just spelt it wrong throughout

this entire thing. So yeah, I think we can
take this class here and put the same one

on this because the two images will be behaving
or the four images will behave behaving in

a super similar way. And once I mentioned
we have our widget recent post once that is

finished, we can just copy that one and paste
it a few times. And now we have everything

we need for our homepage intact are ready
to go I'm not going to make you go through

and put all the text into everything here.
But if you want to, and you're adventurous,

go through right now and put all the text
in and just see what you can do with it. See

if you can start styling this up and organizing
things, at least on a basic level. I know

we haven't looked at how we can reorganize
things visually, when the order in the markup

is wrong, we will be looking at in the videos,
we're also going to see a little bit more

on the images and how we can crop them properly.
But you have most of the tools, you have to

be able to do the site. If you don't want
to do the text, I'm going to do it all off

camera, when you start the next video, all
of the text will be in place and all the images

will be there. So if you just want to start
with all of the content already in place,

hit pause right at the start, and then you
could try and style it up from there. I don't

blame you, I probably do. I do think it's
going to we're going to be getting started

with the CSS, I'm so excited by this. I love
working on big projects like this and sharing

how I work on big projects like this. Well,
I can't see the work you do. I'm excited for

you to challenge yourself. And you'll have
some fun with this. So here is that Adobe

XD link again, just in case you never opened
it, I do think it's going to make your life

a lot easier. So I really encourage you to
click through and use that to get the specs.

But if you'd rather I'm going to keep this
slide open. The nice thing with the Adobe

XD version of it is if you go on the homepage
here, you can zoom in on different parts of

it and look at them in a little bit more detail,
which might make it a little bit easier to

work on. In this video, we're just focusing
on the global styles sort of setting the stage

for everything is going to take us a little
while to get through all the CSS that we need

to do on this one. But let's jump into it
and actually get started. Because it is the

first time we're looking at a big project
I am going to start out with you want to do

it on your own, by all means, do as much of
this on your own as you can with what you

have. And with everything. You know, as I've
already mentioned, there are a few things

we have not covered yet that I'm going to
use this project as an opportunity to teach

you about. But constantly throughout all the
lessons we're building out this page, I will

be stopping you and asking you to do things
that you've already done. So it's not just

going to be following along with me, I do
want you to be pushing yourself and learning

while we're doing all of this as well. So
if you didn't get that Adobe XD link already,

it will also be in the notes of the lesson
too, just in case you don't want to have to

try and worry about the slides or anything
like that. So as promised, I put in all the

content here. So that will definitely make
your life a little bit easier. And let's go

over to the CSS, we already have some CSS
in here. Because when we did this when we

did our navigation, right, so we're going
to leave this all here, it does make our life

a little bit easier to work with, because
we've already set a few things up. Now, I'm

not going to be constantly coming and looking
at the layout throughout this, but I'm going

to have it open on my own screen on the side
like I'd encourage you to do with the link

that I have shared you because it's a lot
easier when you're looking at your design,

I will be opening it occasionally. But I don't
want to constantly be opening and closing

it just so it's I think that'd be annoying
for you. But whenever I'm sort of looking

at bigger subjects or when we have to come
and examine something I want to explain myself,

I will open up these, I will open up the slide
just to take a little bit of look at it. But

I'm just grabbing font sizes or doing small
things, I might just refer to as you can see

in the slide or as you can see in the design.
So there's a lot of commonality that's going

on in this all of our titles are looking exactly
the same. We have our continued reading, we

just have the basic body. And the setup of
that. As I said, I like starting with global

styles. I already mentioned this videos about
the global setup. So that's what I'm going

to be focusing on. And of course, we I've
given you a whole bunch of the typography.

Now I didn't put the colors, but I showed
you what it looked like. So I'm assuming you

can figure out what color you need and stuff
like that. So let's go and set all of that

up. So where do you have our h1 and our subtitle
set up here. So we might as well keep going

through this and set up the other parts of
our typography. Because I do think that's

the best place to start whenever doing your
CSS because it really sets the stage when

you start doing the layout stuff. Sometimes
if you don't have the type set up, things

don't look and you start getting frustrated
and you're moving things around. And then

you change a font size. And you have to undo
other stuff you did. So always starting for

me, it makes a lot of sense. Starting with
the type. I think it prevents problems or

other issues from cropping up along the way.
So we had our subtitle, which I could put

here, just a comment to myself that this is
like the logo subtitle because I didn't give

it the best name to be honest, because we
also have our article title. And I don't want

to confuse that my subtitle like this is the
subtitle for my h1 or maybe I could even put

h1 subtitle. So I know that it's not dealing
with my article title that I created. And

it's it's not a subtitle for my article. Now
if I did have subtitles, which I don't hear,

but if we had like a secondary title for my
all my article titles, I would have had article

hyphen, subtitle, just to clarify my naming
and all of that. So I'm going to go through

and set this one up. So the font family is
Laura. And what what's the easiest thing to

do to get that font family it's to come up
to here and to copy it. But wait a second,

if I have to come somewhere and copy it, that
already means that maybe I shouldn't be doing

that maybe I should be combining two selectors
together. Probably a good idea because I also

am going to want my font weight here to be
shrunk down as well. So I think what I'm going

to do is I'm going to take both of those off
of my h1 and actually come all the way up

here and put an h1 h2 now I'm doing it on
the h1 and h2, I could also be doing this

on my article title. If you think that makes
more sense, by all means go for it. But I

am only going to have my h2 says article titles
in this page, it's very possibly of designs

that are different, and that aren't like that.
And you know what my h threes have that as

well, because my h threes are going to actually
open up this, I said I wouldn't do much. But

these are my h threes. And they're sharing
a lot of commonality with everything, my h1

and h2. So even though they do have a class
on them, the way I usually do it is I'll start

with a really generic h1, h2 h3 do as much
like global stuff on that. And then when it

makes sense to have my class, to put things
on that, it really depends on the layout and

the design that you're creating as well. Sometimes
you only need these, you never have a class,

sometimes you have a lot more on your classes.
I wish there was like this is the answer that

I could give you. One of the fun things I
think with CSS is there is no this is the

answer that I can give you, which can be very
frustrating when you're learning but I do

want to show you that it's not all just like
this cookie cutter cut and dry thing. And

that if you didn't do this, and you just put
everything on the class, that'd be perfectly

fine. There's not a problem with that. But
if you find yourself repeating yourself, try

and make combinations. And again, you're gonna
see you could even have an h1, h2, h3 and

then maybe you know, have your article title
in there as well as a selector, even though

that might be a bit redundant, maybe you're
gonna have an article title, that's a paragraph

for some odd reason, you never know. And you
just want it for visual reasons. And not necessarily

for other reasons, you know, I can have my
article title here, as well as like another

selector that's in that. Now, I'm not doing
that this time, because my h2 and my article

titles are the same thing. But I'm gonna leave
it just like this for now. But if you're not

too sure, either put everything on your class,
and you're completely fine. There's nothing

wrong with working that way. It's how it worked
for the longest time. But now whenever I find

myself having to come and copy something,
I'm just going to group it up to here. And

because this was just my regular h1 tag, I'm
just sticking with h2, h3, but if I put my

classes up there as well, that's completely
fine. And completely normal. You know what

else is the same on all of them actually,
is the color, they all use that same dark

blue color. So we can also put this up here,
and we've done a lot, the only thing I really

need my article title for is the font size.
So my font size on this case, it's 24 pixels,

which comes out to 1.5. REM. So if you were
looking at the Adobe XD, you would have seen

24. It's one of the very common number for
font sizes. And it works well. 1.5 is a nice,

easy one to do. Now I do have the body text
font size, which I have is 1.125. REM. So

I have a choice now of you know, this is my
body. And then I have my typography grouped

here, there are some people who will come
and put like this and say body and put a font

size down here as well. Again, I'm not doing
it on my paragraph, because I don't want it

to only affect my paragraphs, I want it to
affect everything. And it's not so much going

to be affecting on this page. But we will
have a project where you'll we will see a

big difference on that. So I'm going to come
up here onto my body. And I'm going to set

the font size here to 1.125 rim. And I think
that is it. So that's good. And the next thing

we want to do on this one, so we have the
links at the end, which always have that article

read more that say continue reading in them.
So we need to style that. So article read

more as the font size of 0.875. REM. And if
you leave off the leading zero, there's no

problem, you can just do just do it like this,
I tend to do it that way. Because it's one

less keystroke, I know a lot of people prefer
the zero, it's up to you which one you want

to have. And there's the dates that have the
same font size on them. So why don't we do

this. But we also have, I put dates in my
Adobe XD file. But if you remember, we actually

called it article info. Because it's not just
the date, there is some extra information

in there as well. So the two of those have
the same font size. Look, don't forget the

dot. But then there are some differences between
them. So on my article read more, we also

want to be throwing in here a few other things.
The color on that link is that bright blue

bars there links. So if we actually I'm going
to take a look at this for the first time

since we've set all of this up, we should
see it's starting to come together. Because

we're setting things up really nicely. We
forgot to change the font weight on the body.

And notice how it's a little bit bolder than
in my design. So in my XD file I earn even

on the slide here, where I put the style,
I definitely mentioned that it should be Ubuntu

light and I didn't make that change. So here
with my continue reading button, we can see

there's an underline on it. And we don't want
that underline to be there. So we can turn

that off text decoration of none, and the
font weight of 700 because it is the regular

bold if you wrote the word bold that that
would be perfectly fine to the one thing we

won't be looking at, as I mentioned when we
were looking at the logo is the spacing on

the letters. The spacing on the letters is
a little bit spaced out. We're going to see

in the next module, we're going to come back
to this project and we're going to be stepping

up our style we're going to make things look
a little bit fancy And nicer. So let's come

up to my body on that one thing that I forgot,
which is my font weight, font weight should

be 300. And actually, and let's go look, I
don't think it's working. There's a reason

why it's because I didn't bring in the I didn't
load it in with my Google fonts. But I want

to take this opportunity to show you a nice
little trick. Because sometimes you realize

there's a font weight along the way that you
need that you didn't bring in or you didn't

load. When you were at Google fonts. It's
annoying. If you've closed your tab to find

the right font to open up the little black
bar thing to go back to customize, get the

link, copy it back. You know, it's not, it's
not that many steps that I hold them. If you

can avoid it, it's always nice. So when we're
bringing in our Google fonts, I've shown you

that it adds the numbers here, it's just putting
in the numbers and comma separating them.

So if you forgot one, and you want to add
it in, after, you can literally just come

here and add it in like that, it's really,
really simple, really, really easy. And now

we have access to our 300 as well. So if we
come in look, we should see ha, there we go.

The fonts are nice and light, and they look
much, much nicer. My continue reading is also

looking Okay. One thing I didn't do on that
though, was I made a bit of a booboo. I did

not include a hover. So I'm going to come
in and add a hover to it. And if we have a

hover, we need one other thing. What is it?
Hope you said focus on these long ones I like

to copy and paste to make life a little bit
easier. I'm going to put take a minute, I'm

going to remove the font weight because we
don't want to change that, I want to change

my color to the darker color. Just so they're
just we have a color. But I also want to add

the text decoration back in. Because I find
the subtle, it's going to be a shifting color.

But I think adding the underline will really
just make it more pronounced. So the original

text decoration, we haven't looked much at
this. But if you want to, it's just writing

the word underline the default style that's
already there. So we can add it back in by

doing a text decoration underline or you can
put that on something that doesn't have an

underline and you can create once you get
a span where you want it an underline. This

is one way you can do it. So now if we go
and take a look at what we have, we have the

everything is looking pretty good. And you
can see the changes color. And I'm getting

that underline that's coming on there as well.
So we have two things left to do in the typography

section before we finish off this video, but
I'm going to do them as a challenge to you

before I do them. They're both things we've
looked at before. And I won't lie to you,

I forgot to do this at the beginning. So you
might have noticed at the beginning of this

video, we didn't have the bold or the link
here. I've just added them in now. Sorry about

that. But now that they are here, I need you
to style them. For me. The problem with the

bold one is it's not bold enough, it looks
a little bit bold, but it's not really quite

getting there. And I'll explain why in a second.
And then the other problem is this, it just,

you know, some basic styling on our link,
we want to make sure we have a hover, change

the color and all of that on there. So I'll
let you do those two, and then I'll take a

look and explain a little bit of what's going
on with the strong. Right. So I'm assuming

you put them down here when you did it on
line 60. And I left a space there to do it.

So that's completely fine. Just to see if
I was doing this myself, I'd actually leave

this space here because I'm going into a next
section of content anyway. But I would actually

bring those up here where I have my general,
like my h1, h2 h3 selectors, because then

I'm getting into classes. And I just like
organizing things. And this is just personal

preference on my part, there's no right or
wrong answer here. But I would have my a here

as well as my strong tag. If I had paragraph
styles. If I had anything that's just a regular

tag, before I get into the typography of my
classes, I would include all of the general

ones first. So on my eight here, we can set
the color of it, which is the light color.

Now when that you might have also found a
way to sort of combine it with other selectors.

And if you did that, that's really cool. I
think that's the only change we needed there.

But of course, we need our a hover, and a
focus, we also want to give it I'm just going

to do the same color change that I did on
those read more links. And as I said on, we

need to style the strong tag. Because the
font isn't bold enough, it's a little bit

bold, and it's not really getting very bold.
And the reason for this is, depending on the

browser, using actually bold can have two
different settings on it. One of them is bold,

which will just bring it to 700 automatically,
but the specification actually outlines that

it should be bolder, like there's a there's
a literally a boulder keyword. So if I come

on my link here just so we can stay in one
spot and not create a new class or anything.

If I set the font weight on this to Boulder,
you'll see it looks a lot like my strong tie

here, it's gained a little bit of weight.
What boulder means I'm going to go back to

my index for a second is it means we're currently
here, go one step bolder. So it's going to

go from 300 to the next available font in
the scale whereas if you use the actual bold

keyword, so instead of bold it goes to a bolder
it goes to bold. Now you can see it's gotten

super fat, like look at the difference there
between this one and my link. So bold, really

bold will always jump to 700 Where's bolder,
we'll go to the next available. This depends

what browser In Google, Chrome will actually
normally go to bold, whereas Firefox and some

other browsers will go to Boulder. But boulder
is the official specification, that's the

way it should be working. That's one of the
reasons on a strong tag. Even if it looks

good on your screen, different browsers might
be doing different stuff. So always tell it

what font weight you want to have, in this
case, it should be 700. And we can take this

font weight of my aof. And if you put the
word bold, that would be fine too bold and

700 should end up at the same place, I prefer
the numbers a, they're faster, they're a bit

more consistent. And when you get start getting
into like the in betweens, which you're often

going to be using, it's just a lot easier
to use a number. So there we go. Now I have

the nice big bold font on there, and everything
else is looking good. My link is clearly something

we can click on. And that's it, we don't have
anything else to do the dates, we don't actually

have to this article info, we don't actually
have to do any other more styling than the

font size. I know in my outline, I put the
distribute light, but because I put the light

font weight on my body here, that's automatically
going to get applied to everything. Now pretty

much unless I explicitly override it by putting
a font weight on it. So everything is done,

we're good to go. In the next video, we can
start with the layout of curfew first. In

this video, we're just looking at the big
picture, I always start big picture. And now

typography maybe isn't big picture. But as
I mentioned, when you set up layout, and then

things aren't looking good, then you change
the type things change again, then you go

back to layout. So I always like doing typography
first, then big layout, and then slowly working

my way to like more and more like all the
different smaller pieces of my layout, which

we often call components, we have a few different
components. On this page, we have our widget

component or featured article component. And
our recent article component is sort of how

I'm going to break this page down in the same
way when we were doing our markup how I looked

at it. So we need something, it's going to
hold the page in the middle. And then we need

that to have two different columns on it.
And we need to set those two columns to have

the right sizes on them. A few decisions that
have to be made now about a few different

things. Now one thing that we've already done,
if we scroll down, and we find where we did

our layout, we already created a container.
So that's pretty cool, because that means

our content here is already inside of a container,
it's already being held within the same place.

Because when we created this, we gave it that
same container. So if I go really, really

big now, I can't go in my content, we'll stop
growing at one point, which is awesome. So

we don't have to worry too much about the
container itself. The first thing I'm gonna

worry about is setting up those two columns,
though. So in my layout, if we come back,

actually, we should look at our indexes, you're
always gonna be jumping back and forth between

the two of them unless you have a really good
memory for your classes, we had my main and

my main is all my Main articles, and then
we had an aside right there, and then all

my aside is that secondary widget on the side.
And all of that is living inside of this container.

Now the container, I don't want to give it
a display flex, because I might get other

content inside of a container that I don't
want to have a display flex on. So that's

the same reason I had my container and my
container nav here. And when I did that, it's

because I wanted to make this container have
a display flex on it. Now what I'm realizing

is I'm coming in, I want to do the same thing
here. So having container nav here wouldn't

make a lot of sense. I could call it container
main or main content, but why not come and

give it a class like container flex. And the
idea here is I have a container, but I'm also

making this container a Flexbox. If I do container,
flex there, and then I come up here and I

change this one. The reason I'm changing that
one now is because I'm going oh, I want these

two to have the exact same behavior, I might
as well give them the exact same class, it

This might not work in every situation you
run into. Because if you remember when we

did this, we had display flex, but we also
had this justify content space between. In

this case, that's a good thing. It's exactly
what we want, because we want to push our

two things as far apart as possible. So container
nav display flex, that's fine. So we can just

change this from nav to container flex. And
that means anytime we have a container, we

need to display flex on width is justify content
space between we can use this class and we're

modifying so we have a normal container if
we need it. And we can take that a step further

when we want to with this modifier of that
original container. Now technically, and a

lot of places we'll just call this like flex,
or though it'd be like a flex class, right?

It'd be flex, and you might add something
to the name to indicate that it's also doing

this or if you really get into something called
atomic CSS, it would have like a diff, you'd

have literally D flex, which would just be
display flex, then you can have something

that else is just justify content that just
applies justify content. I'm personally not

a fan of doing that. But I think you could
just call it flex if you think you'd use this

for a whole bunch of reasons. I tend to do
more, this type of thing personally. But one

thing we CSS and CSS naming conventions, there's
about a million different approaches to it.

So I'm throwing a few ideas out there. I'm
gonna stick with this one for now, if we've

worked through our project, sometimes you
end up running into a situation where maybe

you end up changing the name again. Now part
of CSS is planning things ahead. But it's

really hard to do when you're a complete beginner.
So I want to show you the type of things that

you might run into. If you've planned things
out really well from the beginning, because

you've made 100 sites, and you can analyze
the design really well right from the get

go, you might not need to be making these
things. Or you might realize I always need

to have something like this. And right from
the beginning, you're always giving yourself

some sort of flex class that just has like
these basic settings on it that you can use

whenever you need it, simplify your life as
much as possible. Let me go take a look at

our layout. Now. We should have two columns.
Now everything's a little bit broken, because

my images are huge. So we can see though we
have two columns, that's amazing. We're almost

finished honestly, with the layout. And the
two big things that we need to go through

and fix right now are the image sizes, and
it's really going to help and we can set our

column sizes as well, I'm going to go all
the way up to the top where my body is. And

right after that, I'm going to put my image
here, I find this a really like global generic

thing, it doesn't really fit into layout.
It's definitely not prototype biography. It's

a sort of my general thing that lives up here
at the top MSA max width is 100%. I'm also

going to put a display of block on here. I'm
doing it now not to confuse you. But just

to say I remember when I said images are usually
display inline, it does lead to this issue

where there's a small when something when
an image is display, inline, which it is,

by default, it gets this little little space
underneath that I'm not going to worry about

why that happens right now. But what what
it means is, when you're setting spacing on

them, it doesn't always line up exactly how
you want it to. So a really, this is like

every site you ever do, literally, you might
do something like this, where it just solves

98% of the problems you'll ever have with
an image, we have one other thing we're going

to do to deal with the cropping on them. But
this is just like, if you're setting up your

images, these two things will just make your
life a lot easier. So I sort of recommend

always having it's like body this image this
and then you're done. So if we go and take

a look, now, hey, look, things have already
gotten much, much, much better. I also made

another mistake in my typography, we'll fix
that when we get to our widget. So the last

thing we'll do is sort of set the proper sizes
on those. So that was my main and my aside.

So I'm definitely going to come down to my
layout, layout, containers really sort of

generic, then I have my header, this is all
header, we might as well go right here, I

have my navigation, I have this in its own
category, I might, you know, depending on

how you want to work, you might keep your
navigation up here with your header stuff.

Because the navigations in there, I'm just
gonna come right here and say my main and

we have my aside, I want you to set some sizes
on this, see how we can look and see if we

end up agreeing on the sizes we're going to
put on this. Alright, so on my main on this

one, I'm going to put a width of 75%. And
on my side, I'm gonna give this a width of

20%. That's good. Take a look now may look
a little bit wider than when we needed to

be. But that's okay. I think overall, we're
sort of hitting where we what we need and

what we want it to look like. So in C, it's
working. Now we do need to build a breakpoint

into this as well, right? Because Oh man,
that sucks when we get to the small screens.

And I know that there's a problem my navigation,
I want you to try and fix it and see what

it is see if you can figure out what it is
because we have the right code. But now there's

an issues, see if you can solve it. Did you
find it? This is finding little changes, whether

it's a typo, or just sort of running through
things quickly and trying to find issues is

a really, really good skill to have. It's
something you can get pretty good at typos

are like spelling color wrong, or just setting
the wrong property on something spelling direction,

but you mix up the C and the T, things like
that knows a lot of problems. Now in this

case, that's not exactly what it was. But
it's because I renamed my container flex.

But in my media query, I never redefine that
and change the name here. So remember, we

had container nav, we change it to container
flex, I need to do that here too, to make

sure that it's working. And hey, look at that
we have that working wonderfully. But we've

run into a problem of we still have the wrong
widths on things. Now these are using something

called max width instead of min width. And
I mentioned that we sort of want to be doing

a mobile first approach to things instead
of working from the big screen to the small

screen, it generally makes life a lot easier,
you end up writing less CSS, because the defaults

are a bit more of your friend. So in the next
video, we're going to explore how we can switch

our min width to a max width and a little
bit of refactoring we can do and then you're

going to see how much easier it just makes
it so you're we're not overriding as much

we can write a lot less code. So I'm actually
going to take this. So to start thinking mobile

first, what I'm actually going to do is completely
remove my media query. So let's take this

out and take that out. So we're left with
this. Now we don't want this code just floating

around. Like that. So I'm actually going to
take this text align center and make it the

new default. And I'm going to take this flex
direction column, and I'm going to make that

the new default. And we can delete this extra
stuff here. What I'm also going to do is I'm

going to delete these for the moment. And
you're gonna see why. Because when I delete

that, and if we hadn't had the media query
there at all, and we go and take a look at

it, at small screen sizes, we're almost done.
We've, we've sort of done the mobile first

design, there's there's not a lot to it here
that we're missing, there's some spacing issues,

we need a little bit of margin to separate
some stuff, a few little decorations here

or there. This just needs the box, we need
to fix the typography thing I talked about.

But you're sort of 90% of the way there. The
problem with working on the big screen first

is writing a bunch of code, and then you're
overwriting it all at the small screen size,

you're resetting your columns back to what
they were before, you're changing things to

be back the way, if you hadn't done it, it's
exactly what it would look like. Now the problem

is, when we get to the big screens, it just
starts stretching and not looking so nice.

So what we want to do is build in that point
where all of a sudden, at one point we go,

Okay, we're big enough, now we're going to
add the two columns in there. So that's where

the media query comes in. So we can add that
back in now at media. But what I'm going to

say this time, is, we're going to do a min
width instead of a max width of 675 pixels.

So now we can say our container, flex, flex
direction, is row. So right away by doing

that, if we come and take a look, when we
hit the right screen size, oh, now we have

two columns, and we have one, and it's working
pretty good. Now, I never said any sizes on

this, this is just the defaults that are popping
up right now is now I can say my main cause

the width of 75. My side has the width of
20. And that's it, I don't have to worry about

Whoops, I don't want that there. I don't have
to worry about overriding this anywhere, I

don't have to go and all of a sudden say,
whoop, I also need to now immediately like

I don't have this as my default that I then
need to reset up to 100%. So we've just said

at one time, we've redefined it for the big
screen because the small screen was perfect.

And in general, small screens are much simpler.
So it's a lot easier to do all of your small

screen stuff, and then add on a few little
things here and there afterward. So now if

we go look, we have our gap between there
and everything is starting to fall into place.

spacing on things isn't the most work we sort
of have to do is with this, we need to add

this line that's going to be coming through
on here and just add some spacing between

our articles in general, because if we come
and take a look at them, we'll go to our small

screen. And we are not spaced out properly,
the spacing on things isn't very good. If

these are really stuck together. So we're
going to add in that spacing that we need

right now, when we come and we look at the
original design, we do have a lot more space

are on my date, this spacing actually looks
pretty good. But we'd need a lot more space

here in here with this line coming through.
So let's start with just getting the space

around my date and make three comments thing
that's right there. Now where would we do

that? We don't even need to go into our article.
To do that right now we need the first part,

since we're just looking at something in there
is actually in the typography so we can come

back up. And that is my article info, we don't
have a selector for it. So I'm just going

to copy that. We have the read more, read
more. So we can come down here and put my

article info, I want you to create the spacing
for it with one that line of CSS don't want

you to use the shorthand and add in that empty
space. So you weren't sure if it's margin

or padding. Again, people mix those up all
the time. But I think you won't have confused

it yet. Because we've been using almost exclusively
margin up until now once we start doing more

projects with padding, you might start mixing
them a little bit, the spacing is pretty big

on it, I want to make it even on the two sides.
This is where it depends a little bit how

you like to work, though. And the reason I'm
saying that is you could some I tend to always

like putting margin bottoms only. But I have
exceptions. Because if you only deal with

margin bottoms, it definitely makes your life
a little bit easier. But sometimes it's nice

to have a margin top just to simplify things.
So I'm going to do that. So I don't have to

add a margin bottom on my image. And I'm just
going to put this space and this space all

on the date, it looks quite a bit bigger than
my font size. So I'm gonna start with like

a 2.5 M and a zero, maybe it's too big, I
think it might be but I tend to go bigger

and then shrink down. And there's a really
good reason that I do that. A lot of the time

with margins, there's this thing that happens
where you always end up putting them too small

and then you think it's not bad, but maybe
no just go bigger always go bigger than you

think. So start with a big number and slowly
reduce until you're happy with it. Oh, it

does look a little bit big. So let's just
drop that down to two. And I think that looks

much better. And here's the fun part and that
is going to be Adding in the underlying after

our continue reading, here's that line that
goes all the way across the bottom, I want

you to think about where you do that, how
you do that, how you pull it off how you create

the spacing that you need on the two sides
of that line. So what you know, if you have

to jump into the index, look at the markup
a little bit, try and analyze it and see where

you'd put that and how you think you might
be able to pull that off. If you get a little

bit stuck, that's fine. There's a bit of a
trick to this one. It's not complicated, but

it's not always something you'd think of when
you're first starting off with this stuff.

So hope you had success with that, and you
figured it out. If not, then really don't

worry about it. But what I'm going to do is
in my layout, I'm going to come down and down

and down and down. And we're going to create
a new section here called articles, because

I am going into my article itself. And I'm
breaking that down a little bit now. So for

this, I want to take my article featured,
because this is the only one that has the

underline on it. And I'm going to add a border
bottom to it. So that's going to create that

line a lot like we did on remember negation
actually. So border bottom, and we can give

it the color that we need. We'll give it one
pixel. And we'll make it a solid line. And

let's go and take a look at how that looks.
So there we go, we have the line that's actually

showing up, but the spacing and everything
is off. It's just not where exactly we need

it to be. So how can we fix that. But we need
two different things. The first one is I'm

going to add padding, but I only want the
padding on the bottom. And I'm going to do

with the shorthand just illustrate why. So
I'm going to do one m of padding, and we'll

go take a look. And you can see it's pushing
everything inward. And you know what, let's

also give this a background color to make
it super clear what's going on. So we're gonna

give this a pink background, so we can look
at what's happening. So we can see the size

of my featured articles exactly the same.
But when I added that padding, it pushed everything

inside of that box a little bit. And if we
make that a bigger number, it's gonna push

it even more. So we're pushing all inside.
But you'll notice the border is staying on

the outside of my padding. So the borders
all the way over here. So if this padding

was only on the bottom, instead of being on
all the sides, it would just be creating empty

space right here where we want it. So I can
take this down to maybe back down to a one.

And I can also switch it over to padding bottom,
if you want to use the padding shorthand,

it's perfectly fine there mentioned, if you're
only putting it on one side, I don't think

personally, there's anything wrong with using
the padding, bottom or padding, right or that

type of thing, it's when you're using two
or three sides, it's a little bit faster to

actually do it with the shorthand. But if
you use the shorthand for everything, it's

kind of cool to be consistent, so I don't
blame you. Um, so you can see it has created

that space we want my border is right there.
Now, I also want to increase this space a

little bit. And we can do that with my margin.
So it's an margin bottom. And I'm gonna make

it way too big for now, just to illustrate
that it is working. And so you can see this

is my pink box, the padding was working inside.
So that's why we have a gap right here, then

I have my border, and then I have my margin
after. So if you go way back to when we learned

about the box model, it was always padding
first, then a border, then a margin, we don't

use borders terribly often. So sometimes we
forget where they flow into the whole box

model thing. So if you didn't get this, it's
completely fine. Now this is too big of a

space, I'm going to drop that down to it too.
And of course, turn off the pink background.

And you know what, I switched that, but I
think a two and two looks a little bit better,

just to make this spacing completely equal.
I think it'll look better in the long run

if we do that. So there we go. I think that
is great for my featured article, everything

is good there, then we're going to jump into
styling this one here. And this is where we

had that trick that I talked about. And actually,
you know, I think they would do better in

its own video, because it's a little bit weird.
And I want to be able to focus on it or find

this video again, if you need to reference
it. So I'll see you in the next video, we'll

we'll take a look at how we can change the
order of the content in there to match the

design where the image is actually on top.
And when we look at this one, the text is

what we currently have. And so this image
on the left is what we currently have. And

we're aiming something that looks a little
bit more like this. And you can see there's

a pretty big difference between the two of
them right now with the order of everything.

And I said there's a good reason for that.
So in this one, we're just going to fix the

order of it, then we're going to worry about
positioning things a little bit within that

space. If we come down and we take a look.
Let's go back to our markup here and come

down to our recent articles. So we've done
is created our article recent. inside of our

article recent we have the main and we have
the recent secondary. Now this is gonna be

really useful, we get to the big screen sizes
because we want two columns. That's the main

reason I created these two separate divs is
so at large screens, we can have the two columns.

Right now though, we only have one column
because we're on small screens, but we need

to rearrange the order of everything. So what
I want to do is I want to give let's come

up so we'll come over here to our styles and
we can do our article. Recent with display

flex, we can change the order but First, when
I do display flex, it has created two columns.

So I want you to go ahead now and change that
back. So it wouldn't be two columns, I want

them to stack one on top of each other. So
we do that with our flex direction and switch

that over to a column. And now we have it
back pretty much exactly how we had it before.

But now we can play around with ordering.
And this is pretty cool. So what I'm going

to do is to change the order of something,
we go and we do it on the child itself. So

we have our article, recent main, and we had
the article, recent secondary. And on different

things within a flex, you can literally apply
an order to them. So if I said order two,

and I can come on this and say order. One,
it's going to switch the order of them, you

might have even noticed that the order of
it like sort of jumped around. So we're going

to take a really quick look, you can see that
it actually has changed our images on top

and everything else is on the bottom. And
that's awesome. That's super cool, right?

So why would we do this? Again, it's to be
focused on keeping the markup making more

sense and the logical order here, as if if
there was no CSS that loaded in so somebody

could still read it in a way that makes sense,
as if there's no CSS. And if we want to make

visual changes, we can, if we want to make
visual reordering, we can because we have

a hierarchy that we were following, that still
is drawing the eye to the right place, if

the CSS were to fail, it would make a lot
more sense the order that we see it in here.

Now, closer to when you are the first it's
going to come you're literally saying this

should be first this should be second, this
should be third, just for fun, if you wanted

to, you could try doing what would happen
if I gave it zero, well guess what it means

it's smaller than one. So it's, it's going
first. Or then what happens if I give this

a negative one? Well, that's smaller now.
So it goes first. So it's the smaller your

number, the earlier it is, and you could have
100 items, and you could give them all an

order. And that would be a nightmare to control
and to set up. But if that's what floats your

boat, go for it. But I'm going to stick with
my two and a one. If you have two things that

have equal order, they're going to go in the
order, they were originally in the markup.

So they're going to follow whatever they had
here because they have the same value. So

if you don't apply anything, now we'll switch
this one back to a two, it might even be worth

putting a comment in your code just to explain
why you're bothering to do this. If you think

it's not clear enough, or if you'd be coming
back later, and maybe think you might be confused

by something like that. This lesson is focused
really on order. But I do want to just finish

up a little bit on here. So the other thing
I want to do is on my article recent just

add a little bit of margin bottom to them
have say to em to create that space here,

just so it's not sticking to the image of
the next one that we have in there. Because

if not, it doesn't look very nice. So just
adding in that empty space is a good thing.

And again, go with a bigger margin than you
might expect. We do have a layout to be basing

things on if you're looking back at your layout
as well. The last thing while we're here,

though, is you might be going well, you know,
we just added some space here. But the last

thing we might you might be wondering about
is this gigantic space that we're getting

here. Part of it is we have our h2 here that
has a margin top and we have this which we

added a big margin bottom on, and that's causing
some problems. And you might be going well

shouldn't those margins be collapsing, and
then normally, they would be collapsing. But

there's something weird with Flexbox and collapsing
margins, they don't collapse anymore. That's

only for the direct children. So I'm not going
to get too much into that we're definitely

going to run into more situations with it.
But we need the fix for this for the for this

little timeframe anyway is the fix which we
need to do on our site at large. Anyways,

I'm just gonna scroll all the way up to my
h1 h2 h3 here and say that it should have

a margin top of zero because we're going to
run into other issues with that, if not anyway,

so we go and take a look at that just sort
of sucks everything up a little bit closer

and looks a little bit nicer. I'm going to
explore how you could potentially get that

to be even closer. When we look at the media
query in the next one where we're going to

pull this over to the right side and suck
that up even more. That's an exploration video

more than a best practice video, but we'll
see that consequence didn't notice that there

was one unintended consequence didn't notice
before, which was we got rid of the spacing

on our titles, and that got this stuck on
this. We'll fix this in this video as well.

But the main focus will be here, like I mentioned,
getting it to pop on over to this site at

certain sizes. The way I'm going to do it
now the reason I'm saying it's not a best

practice video as much as a exploration video
is because if you had a really long title,

this would cause some problems. And there's
the potential for overlapping but I just want

to show you something that we haven't looked
at yet. It's something that I try and avoid

when I can but I want to show it to you anyway
and I think is fun for the layout purposes

on this one and something that's worth exploring
because while you try and avoid it, it's good

to know that It is a possibility. And that
is negative margins. So I'm gonna go all the

way down to my layout area. And we're gonna
go all the way down until we find my articles.

There we go. And I'm going to create a new
media query, because we're going to be dealing

with these two, pretty much. So at media,
as far as the size of where do I create this

media query for, don't create media queries
based on the size of certain devices or set

devices, because then you can always do things
that you want to do, or those devices, you

know, people will make too many media queries,
because they're trying to match certain devices

when they don't need one, or in this case,
I'm trying to really base it on my layout,

I'm sort of just guessing at the size, we're
gonna tweak it a little bit as we go. So I'm

going to do 500 pixels for now. And let's
see if you see how it goes from there. So

inside my media query, what I want to do is
select my article recent main, and I'm going

to give this a margin. Top of negative, I
don't know what's out with negative one M

and just see how that affects things. So you
can see they sort of gotten a little closer

together, let's just try changing that maybe
to negative two, insert seeing these are starting

to overlap, and we can bring that maybe up
to a whole negative three. And they're starting

to line up how we want them to I'm going to
switch that to a 2.5 because I think it's

gonna be bang on how I want the top of the
text is sort of lining up. Now, as I mentioned,

this can create text overlap, so it's probably
not a best practice, overall cure. Yeah, so

this is my longest one. So I'm gonna base
it on this title. But what would happen if

you had a really long title, it would break
this whole layout. So I'm going to show you

how we can do it with a negative margin. So
you know, if I bring this up really big, you

can see it's pulling it up on top of other
things. And it's one of the problems with

negative margins. But it is important to know
you can have a negative margin because sometimes

it does come into use, and it is useful to
have. So that is perfect. Now the other thing

I'm going to do in this media query is do
my article info, and say there's a text align

to the right. And there we go, we have the
layout that I wanted, where we have those

going like that. Now the problem is, where's
the media query coming in, where's 550 pixels,

so we're going to shrink, and it's really,
really close. But on this one, it's looking

perfect. So you know, it's one of those ones
where you have to judge it by eye a little

bit, I'm going to pump it up to 550, just
because I don't want those to get so close

to each other. So it gives us this small little
range where we have two columns, and then

we're pops over back to the big layout, where
we're gonna have to change what that looks

like anyway. So that is how we can go and
do something like that with a little bit of

hackery to give herself this fake two column
look based on the way our markup is. But again,

make sure you keep this really, really simple
because it's keeping cooking simple. But if

this was how to keep your cooking simple,
all of a sudden, I'm a little worried. We

have overlap, and it's causing problems. So
while negative margins can be fun for creating

cool layouts, or cool effects, sometimes and
sometimes you want overlapping content, it's

always possible, you want two things to sort
of overlap. And there's other ways of doing

it with positioning as well, which we're going
to explore later. But just when you use the

negative margin be very, very aware that this
is a possibility. So I think what I'm going

to do is while we've explored it, what we've
seen it if you want to sort of rebuild this

on your own at one point, and keep it in your
code, because I do think it looks really nice

with how I've set this up, it's just not something
we can do in a responsible way. So we've looked

at how to do it. But now we're just going
to take it all off. Because I think it's going

to cause more problems in the long run. And
it's really important that you keep your code

as functional as possible, and that it can
accommodate for all these situations. So if

you're ever putting together a demo site,
make sure you don't only use short text, it's

really if you're doing a business card template,
don't use a really short name, KEVIN POWELL

is not a good name to use if you want to get
a really, really long name on the template

to make sure that he can work with super long
names. And it's not running into issues. So

the same thing here, we you want to test the
short titles and long titles to make sure

everything will work with your code. now is
use a really, so what we're going to do now

is use a really interesting property called
object fit. It's a relatively new properties

as far as properties go. And it is really,
really awesome. It's actually something that

existed for background images, which we haven't
even looked at yet, which is crazy. We're

doing all this cool stuff, we haven't even
done a background image yet, I'm only going

to do it inside the media query. Because I
think the screen sizes, I just want to see

my complete image. I think that looks nice
that we have a nice big image like that. But

when I get to these two columns, I don't want
my image to be so tiny, I want to I want to

make it taller, but I don't if I make this
taller, it's also going to have to be wider

because we're you know, we're keeping the
image in proportion. I'm going to cheat a

little here. These are article images, Article
image, I think is what I call it. I'm going

to give them a width of 100%. But I'm in the
height of 300% just for fun and to show you

what happens. So we can look at the super
stretch there so overlapping each other which

is a bit of a problem. But we can see that
these images are actually Super stretched

out. So I can't make my images taller without
the risk of stretching them like this, unless

we bring in something called object fit. In
object fit, we have a few different options,

the one that you're probably always going
to use is called cover, when we use cover

when it's actually going to do is it's gonna
crop my image inside of that space. So let's

fix this to be a little bit more of a realistic
number. Let's put like 400 pixels here. And

you can see it's cutting off the sides of
my image, my image is much bigger, my image

should look like this. This is what the original
one looked like right here. Whereas on this

version here, I can see that it's cropping
the image. Whereas if I turn off the object

fit cover, it's squishing the image. And this
looks terrible. I never want to see this on

a website, if you do this on a website, you
show it to me, I won't be proud of myself,

because I didn't teach you properly, I made
a mistake if you do this, so do not squish

your images. But this object fit cover, it
saves us it lets us pull off controlling the

size of an image. Now the one thing is it
will crop your image. So well these two are

looking great here, we're sort of we have
this little leaf sticking out the side, it

isn't ideal. Now one thing you can do is you
can also do an object position. And I can

say left. And what that means is it's keeping
the left side of my imaging instead of the

center of the image, which is the default,
but now I've ruined this image. And I probably

ruin that image as well, because it's keeping
the left side and left side of this. So we're

just seeing like this part of my image here
right now, which we don't want, that doesn't

look very good. So for this one, I am going
to leave it as just the object fit cover,

I'm not going to bother with my object position.
But I do want you to be aware that that is

an option. And I think I'm going to bring
this down to like 250 pixels. And I'm also

going to give this the minimum height of 250
pixels. If it needs to get bigger, for some

reason, sure, why not. But I want to make
sure, at minimum, the height is 250 pixels.

And I think that looks a little bit closer
to what we had in our layout. Maybe we could

make that 300 instead of 250. You can see
I think at the smaller screens, that it's

looking pretty good, it's getting narrow,
it has a nice aspect ratio to it. And then

as it gets bigger, I'm pretty happy with that,
if you'd prefer a different number, you can

play around with it a little bit, and find
something that you think looks a little bit

nicer, it's completely up to you. But I'm
gonna stick with that, I think that's a really

cool property, a nice little trick for letting
us bring in one image in two different places

and having them cropped completely differently.
And having it work at the other screen size.

And it's still showing up in here. So like
this is the same image that we have here,

which is really, really cool and handy that
we can do that all with one image instead

of having to load in three different versions
of the same image. Now, sometimes you might

want to do that there are ways of actually
doing loading in different images based on

different screen sizes. But it's a nice little
trick early on. While we're just getting our

feet wet with all of this, this is a nice
easy way to be able to do a problem here,

we're fine. Let's start by fixing this problem
here we're finding simplicity and life is

stuck to the top, you get 100% do this is
the margin top somewhere here just to push

things down. But I like trying to use margin
bottoms as much as possible to create space,

instead of mixing up margin top sometimes
the margin bottom Other times, there's always

going to be exceptions, there's always times
where maybe you won't do that. But I think

this makes the most sense. Because you don't
know if you're always gonna have a title as

your very first thing, maybe you have something
else that's actually coming up here as the

very first thing. So I think the best course
of action is actually to put a margin bottom

on this rather than having a margin top on
this because again, maybe another page, the

first thing will be an image or it'll be something
other than your your title here, I think it's

just a bit more robust, doing that. So this
doesn't even have to go anywhere, you just

do this on our nav nav nav header, I think
we have a header there, we do. So we can just

come on here and add a margin bottom of I'll
do three m to give us a very generous space,

because so the spacing here is here looks
more or less equal, I think it just looks

nice and balanced. If you'd want that to be
too I wouldn't argue with you, I think you

could pull that off as well. So that fixes
that. But the more important thing for this

video is, while our recent articles are looking
good at small screen sizes, when we get to

big screen sizes, we want this to become a
two column layout. That just looks quite a

bit different. So let's go and do that right,
go all the way down to the bottom because

I'm in my article section. And I want to create
a media query. So I'm going to ask you to

create your media query first on here and
actually see if you can remember how to turn

it from a one column into a two column all
on your own. I'm going to use the same breakpoint

that I used for my navigation here because
I want everything changing at the same time.

I think it's a bit more consistent when you
do that way. Instead of just having all these

random different numbers throughout. Of course,
that does depend on the layout. You saw in

the last video, I use a different number for
my breakpoint, but in general, I try and stick

with the same breakpoints just for consistency
and it makes my life a little easier to Did

you get it to work? I hope you did. So I'm
going to come in here and create my media

query. So It's an ad media, I want my parentheses
and then my curly braces, I'm gonna come back

up into here and do my min width 675. And
now we can come down here and add in what

we want. Now, don't do the mistake where we
just start writing stuff. Obviously, I've

done that a million times, but we have to
choose the selector we want first. So the

selector I want for now is article recent.
Now, we've already said that article recent

is display flex, so we don't have to declare
it again, if you did that, where you put display

flex, here, it's fine, it's not going to do
anything, it doesn't cause any problems. But

since we already have declared it, here is
the general rule, we don't have to read Eclair

it again, once we're inside of our media query
here, all they want to do is redefine my flex

direction, so I can do my flex direction.
And his column, I'm going to switch that over

to a row. And right away, we should see now
we have two rows of content in here. Now we

can come on to my article, recent main, we're
gonna want to do a little bit of work on that,

and my article, recent, secondary, and do
a little bit of work on that one as well.

So I want the secondary one to actually be
pretty small. So I'm going to give this one

a width of about 25%. If I go and look though,
it's gonna be tiny, tiny, tiny, tiny and this

is Flexbox, trying to be smart about things,
because it knows this one should be 100%.

Why is that 100%? Though, think about it,
why is this one trying to be 100%? It's trying

to be 100%, because we never gave it a default
width. And by default, any block level element

will be set to 100%. So 100 and 125. It can't
fit in this area. So it's doing its best to

go Okay, well, this one's allowed to be smaller.
So I'm shrinking it way down is sort of how

Flexbox thinks we're going to get more into
actually what's happening with this a little

bit later on. But for now, what I'm just going
to do is come on here and say this one has

a width of 70%. And if you go and look, the
only problem is we have all this leftover

space right here, I don't want leftover space
here, I want that leftover space to be in

between the two of them. How can we do that?
Do you remember, go ahead and do it if you

do. So to put the space between them, instead
of all the way in the right, I can come on

here and do a justify content space between
my doing that. Now I get the gap coming here

instead, you might say it's not reaching the
end here. But it's because the lines are breaking,

if I have a long word that can't fit here,
it's just going to go down to that side. So

it really is making it all the way out to
the edge, it just really depends on the the

text that you have in there. And the size
of the screen that you have it, sometimes

it'll look like it's closer. And other times
it might look in again, it's just based on

where the words are breaking. I actually don't
like that breakdown of stuff so much. So I'm

going to make this one a little bit bigger,
I'm gonna push you up to 30. And I think I'll

bring this one down to like a 68, or 67. Because
I think that space can be a little bit tighter

like that. So cool. That's looking pretty
good. We have my two columns that are working.

And when we get to the small screen sizes,
everything is stacking and our order is looking

fine there. I know our order is looking fine
here. So everything is fantastic. Except for

one thing. And the one thing that's not fantastic
is the order here is not good. If we come

and take a look, when we're a big screens,
we want our image all the way at the top,

and we want to have an info here, then we
want to have the title. And that's just not

what we have going on here because I put it
all in the wrong order when I did the markup.

So what I want you to do is we can work inside
of this media query, I want you to play around

and get that to work on large screens to be
in the right order for everything. Of course,

once you've done that, I'll go ahead and look
at how we can do it. But it's all things we

already know how to do. So go ahead and tackle
that. So I hope you found it if you didn't

Don't worry too much about it because it was
trying to trick you a little bit with this

one and make you think a little bit. So if
we come and look at my markup, we have the

featured article here. My feature article
has everything we need in it. But we want

to change the order of these and see you did
article title just for fun. If I came down

to here and I say article, title, order 99.
That should push it all the way to the end

should become the last thing everywhere. But
nothing happens. It's not actually changing.

So if you were playing around with the order
of things, and you're like, why isn't it changing?

It's normal. The reason it's not changing
is we can't use order unless we have display

flex on something already. So what I need
to do is article featured display flex. But

of course when I do that, it just causes chaos
because now everything is becoming a column

I even got some so it's just a mess. So I
want you to fix that now. And once you've

done that, if you weren't able to get the
order working, go in and put the order on

it and we'll take a look at the rest of it
together in a second. Alright, so fixed the

first thing was the flex direction. We want
that to be a not a row a column. And that

should at least fix the craziness that was
going on before and everything sort of falls

back to how it was more or less and then what
we can Do my article image has an order of

negative one. Now I'm actually going to make
this a negative two, because I also want to

give my article info and order of negative
one, to pull it up to in between those two.

Because if I don't include that, it's first
going to be my image, then it's my title,

then it's this, and I want this to be on top
there, whoops, on my console, so I can have

that negative one on there. So first, I have
my image, then I have this, then I have my

title, and then I can get into the rest of
it. And it's starting to look pretty good.

I'm pretty happy. Overall, with how this is
starting to come together, I think it's looking

really the Adobe XD for our widgets, we have
the sidebar widgets that we created here.

So we have the div class sidebar widget, and
we want to make them look a little bit like

this. So they have a really big thick border
on them. The color is not this dark gray is

a lighter gray than that, I'll let you experiment
a little bit. Or if you link to the Adobe

XD file, you should be able to get the exact
color that that is, as well as the exact thickness,

I'm just going to estimate it and hope for
the best. The one thing I'm a little bit worried

about with our current layout, though, is
this space is already pretty narrow here.

And it's going to get a little bit tighter
once we add that MP once we add the border

and that spacing inside of it. So what I'm
going to do is I'm actually going to right

now change the size of those before we get
into those widgets. Because I am scared we're

going to run out a room for them, I just think
it's gonna be a little bit too tight. So here,

I'm going to change this width down to a 70.
And this one up to a 25. I don't know what

might have to readjust again after but I think
it's going to help us out just by giving us

a little bit of extra space there. And now
what I want you to do, let's go all the way

back down. And I'm going to create a little
comment here saying with jets. And I want

you to come down and style them as much as
you can, it's using a bunch of stuff we've

already looked at. So go ahead and try your
best at least adding the border as well as

that space on the inside. And if you feel
up to it also doing the typography once again,

I didn't give it to you here but we know what
the fonts are, you can adjust and play with

the font size. If you do look at the Adobe
XD link, you will be able to get the actual

font size that was used, but it will be in
pixels from there. So make sure you convert

it over to rim. If you're not sure how to
do that you can watch when I do it, because

in just a few seconds after I give it to you,
I'll be doing it myself. As usual, they'll

try and do as much as you can and see if you
can pull it off before I take over. So I hope

you have a lot of success. Now let's dive
in. And it's not just widgets, it's my sidebar

widget. And the first thing we do is give
it the border. So I'm gonna give this 20 pixels

solid. And for the color, I'm just guessing
right now, but I know it's a really light

gray. And I know EF EF f is a light gray because
I've been doing this for a long time. So we

can see that it's looking pretty good. Actually,
I'm happy with that. Now they're also stuck

together. So I'm going to add a margin bottom
on this to help out a little bit. So margin

bottom, I'm going to try one M and see what
it looks like. And it's not bad, it's probably

a little bit too tight. So it's boosted up
to a two. But before we go and look at it

again, you might be going, Kevin, why are
using pixels here. But m here, borders are

one of the few places where I have a habit
of using pixels. Because a lot of the time

we have a one pixel border, maybe a two pixel
border, it's really rare that you're gonna

have a really big size on a border like this.
Now, as you can see here, it has happened,

but it's not too much. So I just fall in the
habit of using pixels because one pixel in

M is just not doing that. If you'd rather
set this because it's a bigger border and

M or M and M and that's what you did before
then by all means go for it, it would work

beautifully as well. And before we go and
check it out, though, I'm also going to add

some padding, and we'll try one aim of padding
on that. And that doesn't look too bad. I'm

pretty happy with how that looks. But let's
just see, when we get to the smaller screens,

if we run into any problems, this font size
is going to get smaller, these are getting

really, really narrow. But overall, nothing's
broken the image, the titles are a little

bit too big, the images are really, really
small. And we're sort of running into two

options. Now when we're making something responsive
like this, because it seemed to be working

super well. I think at the large screen size,
it's exactly what I want it to look like.

So I don't want to modify too much, we sort
of have two options. One of them is to change

our breakpoint. And if we do that we're going
to be going through potentially changing it

in multiple places. I don't really feel like
doing that because I don't want to have to

reconfigure a whole bunch of things. So another
option we have is to come on this and actually

make sure it can't get too small. Because
right now what's happening is it's clearly

just getting too small. Whereas these are
working fine. They're not ideal, but they're

working. Okay. So I think that's what I'm
going to do. So if we come on to my widget,

let's go and find not my widget but my sidebar.
So here we had our main and our aside, I think

I'm going to give this a minimum width. So
I want it ideally to be the 25% but I also

don't want it to get smaller than 250 pixels.
So well. It's even too big. I think There's

one disadvantage that when we do this, and
that's that that justify or justify content

space between stops having enough of an effect
on it, because at one point, when we lock

in that size at one point, they can actually
hit each other, because now that's locked

in at that minimum size of 200 pixels, which
I think is roughly the right size. Because

here, it doesn't look super ridiculously small,
it's borderline, maybe I could actually change

this breakpoint to be a little bit bigger.
But while we're here, why don't we just come

on the side here and add a margin left of
one M to the whole thing, which is not a lot

of space. But we don't want too much when
we're at this really small screen size anyway.

So at the big sizes, I think it's going to
look pretty good. And then we get smaller,

it's just going to prevent the two columns
from colliding into each other by having that

one mm space on the side there. So now we
get smaller. Again, maybe this is a good point

when we could be modifying the breakpoint
on it if we really wanted to, but I'm not

in not hating necessarily. And there we go.
And this comes into a really good discussion

about when you want to have your breakpoints.
And it's really about adjusting to the layout

and when things are working or not working.
So if you really don't like this, you could

come in and adjust your breakpoint at this
point. I'm gonna say it again, I've said I've

said this before, I'm gonna keep saying it.
Again, breakpoints are not device specific.

They are layout specific. When your layout
is breaking, when your layout is not looking

good. That's when you go ahead and create
a new breakpoint or adjust a breakpoint that

you already have. It's about your layout,
it's not about what device, it's looking at

hundreds, maybe 1000s of different phones.
Now, they all have a little bit of a different

size. There's so many tablets, there's laptops,
and these little laptops. And there's big

laptops, you don't know the device size somebody
is on. So don't worry about finding specific

numbers to use, and adjust it where your layout
is working and just make it work at the different

screen sizes. However you can I'm pretty happy
with this. If somebody happens to be here,

there might not be a million people with this
device width on it. But overall, I think I'm

happy with that and how the whole thing is
working, we could also allow this to get a

little bit wider, I just wanted to make sure
that we're limiting the max width of it. For

some people who are doing this tutorial on
a smaller screen, they can see it reaching

that maximum width. I'm gonna end this lesson
here, because I think we covered some easy

things with our setting that up. The last
thing we're gonna do in the next one is finishing

up everything in the site. So we're gonna
fix our titles, we're going to fix the order

on this. And the one forgotten element is
our footer all the way at the bottom, I think

we can knock that all out of the park really,
really quickly. So let's wrap this tiling

the titles, they need to be adjusted a little
bit. So let's go and do that. And let's go

and look at our index first. What do we call
them, we call that widget title. So this is

where we have an h2 that it's really useful
to have a class on. Because pretty much all

the styling. On our other h twos, we didn't
need to do very much on these, right, because

when we look back at our styles, and we go
all the way back up in our file here, a lot

of it is handled right here on this h2, we
set up the font family, we set up that we

set up the color, we set up the margin, we
did everything here. But we're still dealing

with an h2, this one just happens to visually
look completely different. So this is where

it's really really handy. To have this, we
have all of our articles stuff, let's come

right here, widget title. And let's give this
one a font size of one REM, the colors probably

Alright, but we need to change the font family
over to Ubuntu just there we go. And we also

want to make the font weight to be 700. Because
we want it to be not 7700, we want it to be

bold, I don't even know how bold 7000 might
be. So there we go, that's looking not too

bad. Let's just go look back at the original
design, maybe the font size can be slightly

bigger. But I'm gonna stick with that. I'm
pretty happy with it actually, just based

on looking at it visually. We want to style
these now and actually change the order of

things over here. So how can we do that? Let's
go and take a look back at our markup and

see how we did it. So we had a div of widget
recent post. And then we have the order of

our widget recent title, you know what I actually
think is widget recent title. So that's looking

good. Now these are too big. And I think these
are actually supposed to be the same size

as this. So let's come back up to our CSS
file here. And widget title, I think what

we could do is keep my widget title, but also
have my post title. Don't forget the dot and

give those the font size, font size of one
REM here. So we don't need to have it necessarily

on that one. So that it helps shrink down
those a little bit. Just visually they're

not as in our face. And what you need to do
is change the order of them because this should

be underneath the image and not on top of
the image. It doesn't look right like now

the spacing is all off. So we've already looked
at how we can do that when we did all those

other order things. Give it a try. I hope
you got it to work. If you didn't. Let's go

and look at our markup, the one reason you
might not have is we have this widget recent

post. So this widget Recent Posts needs to
have the display flex on it. So we can change

the order of things that are inside of it.
So I'm going to come here, I'm just going

to go all the way down where we have our widgets.
Because now I am looking at layout. Don't

forget the.at the front. And we can give this
a display of flex. And when we do that, it

will make columns, we don't want columns.
So flex direction, will become column. So

the things inside our rows, and they're stacking
on top of each other. So it goes sort of back

to how they were. But now we have the advantage
of having the order on these now. And realistically,

I might not actually switch the order on them,
like I did here, I might have just put image

and then title, I think it's fine in the markup
to do it that way, I just wanted you to practice

a little bit more and play with the order
a little bit more, since it was a new concept

coming into this project. so here we can say
that my widget image has an order of negative

one, and that should have jumped it over to
the top, there we go. So we have that we have

that. Now we're just missing one thing. So
we can see those here, there's these little

little thin lines that are coming in between
on those sets, we need a division here in

a division here, there is a trick though,
because this one, we don't want to do it.

That's okay though. For now add one here,
add one here, I'm going to show you a trick

to get rid of that last one. Okay, so let's
go and add those in, I'm going to do it like

I did before, where I'm just gonna add a border.
So we're gonna say border, one pixel solid.

And for the color, we'll go with that dark
Ray that we've already been using. If we go

and look at it, now we have a line Oh, no,
it's on all four sides, I only want it to

be on the bottom. So let's fix that right
away and go look, again, that's looking nice,

but I need a little bit of space underneath.
And I want some space in here. So we can right

away at a margin bottom. And we'll just go
with one m, let's see, I use a lot of training

round numbers, one m one and a half for M
to ram, it helps with the consistency along

the way. And doesn't that just we go, that
looks pretty good, I think except we don't

want this one here, this one is going to cause
us some problems. So instead of styling it

like this, so I'm going to show you a trick,
something we haven't looked at before, I'm

going to do a widget recent post. Last Child.
So this is another pseudo class, this is like

hover and active and visited. But it's saying
if it's the last child inside of something,

I'm gonna say border zero, and I'm gonna say
margin of zero, because we want to take that

margin bottom off, so it doesn't add extra
space. So I'll explain this in a second. But

let's go and look. And there we go. Now everything
is getting balanced out, we have a line here,

we have a line here, but we don't have a line
coming on this one at the bottom. So to explain

what this is in a little bit more detail,
let's go and look in my index. So we have

our widget, our widget here, and our widget
here. And this is the last child inside of

this parent, if I were to come and add a paragraph
here, example. And we were to come back. Now

that we have a another item in there, this
is no longer the last child. So this now has

a border on it. That's pretty fun, right?
I think that's pretty cool. So it's always

about the state is this, if there is a widget
recent post that happens to be the last child

somewhere, we're going to turn off that border
in that margin that we just added here. But

otherwise, they should always have it just
like when we're hovering on something. So

we have a normal style in a certain state.
And when our mouse is hovering on top of a

link, we're changing the state this instead
of looking at a mouse, it's looking at its

relationship to its parent and to its siblings.
So it's a really, really fun and cool pseudo

class that can come up on something. So let's
go and take out that extra paragraph that's

on here. And I'm not going to save the I'm
going to do the footer. Now I said we're going

to wrap up the whole thing. And then the footer
is so nice and easy. I never even put the

text in there. So there we go, we have our
paragraphs inside the footer. And if we go

and look, it's just has that text, the first
one is bold, the second one isn't. So let's

wrap this one up in a strong tag. And close
strong right there. And we can come into our

styles. I'm going to come up a little bit
here all the way to here where I was doing

like my header, my containers, all of that
I'm actually gonna put the footer here because

the footer is this really generic item. That's
just everywhere. So we're gonna give this

one the background of that dark blue, we're
going to give it a color. In this case, I'm

going to give it white for now I'm going to
come back to this color later on when we're

coming back in in the next module of this
course, stepping up style, because we're going

to show you a cool trick if you set another
color on it or want to actually you know,

use a color picker or getting a specific value
just to match that. That'd be cool. When we

do stepping up or style. I'm going to dive
a little bit deeper into this. A text align

center on there and some padding. We'll go
with the three M and zero because the padding

looks pretty big on the top and bottom and
there we go. It is Looking pretty good, the

homepage is all wrapped up, and we're ready
to move on to the other two pages, which are

going to just start by coming over to my favorites.
And some of the recent articles page, which

is this one here, I'm not even gonna bother
zooming in, it's so similar to this one, we

can knock this whole thing out without even
writing one line of CSS, we just have to literally

edit a little bit of markup. So for this Pedram
and do is I'm going to start by coming over

to my files here and clicking on new file,
and creating a page called recent hyphen posts

dot html. Now, this could just be recent instead
of recent posts, it's really up to you. But

if you're going to do recent posts, it's either
a hyphen, or underscore, make sure there's

no space in there. And what we want to do
is come over to my index, I'm going to do

Ctrl A, or Command A, if you're on a Mac,
to select everything. And then I'm going to

Ctrl or Command C to copy it, I'm going to
come over to my recent posts, and I'm gonna

paste that right in there. Because we have
everything in place that we need for this

page to work. The only difference between
the two layouts is this one is styled just

like all my other recent articles, whereas
on the homepage, it was done as a featured

article. So part of the reason I did this
was to show you a little bit of how CSS gets

reused across our pages, we don't have to
keep recreating and rewriting styles, we have

everything we need literally everything we
need. If this was a real page, it probably

be dynamic, and the content would be automatically
put in there, we might have more than four

posts on a page. And these two pages wouldn't
be so close to each other in terms of content,

but layout wise and CSS wise, they'd still
be identical to one another. So if we come

through, and we look, here, we have my featured
article. But I want that to be a recent article.

So I'm going to copy my recent article here,
Command C, paste it in here. And then I'm

going to start just taking little pieces.
So if you do a Command or Ctrl x, it's a cut

instead of a copy, I can cut that title out.
And then I can come and put that title right

here. I can take my image, and I can put that
image right here, I have my info. It goes

right there. And this paragraph, it goes right
here. Continued reading is the same in both

of them. So we can just delete that whole
thing and not even worry about it. And we

can actually see that page yet because we
haven't set up the links to be able to do

it. Because then the only place where those
were linking together is in the navigation.

And right now in my navigation, I just have
these placeholder links. So what I want you

to do is fix the navigation links. So you
can go back and forth when you're on one page

or the other page make all of the navigation
links work, except for the about page because

obviously we haven't done that one yet. So
we are working. So on this one, we want to

have our index dot HTML here and on my recent
posts, so we can add that in even though recent

posts, this is the page we're currently on.
And then I'll come over to my index. And I

want to do the exact same thing there. So
whether you're copying and pasting, or you're

rewriting it again, here, something that a
lot of people don't realize, or they don't

always think about is that you need to have
all of the links and all of your pages to

be updated. So that you can go back and forth
between the different pages. So if we save

that income, take a look at it. This is my
homepage. And if I click on recent posts,

or Recent Posts is working perfectly, and
everything is good there. And we haven't written

one line of CSS, and we just finished a second
page. So this shows you once you're finished

one page, it's exaggerating a little bit,
you often have to write a little bit of extra

CSS. But in this case, we didn't have to write
any at all, we're going to go on to the About

Me page, which is a little bit different from
the rest of them. So we might have to write

a few extra styles. But overall, it is really
similar. There isn't a lot for the amount

Me page, there isn't a lot to do once again,
but there is a little bit that we need to

do. So I'm going to give you the link to the
Adobe XD file, once again in the show notes

as well as in the slides and just one second,
just to make it easier to get the text but

also to see what text is bold in here, because
we do have quite a bit of text that you're

going to want to make bold when you do this
one. And we also have these h threes that

are different from all the other h threes.
So that need their own style, their own color,

their own font size, and all of that setup
on them. But otherwise, there isn't that much.

Now the very beginning of this is exactly
like we did before, we can go to one of our

pages, copy all the content and paste it into
a new page. So I want you to try and do that

and delete everything that you do not need,
we can keep some stuff but we do need to delete

some other things. So go ahead and give it
a try. Place the content and see if it works

the way you expect it all to work. And of
course as usual, I'm going to be jumping in

and taking a look at it with you in just a
minute. Okay, so let's go and make that new

file. So new file, we can call it a boat mi
dot html. Again, if you're going to have two

words in it, and you need namespacing do not
put a space with your keyboard. Make sure

that is hyphens separated on my recent posts.
We can copy all that come over to my about

me and paste it all footers good. In my sidebar.
The sidebar is a little bit different on this

one
We do not need this first widget anymore,

since we're on the About Me page. So we can
delete that sidebar widget. And we don't need

any of the articles. But I am going to keep
the main there. So let's come through and

just delete all of these articles, they're
all vanished, they're all gone. And we can

just come in here and start working directly
in the main, I'm just going to fast forward,

when I do this part, there's not a lot to
it, it's just, you know, we just have to place

content and put the right tags on everything.
So I'll be back with you in a second with

all of the content in place. So all of the
content is in place or ready to go now and

do the last finishing touches on this. So
there's not a lot to do, if we come in Look,

I've also been really nice, and I've set up
all the links for you. So if you go and look

between all the different pages, I have put
those links in there. So if we come through

and look, now, all of the links are working,
we can jump through between the different

pages, and everything is all awesome, there's
only two things is I need to change the color

of that looks like I made a little typo there
somewhere too, we want to change the color

of my h threes, maybe change the spacing on
them a tad. And of course, we want to make

some modifications on this picture. Because
we looked at the original design, it should

be able to crop itself, similar to how these
images were cropping. So the first thing I

want you to do is go ahead and do that we've
seen it with those other ones. If we come

and look at my About Me page, I've given it
the class of image full. The idea here is

that I see this page sort of acting as a template
page as well. So just like these are sort

of templated pages, if you were to click on
Continue reading, it can use this exact same

layout for a blog instead of for, for the
full blog post, instead of format, just my

About Me page, if you're going to do that,
I'd probably have the article tag, the whole

thing wrapped in that. So article open all
the way at the bottom article close. But in

this case, it's not really an article, so
I'm not going to include it. Now if you're

wondering how you could do that, where you're
creating template pages, that's not in the

scope of this course. But there are different
ways there's languages like PHP, which WordPress

is built on. So you could actually make your
own WordPress theme. Or I use a language called

Jekyll for my personal site. Right now I'm
looking at changing that maybe to eleventy,

or there's many, many others, there's a few
of them that I'm looking into. For the next

time I redo my own personal site, which are
called static site generators, where it's

mostly using HTML and CSS. So you're setting
everything up with those. But then you can

have the content if you write a new blog post
that sort of automatically putting the content

into the template file that you created. And
we're well on our way of having something

that could be taken to that next step once
you're ready, but I wouldn't get there yet,

don't get ahead of yourselves, let's first
master how to make the responsive page. And

then once you're super comfortable with that,
you can start worrying about templating. So

for the image, I want you to go ahead and
do that set up the image. So it is cropping

just like we did on the other ones, I would
do with a maximum height, so limit the maximum

height or image you can have, and also maybe
add a little bit of margin on the bottom of

it. And in the next video, I'm going to show
you how I would do that I gave you in the

last we'll be wrapping up this module in the
next video. But this is the finishing touches

on this site. Before we move on to stepping
up our style, we're going to look at some

of the more finer tune stuff, but let's not
get ahead of ourselves. And let's see what

we can do. So the first thing is the challenge
that I gave you in the last one of fixing

that image, I'm going to come and put it all
the way up with my other image class, my image

style, it could probably come into layout
here as well. Because this is all layout related

stuff. The reason I'm you know, my other ones
were article related, but this one technically

can be used anywhere it could be used inside
an article, if I ran into another post where

maybe there is no sidebar, and it's just this
full image that takes up the full size, then

it would work there too. So I think it makes
sense in this case, just to throw it up here

where I have my images, which is all the way
at the top here. Because it's sort of like

this image helper class. So I called it image
full. And all I want to do is give this a

max width and a max width, I said to give
it a max height, I'm going to give it 300

pixels. But when I do that, it's trying to
keep my image in proportion. So I'm going

to give it a width of 100%. So it always stays
at 100%. But the problem now is it's all squished

and he looks a little bit chubbier than he
should. So we want to come on and give it

the object fit property with that cool cover
value that we looked at where it will crop

the image for me and it's looking perfection
right there. And I think my image flow will

always have a margin underneath it. So our
margin bottom, I'll just give it a one m to

give us a little bit of space. And you know,
I don't know if that'd be enough. So I'm gonna

do two before I even go and look at it. Half
love it. I think that looks fantastic. So

that's I'm super happy with that. It's looking
really good. The next thing we do is change

the color of these and I think I'm done for
this the site. I'm really happy with it. As

I said in the next one we'll be looking at
stepping up our style. So for that I'm in

my typography section now let's go and look
I actually those were just h threes. I never

even gave them a class which is cool. So I
can just come here and say my h3 has a color

of the bright blue color. Um, no i did group
that with here. I could break the color out

of here and apply it but then I You know,
I'm being a little bit lazy with my CSS. Now

we're defining two different colors. And it's
just always the second one that's going to

win. I just don't feel like making another
selector for it, to be honest with you. And

I don't mind overriding things a little bit,
it's easier than breaking this out having

my h1, h2 have all of h3 have all of it, and
then another h1, h2 that just does the color,

oh, I'm just gonna put it like this where
I'm overriding that a little bit, because

it's going to work and my colors are there.
Oh, no, oh, my goodness, look, it changed

these ones as well, that's not good. So we
can go and fix that just really fast. As I

said, we're wrapping up right now. So I'd
want to come down to here and those with my

widget, recent post title, so we want to grab
that, paste it in there and change the color

of those color to the dark blue. And with
that, that is looking awesome, we have the

darker titles back to there. I'm gonna remove
that because it's driving me absolutely bananas.

And we got one last thing that we need to
take a look at. And that one last thing we

need to do it has to do with our navigation,
can you think of what it is we'll try and

find this mistake here. So our navigation
is working all fine. All the different pages

are working. But our current page class got
lost. So I want you to go in and add the current

page to the correct page on all the pages
to finally wrap up this site. So all we need

to do for that is if you remember on our index,
I'm going to do it on this one first, and

then add the class of current page. Let's
go take a look, we get the underlying we gets

rid of that hover, but these ones are still
working. But when I go to my about me, I want

this one now to be that. So if I want to go
to my about me, let's actually make our life

easier by copying all of this. And then I
can go to my about me find the right spot

right there and paste it in. And then I can
go over to my recent posts. And I can do the

exact same thing there, where I paste it in.
So we're saying what page we're currently

on. And now when we go and look, all the pages,
get that nice little underline on it to indicate

what page we're on while we're navigating
around. And with that we are done, we have

wrapped up this site, everything is looking
really really good. I'm really happy with

how it turned out. I really hope you are too.
We covered a lot throughout this module. So

in the next video, we're going to do a wrap
up of all the different things we've covered

and where we go. So this is a really important
note before you move on, or before you graduate

from scuba air, you start doing things on
your own. And that is we have a viewport meta

tag. And I didn't include it in the lessons
of this module. When we take a look in the

browser window on our desktop computer and
we play with the width, it works really well.

But this doesn't fully simulate how a phone
will render a page. So the best case scenario

is actually testing out the sights you're
doing on your actual phone, or multiple phones

on an iPad on your Android tablet, whatever
it is, we want to actually test across different

devices. The reason we have this viewport
meta tag we're going to see in a second. But

mobile devices, what they started doing is
to prevent problems in how the page was rendered.

When sites are not optimized for mobile devices
and small screens, they would render a zoomed

out version of the page. And then they'd shrink
it down to fit inside the viewport of their

mobile device. So they all every device has
its sort of default size. So you might be

on a phone like an iPhone that has a width
of 360 pixels, but what they're gonna do is

they're actually going to bring in the version,
they're telling the browser that it's 960.

And it's going to take the version of your
site as if it was at 960 pixels wide, and

it's going to shrink the whole thing down.
And it's gonna be super zoomed out, it's gonna

look like your desktop site, but really, really
small. Even if you did all the hard work of

building your media queries and doing everything
you wanted to make it responsive. So to prevent

it from doing this on our pages, which we've
optimized for small screens with the media

queries, we need to add a meta tag to the
head of our document. There are a lot of different

attributes that we can add, but the basic
meta tag that you'll use will look something

like this, or it will look exactly like this
really. And this can be added anywhere in

the head of our document. This will make sure
that the page actually loads properly on on

mobile devices, which after all the hard work
we did, we really wanted to do. So once you've

graduated from here on screen, but and you're
working on your own pages, and you're testing

them in different devices. Remember to include
this in your head, I can go anywhere up here,

I already have a meta tag for that. I'm gonna
go right after that and paste it in right

there. So what this is doing is it's saying
that it's a meta tag is always referencing

different things. We haven't really looked
at meta tags, but it's referencing like different

stuff, you have a description of the site,
you have the author of the site. So if we

say meta name equals author content is equal
to KEVIN POWELL. For this individual page

of my website, I've said that the author of
this page was KEVIN POWELL. I know the browser

knows that there are other ones that you may
use along the way as well. But in this case,

we're looking at the viewport once we're saying
that this meta tag is related to our viewport

and the first one here's the really important
one. What this is doing? Is it saying the

width is actually the device width. So this
is where I said that mobile devices would

simulate being a larger device and then shrink
everything down. So it would say, No, I'm

actually a device that's 960 pixels. And then
it wouldn't take that and shrink that whole

thing down. This is saying, nope, the width
isn't what you're telling me it is, it's the

actual device width and the initial scale,
you don't, I don't think really, really need

it. But it's pretty standard to have it in
there. And it's just setting the initial zoom

level when the page is first loaded. So you
could actually have it zoomed in more or less.

But I think that'd be really, really awkward.
So you generally want it just to be zoomed

to 100%, or like the default 1.0 type of thing.
To have it not scaled when the page is loaded.

So once you're done here on screen, but and
you're making your own web pages, please please

remember always to be including this in here,
because the browser window on your computer

is not the same as on your phone or on your
tablet. So you want to test across different

devices. And most importantly, if you don't
want things to look really zoomed out, make

sure every single page that you create has
this meta tag right here. Really scratch this,

you did it, you should be super proud of yourself.
Before we get into being proud of yourself

and giving you a pat on the back. Let's turn
remember some of the things we learned in

here. So we covered Flexbox, we looked into
a more of a deeper exploration into what Flexbox

is. And we've only really scratched the surface
with Flexbox. despite there being a lot more

to it, we've learned enough to leverage it
and to do some stuff with it. And we've done

that by starting to play with justify content
and align items to position things where we

want them to be on the page. So we know we
can on both of these do a flex start flex

and or a center. And we've also seen that
with the justify content, we can do like a

space between or a space around or a space
evenly. So we can redistribute the leftover

empty space with our content to help make
our layouts without having to complicate things

and get all the numbers perfect. We've also
seen flex direction, which is switching the

main axis. So it's taking that justify content
in the line items and making them work the

other way around a little bit, which is kind
of weird. I agree. But that's how it works.

But we've seen how we can switch the main
axis and why we might want to switch the main

axis. So in some circumstances, it was useful
to do it just permanently, such as on those

widgets. In the widget, little title cards,
it was good to do it on those just so we could

work with Flexbox. But we could also switch
it using media queries. And when we use our

media queries, we were changing the way the
layout worked at small screens and big screens.

And this was super powerful and super useful.
We sort of went through a whole bunch of stuff

on media queries. But once we started using
them, we were just doing the really basic

stuff, we're setting some min widths, and
it's working. And that's it doesn't have to

be complicated. I don't want you to overcomplicate
it when you are using your media queries.

Another thing we learned wasn't necessarily
about thinking responsively, like a lot of

Flexbox and media queries are all about. But
we did learn how to make it responsive was

how to build and style and navigation was
a lot more complicated than you might have

thought it would be. But we got it to work,
it looks fantastic, you should be really happy,

really proud of yourself. And you should give
yourself a huge pat on the back for making

it this far, it's a lot of work and a lot
of material that like an insane amount of

material that we've covered so far. Really,
you should be super proud of yourself at this

point. Take a break, please, please take a
break, there's been tons of stuff, you need

to award yourself with a couple of days off,
or a couple of days of doing some other stuff.

If you really want try and build the site.
Again, going back over everything you have

the Adobe XD link, do it on your own, don't
follow my instructions, see if you can pull

it off again. Or maybe if your own colors,
your own layout, or just try and do your own

thing. Maybe with a similar layouts, you're
not trying to go too far out from what we've

done so far. But trying to push things and
do things on your own a little bit would be

really, really good to use everything we've
been learning so far. But do make sure you

relax and breathe a little bit. If you're
going to do any work at this point, I would

really make sure it's reinforcing what you've
learned up until now. And once you're feeling

ready, and once you're feeling comfortable,
then it's time to step up your style with

the next module in this course. But please
don't rush into it. Take your time to get

there, relax a little bit, go on Twitter,
social media, YouTube, whatever it is chill

out, you know, some Netflix and chill. Whatever
it is you'd like to do for a little bit just

to let everything absorb. And then when you're
ready, and you're feeling up to it. In the

next one. When we see how we can step up our
style and start making things you have done

it you've made it through a massive amount
of content. You've wrapped up all of that.

And I hope you've learned a lot of things
along the way. Now, as I mentioned at the

very beginning, all of these lessons are part
of one module of six in the responsive web

design bootcamp that accreted over unscrambler.
That course is available right now over there.

So if you'd like to go and check that out,
by all means you can it goes in from the very

fundamentals of CSS, we're covering the basics.
We have this module that you just did we go

into stepping up are style where it's not
so much about responsiveness, but it's about

understanding CSS, taking things up to the
next level, making things look a little bit

nicer. We get into typography as well as some
of the more flashy and fun things you can

do in CSS. Before taking a real deep dive
into Flexbox, to make sure you really understand

it, because in this, we started using Flexbox,
we started scratching the surface with it.

But in that module, we really go all the way
in, we go deep into it, followed by a deep

dive into CSS Grid, which is CSS is newest
layout tool. It's the really, it's the way

that large scale layouts should be made these
days, it is a fantastic tool. So we take a

deep dive into that. And then we wrap the
whole project up with a final project where

we take everything we've learned, put it into
practice, and also add a few cool things in

along the way. So if you did enjoy these lessons,
you can go over to Scrivener, and check that

course out. Again, it's called the responsive
web design bootcamp. Of course, you can also

find me over on my own YouTube channel, which
is at KEVIN POWELL, you can find me over there

with a quick search. And whenever you do,
if you haven't yet subscribed here on Free

Code Camp, I'd also really encourage you to
do that. They just have tons of amazing content

here and they keep putting out some great
great stuff. So make sure you go ahead and

subscribe to their own channel here as well.
And as I usually like to sign off on my own

channel, until next time, don't forget to
make your corner of the internet just a little

bit more awesome.