Teaching Webflow To My Dad

Completing our revisions

eye icon
35
Min Read
By:
Joseph Virtue
teaching webflow to my dad episode graphic number eleven

Summary

In this episode we will knock out our revision list we made during the last episode. Now is our time to get everything perfect on our desktop breakpoint before we start making our website responsive.

Watch Here

Listen Here

Weekly tips

Complete revisions one section at a time

Use vertical padding for section spacing

Have a list of revisions so nothing gets forgotten

Assign areas to complete  vs client edits later

Complete grids from left to the right

Transcript

Joseph: And this episode, we are going to implement the changes we discussed in the last video. So we're going to try to tidy up this website and get the desktop version completed. Really?

So let's pop over to your screen. All right. So the three things we wanted to do in the nav bar or. I add a logo change the link font size or change the links font, and potentially the size and then add colors. And then we don't have, I don't think, did we add a new, did we add a max width to that div block that we replaced the container with? I don't know if we did so we might have to don't recall change that. So change all the, all right.

So if you want to. With whatever you want to start with and try to do stuff, and then let me know if you need help, otherwise we can just get cracking.

Joel: Oh, that's so very trusting. Okay. Do we want to address the overall issue of the font that we had as a conceptual issue and either change the font to start with? Or do we want to just tackle that section by say.

Joseph: What do you mean? Just put it in our case,

Joel: the Scotland font. Yeah. Do we want to just do lowercase? Is that kind of a, can we do that as a kind of, alright.

Joseph: The question though, is, are you need to change the font altogether if it's not legible at that size?

Joel: Yeah. All right. And we can certainly try we'll we'll do some test run of the

of the of that off. We've got a nice little elements tab here. Don't we?

And then we can choose that guy. And there he is. All right.

All right now for the sizes.

Is this where we want to add?

Joseph: Probably because this is a head I'm like, I would probably just create a new class.

For that actually will actually go into the text already, which double click in your text. Let's see what comes up. So just regular paragraph. Yeah, it's pulling it from somewhere else. So you could either give it a custom class of just navigate.

Joel: And then do we want to, how do we want to assign this by weight or by just size and REMS or what's our solution

Joseph: for, yeah, you're gonna

have to play around with it. Yeah,

Joel: that seems a little punchy to me.

Alright,

I think I'm okay with that parade now.

Joseph: All right. So then you'll just want to go in and add the actual links you need, the actual tabs and stuff,

Joel: or. Let's go to all so we got a videos of one, and I guess we could have, we got the contact. One could go to the contact form. That kind of makes sense. The, so we'll change that to the spotted messy form. We already got the videos. Let's take one to the NFTs. So that's the whole big function of this. Oh, this website. So let's change that to then NFTs and then let's see,

it was to a section. And then that takes us to that NFTs.

We already did the videos. The contact will then take us to the form, although we don't want to call this contact anymore.

I saw nessie. Oops. I saw Nessie game.

Joseph: That little toggle in the top, right? Oh, this one here. Yep. There you go. Okay. All right. Now just the background color. Okay.

Joel: And let's see, I think we've, I like to try maybe the red or the gold that we liked.

Joseph: Probably not because if you look at your logo, so you have a white.

So you probably want to match that.

Joel: And so it's not a transparent image. All right. So white, it is.

Joseph: And either way we would probably not want to use that much red or yellow would be very hard for people to read stuff on that.

Joel: Alright. Okay. So do we need to do a. Now since it's just white, we don't need to create a class for that. Do we?

Joseph: You so on when you're, this is a custom item, nav wrapper is a custom class. So yes, you would just go style directly in the nav. In the style panel. You don't need to add a combo class.

Joel: So this isn't caught this isn't our off-white. This is actually just straight up white. It's how do we get to a straight up white here in this?

Joseph: It's, I think white is ffffff or is that black? I can't remember.

Joel: It's pretty white to me.

Joseph: All right. So you're you got it? Let's try going to the nav bar since that's the paired element. Cause the entrance in the background color there. See what that does.

There we go. All right, there you go.

Joel: Much better.

Joseph: Alright, so that's everything on the nav bar. So now we're onto the next section.

All right. So the next section, the three things you wanted to do were make the image bigger. So make the section bigger and then do larger text and then increase the contrast. Okay. All right. So I would delete the padding X huge and type in, and try to go for a big.

Joel: What are my options?

Joseph: I would just type in x to start

Joel: X, X. Huge. Yeah.

Joseph: All right. So that's a rough start. We also wanted to adjust the you want to do some stuff to the text. You want to make the text larger.

So if you want to work on that and then work on your contrast and maybe then you're sorting and stuff that might help. So you can probably give that text to accustom class, so it doesn't mess any of the other settings. So I'd probably go call it like header copy or something, or whatever, as long as what. And then I'd probably up the REMS on that probably 10 or 12. So now you could either decide to change the color you have to like the red probably that would probably give you the most country.

And then you could align it differently if you want it to inside your tech center. If you wanted to put it near the top, you could probably try to sort that

Joel: this is better. At least this is more legible, but I don't care as much

Joseph: gear. Okay.

Joel: Yup. Okay. All right.

Joseph: So your next section is the news one and it looks like you wanted to make the image smaller,

correct.

So we can try to re shrink the class to a small

Joel: yeah. For some reason it really just was this medium just somehow wasn't kicking

in.

Joseph: Right there you go with her and I'd almost well. No, it's real. It's pretty good. All right. Boom news done. All right. So on the next section, you were going to try to make the section bigger, so you can see more of the. And then we're going to do larger text and then add in more text.

Joel: All right. That's enough for at least that gives us a good chunk of the map available.

 Oh, yeah.

Joseph: The h two. No. So you don't want to know let's leave that cause you don't want to mess with settings. Cause it's a global class. You just want to click it and then do the setting talk and I toggle and then just up between each two here. Yup. There you go. And is that enough of the map showing, do you want more of the maps so that it feels like a full section? Cause you could up the padding on the petting vertical.

Joel: I think that's good. I actually kinda liked that. That it's

yeah, that's good.

Joseph: All right. So then on the next one, the NFT section, it looks like we wanted to add the little bios in there. So we will, once you finished that we will want to go in. And bind some text. So if you want to grab the first item, the first field, all and we are going to want to command E and add in a paragraph.

All right. And then we want to get texts from Nessie nFTs.

Joel: Where did we do this?

Joseph: In your down, just breaking that little box and then just select the description. Okay.

Very good. So then the only question is how do you want to style it somehow? Are you happy with that beneath it? What else do you want to add of those different elements you've created?

Joel: We want to have the font a little bit smaller.

Joseph: Okay. So then what we'll want to do is give it a custom class up in the settings and do a CMS copy, and then you can change the font down in the REMS, right?

Joel: Science room. So go to 0.7, five.

Joseph: You want it smaller?

Joel: Yeah.

Joseph: Yeah. And try that.

Joel: All right. That works.

Joseph: Okay. Do you want it style? That does look weird that everything's not centered in the box. So one thing we could do is grab the actual item and maybe center it via flex box or something. So grab. Item and yeah, there you go. And then just turn it into a Flexbox and center. It are there you are right there. Yep. That's a good child. So you can just center it actually undo that. I'll do that real quick. Just try to setting those justifies and centers. See if that does anything for you. There we go. But it did not center the image downward. I'm confused on that middle row. Middle icon.

Joel: Yeah. There's a few here that it didn't.

Joseph: Why don't you undo that? Let's undo that command Z and let's try doing Flexbox.

Joel: Okay.

Joseph: And then do vertical and then yeah, north the middle one. There we go. All right. And the question is, do you want a little bit of spacing above the paragraph? So on the bottom of your div, on the bottom of the div block, so grab, so I grabbed the div block where the image is in, and I would just add a little bit of yes. To grab that. And I would add a little bit of margin on the bottom, like 0.5 or maybe even 0.2, five.

Okay. That way, just know the Texas right over it.

Joel: And then we could even add maybe a little bit of margin between each of the grid items yet. Yep.

How would I do that? The entire collection.

Joseph: Yeah. So describe the entire collection item. So next year, dev. Don't worry about the navigator yet. Just click that and then add some on the space, some margin on the bottom probably. Or however much you want. That's true. Alright. And then did we name, did you name each of these the nFTs, just trying to think of what else information we can pull out.

Joel: I don't recall. I. Yeah, I don't recall what other field names we

Joseph: had. Let's go looking at CMS real quick. Potentially. We could add the name of them above it. All right. So let's just open one random one.

Joel: Yeah. So there's a name

Joseph: so we could put the name above it. That would look nice. So we can then grab the. Collection command E grabbing I'd probably got up in a heading and they'd probably put that as like an H six or H five or something further down the road, rather like a little bigger, maybe age four, and then get texts from the Nessie and F. The name. And then I'd throw that at the top of the I drag that up to the top of the item and you might need to do that in the navigator if you want to collapse the maps so we can see again where you're at. Perfect. Alright. That looks pretty good.

Joel: Yep. All right. Title.

Joseph: So the next section then, cause that was all you had in that the form section, we wanted to make it not as wide, so we'll probably want to grab the former. And probably adjust the width on the form wrapper or actually, is there a container large? Yeah, you probably could do a container small again. Boom. Thanks. Pretty good. All right, so we wanted to change the button.

So I want to look at what class that has. That's just a submit button. So we'll want to just give it a class green button or whatever button dash green or button is green or whatever you want to do.

Actually just go name it a button. Sorry. Just name it button. Cause we should have that color already applied. No. Oh yeah. They're good. Yep. Yep. That's good. All right. All right, so we did the button, so we wanted to change up the field order to make it little more sense to probably put the email. And then we wanted a header on the hole in inside the form. So I'd probably do that outside the form block. I guess you could leave it there if you want it there. So I'd still do it inside the form component. Just above the form block. There you go. Reality. There is perfect.

And then the question, the only other thing we were going to do is maybe up the, a font on those. Thanks. Unless you don't think that really matters. It's just more, a little technical.

Joel: My guess, if we take out the upper case, then they probably are pretty tiny.

Joseph: All right. So if you TA start at the top one and we probably just want to give it a custom class of form copy, and then we can go on the rim sizing and change.

Probably got a little smaller, like 1.5 maybe, or maybe two, I guess it is coming up weird on mine, but he had to, I guess either way. Yeah. Wonder whatever you got is fine. And then just add all those other classes.

And then while you're doing that, do you like the width of the submit button? Do you want it wider? Do you like that? It's that.

Joel: It is definitely two square, my opinion. So you'd want to round it. Y I would like it wider than it is tall.

Joseph: All right. So somehow that one you just did when you changed the texts on that, that did not look very well or very good.

So I would undo that one and probably just give it a separate class, or maybe you just leave it as it is. It's so I would do okay, that's fine.

All right.

So make it a little bit, so let's click the button. So let's go to width and do 50%.

Okay. There we go. And then I don't know if you like how the submit text is small in there. Oh. Cause we didn't change the class on that text. Oh.

So you have to double click the button, text double click the text.

You may have to X out of that setting.

I actually wait, sorry. You can actually, when the button selected, we can go in the style panel, my bed and just set the Ram higher. And now, because it is his form, it won't affect anything else. So you could go to three REM. See how big, yeah, there we go. That's not bad.

Alright. There we go. It's pretty decent. And if you want to collapse that section, the navigator.

All right. Move you back there. All right. Let's skip this one section, cause this is gonna be the longest section. So let's skip that section and let's go down to the videos and just add in your cell. The two things you wanted to do was add a six video and add a header above the videos.

Joel: Okay. Oh, yeah. I want to add a duke block for the header,

Joseph: because it's only one item I would, yeah, I would just grab so quick. The padding vertical button. Yeah. If you click that and now you can add the heading and then it should appear above the videos or not. Okay. I guess you have to drag that.

There you go

and then tell you happy with the size of it. Are you happy with the left align? Are you happy with the, do you want padding underneath of it?

Joel: I think I probably just want to center it.

Joseph: Okay. So then you can make a global class. You can add the global classes, text center, I think align center, existing classes. There you go. Oh, no, I guess not text align center.

Okay. All right. So then we just need to add in six video.

Joel: Alright. And so then we click on this one and then we do video.

Joseph: Nice. And then let's drop down to the forms section.

Joel: Footer.

Joseph: Yeah. Sorry. Yeah, the footer. All right.

So for the footer, we decided we're going to do three sections. So we'll probably want to add a div inside the footer pro and then probably make it a grid that has three rows, columns, think three columns. And then one. So probably want to call that foot or rapper or something. However you want to name that and then turn that into a grid.

Joel: So we're calling this the footer rapper.

Joseph: Yeah. Okay. All right. Throw it into grid. Give us three columns. One row.

And work on this this is a grid. That's her, this where we're adding. Wow. I just spaced here. So you get a little while, sorry. Yeah, you don't need an element. Yup.

Joel: Is this where we're just adding?

Joseph: Nope. You're just in your layout tab. So you got basic flexing grid.

Joel: Oh yeah. Wow. All right, here you go. All right. Space for that one hard. So you don't want to leave it on many rows and columns.

Joseph: You have, you want to leave that section open that you just closed out of Yelp? Click that. Perfect. There you go. So we're doing a three by one,

Joel: three column one row.

Joseph: And then give change the gaps to run measurements

no up in your current settings. There you go. Y'all.

Okay. Okay.

And you're done with that thing. Then the one thing I'd probably do is just guessing you're going to probably want to give one REM padding on every side,

Joel: there was a way to

Joseph: do what you can do. So go back, just click on the blue, the one revenue.

And then hold and quick shift. There you go. Perfect.

All right. So now we want to add into those three. So here's what we're going to do in the three things. So the first one is going to be our logo. The second one is going to be the anchor links to go back up. And the third one is going to be the Scotland

flag.

Joel: What do I know if I'm working on a grid, click on something here. I say, you're ending the block.

Joseph: What are you trying to do at the moment? So you're going to do image Dave image.

Probably three items.

Joel: Yeah. So I was going to answer that I was going to work on the image first. I was going to start on the far right one.

Yeah.

Joseph: So in grades you have set in the. Unless you add the other elements, you could do image, grid image, and then just work on editing the third one, but you do have to start

left to, okay.

Joel: All right. And so we don't have an image yet, so I can, but I just leave that folder there.

All right. So

Joseph: then in here, I'm just trying to think how the best way to do this. We will probably want to do text links. So inside this dip, I would name this dip first, probably like footer, NAB, footer

dash now.

And then what I would do is I would do command E and I would add in a link, a text link. Okay. Really losing your video. It's glitchy. So I think after we finished this footer section, we'll probably just wrap this video up and do the origin one in the next.

What are you doing at the minute? What are you working on?

Joel: I got a lag in my internet connection here, something.

Okay.

Yeah, we'll just give it a second here.

Joseph: All right. This is pretty straightforward. So I think let's just end the video here through technical issues because you're moved around the screens froze. All I think we're, we did everything except for the origin tab.

So we'll do that and probably we can either do or start working on the responsive stuff or work on the interaction. So some fun stuff next. Okay. So good job.

Thanks for reading!

Previous post

There are no previous posts

Next post

There is no next post