This is the most advanced lesson so far. Because up until now, we’ve built out our homepage (a single, static page that has dynamic projects that show up in the section...that has projects). And we’ll come back to it later, but we want to build our second page, and there’s a secret. We’re not just designing one page. We’re designing one page...which will serve as the design for all client pages to be automatically created. Unlike the homepage, this page is not built from static elements. In fact, we’ll use a lot of the same linking we used in the Collection list (in our projects list on the homepage) and we’ll build out this design once. But the result will be unique pages that are automatically generated for every project. (We’ll do this in the CMS.)
And we’ll start with the hero section, then we’ll do project details, then the larger
project description — we’ll use CSS grid to build a multi-image layout, we’ll add
links to our other projects, and finally, we’ll add–
[Sara] Hang on.
[McGuire] Are you going to–
[Sara] Sent!
[text message notification sound]
[McGuire] Not gonna read that.
[Sara] Say it…
[McGuire] "Dear McGuire..."
[Sara] Keep reading.
[McGuire] “I’ve been thinking a lot about the last few lessons. It’s critical, though, that you follow the design I made in Figma. If you don’t, we’re going to have problems. Big problems. Problems you can’t even...” Do you know how much this reads like a threat?
[Sara] Am I threatening?
[McGuire] Not at all.
[Sara] I’m a little threatening.
[McGuire] No.
[Sara] Red pen.
[McGuire] Don’t do it.
Finally, we’ll place in our Symbols (our navigation and our footer).
But let’s start with the hero section. This is not the correct hero Section, because we’re still on the homepage. But, to get to the right hero Section we have to make it, and we’re going to make it on our Collection page. Here’s how that works. If we go to the CMS over here, we can see our Collection we created earlier, projects, and of course we have our four Collection items, each of the projects in Megan’s portfolio. So, if we go out of this, let’s go out of CMS Collections, and go into our pages panel. We can see under CMS Collection pages, a projects template has automatically been created. That happened because we created projects. So if we open that, it’s entirely blank. But there’s something else going on. If we go up here we see this little dropdown called item, and this is each of our Collection items, but right now it’s blank. But just as we used the Collection list earlier, to list each of our client projects, a page has automatically been created based on each of our client projects., and we can link to those pages. Here’s how to do it. We’ll stay on investment app for right now, and let’s design it as if we’re only designing one static page. We’re going to pull that data from the Collection. So, let’s add a Section, we’ve done this before, let’s add our class, it’s called Section, there we go.
Let’s add our Container, so we’re getting pretty good at doing this, of course we have our class, Container, and of course we’re going to add two elements inside of that. Let’s add our heading, let’s put that right inside the Container, and we’ll add a text element, just do a little text block right underneath that heading, also inside the Container. We’re going to do something different with each of these. In both cases we’re going to pull the text from the Collection. So for our heading one, let’s grab the project name. So instantaneously we’re on the investment app page so it says investment app. And for this text block, let’s grab the type, the type of the project, let’s go to project type. So here’s what we have: investment app, this was a UX design project for Megan. If we switch over to architectural website, also a UX design project. If we switch over to social network, that was a prototyping project, and if we switch over to meditation app, that was a web design project. So, already we’ve created four pages by just creating one. Okay, we haven’t created one but we’re close. We’re not very close, but we’ve just gotten started. Let’s continue. And we have a good starting point for the types of headings we want. In fact if we use our secondary heading class from before, that’s a pretty good starting point. Instead of building on top of that, let’s create a duplicate. Let’s duplicate this class, let’s call this Project Page, maybe Project Heading, and that looks pretty good. We have size twenty-eight, let’s lower that height a little bit, let’s use unitless one hyphen. That looks pretty good there. Let’s apply the same to this. Let’s call it Project Heading.
The space is a little dramatic between the two of these, let’s decrease that from fifteen, to maybe five. And for this one we’re going to use a combo class. So both of these right now have the same class applied. In fact if we change the size on one of them it changes it on both of them. That’s what zero pixel size looks like. That’s what seven hundred nineteen pixel size looks like. Let’s bring it back, undo, and select our second heading, Web Design. We’re going to create a combo class. We’re going to call it Secondary. And what this is means is, it’s a more specific styling than our project heading. So, if we want to make this one darker, let’s just make it darker. We just change our color. Let’s drop this, until right, right when we get triple A four point five four contrast ratio. That’s pretty good.
We have this darker grey, or we have this lower opacity white, against our dark background. Now, again, this is the base class. They have the same base class, project heading here, project heading here. That means if we go back to project heading, and we make a change to one of them, so if we change the size, it’ll still affect both. But, if we pick the more specific one, project heading secondary, a change here will not affect the first one. Let’s undo that, so they’re both even and matched with this one having a slightly lower opacity. A dramatically lower opacity. Fifty-five percent lower opacity. Now there’s one more thing we want to add to this hero Section.
Let’s make that an image element, and we’ll drag it into the Container for right now, but we can place it in the Section like we did on the homepage. So, with this image selected, let’s add a class. We’ll call it Project Main Image. But, more importantly, let’s get the image from our Collection. So let’s check this box, Get image from our projects Collection, and let’s choose project image. Now, this is the image from the meditation app website, and if we switch over to the investment app, that’s the image from the investment app website. In fact, we can hold down Shift Option on Mac or Shift Alt on PC and hit the left and right arrows to swap between each of our Collection items. We’re loading up a different page, a different web page, that’s automatically being built for each of these. So, as we style and populate one page, it’s doing that for all the others as well. So let’s land maybe on this one for right now, Investment App. And let’s configure this image further. So, Project Main Image, this is the class that’s applied to it, let’s set our width. In fact if we pull it out of our Container and into the Section, it’s kind of large. So, let’s do a couple things. Put the Container on top of that, so that our Project Main Image is on the bottom. Let’s set a height of, let’s say four hundred pixels. Now, the reason that image is no longer one hundred percent, is because it’s preserving the aspect ratio, the relationship between the image’s width and height. And there’s a way around that. We can set the height to four hundred pixels, but we can also set the width to one hundred percent. And when we do, it sort of stretches. If we actually go back to that sun image, let’s go back, Shift Option left, there we go. We can see the sun is stretched way out of proportion. So, to fix that, let’s use object fit. And here’s how object fit works. It lets us take these dimensions which we’ve already set, any element that has a width and a height, and it’ll fit the content to that. It’ll fit this image to what we specify. Let’s choose cover, and just like that, the image is preserving its aspect ratio, but scaling up to cover the box we’ve defined, that box defined by one hundred percent width and four hundred pixel height. Let’s Shift Option, left and right, take a look at all of these, they’re all proportional. We can see in this one it’s kind of showing this cloud, kind of floating there. It’s fitting for social network. This works fine.
So, let's continue. Maybe with our UX design, we’ll add a little more margin at the bottom, and again, we’re just affecting the secondary version of this project heading. So it’s okay that we’re applying this to that class only. Let’s do maybe sixty pixels. That looks pretty good. So, we have a Section, inside that Section we have a Container, inside that Container we have the heading, and we have that text block, and then we have our Project Main Image. One last thing, let’s make this maybe five hundred.
That’s one topic down. Let’s move on to our second topic so we can add details for each of these projects. Let’s add another Section, we’ll go to Section and drag that underneath the existing Section, and we’ll add our Section class.
Again, this is carrying over that sixty pixels of padding on the top and bottom. This is consistent across all pages in our project. And, let’s add our Container. Instead of going to the add panel each time, let’s hit Command K or Control K on Windows, and we’ll use quick find here, we’ll just type Container. Now we have a Container. And we’ll add our class to this, Control Enter to quickly get to the selector field, and we’ll type, Container. There we go. We have our Container, inside our Section. Now, if we look at our Figma design we can see a sort of side by side. There are a thousand ways to build this. We’re going to use CSS grid as the top-level organizer, our side by side, and then we’ll have an element inside each cell. Let’s put in our grid. Let’s go to the add panel, we’ll drag a grid, and we’ll place it inside the Section and inside the Container we just created. And there’s our grid. It’s a two-by-two by default, we do not need that second row, delete. And that’s the structure for our side by side. Let’s hit done, and we’ll rename this, we’ll say this is our Project Side by Side. There’s probably a better name for it but we know what we’re talking about. And, for this Section we’re going to drag in a Div block. This is going to be our content organizer, we’re going to place all of our content inside this Div block. So it’s going to hold everything else. So, what do we add inside the Div block? Command K to enter quick find, and we’ll get a text block. And before we configure everything else, let’s copy and paste so we’ll have six of these total. One, two, three, four, five, six. And let’s style it first to differentiate. First off, our first, third, and fifth are going to be styled using Project Label. And our default font size is okay here, but let’s change it to all caps. We’ll go to more type options, and capitalize. That’s pretty good. Maybe semibold. And we’ll apply that label here too. Let’s do project, label, we’ll do the same thing here. Command Enter. Project Label. Now for the other ones, let’s create a new class, let’s call this Project Info. And this one we’ll choose a more transparent color. Let’s pull down to, right at triple A, sixty-one on the alpha looks pretty good. And we can apply the same thing here, Project Info. Command Enter. Project Info.
If we want to go even quicker we can select sibling elements using the left and right
arrows, so we can just go down here to this bottom text block, Command Enter, Project
Info.
And on each of these, with any of these elements, with Project Info selected, let’s add some margin on the bottom to space these things out. Twenty pixels looks pretty good, maybe even, maybe even some more, just referencing our original design here. Let’s do sixty pixels on the bottom. And, let’s double-click and change the text. This’ll be our client, this’ll be project type, project year. And we can just pull that information right from our Collection. Let’s get this text from the client name. For our second one let’s pull that from the client project type, we’ll get our text from the client project type. And for the third, of course, we want to grab the year. Same deal here. Get the text from the year. Now, if we hold down Shift and Option, and go left and right, we can see, in fact, let’s hide this main image. Let’s turn it to display none for a second. We can see if we swipe left and right, as we switch through from item to item, that the project year, the project type, the client is changing out. Now, we don’t want to forget about that. Let's undo, let’s remove that styling of display none so we have the picture back. That’s good.
But each of these pages are already building themselves. And a change to any one of them, let’s say on these project labels we want to add a little more spacing underneath, maybe five pixels or ten pixels of spacing underneath. Maybe we want to increase that spacing between the letters, the letter spacing to one or even two.
That’s project details. Let’s move on to the project description. We’ll go to the add panel, and we’ll add rich text and we can put this next to the Div block, let’s put it on the right side. And before we link it, let’s make a couple changes here. Now, in our Collection we have two types of elements that we added inside of each project description.
We have an H2, a heading two, and we have a paragraph, so let’s do that. Let’s configure each of those here. And to do that, we’re going to do something special. With the rich text block selected, let’s create a new class called Project Description. And when we created that class we unlocked something special. This is an H2, if we select that, it says styling rich text. That’s because this H2 is actually inside a rich text element. So if we select our H2, we can select a tag in here, and we have this option to change our H2 headings. Now, this a lot of control but here’s how it works: all we have to do is start styling, so if we want to change our font to DM Serif Display we can do that. Let’s choose our font weight of four hundred. But there’s something interesting to note. For the sake of example, let’s change this color to pink. And we’re doing this to demonstrate that if we add another H2 somewhere else in the project, let’s add a heading, let’s put it underneath, and let’s make it an H2. Now, everythings still pink. All our H2s are still pink, but that’s expected. Let’s go back to our H2, this one right here, and let’s go into our all H2 headings tag, we’ll remove the pink color.
Now everythings back to the way it was, and now that we’re selecting this more specific H2 heading inside of a project description, we can change it. So if we want to change it to pink, we can make it pink. And notice how it’s not changing anything else in our project. It’s not affecting these H2s. That’s because it's affecting all H2 headings when nested inside of a project description. Now, that’s advanced. It’s a really specific way of styling. You don’t have to have separate H2s, H1s, you don't have to have these things separate styled differently inside of all of your rich text fields. We’ve chosen to do that because we want to make some specific changes to H2s inside here. First off, we don’t want it pink. We’re going to remove that color here. We also want it to be a little bit smaller, let’s say twenty-eight pixels, with a height, let's use unitless one point one hyphen. And now we want to do the same thing with the paragraphs. Let’s select our tag, the paragraphs tag, and we’ll choose the nest selector option here. Let’s press that. Again, we’re only affecting what paragraphs look like when they’re nested inside of a project description. And we’ll make a couple changes. Let’s use unitless again, maybe one point three hyphen, one point, four, five, that looks pretty good. And let’s change the font size a little bit, thirteen, and we’ll change the color. Let’s reduce the opacity, this color, to triple A minimum, which is seven point one three. That looks pretty good.
Maybe some more space if we select this heading again. Let’s add some space at the bottom, thirty pixels. Now, two more things. Let’s delete this rogue heading, delete. And the last thing, let’s select our project description, let’s select our rich text field, and let’s link it to our Collection. So, if we go into our cog, get the text from project details, it’s nonsense. It’s lorem ipsum but it's correct and it's linked to our Collection now. And to prove that we can go through, we have unique Collection items, with unique lorem ipsum for each of them. Let’s go to our meditation app, that has its unique lorem ipsum, with its H2 and its paragraph. And we have the social network with its unique lorem ipsum with its H2 and its paragraph. And these pages are automatically being generated based on what we built so far. Now two things to note before moving on. One, this H2 is not aligned to the top of client. To do that, we’ll need to unlink. So we can just quickly ulink, and select our H2, again we’re selecting all H2s when nested inside a project description. Let’s just remove that top margin, and that’s better aligned. When we’re ready, we can just select the project description, select that rich text, and link it back to the project details.The second thing to note is that we want clients to be able to click through and actually look at the link of the completed work in our portfolio. So, to do that we’re going to add a link underneath.
Now remember how we set up the structure. To the left we have this Div block, with labels and the info underneath each of those labels, and then on our right side we have this rich text field. We want something underneath that rich text field. So just like we did on the left, we can use a Div block to organize our content. Let’s put a Div block right in here, and by default a second row is created. We don’t need that, so let’s just grab our project description, and put it in Div block. So two Div blocks, the one on the left, is our left cell, contains all this information, the one on the right, now contains our project description. Let's add one more thing underneath that. Let’s add a link, we’ll add a link block, and we’ll do that right under the rich text. Now, two things we’re going to put inside that. Command K, text block. One more thing. Command K. Image. Let’s choose our image, we’ll go to choose image, we’re going to use that little arrow we imported earlier. Let’s make it a little bit smaller. That looks pretty good.
And for our text, let’s change that to View project. Now if we want these things side by side, there's a number of ways to do it. Let’s just select our text block, and change it to inline block. We can say this is text inside link, and of course, we can add some margin on the right to push off that arrow from the text. Maybe decrease that arrow size a little bit more, we might want to set some negative margin to pull it up slightly, maybe minus three pixels, or minus four. That looks pretty good for now. We can always go back and tweak later. With our link block selected, the parent element here, let’s make sure it’s linking to the right place.
Let’s go in and get the URL from our projects, so the place it’s going to take people is our project link. That means when someone visits this page, social network prototyping, and they read the project description, when they press View project it’ll take them to the example project, to the link that we specified for this project. Also, if we want to open in a new tab, how do we do that? We check the box that says open in new tab.
But that’s our project description. Let’s add our multi image grid. And we’ll do a basic version of this for right now.
Let’s go in and add a Section, again we’ll add one underneath our other Sections, and we’ll add our Section class, Section. We’ll go quicker here, Command K, Container. Command Enter. Let’s add the Container class. And we want to add one thing inside our Container, it’s a Collection list. So we’ll do Command K, Collection list, return, and we can grab from our source, we can grab that multi image field. Let’s press project images, and by default we can’t really see anything inside. We need to add an image. So let’s go in and add an image. We’ll drag it into any one of these. Let’s do this one. And as we know from our Collection list earlier, we can get that image right from our Collection. Let’s select project images. Now, they're very large by default. That’s okay. But how do we make it not full width? How do we make it a grid? Well we can just select our Collection list right over here, and we can press grid. And just like that, we created a two-by-two grid. It’s desaturated, and washed out. That’s because we’re editing the grid. Press done. No longer desaturated.
Let’s name our Collection list, so it doesn’t say Collection list two, let's name it Image Grid. And something to note, at any time, if we go into our style manager here we can see there are some things we haven’t named properly like image two, image three. We can go back as we want to clean up, and rename those things. For now, let’s do the best we can to keep things organized. So this is an image grid, and if we want to control things like the height we can do that. So, by default it’s respecting the aspect ratio of each of the images. But, sometimes that's not always going to be the case. So, the width is taking up that cell by default. The height, let’s set it to four hundred pixels. And again we learned this before, we can do one hundred percent width, and we can use object fit. Let’s use cover. And, that allows us to change the height, just holding down Option or Alt and moving left or right to adjust the height on each of these images. And the grid is conforming. Now, one thing to note, we can edit our grid, let’s go to edit grid, and let's change our grid gaps here. Let’s do, we can do no gaps whatsoever, let’s do thirty pixels to keep it consistent with our other padding and margins options in this project, let’s do thirty on all sides. Press done and now we have a two-by-two grid. Now if there are more images we add later, it’ll continue to add rows. We can always, with our image grid, with our Collection list selected, we can always limit the number of items. So we can limit to two. Notice how that only shows two inside of our gird. We can do four. Let’s keep it at four right now. That way if we add more images down the road, if we add more images to this client project, it’s not going to overwhelm our design and create rows upon rows upon rows. Just two.
But that’s our multi image grid. Let’s move on to other projects. And again, these are going to link out to other projects Megan has done. Let’s collapse this Section, and add a new Section underneath. We’ll put it underneath this one. Command Enter, let’s add a class, Section. We’re getting good at this part. Command K, Container, add a class, Command Enter, Container. And we’ll also add another Collection list. This is going to be a list of all our other projects. So we can go to source, we can go to CMS Collections, we have this project Collection right here, and automatically its been populated by all of our projects, including the one that we’re on right now. The social network. That’s okay we’re going to limit it in just a moment. So let’s build this out. Let’s select, let’s go and open up Container, Collection list wrapper, there we go, Collection list. Let’s make this a grid. There are three columns, and only one row. Let’s remove that second row. Now, it’s creating an automatic row by default because it’s showing four, but we can quickly limit this.
Let’s go into our element settings, and add a filter. This lets us choose for our project, we want to make sure that our project is not our current project. The current project is social network. So if our project is not social network, it’s not going to show social network down here. Just as if we switch over to investment app, it won’t show investment app down here. The other thing we can do before we move on, let’s name this "Other Projects". And as we know, all we have to do is design one of them and they all design themselves. Let’s go in and add an image. We’ll get the image from our Collection for the project image, and just like that, we have an image for each of our projects. Again, these aspect ratios are not the same. So we could select one of them and say, project image, width one hundred percent, height we’ll say three hundred pixels, maybe three hundred fifty pixels looks good, and let’s of course use object fit. Let’s choose cover. And underneath the images lets add a Div block. We’ll grab a Div block, we’ll add it underneath, and we’ll set a background color, we can grab that background color from our projects. Let’s grab the project color so each of them corresponds to the color we set in the Collection. And we’ll add two things inside each of these Div blocks. We’ll add the type of project, let’s do a text block. And we’ll get that text from, let’s move that up here, we’ll get that text from the type of project. Close that out. And we’ll do the project name, again Command K, we’re opening up quick find here, another text block, and project name. Let’s style it.
So with the first one selected, in fact, it might save us time, it might be easier to edit this if we select our Div block first. Add some padding. Let’s do thirty pixels on all sides, for our top one. We have a great style up here we used for project info. Let’s choose that, let’s use that class, project info. We can use a combo class, let’s use other, so we can remove that margin, we don’t have to use the same margin we used on the original project info. Maybe add actually a little bit more, maybe ten pixels on the bottom. Then for our second text block, let’s add another class. We can even use our project heading from before, project heading. That’s not how you sp- no- do not ask again. Heading. Let’s add a combo class smaller, and decrease that size a little bit. That looks pretty good. Maybe a little less space between project info, let’s do maybe five pixels here. And two more structural changes before we’re done with this Section. Let’s add a heading, so we’ll go in and grab a heading, let’s place it inside our Container, and that can be hard to place on the canvas sometimes. So let’s just drag it into the navigator underneath Container. This’ll be an H2, and we’ll call it "Other projects". Now, let’s add a class, we can use the class we originally created earlier in the course, we can just use heading here, has a nice margin underneath of sixty pixels. That looks pretty good in this Section. The second thing we want to do structurally, is make these clickable. We want anyone to be able to click on the UX design, this architectural website, or the social network and actually go to see those project details, to see that project page.
So how do we do that? We use a link block. We’ll drag a link block right into the Collection item. And all you have to do is move the project image, and that Div block we’ve created, inside the link lock. The link block essentially turns anything into a clickable link. Anything inside a link block becomes a clickable link. So, with our link block selected let’s link that, not to a URL, but this little button right here. Which lets us link to a specific page, choose a Collection page, we’re going to choose current project. And here’s what that means. It’s going to link to the current project that's associated with that link. So if we click on architectural website, it’ll take us there. Lets prove that. Go into preview mode and we’ll click architectural website, again we’re on investment app. Let’s click architectural website, and it took us to architectural website. Go down here, meditation app, it takes us there. Go down here, investment app, you get the idea.
That’s one more topic down. We’re on to our last topic which is adding our Symbols. This will be the quickest topic because we’ve already created the Symbols elsewhere in our project. So all we’re going to do is add them to this page. Let’s go into our Symbols, and we’ll add our Navbar, we’ll add our Navbar right in the page body at the top. So, Megan Garcia portfolio, that’s consistent. We know about our footer, let’s add that, let’s grab our footer and put it at the bottom of the page underneath all the other Sections. That's good. And there's one thing we’re missing which is of course, our contact form. Now, watch what happens when we let go. It takes up the full width by default. Our pattern here is that we want that contact form to exist in a Section. Now, the Symbol doesn’t include a Section. It’s just the form itself, plus all its children .You can double-click, take a look inside, that’s the form block, and all the things inside that form. So, to do that, let’s do what we’ve done for the rest of this project. We’ll grab a Section, we’ll add the Section class, Command K, quickly add a Container, Command Enter, let’s add the Container class, and then we’ll drag this contact form. We’ll drag it right into that Section, right into that Container. And that is it. Now, we need to make all of this responsive but first let's step back and recap what we just did.
We built not one but four different pages using magic, and this will get even more important
in the next few lessons as we wrap up and add additional work to the portfolio.
We built our hero Section, our project details, our project description, we built an image
grid, we listed and linked to other projects, and we added our Navbar, our footer, and our
contact form. Grimur?
[Grimur] Thanks McGuire. I’m a bit distracted. I’m shopping for another Theragun so I can dual-wield, but I’m also checking out hashtag #21DayPortfolio and I’d love to see your project pages for clients, or website rebuilds, design work, but for now, McGuire, type in your credit card.
