This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Exercise 3: Styling a Page" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Hi, so this is the grand finale for the CSS portion of this class. So go ahead and open this pen. And then I put an image in there which I have embedded on the next slide, if you wanna see it that way too. So I've given you a bunch of HTML, with of course CAD pictures, you're welcome, and I want you to style it.
[00:00:28] You're gonna have to use floats and stuff like that, and I put the box sizing thing on there for you which I explained earlier.
>> Speaker 2: Do you specifically want four and four, or does it depend how wide your browser.
>> Brian Holt: I want four and four.
>> Brian Holt: So I put the solution on there.
[00:00:49] Don't cheat yourself try and do it the first time, bang your head against the wall, that's how you learn. And then we'll go through it together.
>> Brian Holt: So again, the whole exercise is, open the HTML. Do not touch the HTML and just use CSS.
>> Brian Holt: So questions on it?
[00:01:18]
>> Brian Holt: So some hints. You're gonna have to use text line. You're gonna have to use that margin auto trick I just showed you. Actually no you won't. You won't have to use margin auto. You will have to use padding.
>> Brian Holt: You'll have to use float.
>> Brian Holt: Yeah, that's about it.
[00:01:51]
>> Brian Holt: Let's see, I can make this presentation again.
>> Speaker 3: I'm sorry, what's the challenge again?
>> Brian Holt: So this CodePen right here, I want you to open it and I want you to make it look like this. Which is this image, the one that I've embedded here.
>> Speaker 3: So all those boxes make it line up left to right.
[00:02:13]
>> Brian Holt: Yeah.
>> Speaker 3: Without touching what?
>> Brian Holt: Don't change the HTML, just change the CSS.
>> Speaker 3: Question is, is it a good practice to use text align on an image?
>> Brian Holt: Yes, absolutely.
>> Brian Holt: So yes, you can use, because images are considered an inline type element like the spans and stuff like that.
[00:02:41] You can use text line to center them, which is pretty cool. And that's awesome, nothing wrong with that.
>> Brian Holt: You also have to use height, height and width for sure.
>> Brian Holt: Did you do it? Good job.
>> Speaker 2: Little extra padding.
>> Brian Holt: That's cool. Padding never hurt anybody.
>> Speaker 2: My has the code on the top like HTML, CSS and JavaScript, and then all the display on the bottom.
[00:03:29]
>> Brian Holt: Yep, you can step.
>> Speaker 2: Is that like a setting let you customize?
>> Brian Holt: Uh-huh.
>> Speaker 2: So long as if you have an account there.
>> Brian Holt: Yeah, would you click here? [SOUND] Trying to remember if there's a setting for it. It's down here in the bottom right.
>> Brian Holt: So you can change it and flip it so it's on the other side.
[00:03:52]
>> Speaker 2: Great.
>> Brian Holt: Yes, right there.
>> Brian Holt: Any questions about something that is not clear about it? Or anything like that.
>> Brian Holt: All right. Give you like five more minutes, something like that.
>> Brian Holt: Another little tidbit that my wife taught me about this is, never, ever feel guilty about Googling anything, right?
[00:04:46] It's not cheating. Like for the first five years, and probably even longer of your career you will code by Google, right. Like it feels like taking pieces of code that other people have done and just kinda squishing them together.
>> Brian Holt: Totally cool, right. Don't memorize anything you can find in like five seconds.
[00:05:13]
>> Brian Holt: Yeah, my wife felt like it was a shame right, to Google something. So just like, cheating on a test or something like that, but no one's watching or anything like that, it's just get the job done.
>> Brian Holt: Which is why like stack overflow. If you're not familiar with that, it was like a huge help.
[00:05:36]
>> Brian Holt: Another hint is probably use percentage wips as supposed to pixel wips, right if you have four in a line. What's a hundred divided by four, right.