Code a Blog Page Exercise

[00:00:02]
>> Jen Kramer: The next thing I wanna do is I wanna talk about your task, for today. So this is Code a Blog Page, all right? From the website here, scroll on down to the exercises. Take a look at Download Zip Files, click on that link, this is gonna put onto a GitHub page.

[00:00:22]
Go over here and find the Download button, click the Download button. It's gonna download to your downloads directory. From your downloads directory, drag your zip file onto your desktop and unzip it.
>> Jen Kramer: And so, there's my folder right here with the exercises in it. What I'm going to do now, is I'm going to drag and drop that folder, right on to VS code.

[00:00:55]
>> Jen Kramer: There we go. Great. And, I'm gonna take a look here inside of the blog. First of all, the blog begin, can I show this. Good. I'm gonna start with blog.png form inside of that folder, okay. I'm gonna start with blog.png. So, this is a real world exercise for you guys today, okay.

[00:01:21]
This is a picture, it's a specification.
>> Jen Kramer: And, the team of people who are working at the company where you work, they've come up with this absolutely beautiful web page layout for you. We are going to try to make this, from this picture we need to code this.

[00:01:41]
Wow, that's a really big leap, isn't it? No more ugly web pages, we're now making pretty stuff, all right? So, where you're gonna start, is in the blog begin folder, okay? There's a file in here called blog.html, go ahead and open that up.
>> Jen Kramer: Put on my word wrap.

[00:02:04]
And, I'm gonna go ahead and display that [COUGH] In my browser.
>> Jen Kramer: Okay? And, this is the way it looks right now. So I've given you a bunch of stuff. I've given you a picture. Here's some text, The funky fonts that are in use here, we're gonna talk about that later on, probably tomorrow, we'll talk about how to do the funky font stuff.

[00:02:34]
But I've done it here for you today. Clearly we have a nav bar, you know how to do that. We've got some funny layout stuff going on up here. How might we solve this layout stuff here? We want to go from the way this looks to our picture.

[00:02:53]
Let's put these side by side. Anybody have any suggestions for how we can get. All of this to layout like this, based on the techniques we talked about today, what's the technique that might work for that?
>> off screen: Float?
>> Jen Kramer: Could be float. Probably even better would be?
>> off screen: Flex.

[00:03:19]
>> Jen Kramer: How about Flex box. Okay, so you can probably lay out this header here with a little flex box. All right. How about this nav bar? How do we go about doing that?
>> Jen Kramer: Have you totally forgotten nav bars? It was before lunch.
>> [LAUGH]
>> Jen Kramer: Inline block right?

[00:03:43]
You could do it with a flex box too. But inline block is how I showed you. How are we gonna get those two lines, the color line on the top and the color line on the bottom? How are we gonna get those?
>> [CROSSTALK].
>> Jen Kramer: Probably no, actually not the horizontal rule but.

[00:04:00]
>> off screen: Borders.
>> Jen Kramer: Borders. We can do it with borders. Right? So, we can find a tag that's gonna go all the way across like that and assign a top and a bottom border of different colors. Right. No left and right borders. Okay. How about these pictures here. So, we have a picture and then we have a bunch of text.

[00:04:19]
How are we gonna do that.
>> off screen: Float.
>> Jen Kramer: Floats, floats are one way of doing it. What's another way of doing it?
>> off screen: Flexbox.
>> Jen Kramer: Flexbox, Flexbox would be the other way to go. So, you can experiment and try both of those. Notice too, then in our design we have rounded corners here but there are pointy over here.

[00:04:45]
How might we go about adding some rounded corners?
>> Jen Kramer: Some of you have managed to figure this out. I didn't go over it in class.
>> off screen: Radius.
>> Jen Kramer: There is a border radius property that will actually give you some nice rounded corners. You can read about that in your notes.

[00:05:03]
Okay. So then, down here at the bottom, this is alien social media here, okay? Those are little alien social media links. Down here, at the bottom of ours, we have, this. Any idea how we can go from that to this?
>> off screen: Flex Box.
>> Jen Kramer: Flex Box, or?
>> off screen: Inline block.

[00:05:29]
>> Jen Kramer: Inline block, one of those two, all right? So, you see how this page is gonna use everything I've talked about today? Cuz now, on the top of all that, you gotta throw in some padding and some margins to make it pretty, give it a little space to breathe.

[00:05:45]
Sound like fun? Yeah. Cassie's like, yeah. So ready. Okay, so what we're gonna do is I'm gonna give you about an hour here to get started on this blog page. Okay, so put aside everything else that you've been working on. I want you to start working on this blog page using the files that I've given you.

[00:06:04]
Everything is here. You have blog.html, you have a starter style sheet file, it's all linked up for you. I've got some basic styling in place here. You can just continue to add to this, okay, you've got all the images you need. They're all in here, and I want you to try working through this blog example based on all of the stuff that we've worked on today.