Freelancer — 500 | Site build | Process page

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.