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.