Summary

Thinking you could never build a site from scratch? Follow along and let us prove you wrong — we've got you! In this site build section of the Freelancer's Journey, we'll build a full CMS-driven website in Webflow. Starting with a blank canvas, learn how to design a responsive layout, build a dynamic content management system (CMS), and successfully launch the site.

Lessons in this course

Getting started

Coming soon

Introduction
4:55
Coming soon

Site build

Learn how to design and develop a full CMS-driven website for a client.

Coming soon

Homepage: grid-based hero section
9:48
Coming soon

Homepage: navigation
4:40
Coming soon

Homepage: testimonials
19:05
Coming soon

Homepage: footer
9:31
Coming soon

Homepage: responsiveness
22:57
Coming soon

Portfolio page
16:23
Coming soon

Portfolio page: responsiveness
6:48
Coming soon

Portfolio page: client detail page
17:39
Coming soon

Portfolio page: client detail page responsiveness
8:12
Coming soon

Process page
15:11
Coming soon

Process page: responsiveness
7:22
Coming soon

Team page
14:06
Coming soon

Team page: responsiveness
10:53
Coming soon

Team page: team member detail page
17:40
Coming soon

Team page: team member detail page responsiveness
9:09
Coming soon

Contact page
11:45
Coming soon

Contact page: responsiveness
4:14
Coming soon

Contact page: reCAPTCHA setup
2:41
Coming soon

Homepage revisited: secondary sections
17:38
Coming soon

Site launch

Learn how to prepare a client site and the CMS Editor so that your client is confident with the finished product.

Coming soon

Pre-flight site review
16:53
Coming soon

Connecting a custom domain
4:12
Coming soon

Publishing the website
0:19
Coming soon

Preparing the CMS Editor
3:10
Coming soon

Full site build

24
Lessons
Getting started
Getting started

Coming soon
Coming soon
Site build
Site build

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
Site launch
Site launch

Coming soon
Coming soon
Coming soon
Coming soon
Coming soon
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Introduction

We'll provide an introduction to the site build section of the course.

Learn more

Transcript

Learn how to design and develop a full CMS-driven website for a client.

Learn more

Transcript

Homepage: grid-based hero section

Build a layout powered by CSS grid. This lesson covers building and stying the grid section, image block, content block, and body tag.

Learn more

Transcript

Homepage: navigation

Configure a site navigation bar that links to each major page and stays fixed to the top of the browser's viewport.

Learn more

Transcript

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 Tech 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.




Hero section done. We'll revisit a lot of the smaller elements like the buttons some of the sizing spacing we’ll revisit a lot of this as we keep building for now, we'll work on getting us from this point hero section only to adding our site navigation bar a nav bar. This is pretty straightforward. So we're going to move through it fairly quickly in just two parts first part is adding the nav bar itself. The second is adding stuff to the navbar. So to add a nav bar we can go to our ad panel and scroll down to the bottom under components. We have the navbar preset right here. Now we can drag that right into the page body right at the top here and let go now the navbar preset we're using here. We're just doing that to save time. You can build your own navbar from scratch, but this is a good starting point. Let's grab our logo inside our assets. We have the logo for Hayes Valley Interior Design we can drop that right inside this brand link block and we can resize it just by eyeballing and that looks pretty good right there. And if we select that brand link block we can add some padding on the top and bottom when you do the same time by holding down option or alt we can size it until it's about what we want, looks pretty good. And for these each of these is a link block, a nav link each of these will take us to a different part of our site we’ll delete all of them except for home right now. And if we check our content strategy notes we can see we need homepage portfolio or process or design team and contact us. So let's use that as a starting point here. So we have home. Let's apply a class or doing that now so that changes we make to any one of these elements any one of these nav links will affect the others. So the class will add we’ll call it now have link and we'll copy and paste just going to press command C command v a few times. So we have all our options just click in to change each of these. This one will be portfolio. This one will be our process. This one is our design team and finally this one is contact us. Now here's the part that saves time changes to any one of these will affect all the others because again, they have the same class applied nav link. So if we go up here to padding hold down option and change this the padding is affected on all of these nav links at the same time. So let's grab our nav bar itself and change its background color something like white would be more appropriate for this design. And if we look at our container here, we have a nav bar inside of that is a container, that container is keeping everything close to the center. It's keeping everything constrained and that's good for some designs for this one. Let's set that containers minimum width to 100% I'll make sure we're going from edge to edge now on the Hayes Valley link block. This is the brand link block you might want to add some space because it's a little close to the edge. Let's add 20 pixels and on the right of this we can see we actually have a nav menu we’ll just use this lower navigation to navigate we can click nav menu. You might want to add a little spacing we can eyeball this but let's make it 10 pixels for now again, we can go through this a little bit later. We might want to change that. In fact right now just eyeballing it we might want to make it 5 pixels on the right and if we go into preview we can see it's going to take up the full width of our viewport. Now. One of the things to note here is because the section itself, this is our home hero section because this is set to 100 VH. It's currently spilling off the page. That's expected behavior. This is 100 VH. Meaning, the section itself is taking a hundred percent of the viewport height. So adding the nav bar above has pushed that down off the page. So there are a few ways to deal with this one. We could have the actual nav bar itself hover above the content. We can just set its position with the navbar selected. We could just set its position to fixed but now that the navbars fixed, regardless of the amount of content you have on the page, so going to stay on top on the top of the viewport. So as you scroll down content will tuck underneath the navbar will remain on top, but that's it later as we build the site we can come back to this and configure our links in the navbar. But for now we added the navbar and we added the content inside the navbar. Up next we'll build out more of our home page including a step. We literally call magic.


Homepage: testimonials

To emphasize both trust and authority for Hayes Valley Interior Design, we'll integrate CMS-driven testimonials on the homepage.

Learn more

Transcript

We’ll start by saying this part of the site build might be our favorite because it's the first time we get to use the CMS to drive dynamic content. Now some of those things sounds like more industry. Jargon CMS dynamic content, the, They are but that doesn't take anything away from the fact that we are about to rapidly add testimonials to our home page with images from each of those client projects. This is a huge deal when we're building this out we have to repeatedly asked why is this important to users people visiting the site? Well, the primary objective is to show people great interior design work, which we started doing right up top by doing this we're adding even more evidence more, work their team has done and by adding testimonials quotes from real clients. We can reinforce trusted Authority throughout this home page. We build this part in four steps we’ll create a CMS collection to drive the testimonials not just on this page, but for every client project were featuring on the site we’ll add content to that CMS will import a lot of what we've worked on with Rebecca and finally the part that's magic, magic which is where all of this links up and brings that static content to life spoiler alert the goal of this especially the last step is to give Rebecca and everyone at Hayes Valley the ability to log in and add more of their client projects including new pictures, new testimonials, and the website is going to support that she won't have to call us to add this content manually and as Freelancers saving ourselves from calls like that that saves us time and it makes our clients feel like they have superpowers because after we build this they will have super powers.


We'll start in Google Sheets. Now, there's a lot of information here, but it's fairly straightforward. We have a series of columns. And in these columns, we have the name of each project. These are all pieces of information that Rebecca sent us from Hayes Valley Interior Design so over here, we have the name of each project they've worked on. We have an image from each of these projects that we click on one of them. We can see what that image looks like and we have the project details right now. It's just lorem ipsum filler text. We have client testimonial these are from each of the clients. These are quotes that Rebecca provided. She asked her clients for these testimonials and for each project. We have one of the testimonials we have the location of that project. We have the type of project new build, whole home, renovation, kitchen renovation Etc. The date everything was completed. Then we have a project summary. So quick blurb about each project. Now, the reason we have all of this in a spreadsheet it's because in a couple steps, we're going to use this spreadsheet and actually import the information from there. So we don't have to manually enter it ourselves. It's also a good reference with the kind of data we have. Let's move this window out of the way we’ll be returning to it in a moment. But for now in our project, let's add a new collection do that from our CMS collections pain right here and we'll call The collectionollection client projects and a couple things happen we’ll notice right here have a plural version which is client project singular client project. This is fine. The structure is fine. But we want to focus on is the collection fields. We have the name of the project. We already know we want that. Let's add another field for Featured image. This is the image. There's one featured image for each client project. Let's hit image then we'll call it ‘featured image’. Now we can add help text. This might help for Rebecca and her team when they log in later for now, let's save the field and let's add our next field we’ll make this a rich text field for project details and we can continue through this process. Let's hit add field and do our next type which is client testimonial for that testimonial we could just do plain text that probably fits best for just a simple quote from each of the clients, ‘client testimonial’, and we can do a minimum character count. If we think that helps with our design gives these guidelines to Rebecca and her team but for now, we'll leave that blank say field. Let's add a field for the location again plaintext really simple text field will work fine here location we’ll hit save. Let's add another field this time for the type of project, ‘type of project’. Just hitting enter here add one more field for the date completed even though it's a number that might make sense to have a plain text field here at plain text and it will be date completed. We will add help text here enter the four-digit year.


2018-2019 Etc and that'll confirm for collaborators working on this project for Rebecca's team that they should put the four digit year and not a full written day because our design is going to be based on the year. It's a field we said that was our last field, there’s one more and that's the project summary new field to make this rich text. So rich text fields not only can have text but they can have some formatting bold text italics but images inside links the list goes on and on. So let's add rich text and we'll call this ‘project summary’.


Say field and that's our structure. That's the structure for all the data. We look over here at the editor preview. This is the kind of data that Rebecca's team can enter later. We'll be entering it now, but as they add other client projects, this is what they'll be presented with. Let's hit create collection. And with that our first step is done. Second Step. Add CMS content. Let's do that right now. We'll hit new client project. In other words. We're adding a new item to our CMS collection. Then that item is a client project and the name of this we're going to reference down below right here. We have our Hayes Valley Interior Design client project spreadsheet. Let's move that down here. It's going to be off screen in terms of what you see on the screen, but we're referencing it on the screen here. So what kind of content do we put in here? We're just going to use the first row from our spreadsheet. So the name of the project is ‘new home in Palo Alto’ the featured image we can click to browse, but that's right off screen here we’ll drag in Palo Alto feature and for project details. We're just going to copy and paste. From this spreadsheet project details were just going to copy and paste client testimonial, same deal copy and paste, location copy and paste. Although that could have been typed type new build. This is just the epitome of laziness they completed again. We're just copying and pasting all the content from that first row for this project inside the CMS and finally project summary. Let's put that here. So let's verify everything we have this is again very similar to what a collaborator would see when they log in later on but we've created a new home in Palo Alto. We'd added a featured image project details the client testimonial the location the type of project which is a new build the date completed which is 2017 and a project summary hit create, that's adding our first item to the CMS for the rest. Let's use CSV import and by that we simply mean click on Row 2. We're going to remove this row and the reason we're going to remove it is because we've already used this road before with imported this we’ve typed out or copied and pasted this information into the CMS already. So let's delete this row and the other eight projects were made from here. We can just go to file download as and we can download this as a comma-separated values of CSV document.


Now, how do we import it? Well in our CMS, we just go to import and drag that CSV drag that CSV. We just exported from Google Sheets and downloaded as a CSV, drag it right in here. Now. It's asking if this top row and that CSV we have that row we exported from Google Sheets. It's asking if it's the header and we're going to say yes. This is the header continue and all we have to do is map each of these fields like Oakland renovation, featured image, all of these fields to our CMS. So we're going to map to our field the name field obviously is just our name field for the featured image. We're going to map that to featured image for project details. We're going to map it to project details, for client testimonial, it's pretty straightforward here. We'll skip to the end where we've mapped all these fields but at the end of it we can take a look at the item preview off to the right here. And as we hover over each of these fields it directs us to what that information what that data looks like in context and we can switch between items. So this is Oakland renovation. Let's switch to the next item, which is a rustic kitchen rental. Next one is Richmond home build and we can get an idea of what this content looks like what these data look like once they're going to be imported and once you're done with that just import a client projects. And that's it. Our content is imported we can close out and see that we now have nine projects, the 8 we just imported plus the one we typed out or copied and pasted before, let's close out of the CMS because now after we've imported our CSV we can proceed to magic now. This is going to be really straightforward but it's going to take a second to get there and it's a little bit different from working on static content. So we'll start with a collection list and a collection list we can drag underneath our home hero section and by default it's a list that looks like this and that's okay. The first thing we have to do is link this to the source right now. It's set to none. So it's not pulling any information from anywhere. That's okay. What we want to do is go to client projects here that's going to link this to our client projects. We just worked on and now if we look at our list we can see there are nine different boxes, nine different areas, where content can go inside and that's expected. Let's keep the layout the way it is again. This is going to be a grid little bit later, but for now, let's keep the content the way it is and we'll add to that to each of these. The first we'll add is a div block. And the reason we're using a div block is because we want more flexibility over dimensions. This helps us use a background image to size things very similarly to how we did it in the home hero section. We use the same div block technique instead of background image on those. So let's do that right here with any of our div blocks selected. Let's go down and set a background image now instead of choosing an image. We're going to leave this blank stick with it. If we go over to element settings right here, we can pull our background image where it says get DG image get background image from client projects. Here's the magic part. It's going to go to this drop-down and choose featured image.


And right there it's pulling the featured image from each of these. It's pulling the featured image from each of our client projects and displaying it right here. Now. Why did we add that blank background image just a moment ago because that blank background image is what lets us format these images on all of them. So let's click example BG. This is our blank background image and we can choose cover we can choose to do it from the center and we can put some constraints on this you can set a height for each of these div locks. We could say we want each of them to be 300 pixels tall. I was 200 you can say 300 pixels tall that's 300 and just like that. We have a list with each item in our list each project. We have a background image. There's a div block inside each collection item. Now, you know who we are about organization. Let's double click to rename div block client image preview and you can call yours, whatever you'd like now with our collection list selected we can go over to grid, Now the default is block elements for this. That's okay. But if we choose grid all of our content just immediately organized into a grid and that grid looks pretty good like this. But if we go to edit our grid we can make some adjustments. Let's add two more columns and that looks pretty good. Maybe we can select that client image preview and instead of 300 we can go back to the accident before which was 200 that looks a little more realistic. And another thing to note here is we're showing 1, 2, 3, 9 client projects we could limit this so go to element settings again and make sure our collection list is selected. You can say limit items we can show 4 at a time. So we're showing just for client projects we can sort these later so we might want to do sort order and we can sort it by the date. It was completed maybe reverse alphabetical.


Alphabetical will go from low to high. So it will go 2017 2018 2019 reverse alphabetical will start with the most recent 2020 2019 20 18 and so on again you could have used a number here we could have used a number here but alphabet works fine for this demonstration. Let's it safe and that's it. We're seeing each of our client projects in descending order from the newest to the oldest. So if we go in and add a new project, which we don't have to demonstrate right now because we to finish this design, but if we go in and add a new client project and we date it 2020 or 2021 that will display first. So we have our client image preview. Let's put some text we want to put that testimonial in this design. So we'll go here add panel we’ll bring in a text block and we'll use the Navigator here to place it perfectly and by perfectly we mean perfectly. Perfectly except it's in the wrong spot. Let's move the client image preview that div block. Let's move that up. So we have some text underneath we can select any of these, again, the content in each of these is placed based on any one of them in CMS items and collection items like this. If you create content or put content inside one of them, it affects all the others. So by adding a text block to one, it added a text block to all of our collection items that's expected behavior so we can get the text from any field but we’ll want to pull is the client testimonial and just like that. We have client testimonials under each of these images. If we wanted which we can do for demonstration right here. We wanted to pull in another we could do a text block and pull the data was completed. It will show the year. It was completed underneath of each of these. So let's delete that one for now, but the idea that we have a testimonial which is dynamically being pulled from our collection and an image, which is dynamically being pulled from our collection is a really powerful thing. So let's work on design the grid gap we see, we’ll select our collection list. The grid gap we see should be about 16 pixels. That's the default that looks okay here we could adjust that so we could have the grid gap. Let's lock. It could make it 15 pixels. That could be Universal which means let's hit done go to our hero section before we forget and edit that grid to let's make it 15 pixels. So 15 pixels is our default we can do the same up here and the way we can do that with our home hero section selected. We can add some margin some space on the bottom and allow exactly 15 pixels. So that grid, that spacing around these items is starting to look pretty similar. We can select client image preview and add some lower margins. This is space underneath each of the images. Let's do 15 pixels there and we can do a few more things to adjust this to make this look exactly how we want it to look so we could select this text block and say ‘Testimonial Preview’ and make it gray. In fact instead of doing that lets click here and remove that let's reset that property because we can go to our body all pages tag. Like we did before and change our default there. Let's go to our body all pages tag and instead of black being the default or instead of light gray. Let's pick a darker gray color and we'll add that color to our swatches so we can use it everywhere. But that changed the paragraph color here. It also changed the testimonial preview color here. We can override that later. But that changes our default color for all content. That hasn't been overridden. Let's go in and drop that font size slightly. And again our line height is adjusting with us because we set that to 1.4 earlier. That's great. Let's set it to 1414 looks pretty good there and while we're at it, let's go up and change our home hero paragraph to 14 as well. 15 might look better. And we could tweak this for days but one of the things that's easy to notice when we're continuing to design like this is all of our stuff is right up against the edge. We could add a container to contain things. But another helpful thing is to use the body all pages tag. This is one of our favorites, go to the body all pages tag and add some padding on both sides, again, holding option or alt on PC and dragging to adjust both sides at once. Let's go to 15 pixels. So we're really getting that grid consistency. We're getting 15 pixels between the edge of the viewport and this content we're getting 15 pixels between the hero section and the testimonial section getting 15 pixels in between each of the testimonials were getting that grid type design looking really consistent. Now, what if we want to specify the featured images on the home page, there's a few ways to do that but one of them is really powerful. Let's go into the CMS and we'll go and edit our settings. The reason we're doing that is we want to add a new field. This new field is going to be a switch. We can just call this which featured what featured is going to do. It's going to allow us to, and we'll put this up on the top. So it's easy to access. It's going to allow us to go by item. So industrial Loft Renault, let's say this one maybe is not featured. We can click on master suite and Burlingame that can be a featured one. Let's switch that on save that and Cupertino Home build that looks like a featured one save, Richmond home build. That's a featured one. Rustic Kitchen Renault just going through and choosing some of our featured this will be the fourth one we’ll feature, we’ll hit save and here's what we can do we can say on this collection item we’ll just select any of these collection items go over to element settings and we can say we want to filter our selection what that means is adding a filter lets us choose, based on that switch, which images to display so we can say is this featured, when you're gonna choose that switch, and we're only showing this content if that featured switch is on hit save and now only our featured content is shown. It's still sorting it by the date completed. It's still showing the newest content first, but it's filtered. It's only showing those for because of that limit. It's only showing those four items that featured is switch to on. That's a ton, and we're going to come back to what we just made because we didn't just build the testimonials. We basically set the groundwork for what we’ll end up being the client project pages themselves, but that's what we just wrapped up here. We created a collection we some content we imported the rest from a CSV and we used magic to tie all that content to link it all to a dynamic design on our homepage.


Homepage: footer

Build a grid-based footer section which houses the company logo, navigation links, and business information.

Learn more

Transcript

We're moving fairly quickly through the build process and we'll come back to clean up the home page in just a little bit. And the reason we're not stopping and making everything pixel perfect right now is that we're optimizing for speed. Remember? We're tracking our efficiency and taking note of the time we're spending on each client project. Of course, we can tweak the design and iterate over and over and we will eventually but for the build process, it's important we get our content on the page. We want to take our home page we have now and add our footer. So it looks like this that's where we'll be at the end of this video and both the footer and of course, the navbar we created earlier. These are going to be on every page. So give users quick access to site navigation and to the third line in our user story. We know it's this, we want them to be able to pick this interior design firm with confidence. That's why using the navbar and footer to surface critical contact information and site navigation is a really big deal and that's what we'll do when we build the footer we’ll do this in two steps. We'll build a basic grid. That's our footers main structure and we'll make little content holders. This’ll let us spaced out and align the content inside the footer you might be asking what's the reason we're not stopping and making everything pixel perfect right now. Well, we already answered that at the beginning of this video. Now before we add our grid there is one fixed. We might want to make sooner rather than later and that's on the collection list down here and the collection list by default when we added it had two rows. Let's go in edit our grid and delete one of those two rows that we don't have any space showing up your in the designer now we can move on to our grid. This is the primary structure of the footer and to do that. We'll just grab a grid and drag it using the navbar. Let's place it underneath everything else and a few things right off the bat. Let's name this. Let's add a class of footer and give it a few properties first. Let's set a background color. That's not white. It's a very very light gray.


Looks pretty good. And let's add some padding on the top and bottom some breathing room here. Let's do 60 pixels. Let's do 50 pixels top and bottom just holding down option on Mac or alt on PC and we can add some content first things first. Let's add a logo we could just go to add an image here, but we have a logo right here. We can copy it and paste it right inside our grid again, content places itself automatically. It's automatically positioned in the first open cell next we can add more content. Let's add links to the page and to do that. We need to move into Step 2, which is little content holders AKA div blocks and these two blocks are gonna help us organize the content inside our cells now if we try to drag the div block right inside as we know content that's placed inside a grid is automatically placed in the next available cell, the next open cell. We can set this to manual and place it anywhere we want. Let's put that here under the Hayes Valley logo and this is where we can put all of our links, so let's add some links to that div block. Let's go in and add a text link and we're going to do a text link again if we drag in right here, and we try to place it. It's going to place again in that next available cell, which is the second one over hold down command on Mac or control on PC that lets us drop it inside of something that's inside a cell in this case the div block and we'll close that out and we'll call this one home page. We're just building out a lower navigation here in the footer and if we select that link, we can call it footer link so we can set up some styling here and let's copy and paste this a few times doing the same thing. We did with the navbar adding portfolio adding our process. Adding ‘our design team’ and finally our last page ‘contact us’. Now. They all have the same class applied. So if we style one of them it will style all of them. They all have footer link applied. So let's set the display to block these take up the full available width inside this div block and that means it'll knock each of them down to the next line and there are few more things. We can do here one we could if we select our div block control some of the styling here could do that on the footer link itself or on the div block that holds it let's do it on the div block that holds it by setting everything to a line right that affects each of its children, but the other thing is the Hayes Valley logo is now over here so we could, with that Hayes Valley logo selected, simply align it using grid it's a child inside the grid so we can set it to the right side. Now, let's dial this a little bit further. The footer link right now is blue and underlined. It's not bad, but we can make it a lot better set the underlined to none.


What's it a different color? So we have this dim gray color. We could use our pale violet red we could use black dim gray looks pretty good in this context and we can space things out for a little more breathing room at the bottom. Margin. We can come back to this but 5 looks pretty good for now. And each of these later on in the process can be its own link will link these just like will link our nav bar once all our pages are built out will link these to the appropriate page, but that's good for that div block that little content holder. Let's continue by adding more another div block strike it into the fourth sell this time. Let's hold down shift, shift will let us manually place something without having to select the button and let go with shift still being held and now we have a div block on the right side and there we can place some other contact information like the address the address. Let's drag in a paragraph and we'll use the nav bar to place at this time. Let's place it inside that div block. We just added and it's already being styled. It looks pretty good. Like this, but we could add the same class we did before we could add the class of footer link and since we're using this as a non link, we might want to double click and change that be a little more specific footer text. That means we have multiple types of contact information the spacing that margin we had on the bottom will affect not only each of these paragraphs, but it'll affect the footer text to the right. Let's bring that back. We had something like 5 pixels on the bottom before. Okay footer text. Let's paste in the address and space things out knock it down to a new line. So the address is spaced out exactly how we want it and we can also add the phone number 415.555.1200, let's add our hours of operation, Monday through Friday from 9 a.m. To 4:30 p.m. Pacific time.


That looks pretty good. We can also add a button underneath this for a little bit clearer of a call to action and instead of dragging a button and like this we can simply use one of the elements we created before which is let's chat will hold down option or alt on PC and we can just copy it right into that div block and position it instead of on top of the text. Let's position it underneath so we have our call to action down there. Here's the thing about classes if we make a change on this if we affect the styling on this one element, it's going to affect the styling for the others. Let's show what happens when we just padding it affects all of them at once and there's nothing wrong with that but we might want the styling to be different on this button than these buttons. So two ways to do that. We could duplicate the class. We can just click on the right side duplicate and create a new class or we can inherit all those same properties from the first class by creating a combo class. This is button, we’ll call it button smaller, and now button smaller will allow us to create a little bit of a modification. So if we want 25 pixels of padding on both sides and a little less in terms of padding on the top and bottom that can work fine. Now if we make a change to our original button class if we change that color, it still affects the other button at the bottom but changes to that button since they have that combo class of smaller won't affect the original button, lets us use this as a starting point. So that's our footer, there are times in the design and build process where an idea comes out and it's terrible, for instance. What we did here with the button might not be ideal. It could go back to the button. This is 29. Let's round that so it's a nice round number of 30 and then here may be changing this to 25 on both sides didn't help us or just holding down option or alt and clicking to remove these properties and like that. We've built a footer again. We have to link this up, but we have our primary structure here again a grid that serves as our primary folder structure and little content holders are div block and another div block we could name these again to is organized that might be a helpful thing. Let's double-click and call this. ‘Little content holder left’ and this one could be called ‘little content holder right’, but that's a micro detail. But that's it. That's the last major component before we move into tweaking our design for the home page and making it fully responsive not just on desktop, but on tablet and mobile devices.


Homepage: responsiveness

Test and adapt responsiveness and fluidity for the homepage layout on desktop, tablet, mobile landscape, and mobile portrait.

Learn more

Transcript

This is the fun part. We get to take these main elements this layout we created and we get to tweak. This is where not only CSS grid but breakpoints themselves really shine because we're going to test and adapt our layout not only on desktop but on tablet mobile landscape and mobile portrait by the end of this lesson will have a fluid and responsive design that looks great on all kinds of devices. That won't just look good, it’ll better serve our clients clients. These are people who are going to Hayes Valley to look at great design work and those people are going to get a look at a site that works properly on all devices and view Hayes Valley as more trustworthy and as an authority when it comes to great interior design, that's our goal and it has been ever since we made our proposal and built out our content strategy. So let's start on desktop and a few things to note. Let's work top down but we can change things as we see them the nav bar on the top when we set our body all pages tag we go. Active Body all pages body all pages we can see we set padding to 15 on both sides that worked great for most of the content, but what it didn't work great for is the navbar the nav bar is set to fixed position and it's taking a hundred percent width. That's correct. It is being calculated correctly. But because it's a hundred percent width. It's getting pushed off the edge here. So let's make a fix for that will take the margin and we'll subtract instead of doing positive margin. Let's take the left margin and subtract 15. That looks pretty good. Now as we scroll down the fixed position on that nav bar stays it stays where it should be but it is no longer being clipped on the edge another quick fix we can do here not really a fix but a visual adjustment we can add some padding on the top and bottom to make some more breathing room here. 5 pixels in the top and bottom looks pretty good, and we can adjust the nav link color. Right. Now a darker color is a little heavy maybe something a little bit brighter. That looks pretty good. Let's drop the font size to 14 and increase some padding or just eyeballing this it's 18 right now. Let's eyeball it and 25 look spaced out pretty good. We're just increasing that hit area and making sure things are spaced out and look a lot less crowded this way. So that looks pretty good. The hero section itself. One thing to note here on the hero section grid. It's 100 VH. We knew it was 100 VH when we started this but what if we drop that a little bit maybe we should hold down shift and press the down arrow if we adjust and decrease that viewport height the content still shows up, but we can start to see a little more of the page now. This is a preference. So there's no right or wrong way to go about doing this but let's add with something like 70 VH. It looks pretty good and we can keep tweaking this and come back to it. But what we're doing here is surfacing more of the information on the page. So it's more easily. Accessible the other thing to note in this hero section. Is that the home hero content here looks great on desktop when we move down and go to tablet, mobile landscape, mobile portrait, things might look a little more crowded especially with this 2x2 grid, but that's our hero section. What about the collection list grid down here. What about the testimonials? Well, this section may be a little close for comfort to the footer itself. So we can grab collection list rapper then add some margin on the bottom. Let's say 30 pixels and while we're at it 200 pixels on the height here might be a little bit extreme. If we drop that we might still be able to achieve the same kind of visual result without as much crowding happening. Now the amount of white space between the top section the hero section and the testimonial section. It's 15 pixels. We know that because we want in here and set the grid gap to 15 pixels if we look at our parent grid we could see it's 15 pixels of columns 15 pixels in between each row and it's the same thing on the rest of it we go into our collection list grid here and go to edit.


Is 15 pixels 15 pixels and that's what we did on the sides too. But do we have to have that space between all elements? It's a good question. We could just try it out with our homepage hero section. What if we increase this to something like 60 a little bit more Breathing Room could do the same thing if we go back to it and add some more space underneath

60 here as well. Let's type that in 60. It's a little more breathing room if we preview that it looks okay, but for now let's undo a few times and get us back to the point. We were at before 15 of the top and 30 before you get to the footer. Okay, that looks pretty good. What about the footer itself? Well, this is pretty close to this content. The footer text is really close to that button. So if we add margin to the bottom that's going to adjust all of these but an alternative would be grabbing the button and adding a combo classic combo class takes everything from the button class, but it lets us build on those Styles. So if we create footer button, we now are inheriting we're taking all of that content from button the color and everything else. We're starting with that as a Baseline and we can build on it. So if we add some margin to the top it's only going to affect this button because it has the button class and the footer button combo class applied. So let's add 15 pixels, maybe 10 pixels from the top. It looks a little bit better more breathing room. Okay, that's desktop. If we go to preview you can see we have a little bit more breathing room. One of the things to note in the home hero section. The content goes on quite wide. It has a lot of width here so we can grab that paragraph which we can specifically named home hero paragraph and set a limit instead of width to 70%. It doesn't look too bad. Maybe we can get rid of that limit and do something else. What if the maximum width, the maximum possible width of this paragraph was set in pixels if it was something like 600 pixels and up that a little bit actually 600 looks pretty good. If we do that we can see it's not stretching even though the viewport is a lot wider and wider devices on larger screens. This might be a consideration. It doesn't go too far because the maximum is set at 600 pixels now so it'll take up the full width of the container. So if it goes down we drag this edge, we just grabbing the edge here and testing that fluid responsiveness. It's doing a hundred percent inside of this home hero content block, but it'll never be wider than 600 pixels so you can see when we get wider it hits that maximum and stops at 600 pixels. That looks pretty good. Let's check out the bottom and test that fluidity everything wraps and looks exactly as we'd expect it to look so that looks pretty good on desktop. That's desktop. What about, let's look at tablet view and on tablet view things scaled pretty well. The interesting thing about this home hero section is we can see not much if any of the bed itself. So if we go back to desktop it see that there's a bed here and depending on your view that bed is slightly obstructed, but here it's a much more dramatic loss because we're scaling up because this content is having to take up more vertical space on the tablet view. So we may want to do something a little different. Let's grab our image. Let's grab the main image here and instead of having to take up all four cells. Let's have it take up the top row only then we can take the home hero content and have it span both of those and instantly we have a different look instead of this content being covered the image itself being covered by this home hero content. We have a top-down view where we have one row that has the image add another row that has the home hero content. So that looks a lot better if we go back to top we can see that didn't affect anything on desktop. That's because changes Cascade down if we change something on desktop that will affect all the smaller views. But if we change something on tablet, it will still affect the smaller views, but it won't go back up and change something on desktop. So let's go back to tablet that looks pretty good something about tablet. We're starting to get more limited real estate. We might not want that navbar fixed at the top instead. We might want to put it back in the normal document flow and set it to static. When we do that. Remember that change we made we made that margin change. We subtracted 15 back on desktop view. Let's change that back to zero. So everything fits nicely in tablet view. So that looks pretty good that padding 30 pixel padding on the side might not be the best look for us if we're trying to keep things aligned to one edge Let's see if we remove that padding set this to 0 set this to 0.


See that looks a little better. It looks okay that home hero paragraph. Let's get rid of that max width instead. Let's just switch it to none. There's no limit there and it might be worth trying to center this content. So if we select home hero content right now, it's display is set to block we can use flexbox here. Flexbox, lets us stack content vertically horizontally. This is what happens by default horizontal we could switch that to Vertical that doesn't look too bad, but we can align everything to the center and for the button and add a little bit of space here. Doesn't look too bad. It's undo a few times and see if we could try something else turn off flex and what if we just take our home hero content this div block and hit center, align center using texts entering that looks pretty good. Spacing looks good. These images right here the aspect ratio might be a little off. Let's try testing fluidity here. Yeah, the images are a little tall. So instead of 165 pixels. Let's try 120. It looks a lot better. Okay. How about the footer let's scroll down and take a look at the footer. Everything seems to scale nicely on the footer if we test responsiveness. It looks okay. Everything's responding to the width. We're getting that fluid type of response. Okay, that's tablet before we move on. Let's check the navbar out. If we go to preview mode and test it out as is it doesn't work. And that's because we had switched it to static. What we should have done is switch it to relative with the navbar selected or switching it to relative remember over here the nav bar is fixed and we want it fixed. We want it sticking on the top like that as we scroll button tablet because we value that limited screen real estate. We're having it switched to relative now if we go to preview and we click the button we can see the drop down as is and there's some styling work to be done here. Let's go back out of preview and make some changes. Let's click that menu button, we’ll go over to element settings. And from there we can open our menu and when the menu is open we can control styling. So let's go back to the style. Pal we're looking at our selector here. This is the menu button class and the state is open. So let's make some changes first off that color switch it to Black the white color is okay. We might want to increase the size of that menu button a little bit. That's not a good look. Let's reset. It will keep it there for now. Then we have these nav links. Now these nav links have a color of transparent. They're not the ones that are giving us this great color to get that great color. Let's select the nav menu and that's where we're getting that gray. So a few options we could do here could do transparent but then we can't see anything but a white color here might look best and that looks fine. Let's go to preview. And when we press this, we see all of our content drop-down we could actually add transparency. So with our menu button selected go back to Nav bar settings open that menu select our nav menu and drop the opacity a little bit. This will give us a sense of context and will drop just a little bit that doesn't look so, so bad.


95% not too bad for now. We can revisit this a little bit later. We test fluidity we can see everything responds as we might expect it. If we go to preview mode and test this out we click it comes down click. It returns can also adjust things like easing here. So if we want to select the menu button again and change the duration over 800 milliseconds that will be half the speed. Could also put it back to 400 and choose something different. So when we open it, it could be he's out when we close. It could also be he's out. So we'll have a little bit more of an Abrupt feeling. Doesn't look so good. Maybe switch it back to he's so we'll go to he's he's tried out the default look, okay, we can revisit later but that's tablet things are looking pretty good on tablet what happens if we move to mobile landscape mobile landscape looks pretty good as is a lot of the changes we made on tablet work here too, but it's worth noting that we're looking at a view Port that's pretty tall here mobile landscape in reality is going to be a lot more scrunched. It's going to not have this much height. So how does it look when the heights decreased? Well, let's grab the bottom of our browser and resize let's see what happens if we have a much narrower or much shorter viewport. It doesn't look so great so we can go in here edit our home hero section. We're editing that grid and instead of 1fr let's put a real value pixels of maybe 200 pixels. So we'll show that view at 200 pixels. We're leaving the bottom content on auto but notice how its contents now getting clipped there.


Reason that's getting clipped is the following we go back to tablet we go back to desktop we can see this content is at 70 VH. So no matter what this is going to take up the grid home hero section is going to take up 70% of the viewport height that works when we have a lot of space here, but it doesn't work when things are more narrow. So what can we do to solve that we can get rid of that 70 VH and set that as a minimum a minimum height of 70 VH. That means it'll take up 70% of the viewport, but it'll still respect the content inside. It's a minimum. It doesn't mean it's going to crush content inside. So if on desktop we try it and we scroll up we can see it never collapses to less than the content inside and that applies to all views again these changes Cascade down. So if we go to tablet we’ll expect the same thing here, we might want to set a height here instead of 1fr we could do that same 200 pixels. That looks pretty good. And let's check mobile landscape that looks a lot better now because screen real estate is limited on mobile landscape. There are some other changes we might want to make but if we switch to our normal height, we might notice a little bit more space down here. That's because it's still setting that minimum of 70 VH on desktop that works fine tablet. That's where we start to see the space. So what we could do here is switch it to Auto setting our height based on the content inside. It'll still have 200 pixels for this row. It will still have the content inside of here which by the way, we can change the padding we can decrease that to maybe 15, let's get it just right. There's 15 on the top and bottom then on mobile landscape that looks better. The reason it looks better is because we made the change on tablet. So tablet passes down to mobile landscape and of course down to mobile portrait as well. The other thing to note here is that things are getting a little bit tight regarding these for previews these client projects. So instead of trying to scale these even more what we could do is with our collection list selected we can make a change to the grid. So let's edit the grid and instead of having four columns and one row what happens if we delete two of these columns automatically this auto-generated row shows up and content is push down accordingly. So now we have a 2 by 2 this 2x2 grid works fine. Now we might want to change the image height again again limited screen real estate. It might mean that something like 90 pixels is more practical so you can still see the image but it's not taking up as much height and while we're there this testimonial preview might be served better if the text size has been decreased a little bit more now. What about the other text? Maybe the heading we might want to do the same thing. Let's drop the size on the heading a little bit. It looks a little bit better. Let's drop the home here a paragraph a little bit. That looks better. And even the footer we're noticing. The footer text is a little bit large we’ll drop that and because they have the same classes applied to all of them the footer text. They're all adjusting at the same time. Let's check that menu bar. So if we go to preview and we press our button things look good, but they're a little wide and if we're on a mobile landscape device that we're looking at a mobile device in landscape mode. It might be a little tough to see everything on the screen. So let's go out of preview and then we'll select our menu button and open the menu in the element settings panel grab any of these nav links and style those they have padding 20 on the top and padding 20 the bottom. Let's decrease this to something a little more realistic like 10. It's a little bit closer the still a wide or at all hit area. So it's not going to be difficult as a tap Target, but there's a lot more that can fit on the screen. We can fit all five of these options in the drop-down on the, Okay, that's mobile landscape. Let's check that again. Looks pretty good. Let's check fluidity. That looks pretty good. Let's move on to the next one. This is mobile portrait. Now mobile Portrait by default right now. It looks pretty good. You can see that we're getting a little bit of knocking down on the Hayes Valley logo. So there are a few ways to deal with this the first thing to note. Is that body the body all pages tag that we put that 15 pixels of padding on we might want to make a change to that. So with our body all pages tag here, we can decrease that on mobile portrait to something maybe five pixels, maybe 10 pixels just holding down option or alt and dragging to adjust both sides at once. This is pretty narrow more realistically. We have something that looks like this that looks pretty good. But as it does get more narrow as we get on more narrow devices, it knocks the logo knocks the menu button down to the next line. So let's adjust the logo itself will select not the but the brand div block that selecting it and we'll set a width set it to 100 pixels. That might be a little small. We can eyeball it pulling down shift here to adjust by 10 at a time. That looks pretty good. We could also do a percentage but 140 looks pretty good and we can make micro adjustments here at a little more padding on the top to get things settled how we want them again. We're just eyeballing it right now. We can tweak a little more later. Now another thing these are vertically stacked. There's not enough room for both these buttons to be in the same spot. So what we might want to do is Select either of these buttons and switch. We're going to switch its display from inline block to block block elements will take up full width. So let's also add some margin at the bottom. Give it some breathing room that looks a lot better mobile portrait is really coming together. It might make sense to drop the font size on this heading even a little more. Let's drop it from 33 to maybe 24 that looks pretty good and a note about the height the line height has always been for or pixels we go back up to desktop. None of these changes that we're making on mobile portrait, of course affect desktop since changes Cascade down, but it might be worth changing our height to a unitless number again. We can do something like 1.2 and put the little - hit enter now, we have a unitless value. That means we don't have to worry about setting the height in pixels. We have to worry about setting the line height in pixels and that will work on all devices, especially when things wrap to the next line. That looks pretty good. What portrait looks good here.


Scroll down let's take a look at this. This might get a little tight on narrow devices. It might get a little tight around the edges so we can make an adjustment to that to the footer selected we can go in and instead of having two columns. Let's remove one of them. It'll knock things down to the next row. But remember it won't because these things are manually placed we placed these little content holders manually, but let's try switching the position to auto. Let's do it on all of these the other content right here. The little content holder right switch that to auto now our content is doing what we'd expect. It doesn't look perfect. That's because we have some other adjustments to make but it's doing at least what we'd expect it to do. So with our footer selected will have the content starting with Hayes Valley right now. It's set to move to the right side to a line to the right to the end. Let's center it that looks better this footer text. It's positioned correctly, but it's text alignment is to the right. Let's center it and that because it's the footer text on all of these is overriding everything else. That looks pretty good. Let's chat. Let's enter that we're looking pretty good here. But one thing to notice on all these buttons If you have noticed it already it's that there's a little extra space on the right and that's because our buttons when they're stacked or when they're placed side by side. It made sense on desktop. It made sense on tablet on mobile landscape to have these sit next to each other with some space in between some space in between each button. So we added some margin of 10, we can remove that here. Let's set it to zero and now everything's looking even even in matched on both sides. We test fluidity and responsiveness. This looks great might be a little bit of extra space here looking drop to maybe 30 pixels on the top and bottom but we're looking pretty good for now. So let's go to preview mode test this in desktop. It's a pretty good test this in tablet.


Also looks good test this in mobile landscape things are responding the reflowing as we'd expect them to of course on all of these are drop-down works. Okay, let's go to mobile portrait drop down looks good here to responsiveness and fluidity works. So we've made our tweaks and reviewed our design on desktop, tablet, mobile landscape, mobile portrait, and we'll come back to the homepage later once we've built out the rest of the site, but because we're styling using classes and because we've set properties on the body all pages tag, and of course because we started building out that CMS that'll make each subsequent part of this build that much quicker with that being said, the next step of this build is the portfolio of client projects for Hayes Valley.


Portfolio page

Build a portfolio page that spotlights the value your client has to offer their potential clients.

Learn more

Transcript

For the portfolio page we’re calling this our work, our being first person plural from the perspective of Hayes Valley Interior Design, not those who meet one of three criteria sitting at this desk watching this video. We're reading the transcript of you know, what?

It's not our work, its portfolio. So none of that was relevant, but we're going to build it out based on the CMS collection we added before. What does that mean? Well, we have all this information stored in our CMS, and now we're going to design with it and we'll do this in three parts. We’ll start with the nav bar in the footer since we want those to appear on each and every page. Then we'll build out our hero section, and finally we'll make a grid for all our featured projects, every client project in the portfolio. Let's start with the nav bar and footer and the first instinct might be to go to the pages panel and create a new page. That would be correct. Although we can do it in any order we want, let's create portfolio. And that's our portfolio page completely and entirely blank. Now if we go back to the homepage we could just copy and paste the nav bar, copy and paste the footer. In fact, let's copy the nav bar right over to portfolio. But here's the problem. We paste it in, if we make a change here call this homepage instead of home. We go back to the homepage. We can see it still says home. That's because there's no link between this content. It’s static content. We placed it on one page by copying and pasting, and we changed it on that page. Wouldn't go back and change the original content. So there's another, better way to do this, and we'll start by deleting the nav bar we paste it and going back to the home page. Selecting the nav bar, we're going to right-click on the label. What we'll do is we'll create a symbol. So we'll press create symbol and we'll call this ‘nav bar’ that'll let us place this on any page, anywhere in our project. So let's go to portfolio, and if we go to our ad panel, we have the elements we've been adding from this the entire time but we also have symbols. So let's click into symbols, drag our navbar in, and that's it. Now if we change something, for instance, double click to edit that symbol and let's go in call it home page. Now if we edit that on this page we go back to home that carries over so all of our content that's inside a symbol, making a change on any of that content, affects all other instances of that symbol wherever they are in the project. So that's the nav bar. We're halfway done. Let's do the footer itself, and we’ll right click the label create symbol, and we'll call it ‘footer’. Same deal here because we might want to make changes to our styling, we might want to make changes to our content. We don't want to be locked in. So, by creating symbols for these common elements, which will appear on each page. We're going to save a tremendous amount of time. Not just when we're creating the pages, but when we make changes down the road. Let's copy that footer. Go back over to portfolio and paste. Now, a couple things here. One, it’s tucked underneath the nav bar. That's expected behavior. Nav bar is floating above everything else. It's fixed on desktop view, but there's another reason it's doing this. There's no direction telling that footer to go down to the bottom of the page. On our body all pages tag, again, we can access this from the drop-down, let's click that we can do something special here. We can set the body to flex. We use flex box and we want content to still stack vertically that works okay, but the interesting part about this is it opens up flex box magic that's actually flex box auto and when we double click on the footer, that's how we edit the footer, we can do something here that's going to change everything. We can set the top margin, not to a specific number, not to 115 pixels, we can set the top margin to auto, and that means wherever we are, however long that viewport is, however long that page is, it's always going to be at the bottom because auto creates automatic space. Automatic margin between the footer and anything above it. So we did that on this page. That means if create a new page and add the nav bar on the footer, the footer will always be at the bottom, and that doesn't just affect desktop since changes cascade down. It affects tablet, it affects mobile landscape, double portrait and all our changes we did before are visible here. So back to desktop. And by the way, we can switch from one to two hero section and in our content strategy notes, we can see in our portfolio, in our hero section, we have an H1 that's explore our design work, that's our main heading, and we have a subheading. We want both of those in a hero section. So let's start with that. We'll start by dragging in a section and because we want to reuse this class, and because we want to keep things organized, let's call it ‘hero section’ not home hero section. We created that before but that was special for the home hero section. This is just hero section and let's choose a height just while we're designing here. We can always change this later. Let's put 600 pixels and let's get some content inside. First, our heading, drag that right inside the hero section and it's an H1 by default. That's good. But we can't really see what we're doing. That's because it's underneath this fixed nav bar. So on the hero section, let's add some padding. Let's push things down maybe 60 pixels or 70 pixels. Let’s do 70. And let's grab our heading. Let's change it to ‘explore our design work’, and we have a paragraph underneath, that that paragraph can go right here, and the paragraph will just reach over and copy and paste it from our content strategy doc. Go in here and paste. So that's the basic structure. We can work with this. We want the explorer design work and the paragraph to have some type of structure. But we also want an image behind this. We can configure the image in just a second, but let's place both of these. First off, we can just choose major heading, we created that before and that design works, but perhaps this color won't go with all the images we want to use, so we can create a combo class. Let's say ‘secondary’, and this means we can modify, we can build on top of that first design with something that might be a little less bold. We're not using that pink color, using something a little less bold and that's a good starting point. We might play with the color in just a moment and we can also decrease that bottom margin and set a limit on our paragraph here. This can be hero paragraph and we can set a limit of maximum width on this we can do it based on percentages. We can do it based on pixels, maybe 500 pixels. Little bit less, 400 pixels. That looks pretty good. And here's where we can use flex box with our hero sections selected, flex lets us stack content vertically or horizontally and we'll just click flex here, and stack it vertically, and we just want things on the bottom, and aligned to the left and that looks pretty good. That means we have our major heading. We have our hero power graph, but let's give it some padding holding down shift to adjust all four sides at once, let's do something like 60 pixels. This is going to be a standard. This is the type of spacing we want to establish early on so we can use this throughout the other pages. If we look at the hero power graph that 10 pixels at the bottom. Let's make that zero. That way we're really squared off from the bottom left. Again, we can tweak this when we go back to clean up a little bit later. For now, let's move forward with the background image. And before we do that, because we don't want every hero section to have the same background image, we're going to use another combo class. For hero section let's leave that the way it is. Let's call this one ‘portfolio’. So, hero section gives us that structure. It's a flex box section that puts everything to the left and to the bottom but hero section portfolio will have the configuration we're doing right now, builds on that by adding a background image. Let's hit choose image. We’ll choose an image here, and like we did before, let's use cover and center that. That looks pretty good and we can add on top of that, on top of that image a gradient. To use a gradient let's use a lower value a lower alpha right here. We can do it a black alpha, we're going to eyeball it but this is a good starting point. Let's change that angle from the bottom left and maybe black doesn't work too. Well here it could be a warmer version of that color that could work. We could do something a little bit closer to this, and we can change the colors because we're on portfolio, we might like black and gray for these but for this one we might want to make a change to the hero section itself. Let's change the dim gray color to white so we can see this hero power graph and on our major heading we have secondary, and that's set to black we need to override that. There are a few ways to override it but let's assume we're going to use white on all of these and change that to white as well. Let’s do full opacity. That looks pretty good. Let's increase visibility a little more by going into our linear gradient pull this back up and increase that alpha a little bit more. A little bit darker.

That's a good starting point. So we're featuring great design, again as a homeowner, I want to see great interior design work so that I can pick this interior design firm with confidence. We're doing that right here. We're featuring their design and we're giving people an opportunity to explore their design work. That's the hero section. Let's move on to the client projects grid. Now, what we want to feature in each of these, each of the client projects is an image of their design work, a short title of the project, maybe a blurb about the project, and a link to each of those project pages. The link will be clicking the project itself. But that gives us an idea of what we're about to build and we're going to use the CMS. We’ll do that just like we did on the homepage for the testimonials by dragging in a collection list. We want that collection list underneath the hero section. Let's drag that in right here and we'll pull that source from client projects. And again, we have all our client projects listed right here. Let's go in and grab a div block. We’ll put one div block in any of them. We can actually pick the same class we used before, it was testimonial preview, and we can pull that image from element settings. We can get that background image just like we did before from featured image.

Now testimonial preview might not be the class we used. Let's go back to home and actually see what it is we chose here. That's client image preview. Let's go back to portfolio. This is why class naming is important and we can always do better. Let's go back and delete that, and instead client image preview. That's setting the same height, the same height restriction, the constraints we configured on desktop tablet, on mobile devices, and it's applying that here as well. This is looking pretty good. Now, we could stack all of the client projects like this. In fact, that might be a really good design. But there’s something else we can try. We can do what we did before, select the collection list and make that a grid, and with that we have a little more space to play around. In fact, we can make this three columns and the rows will auto-generate. We have three columns three rows. This is looking pretty good, each of these representing its own project. Now, it says collection list two, we should keep this organized and call it ‘client projects grid’ and we can add more content. Let's add another heading and we'll do that underneath the image preview. Let's put that right here inside the collection item underneath the image preview and let's make this an H2 and we want to get that text instead of typing out something specific for each of them, want to get that text from the name, the project name and just like that, we have the project names and a project image in each of these. Now, what about the blurb underneath? We created rich text fields in the CMS for that. We added a blurb to each of them. Let's go to add and we'll grab rich text and put that right underneath the heading and we can get that text. We can select that text from the project summary and that shows a little project summary under each of these. This is looking pretty good. Let's change our heading, we can pull our major heading, or we can create a new class for this we can call this ‘secondary heading’ and we can choose a font. We can go to play fair display, 400’s fine but we want to decrease the font size to decrease that visual hierarchy or to set the next level on that visual hierarchy, maybe 24 works. Let's set the height to unit lists 1.2 and then the little hyphen, enter, it looks pretty good. The rich text block underneath might benefit from moving up. Just grabbing the heading above this H2, and decreasing that margin, and we could decrease the size on this rich text block slightly, maybe a 14 or 13. Back to 14. That looks pretty good. Now, we want each of these to be a link, we want these when you click them to link out to that specific project. How do we do that? Well, we can use a link block. A link block is just like a div block, except it takes you to a certain link when you click on that link. So we'll go to the add panel we’ll go to link block, drag that right into the collection item, and we'll put two items inside. We'll put the client image preview, we’ll put that inside the link block, and suddenly we can see nothing showing up. That's okay. All we need to do is select that link block and set its width to 100% actually instead of doing that. Let's set its display to block. That works fine. Block elements take up the full space, the full width available to them inside whatever their parent is. Okay, that works fine. Let's try bringing in that H2. Let's make sure the H2 is actually underneath the client image preview. That looks good. Now our H2’s are styled a little weirdly. The headings themselves are blue, they’re underlined, that's because we put them inside a link block. They became part of that link. So if we select our link block, we can just override that, we can override that by instead of using any of these we can set our text decoration to none and we can set our color to anything because text styling is inherited by any children of parent objects. We're just setting text styling on the link block itself. This looks pretty good. So if you click on the image, or you click on the title here, it will take you to that specific page, but we have to tell it to do exactly that. So, with this link block selected  we can press the little cog and we can take it to not just a static link with the click right here to collection page. We can simply choose current client project. Now, what does that mean? It means, if we click this it'll take you to that client project. That's all we have to do. There's nothing else required. It's done. All we have to do in a moment is build out those client project pages. So we have our client image preview. We have the heading underneath. Maybe there's a little too much space little margin could decrease that to 10, and we could add a little more space if we just select our rich text block here. In fact, our collection items themselves, we could add some padding inside. So it's a little more white space underneath each of these, little more breathing room. Let's do 30 pixels, looks pretty good. Now we could make some more changes to make things a little more consistent and we'll do those before we move on. Those include the following there is no space right now between the hero section and the collection list between this client projects grid itself. There's no space there. So we could add padding on the top we could add 15 pixels and now it's a little more consistent and if we go to preview it looks okay, but we also have this line right here because we added to our hero section. We added 60 in terms of padding 60 pixels of padding on all sides. We might want to consider doing the same to our client projects grid. So holding down shift. let's affect all four sides at once and see what it would look like at 60. Now we have this nice clean line that goes from explorer design work all the way down through, it gives us some more white space and more breathing room and that looks pretty good. And that's it. We built out the portfolio page. It doesn't just feature the navbar and the footer, and it doesn't just feature a hero section which sets up the content on the page, but it features each and every client project we want to highlight for Hayes Valley Interior Design. Where it gets really powerful is when we link each of these to its own page. There are nine projects, so nine different pages and all we're going to have to do is build a single one next time on Star Trek Voyager.


Portfolio page: responsiveness

Configure the portfolio page so that it is responsive across device and screen sizes.

Learn more

Transcript

And now the conclusion. The next three videos in this build process involved wrapping up work on these client pages, the portfolio for Hayes Valley. So before we move on to build out, each of the client project pages, let's work on making our portfolio page responsive. We’ll do this in four sections just like we did on the homepage, we’ll do desktop, tablet, mobile landscape, and mobile portrait, by the end of this lesson, we'll have a responsive design that responds to the width of whatever device were browsing from and before we start a quick note about this the more we build the site the more we take advantage of using classes and symbols were able to use and reuse parts of our design which doesn't just save time but it makes things consistent see this not only in styles on the page but in our layout as we make adjustments, let's start with desktop and everything looks pretty good on the default width here. Everything looks pretty good. Let's check fluidity as we grab the edge and drag to adjust. This looks pretty good, everything scales nicely.


Each of the collection list items. Looks like it's consistent. We're getting that 60 pixels. If we go to our padding here, we're getting that 60 pixels which looks consistent not just in this client projects grid but in our hero section as well and the 60 pixels works fine, there's no adjustment that we really need to make on this so desktop looks good. Let's move on to tablet and immediately we can see on tablet things. Also look pretty good. Our hero section might be a little tall we could decrease that size at 600 pixels. Now we could do 400 on tablet make it a little more reasonable for that limited screen real estate and that 60 pixels still looks fine. We might want to play with that padding a little bit. Let's drop it may be to 30 pixels on tablet. Same thing with our client projects great. Let's take that 60 and make it 30 just so we have some more content that fits on the screen because we have that limited screen real estate and you know what? It might be a little tight. Let's undo and go back to 60. 60 does work. OK here are narrowest. It works fine on our widest. It also works fine tablet looks pretty good. Let's move on to mobile landscape, same issue here that we had with tablet, the hero section might be a little tall for such limited screen real estate. So let's decrease this to 250 maybe a little more than that. Let's go up to about 300, that looks good. Now definitely on mobile landscape that limited screen real estate with a 60 pixel padding. It's a little tight. Let's decrease padding on this one to 30, same thing on the client projects gray just holding down shift and dragging to make adjustments on all four sides at once. The other thing to note is this client projects grid is really tight, even though we've reduced that padding everything's really tight. So let's make some adjustments there. The first thing we can do is adjust or headings on all of these. So we're getting that smaller font size. Here and that actually might work fine, but it's these headings the secondary headings that look a little bit tight. Let's go to our narrowest view so we can work from there and let's drop the size to about 18 pixels, maybe 20 pixels. That looks okay. The fact that the grid is a 3 by 3 or at least a three column layout that might be the culprit here. So let's try removing one of those columns. All our content is just going to reflow, that looks a lot better. Let's click done there, and still a little tight. Let's try it wider. It's a little bit tight, could try decreasing the size of this a little bit, but that's really not the culprit here. It looks like two columns might be too narrow and mobile landscape two columns might just be too much in mobile landscape. Let's see how one column would work. So with our client projects grid selected will edit that grid reduced to one column.


That does add a lot more breathing room in the collection item itself. We can reduce that padding at the bottom, make that zero. It's a little more legible. Let's test that, seems to work a lot better. So we're having that space where having that alignment between these items, the 30 pixels of padding over here and the 30 pixels here. That's a lot more browsable a lot more legible on mobile landscape. Okay, mobile portrait and on mobile portrait, there's not that much to do. It looks pretty good on mobile portrait, even when it gets tighter like this, we could explore reducing or completely eliminating the padding in the section may be adding 30 pixels back to the top but keeping the padding or maybe even 15 pixels, but keeping the padding off from the sides and bottom it gives us a little more breathing room. We no longer have that alignment but that might work. Okay, we could come back to this if we end up wanting to go back to the other design that is of course, we could go back to this client projects grid and add it all back to 30, you know, we could even do 15 on the padding here and do 15 on the padding here. That might be a good compromise. So we still have that consistency from the text up here, the H1 and the H2s the paragraphs. This looks pretty good. Now something to note on tablet. We can see that each of these pieces of content, each of these collection items, the image, the H, the paragraph, they belong together. The spacing between these belongs together, might want to add a little more margin to the bottom here. In fact undo that let's go back to desktop. We might have a little bit of an issue with the H2 being too close to this rich text. So let's make that 10 and that should cascade down to the other views. That looks good. That looks good. We might want to add a little more spacing down below. So with our collection item selected we can add some margin to the bottom just to make each of these clearly nested together so that our image are heading in the paragraph. They look like they belong together could even decrease that margin a little bit on the heading. That looks pretty good. This one just because we have limited real estate. We might want to tighten things up on mobile landscape mobile portrait. Now, it's looking a lot better. The consistency here. That's really a call. We can make later but the hero section might look a little odd with this padding. Let's go back remove this, hold down shift, get rid of it on all sides put the 15 back on the top but that's good for now. And that's it. We made this page responsive and verified. Everything looks great on desktop tablet mobile landscape and mobile portrait. And in the next video, we have the long-awaited nine different pages that will be built from just one.


Portfolio page: client detail page

We'll design a client detail page from scratch based on our CMS...and we'll watch as 8 more client detail pages generate automatically.

Learn more

Transcript

Okay, here it is. The client project page will make one, but what we're really doing here is setting up a design that will make eight more pages automatically. Is it magic? No, is it science? We asked Dr. Gloria Lee Sutherland at Stanford University to know we didn't okay. She wasn't available, fictional will cover this in six parts we’ll create the world's simplest hero section, we’ll create a grid, we’ll work on the left column than the other two columns, then if we have time, spoiler alert, we will we're going to talk about adding additional images for each client project. Let's start with the simple hero section and to access this page. We're going to go from page at the top. We're on portfolio right now. We're going to go down to the CMS collection pages. And when we created this collection long ago client projects template was automatically created and it's blank and it should be we haven't created anything yet. But something to note before we do if we go to item up here we can see we have each page we have each of our collection items different. You click any of them. They're all blank because again, we haven't added anything. So let's add a section, we’ll drag in a section and we'll call it client project hero. And we can set a height like 50 VH 50% of the viewport height and here's where we can link this content here so we can take the content from our CMS collection and link it to each of these pages. We’ll go to element settings, we’ll get the background image from the featured image. Now as we've done before we can go back to the style panel. We can modify this and effect this by creating or by adding a background image example, bg.PNG, that's what shows by default but we can control our background this way. I'm just centering it setting it to cover and that's it. We can go and switch items new home in Palo Alto looks like that Richmond home build looks like that. It's loading the image from each collection item. How do we quickly switch? Let's hold shift option on Mac or shift alt on PC and just hit left and right, we're modifying. We're switching between each of these collection pages. That's the hero section. What about the grid? Well, we can grab a grid from the ad panel.


Get underneath the hero section. Let's do three columns for this design. And let's make this First Column a little bit wider. It's due to FR so that takes up half and each of these take up a quarter of the available width. It is done and we'll grab a div block so we can organize our information in the leftmost column. Let's spin that div block across both rows and we can put some content inside. Let's start with the heading put are heading inside the div block and the heading is essentially going to be the name of the project. This was industrial Loft Renault. We could switch to Richmond home build and every time we switch collection items this information, the picture, The Heading, all the content we're going to put inside it updates the switches between each collection page. So back here. This is home renovation and Berkeley, that's okay for now. Let's add a rich text field. So in this we can add let's actually put that in the correct order we can add to this rich text. Thing that we pull right from our collection so project summary that might go on top that's good. We can add another rich text block. We have two here. We have the project summary and then we have the project details. We'll put that one right underneath. The first one will pull project details looks pretty good. This is our heading and this is our content that shows up underneath of these holding down shift and option or shift alt on PC left and right we're going to switch between each of these projects. Okay, let's work on styling for our heading we can switch to a different font. We can switch to play fair select the correct font weight. In fact, let's delete that class for a moment and let's use our original heading, ‘major heading’, and we got a new combo class darker, and change the color to black or gray. Here's how black looks. That looks pretty good, and the other thing is that our grid, if we go back to our portfolio, we had this consistent look of 60 pixels over here 60 pixels of padding on all sides and do the same thing on our grid in our client projects template. So let's select that grid and do 60 pixels of padding holding down shift and dragging to affect all sides at once. That looks pretty good. Next. We want some more information to the right. In fact, we have all of our content strategy notes here and we know for each of these client project pages. We want the testimonial we want the location the type of project. We want the date. It was completed. We want to put all that information on this page. So how do we get it on this page? Well, we're going to use grid for that you can go and edit so we can add as many rows as we want. Let's add 5 rows we can change this later. Well done. Let's putting in information. So let's grab some text put a text block right here. And this text block can say location and we can copy and paste this text block. It will just paste into the next available cell and we can pull that location we can get that location information from the collection. So that works fine. It's copy and paste again this time. We're going to remove that binding and we'll call this one type copy and paste again. You can get this information from the type of project. David's a type of project here and copy and paste it again. Now we can see the text block shows up underneath this content. That's because it's taking up the next available cell, but we want this div block to span the full height. So let's do that. So this one let's grab it and call it date completed. Copy and paste this one, pull this text from date completed. It looks good, and we could put the design team here. We could list each design team member but this works for now. This is a pretty clean simple type of design. Let's remove those extra rows that we’re not using. One and two, but we will have to adjust this div block. Let's pull that div block back up. So it's only taking up the rows. We need that, looks pretty good. Now something that's happening by default in grid. Each of these is taking up about equal space. If we edit our grid we can see each of these is set to auto we can change that behavior by switching the bottom one to one FR one fraction unit hitting enter that will collapse the rest. So we'll only take up the space that's necessary for each of these text blocks and all that extra space that's defined by this to block everything inside this div block all that extra space is distributed to the bottom row, but what if we want to make a change what if the location and all this information here might look better underneath the heading. Well, we can grab that heading and remove it from the div block put it right in the… It and then span that heading across all three columns that will push everything else down. Now remember before when we set this 22 FR we said this to 1fr we're only estimating, it might make more sense to collapse this to make this something more like 3.5 FR so that all this information is a little bit closer together and we could set a limit on this div block. Let's create a class will call this.


Client project content and let's set a limit. Let's set a width of 60%. That looks pretty good. Maybe a little higher, 70%. Okay, this is looking a lot better. Now when we made that change something else happened with the distribution that vertical distribution here. We had set this third row 21 FR. Let's switch that back to auto and we'll switch the bottom one this new row. Let's switch it to one FR. It's add another row grab the side 1fr that's what we're looking for. So we have that clean consistent. Look that's our grid the primary structure of our great. Let's move on to the left column will do our specifics here. The other thing we're missing and we can add this by grabbing a paragraph. We're missing. Let's put this right in that client project content block. It's actually put it at the bottom. The other thing we're missing is the quote that testimonial we used it on the homepage, but we could also use it here. So let's get our text. Let's move this up here.


Get our text from the testimonial. Okay, and for the styling we might want something a little different here. We could say testimonial not preview. Let's use testimonial highlight and we can do a few things here. Let's see if we have thicker wait italics and maybe some more space some margin on the top. That looks pretty good. Okay, our left column is made up of the major heading which is actually spanning all three columns. We have the rich text blocks for our content. Those are in client project content. And this is our testimonial highlight again. What we've done here is set client project content to 70% width. We change that number that left column the content in that left column changes in terms of width. That looks pretty good for now. Let's move on to that second column and what we want to do in this column, we have three different text blocks here. We have three different text blocks in the right column. Let's create a style so we can call this class content label and we can do some specific styling here. For instance. It might make sense for these to be all caps so we can choose all caps and we can apply this content label. We can apply this class to each of these so we can make changes to all of them at once and let's decrease the size slightly. Let's increase the letter spacing and let's choose a little bit of a lighter color.


Looks pretty good, Berkeley whole home, Renault these look. Okay, as is we might want to leave those now because we're using FRS, we're using fraction units for each of the columns. We're losing the ability to automatically adjust column size based on the content inside each of these so we could edit our grid and 1fr here instead we can just do auto and same with this one. Let's set this one to Auto and now we're only using the content. We're only using the space inside each of these. This might be a preferred method we could if we wanted and said just put this one back to 1fr it's going to keep the content spaced a little more evenly the goal is to make sure these labels these content labels and each of the pieces of content. So location and Berkeley and type of project in whole home Renault that these actually link up one thing to note. The spacing on these is a little off. That's okay, but it's something to note Berkeley and location don't have the same kind of baseline so we might want to add padding to the top to make an adjustment. We can eyeball that that looks pretty good. That's the middle column. What about the rightmost column? Well, we could leave this exactly as is any adjustments Beyond 1fr just going to affect the width of this relative to other parts of our design. Let's try .75 FR and let's switch shift option and left or right arrow again on PC. This would be shift, alt left or right arrow and these seem to work fine. If we had a long project name. It would just knock the content down. In fact, let's try that out Cupertino Home build. Let's go to the CMS client projects Cupertino Home build. Let's create a type of project that is new build for Cupertino. Home build project things nonsense. Of course, let's save this and see what it looks like on the page. It's just knocking the rest of the content down to the next line. It actually looks fine with a long label. Let's go back to the CMS and change that before we forget that we changed it switch to new build save that and as we'd expect the content adjusted automatically updates. We don't have to manually update this every time we make a change in the CMS, but for our right column, let's make a change to the text block. Let's call this client. Project detail and we might want to add some padding. Give us a little more space with these we might want to change the color could be black here for a little bit more detail. Just applying this class to each of them. That looks pretty good. Okay, but that's the rightmost column what about additional project images additional client images Rebecca sent us a ton of content including other images for each of these projects. What if we want to use those on these client detail Pages what we can go over to our CMS because this requires adding a new field, let's go to our settings. And right now we have a featured image section. Let's add a new field. This is going to be a multi-image field because we want to be able to upload multiple images to one field and we'll call this additional project images.


We'll save and let's drag it. So it's right underneath the other featured image. So we have the featured image over here. Then under that we have the additional project images. Let's save our collection. Now if we just move forward from here, nothing will happen for two reasons one. We didn't add any additional images to any of these client projects, but to we haven't built it into our client detail page. We're going to do both of those right now first. Let's add some of the content. So if we go to our Cupertino Home build and we have this additional project images right here, we can select just off screen from what's being captured just selecting a bunch of Cupertino images from this build and we're just going to let go and instantly they get uploaded to our new field just had seven images added to our field. Let's save and so we can design with this. Let's go to the Cupertino view. Let's switch over to Cupertino Home build and we can add a collection list a collection list as we've used before well. Pull information for each of our images. So let's drag in a collection list. The source is going to be additional project images. And that's it. We can see we have one entry for each client image in a collection list. Like this will see a new row a new entry for each image. Now. Let's use a div block. We're going to use a div block when we place here. In the reason we're using a div block inside each collection item is so we can have control over how our image is displayed. So this div block is going to be additional client image will set its height to maybe 400 pixels looks pretty good and we'll see these additional client images. They're showing up in each of our collection items. So with additional client image selected, let's grab that background. Let's grab that background image from the additional project images and that's it. We're seeing all of the project images right here. Let's configure them still have the additional client image class selected. Let's add a background. Let's set a to cover and center that's looking pretty good. We might want to do more than just 400 pixels. Here we could do. You something like 700 pixels so someone can scroll down and see each of these entries. Another thing. We might want on the collection item itself in between each collection item. We could add some margin 30 pixels on the bottom. So each of these is spaced out or if we want the margin if we want the margin to match what we see on the sides we could just do 15 pixels that works as well 15 pixel space in between all of these now that's Cupertino. What about everything else? Well, let's go back to our CMS and Industrial Loft Renault. This works fine. This is our Emeryville project. We're going to reach off screen grab some images from the Emeryville project and drag those in those upload just the same. So once we upload images for each of these client projects, they'll show up automatically on each page. So forever evil, let's hit save and close out of this and let's switch from Cupertino to that industrial Loft Renault in Emeryville. Same thing here if we scroll down we can see these images showed up. Now. There are only four. There are only four images for our project in Emeryville for industrial Loft right now, and that's okay because there were only four Images we uploaded it will show a collection item an additional collection item will show up for every picture that you add you won't see blank spaces. If you've only added to pictures you won't see anything cut off if you've added 22 pictures, so that's industrial Loft run. Oh that's Cupertino will upload the other images off camera. So you don't have to sit through each of these drag-and-drop sequences, but it'll go pretty quickly. The last thing we might want to do before we move on is ADD our nav bar and our footer that's going to go very quickly, but that's it in the time it took us to create one page of content. Didn't really have to type much and eight other pages were created automatically. This means Rebecca and her team can add or modify client projects at any time and pages will be automatically created will show up on the Hayes Valley portfolio page and when you click them, let's actually show that off real quick if we go back to portfolio and go to preview mode. Let's choose Cupertino home-built, if we click that it'll take you right to that client detail page with all those beautiful images shown in line that specific page for the project. They worked on up next. We'll make these Pages responsive, same deal with that we’ll only design once and the other pages will follow soon.


Portfolio page: client detail page responsiveness

We'll take our client detail page and optimize it for desktop, tablet, mobile landscape, and mobile portrait.

Learn more

Transcript

So we built out most of our client projects. These are pages automatically generated by the CMS based on the content. We put inside when Rebecca or anyone from her team goes in if they add another client project it will automatically be added to their main portfolio page and a client project page will automatically be created this brings so much value to the Hayes Valley website. Think about what we had before a really limited sight a great main photo, but it was hard to communicate trust and authority and great design without featuring great design. This elevates their brand something really important to any brand, but especially to a fictional interior design firm. At the end of this video will have a fully responsive layout that works on all kinds of devices. So let's clean things up and get everything optimized on desktop tablet mobile landscape and mobile portrait desktop on desktop things. Look pretty good. We could test fluidity here and when we get more narrow when our viewport narrows a bit things, and to reflow. Pretty okay. Let's scroll down and take a look at these images. They are, of course, div blocks with additional client image that class applied. They're all 700 and they're covering things look pretty good on desktop before we move on. Let's of course add two elements will go to the ad panel symbols. Let's add our nav bar to the top right in the body. That looks pretty good. And of course at the bottom, let's add our footer. Go back to symbols grab the footer and put it at the bottom of the page if we scroll up our nav bar looks good. It's fixed. Its position is fixed if we scroll to the bottom we can see the footer so that's desktop. Let's move on to tablet.


On tablet things might be a little more narrow here. So the aspect ratio might be corrected by setting a different height 50 VH. Like we said before that's 50% of the viewport height. So if we're on a tablet device in portrait orientation, it will take up 50% of the top of that tablet device of that view port on the browser 50 VH might be a little much we could set a more explicit value here like 400 pixels or even a little bit lower maybe 350 pixels that looks better on tablet and as we test responsiveness, this still looks okay, but we might want to grab that client project content and instead of 70% Let's try 90% Give it a little more breathing room. Just pressing the Escape key will deselect anything that's currently selected. So let's grab the edge. That looks pretty good. We still have that 60 pixels of padding on all four sides. That looks okay, but these additional client images. That's a little much maybe 350 on those as well. That looks a lot better and when we get narrow everything reflows just fine.


Okay, that's tablet. Let's move on to mobile landscape. Now. Here's where things start to get a little bit more crowded especially in this more narrow view here. There are a couple things we can do here. One of them is just magical it's based on grid autoflow. So let's go and with our client project grid selected decrease our padding just like we did on the other page. We're going to decrease it to 30 pixels when in mobile landscape that helps a little bit but in more narrow views were still getting a lot of crowding. So how do we fix that? Pretty simple we're going to go to edit the grid and instead of using three columns. We're only going to need two might look a little weird when we do this, but that's okay. We're going to hit done and then instead of the major heading taking up three columns. Let's have it only take up to and same with this we have of course our client project content. Let's have that instead of taking up one take up two columns and one row, so we're just having two columns and one row that should push everything else down and it does, that's it. So if we go back to tablet and we take a look everything looks fine because we have this design that works fine. When we have the extra real estate on mobile landscape things collapse just as you'd expect that looks pretty good. Now the spacing here is a little odd we could go to edit our grid instead of 3.5 and auto let's try what auto would do to this. That looks okay. Getting about half and half here if we hit done that looks pretty clean. We could even narrow this a little bit. So instead of auto we could say this is one FR and this one over here is to FR. That would narrow it a little bit more and that might be a little preferable compared to the other. And also when we're stacking it like this. It might be a little tight actually the space up here that 30 pixels up here does look like that down here. Let's leave that for now. But the additional client images at 350 don't really match this at 250. Let's drop these two 250, enter. That looks pretty good. So mobile landscape. How's that looking when we collapse? It's looking pretty good. Let's do mobile portrait.


Okay, getting a little tighter here. Let's check how we did this back in the portfolio page. We had removed that padding all together. We'd remove the padding on the sides. So we might be able to pull off something like that in the client projects template. It could remove all that padding right here in that grid. Let's add some back to the top maybe 15 pixels. And to the bottom maybe 15 pixels there, too. Maybe we can make that both 30. Holding down option or alt on PC to affect both sides at once. This is looking a little bit better. There's some breathing room here, a couple things to note. We are still setting on this client project content block. We're still setting 90% has of tablet so we could go back here on mobile landscape and set that to one hundred percent that way that'll carry down that'll cascade down to mobile portrait looks pretty good. Okay. So the spacing here on this major heading this might affect a lot of the major headings looks a little intense with 20 pixels. So let's go into our grid see how this is sized. It’s automatically sized, is taking into account those 20 pixels. That might be okay, but on these headings since we're using the darker combo class, let's try 0 pixels. That looks a little bit better. I will cascade down to mobile portrait and we're getting a little more crowding. We're getting crowding down in this part of the grid so we could go in here and instead of doing one FR for the left column and two FR for the right column. You could just change this 122 FR or change this 121 fr2 little more half and half that looks a lot better. What about when it gets more narrow, that's fine. It's a little tight. It's a little bit tight but that's going to happen. Anyway, we do it it'll just wrap the text to the next line you could decrease the font size, but this is a really really narrow display. It's very likely someone would be looking at this website on 240 pixels and if they were still legible information is still clear. It's just a little bit crowded but this works for mobile portrait. We might want to take the client project hero set its height to 200. Let's go down. What did we have before? Let's reference in that portfolio page. What do we have before for this size? Well, that's actually 300 that works there. Let's go to our client projects page. Maybe 200 would be fine here. On these let's do the same thing 200 pixels. If we test responsiveness things look great, but that's it. For now. We optimize this design on desktop tablet mobile landscape mobile portrait. And that's the end of our work for the portfolio in terms of our user story. We pretty conclusively check the box next to showing great interior design work. We don't just show it on the homepage. We have an entire portfolio section for Hayes Valley Interior Design showcases that great interior design work all we have after this is one page about their process. We have their team section, which we’ll go fairly quickly and the contact page.


Process page

In this lesson, we'll break down each of the four steps clients go through when they work with Hayes Valley Interior Design.

Learn more

Transcript

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.


Process page: responsiveness

The process page will be tested and optimized on desktop, tablet, mobile landscape, and mobile portrait.

Learn more

Transcript

Okay process page done. Let's move quickly and efficiently to make sure everything's responsive on desktop tablet, mobile landscape, mobile portrait, and TI-83 Plus. Desktop, first things first the step sections, each of these that has the step, step 1, the heading, that divider, these look pretty good as is but what happens when we go narrow, let's grab the edge of our viewport and bring it inside. It's a little bit narrow. This text is a little scrunched. So there's a nice concession we can make or a nice compromise we can make between not going to wide and then also not going to narrow and that's setting a maximum. So with step section container selected, let's remove that 80% we said before let's hit reset and instead set a maximum width. Let's say 500 pixels and with 500 pixels that means this is going to take up this div block, the step section container will take 100% of its available width up until it hits 500 pixels. So notice how when it hits 500 it doesn't go any wider but if it's narrower than 500, it'll take up a hundred percent in that text just reflows fluidly responds to the available space inside. So that looks a lot better. What about the rest of the page? This looks good up here, the hero section looks great. Let's go down to the bottom each of these sections reflows nicely. And the size of each section is determined. The height of each section is determined by the content inside. Right now we're not seeing any reflowing because the text is just re shifting and shifting as we resize, that's desktop. What about tablets go over to tablet and here we can see it's getting a little more narrow. Our hero section looks okay, these sections, they might work and tablet we might want to leave this as is let's try these actually looks okay in tablet. Something to note, this doesn't necessarily pertain to tablet or desktop or any one specific thing. But if we go back here we had this this rhythm before we go to the home section where there's this 15 pixel gap between each piece between each column inside the grid. We had 15 pixels between the hero section in the next section. We have that 15 pixel gap on the side too. We used padding on the body all pages tag. So let's try that out on our process page starting with our process. Let's add 15 pixels at the bottom, for each of these steps sections. If we just change one of these it'll be 15 pixels. If we just change one of them, it only affects that one that's because it's a step section class, but it has the consultation combo class applied. So instead of doing that lets undo, instead of doing that. You can just go here and select step section. And here is where we can add 15 pixels, gives us some visual consistency between the edge of the view port, that 15 pixels right here that gap, and then in between the sections that 15 pixels that looks pretty good. That'll pass down to tablet now tablets done. Let's move onto mobile landscape and in mobile landscape, it's getting a little too narrow. So we don't really want this two-column layout here in mobile landscape, that's okay. We can work on that and one other way to do this. We could remove the combo class temporarily. Let’s remove the consultation combo class. So we're just looking at step section here and we could make step section starting in mobile landscape, could make step section just one column, remove that other column. Let’s hit done here and it's just a one column section now, step section container that 500 pixels we can get rid of that. We can just say none. So it's not limited by that space. The other thing we might want to do with this step section. Just this base class applied might want to decrease that padding. We might want to make it a little more consistent with the above hero section. Let's make it 30 pixels on all sides, that looks good. And that's affecting all of these too, keep in mind step two, step four, these are manually positioned. We did that earlier to get everything on the right side. We can just move this into the left column. It will take up a hundred percent, we can move this to the left column, take up hundred percent, but when we're ready we can grab step section and apply that class again if we go to mobile portrait, we're getting a little preview here. We can go into mobile portrait, we’ll want to decrease this to 15 pixels. Just so it's consistent with this section before we add it back. Let's go back to mobile landscape. This looks pretty good. Let's put our consultation combo class back on. Okay. This one is a little strong. In other words. We're not able to read really the step two here, letter of agreement is obscured a little bit by that darker section. It's a little harder to read. This is definitely hard if not impossible to read mainly because it's lorem ipsum but also because of the contrast, that's okay. We have combo classes applied to each of these so starting with step section letter we can put an overlay. Let's hit the add button here and you just choose a color overlay and we can do something lighter like white and just increase that opacity until looks about right that looks good. We could do a darker variant of this but the lighter variant works okay. Same thing with this one. Let's add an overlay. We're just adding an overlay on each of these combo classes. So let's do the same thing here choose a white color and it can be a little bit lighter. We're just eyeballing it here based on what's inside each of these images. Same thing with this one step section. Let's add an overlay. Let's make the color white and let's drop the opacity. Let's increase the opacity. Looking a lot better. So, an alternative to this is we could just kill the images. We could remove the blueprint we could remove each of these, might be a little less visually distracting. We are losing something on the mobile view then but it might be a little less distracting to do this. Let's undo to put those images back but we could play around with this and see what we decide over time. We could test it out. See what the client thinks see what we feel over time. Right now let's leave this as is. That's mobile landscape mobile portrait. Okay, mobile portrait kind of took care of itself. Basically, it's inheriting those styles. We just did a mobile landscape and is taking into account the other changes we've made to mobile portrait before earlier in the project we’re using a lot of those same base classes. So mobile portrait might be fine as is. Let's Reflow. Let's check out each section. One thing to note. The contrast is a little bit low on this image and mobile portrait. Let's check mobile landscape again.


Starting on mobile landscape is where it seems to be a little low. We could grab that linear gradient and move it up move it out, like this or we could just take that second stop and increase its opacity a little bit. So you can see that darker color just for some more contrast against the white text bubble portrait that looks a lot better. That's it, a responsive layout that communicates to users what the process is like when they're working with Hayes Valley Interior Design the page works on desktop, on tablet mobile landscape, and mobile portrait were using mind reading by preemptively addressing concerns users might have people visiting the site who are thinking about hiring an interior designer and we're increasing that level of confidence by clearly spelling out the process now moving forward. We're going to jump into our last big section. This is another CMS driven part of our site and that we’ll be building the design team pages using science.


Team page

The team behind Hayes Valley won't just get headshots; they'll get automatically-generated, CMS-driven links to their bio pages.

Learn more

Transcript

The design team, the people doing the work at Hayes Valley Interior Design. Not only is it important to give people an idea of who they might be working with but these designers bring a ton of reputability to the Hayes Valley brand. People might be searching for Rebecca or her colleagues online, and seeing that team learning about the people behind the work, that can help users feel more confident in picking this particular firm. We’ll cover this part similarly to how we build out the portfolio. We’ll use a lot of the same techniques to save us a ton of time. We'll do the hero section. Then we'll work on the CMS, we’ll add some content, we’ll import the rest, then magic. Link everything up so the team members generate themselves. Hey Siri, add a reminder to write a short story about an AI driven design team that automatically. Okay we'll do our hero section first. We're on the home page right now. So let's go to the pages panel and add a new page. This will be ‘our design team’, enter, and this is where we can place our hero section. We’ll drag in a section we’ll use an existing class. We have called it hero section again, the more we do this the more we're saving time because we've created a lot of these classes before. For hero section we can add portfolio and then just duplicate that class, call it ‘team’ and instead of a photo and a gradient, let's do something a little bit different here. We're still using the same height, the same basic size styling, the same layout, but let's delete all of these instead of using an image or a gradient. Let's try a solid color. For now let's try black, but we can change this and make it more interesting and just a moment. Before we continue from our hero section, before we add the elements, let's add two symbols. Of course our nav bar, which goes right in the body on the top, and then let's add our second symbol, we’ll go down and grab the footer that will go underneath everything else. Okay now for our hero section, we have two pieces of content. Let's check our content strategy notes. We have our heading or H1. This is meet the design team. Let's drag in a heading. This is an H1. It says ‘meet the design team’. Maybe meet our design team and we'll use a class we've already created, major heading, and then we have a combo class which is darker. That's not correct. We have a combo class which is secondary, and then we'll add a paragraph underneath that. We’ll put the paragraph right underneath the heading and it will say whatever we paste in. Command V or Control V on PC, That's it. Now remember on each of the other sections the paragraph here. We set some constraints by applying a specific paragraph style. It was hero paragraph. That looks pretty good. Okay. So this looks maybe a little intense with all this black. This color is quite heavy. We could try some other colors we could pull that, that's okay. We could also use our eye dropper tool and pull something else from their logo. Maybe this purple color. We'll go with that for right now, but we might want to change it a little bit later and maybe when we get design notes from Rebecca. That leads us from the hero section to the CMS. Now, we want to create a team members collection. So to do that we'll go and create another collection. We’ll call this one team members and we can add fields for each of these. We want name. We want title. We already have name, so let's add a field for title. This can also be plain text, call it ‘title’. Let's save that field and another one. We also want team member since, cancel that, got to select the field first. We want a plain text ‘team member since’, say field, let's create bio for the biography. It helps to have rich text, that way later if we want to include links inside that biography, if you want to include photos in their longer biography we can do that at another time. So let's add rich text, we’ll call it bio. We can hit enter this time, add field. This is the final field and this is going to be an image field. This will be for the head shot. The main image that, the main image, the main image, the photo of the particular person. Let's do image, and that's it. That's our basic structure for the CMS. Let's hit create collection and move on to the content. To add content we're just going to press new team member and we’ll do Rebecca's name first. ‘Rebecca Tilden’, president team member since 2009, and for her biography, let's reference that spreadsheet of information. This is another spreadsheet. We're just switching over to. This is a spreadsheet in Google Sheets that we've organized based on the information Rebecca gave us. This is each person's name, their title team member, since their biography is has been already formatted in HTML, but really just put text here if we wanted. Let's copy the bio to the clipboard, move back over and paste, finally we have this image field. This is where we're going to choose the specific headshot, the specific photo of the team member and go into team images and we'll pick Rebecca Tilden and that's it. We can go in and press create but that's adding our first piece of content. The rest we’re just going to import and if we go over to our CSV, or if we go over to a spreadsheet now and try to save a CSV, Rebecca will be exported along with the rest. We don't want to do that. The reason is ,we've already added Rebecca. So in this we can delete the row and export the CSV this way we'll go to download as comma-separated values and once we've done that we can import it right into the CMS and go up to import and drag the CSV dragging, it from off screen here right inside. This is the header row. That's correct. So let's hit continue and we'll make sure to link each of these up. We’ll map to the existing field we created when we used the sample, when we used Rebecca, her name. Then we'll go over to map to existing field for the second one. This is obviously title, team member since obviously map to team member since, biography will map to that rich text field we created for bio, and image will map the image here to the correct field, and we can preview this displaying each item right here. We can preview and see what each person's name. Here's what Callie looks like. Here's what Adina looks like and as we scroll through, as we click through each of these examples, we're getting a preview of the content we're importing. Let's press import five team members and that's it. Sit close, and we have all 6 members all 6 members we want to feature listed in the CMS, right inside our team members collection and that moves us to magic. This is the last portion. This is where we take all that information. We brought in and build out our design inside the page. So our design team were here right now. Let's first reference before we build let's reference how we did portfolio. So with portfolio we had this client projects grid, we could call this default grid. It's not very descriptive but it's a little less specific so we can use it on multiple pages. Then when we pull in our design team, when we pull in that collection list, we can just drag it in between the hero section in the footer, we’ll let go there and we'll link it right up to team members instantly we can see all our team members are listed. There's an entry for each team member that we imported. Okay. So let's close out of this we’ll open up that collection list wrapper so we can access the collection list itself. Let's choose display grid or we can just go in and use default grid.


When we applied that class, we're getting all that styling we did on the other grid inside of portfolio, but it's applying that same styling to this grid for team members. So let's build it out that way. Let's add an image for each person just to control the size. Let's use a div block again and this div block we can say is ‘team member image’ and we'll set a background, we’ll add a background image to this. Choose image. That's not going to work. In fact, we want to pull our background image from element settings instead get background image from image. That's each person, their tiled a little oddly right now. That's all right, we could go in and since we already added that example bg.PNG, since we just hit add image before you can go in and set it to cover. Let's set this one to center now. It's everyone's teeth and nose. Let's adjust our design, go in and add a height maybe, 350 pixels. It looks pretty good and underneath we're going to want to put their name.


This will be H2s so we can drag into any one of these, we can drag a heading. Now, be careful here, because if we just let go above team member image that heading is going to be inside that team member image. We want it inside the collection item, but we want it underneath the team member image. So we'll just move that right up. So let's select any of these make it an H2. And since we're in collection items making a change to one thing inside one collection item affects all the collection items. So these have all been turned to H2s. Let's take heading two, go in and apply that heading style. We have that secondary heading style. That looks pretty good. We did create a combo class which was less space, but we don't need to use that. Let's remove that combo class just undo and with any of these headings selected we can go in press the cog here and get that text we can get the text from the name, the name field. So we see Thomas we see Adina, we see each person's name right underneath their photograph. The other thing we want to use on this page is the text block, we want to pull in text to show with their title, right underneath their name. We’ll drag a text field in, we’ll get the text from their title so we can see it says Adina Katal and it's Junior designer. Let's grab that heading and see what happens if we use less space, we created that combo class before. Nope, not great. In fact, we might want to create a combo class which says ‘less bottom margin’. There are many more efficient ways to name classes here. We're moving fairly rapidly and we can clean up naming a little bit later. Let's grab margin bottom and set that to zero. That looks okay. We might want 5 pixels, somewhere in between, that looks pretty good. Now for this text block, there are different types of styles we could use we could build on something we've used before. So if we go to portfolio, we had this style right here this rich text block this style had already been changed to 14 so we could apply rich text block to that but we might want control over exactly how each of these is listed. So it might make sense to create a new class for this. Let's call it ‘team member title’ and we can control a few things here. Maybe all caps, little bit smaller, and some letter spacing. We could go bolder. Decrease that size a little more. That's not at all accessible. In fact these changes easily undone holding down option and removing those changes so we can get ourselves back to a good starting point. Might actually want to go with Playfair for this one as well.


Now what if we want when we click on each of these team members, to go to the specific team member page? Well, that's exactly what we want. So let's build that functionality and to do that, we'll use a link block, a link block is just a div lock that links somewhere. We'll put that right inside the collection item, and from there, we'll drag in team member image, we can put that inside link block again. If we grab anything we can just pull it to the right that will Nest the content inside. Now the styling is changed on all of these and that's for a specific reason. We never told team member image to be a particular width and it's basing that width on other content inside. So Adina's name here. That's exactly as wide as her photograph is being adjusted. Same with Thomas McCormick. Each div block here is being sized based on these secondary headings because they're the widest piece of content inside. So we could override this if we go back to our portfolio section we can go in and see how we styled these link blocks. If we click that, turns out we have a class called link block. Let's try using that on our design team. Go in, we’ll select the link block, let’s drill down into our default grid, select our link block and apply that class of link block.


That's better. Okay. So because we made that change before inside the other collection list. It's automatically removed the underlying, it's removed that blue text. It looks a lot better here. Okay, so our link block, where will it take you? Let's press the cog and we'll pull that, we’ll pull that link from the current team member. That means upon clicking Thomas McCormick, it'll take you to Thomas McCormick's page, same with Adina, same with Callie, same with everyone else. Now. How do we want to sort this information with our collection item or default grid right here selected. This is our collection list, we’ll go to element settings and we'll choose a sort order. We can sort not by title, not by name, not by any of these dates or times. We could do it with team members sins and Z to A, if we do that and hit save, it'll show us because we're using a text field, the newest team members first, they joined later. So that number is higher. Z to A is the same thing as nine down to zero. It's reverse numerical order. So if we want a numerical order we could just switch this a A to Z. This will show the earliest years, Rebecca and her team members that started in 2009 first, and then as team members are added this will sort them in chronological order based on when they joined Hayes Valley Interior Design. Now, each of these team members links to their specific page if we go to preview and click Rebecca Tilden, that's Rebecca's page and we have a page that was automatically generated for each team member. If we switch back to our design team, we can see our hero section. We can see each team member and that's it. We made our hero section. We created a team members collection. We added content we imported the rest and we used magic to link everything up and what we'll do next is make our design responsive and functional on all kinds of devices. Then we'll take that content. We just added each of these team members and build out a design that will feature a full biography on everyone's page.


Team page: responsiveness

We'll take everything we designed in the team page and make it work across all device types.

Learn more

Transcript

Responsiveness, is it absolutely necessary? No, but it’s a pretty good idea. Let’s take this team members page and make it responsive not just on desktop, tablet, mobile landscape, and mobile portrait. If we scroll up, the hero section does look a little bit plain, it’s a lot of open space. There’s an alternative we could try here while we’re testing our desktop but before we build any alternatives and try that out, let’s see how this is responsive across different weights.


So these are moving in just fine. We might want to make a change. It could help to take this default grid we used before, and instead of using it we could create a duplicate. Let’s duplicate that and name it ‘team member grid’. The reason why this might be preferable is because we can go into the grid and instead of just having three columns we could do four. Let’s see what that looks like. That is a little less intimidating, on terms of the size of the photos of everyone’s head. If it gets more narrow, it looks okay, we might want to since we changed this, to take that team member image and decrease it size, maybe it’s height to 300. So as we get more narrow things aren’t as crushed. Longer names, like Thomas McCormick, those knock down to the next line, that’s okay. It might be worth decreasing the size a little bit but that’s only on really narrow devices and even then it pushes the rest of the content down inside the grid. This looks pretty good. But the hero section. 


There is an alternative here. Let’s grab a new section, put it in above the hero section but beneath the nav bar, and let’s try setting a different height. Let’s start with 300 pixels and let’s try moving ‘meet our design team’… let’s try moving hero power graph inside. Obviously we can’t see anything right now, a lot of it is hidden beneath this. So let’s add padding on all sides. Let’s use 60, we’ve gotten use to doing this, and because this is a fixed nav bar we’ll add a little more space and more padding on the top. Now, the reason this isn’t pushing other content down on the rest of the page is because we have a fixed height. We put that in just a moment ago, just as an example. We can remove that and now the content inside will drive the size. But in order to see that, let’s delete this class secondary. It’s a major heading, the colors okay we could choose darker, that looks a little better. But this section, let’s name it ‘plain hero section’. Now, how do we center this content? Because if we hit ‘center’ in terms of align, the text, that’ll work for the major heading because that major heading is taking up the full width inside. But remember, on here power graph, we set a maximum width of 400. One way to combat that for plain hero section, we could just use flex box. We click flex, that lets us stack our content vertically and we can just align the content to the center. That means if we put additional content underneath, like a button, that will stay centered. Delete that button because we don’t need it. This is not too bad, but with the center this feels a little bit tight. If we duplicate this, or even better, let’s create a combo-class. Let’s call it ‘wider’ and, instead of a max-width of 400 let’s try, 550. That looks better. Now we have this hero section for team, we’re not using it, let’s delete it. This is looking a little bit more acceptable. Let’s hit preview, that looks okay. Maybe these images aren’t working. These are all square images so the team member image may not be appropriate. The reason is the variability, while works with certain images, might not be so great for headshots. So as an alternative let’s try out an image. We’ll drag an image right inside the collection item and we’ll get that image, we’ll grab that image, from the image field. Keep things square. That will size things based on the space it has available. How is that different from a div block? Well the div block had a set height of 300 pixels. That means it is 300 pixels tall even if the image gets squished. But if you look at the images above it, even on widescreens, things aren’t clipped on the top and bottom because it is not set to cover. The image, each square image, keeps its aspect ratio. This only works if each image has the same aspect ratio. For instance, if one of these images were significantly wider, 2000 pixels by 1000 pixels, all the other content would be pulled up against it. It only works, an image only works in situations like this if it has the same aspect ratio as all the other images. In this case that works, so let’s delete team member image so now we have an image field that works great. Things scale really smoothly, regardless of the width. Is there too much whitespace on top? Maybe, we could add a little more up here, 2150. We can keep playing with this, eyeball it. Something to note is, at the end of each of these collection items, there’s not that much space between it and the item underneath. We could just grab a team member title really easily and add some lower margin, maybe 30 pixels or 60 pixels of lower margin to get some whitespace there. That looks a lot better and that’s desktop.


Let’s move on to tablet. We are getting a little crowded in our team member grid so with that selected let’s edit the grid and remove maybe two of the columns. So now we have each image like this, that looks a lot better. Let’s hit done and the space up here, we might want to decrease from 150 to maybe 90, and then the bottom, maybe down to 30, and then the top, maybe down to 60. Just compacting things when we have a little less screen real estate. This looks a lot better on tablet. All these areas look pretty good. Let’s move on to mobile landscape. Now, Rebecca’s image and everyone’s image is a little large here, so with any of these images selected, we could put a constraint on it. Or we could just do two across. Let’s start by doing two across. Team member grid, let’s edit the grid, add another column. Again, since we duplicated this class earlier and created team member grid, we’re okay making changes. This will not affect the other grid we created before in the portfolio page. So that might have solved the problem, it looks pretty good, maybe compact this a little  bit by grabbing team member title. We did 60 on the bottom four, let’s do 30 on the bottom now. Okay, this is looking a lot better. Maybe a little less space on the top, let’s try 30. This looks a lot better on mobile landscape. Let’s test fluidity. These things fluidly respond like we expect them too. This looks pretty good.


Let’s move onto mobile portrait. Something immediately obvious is this compactness. It’s really tight because we have this padding of 60 on each side, it’s really tight. We had that over here too, and we might want to make the change on mobile landscape so it’ll affect mobile landscape and mobile portrait. So back to mobile landscape let’s decrease the padding on the sides to… nothing. Mobile portrait. Another thing to note is the limited space between ‘meet our design team’ and the hero paragraph. That might actually affect mobile landscape, maybe tablet, nope just mobile landscape. So this is being used, not just on this page this major heading darker, we used it on one other page. We used that on this client projects template. We used that for the major heading. This is inside a grid, and that grid automatically provided a gap, it provided space in-between each of the roads and that space is okay. Why we removed that before in Cupertino homebuilt, for instance, we add 10 pixels. Increase the gap a little dramatically. That doesn’t look too bad, but on mobile portrait, that’s a lot of space. It’s not necessarily grouping this heading with the content underneath. So let’s undo that and make the change a little more locally. Make that change back into ‘our design team’. Make that a mobile landscape. So, major heading, we have major heading darker. We can add another combo-class, but things are getting a little complicated at that level. We can just hit duplicate and name it ‘darker2’. Again, there are better ways to organize classes like this, we can always go back and clean up a little bit later. As long as we know what we’re doing, as long as we can keep track of these classnames things are going to be okay. Let’s add 10 pixels to the bottom and then check mobile portrait. The thing we want to do on mobile portrait is see what it looks like on the narrowest possible screen, what happens on mobile portrait when we go into 240 pixels. Things are getting really scrunched. So, on mobile portrait, let’s go to team member grid, let’s select this, and remove, let’s right click this time, delete column because there’s only one person per column. And, for this image, we can do this on each of these. But for mobile portrait lets add a class of ‘team member image’. Now, team member image is no longer in use. If we select that we are inheriting a lot of those properties we did before. So let’s undo and real quick we’ll go over to the style panel and hit clean-up. It’ll detect any unused styles, like team member image and delete them. We can start fresh back in our style panel. The image selected, let’s create a new ‘team member image’, and set a maximum width of maybe 50%. Not too bad. And for this collection item, on the collection item itself, we can create a class, and call it ‘team member collection’ item. For this collection item, we can set it to flex, vertically stack the content, and center it. 


Now, something to note, this is noticeable if we look at our hierarchy here, the link block doesn’t actually contain the team member image. This is a problem. Let’s go back and make sure we’re moving it. This move can happen on anything, but we are doing it on desktop because we want to now go back and check because we noticed that the team member image was outside of the link block. We want to check on each device again to make sure that placing it properly doesn’t interfere with any of our design choices over the last few minutes. So, we now have team member image, meaning anywhere, if we click anywhere within the bounds of this element, it’ll take us to Rebecca’s page. Let’s check tablet, that looks okay. Looks good. Let’s check mobile landscape. Looks good. Portrait, that’s okay. We want to center this so let’s choose flex vertical center. Okay that’s looking better. Now, it’s respecting, it’s respecting the 50% max, we can decrease this even more, make that really tiny. That’s impractical, so let’s pull it back to something a little more realistic. 40% might be good on mobile portrait. It’s a little tight. 50% might be the magic number here. Looks good even if we adjust the width of our device. That’s our work on responsiveness. You could leave this page as-is and it still provides a ton of value, a glimpse of who makes up the team Hayes Valley. But, we want to go further. So, we’ll take this content and generate a page for each team member.


Team page: team member detail page

We'll build a full bio page for each and every team member at Hayes Valley Interior Design.

Learn more

Transcript

So we’re making excellent progress. We’ve built out the team member page, we called it ‘our design team’ and we’re about to use the CMS to drive the design for pages on each team member. We’ll design one page, but it’ll create 5 more. How many is that total? Six. We’ll do this in a few sections, three sections, we’ll do the main biography, we’ll do something special for their recent work. This is next level, it’s a more advanced technique, but it’s really powerful. Then we’ll do colleagues, we’ll link from one team member to other team members.


Let’s start with the main biography, and to do that we’ll need to go to our collection page. This is the CMS collection page. When we created the collection, the team members template was automatically created. Click that and this is blank. We could start by adding our symbols. We’re getting in the habit of adding a nav bar to every page, and we’re getting into the habit of adding a footer to every page. Then we’ll add our content. So a few things we want in terms of our content strategy notes. We know for each team member bio page we want the image, we want their name, we want their title, we want the biography text, the text that belongs in the biography. We want their recent work, we just mentioned this a second ago, that’s going to be the next step. Then we want my colleagues. From this page, that’s a huge cursor, we want to show each of their colleagues so they can quickly switch between different team members. So let’s do all of those. Let’s start by adding that image but before we do, let’s add a section. We’ll put this in between the nav bar and the footer and we’ll give it a height for right now, let’s set 600 pixels. We’ll move that most likely a little bit later. Then add some padding, lets do 60 pixels on all sides. That’s about right. We’ll add an image. Try to get an image. We’ll get that image from the team members. So keep in mind right now it’s a huge image. We could add a class and call it ‘team member image’ and we already have a class that does that but we might want to create different constraints on this so let’s create a new class. Remove that and call this ‘team member bio image’, or just ‘bio image’ and we’ll set a width of say, 300 pixels on this. That looks pretty good. Let’s add a heading. Put the heading inside, we’ll call this… actually instead of typing it out we could just click the cog and pull that text from the name. So if we switch to Callie we see Callie’s name, we see Callie’s photo. If we switch to Adina, same thing here. So that’s the image, that’s the heading, what about our layout? How do we want to put this together. Well one thing we could do, the section itself which we really need to name, we can call it bio section. One thing we might want to consider is adding a grid style to this. So when we do that instantly the children of this grid take up each available cell. So we have the bio image over here, we have the heading over here, we might want to use this kind of format. So what if we organize in our second cell, what if we organize our content over here. We can call this ‘biography’ and inside biography if we just drag it’s going to push everything around but inside biography we can just drag this heading inside of the biography div block. Now we can stack multiple items inside this cell like rich text field. The rich text is going to be the biography itself. So let’s drag that into the biography section right under the heading. That looks pretty good. And let’s get that text, grab it from bio. Here we go. A lot of this is lorem ipsum because Rebecca is currently working on her biography, that’s okay, it’s a good placeholder for right now. This looks pretty good. Now this first cell, the content in this first cell, this bio image, is placed on the top left. What if we instead, with that bio image selected, make sure it switches to the end, the end of that cell. Getting a little more control here over the design. 300 might be too small on this device, we might want to set something like 400 and then we could affect by editing the grid, we could affect that width, that gap in between the columns. Just hold down option or alt and drag to eyeball this. But really we want to get to around 30. That looks better and if we’re setting a width to 400 to this what would happen if on the biography we set a width of 400 on that. Or a maximum width. Set a maximum width of 400. That looks pretty good. Could also say the bio image instead of being 400 here can be 100% and then set the maximum width to 400 pixels. So that doesn’t look too bad. In terms of alignment, this heading, we really do need to apply one of our heading styles. Let’s do major heading and we have a darker version of this. We use darker. That looks pretty good. That alignment is okay. The bio-section on the top needs a lot more padding. So let’s change 60 to maybe 180. Maybe 120. That looks better. So, on this top section, we have the image, we have the major heading, we have the rich text block, this is their biography. This looks pretty good. How do we style the bio-image? Well we could leave it as-is, that’s okay, we might want to put a box shadow on it, this is experimental, just toying around with this idea. Maybe set 50 pixels and distance little bit greater than this. Let’s put it straight to the bottom, 180, and let’s decrease that opacity pretty dramatically to give it a little bit of lift. That might work. One thing to note, 30 pixels in between each of these, this is on the bio section, the grid, that parent element, that 30 pixels might not be enough. If we edit the grid we can take that 30 pixels on terms of the column and maybe make it 90. That doesn’t look right because it’s 900, let’s make it 90. Maybe a compromise would be 60, let’s change it to 60. We can really perfect it later, but that looks a lot better as is. Now, one thing we didn’t add, we didn’t add this yet, is a text block that shows the title of the person whose name appears on top. Let’s put it under the heading and we’ll get that text, we’ll grab that text from the title field and for this page let’s create something specific. Let’s write ‘bio-title’ and maybe we can differentiate by switching to play fair. Let’s pick the correct weight, 400 is already the correct weight. Increase the size slightly, maybe 18 black, actually gray might work fine. That looks okay, and then as a separator here, let’s try using our div block. Let’s put a div block in between bio title and the rich text block and let’s use that class we used before. That horizontal divider. That looks pretty clean, so as we switch each person we can see this content adapts, everything resizes, notice how it’s getting clipped here, that’s because originally just so we could see what we were doing we added a height. Now that there is content inside we can remove that height requirement. So now the content inside is going to be driving the size of this bio-section. Something else to note, right here we can see these two empty cells. We don’t really need those. We can delete one of those rows. So let’s hit done, we’re looking pretty good. One thing to notice about Rebecca’s that’s different from everyone else, when we pasted in from google sheets, those paragraph tags got added. Those are not rendering correctly. So one quick fix and Rebecca’s, just go in and remove those paragraph tags and simply manually place them. So every time we see a paragraph break we can just hit enter and start a new paragraph. One more right here, just delete, and enter, and get rid of this paragraph tag, and that’s it. No need to redo anything else, we are just making that change, and hitting save. If we go back everything should look exactly as we expect it to, it does, that’s fine. So shift option, or shift alt if you are on pc, left and right arrows, we are just going to switch between each these designs, things are looking pretty good. We see the name, we see the title, we see this horizontal divider, and then we see their biography, which is currently made up using fake words. But that’s the main bio, let’s move on to recent work and this is special. What we are about to do here is taking each collection, we are taking each collection we’ve made, we’ve made two of them, if we go into CMS, we have our team members and our client projects. We’re taking each of these and connecting them and the way we are going to do that is fairly straight forward and once we do we’ll be able to basically perform magic. So, team members, we have team members right here. Let’s go in and basically change the way this collection is set up. We are going to add a new field. This one will be a multi reference field and we can say ‘recent work’. That’s just the name of the field, we’ll add some help text. Add the projects this person has worked on. So we’ll have to choose which collection we want to reference, and the one we want to reference is obviously the projects. Let’s hit save and save our collection. Now if we go into, for instance, Rebecca Tilden, we can go into this field and add the projects she was involved in. Maybe she oversaw industrial loft Reno, Oakland renovation, maybe the Cupertino homebuilt, and once we do that we can add that for each person but for now let’s just use Rebecca’s name. If we go to Rebecca, now we can reference that because we added the content because we added each project that Rebecca has been involved in when can make sure those projects show up on this page. For reference let’s go back to portfolio because we want to use a similar design for this. Let’s copy the default grid and move back over to team members. We’ll go over to Rebeccas because that’s the biography page we already added this content to and just paste. Now the collection list is showing up at the bottom, let’s move that underneath the bio-section. So it’s under the bio but above the footer and we are just going to use that as a reference for right now and we’ll add a new collection list to this page. This collection list, the intention of this collection list, is to show the content, to show the recent projects Rebecca has worked on. So let’s grab it from the source for her recent work. Let’s grab recent work and right away we have the three projects Rebecca was involved in, those are displayed right here. Now if we go to collection list, we’ve already created that content before, down here, we have that default grid. So if we go to our selector field we can just select default grid. The styling is the same and all we have to do is go in, copy this link block right here, the link block holds the image, it holds the heading. Just going to copy this link block and paste it inside any one of these and when we do, instantly, the three projects Rebecca was involved in populate automatically. Let’s grab our rich text block, copy that, go back into our collection item up here, and paste, and that’s it. Now that we’ve referenced this in the default grid. We can just select it’s collection list wrapper and just delete it. Just use that as a reference. Now we have the three projects Rebecca was involved in. With our grid selected, it’s clear there is another row here, and automatic generation of rows is something that happens by default, so we can delete this one and that isn’t going to negatively affect the way rows are automatically generated back in portfolio. These rows are still being generated automatically. We can verify that by selecting the grid, going to edit grid, we can see automatic generation of two rows. So making that change, deleting that extra row, isn’t affecting anything. Back to team members, Callie has nothing displayed, that’s okay, right now it says ‘no items found’. That’s okay, but we might not want to show no items found for people in the team who might not have a recent project listed. So let’s grab that collection list wrapper, go inside to empty state and set its view, its display, to none. That means, for people like Rebecca, who have projects, they’ll show up. For people like Thomas, who don’t have projects listed, those won’t show up. Let’s go in and verify one more thing, let’s go back to Rebecca’s and make sure this link block, this link block, is taking us to the right spot. If we go here, current client projects, if this works correctly, fingers crossed, if we go to preview and click industrial loft Reno we should be taken to the industrial loft Reno page. Let’s try it… and it worked perfectly. That’s recent work. Let’s move onto colleagues. 


If we go out of preview mode and back into team members template we can affect colleagues so we are going to do a similar thing here. We want to display all of the team members that aren’t Callie, or anyone who is currently selected. If Rebecca is on the page we want to show other team members underneath but we don’t want to show Rebecca, we don’t want to link from the current page we’re on to the current page we’re on. So we can do this pretty easily, we have a team members page, our design team, already designed and we have our team member grid already showing. Let’s just copy that whole collection list wrapper, copy it to our clipboard, go into the team members template, and paste it. We’ll paste it right on the body and we’ll place it underneath our first collection list. It might be easier to design this under Rebecca’s because she already has that top section, this default grid of work she’s done. So with these team members right here, let’s select our team member grid and go to the element settings. The only thing we want to do is filter and this filter is life-changing. We can add a filter that says that the team member, right up here where it is going to select team member, is not the current team member. That means all these other team members will show up except Rebecca. Hit save, now we are showing everyone who is not Rebecca right underneath the projects she was involved with. Then, because we’ve been consistent, because our default grid, because our team grid, they have that 60 pixel padding, we’re getting this clean look and a visible vertical line along the edges on the left side and the right side and it’s looking pretty good. So, one thing we might want to do to keep things a little more organized on terms of how things are laid out on the page, we have a major heading up here, it’d helped to have secondary headings for each of these sections. So to do that, let’s keep things organized, let’s, underneath the bio-section, let’s add another section and we’ll add a collection list wrapper, we’ll add this collection list inside that section just so we can keep things organized. Let’s add another section. Let’s go… here and add this second collection list wrapper, so everything is nice and nested. We have each section, we have the bio-section, we have another unnamed section, and another unnamed section, each of these have a collection list inside. Let’s add a class here and because we have these sections we can control different parts of the layout and let’s demonstrate that by adding a heading. So let’s put a heading above this collection list. We’ll make this an H2. We’ll get the text from nowhere because we can just type it out to say ‘recent work’. Let’s add a class of major heading, we’ll have that combo class which makes it darker and that looks okay and with this section selected let’s add a class to it. Let’s call it ‘centered section’ and we can use flex box to sort the content inside, there are really two children of this section, there’s the major heading and the collection list. Both of them have their own values but with centered collection selected we can go to flex, make sure the content is stacked vertically and then just align to center. That puts recent work right at the center. We can also go into the section itself and add some extra padding, maybe 30 pixels or so just to add a little extra white space and breathing room, that looks okay. The space here might be a little dramatic, we might want to decrease that so we have 20 right here, but that isn’t really the culprit. The default grid is the culprit here. We could decrease that, we could say, shorter, and decrease the padding on the top and bottom to something say like 30 or even 15 pixels,  let’s try 15 for this. That looks pretty good. Now we have to do the same thing to this section so let’s select the section. Let’s add centered section and let’s call it ‘my colleagues’. That looks pretty good. Okay, one thing about this is, that team member grid is also a little taller, so to make this consistent let’s create ‘shorter’ and we’ll decrease the padding to 15 pixels top and bottom and, that’s it! We built a dynamic, data-driven bio page for every team member. Let’s see, if we switch from Rebecca to Callie we’re showing recent work — we need to fix that. Let’s select this section, go into element settings, and put a condition on it. We’ll add a condition that says this recent work, we need recent work to contain something. So we can actually do is set, meaning, as long as there is recent work, we’re going to show this, the element is visible when recent work is set, when there’s something inside recent work. If we hit save that disappears, that’s okay. This looks pretty good, and this is really powerful. It’ll change, it’ll adapt for Rebecca and her team since they can go into the CMS and add or modify team members at anytime, and those changes will be automatically implemented based on this design. All we have to do from here is make sure it’s responsive and that’s exactly what we’ll do in the next video.


Team page: team member detail page responsiveness

We'll take each team member's bio page and test and adapt it for desktop, tablet, mobile landscape, and mobile portrait.

Learn more

Transcript

Click and save and that’s it, just adding some more projects. This is the last video in the team members page and that means we are just minutes away from completing our last major section which is a contacts page. So let’s make these bio pages fully responsive on desktop, tablet, mobile landscape, mobile portrait, and the bridge on the enterprise D. Desktop. Since the last video we went in and added some projects for each person if we scroll to any of the individuals, any of the team members we’ll see some of their recent work here. Let’s test on desktop by grabbing the edge and testing responsiveness and fluidity. This looks pretty good, the recent work looks good, my colleagues looks pretty good, everything reflows like we expect, desktop looks great! What about when it gets really tight right there with the image? Even the image moves, this is very good. So, what about tablet? Well, as it turns out, tablet looks pretty good too. The side-by-side still works in this view even at it’s narrowest it’s still legible, everything looks great, these size automatically, we’re here doing a lot less work because we used classes. Classes enable us to style once and reuse that class throughout the project and because we already configured a lot of these classes like each of these grids. We configured it in our work, which is our portfolio page, we configured it in the team member page, those styles carry over because we are using classes. So tablet seems to look pretty good. Let’s just check at the bottom, tablet is scaling nicely. Alright, mobile landscape. Alright here is where it gets a little bit tighter on the top here, on the bio-section, so let’s take a look at that. Let’s grab our bio-section and we’ll go into the grid and instead of two columns let’s just do one column and just like that it looks really good! But let’s test fluidity because our alignment, if we see in each of these, this bio image, is aligned to the right, and this biography image, by default, is going to the left. So let’s make a change there, let’s try moving the bio image to the left. That looks okay but it really just looks wrong, it looks like there is an arbitrary gap to the right side. So a few things we could do to solve this. One, we could just select the bio-section itself and center all the content but that’s not going to override this left instruction. We could just turn that on to auto because the bio-section holds these elements cause that’s the grid itself, these elements are centering because they are now set to align-self, to auto. So that looks pretty good, what happens if we widen or tighten this, it scales nicely. 60 pixels looks okay, but to make it a little more consistent instead of doing 60 pixels to the left and right let’s try 30 pixels and 30 pixels looks a lot better because we’re aligning to that other content now. In terms of the height 120 is probably a little extreme. Let’s see what 30 does. That looks pretty good. This extra space right here might be a little much, let’s try 30 on this. That’s looking better, recent work looks good, my colleagues looks good, this is pretty consistent. So let’s test fluidity again. We’re setting a limit, we’re setting a limit on both of these. Remember we said that 400 pixels is the max, we could just choose none on both of these. We could choose no limit on either of these but that’s going to make the profile picture kinda huge. So undo a couple times. Let’s have this go back to 400 pixels, that looks pretty good. There is a bit of inconsistency in the text. So this is left aligned, this is left aligned, even that horizontal divider is left aligned, so we could grab biography here and we could set it to flex box. Let’s try using flex box here to vertically stack everything in a vertical direction and simply center, center that alignment. That looks pretty good. Our paragraphs are still left aligned there, maybe we could grab the bio image and add a little more margin on the bottom just to space things out here now that they’re vertically stacked, that looks pretty good. Let’s take a look at this rich text block and add a class to it. We can say ‘bio text’ and when we add a class, even though we are adding it in mobile landscape, that class has been added on every single view. It’s been added to the element itself so it doesn’t matter what view you’re in. But if we make a change, if we affect that class, we change styling on that class, in mobile landscape, it’ll only affect mobile landscape. Let’s center the content and this might be the look we want to go with, we might just want left aligned. In fact let’s try turning that back to left alignment. Let’s reset that and as a challenge here let’s try making our biography full width. Let’s remove that maximum width constraint just from this. That is getting us a little better on terms of alignment. That looks a lot better. So we’re getting that consistency, we’re centering the major headings here. We have this H1 nice and centered, we have this H2 nice and centered, let’s go back to… this looks pretty good. Let’s go back to mobile landscape. This looks pretty consistent. We have these nice clean lines on the left side, let’s not get too caught up on it. Let’s test responsiveness, let’s test that fluidity. Everything tends to respond and fluidly scale as we adapt our width. 


Okay, mobile portrait. Let’s try it out in mobile portrait. This is looking pretty good, a little scrunched, and that’s probably because our bio-section is 30, and we can remove that by just holding down shift zeroing all of those out. Let’s try widening it, that looks really great. Even at its widest this is still maxing out at 400 pixels. That’s good. As we narrow it things look pretty good in here. So, one thing to note here is that the recent work doesn’t seem to be showing anything. Let’s grab that client image and see what’s going on. Because it is not displaying, because this link block is set to align center, the content inside of this link block isn’t expanding. We could switch from center to expand, like that, but that’ll also expand the text and left align the heading so undo that for a second. There’s another way to do this. Let’s click our client image preview and set its width to 100% and that fixes the issue. That’s if we want all of our content centered here. centered looks pretty good. We might get design feedback that it doesn’t look good, you might want to left align some of that content, but for right now this looks pretty good. This, if we’re centering this we might want to center that as well. In fact, everything we just said, let’s undo that. Let’s go back and select that link block and instead of centering this content let’s left align this content and we could actually go back to this client image preview and move the width we set and instead on this link block we could just set full width. That looks okay, there are a million ways to do this and that’s okay. There’s no right or wrong way to create a layout and that’s really important. When we’re using html and when we’re using css, whether we are using grid or flex box, there are multiple ways to achieve a layout. What we’re doing here is experimenting and yes it can get complicated because there are thirty ways to do one thing, sometimes clicking on a heading and not knowing exactly which button is going to get that exact result is okay because, through trial and error, we can discover those multiple ways to build something and the more tools we have in our web design toolbox, the more effective we can be at creating responsive layouts that work on all these devices. Let’s just grab the edge, test fluidity, this is looking pretty good. Unless we’re using the same link block here. So this is what happens when we are using classes on multiple elements. This is a side effect that can happen and that’s okay and it’s good we are covering it here because when it happens it can be frustrating and there are few routes to go. We could undo a bunch, but it might be more fun to dig in and figure out why this is happening and if we center align everything, like this, we lose the ability to have that width set. Before we grabbed the client image and set a width of 100%. Let’s try doing that again, and scroll down. Now everything is centered appropriately, this is left aligned. If we want, if we want to override this on this specific link block and create a combo class. Call it ‘left align’, and then for flex box we can just align it to the start and that’ll override it. That’ll left align everything just like this. We could, as an alternative, just delete that and center this rich text block. Like this. So that’s another option. If we prefer consistency, we want all of these to be left aligned, we could do it like that, we could bring this to the left, we could bring all of these to the left. In fact it might be okay on this link block to align everything to the left and then simply create a combo class for this one. Align center, or center align. Again, there’s no right or wrong way to do this. It’s whatever way best serves your design and sometimes that happens. We’ll create a class because we intend to use it and reuse it on every single page and realize there’s a need like this, realize something is a little bit different. We want to achieve a slightly differently look on a different type of element. That’s okay. We are just using classes and combo classes to make that happen. But okay, that was it, that was the last part of the team member page and the team member bio pages. We’ll wrap our work up by building a contact page, then we’ll do some housekeeping and organization and we’ll be on our way to finishing the site build entirely. 


Contact page

We'll make a full contact page that has a contact form and additional contact information for Hayes valley Interior Design.

Learn more

Transcript

The contact page should be a pretty straight-forward build but it’s really important we get this right. Rebecca told us they get a lot of spam, so we’ll want to include validation and we’ll want to make sure we are clearly presenting all the details like phone number, address, dates of birth, and social security numbers. We’ll split this into two videos. This one we’ll cover a simple hero section, the contact form itself, and some additional contact information for potential clients to get in touch with Hayes Valley. 


Let’s start with the hero section, and to add a hero section, we need to add a page. So let’s call this ‘contact us’, hitting enter, and we can drag in a hero section. Or let’s save some time and choose one of our existing designs. Not this one, not this one, this one. Plain hero section. Copied to our clipboard, let’s move over to contact us, and just paste it right in the body and in this we can just change the text to say, let’s check our content strategy notes, it can say ‘contact our team’ and for the contact text, that paragraph underneath, we’re just going to reach off the screen, copy something to our clipboard and paste it right inside. That looks pretty good. Okay, so, we need two other things for our hero section to look complete. That’s the nav bar at the top of the page and we also need one more symbol. Let’s grab the footer and put it at the bottom of the page. Okay, that took a matter of seconds. Let’s move on to the next step which is contact form, and this’ll be pretty straightforward too. We’ll use a section for this. We have some section classes we’ve already used. In fact if we just type section we can see we have the bio section, centered section, hero section, home, lots of sections. We could start with centered section for our content but really, no, let’s get rid of that. We’re going to create a new section for this. This’ll be ‘contact section’ and in this we’ll do what we’ve done before and add 60 padding to all sides and let’s make it a grid. Let’s do a side-by-side design for this. We’ll only need one row, two columns, that looks good and hit escape to get out of editing our grid and for this let’s set a height just for now so we have some depth here so we can see what we’re doing and let’s grab a contact form. Now a form block comes pre-populated with most of the form elements we’ll need, we can drag that right in here. So we have some labels, actually name is okay, let’s just add a class to it and call it ‘field label’, we’ll add a class to field label here too. And let’s style, maybe a normal with a little bit of letter spacing. We could do all caps. Maybe a little bit smaller. That looks pretty good, and then our text field, we can do the same thing with our text field. We can create a class, ‘text field’, apply it to the other one as well, and style this. Right now we have a little bit of a border on all four sides, that’s the default, we can override, we could create a solid black line, we could increase that border so it’s ridiculous. Or we can just set the style to none and instead go with a background color like a light gray right around here. That looks pretty good. So we have a name field and we can go into this cog and the actual text field itself. We can see its input, its value is name. We can put a placeholder here like ‘John Smith’. Let’s try that again. John Smith, good enough. Close out of this, email address. We go into the cog, this is a required field. If we actually click each of these we can see that the name is not a required field. We could require a name and we could require an email, also we can double click to edit these at anytime. In this case let’s require both of those. By choosing the text type of email it’s going to require validation for that, it won’t let us set something if it’s just a random string of text, it’ll need to be formatted like an email address. So that’s good for an email field but let’s add one more field in. Let’s go and do a long form, a text area field and we can put that right under email address. Just going to grab the field label, hold down option, and drag that. Again that would be option on Mac but alt on PC. You can drag and let go, that makes a copy of it and we can just call this ‘notes’ or ‘note (optional)’, or maybe more appropriately, ‘message (optional)’. The example text… We don’t really need example text here, we can get rid of that and let’s apply that same text field, that same class to this. That looks pretty good. So we have a name field, let’s get rid of that because it looks unprofessional. The name field, the email address, the message, and a submit button. Now this submit button is not exactly on-brand, we could actually grab our button from here and apply that. That looks okay but we could do something different and to build on this and use the button, that class as a base, we could just use a combo class. So let’s click to add a combo class and call it ‘form button’. So it’s going to take all the properties of button and build upon them as we make changes. So first things first, let’s set the width to 100%, that looks pretty good, do we want to left align it, probably not, but we might want to match this field label. We did source sans pro, same font, but we did 413, letter-spacing of 1, let’s try to re-create that here. So let’s drop 13, letter spacing of 1, it’s looking better. I think we also did all caps, that looks pretty good. That might be a good start. One thing to note, these are a little close. The field label and the text field, these are nicely close together but each text field seems awfully close to the next label. So with any of the text fields selected let’s add some bottom margin. Let’s do 30. That clearly groups these things, the proximity of these elements, and the space after each form label, after each text field, creates that visual rhythm. There’s consistency and repetition in this design and when we break that repetition by changing the color here we’re drawing attention to the submit button itself. That might not be what we intend but in this case it looks alright, but that’s the contact form. 


Let’s move on to additional information. Here’s an interesting thing, we can put a grid inside of a grid, just grab a grid element and drag it right inside the grid. Now we have a grid inside a grid and the reason we might want to do this, we’re just gonna try this out, the reason we might want to do this is because organizing this information, let’s actually remove that column, organizing this information into multiple rows, a lot of different types of data are going to be displayed, and we want to follow a format that’s a little bit similar to something we did before. In fact if we go to our client projects, this is the CMS collection page for client projects, we used this. This was a content label and client project detail. We were able to achieve a label for something next to information about that something. So let’s do the same thing over here. Let’s go back to our contact page and we’ll add a text block and we’ll put that text block, if we try to place it inside the grid it’s just going to rearrange content inside the grid because it’s automatically positioned. But if we hold down command we can move it inside the children of that grid. So we are just dropping it inside this grid. Now it’s a child of that grid element. If that’s too tedious, and sometimes it does get that tedious, we can just click and drag, and even if we start dragging on the canvas, we can position things inside the navigator. Let’s just make sure it is inside the grid, and it is, we’re done. So let’s go in and type label, because we had that content label, that’s good. We have some information we have some information we want to type out here. That’s upside down. So, we have… location… and we have a location here, let’s copy and paste. We’re just copying and pasting that content label but we know on the second one it has a different field, that was client project detail. Okay. Then we have another one. Just copying and pasting these elements, we can just hold down option and drag. We can do this one-by-one so that we are getting ourselves the same type of layout as before and we can size this later. We have location, the next thing we want to add is phone number. Under that, hours of operation… and that’s it. Those are the three we want to add. So we can go into our grid, we can delete these extra rows, just delete any two of the rows, and that works just fine. Now, the size of this grid, the reason everything is really, really tall right now, there are two reasons. The first is that the grid itself, remember we set a height, we set a height, let’s go into this, this is actually the contact section itself. We set a height of 600 pixels. Let’s remove that. So we’re going to click this, reset, we no longer have that height constraint so the height is based on the content inside but there’s another thing. The other thing that this is based on is the fact that this grid is set to take up the full height of this grid, because this grid, the contact section, has two cells inside. Let’s go in and edit that grid so we can see what we’re talking about. Since all that content in the left column takes up this much space, it’s making all of the content in the second column take up that much space. There’s a way to override that, let’s hit done. Let’s click this grid, just this second grid, which we can call ‘contact details’. To get contact details to not take up that full height what we can do is distribute that content. We can distribute it to the start, we’re aligning that to the start. So let’s click that and now the contact details align to the top. That looks pretty good. We might want to, for visual consistency here, grab some padding and align it so it looks, let’s just do 20 like this, so it looks like it’s aligned there. We also might want to grab the contact section and add an extra space, maybe 60. We’re doing multiples of 30 a lot. This looks pretty good. Now let’s put some information inside. In fact we’re going to reach off-screen and copy and paste because we have this information typed out in our content strategy notes, just a digital version of this, and copy to clipboard. Let’s paste… that’s pretty good. Phone number, same deal here. In fact we can type this 415.555.1200 and, again, we can copy and paste this content from down here. In fact that might be better. Select all, copy, let’s go in here, and paste. That looks pretty good. So we have the location information, the phone number information, the hours of operation, that looks great. Now what if we wanted to add some space. What if we wanted to add some space in these contact details between each of them. Well with the contact details selected, it is a grid, so we can just increase that row gap. We can bring that to 30. That spaces it out a little more. A little more breathing room for the contact information. And, wait a second, it says 430, it should be 530, let’s fix that real quick. It’s that way down below here too. We can clean most of these things up when we do our review a little bit later. That section looks a lot better now but that’s it. That’s the contact page. In the next video, we’ll make things responsive, and that’ll represent the end of the build work for new pages. Everything after that will be optimizing the existing pages and looking at the site in its entirety. 


Contact page: responsiveness

We'll make the contact form and the additional contact information work across all kinds of devices.

Learn more

Transcript

Here we are, we’re still waiting on Rebecca’s team for reCAPTCHA information, this is what will validate our forms to help reduce spam. We’ll cover that later during our review. But now, responsive testing and adjustments for our contact page on desktop, tablet, mobile landscape, and mobile portrait. This is really important, especially to Rebecca and the team at Hayes Valley because this was a weak point, a challenging part of their old design in which people couldn’t easily navigate the site and get in touch when they viewed it on smaller devices. People who visited the old site had an intention but the obstacle was that it was clunky and weird on old devices. So it’s our job to bring as much value, to every page of course, but especially to the page that will be part of potential clients reaching out to their team.


So, let’s get started on desktop. Things on desktop as we just designed look pretty good, maybe a little bit narrow here, so we could grab our contact details and edit that parent grid. Since this grid is only being used in one place, changes to it won’t affect others. But, if we realize, the contact grid isn’t what’s creating the separation. So let’s actually press done there and select the grid inside the grid, contact details. Let’s edit that grid and we can decrease this one a little bit, maybe to .5 fr, .75 fr might be fine. That looks pretty good. Let’s hit done and let’s test responsiveness, let’s test fluidity on this. That looks pretty good. Something to note about the content there is that we’re widening, contest and validate that this has been formatted correctly, it hasn’t. Let’s grab that and knock it down to a new line. That address is more correctly formatted. Flora is hanging over so it might be worth making that last adjustment, bringing this down to .5 or even .6. Nope, .5. There we go. Let’s see how that looks. If we grab the edge, that looks pretty good. What about the space between this, the plain hero section and the contact section? Could we reduce the padding on the top to about 30, how does that look? Not that much different, still enough white-space, seems that contact our team is a little bit better in terms of vertical centering away from this, between the nav bar, this text, and this text, and contact text. So that’s looking pretty good. Everything else looks good on desktop.


Let’s move onto tablet. Now, tablet also scales nicely. The location is a little cramped and for this reason, maybe this reason alone, we might want to consider at least grabbing the contact details, editing that, and instead of doing two columns, let’s delete one of the columns. This will stack the information like this. Now, client project detail, we used this on another page. We might even want to rename it so it’s just ‘label detail’ and we can create a combo class here. Let’s say, no left padding, because this one is not going to have left padding. It’s 10, let’s make it 0. That looks fine. Let’s make sure to apply that combo class to each of these. So because we applied this combo class, it’s not going to negatively affect, it’s not going mess with our design, on other pages. The other thing to note is the contact details, this inflated row gap, the gap between the rows, that’s a little heavy. So we could grab that and drop it to 15 or so or maybe even 5. Let’s hit done, that looks a lot better, and the label detail, because we created a combo class, we can also apply some margin to the bottom of that without it affecting any of the other pages. Let’s do 30 pixels here. That looks a little bit better. If we test fluidity the tablet is looking pretty good as well. 


Let’s move onto mobile landscape. We’re getting a little bit cramped, a two column layout, at least for this content, might not be practical but there are two parts to that. One, remember, contact section just like our other sections we end up reducing the available padding inside. So let’s decrease the padding to… 15, 15 looks pretty good on this. And in that case it looks good but when we get narrow it pushes some of that content to the next page. We could grab the label detail, and we could decrease that size slightly. Still make it legible on mobile devices. It’s a little more friendly, we could go into contact section, reduce this, we have this column gap we could drop that to about 15. Let’s try 15, hit done. Not bad. It’s a little narrow, maybe 30 was more practical here. The two column layout is pretty tight. So in the interest of legibility and navigability, let’s grab the contact section and delete one of these columns. That’ll knock the rest of the content down. That’s a lot better. We have enough breathing room here so it doesn’t seem too constricted, constrained. We have enough breathing room to type a full name, to type an email address, to type out a message and we can clearly see the submit button. As for the contact details, let’s go in here. We could edit this but actually, it looks fine, maybe on mobile landscape since we have some limited real estate we could reduce the bottom margin on label detail, make that 15. That looks better. Left alignment might work well for this. We could center align this content, just grab content details and center the text. That could work too. We have a lot of the same information here that we do in the footer but that’s not a bad thing. People who come to this contact page are expecting in the body of this page, maybe not even in the footer, this type of information so that’s okay. We could add a little more space underneath. Maybe 30 pixels on the bottom for that extra breathing room. This looks pretty good, let’s test fluidity. Everything scales nicely.


Alright, that’s mobile landscape, mobile portrait. There might not be anything to do here. This is one of those rare times where no adjustments are necessary. We could, on the plain hero section, reduce this on the top but this would affect other pages too and 30 looks pretty good. We could reduce some of the padding here, maybe from 20 we could drop it to 15, but now we’re really nitpicking which is not a bad thing but let’s try dropping this to 10. That’s pretty good. So mobile landscape is looking excellent. Now, it might be a little weird, it might be a little weird because the hero power graph is at 15 and this content is so small, it’s at 13, let’s go back to mobile landscape because because we originally made the change, we switched this to 13 because we wanted to try and fit it into a two column layout but that’s not necessary anymore. So let’s try removing that size and looking at mobile portrait. That looks a little bit better. Does it get a little scrunched? Yes, but the way we solved this on other pages is we reduced or removed the padding entirely. Holding down shift, removing it on all four sides at once, that way we have some more breathing room and that’s good. On the narrowest of devices, if someone were to browse with 240 pixels of width, then the word ‘floor’ would get knocked to the next line, there’s nothing wrong with that, so that’s it! That’s the last part of making the contact page responsive. The great thing now is we can take all of our hard work, especially the contact form itself, and implement this, we can get a version of this on every page so it’s really clear and easy for people visiting the site to get in touch with Hayes Valley Interior Design. So we’ll do that and revisit the homepage in the next video. 


Contact page: reCAPTCHA setup

reCAPTCHA is more than a word. It's validation for humans using forms.

Learn more

Transcript

This is a really quick video on reCAPTCHA. This is how we’re going to help Rebecca and her team crack down on spam their getting from their current contact form. We’ll go to our project settings and we’re setting this up now so we can reach out to Rebecca and get her this information. Now while we’re at it let’s configure our form configuration here, let’s figure our, from name, ‘Hayes Valley Interior Design website’, subject line can be ‘new contact submission’, or ‘new message’, okay. We can leave these the way they are. But what we are looking for right here is reCAPTCHA validation. Our goal is to get these two keys, the site key and the secret key. Now a lot of people will do this on their account, a lot of designers, a lot of freelancers will do this on their account, some prefer to approach their client to do it on their account so the client holds the reCAPTCHA key. We’ll do that version, we’ll reach out to Rebecca with that information but we’re going to go through this as an exercise, so when we click this link, let’s go back to the forms tab, and we can see over her there is register for a new key. If we right click on that we can copy that link address, this’ll be what we want to send to Rebecca and if Rebecca is logged in as she is in our hypothetical situation here which we are just using as a demo, she can add this new site. She can register the site to ‘Hayes Valley Interior Design’ .com, this is just a label. We’ll select reCAPTCHA v2 and all we have to do is, we’ll use the default robot checkbox, I’m not a robot checkbox, and we’ll just copy this and paste it into the domain field. That’s what we want in terms of this validation, we want to make sure that Hayes Valley Interior Design is added and the second thing we are going to ask for is this, we are going to get HayesValley.webflow.io, we want our client to add this second piece of information. The reason we are doing that is, when we are staging this site when we’re testing it we don’t want to publish the site we’re working on here, we want to publish to our staging domain. We’re going to make sure both of these are there. We’re imaging this is Rebecca, what Rebecca is going through, so she’ll be the owner here. We’re going to select and we’ll hit submit. And once we do that Rebecca will get, or if you do this you’ll get a site key and a secret key. We’ll copy these and put them in for now, but in our hypothetical scenario, we’ll be pasting these in when Rebecca sends them to us. Hit save changes and that’s adding reCAPTCHA validation. We’ll come back, we’ll enable this, and we’ll configure this in our forms later.


Homepage revisited: secondary sections

We'll revisit the homepage, adding sections that link to Hayes Valley Interior Design's process and team member pages.

Learn more

Transcript

This is the last major video we are going to do in the site build. Of course, there’s often more work to be done, and we’ll definitely revisit after getting feedback from Rebecca and her team and after testing the site enough and of course reflecting on our life choices. That last one is a separate video, hosted by greemer, which may or may not see the light of day. On the homepage we’ll try out adding some more detail about their process. We’ll see if we can do the same for their team member information. We’ll add the contact form, and we’ll get it optimized, and then we’ll add more contact forms at the bottom of some of our other pages.


Let’s start with the homepage, specifically, their process. Now, we haven’t spent any significant time on the homepage since we started designing the other pages. So let’s go and get some inspiration from another portion of our site. Let’s go to portfolio and see how we did over here. This looks pretty good, but we are looking for something a little more applicable to… here we go, let’s grab step section, each of these steps and what we could do is we could just call it ‘alternating section’ because that’s a little more specific as to what it does and we can pull that for our homepage. So if we go in and drag a section inside, we can just grab a section, and we’ll put it in between collection list wrapper and footer. Our goal here is to get a little bit of a hint, a little more information, about our process. So we’re hinting at this process here. The goal, of course, is to have a button that says ‘explore our process’ and clicking that button will take them to our process page. We want to surface as much summary information on the homepage as possible. So, let’s use that class ‘alternating section’. That’s pretty good and we can copy another one because we are going to use that, just copying and pasting here. We are going to use another one underneath that for ‘meet our team’. So alternating section, let’s do explore process, and we can set a background image. We’ll go down to backgrounds, add an image, choose the image from one we imported earlier. This one right here and we’ll set it to cover and center. This is a good starting point and we’ll put a few things. Instead of having it over here to the left we’ll want to put these things to the right. So let’s get a container for this. We’ll grab a div block and instead of just placing it in the first cell, well, we can place it in the first cell and just select manual. Now we can place it into the second cell over here. In this div block we want to put a few things. We want a heading, so we’ll put, inside the div block, that heading, this will be an H2. It should say ‘our process’ and we can use one of our existing headings, we can use secondary heading. Actually, our major heading might work here too. Let’s try major heading and then darker2, darker, there we go, and we add the ’s’ to our process and let’s continue. Let’s add a paragraph underneath the major heading.  Let’s put the major heading on top, that looks pretty good, and then we want a button. We can just grab this button and hold down option or alt on PC and just drag it into the area we want. Let’s use the navigator to put it specifically where we want. That’s good. That pink color might not be great here. In fact we could just add a secondary. This will just be a secondary, a combo class, that let’s modify the original button. Do a black or a gray color. That looks a little bit better. So we have a blurb underneath, this little paragraph right here, we have a blurb about our process. We have a let’s chat button, let’s make that ‘explore our process’ and if we go to element settings we can link this, we can make sure pressing this button takes you to the process page. So under page let’s go to our process. That’s one section down.


Let’s move onto meet our team and we’re going to do the same thing here. Alternating section, let’s grab that, add a combo class, ‘meet our team’, and we’ll set a background image on this one too. In fact, we might just want to do a color. So let’s remove that and set a color, maybe a light gray color. Could actually just pull this color from right here. That looks okay, and what we’ll wanna do in this is left align the content. Meet our team is going to go to the left. We can actually just copy this div block right here and paste it inside alternating section. Now all we have to do is change the content. ‘Meet our team’, this is lorem ipsum as it is, and this can be ‘meet our team’. It’s a little repetitive but it will work for now. On the right side, let’s try something interesting. Let’s grab a collection list, we’ll go to the ad panel, and we’ll grab a collection list and we’ll drag it into this area. We’re going to try something odd. Let’s pull the team members in right here and let’s grab the actual collection list and make it a grid, we’ve done this before, and show an image of each person. Let’s just show a preview of each individual that makes this up. Let’s grab an image element and we’ll put it inside the collection list. Let’s open up collection list, collection item, we’ll grab that image, put it inside each collection item. Then we’ll get the image, we’ll get each image, from our team members and that’s looking okay. Let’s go into the collection list and add another column. That looks better. Let’s name this, right now it’s collection list 2, let’s call it ‘team member preview’ and there’s something we can do here to add a little bit more space and that’s increase this gap on both sides. Let’s lock this so we can change both at once. Let’s try making this 30, or even 60. That’s looking a little better. Could add some padding to all sides. Hold down shift to affect all sides at once and we’ll do maybe 30 here. That looks pretty good. However it’s interesting, over here we have 30 pixels, over here we have 60 plus 30 so that might not be such a great idea. We could push the padding in from this side but then we’re losing the alignment there. Maybe the change we want to make isn’t padding. Let’s remove padding from all these sides. Maybe the images are a little big and we can affect that by editing our grid and instead of 60, maybe making them 90. Not too bad. It’s a little awkward, and the reason it looks awkward is this wasn’t locked anymore. Now it is, 90 is way too much, let’s go back to 30. It could be something else that’s looking awkward. It could be, not the space here, but it could be the fact that this div block isn’t aligned to the center. So this div block doesn’t have a class right now. We could say section or page preview since that is what this is on the homepage. We could do this for both of them but what we are about to do is only going to affect this one because it has some open space. Select this, set it to flex box, and vertically stack the content, but center it using justification. So under justify we’ll go here and alignment, we don’t really want it taking up full width here, we don’t want it expanding, we don’t want it stretching here so alignment let’s pull that to the left. That looks a lot better. Meet our team, it’s giving you a nice preview of the people involved right here, meet our team the button is going to take, is going to take  us to, as it says on the screen, our process, so let’s make sure that’s our design team. That looks a lot better. So on the homepage we’re showing a hero section with some of their work, more design work that they can explore, we’re talking about the process, we’re talking about the team. Our process does feel a little bit constrained this way. So maybe just for this section the combo class is applied, so this’ll just affect this section, let’s maybe make it 120. That looks a little bit better. Meet our team, this section looks pretty good. 


Okay, that leaves only two more parts, both of them involve the contact form so let’s take a look at the contact form. Go to the contact page, the contact us page, and what we’re going to steal is this form itself. The form block, let’s make sure the form block is selected, and we could just copy it to the clipboard but something creative we could do, let’s right click and create a symbol, and call this ‘contact form’. Now it’s a symbol, which means if we use it on multiple pages, any change to that content inside will affect all pages. So let’s try this, let’s go to the homepage and instead of creating a new section, let’s go add a symbol and let’s go drag in our contact form, see what happens. So not too bad, right now this is taking up full width. That’s okay, but what we might want to do is put it inside a section, so this section is going to have a contact form inside and the section itself can be ‘contact form holder’ and we can put some constraints on this. For instance, we could set the padding on both sides to 25%. That will mean the content inside will only take up 50%, because that’s all that’s left, 25% and 25%. That’s okay, one of the things about the contact form holder right now is that it doesn’t have any padding on the top and bottom. So we could add 30, 40, 50, 60… 60 pixels there. That’s okay but if you notice right there we accidentally typed it into margin right. Let’s remove that and make sure to apply it to the padding. So 25% to the padding. Okay, now it’s a little more even, at least it looks, the boundary, the element boundary, looks like it should. But the section on its own doesn’t really tell you what to do, it’s just an arbitrary contact form. So we might want to grab some more information from the contact us page. Let’s grab the hero section here just so we can copy it and bring it to the homepage and we’ll paste the hero section, we’ll actually move it right above this, just to reference and we can grab the heading and put that in the contact form holder, we can grab the hero power graph and put that into a contact form holder, we can move it above this symbol. Let’s actually go in so we have… Let’s use our navigator so we can be really specific, we’ll bring the hero power graph up and we’ll bring the heading up. Okay, so now we can delete this reference, the plain hero section. This is looking a little bit better, we could center the content in here, like that. But there’s somethings we’ll want to fix if this is the route we want to go. Let’s try aligning it to the left. Let’s try adding a little bit of a spacer. We used the horizontal divider before, we can do that again. Just put the div block here, call it ‘horizontal divider’, that’s okay. This is left aligned, it doesn’t look too bad left aligned, we might want to keep it this way but it could be worth exploring centering it so let’s grab a div block, put that inside. We’re going to use a div block to center the content because we don’t want to select the whole contact form. If we center something with the whole contact form everything gets affected so instead let’s grab a div block and call it ‘center aligner’. We’re just going to use it as a center aligner and put each of these elements inside. We’re just going to put the paragraph inside and then we’ll also put the horizontal divider inside. Again, we can use the navigator here, just dropping it right in center aligner. So the center aligner has the heading, paragraph, and the divider and with that we can use flex box. We can vertically stack and we can align center. Now if we want this hero power graph centered we can just, with the center aligner selected, center the text. Everything looks pretty good now and it looks better centered than it did left aligned. Plus we have this rhythm, we have right alignment, we have center alignment here with kinda this, four item grid. Then we have right, left, center. So we’re giving that rhythm of right left, then we’re breaking it with that contact form. 


Now we originally made this contact form from the symbol itself but we might want to reuse this entire thing. So let’s just right click this, we’re just right clicking the contact form, let’s unlink from the symbol, so it’s no longer directly tied to the exact layout, the exact structure, the exact content in the other form. Right now it’s identical and that’s okay but let’s grab the content form holder and with that selected we can right click and create a symbol. We can call this ‘contact form section’ and if we’re not going to use the other one let’s clean house, go to symbols, this contact form has one instance. We can’t delete it without first going to that page, let’s go to contact us, let’s grab this, right click, unlink. Now we can go into our symbols, remove the contact forms since it’s not being used, delete, and go back to the homepage. Scroll to the bottom and grab our contact form section. Copy it to our clipboard, and with that we can put it on other pages. So let’s go to portfolio, and paste it just selecting anywhere, paste and we’ll drag it right into here. Now underneath this content we have our contact form right above the footer.  Let’s move from portfolio to our process. Same thing here, another way we can place this, just go to the ad panel, symbols, contact form section, put it exactly where we want, that’s it! So we have our steps and we have a contact our team. This is pretty good, let’s move on to our design team. 


Let’s go to the design team page. Same thing here, people may want to get in touch, so we can go to symbols, we can drag the contact form section right above the footer, okay that looks pretty good. Continuing, contact us page, we can go to add the symbol,  and we can drag it nowhere because it’s already a contact page. Now if we look at the screen there are some buttons, for instance in the footer here this button that says let’s chat, it wasn’t properly linked before. In fact it goes nowhere, we can take it to the contact page. Now it’s a little odd, we are on the contact page so this will take you back to the contact page but since it’s a symbol, making that change affected the footer on every single page. So if we’re home, if we go to preview mode, and somebody scrolls all the way to the bottom press let’s chat, it takes you to the contact page. That’s expected behavior. The other thing we might want to do before we wrap up is go into the nav bar. Select any of these nav links and make sure they are taking us to the right pages. This should take us home, the portfolio should take us to the portfolio, our process should take us to our process, our design team should take us to our design team, contact us should take us to contact us. And you’ll notice that this state, the current state, we are currently on the home page. Just like if we were to go to the portfolio page, our current state is shown in blue. We can change that because we are modifying not just nav link but the current state. Changes on this will affect the current state on all links that have the nav link class applied. What does that mean? That means we can just change the color. So if it’s the current place we can just make it black since these are kinda a lighter grey. We could actually make this a lighter grey so we can easily see what is selected. We could underline it, we could strikethrough it, but no decoration is okay, and we could also add things like hover effects. So with any of these nav links selected, the non-current nav links, we could go to hover and make that color black as well so that on hover they turn black, can even animate that a little bit. We can go to transitions and we’re going to change font color so let’s do that over 200 milliseconds is okay. So if we go to preview, let’s close out of this, let’s preview, so we hover over each of them, we get this quick, 200 millisecond fade that looks okay. Also the homepage itself, these buttons don’t actually take us anywhere. That’s why it is important to test, and test again. 


When we’re ready we can send over a draft of this to Rebecca so we can get feedback and iterate on the design. But think about it. We took our initial research we did when we were looking at Hayes Valley on an iPhone, we took our research, and our conversations with Rebecca, and we didn’t just ask questions. We worked hard to deeply understand their business and then we made recommendations to their team on ways we could provide value to them. Is it just a website? Absolutely not, it’s an embodiment on what their business does, it’s a reflection of their work, their process, the team itself. Those are literally the pages we built. And thing about that. We didn’t just build the homepage, and the portfolio page, and the process page, or the team page. We built out nine different project pages that showcase their design work and six different pages to highlight different team members. You want to talk about serving the users story. It might sound repetitive by now, but let’s read it once again. As a homeowner, I want to see great interior design work so I can pick this interior design firm with confidence. We didn’t just highlight great work or feature a couple of pictures. We wrote content that servers and expands upon that work. Content that walks potential clients through the process of interior design work. We add trust by talking about who is actually doing the work. All of this leads to confidence, not just to the clients, but to Hayes Valley Interior Design. Let’s put ourselves in their shoes, Hayes Valley. We added value that elevates their business because now they can show potential clients, and friends, and family and colleagues their portfolio, all the work they do. Work they’re proud of and that’s building a full website based on our user story.


Learn how to prepare a client site and the CMS Editor so that your client is confident with the finished product.

Learn more

Transcript

Pre-flight site review

We'll do a review of each page on the Hayes Valley site before we send a link to the staging domain to Rebecca.

Learn more

Transcript

Connecting a custom domain

We'll connect a custom domain for Hayes Valley Interior Design using Google Domains.

Learn more

Transcript

Publishing the website

In this in-depth video, we'll cover publishing the completed website to the custom domain.

Learn more

Transcript

Preparing the CMS Editor

We'll set up the CMS Editor so the team at Hayes Valley Interior Design can go in, make changes, and publish their own site.

Learn more

Transcript

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer