In this video, we looked at the basics of our rectangle tool to create the kind of structured boxes for our website. What we're gonna do now is do a bit of a session where I go through and add all the boxes. You can watch this at double speed or skip it if you want to. What I'm gonna do is I got my first box here. What I'm gonna do is just duplicate this box over and over again for the different areas. So I'm gonna use my trick to select it here, a graphic.
I'm gonna hold down alt and drag it down. I'm gonna hold a shift at the same time and it kind of snaps it all the way underneath. Okay? And with this graphic here, I'm gonna call this one. Um, I'm gonna open up this tool here. My properties panel.
I'm gonna pick this one. This is this kind of pinky color, peachy color. And this one, instead of, that's gonna be called the box who we are, add box at the front, just to make it clear from a distance, uh, what I'm looking at, the kind of structured boxes. Do the same thing with this one. I'm gonna drag him underneath and he is using properties panel. Here's the dark purple.
Okay? And here's box. Here's the services box. And hold him down, drag him down, and he is going to be the box for our portfolio. We've kind of run outta the edge of our pages. Let's change the color with him first.
Actually, he's that color. Now we've run outta the edge. What we can do remember is grab our art board tool, make sure we select on the desktop version, and I'm gonna drag it down. Now how far to drag it down, I've zoomed out a little bit. Who knows? At the beginning, okay.
It's not until you get all your content on there, you know how big it's gonna be. So I'm gonna oversize it, okay? For the moment, make it nice and big. And then I'm gonna go back into my move tool. I'm gonna click on him. Okay, so a box portfolio, and I'm gonna hold down the alt key drag underneath.
And actually this chunk in here is going to be a big white area. It's gonna have my um, people or team area. This last bit here is gonna be the green, and this one here is gonna be called my contact form. And then just underneath it, drag it down. I'm gonna have this last one is one of the non-official colors. Okay?
Just one of the, like a dark gray for my footer. Now it's a little big. So what I'm gonna use is my transform tool. So Command T, remember Command T, and I'll make it a little smaller. That's gonna be my footer. Now I kind of have a rough idea of the page height.
I'm gonna suck it back up using the outboard tool. Click on this top one here, and it should snap to the bottom there. Back to the move tool when you're finished. Okay, now that I've got the desktop done, I could move everything across to my mobile version and start laying that one up. What I find it's a lot easier to work on one, and then once you've completed one and finished and worked all the bugs outta one of the views is to then start on, say the next one, and then work onto mobile. Now, a lot of people start with mobile first.
Okay? If that's the priority for their website, it's definitely the way to go. There's definitely a lot more challenges getting everything ready for mobile for me, primarily my site's being used as desktop. So I start with desktop.