Site build: Process page — The Freelancer’s Journey (Part 27 of 43)


Okay process. Back in our content strategy work. We talked about our user story. And since that time we talked about our user
story incessantly, but that’s a good thing. We’re validating our decisions around this
build and the content itself based on that user story. But one of the secondary things we discussed
earlier in the course was that people might have questions about what’s involved. What’s the process like? How does the team in Hayes Valley work? Will I have the guidance or the input I need
to feel confident in picking this interior design firm. These are all fair questions and the process
page will cover the following: hero section consultation and on-site review. These are the steps Rebecca gave us, letter
of agreement design development and construction adhesive design development construction instagrammer. Can we just dub it over with the correct title? Thank you, sir. Let’s start with the hero section and to do
that. We want to First make a page. So from pages we’re going to press create
new page. We’ll call this one ‘process’ or even
‘our process’ going to hit enter to create the page and that’s it. That’s our blank page and for our hero section,
you can drag in a section and we actually already have a starting point here. It’s called hero section and that’s it. That’s our hero section and we created a combo
class for this for portfolio had all the information we needed in there and we can actually go
in and duplicate that class and what that’s going to do is it’s going to create a copy
and we can call that whatever we want. Maybe here we can call it ‘process’ hit
enter. And now any changes we make they’ll be based
on hero section. Just like our normal combo class would be
based on hero section, the other one we created but this process one will only affect process. So let’s go down and choose a different hero
image, choose image, and something like this would look pretty good. We can change the color. If we’d like, we can experiment with different
colors throughout this process, but for right now, let’s go to linear gradient. Double click here and change too. That doesn’t look very good at all. That’s okay for now. We can come back to this gradient later, but
we have something to start with and then after we do that we might want to put in our other
content. We have a heading, we’ll drag that in. Let’s look at our content strategy notes
for process with a hero section the H1 says ‘Learn about our process’, and we can
apply a class to that. We can apply a class which is think it’s major
heading. That works. Secondary, let’s check to make sure that the
same one we applied to portfolio. Major heading secondary. Okay, that’s correct. So, let’s go back to our process, learn about
our process, now we need our paragraph by paragraph underneath this. That’s okay. But we had something going on different over
in portfolio. We reference that we can see we put hero power
graph and that set a maximum width of 400 pixels. So let’s go back to our process and set a
maximum width of 400 pixels by applying hero paragraph. We’re using as few classes as possible. That way we don’t have to make a change on
every single instance of text throughout our site. We want to use classes to minimize the heavy
lifting we have to go through in this process. We’ll move the mouse off screen so we can
copy some of our content to the clipboard. And we’ll paste that right in here. That looks pretty good. Now before we move on we could add our nav
bar and our footer. So let’s do that right now. We’ll go to add symbols. Let’s grab the nav bar put that right inside
the body element and then we’ll go back to symbols and we’ll drag our footer. We’ll do that at the bottom of the page. We can drag it onto the canvas or we can use
the navigator for that. Let’s use the canvas and that works exactly
as we’d expect. We’re done with the hero section. Let’s move on to our next step. This is the consultation and on-site review
section. We’re going to do something very similar. We’ll drag in a section but we’re going
to make a new class for this type. So we’ll call this step section since each
section is going to have a different step of the process and we can make a fixed height
here, maybe 300 pixels. Actually, let’s remove the height so that
we can put content inside before we do any more styling. Let’s put some content inside the section. We’ll put a heading, this will say, ‘consultation
and on-site review’ and let’s add the class of major heading, actually secondary heading,
that looks pretty good there and with our section select it. We’ll click step section right here. Let’s do our 60 pixels on all side. That looks pretty good. The next thing we want to do is add which
step this is so we have four steps on the page, we’ll create a step text block will
put that right above the heading. So let’s grab a text block put it above and
we’ll type step one in this, of course will end up copying and pasting the section so
we can be a little more specific with each but step one is done. We could style this a little bit. Let’s call this class step. And there are a number of things we could
do here. We could choose Playfair display. Maybe all caps that doesn’t look very good. Let’s remove that capitalization. This could be fine for now. One thing to note is secondary heading has
10 pixels of margin on the top. We could add combo class for this, we can
call it less space, could be a little more specific in the future but less space works
fine for now, maybe five pixels of margin at the top. Let’s actually try 0, it’s a little bit
closer and to add a little more space we could use a div block. Let’s put a div block underneath consultation
and on-site review and we’re going to do something unique here. Let’s make the height 1 pixel and let’s make
the width 50 pixels so he can create almost a divider here. We’ll choose a black color, but we’ll drop
the opacity on it pretty tremendously. You can see right around 15 maybe 20 %. We
just have a very simple divider there and we can add some margin on the top and bottom
holding on option or alt on PC. This is going to push the content away from
it. So maybe 20 pixels or even 30 pixels on the
top and bottom. Hitting escape that looks pretty good. Before we forget let’s grab that div block
here and name it. We’ll call it horizontal divider. And then let’s add a paragraph. This is text we’ll want to ask Rebecca for
but for now, this is a good starting point. Now we could limit the width on this text. In fact, we could set limits to the heading
we could set limits to this step but instead let’s use a div block to keep everything contained
inside the section. So we’ll grab a div block, drag it above step
one, and we’ll just put the content inside. We’ll use the navigator to make this a little
bit easier and we’ll just throw everything in here. This is really lazy. Now, we could set limits. It could set a limit on the width of all of
these elements we could select the paragraph instead of maximum width there. We could do the same for the secondary heading,
the step. We could do that over and over again, but
one way to control a lot of elements like this at once is to wrap them with a div block. So that’s a pretty straightforward way to
control width on multiple elements. Let’s drag a div block in and we can just
grab step and all we’re doing is dragging each of these elements inside div block. And a quick little shortcut here if you click
and drag just to the right it will place it underneath this parent item. So we’re just grabbing paragraph move it to
the right. That’s it. And now the div block has four children step,
secondary heading, horizontal divider, paragraph, and we can select that div block and we can
call it ‘step section container’. Although there are probably more specific,
better names for this and we can set the maximum width to something like 50%. Actually we could just specify that the width
is 50% or even 40% that looks pretty good. So if we want to continue this trend we could
copy and paste. That’s step one. This will be step two, copy and paste again. That’s step three, paste again. That’s step 4. So let’s go in and start replacing our text. This will be step 2. This will be step 3. This will be step 4. Now remember there’s a lot of consistency
and what we created here. But each of these is using the same class
because we copied and pasted the section and because each of these sections contained the
same elements with the same classes applied if we change any one of these like secondary
heading we affect the padding on any one of them we can see all of the others are affected
and that doesn’t just occur on a page basis just inside one page. It occurs throughout the project. So if we were using the secondary heading
with less space applied, we’re using any class or any combo class on multiple pages and we
changed one of them it would affect every other instance of element with that class
applied. So one thing to note here is these are H1s
we might want to make them H2, and that’s a specification that is unique to each element. So if we’d done this before copying and pasting
they would have all been H2s, but we can do that right now as well. Okay, each of them is an H2. Let’s take every other section and align the
content to the right now. There are a few ways to do this we can use
flex box, but because each of these is set to 40% we have some issues if we use flex
box, let’s demonstrate one way to do it using flex box we could create align right, and
we could use that that combo class on every other section and we could just go to flex
and move everything justify it to the end. So we do the same thing here on step section,
align right, we kind of get that rhythm but here’s the problem the left side and the right
side. They’re not even because each of these is
40%, we set a width of 40%, and that normally would work okay, by the way this works if
you set this to 50% then they’re quite even you have that line that consistency but at
40% there’s something else to solve for and that’s the fact that this is not directly
in the middle. It’s a small detail but it’s one that might
count. So instead of doing this, let’s go back to
that step section. Let’s remove align right, let’s remove align
right from this one as well. And instead let’s use grid, now each of these
four has steps section applied. So with any of them selected, since they’re
all using the same class, let’s switch it to grid and by default with grids we get a
2 by 2, but only want two columns and one row so let’s delete one of those rows hit
done. And now we have our grids here. But notice how the step section container
is now a small part of this cell. That’s because we set the width to 40% because
this step section containers taking up 40% of its parent. That means it’s now only taking up 40% of
this specific cell so we could raise this to 80 and that looks a lot closer to what
we had before. Now with every other one we could just grab
the step section container and move it over. Remember things are automatically placed in
the first available cell so we can override this functionality. If we just try to drag step section container. It won’t go anywhere we can override with
step section container selected we can go over and set the position to manual and now
we can just drag it into the second cell same thing over here this time. Let’s hold down shift because that will manually
place an item we can just drag it into the second cell. Now we have that alternating background. Now, we’re in consultation and on-site review. So let’s get this one perfected and move onto
each of the subsequent sections. So consultation and on-site review with this
one selected. Let’s choose a combo class that is ‘consultation’
and we’ll set a background for this. The background can be anything we want but
we have one that looks almost like a blueprint. So let’s use that can’t really see it. So let’s set it to cover, center, that looks
a lot better. Now one thing to note the secondary heading
the contrast is a little bit lower so we could go in and change dim gray to black again. This is only being used, the less space combo
class, is only being used on this page. So we’re only affecting this page. Let’s call that the end of consultation on-site
review and move to step two. Step two is ‘letter of agreement.’ And we can do the same thing here. We can add a combo class. We can call it ‘letter’. And add a background image this time. We’ll choose the image and something a little
more like a letter. We have one right here. Here it is up in the top left and we’ll set
the same thing cover and center. Looks pretty good. That’s letter of agreement. Let’s move on to design development. Type in ‘design development’ and we’ll
do the same thing. We’re getting pretty good at this, combo class
design development. And let’s set a background image will choose
our image. We have this one right here. Let’s do the same thing cover and center almost
done. That’s design development. Let’s move on to construction adhesive, which
is actually ‘construction installation’. And design completion. Okay. And for this one we’ll do the same thing
we did for the others and do construction. Let’s add a background image, choose image,
and we have one for construction. That looks like this. Set it to cover, set it to center, and that’s
pretty good. Now. How is the height of each of these sections
being defined? In other words, did we set a pixel value? Because if we go up here the width, the height,
all of these are blank. They’re either automatic or none. So if we go into this and we add more content,
let’s just copy and paste a paragraph a few times, this section resizes that’s because
the section is sized as is any div block or section by default by the content inside. So the content inside is defining this dimension. So if we scroll through. By the way, let’s delete these extra paragraphs
if we scroll through we can see they’re basically using the same lorem ipsum text right now,
but for instance step four is a little bit longer because completion is on a second line. In other words. There can be slight changes to the way this
text reflows and the section is going to resize itself based on the content inside. That’s a lot. We covered in a short time. We built out our hero section the consultation
section agreement designed element, and the one with the long title of next will make
this page responsive.

One Comment

Add a Comment

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