Site build: Homepage grid-based hero section — The Freelancer’s Journey (Part 18 of 43)

Articles

Site build: Homepage grid-based hero section — The Freelancer’s Journey (Part 18 of 43)

Site build: Homepage grid-based hero section — The Freelancer’s Journey (Part 18 of 43)


Time travel is one of those things that varies
from franchise to franchise. Everyone has different rules, Star Trek, Avengers,
Back to the Future. This is something to keep in mind as we build
out our site for Hayes Valley and it applies here because we’re going to put up a screen
shot and this screenshot is special. That’s because this screenshot is from the
future. Do we have a time machine? Yes, but that’s not what we’re using here. Instead Grimur, using the magic of video editing
that throughout this part of the course. We’re going to put up before and after screenshot
so you can see what we’re going to build in the future. With that in mind, let’s jump in and cover
five things. We’ll do the main structure of the hero
section, which is a grid. We’ll place an image of their design work
we’ll make a block for the other content like the heading, the buttons, we’ll tweak
our layout and build an overlapping grid and finally, we’ll make some adjustments to the
body all pages tag. So let us prepare the rest of the site so
we have to do less work as we move on. Okay, first part, what we want to do is drag
in a grid and the grid is going to serve as our primary structure. This is for the home hero section and from
here, we could add columns. We could remove columns we could do the same
with rose, but two by two is fine. That’s basically our structure. So let’s hit done and name it now when we
started making changes automatically created a class called grid, it’s double click to
edit and we’ll call this home hero section and we can take care of some dimensions. Now dimensions by default on things like this
are determined by the content inside the grid. So if replacing content right now that can
help us but for this let’s use a height. Let’s actually define the height as 100 VA,
of course meaning viewport height. So if our browser gets shorter the viewport
that grid is going to match the height of the viewport. That’s the basic grid. Let’s move on to the image. Now the image is going to be placed inside
the grid and there are a few ways to do this, but for flexibility we’ll use a div block. Just dragging the div block right into the
hero section and let’s give that a name so we can keep things organized. We’ll call it home hero image and let’s set
a background image on this element go in here choose image. And since we dragged in our assets before
we have to do is choose the one we want now it’s tiled. There are a ton of them. We can fix that real quick by switching to
cover that means the image will cover the div block and position it from the center. So if we resize it for instance, if we span
this content across two columns, the center point will always remain in the center same
if we span it across two rows. Let’s put it back to the top left for now. And that’s our image. Let’s move on to the content. Now for the content. We’re going to use another div block again. We’ll keep this organized. So when we drag it in we’ll add a class. We’ll call it ‘home hero content’ and
to figure out what we’re putting inside that div block. Let’s consult our notes and we can see there’s
a heading and each one. We have a subheading and then we have two
different buttons. So let’s place those inside our div lat to
make things a little easier to navigate and place. We’ll open up our navigator and let’s go
to add our heading. Now rather than drag this around our grid
let’s drag it in the navigator to home hero content. That way we can ensure it’s placed right inside
that div block let go and by default, it’s an H1. That’s what we want. Let’s double click to edit, can select it
and type ‘We make homes look beautiful ‘ to keep things organized again, let’s create
a class before we style anything. Let’s call it ‘major heading’ you can
call yours, whatever you’d like and once we do, let’s make some changes to styling change
our font to play fair. Display select the correct weight from the
drop down and we can affect the color as well. So from color, you can grab the eyedropper
tool and pick something that’s closer to one of the colors in the image here and let’s
warm it up a little bit using our selection here. We can always change that later. Let’s add it as a Swatch and by doing that
we can come back to the color at some point later. Let’s save and that looks okay for now. Let’s continue onto our paragraph go to the
add panel grab, a paragraph drop it into the home hero content right under the heading,
and that’s good for now. Let’s drop in both buttons drag in a button. You can do that right inside the div block
here and we’ll call this button ‘Let’s chat’. Go and add a class. We’ll call it button, and a few things we
can do here. We can actually get a color and make it the
same color as the heading. So we’re really starting to get consistent
with our colors here and we can make some adjustments to the heading itself. Some margin at the bottom, we’ll increase
the spacing outside of that margin. Now since we added a class already, since
we added a class of button, we can simply copy and paste that element and we have two
buttons and we can change the text on the second one see our work. Now, if we make changes on this class for
instance, if we add some margin some extra space outside of the element to the right
side, it will affect both elements at once and that’s because each of these two elements
has the button class applied, but that’s our primary content. We want inside of our home hero section. Let’s work on layout and we’re going to create
an overlapping grid. First things first, let’s take our home hero
content and place it on the bottom right, but if we try and drag it, if we just click
and drag and see since it’s automatically placed since its position is set to auto up
here that means it’s taking up the first available cell inside the grid so we have this home
hero image which is taking up the first cell. The second next available cell is this one
so how do we override that? We can just switch our position to manual,
now, we can place it anywhere. We want we want it on the bottom, right? And let’s do the same thing on the home hero
image. Let’s change its position to manual because
we’re going to do a change here by grabbing the corner and spinning it, not just across
two different columns, but across two different rows. Finally, let’s make a change to home hero
content in which we set a background color of something like white, in fact we can choose
from the default right here, Now for sizing. Let’s edit our grid. This is the parent element. So let’s select home hero section. Then we can hit enter to edit our grid or
just click this little edit grid button. Now when we edit a grid we can affect things
like the number of columns, The number of rows the sizing of the columns, the sizing
of the rows, and that’s really what we want to get it we want to control the sizing of
these rows. The height, height is set to auto right now. But if we click either of them we could use
something like fraction units. We set the bottom one to one FR and we set
the top one, Just clicking here on the label to 1 FR each of them are set up to 1fr are
setting the top to 1fr by setting the bottom to 1fr. We’ve basically set it to 50 50 flexible fraction
units, but what if we kept the top at 1fr but set the bottom back to auto. The top row is taking up all the available
space and the bottom row is automatically sized based on the content inside. So let’s make some adjustments to that content. First off, the heading or major heading by
default has a top margin of 20, we can click that and just zero it out and take a look
at the bottom margin. It has 10, we could make that something like
20, space it out a little more. Same thing on our paragraph. We can take that default value of 10 and make
it something like 20, maybe 40 or something in between. We can make it 30 and we can control spacing
inside of these elements to for instance if we grab our div lock or home hero content
div block. We can adjust padding. That’s the space inside of an element so we
can do this on the top and do this on the bottom or can just hold down shift and adjust
all four sides at once landing on whatever value we think looks right. Let’s do 30 and that’s almost it for our homepage
hero section. There is one consideration and that’s that
the font for both the paragraph and the buttons is Ariel. Now since we’re using classes on these we
could simply go in and change the font to whatever font we’d like to change it to but
there’s a trick here and that leaves us from layout to the body all pages tag. Now the body element is the top level element
of any page and because of that we can go in and affect the body all pages tag. What that means is if we make a change to
something like font on the body all pages tag, it’ll affect the default font for any
other element that’s in the page or any page. So let’s go down and change Ariel to Source
Sans Pro and we can change the font size default to something like 16 or 15 and the height
by default. It’s in pixels, but we can use unit lists. So 1.4. Just put a hyphen, then hit enter. That’s unitless, unitless is great because
it scales with the font size. So if we change 15 to 16, 17, 18, 19 20, you
can see height, the height scales accordingly. So let’s leave that at 15 and automatically
the paragraph, the button, because we didn’t set any overrides to the text on these elements
their inheriting that font from the body all pages tag, but that’s it. We added our grid our image the content block. We did our grid overlap and we set some defaults
on our body all pages tag before blank page after hero section. Now up next we’ll build out some more really
impactful parts of our home page, then we’ll take everything we did and make sure it’s
responsive on all different kinds of devices.

Leave a Reply

Your email address will not be published. Required fields are marked *