This course has been updated! We now recommend you take the Complete Intro to Web Development, v2 course.

Check out a free preview of the full Introduction to Web Development course:
The "Exercise 3: Solution" Lesson is part of the full, Introduction to Web Development course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through the solution for Exercise 3: Styling a Page.

Get Unlimited Access Now

Transcript from the "Exercise 3: Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: First of all, this box-sizing and border-box that we talked a little bit about before, but this makes this so much easier, right? Cuz the first thing we're gonna do is we're gonna take these, actually, I need this open, don't I? Cuz I don't remember what anything's called.

[00:00:17] So picture-group, right?
>> Brian Holt: Because everything's in a picture-group. Yep, okay, so just make this a lot bigger. Come on.
>> Brian Holt: Okay, so .picture-group,
>> Brian Holt: And we're just gonna give them a width of 25%, okay. Now they're all tightly compacted together. We're gonna say border 1 px solid black.

[00:01:11] Okay, and how we're gonna float them left. Okay, and now everything is on the same line. But It looks kinda dumb cuz they all have these different heights. So how you want to do height is kinda up to you, you can just do something like 200 pixels or something like that.

[00:01:34] That's kind of an easy way to do it. Except that's not nearly high enough, so let's try 400, 300, maybe like 330. All right, good enough. Let's give them a bit of padding, a little bit more breathing room, so we're going to say padding five pixels or something like that.

[00:02:03] Something you're kinda gonna learn as you go forward with this kind of stuff is that you just kind of poke around, see what works, poke around a little bit more, see if it works better. It's just kind of tooling with it, see if it works, it's kinda the hacker attitude.

[00:02:20] Okay, so now everything's on the same line. We wanted it to be centered, so we're gonna say text-align center. That's pretty much it, isn't it? Yeah. And then you can make it wider, and notice it all, even when you get super small, which is bad but whatever, you might want to say overflow hidden, so it doesn't flow into the other one.

[00:02:59] But there you go.