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? [McGuire] No. [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? [Sara] Yes. [McGuire] Yes. 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... Oooone 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.
