Newspaper Layout

[00:00:00]
>> So so far, I've shown you a lot of various different techniques and things to do with CSS. By the way, we're essentially done learning new stuff about CSS and I'm gonna make you do some projects now. But you have a pretty good grasp on the realm of everything that's in CSS.

[00:00:16]
There's not a lot more that exists. I mean, there's even more advanced animations. There's different ways of doing layouts and things like that, but you know most of the surface area of what CSS can do for you now. So you and I are going to build this together.

[00:00:38]
This newspaper looking article together. There's many ways of doing this correctly. Let's talk about how, How I would do this. So this is the whole page here. It's got a navigation bar up here. This has got a title here. It's got nice little borders, it's got an image, it's got text on it.

[00:01:12]
So let's take a look at what the HTML would look like. It's got a page. It's got a brand header on it. So as you might imagine, actually, let's just do it this way, oops. This is a header here, right? Inside of that header, there's an h1. That yellow that you see there, that's a margin, so that's got some margin on it.

[00:01:48]
All the navigation is getting pushed together. Okay, it's got a ul, an unordered list, right? That's kinda what I used to put the navigation links. So you can see all of these here exist as li's on here. And inside of them is each an anchor tag to go to various different places.

[00:02:11]
So this would go to the sports page or the opinion. I didn't make them go anywhere cuz I didn't code the rest of the website. But as you might imagine, this would link off different parts of your website. Okay, and then I have articles, right? This is an article, this is an article, that's an article.

[00:02:33]
And then down here, Is an article and a wider article, right? That's it. So my question for you is how would you do this? Well, what techniques would you use to do this? Well, this one's pretty easy. You just have an h1 that takes the entire page. And then you could text align that to the center, and then you would set the, And let's just go through with all this together.

[00:03:19]
So, This is all of my CSS that I wrote for it. But if we inspect element here, It's got a font-family. Snell Roundhand was the name of the font of this, classic, just looked at for a cursive looking one. Font-size, no, I didn't want it to be bolded, right?

[00:03:47]
Otherwise, it'd be bold, and that looks weird to me. 60 pixels, and then text-align center, pretty easy. ul here, how would you do this? You could do with grid. You could do with flex, I did it with flex. Space around that fit in nicely. Align-items center cuz I wanted everything to be horizontal and vertically centered.

[00:04:08]
So I did align-items center, justify-content space-around, right? If you take the list-style off, otherwise, there's the little bullets show up. We didn't want bullets. Margin 0, otherwise, it had a margin or anything, and we don't want that. We want the nice little lines to connect to each other.

[00:04:27]
And then padding of 30 pixels, otherwise, it just gets pushed up on that, and I wanted some space to give everything to breathe. Okay, the li's, let's look at one of those. That, I got rid of the text-decoration, otherwise, they're underlined. You might argue that might be better, up to you.

[00:04:50]
font-size, font-weight, I mean, arguably, that actually looks better, but I didn't do that. Font-family Futura, otherwise, I don't like that. And I grayed it out a little bit, otherwise, it's really bold and black and pulls your attention. Okay? So I'm kinda showing you this because I'm going to make you do this here in just a second.

[00:05:20]
Okay, then we have all the various different articles here. But let's look at the page here, because this is laid out in grid, right? So if you actually look at the string here that I used, it's header header header, right? So header header header there across the top.

[00:05:44]
Nav nav nav, right, so nav nav nav, right? story-1 story-2 story-3, so story-1 story-2 story-3, that worked out well, right? And then down here is story-4 story-5 story-5. Right, cuz story-5 takes up two of the rows or two of the cells, right? And then, I mean, these articles are really just an h2 probably I think is what I put in there.

[00:06:17]
With a couple of paragraphs, font-size, text-align center, font-weight normal. And then I put an italic on there to kind of give it the news impression. And that's it. That is how you lay out all this. I showed you all the techniques to do that. You totally could do this yourself.

[00:06:39]
And if you want to, it's a good exercise to go back and maybe try it for yourself, see if you can do it.