We’re going to build the homepage here, and we’ll do it in several different parts. We’re doing this so there’s a clear objective, a clear deliverable for each lesson. And we’re setting this up using the same HTML and CSS properties we’d use if we were coding the UI and the UX work by hand. But by the end of this part, here’s what we’ll have: we’ll have the structure for the hero section, we’ll have the text elements, we’ll have the Body tag that’s also defaults for our entire project, and we’ll have the hero image area. Later, we’ll build this into a fully interactive animation. And, along the way, we’ll check in with Sara to make sure we’re closely adhering to her work in Figma.
[Sara] I’m watching you.
[McGuire] What’s up?
[Sara] (laughs) That's so bad, I can't look at you. You're like —
[McGuire] What’s your confidence level?
[Sara] There’s nothing to suggest I’m not confident and you’re going to follow that design.
You’re not convinced?
[Sara] Tell me why you feel otherwise.
[McGuire] Well, you have Grimur on speaker, you’re holding the red pen, there’s a note in the Figma project that says ‘follow this design,’ and for the last eight minutes you’ve been air playing your phone to the studio monitors, where you texted your mother in Sweden saying ‘I’m not confident he is going to follow the design.’
[Sara] Well, are you going to?
[McGuire] Follow the design?
And we’ll start with the structure. In fact, before we add any elements to the page let’s go ahead and drag in our assets. Now, we’ve included these down below, so feel free to download and follow along, but once we do that, we’re ready to move on to the structure of the page. And it’s pretty straightforward. We’ll go to the add panel, and from here, we’re going to drag in two things for our primary structure. We’ll drag in a section element, so this is a hundred percent width, and we’ll drag in a container. A container of course, keeps everything neatly bound inside that section. So we’ll be dragging a lot of the stuff that we add to this container. And that’s it for the primary structure. We have a section, and inside the section we have a container.
Let’s move on to our text elements, and we have two that we’re going to add here. We’ll add a text block, so this is a basic text block, we can drag it right into the container. And we want it, we’ll double-click to edit the text, and we want it to say, ‘welcome.’ And the second thing we want to add is a heading. Let’s drag in a heading right underneath. We’re in the container still, we want to put it right underneath the text block, and that’s our heading. We want it to say, ‘I create meaningful digital experiences that work,’ or, ‘I live and breathe user experience design,’ or, ‘I elevate user experiences using telekinesis,’ which is better.
Now, let’s control the spacing around our section, so that we can place our text elements exactly where we want to place them. If we select the section, by default, there is no padding, padding being the space inside an element’s boundary. Of course there’s also no margin, which is the space outside an element’s boundary. We want to add a little bit of padding on the top, and maybe a little bit of padding on the bottom, holding down Option on Mac OS or Alt to adjust padding on both sides at once. Let’s say, sixty pixels on the top and bottom, that looks pretty good for now. And now that we've added our text elements, we'll move onto the Body (all pages) tag. Now, here’s what’s so powerful about the Body (all pages) tag: first, let’s select it. Let’s select the body element, we can just select the body element at any time, go up to the selector field, and click into Body (all pages). And when we’re here, we can set defaults that end up being inherited throughout the project.
So we can change the default font, we can add new fonts, and we want to add two different fonts. The first one is Inter, so let’s go down here. Type Inter, and there it is. We’ll include regular and six hundred, press add font. And the second font we want is DM Serif Display. So let’s go in, same thing here, DM Serif Display. And we’ll choose just regular for our headings, let’s go in and add font. And once we’re done there, let’s go back to the Designer. Because this is where we’re going to build out the page. Now, again, body page selected, Body (all pages), let’s change our default font to Inter. And let’s change a couple other things while we’re here. Let’s change the background color, let’s do a sort of dark grey color. And of course we can’t see the actual text, which is a problem for legibility, so let’s increase that default color. Let’s go to white for now, we can always change this later. Because now that we have, we can go back and make some changes, now that these things are being inherited, to our heading. Let’s select our heading, let’s change its font to DM Serif Display, let’s select a weight of four hundred, the default there, and we can even set a maximum width on this. Let’s say we don’t want it to go above three hundred pixels, maybe a little higher. You can hold down Shift and the up and down arrows to jump by ten, let’s go to, four hundred fifty looks pretty good. Then let’s change our text block on the top, let’s change that instead of Inter four hundred, let’s choose six hundred. Let’s do all caps, we’ll do capitalize all caps, and we can add some letter spacing, maybe. That looks pretty good. Decrease the font size, maybe to 12. There we go. We can actually select, with that text block selected, we can go down and decrease its opacity a little bit. Seventy looks pretty good.
And once we’ve done that we can move on to adding the hero image. Now, there’s something really important about the hero image. Well actually where we place it. Let's go to our assets panel, drag in that hero image from before, and let's drag it right into the container. And, by default, it looks okay. It’s being contained by the container. This is the parent element. Remember our structure over here in the navigator, we can see this inside our page body, we have a section, we added some padding to the top and bottom of that section, again we landed at about sixty. So, we have inside that, the container. The container is keeping everything neatly bound, neatly organized towards the center. We can affect its maximum width. We can say, maybe a twelve hundred pixel width is a little better. That looks pretty good, but what if we want this image to be full width? So with the image selected, we can click and drag, and instead of putting it in the container, we can put it in the section itself. Let go, now it’s taking up full width. In fact, if we grab the edge, if we grab the edge of the canvas here and resize, we can see it’s taking up more than the container width. It’s going all the way to the edges. In fact, if we were on a larger display, which we’ll cover a little bit later, it would go all the way to the edges, even on an obnoxiously-sized browser. And we’ll go over some more details about that later, but for right now we can see that it’s taking up full width. One thing we’re noticing right here is the heading itself is a little bit close to that image. We could just select the heading, add some margin on the bottom, maybe sixty pixels here, to space everything out evenly. But that’s it for now. We have the basic structure of our section set up. We added the text elements, we configured the Body (all pages) tag, and we added the hero image area. This is the bulk of everything we have above the fold. But, before we move on to the portfolio of work, the client projects, let’s build out our site navigation. Which we’ll do in three, two...
One thing to remember: this is day one of a 21-day course. (Actually, two things to remember.) First, we almost always launch lessons EARLY on Webflow University. So if you want to get ahead, make sure you’re enrolled in the portfolio course there.
As for the second thing, as you build your hero section, whether you’re following this lesson or creating or updating your OWN hero section, we want to see your work. And we want to SHARE some of our favorite work throughout this year. So Tweeter, Instagram (or as I call it, Instagrimur), use #21DayPortfolio. Throughout 2021, we’ll be sharing some of our favorite work. As for me? I have a standing desk.