Check out a free preview of the full Calculator Project: HTML & CSS course
The "Spanning Multiple Columns" Lesson is part of the full, Calculator Project: HTML & CSS course featured in this preview video. Here's what you'd learn in this lesson:
Jen codes the buttons that span more than one column, demonstrating how to add multiple classes to an element.
Transcript from the "Spanning Multiple Columns" Lesson
[00:00:00]
>> Jen Kramer: All right. With that in mind, how we just did that, that's how we coded that exception to the rule. I want you to take a minute, and I want you to think about the last row. So, what's the difference between the last row and the one above it?
[00:00:15]
Yeah?
>> Speaker 2: It's triple the size of those.
>> Jen Kramer: We have one button that's triple the size. Correct? Go on ahead and try coding that row, now. Fabulous. So, hopefully you came up with a solution kinda similar to mine. So, I have, in my row, I have a button here.
[00:00:32]
It's just 0, and I added a class called triple. Since I added one called double, before, we'll call this one triple. Okay? And then, my other button says =. Right? So, now, if we take a look at this in the web browser, that's how it's looking now. Hey, it's kind of vaguely, sort of, calculatory.
[00:00:54]
Isn't it?
>> Jen Kramer: Okay. This is what I mean by you have to actually get these things on the page, before you can start saying, I know, now, what I need to do to make it pretty. Right? So, I’m looking at it like, okay, I can sort of see the calculator now.
[00:01:11]
It's sort of coming together. Clearly, there’s more work to do. Yes, Dave?
>> Dave: Is there any disadvantage to have just used the equals button on my keyboard or, instead of the-
>> Jen Kramer: Not necessarily. You might be able to do that. This is a better methodology, is actually coding the names in.
[00:01:31]
Yeah. Sometimes there can be processing errors or whatever. Yeah. So this is just, generally, the better way of doing things. So, now, let's go through, and let's start putting in some CSS.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops