Transcription
[McGuire] In this lesson, we're going to build our very first layout in Webflow. It'll go from looking like this to looking like this. Now, that's not the only time we'll use the magic of post-production. Jamie and Lauren are on hand to ensure that editing can solve for times where certain people might go on and on in one incredibly... We’ll first load all our assets. We’ll add our content. We'll use flexbox. We'll style a button using custom CSS. And finally, we'll add a product shot of the app itself, a calendar that compensates for changes in space and time, especially as these relate to gravity.
[Sara] Gravity.
[McGuire] Speaking of gravity. Sara, welcome.
[Sara] Hi.
[McGuire] Hello.
[Sara] Hello.
[McGuire] How are you today?
[Sara] Very good, very good. I am excited about this Gravity app. Uh, how does that work, really?
[McGuire] No idea.
[Sara] Let's get into it.
[McGuire] Let's get into Webflow. So let's drag in this folder into view and we'll just highlight these items and drag them right in.
[Sara] Nice!
[McGuire] Thank you. That was, it's pretty low effort, but thank you, nonetheless. That's assets. Let's move into content. So for the content of our site, there's a lot of stuff we'll be adding on this page over time. And the primary way we're gonna organize all of it is Sections. Sections in a web page are like chapters in a book, and sections generally stack vertically. So we're gonna add a section as the first thing we add to the page. We'll just drag in section right here, and you'll see this pattern a lot. We have the add panel, and this is where you grab all of your nodes, all your elements, your HTML. So if the section is the first part, we got three things to put in that section. So let's grab our heading, drag that in.
[Sara] Paragraph.
[McGuire] Paragraph. You got it. We'll drag in that paragraph.
[Sara] And then a button.
[McGuire] And then a button. It's good teamwork.
[Sara] Yeah.
[McGuire] That's content. Let's move into flexbox. Now, flexbox is the first major superpower we're about to unlock. We're gonna use a container, and the first thing to notice before we add the container is that everything here, especially the paragraph, notice how the paragraph goes all the way from the left side of the page to the right side of the page. It's spanning the full width. This is normal. This is what happens by default. A container will help us constrict that width. So if we go to the add panel, let's grab a container and drag it right inside. We're actually putting that inside the section. So our hierarchy now is inside our page body we have a section, and now inside that section, we have a container. Let's put these three things inside that container and notice what happens. As we drag in the heading...
[Sara] It contains the stuff.
[McGuire] Yes, it contains the stuff. That's absolutely it. So, now everything is a reasonable distance and everything is constricted. That's adding a container. Let's turn on flexbox. And to demonstrate this, with our container selected, let's set a height. Just for right now, okay, maybe 650 pixels, press return and notice how nothing really happened to the heading. In fact, the size of the box, we can see with the container selected, the size of that box did get 650 pixels tall. But in order to move things around and really align and justify stuff inside the container, we're going to turn on flexbox. So with the container selected, let's go over and set flex - we're just setting our display to flex.
[Sara] Ooh, woohoo.
[McGuire] That's the right reaction.
[McGuire] It got hideous, and there's a reason for that. By default, when we turn on flex, the direction is horizontal. That's okay. It's not what we want here. Instead, we wanna switch it to vertical. And then once we do that, we've unlocked the ability to align and justify however we want. Now, why is that a superpower? Well, instead of manually positioning everything, we've selected the parent element, this container is of course the parent element to its children. You can see the heading, paragraph, and button are inside the container. So all we've had to do is tell the container to align and justify the child elements. Of course, if we add something else, if we add another button inside, it'll stack vertically as well, because we've told it to stack. We've told the container to stack vertically and to align those children. These two buttons look ridiculous. Let's delete one. Now, it might not be the most impressive thing, but we just built our first layout in Webflow and we used the very same principles that are used by developers at Apple and Google and Stripe. We did that in Webflow, and if you really wanna follow along and you wanna see what that code looks like that we output, we can just go to the help icon here and open CSS preview. And you can see we have our CSS. We've just set the display to flex. The height is 650. We've set the flex direction, justified, and aligned. We can look at this and see that our code that's being output is exactly what we declared visually. So that's flexbox. Let's move on to the button. And we have the button here. In fact, at any time, of course, we can change this content. We can double click and change “A calendar for space travel."
[Sara] “Space travel.”
[McGuire] And we can go into the paragraph, double click, and we're going to paste this in from our clipboard. For the button, we want it to say “Join the wait list..."
[Sara] “...for early access.”
[McGuire] “...Early access.”
[Sara] Exactly.
[McGuire] “...exactly.”
[McGuire] All right, that's our button. Now what we're gonna do in the button is create some style changes to make it look a little more modern, a little more exciting, a little more engaging. And the first one we'll do is set the width to 50 pixels. When we do the button is now 50 pixels.
[Sara] Um, let's remove that.
[McGuire] Let's remove that. So with the button selected, we can style it however we want. Few things to change here. If our HTML, of course, is everything we see in the add panel, then as we saw when we affected the container earlier, everything to the right here in the style panel, that's our CSS. The properties we can add to any of our HTML elements. So with this button selected, if we wanna just change the background color, we can just scroll down in our style panel and change the background color. Let's change this to sort of a uh,
[Sara] Like a dark purple.
[McGuire] A dark purple.
[Sara] Perfect.
[McGuire] And if we wanna reuse this color throughout the project, we might want to save this as a brand color. We can just go and add a swatch. We can call it Brand color or whatever you want. And we'll press create. When we do, we've now saved this swatch, and that's really, really helpful if we're gonna use, reuse this color to keep things consistent. So that's changing the background color. Let's change some other stuff. Maybe round the radius to...
[Sara] Three pixels.
[McGuire] Three pixels?
[Sara] Yeah.
[McGuire] Let's do three pixels. Why not four?
[Sara] Three is perfect.
[McGuire] Okay, three is perfect. And we can add, you know, a lot of styling. One thing to note that we didn't do yet, and that's okay, is we actually haven't set our font. We haven't set our typography yet. Now with CSS, there's lots of options here. Now we can change these things one by one. We can go up to typography and change this button to Georgia or Great Vibes. We can do everything one by one - that's one way to do it. But a more efficient way to do typography is this. We can select something like the body. We'll go all the way up and select the page body. And if we make a change here, notice how that change is inherited by the child elements. Because each of these things, of course, is a child of the body – all of the typography changes we make here are going to apply to them. For us. Let's add a third party font. We'll go down to our list from Google Fonts, and we'll do DM Sans and we'll load Regular, Italic, 500...
[Sara] 500.
[McGuire] 500 italic.
[Sara] 700.
[McGuire] 700, 700 italic. We'll press add font, and that's it. We can go up and close this tab. And once we're back in the designer, let's refresh. While this is loading, it's an excellent time to...
[Sara] It’s done! It’s done.
[McGuire] Okay, let's go back into Webflow. With the body selected, we can now go down to typography and see that we can see DM Sans, and of course that it's applying, that font change is applying, to all of the children elements. So we can click that. Does that mean it overrides or blasts away more specific changes? No, we could always select this heading and change it to something else. We can always override these things. We're not gonna do that for right now. Instead, we just made the change on the parent and it's affected all of its children. So let's look at the button and see what else we can change. First, let's go from that default, that default weight, that 400 or here's 500. Let's go to bold and what else do you wanna change on this? Maybe the padding, the space inside.
[Sara] Yeah.
[McGuire] Now with padding, you can just click and drag these spacing controls, and you can see it adds padding on the left. And notice how holding Option or Alt will affect both sides at once. So we'll do 30 on the left and right, and we can just do the same thing. Hold down Option or Alt and do 15 on the top and bottom. Now, there's something really important to note here. When we started styling this button, you'll notice up top here it says button. That's not an accident. In fact, it's a class. When we styled the button, a new class was created. By default, it was automatically named Button but if we want something more clever, we could rename it. Let's maybe call this class Major button. But when we styled the button, a class was automatically created. And that class stores all of this styling information: the padding, the font weight, everything we styled. But here's why all of this is so important. If we were to copy and paste this button, notice two things. One, there's two buttons, but two, the second button brought that class along. So now we have two buttons that have the Major button class applied. So even if we change the content, let's make it say “Hello, Sara!”
[Sara] Hello!
[McGuire] No, it's just the button title.
[Sara] Okay.
[McGuire] With either of these selected, if we make a change on one of them, like if we change the padding, notice how it's affecting both of them. Again, classes and all selectors in CSS, they apply to every single thing, every element that's being selected. In this case, what's happening, as you see this selector up here, it's selecting anything that has the class of Major button, and it's applying the styling to it, so it keeps things neat and consistent, even if the content is different. But we don't need that button right now because she's right here. We can press delete and with the first Major button selected, let's finish our styling. Let's scroll down. What do we wanna change here? Maybe add a box shadow.
[Sara] Yes.
[McGuire] And we can make it more of a modern shadow... huge distance. Let's hold down Option and click and drag here. So we can move this down. Maybe decrease the size a little bit and increase the blur dramatically. Again, just holding down Option so we can click and drag. We can always do this, but in the field, we have a lot of control over where we're going, so maybe a big lift like that.
[Sara] Ooh! I like that.
[McGuire] And color, same brand color?
[Sara] Yeah.
[McGuire] Let's move that distance back from 39 to what? 15. Is that okay?
[Sara] 20.
[McGuire] 20. All right! So we did more than we said we’d do. Yes, this section is titled button, but we actually styled the button and we added typographic changes. We added that font and applied it to the body, so it affected everything else. That's four parts down. Let's talk about the app image. Starting with, let's drag in the actual app image. So we'll go to our assets panel. This is where all the assets were loaded when we dragged them in. And let's grab the actual app, Calendar app, and we'll drag it under the button. We're dragging it in the container, and when we do, it looks okay. We can make some changes to this image. We could maybe add some rounding. Maybe we could do...
[Sara] Three pixels.
[McGuire] Three pixels.
[Sara] Yep.
[McGuire] And we could add a box shadow on this too. We could say box shadow, set that brand color again,
[Sara] Perfect!
[McGuire] Increase the blur dramatically. Maybe decrease the size since it's pretty dramatic. What do you think about that?
[Sara] Yeah, more blur.
[McGuire] More blur. Okay. How much?
[Sara] That's perfect.
[McGuire] One, 117?
[Sara] Yeah.
[McGuire] All right.
[Sara] It's a little bit tight between the button and uh, the image.
[McGuire] Absolutely. We can add some margin. So if padding is the space inside of something, we've covered that. Margin is the space outside - between that element and other elements. So we could, we could just drag on margin on the top, then we can add some margin. How much looks right? Tell me when.
[Sara] (Laughing)
[McGuire] Still haven't said anything. This is like when you're at Olive Garden and they're adding parmesan cheese.
[Sara] A little bit less.
[McGuire] A little bit less?
[Sara] The content is disappearing.
[McGuire] Just say when.
[Sara] Like 80.
[McGuire] Let's do 80. The great thing about this is we're just adjusting visually. We can take a look and if it doesn't look great, we can just adjust it again. Nothing here is destructive, we can just make that change. Something else to notice. The container, we gave it that fixed height before, again, it was 650 pixels. So with the container selected, we could actually remove properties. Yes, over here we can add a bunch of style properties, but to remove it or to reset that property, let's click the blue label. Click the blue label and reset. Now, what happened? What's determining the size of the container? Well, it's now being determined by the content inside. Because we haven't overridden, we haven't specified a height, we could add more content. And when we do, notice how the container just gets taller. When we remove that content, it gets shorter. The box is sized by the content inside. That's the default. So what happens next? Well, we could take a look at the spacing, for instance, of the paragraph right here. Things are a little tight. Let's go ahead and fix that. With our paragraph selected, let’s create a class. Go up here to the selector field and click in and we'll type Hero paragraph. Press return and we've now created that class. Let's push off the bottom by adding some margin on the bottom. We'll pick a number we think Sara would like. 46, no 47. But it's also a good opportunity with the section selected to add some padding there. So what will this do? Let's add padding on the top and bottom, holding down Option or Alt. We're just giving it some breathing room inside our section. We'll do 50 on the, maybe 60 on the top and bottom. Now, at no point are we setting an explicit height. Again, the height is being controlled by the content inside. How does that look?
[Sara] Yeah, yeah, it looks great.
[McGuire] Let's center that paragraph. Let's select the hero paragraph and we'll set the alignment to center. Let's make the heading a little bit bigger. With the heading selected. Let's create a class called Big Heading. And of course, we can go down and increase the size and the line height on this heading. You know, we could even this out.
[Sara] Yeah.
[McGuire] We'll do a design review later so we can make this a little better later, but maybe reduce that margin a bit on the paragraph.
[Sara] Awesome.
[McGuire] All right! And that is it. We added all our assets to our site. We put all our content together. We used flexbox, our first superpower to control all the elements inside a container. We styled a button that has a design that rivals the likes of Apple.com, and we added an image of an entirely real, but not at all real, app that helps all of us navigate the intricacies of space and time.
[Sara] And time.
[McGuire] That's right. Speaking of which, let's move into the next lesson on Navigation.
[Grimur] I’m going to do something bold. Basses. We want to see your hero section design. Whether you’re just getting started — changing a word or two — or you're building a whole new site. Cellos. We’ll take some of our favorites and literally change our hero section on Webflow University. Piano. And we’ll add a link (this is for real) — we’ll link to your LinkedIn for a day. So, share your hero on Twitter using #webflow101.