Webflow for Beginners

1. Introduction: Hey, Web flow community. My name is Jose a condo. I'm a Chattanooga, Tennessee based Web designer and developer, and I wanted to create a course for folks who want to get into Web developments. But maybe developing code isn't for you. So maybe you're a very visual person, actually writing out the code, it just doesn't quite compute. Or maybe you tried a foreigner Distant stick. Whatever the case, what blue is an amazing platform where you can build totally custom websites. But you don't have to write any code while you're doing it. I'm specifically targeting beginners. Eso Maybe you have zero knowledge of HTML and CSS programming languages. That's okay, because this course is we're gonna be starting from scratch from the beginning. And even if you're an intermediate user, you get a lot out of this class because recovering some pretty crucial concepts that are going to help you with your projects that you have currently. In my experience, it's way easier to learn something new when you have a hands on project that you can tackle . So for this course, I designed a one page website for a landscape photographer portfolio website, and we're gonna be taking that design and developing it into an actual live, developed Web flow project. I want you to go ahead and follow along so maybe as I go through each lesson, decide by side to be working on your own project or after each lesson. Go ahead and take some time toe. Follow on what we did and create your own. Now you can stick as closely as you want to the design, or you could do something totally unique. Like, for example, you can do word for word or image for image. I've got all the assets uploaded to the class description, or you can change the images or the font of the typography to kind of suit your personality . Or you can do something. Like I said, that is totally custom and different from the design. Whatever you do, whatever is easiest for you to learn, do that and then post it to the class project so that I can take a look and that if you have any questions, post them there as well, and I'll try to help you as best as I can before we get started. I just want to give a special shout out to Clarisse Meyer for this project. I use Cleary's photos on unspool ash, and they're just beautiful, gorgeous photos, typically of kind of like the California wild spaces. And she did such a great job. I encourage you to check out her profile and look at the other work that she's done. And so if you're ready to learn Web flow and ready to strike developing websites, let's jump into our first lesson. 2. Structuring the Website: So in this first lesson, we're gonna be discussing how to structure our Web fluid projects. We're going to do that by talking about HTML. I don't want to get into it too much because, um, I want to jump into up close soon as possible. But when we do jump into whether that's helpful, toe have a little bit of an understanding of how this works so that we know how to structure the websites correctly. A quick intro, The screen that we're looking at. This is a software called Fig MMA. If you go to figment dot com, you can actually create a free account, and you can use this software for free. I think you have to pay for it once you start using it along with a team. But so long as you're using it solo as an individual designer, you can use it for absolutely free. And in the class description. All we have a link to this project so you can access it and use it as you work on your own projects out pretty cool. All right, So, um, there are three main programming languages that Wellfleet uses when it's exporting the code for our website. When is hypertext markup language or HTML? I like to think of it as the skeleton of the body. It's what gives our website. It's structured. The second is cascading style sheets or CSS. That's kind of like the skin of the body. It's what makes our website beautiful to the eye, visually appealing and then third, ISS JavaScript. It's kind of like the muscle of the body. It's what helps our website to do, um, complicated things or perform actions. Luckily, we don't know how. We don't need to know how to write any of those things Weblogs doing that for us. But it's helpful to know a little bit of the underlying principles. We create our project, all right, so let's get started by actually going through the website and talking about how we're going to structure it. All right, so let's zoom into the design and let's talk about how the content is organized. So first up is the header and headers are usually at the very top of the website page, and they introduce the content below it. This header has this beautiful background image when it's big and beautiful and full screen like this. It's called a hero image, and inside of that header has nested a title nested as HTML speak. It means that a element is inside of another element, and that title introduces user to the content of the website. There's also a navigation bar or knave bar. It looks like three different elements, but they're actually one element that contains three sub elements, if you will, Um, and then there's a caption on below for the image. Next up is a portfolio section that has is or nested inside of it are photos of the photographer has taken. And it's later in this ruling beautiful what's called a Mason regret that was made popular by Pinterest. Other sites like that where, instead of having like a very static grid of squares, you've got this staggered layout of images in their original ratio. And that's just a really beautiful way to lay on images. I can't stole that for For this this section is an about section that has a photographer's image and some copy about hm. There's the services section here that has these little cards with representing what services the photographer offers. Second to last is a contact me section and I wanted to make sure to include a form in this course because forms are, of course, one of the more important elements for website because ultimately Web sites are about getting people to connect with us. Eso want to make sure included that. And there's also, um, way to reach out directly and lots, of course, is, um, the footer. It's super simple. It just has the name of the photographer, and the copyright disclaimer buys him back out. But not we've gone through and kind of understood, like, Okay, these are the content blocks of the site. How do we interpret that and use that for structure or weapon? It project. Well, I'm glad you asked. Um, so I created this little HTML overlay for the website, and you can see here. What are the different elements that we're going to need in our workflow project? Each of these, uh, um, white words like header section. Those represent HTML tags that are gonna need to be in our project. So we already talked about the header. Um, and so that's kind of laid out here in the start color. And then, interestingly enough, main is 1/3 element that houses or in essence, under there, all these sections. So So really, there's header, main and footer. And then inside of Maine are these sections. So that is a great way to think about most websites, actually, So most pages that you're gonna lay out, they're going to need to have navigation, like you need to have a header at the top. There needs to be main with sections nested inside of it, and they needs to be a footer. They're gonna be exceptions, of course, but that's the kind, like general rule for how your websites should be laid out. Okay. And then before we jump into web flow, I want to talk about why is it important to use this good? Our best practices html structure the first has to do with search engine optimization or S E O s CEO has to do with, um how easy it is for your website to get found on search engines like Google eso. If we leave this out using best practices, HTM Oh, Then it's gonna be really easy for search engine crawlers to go figure a website and figure out what your website is about What is its content? Um, let me give you an example. The fact that we've designated this as the header, but they had a HTML tag, and then we're gonna talk about this later. There's an a headline. One tag appear at the top. It's kind of hard to see, but this piece of text here, the crawler is going Oh, this is the header. And this is the title inside of the header. That means that the website is about what this thing is talking about. Um, So by using proper HTML structure, we're making it easy for search engine crawlers to understand what our website is about. Secondly, it makes it easy to collaborate with other people. So this has happened to me where you may get hired to work alongside somebody else or somebody hires you and they want to participate in the development process, or you're coming out for somebody was already done work, and you're kind of venturing out what they've started. Um, when you use this understood best practices system, you're making it easy for somebody else to figure out. Okay? This is how the website is built. If you kind of create your own ad hoc system. It's like you wrote your own rules for how to build this website. Then somebody else is gonna have toe learn that that system and figure out how to use it. Toe build on your work. And that's really, really tough because you don't have. You typically don't have that person there to ask them how they built things. You're just going off of looking at their project. So by using a good XML structure, you're making it really easy for somebody else. And then, third, you're making it easy for yourself. So by laying out using this HTML structure, we're making it really easy for us to go in and at our own content. And there's really kind of, like, bite size chunks. So just by adding in the header that made with the subsections in the Footer, it's easy for us then to go in and start. I didn't content inside of those boxes, so that is why it's important to use good HTML structure. All right now, let's jump into a weapon and actually get started adding stuff into our project. All right, so let's jump, enter rifle and let's start laying out these elements into our Web flow project here. And this is a brand new practices. Nothing inside of this currently. And I want to do a couple of things before we actually start adding things. One is I want to open up the navigator, Pano and Pennant to the side. So if I click Z, it's gonna open up the navigator and currently it's unp in. So if I click on, um, the art board here, that's gonna disappear. So just for our sake, I want to make sure that you guys can see this as we add elements, I'm gonna pin this And then over here on the right on the inspector panel, I want to make sure that element settings are selected. All right, So and the navigator, you'll notice that body is currently selected and body is an H to my element. Just like header and section and footer are, um and essentially holds all of the content of our website. It's automatically there when you create your Web flow project, and so we really don't have to worry about it. It's how do you add stuff to your project? There are actually three ways to do that someone is is to simply click the add element. Um, little icon there, it's gonna open up Our ad panel on what we're looking for is dip lock. Another way that we can do it is click A and they block is right there. And I'm just gonna click and drag and drop that onto our board. And now you'll notice on the navigator that a dip block is nested inside of our body. All right, so another way we can do this is to make it easier on ourselves is we can copy and paste elements just like you would if you were copying and pasting text inside of Microsoft Word or something. So I'm gonna click command. See, I believe it's control. See, on a PC and by clicking on body and click and V, it's going to paste that same deadlock inside of the body tank. All right, so, um, now we've got to make sure that these dead blocks have the correct HTML tag. By the way, did blocks are just like simple building blocks of HTML. You can nest things inside of them. They're basically like boxes that can hold things inside of them and you can assign them attributes somebody click this 1st 1 and over here on the right hand side you've already selected are elements, settings and under tag. I want to change that just from a regular Dev when they want to change it to header notice in the Navigator. It's not reflecting the change that we made next. I want to change the middle 12 main and last I want to change The, uh, last did block two footer. By the way, you'll notice that figure. Address aside an article or other HTML tags. We didn't talk about those. I just wanted to focus on the main ones. So let's leave footers selected. And then if I go back to my design file ah, you'll remember that there are four sections inside of Maine. But to do that, we're going to use the third way of adding elements to your project. And to do that, you can just click command, assuming that's control E on windows. But, you know, I'm not entirely sure, but anyways, I've got the search tool bar opened up, and I could just type to find um elements. Tad So I know that I want a section. So if I just type s e c T it's gonna filter down to that element. And I could just simply enter. And you don't actually see anything here because section is nested inside of death. Ah, but over here on the navigator panel, you noticed that there's not a little toggle aero for main have a toggle. That down section is a nested inside of it, just like we wanted, Like, click on that and copy it. I can duplicate it three times. So that we've now got are four sections inside of it. All right, So that is it for this. Of course. We talked about HTML and we talked about how to structure our workflow project correctly. And so and the next course, we're gonna be working on adding content to our header 3. Setting up Fonts and other Project Settings: in the last lesson. We talked about HTML and how to use a team of principles to structure our project. And I mentioned that in the next lesson we'd be working on header content. By the way, I used the word course. Sorry about that. I meant to use the word lesson, but anyways, I got ahead of myself a little bit because what we really need to do is ah, going to the project settings and set up a few things, most importantly, our fonts. So it's going to do that now, and we'll get back to the header in the next episode. Next lesson. I keep doing that. Okay, so how many? Click on the Web flow logo over here and click on project Settings, and here in the tub are I'm a navigate to funds. What floor is made? There's pretty easy for us, and there's three ways that we can add funds to our project. The first is using Google fonts and I for not familiar. Google has a catalogue of free Um, I think what figure it'll exactly licensing is, but it's free to use commercially but just free fonts that we can use in our project. Um And so if you're not only developing but you're also designing this would be a great resource in terms of finding fonts for you to use. Um, And so once you've selected which ones you want to use, you would just click on the drop down, select the correct fun and add it to your project. Second option is to use custom funds, and I'm gonna highlight the file types that you would be looking for. So you can upload those file types to your project. I would just encourage you. If you do that, please make sure that you have the correct licensing so that we're not infringing on somebody else's copyright or their intellectual property. And then third is adobe fonts. Eso never get over to Adobe. And Adobe also has a bunch of fonts that their library is quite a bit bigger and in my opinion, a little bit more premium. But of course, that's something that we're paying for. It only comes with Adobe Creative Suite, but if you wanted to add ah, fonts from Adobe, you would click on your profile up here in the top, right? Get your A P. I token, and that would go here in this field. I don't want to scroll down because I've got some projects that are under a non disclosure agreement below here. But you'd add your token, say that token and then select a project down below, Right? So for art project, what are the funds that were going to be using? And, um, one thing I want to mention before talk about specific funds is that as developers, our goal is to make our website as lightweight as possible. We don't want any extra fat. Wanted to be lean and mean. Figure out how that saying goes. But anyways, um, the reason is that we want our website to load as quickly as possible so that, by the way, it helps with seo. So if your website takes a long time to load, search engines will push you down in the organic search results. If your website loads fast, it pushes you up, and particularly on slow connections or on mobile when people might be using, um, like just for G or five year whatever. Uh, websites tend to load slower, and so we want to make sure that they look as quickly as possible. Um, original mentioned. That is because And maybe this is just for me. But I tend to be quite, um, lazy about this type of stuff, and I know that. Okay, Gary Monde is a fund that I need to add. So the lazy part of me just wants to add every single font way in gear amount, because that would be easiest. Um, but if you wanted to be lightweight, which is the best practice, we should Onley add the font weights that we need on this case will be regular and regular italics. So we're gonna go back into our project and ah, in Google fonts, look for E B. Paramount and again, there's a ton of options here, but we really only need regular and attack Google. Uh, has not added, Gary managed to our project. And we actually don't need to worry about Monserrat because mantra is already a default part of the web flow designer so already included. When you goto advance in your project. So that's lucky for us. A few other things I want to talk about in our project setting before we get started. With the next lesson in the custom code section. I would encourage you to go ahead and act language code for your website. So what that does is, um let's the browser know that your website is in this language in this case English. So somebody is coming through a website and their browser is set up to a different language on I'm thinking particularly good crime. I know Chrome does this. It prompts them. Um, would you like to have this website translated That Scott a neat way of making sure that that happens. Um, another thing we want to do is go to s CEO, and we want to make sure that disabled weapons sub domain indexing is trying to on what that does is there's two ways to publish our website. One is to the workflow sub domain and one as to your custom domain. I like to do both and I like to use the sub domain, um, as both a staging you are around and a kind of testing ground once the project is live. So So before that project goes live for the website goes live twits custom domain. I typically published to the web blow sub dooming. I sent back to the client on asking to review everything. Make sure it looks good. They can also use the editor and the CMS, which we'll get to later. They'll get to that, uh, delivered to use those things on the web flow sub domain and make changes to the website before it goes live. But since we're using it as a staging Europe, we don't want search engines to crawl the sub domain. And we don't want users toe accidentally navigate to the sub domain as opposed to the custom dummy eso. By disabling the indexing, we're gonna prevent search engines. It's kind of like hiding that sub domain from from search engine crawlers. If you don't know what a sub domain and a root domain are, you can easily see it here. So this is the root domain. Uh, everything will always be dot web blow dot io again unless it's a custom domain. And then this is our subsuming Well, blow hyphen. Four hyphen. Beginners. Um, the other thing I would encourage you to do is go ahead and add your favorite cons. Eso they give you the sightings here so you would just need to create these files. I usually just use PNG's lips to the accident. Um, and upload that here, Um And then finally, one more thing that I want to do is if you go to hosting and scroll to the bottom there under advanced publishing, you want to make sure that s s l or enable SSL is activated. That stands for secure sockets layer. Don't ask me how I remember that. I just do. And essentially, what it does is it protects it protects people who are coming onto your website. Protecting their privacy as their on your website, particularly if you have been doing like e commerce or anything like that is very important . And it represents the, uh, http s that's often, uh, this right here. So that s means that this has a secure sockets layer certificate attached to it, and it's a safe site to navigate to. And if you don't have SSL, um, browsers will often say, Are you sure you want to navigate to this website? It's not safe, and you definitely don't want that on your project. All right, so that does it for setting up our site. Um ah, Obviously there's things that more things that we would do before we actually publish it. But for right now we're ready to jump into the designer and start working on the header. 4. Header Section | BG Image and Navigation: All right. So we just finished setting up our Web fellow project, and now we finally get to do some actual developing. Um, we're gonna be working on the header in this lesson. And so let's go back to the design. And let's talk about, um, what we actually need to concern ourselves with. So the first thing when I mentioned is the height and the size of the header. It's hard to tell because this is a design file, but my intention was that this photo would take up, um, the entire screen when the user navigates to the website. The technical term for that is thieve you Port Vieux Port is what you see in the browser below the address bar. And so this is a photographer's website. Not only that, but this is a beautiful, really stunning image that showcases so well what they do in their particular personality is a landscape photographer. I wanted this to be just like taking up the entire screen full when the usual navigates to it. That's one thing to keep in mind. Second, as the navigation bar up here at the top Second is the title just below the navigation bar and last is the caption at the bottom of the header, and you may have noticed that there's actually an overlay behind the white tax without, it's nice and legible. You'd see the blue bar. If I get rid of that, you can see how the white Texas totally disappears behind or in front of the image. I should say. Undo that. Um, all right, so now we can jump back into our project, click on the header and let's get ready to add our first CSS class. If you remember the first lesson we talked about CSS is kind of like the skin that goes on the body. That's what makes our website beautiful. It's kind of a gruesome image done that I think about it. But But what I'm trying to convey is that CSS is what makes our website beautiful and visually attractive. But how do we create that relationship? How do we create a CSS class and apply it to an HTML element? Um, what we do that through the style of panel over here on the right hand side. Um, so I'm gonna make sure that my head I selected you can click on that, um we can the airport. I can just click on it on the navigator and then in the selector field, you do one of two things. You can either add an existing class again. Just apply one already exists to the header, or we can create a new one. So I'm gonna create a new one called Hero. All right. And now the idea is that this CSS class, it functions kind of like a label or a bucket. So that any time I make a change in the style panel, it's gonna be reflected toe, whatever. I apply that label too. So you see over here that here is applied to this, um And so if I make a change, like, for example, I change the background color to black now my head or has a background color of black, So that's how we create that relationship. So the first kind of major change I want to make is, um, the height. Remember, the intention of the design was for that beautiful background image to take up the entire Vieux port. Well, luckily, CSS actually has a unit of measurement called Vieux Port s over here on the height. If you click on the little hyphen here, it's gonna be open up a drop down of all of the units of measurement offered in CSS. So we've got P X. You may be familiar with pixels. There is percentage. There are e EMS, EMS or ephemeral units. There's a view port with and Vieux Port height. VH is exactly what we want. It automatically assigned 75 to the height field. And ah, that's why this is not 75% of the view port. Of course, we don't want 75. We want 100%. All right, so now our header is taking up the entire screen. That's awesome. So the next step is to add our background image, and we're gonna be, um, making that change in the same area, or we added our background color. I'm actually gonna leave this black. I'm gonna add image and this popped open this little image settings motile and I'm gonna click choose image, and that will in turn, open our asset manager, um, in the asset manager, it will show images that I've already uploaded, or we're gonna go ahead and upload a new one and we're actually gonna use this image here. Um, click on that and it's showing us this really funky tiling. And the reason is because one tiling is set and because it's got a custom size or width of 125 pixels set, that's obviously not what we want, but we need to do set it to background cover. All right, so now the images covering the entire hero, but it's originating at the top of the image. And so overseeing is a bunch of sky. That's not what we want. Um, so the reason it's showing a sky is because we've told it, I want you to originate the image from the top left corner we wanted to is originate from the middle, so we're almost there. The only thing is, I want to see a little bit more sky so that our navigation bar title can fit nicely on top of it. And I want to see a little bit less I with the lake. So I'm gonna click on the top field here, holding shift. I'm gonna click that down arrow to go down 10 units and then letting go of shift. I'll just sit down a couple of times and something like 37 looks perfect. Now I've got plenty of sky to work with so that my naff barn title can go on top. All right, so that is the background image. Let's not add our navigation bar. So the nice thing about background images is that they're not really elements and enough themselves. What I mean is that we've added this back an image to our here on it, but it's not really taking up any room. It's kind of like we've taken and used as a wallpaper and plaster it to the back of Hero. But we can still have elements and side of hero like our nab our title and our caption, and they're gonna kind of float on top of that back on image. That's exactly what we want. So with here selected, I'm gonna click a to open up the ad panel, scroll down and grab the number component and drag and drop it into our project. Now it's nested inside of the here element. What's nice about these Web for components? Is that what Phil has looked at? These common elements like Nah, bars and Lightbox says, and sliders and it said OK, these are a part of a lot of projects and let's just create components so that developers can easily add them to their project, modify them. And they've already got some, like, baked and functionality so thes developers don't have to worry about adding that in with enough bar. What's really nice about it is the responsiveness pieces kind of baked in already initially . What? I mean, if I scroll over to the design, we've already looked at this, but the not bar. It's got the Lego the main lengths and then the social links. But on mobile, we've had to strip it down because this screen is a lot less wide with Onley Got the logo and the hamburger icon. Once you click on that icon nabbed Menu opens. But the night of our component makes it really easy to do all of that. All right, so the next time you need to do is style are not bar, and we're going to start with a little bit faster here, So I'm gonna add a new class called nah far and down here in the background section. Let's remove that gray color so that our background photo is showing up nicely. Next is we need to add some padding. We haven't covered padding or margin yet, but if I scroll up here in the spacing section, this is where we add padding or margin. And just like it sounds. Patting is we're adding space inside of our element. So it's not brushing up against the borders, and margin is space that were adding outside of our element. This thick border right here represents the borders of our element and, ah, stroll over to the design and go back to the desktop version. Double click on our nap bar and hold the option key down. You'll see that the software telling us, Oh, the not bars, actually 32 pixels away from the top of the screen, and it's 48 pixels away from the sides. It's another. We know that we can select snack bar, and we can add that to here, so we're gonna have 32 pixels of padding on the top and 48 on the sides. All right, so now if I hover over there patting, you can see at the top of the screen those I gritted Hatch, Hatch line touch marks. I forgot what they're called, but that's showing us how much spacing we've added to the element. Um, we're talking about the difference between padding and margin in a second. Ah, little bit more as we work on our nap flings. But the next thing I want to do is, um, work on this container element. So the container is actually Leah components. If I click a here's the container already inside of Web flow and it's got some stylings like our default a part of it. But I want to add I want to customize my own container so I might be able to control how wide the elements are in my own site. So with knives are selected, I'm gonna hit Command E and just type in D I and at a deadlock scoop that up above container. And then, instead of having the elements inside of web flows container, we're gonna be adding our own. So we do have a container, right? So now we've got our own container. Ah, the next thing we're gonna do is start styling theme nap links with modeling selected on the command return. Uh, believe that would be control entered on a PC and automatically set us up in the selector. And we're gonna create a new class called knave links. Once I start typing, have you'll see that? What flow shows us? Hey, you previously used this before. It would you like to use this one? And that's perfect, because yes, we do. What do you use that? Right now? All three of these have the knave like CSS class attached to it. Now, uh, our temptation would be to go ahead and start style and typography here in the typography section. But before we do that, we actually want to add some typography stylings to our body tag. So done here in the bottom, left or up here, we can click on body and over here in a selector, when I click that we've got this new element we haven't seen before, Body, all pages and what that means. It's it's saying, Hey, instead of adding a CS has class, would you like to style the body on every page that you create? That's perfect. That's what we want. Research body, all pages. And remember that I think this is in the first lesson, but the body element is a part of every website you create automatically. It's already there. And how is this all of the content inside of our website? In other words, it's the parent element, and everything on the Web site is a child element nested inside of body. Well, um, the way that CSS works or cascading style sheets is that any style that you add to a parent moment cascades down to its Children. Let me show you exactly how that works. So I've got body all pages selected, right? I'm gonna change the font and look up here at the top, right? As I click on this and start changing the fund, the fund for our knave links is changing even though we're styling the body and not the nah flings. And that's because the Netflix, even though they're pretty down in the hierarchy, there, nested inside of the body type. Uh, no, that we've styled the body are not of likes. Now have that monster up. Second, we're gonna add a couple of things. Thief Font size for a body should be 16. That 14. That's what our design calls for. And our height is actually going to be 1.6%. I think I did that correctly. Or maybe it's this little thing. 1.6. Okay, Yeah, that looks right. Okay. And then, um, let's go ahead and add a color. And so I've already got kind of like my brand black here. I might add that you see the color for these change slightly, and that's pretty much everything that we need to do inside of the body type. Now we can go into our nav like and notice that Montserrat 16 and 1.6, they're already attached to this. This piece of text, all we gotta do now is modified slightly to match the style for our NAFTA. So I'm gonna add 13 pixels. That's the size for of these and our design. And they are all caps. So at here, and the more type options, all cups. And then there is three pixels of letter spacing between the letters. And then last, we need toe change over the phone away from normal to medium. I wanted to change the spacing between these elements of a hop over to my design. Click on one and hold option. It's gonna show us that there's 80 pixels of spacing between the nap links. Well, since that spacing really, uh, overlaps two elements weaning toe, have that with home. I'm gonna make the padding between these 2 40 pixels. And what that means is that there is not 80 pixels of spacing between these two elements. The nice thing about using padding as opposed to margin is that now the mouse over target. In other words, when the mouse scrolls over this thing, um, it gives us the ability to click on that. So if I goto preview and hover over this, you'll notice that even when I'm not hovering over the letters, I'm still getting that Ah, pointer cursor. That's cause the target for this Not like is this entire bounding box all right? But what if I used margin instead of padding? If I add 40 pixels of apps, I can just use this low, um, thing there. You'll notice that now the bounding box eyes the exact sides of home. So when I go to preview, I'm not gonna get that pointer cursor until boom right when I'm over home. But from a user experience perspective, it's nice to give users a nice big mass over target because we're all kind of sloppy and we don't like, well, usually start clicking, even were not directly over the letters. I'm gonna reduce this from 20 to 0 eso that, uh, the 32 pixels Here is what we intended to be in the design. All right, next up is let's add our logo. So I previously added our logo as an image file. I know it's just a piece of text, but it's actually good practice to use image files for your logo because sometimes Google will use that when your site shows up as a search result. So it's best practice for your logo to be an image file. In this case, it's an SPG, and then we've got his image settings here we can manipulate. So the first thing we're gonna do is hop over to, um sigma and let's open up the style settings and figure out that Okay, this is 20 pixels tall, 20.3. Really, But this is Ron down to 20. And I like to add, um, at least either the height or the width because there are some browsers that if you don't give an spg Um, a, uh, a height or with measurement, one of the two. Um then it just disappears. It doesn't show up at all. Um, so I like to give it at least one. And then what is this all texting? Um, the all text is the menus for as screen readers. So if you're visually impaired and you're going through a website screen readers, they read aloud the content on the website for that visually impaired person. Well, since this is an image file, the screen reader, it's not. It's not gonna know. Ah, what that image is about or what it says. And so the all Texas kind of like saying to the screen reader, Hey, I want you to know that this is on so long ago. Um, how about entering that when the screen where it gets to it, It's just going to say, on solo, that's a great way to make our sites. Um, uh, what am I trying to say? Um, I forget the word, but it's making it accessible. That's the word. It's making accessible for those who are visually impaired. So now we've got the logo and we're almost there. Except now we're missing our social links on the right hand side. So what we're gonna do is we're gonna add a new dip block inside of our nav container, and the debt block is gonna house our social links. So I'm gonna hit Command E to bring up the search tool bar. I'm gonna type text, bring up the search results, and when I click on text Link and now we've got a text, like, added in there. Now it's showing up kind of funky showing up next to the brand, and that's OK, because we're gonna be styling enough container in a second. Let's go and do that. Now something is, I wonder I wonder what's called a wrap. I want to wrap the link inside of a dead block because we're gonna have more than one. I'm so first of all, let's give a CSS class. So over here we're gonna call this social link. Then we're gonna copy and duplicate it three times. Um, and by wrapping it, it's kind of like saying I want a bundle these together so they act like a group. So if you need elements that I would like a group, you probably What you need is to wrap them inside of a deadlock. All right, next, as with enough container. Ah, we're going to start using the layout section here that change how these things are displayed. So there's a few elements. The one that we're gonna use is flex and flex. Uh, or flex box, um, is a layout system that is great for two dimensional layouts. Eso if I'm just trying to lay out things on an X axis or on a why access and by clicking flex we've already got. Well, we might have access to a couple of settings down here. So the first thing I want to do is I'd like toe online things vertically in the middle. And then next, I'd like to align things so that everything is pushed to the side of the knife containers about clicking here. Now, I've pushed all of the elements all my social links to the right hand side and my logo toe left, and these are in the middle. All right. So with social length selected, um, we're going to make these those I think I think we said Twitter instagram and something else, but we're actually gonna be using a font for this called font. Awesome. So I previously uploaded this to the project. I forgot to do that when we were working on the front. I'm settings. But if you go to Funt Awesome. Uh, here is that here you got a fun awesome dot com. You can download this fund, and once you have it, you can upload it to your website and then you can use this toe. Have any brands that you need. You can use this font for those icons like, for example, Twitter. So it's like for the Twitter icon. Here's the Twitter icon. Essentially, the Twitter icon is a cliff inside of the fun, awesome front. That's what lets us easily add this where projects that's we can actually just highlight the Twitter icon, copy it and go ahead and pasted inside of here. Now it's not showing up because we need to set the font here and typography to fund awesome eso here it is awesome. And now you see that a Twitter icon is showing up. That's perfect. Um, and then let's go ahead and add our other two. So we've got Instagram and 500 PX All right. So let's let 4 500 PX Think of the design becomes last. So it's got that here and then up. Sorry. I keep doing that on Let's go. Every to Instagram. Happy this on. We'll add it to this link right here. Right now, we still haven't styled these completely. Cause there kind of brushed up against each other. And they've got this underlying. The reason they have the underlying is because in html, anything that is a link the browsers will automatically give that a underlying to signify it's a clickable element. So we can get rid of that line because we don't want it for these. Here in the decoration, just click on none. And now our links don't have those ugly underlines, and we can add are fun color seven. Uh um, scroll back to our design and thes don't have the black. This has the darkest color. I'm gonna grab that from here. And this is the first instance that we're using this. I'm gonna pace that. I'm gonna add this as a global swatch, so I'm gonna call this darkest like it isn't our design and create. And now this is a global Swatch. We'll have access to it again if we need to in the future. And then let's figure out the padding. So it's the 32 pixels away from each other. So instead of adding it, I'm sorry. That was my phone. Instead of adding it a Z equal sides, equal padding on either side were actually just gonna add it on the left. And the reason is because I want this, um, I want this element to be flushed to the right. If we added it to either side, um, than this 48 pixels right here would be off. All right. And then the next thing is, I think it's a little too small. But I come back Teoh settings. We can get the size 22 pixels, not 16 that that is looking like it's correct. And then we want to make a couple more changes Now. I want thes lengths to be in that direct middle currently, because the way that flood spot works, if I enable X ray mode, you can see that the bounding box for the social links is bigger than the box for logo. And so this is really set to the left a little bit, but I wanted to be right in the middle. What I can do is I can create a new class for this deadlock, and we'll just call it a minimum with. Actually, what I need to do is, um, go in here and figure out how. Why this is 126 but just to be safe, esteem minimum with clips 130 pixels. Sorry, I talked to mind with and we're gonna add that here is 130 pixels. So here in the science section, the size needs to be at least 130 pixels and then with our brand were actually going to wrap it in a death lock. And we're going to give it that same style, that same class minimum with 130 pixels. Right now. Since this element and this element are the same size, thelancet are not perfectly in the middle. That's exactly what we wanted. And let's change the links so that they actually reflect our design. So this is going to be portfolio about as perfect contact is perfect. We just need one for services. All right, let's get out of X ray mode. Let's go to preview. And now that these are working perfectly, the last thing I want to do is just add, um, some hover states to these hover states are the actions that elements take when you hover over them and with links and buttons, it's really important to give them a hover state that we're communicating to the user. Hey, this is a clickable element, all right? So with the socialite selected over here in states just above the selector field, click that and I get this drop down and these are the different states that we have access to. So when the social link is set to hover, I wanted to change to our dark color. All right, so let's test this out. Let's go to preview. And when I hover over the link, we now get that changed to our dark color. But the transition is just a little bit too sudden. It's quite stark. And so what we can do is clicking on social like scroll all the way down. We can add a transition so that that change from darkest to black is a little bit softer eased. Eso um sorry I did a little fast, so let me get rid of that. Let me click on the plus line and transitions. I get this new model that pops up under type. It's asking me, Hey, what type of transition are you trying to affect? And we're trying to affect the font color. By the way, there's a whole with all kinds of things here, um, that you can experiment with, but we're gonna use font color and 200 milliseconds set to ease is perfect. All right, So if I go to preview now, when I have over this, you see does change that black. But it's just a little bit of a fade in as opposed to that instant change. Um, let's do the same thing with our Nath links. First of all, I think we forgot to change the text from black to our darkest color. And then we're gonna change the hover, uh, to our black, and then we're gonna add that same transition. Ah, oops. Sorry. I forgot to switch to the Nun state. Click on transition, and we're gonna click on font color and leave these settings alone. And now, when we hover over our knave links. They not get that nice transition to black. All right, so that does it for the navigation bar. Now we just have a little bit left. That was probably the most complicated part of this lesson. And I think I'm gonna stop the lesson here. I originally meant to do all of the header, but I think we're 26 minutes or so into the first lesson here. So let's take a break. And in the next lesson will resume working on the header by adding the title and the caption, and that should go a lot faster, too. 5. Header Section | Title and Caption: to add our title to the header. The first of them want There's actually at a container. Now, we've already talked a little bit about containers. When we went over the nab our but not really we didn't go over the philosophy behind them and we didn't actually create, um, a classic container. So go ahead and do that now. So I'm gonna hit command E during a search toolbar a type in D I during up a dead block that I'm gonna hit command enter to bring up the style panel, and I'm gonna create a new class called container. All right, let's go ahead and give our container a border. I'm gonna go down here to Porter's click on Solid that we've already got a one pixel black solid border around it. And then let's go ahead and add a paragraph inside of that container so we can see how the paragraph adjusts. So I'm hitting an E simply type in p a r and paragraph right there. And it's already got some Lauren Epsom placeholder text inside of the box for us. All right, so I got a preview. You can see that the container is the full width of the browser, and the content inside of the container is flush with the edges of the browser. The view port, I should say as well. And this, uh, this leads to quite, um, unattractive text. The reason is because there's no white space on either side of the text. And when you're reading something, you really do need that weight. Space on the edge is to help you feel like the text isn't crowded or jammed to the edges. And then, secondly, the Texas way too wide. So we're used to reading, like in books or things like that, Um, where the lines are no longer than, like, 60 to 80 or maybe even 100 20 characters. But this is probably, um, I don't know, like two or 300 characters. Does this weigh too long? Because as we reading, we just get a little bit of fatigue as reading through this, and then we have to jump back all over to the left hand side. It's just way too much, so if we had text like this on our website, I get it to you. Very futures would actually read it just because this is not user friendly Leo. So what we couldn't do is add some style to our container, and that way we're starting to give the text some form. Essentially, what we're trying to accomplish with a container is make sure that we have white space on either side and that the content is not too wide. Eso me right now I've got the paragraph selected. And if I hit the up arrow key, you notice that I ascend to the next parent element, which is the container. And there's a couple of ways to do this. What is? I'm just gonna add padding on either side. And let's say we're going to something like 50 pixels when I preview it. Their list that continues still goes to the edge, but the padding inside of the container is pushing the content towards the middle of the page by 50 pixels. Um, next what I can do is say, All right, I've got some white space on the edges, but it's still way too long. I'm gonna give it a max with of 1224 pixel. That's kind of like a standard for, um, Max with sizes. If I preview. All right, this is a lot easier to read. Personally, I would still make this smaller for this little text like this. But you can tell a knife a lot more readable, but it's aligned to the left of, um, the website of the View port. We want to end the middle. So one of a quick way we can do that is over here, this little icon, we can click that it's gonna center our box within the view port. And what it's doing is it's basically just assigning auto margin to either side of our deadlock. And since why that works, the reason that it works is because it's kind of saying, um, I want you to apply equal and opposite force on either side of this box. Um, and that's gonna push it towards the middle since the since the margin on your side is equal. And opposite that means that our text are dead. Block is gonna be centered within the view port. All right, um, so let's preview this and I Macon see that, um, that this is 1224 pixels are CSS class was not allowing this box to grow beyond that. We've got 50 pixels of padding inside of that. All right, let's take a look at another way to go ahead and set this up. So instead of using padding, another way that we can create this container is by using a percentage for our with. So let's say I wanna have 85% by the way, we haven't used percentages yet, but basically what I'm telling, um uh, What I'm telling the that this through the class What I'm telling dip lock is I want you to be 85% of your parent element. Um, the parent element happens to be Whoops me escape here and have the up arrow key. The parent element happens to be hero. And since here is full wet and effect, what the container is saying is I want to be 85% of the view port. Um, So since most containers are nested inside of sections which are almost always full with 85% is essentially 85 you port with. We could do that as well. If you wanted to, you could say, I want you to be 85 VW and that really wouldn't change it, uh, use using percentage for now, all right, And then we can do the same thing that we did previously. So let's say that we don't want to grow beyond 960 pixels. That's another standard in terms of with If I preview this now, you can see that, uh, this is 960 pixels, and what's nice about it is it's a true 960 pixel. There's no padding. That's kind of like creeping into our pixels and stealing pixels from us. Uh, and the other thing is, containers are a building block for responsiveness. Take a look as I scroll in. Currently, that, um, the deadlock is staying. Still, it's not moving, but as it starts to hit that 85% it's going to start scrolling in and moving in. Here. I am in tablet mode, um, and it's going to start adjusting for us and moving some of the paragraph down toe. Add more lines, so containers are not only useful for keeping our laps centered and not overly large, but they're also helpful for responsiveness because they're gonna be pushing in the content as the browser window gets smaller and smaller and smaller, all right, but we don't want a paragraph here. What we want is a heading. So I'm a type of h e a and we'll see that we get are heading apps, added it to the bottom. That's okay. In the Navigator. I could just go ahead and click, drag and nested inside of container ships. Right there we go. It's another heading is inside of that container. Um, okay, so what is a heading? Headings are like section or chapter markers where we're giving our content, particularly the copy. We're giving our content some sort of structure. Think about it a little bit like the table of contents for a book. So if I click on little gear here, you can see that there's a church one through H six and essentially H one kind of represents like the title of the book. It's the first headline, the most important, the highest in the hierarchy. That's the title of the book 82 would represent, like the chapters inside of that book and then H three through H six. Those represent further demarcations air further subsections inside of buying chapters. There's a couple of reasons why headings are important. One is for typographic hierarchy. Eso whenever you This is mostly fur designers. But whatever you create a website you want to use thes heading this heading structure X one through 86 You want to use it to help guide the user, know where they need toe Look so r h twos they should be telling the user Hey, this is a brand new section because this big, bold piece of text is letting you know Hey, we're now transitioning to a new piece of content. Um, the second reason is important is for ASIO. So again, what we're trying to do through our HTML structure is we're trying to communicate to search engines what the content of our website is about eso, particularly through our H one and H two were communicating to search engine. Hey, this is kind of like what the content is about. Think about like the search engines, like if they were somebody in a library and they're flipping through the content of a book , that table of contents and just by reading the title on by reading the chapter headings and maybe even the subsections that h threes they can get a sense for. Okay, this is the kind of book. This is what this book is about. And I bet the person I'm thinking of would love to read it. That's essentially what search engines air doing is there reading those H ones. There's headline tags and other things, of course, on the website, and they're saying, Okay, this website is about this. I bet that since this user is searching for something like this, this website would be a good fit for them. Eso That's why headlines are important. The H one of is, of course, the most important. Because, like I said, it's the title of the book. And so, uh, it's important to think about what that each one is going to be, Um, and to make sure that it's on the page. Of course. The other thing is, you want to make sure that there's only one H one per page because, um, like, if your book had multiple titles and they were different subject matter, you wouldn't be sure. Okay, what is this book actually about? Um, so there really only needs to be one h one per page. All right? So let's stop talking theory and let's actually get to it on the first I'm gonna do is and we did this with our body tag. But by clicking on the selector field, we have access to all H one headings, just like we did with all body. Not something. I click on that and then we could start making changes. I know that our headlines are all Gara moaned, and then we need to hop over to our design filed to get the actual settings. Uh, lips worry about that later. Um, okay, I didn't give this a class. Okay, so this is a big Ehrmann. It's such 24 it's got quite a tall line height here. That's two M's. So let's go back to this and say it's 24 pixels. It's normal. It's a central lined, and I think the line height waas to EMS. I can't remember if I've covered abs, but basically it's saying all right, I want you to be twice what the font sizes. So it's really 48 pixels off line. Another thing to notice is that these headlines and what for? They automatically come with margin on either side on, and I don't want that for this. I want to control, uh, the spacing a little bit more purposefully. So we're gonna get rid of that and schooling over. I'm gonna use option to figure out how far, Uh, this title is away from the navigation bar. It says 113 but I used an eight point pixel, Greg. So I think we're gonna stick to 104. And the next thing you do is I just want to check the color and we're not using our black. We're actually using the darkest color. All right, Next thing I want to do is just go ahead and copy this text and paste it here into this design. And then the last thing I want to do is we were using that black border in the container to show us how that works, but we can actually get rid of that. And then I want my container. Remember that we're gonna be reusing its container over and over and over again throughout the website, so I don't want to leave at 9 60 For me, it's just a little bit too small. We're gonna make it 13 20 like we did previously. Um, all right, and now we've got our title on the page. The next thing I want to do is start working on our caption with the caption. We have an interesting layout, Um, challenge. Because if you notice if I added another death block nested inside of here Oh my God and collapse container, you noticed that it's flush to the top of the page, and that's because websites follow. It's called or browsers. They follow what's called the box model, and it's essentially similar to how we read. Whenever we add a new element, it flows from top to bottom and left to right. So every time we add a new black, it's just gonna get added on top of the existing ones flushed to the top like I said. But we don't want that are caption. We want that to be at the bottom. Eso It's not distracting from the title s. So how did we do that? There's actually you can imagine with CSS so you can get pretty created, and there's lots of ways to approach that challenge. And part of becoming a developer is figuring out your preferred ways or best practices for doing stuff like that. But what we're gonna do for this particular challenges, we're going to use what's called absolute positioning. Um, absolute positioning means that we're gonna position that element. We're gonna ignore the rules, the regular rules of the of the browser or of HTML, and we're gonna position it according to our own needs. Let me give you a let's just go ahead and do it so you can see what it looks like. So So the first thing I want to do is actually go to the parent element, which would be hero. And we want to change its positioning to instead of static. We want to change it to relative. Um, What relative dies is it means that any any element that we position as absolute nested inside of it, that absolute element is going to use the next available parent element with a position of relative that's gonna be like what? It orients itself to its point of origin. So we're kind of saying, all right, we're gonna add a absolutely positioned element inside of hero, and you want that element to treat hero as its point of reference All right, So what the block selected? Let's go ahead and add a class of caption. Rapper. I'm kind of saying, Hey, this this is what wraps the caption and we're gonna set its position to absolute the next thing we're gonna do ISS we've got a bevy of settings here, and essentially, what it's saying is, all right, do you want the organ? Be top left, right, bottom left. What we're gonna do is we're gonna select bottom if you can tell Right down here are caption. Rapper is now at the very bottom of the header, but we can't see it because it doesn't have any height. So let's go back to our design. And let's figure out that padding for this So it looks like there's approximately 32 pixels of padding below the caption and 88 above. So let's do that. We're gonna add 32 pixels of padding below and 88 pixels of padding above, and then we're gonna add a text block and you can't see it, but it's actually over here on the left hand side. And don't we're gonna take care of that in a second and the next we have to do is add that overlay. So down here and backgrounds, I'm going to click on a website. Did the wrong thing. You see how this as image ingredient? Previously we used image for the background photo, but we also have multiple settings up here. So right now it's set to the image type, but we want to set it to the, um, Grady int type, and there's a couple of things we want to do. So, uh, these two blocks right here represent, like, the color stops in our radiant. So this is a zero that right, this is a 100% black position zero, and this is a 100% white at position 100. So what I want to do is I need this block to actually be 0%. Um, and then I need the stop at the bottom. I want this to be a black go that, um and it's currently at 100 which is a little bit strong. So what I can do is we click that stop and over here is a stands for Alfa or the Transparency Channel. So using holding shift, I can just scroll down until about 60 or 50 or so, and now we have that nice overlay that we need. All right. Um, okay, how do we get the text here to be white and I could go ahead and create a class. And actually, we are going to be creating a class for this because we need to be the caption. So it's gonna add a caption. But I found that it's helpful to make color changes on parent elements because usually we're changing the color of things based on what they're on top of what background there on top of, um And so instead of making caption white everywhere, let's go ahead and make caption Rapper, we're gonna get this a color of weight. And remember, this is cascading style sheets that what style you give to a parent element it cascades or it descends down to the Children that are nested inside of it. The other thing we want to do with caption rapper is you want to set text align to center, and that's going to go ahead and push uh, the content to the middle. Next week's caption. If you recall, I believe this was E B. Kerem owned Um, Where's Carol? There it is. All right. And then let's go ahead and go to our design and get some more of these settings. Click on there and click on settings, and it's size 18 regular. I talk. So let's go up to 18 and it's normal. But it's italicized, all right. And then that's copied the actual text. All right. And there we are. We have not officially finished our header. I know that took a long time just for the simple for elements. But we talked about a lot of different concepts. Like we talked about padding and margin we talked about were started to introduce the idea of positioning. Um, an absolute positioning. We used flux box up here to position this in the middle. Uh, we used font awesome to create these Maikon fonts. So there was a lot that we did eso if you made it to this lesson. I'm really proud of you. Great work. I think in the next lesson, we're going to jump into the portfolio and we're gonna have a lot of fun with this mason regret. So I'm looking forward to working on this with you guys. I see in the next lesson 6. Portfolio Section | Masonry Grid: in this lesson, We're going to get to work on the section I've been looking forward to the most I love portfolio sections because you get to show off your work and they typically have these beautiful, stunning images. And this one is definitely no exception. We're also gonna use a masonry grid like I have mentioned before at the show off our photos were gonna have this fun hover state, and we're actually gonna use thesis E m s toe upload these photos. So let's actually jump into web flow, uh, and start creating this thing. All right, so we're gonna work on the CMS first. And if you don't know what CMA stands for since we're content management system and in a CMS, we can create these collections or these data sets that we can add to it. We could dynamically hook things in the website to the CMS, and then the client can use It seems to make changes, add, delete or modify things in the CMS so that they'll show up on the website. So really, really powerful. One of the best features of Web flow. Definitely. That's going to create a new collection and you guys are going to see how this works A little bit as we go through it, we're gonna call this portfolio shots. You can use whatever name you want and then down here, we're gonna add our actual fields. So the first thing I'm gonna do is actually change this instead of name. We don't really need to name the photos, But what other fields that we do need is the location, and this will be a great way for the client. Distinguish. Okay, which photo is that? We're going to add a location. All right, The next thing we're gonna do is at our actual image, field the minute click on image and simply call this image. And there we go. And then the next thing we're going to do is add a number field. And what the number field is gonna let us do is it's gonna let us set the sort order for the photos. So when we you'll see in a moment when we actually add the collection to the website, there's multiple ways that we consort, how the items display. And so we want to give the client on the ability to modify the sort order. And so we're going to say, Hey, we'd like you toe at a number between one. And 11 for these photos. Um, and they'll be displayed in order from smallest to largest. Um, so we'll add a little help text on here and over here on the right, you see a preview of what the client is gonna see. So photos will be sorted from one and on and the sending order. All right, so save that, and then the next we want to do is at a few text fields. And that's gonna be for if I zoom in the settings down here. So focal length shutter speed aperture. And I s O All right, So let's go ahead and add those things. Um, focal length, shutter speed, aperture whips. And I like to like when I use a character that's not normal. I like to add that in the health thing here, so format in that way, the client can just copy and paste that particular Google if folk along shutter speed aperture. And finally I s o. So there we go. Now we've got our collection ready. Go. I just have to hit, create collection and Now we've automatically taken Teoh the actual collection itself. And since it's an empty collection, there's nothing in here. It's asking us to go ahead and add something. I'm gonna click new portfolio shot. Let's upload our first image. And let's say this is gonna be Garnett Lake, New York. Um, I actually need to do is say all right, this is gonna be the first photo. So sort order number one. And then let's copy these settings here. 35 millimeters. Uh, I think quite copy it. Here we go. Actually, we can just copy this right here. All right? And then I Issa is 100. We don't need to copy that. Just type it in. And but we've got our first collection item in the portfolio shots collection. All right, let's do one more, and then I'll skip ahead. You don't have to watch me do this every single time, but for this when we're just gonna, um our photo to on and we're just gonna make up a name. Um, so we'll just say you hoop see a totally made up name. I have no idea what that is. And then sort order is going to be too. We could actually leave this info alone. If I was actually working on the site, I'd want to make sure this information is correct. But since this is just an example, I will leave that alone. Now, we've got two atoms in our collection field going to go ahead and stop the video there and resume what I've got All of our items entered in. All right, so we've got all of our CMS items uploaded and ready to go. Now we can go ahead and start actually developing the section. So I've got my section selected over here in the Navigator, and first I'm gonna do is actually create a CSS class for the sections that's head command , enter or return toe automatically got us to the selector, and I'm gonna add a new classical section. And then just to make things a little fast instead of applying that one by want each of those sections weaken, just copy and duplicate that same section. And now all of them have that same CSS class, right? But why do that? Why? I had the same class to all four have a hot back over to my design. Um What I want to do is I want the website to feel like there are these invisible rules that are guiding it. There's a pattern that maybe not consciously but subconsciously, the user is picking up on those patterns, and it's making them feel like the website is purposefully designed and developed. Um, and that's what kind of gives it that professional edge eso One of the ways we did that, if with one of the ways we do that with is spacing when you have a system for spacing, it makes the upside feel really intentional. We've talked about how I'm using the eight pixel grid, and that means that we're adding things in multiples of eight. And so, uh, if I just take an example like, I click on this photograph and hold option down to see how it relates to the section it's nested inside of you see that it's 104 pixels, top and bottom. It's actually 100 and five on the bottom, but I think that's just my error user air. So, uh, so I think I designed it to be 104 across the board. There might be a few exemptions there, but with section selected, let's go and had 104 pixels of patting top and bottom. So now you see that each section is quite a bit bigger than it was before. Um, all right. And then inside of the section that will be our portfolio. Let's hit command, Ito, open up the search toolbar and we're gonna add a deadlock and that the buck is going to be our container. So we're reusing the container class we created earlier. And remember the point of the containers to be a responsiveness building block. It's adding white space on either side and containing the content in the middle of the website. Right? And then if I hop back over back to my design, So I keep doing that, um, there's a new element I previously noticed. There are two of So we've got this kind of like section had her with the overline and the headline up here. Love it. Hard to see Let me zoom in just a little bit. So this section Haider here and this one here. So let's create a new element that we can use for both. Um, so I'm gonna add a fresh did block. Remember, If you're not sure, why am I using these diff blocks? It's because I want to treat though that, um, overline And that headline to as a group, when you want treat things as a group, it's usually a good idea to wrap those things inside of a dip lock. All right, that did block. We're gonna give a class of section header, and instead of that section header, let's add a simple text block that's gonna be for our overline and then a heading to that's gonna be for our headline. I remember I chose H two because we previously used H one up here on since H Ones count like the title of the book. We don't want to reuse H once again for the rest of the page because that would be confusing. Um, H two is there kind of like the chapters inside of our book. And since this is a new section R H two is kind of like the chapter heading, if you will. All right. Next, let's go ahead and make with the section Hatter selected. We're gonna make the text lying to center that's gonna push them towards the middle, and then I want to give it a max width to hop over. Sorry, I keep doing that, um, back to my design. Let's just click on these larger elements. This one is 496 pixels wide and the one above it As for 48 All right, so if we just make that the max width of 500 that should get us where we need to go. It's aligning to the left. That's okay. We can just use the auto margin cheat there. I take it to a line in the middle. Right now, we've got this reusable section header group that we can just copy and paste where we get to the services section. Let's go ahead and add the, um, content here. So this is portfolio. And then, for this one, let's copy and paste the actual text here. Like now, let's add, um, the CSS stylings for these two elements. So with portfolios selected, I'll hit command enter to get see the selector automatically and will create a new CSS class called overline large. And then I know that it is, uh, all caps about three pixels, a letter spacing like we did. What do we do that for? Oh, yeah, These up here, Um, it's a little bit thicker size medium. And it's not the black color. It is this dark color. And then if I hop over here, I don't remember the font size. Let me just quickly steel into the settings here and it ISS size 14. That looks pretty good with heading to. We could do the same thing that we did with heading one and with the Body Town. Rather than create a CSS class less ist, um, select all H two headings so that whenever we add a new age, too, it's already gonna have these stylings baked in all HD heading selected. I know that it's e B care ammand. I know that it's not the black color, but it's the step down darkest. It's not normal. Actually, it is normal, and what's happening here is ah, well below automatically assigns a bold font weight to these headings tags. And even though it says normal, it's showing up as bold. But we don't want that. We want what's following the actual designs. I just like to make sure I click on normal to get that normal front weight. Okay. And, um, maybe the next thing I have to do is get the size, and I just can't remember what? The font size waas. Sorry about that. A size 42. Okay. And the line height is not quite tall enough. You see that? The Alice overlapping the G s. What we can do is, um uh, since we haven't set the line height here, this is technically 1.6% of 16 pixels because it's referencing the body tag. So I could just kind of, like, hit the down arrow and then down shift a little bit. Probably 1.3 looks good. All right. So sharp photographs with fold tone range. Now I think that spacing is off between these elements with overline. That's such a zero. So that's fine. And then with all h twos, let's go ahead and reduce this. I know that this is closer to 16 pixels. Um, so I think that looks correct. And then hopping over to my design. One thing I want to do is instead of having to reset the margin bottom over and over and over again, kind of want to see if there's a pattern. So I know that this one is 64 pixels. This one is eight. This one is. So if you do, that should be 64. I'm actually gonna go with eight, even though 64 shows up twice. Because thinking ahead, like, let's say that you were going to create a blogger or something. Um, it would be pretty weird for the H two in the blawg toe have 64 pixels of padding below each one. I think eight pixels is just a little bit better for a universal margin. Bottom. That's good. And make that eight. But what we can do is we can create a new class called M B 64 or margin bottom 64. And go ahead and add that they're In other words, we've created a new class to add that margin bottom. But it's not a tax to every single age too. Okay, so we're done with the section header. Next up is actually adding the photographs. All right, we're getting to the fun stuff. So with container selected, not section header. Um, I click command e and add a collection list. Cool. So here is where we're telling the website were telling Web flow Okay, I want to reference my CMS so that is asking us for the source and currently only have one . Let's go ahead and click portfolio shots. And now you see that it's showing us all 11 CMS items on and it's giving us their name in this case, the location. Let's go ahead and, uh, modify the sort order just clicking the plus sign. It's already found that we name something sort order. It's always have to click save. And now it's showing up with the correct order. Including you, poopsie. Really? Like that name. Okay, um so, uh, the next we want to do is add a light bucks inside of each one eso of any type and light lightbox. And now we've got a light box, a component inside of each one of our, um CMAs collection items. So if I toggle down here, see in the lab a gator. The collection was rapper Is that parent holding? Everything thunders the list in that list. There are the 11 collection items represented by this one item in the navigator and then inside of each collection item is now a lightbox link. I'm using a light box because I want the ability for the user to be able to click on the photo and for that image to open up in a light box so they can see it in a little bit of a larger format, particularly on mobile. If I show you guys the mobile version, I'm kind of sticking with how Pinterest does it, where they still have a two column layout on Mobile. I like that because otherwise this would be a one calmly and it would just be really long just too long. But I want the user to be able to click on the photo and get more information. All right, Um, next we can go ahead and click this image, and we can link it to the CMS. Let me show you what I mean. If I tried to choose the image and pick one I've already downloaded, then it's gonna be the same image for every single CMS collection item. That's not really what I want to do. Instead, let me click the settings, and I want to say all right, I want you to get the image from the CMAs collection portfolio shots. And then when I click on the select field, drop down. It's already showing me which fields in the collection are eligible to be linked to course images. The only one Let's go ahead. And at that now we've already previously talked about all text. Remember, that's for screen readers so that folks were visually impaired taken. They know what the image is actually about. Um, what I should have done if I had been thinking ahead, is create a field and my collection for all text that with the client could go ahead and other own all tax and customize it just for the sake of time. Let's just get make the all text are locations. At least there is something there. All right, so now all of our images are showing up from the collection, but they're all in this one column layout and are way too big. All right, So, um, let's go ahead and actually create them masonry layout. So, um, so what? What we need to do is with the Mason regret. That is the thing that we need to set the mission. Your great styling, too, because the Mason three collection list it's what's holding all 11 collection items. So if I want to order, I want to style those 11 items to show up in a different way. I've got to go to the parent element, What's holding on those things and say All right, this is how I want you to display those 11 items. So I got collection list selected there in the selector. I'm gonna add a new CSS class called masonry Read, scroll down to the typography settings, and we're gonna be using the columns feature to create our grid. So if you don't have that showing up for you, you may need to twirl down this more type options extra menu and right there and they called, I'm just gonna type three and click that. And boom, you're already seeing the magic created by that one simple CSS style. We can further figure this out by if you click on this little kebab menu. You have a few more stylings that you can add to how these columns are displaying. Gap refers to the gutter here between the columns and remember, we're using an eight pixel grid s. I'm gonna do 24. Not that there's 24 pixels of spacing between each one. Actually, that feels like a bit much. Let's try 16. All right, that's better. If you wanted to, you could add a divider s. So that would be like a line that shows up between there. I don't want to deal, excise. Don't think it looks good, but you could customise that. And there are situations where divider is helpful. Next, I want to make sure that, um, collection item. I'm gonna call this masonry child, and it's really important for when you're using masonry grade. Were using these column layout things. It's really important to make sure that the Children are set to in line block or you may get some funky displaying. Um, so I know we haven't talked a ton about display, but just as a general rule, a masonry child needs to be set in line block. All right, um, next up with that same class that we selected Mr any child, we need to add that same spacing for the gutters. We love each image, so I'm going to use margin for that with margin bottom. We're gonna add 16 pixels, and now we've got that same spacing in between each one. One quick thing I want to check is let's click on the like box link here and they figure to the elements sightings? Um, there's a few things that we want to do. First, we do want a link with other light boxes because we want to make sure that when somebody clicks on this image, they can also scroll through the other ones. Let me show you what I mean unclipped that I go to preview and click on this photo. Uh, you know what? We haven't said the, um, the media up yet? Let's do that first. So with media, I'm gonna add an image. Um, and what we're gonna do is we're gonna say, um I'm sorry, I shouldn't have done that. We can just click, get media from portfolio shots and use that same image. There we go. OK, not when I previous I click. This is showing me the image in the light box, which is great. Ah, but I can't navigate to the other images. So what I've got to do is link with other light boxes and we can just use any name that we want. We're just gonna call this portfolio. And since this is an A c it on this collection In other words, whatever I do to this one is about getting applied to this one as well. Um, now, when I click on the light box, you can see all of my images are showing up in the bottom. 7. Portfolio Section | Hover States: So I recorded the whole section for the portfolio and one lawn take. And then after the fact, you realized it was like a full 40 minutes, I think so. Let's go. I want a hand split it up into two so that we work on the actual mission. Regret first. And in this lesson we're gonna be doing is creating this overlay so that when you mouse over the images, the caption shows up. All right, so let's go back in time and start the lesson. I need to create a new death block that's gonna act as an overly It's gonna be on top of the image. Um, and so remember, with the way that websites work with the box model, whenever you add a new element, it always shows up, Um, either to the right or below Any other existing element. That's the box model. Um, so you get it Can't get using in the box mount on the normal world of, um, html. We can't get the item to display on top of another item unless we switched absolute positioning. All right, so we did that with the caption here we used absolute positioning. That's what we're gonna do is not with the image selected, but with the parent element. Like bucks link. We're gonna set this to um right. So let's call this light bucks. We're gonna set this to position relative, and then inside of lightbox, we're gonna add a new common did block and let's go ahead and call this, um, portfolio. Uh oh. Jesus can't spell portfolio caption. Rapper. All right, remember what I said with the box model? Um, it's showing up below the image because that's how the box model works. But when I switch this over to position absolute, you'll notice that now it's kind of like showing up in another world. It's not really showing up anywhere. And then if I said it to, um, position absolute full, that's hard to see because there's no background color, but it's good. And give this a background of all black. Now you see that it's hovering entirely over the image. I don't remember what exactly what these settings were for this. Let's steal back over here. And it's the darkest color set to 60%. All right, so is this one knots black. This is darkest. Remember the Alfa Channel controls that transparency. Eso is good and said that to 60%. Right now we've got our over lake set up and then we wanted at the content inside of it so that the caption shows up in the top left. And then those camera settings show up in the bottom. First thing I want to do is add some padding, repenting, controls the spacing on the inside of the box. So we want to do it so that the caption isn't flush with the top left edge. We need a little bit of white space. Like zoom in nice and close here. Um, let me select, uh, What's going on? Why can I help you? Okay, so with both these elements selected and holding option, I can see that. Ah, it looks like there's 24 pixels of spacing all around except for this 32. So let's ignore that 32 just say it's probably just 24 all the way around. So holding, shifting option, I can just click and drag, and it's gonna control the padding all around the edges of the frame. And then we're gonna figure out, um, actual lets us go ahead and add a new heading, and this one is gonna be an H three. All right, so it's kind of doing what we want. Now we're using H three because these elements are nested in the portfolio section. So it's kind of like we're, um it's kind of like how in a chapter you have a little subsections and in essence, each of these cards. It's kind of like a subsection inside of portfolio. That's why we're using H three and they would portfolio caption rapper Remember that. Ah, any parent element in time that you create a style for that it's gonna cascade down to its Children, right? So it's currently blue. I'm gonna take color and just change it toe white. And even though we're not changing the color of the heading itself, it's changing its collar because this particular heading is nested inside of portfolio caption rapper and then with this heading fee selected, What we're gonna do is I'm actually just since where, um, we can just reuse this CSS style. The caption. So it's going to do that will just add caption to this one. And now it's got that same style that we wanted only thing is, I think it's got some margin. Top eso. What we can do is, and I think it's because of the h three. If you click on this little thing here, this is kind of like an icon showing, uh, cascading style sheets means So this is where it's getting. It's telling from it's getting styles from body from links from for for the caption rapper from H three and then finally from caption I mean, why not actually target H three because he wanted get rid of, uh, all of this margin that they don't want. All right, so now this caption is actually showing up, um, flush with our patting, that's great. And the next weekend link this dynamically to our CMS. So we want to say, All right, I want you to get text from location. Beautiful. Now, each one of our cards has the location, um, at the top left. Um, next up, let's add a new element. We're gonna add a dip lock, because remember, we wanna used it blocks when you want elements to act like a group and over here in our design were kind of treating these four settings as a group. But how do we get the box to go down to the middle? Um, we could we could do something similar to what we did here, where we position it absolutely to the bottom. But there's actually an easier fix. And it's the fix that we used up here for getting this element and this element toe be on the opposite extremes of their parent element. All right, so with port for the Rick Option rapper selected, we're gonna be using Flux Box to get that box down to the bottom. I'm gonna hit Flex, And then this is where we get these extra sightings. So, first of all, we want the direction to flow not horizontally but vertically. And then we don't want to justify all of the contents at the start or at the top. We want them to justify with space between for distributing is distributed evenly from start to end. I know we've got the box done in the middle. That's exactly what we wanted. All right, Next up is we want, uh, waiting to figure out. Okay, Well, how do we, um, display those settings in that grid of four elements of going back to the design. There's 1234 elements. How did we display that? And luckily, um, just like with flex box CSS as a layout system called CSS Grid. We're gonna be using that for here. So with the block selected, looks ahead in command. Enter and let's call this, um, immense settings grid and then over here and lay out this little icon with the four boxes that represents a grit. And now, um uh, well below is kind of showing us how these actual great elements look like. So it's kind of dimmed the rest of the website. It's helping us to focus on the grid. And this, uh, this lead it's created automatically for us is actually exactly what we want. We want two columns and two rows. That's perfect. Um, one f R. That stands for one frame, basically, since its basic creating to equal elements inside of the total. With that, it's like basically it's 50% of the parents. That's perfect. It's also what we want. And then it's saying, I want you to have 16 pixels on the sides here and in between. And since we're using a pixel grid, that's also exactly what we want. We can actually just say done. All right. Now, with image settings good selected, I'm gonna hit Command E and at a deadlock. And so currently, the grid has nothing inside of it. We just kind of diesel hashed lines. They just indicate where the grid cell is. But we only have one actually element inside of it. Another way to see it is over here in the navigator. If I twirl this stone is currently only one diff lock. And what I like to do with these breads is ah, we want to treat these two elements like a group. So I'm gonna add, uh, that de Block is gonna help me to treat them like a group. Right? So we're gonna add a text block, and then we're gonna add another textbook. Okay, Um, so I want this to say, focal length, and then I want this to be dynamically linked. Get text from focal length. So now it's it's 50 millimeter here, and you can see in the other CMS items how that changes depending on what the CMS item said . All right, this needs to be an overlying, but I think it's the overline. Small Um, That's right. Let's click on, then it get the settings and it's 10 pixels medium. Let's create a new class called overline Small and let's make sure it's not 16 pixels, but it's 10. It's all caps. Let's see if three pixels works. Uh, hopes that's way too much. Um, let's do 1.5 and then it needs to be front weight, medium. And then the other thing we need to do is, um I think this is set to opacity. Come back out here. Just a second capacity. 70 already white text. So what I can do is at a combo class, Cassidy 70 um, answer to 70%. The reason using a combo class and not adding the capacity to overline small is because I'm probably gonna be using that same overline small and other places on the website. I only want that 70% capacity here in the portfolio. So it's better to add a combo class and modify it just for this specific instance. Right? And then this is a basic, um, I wonder if there's margin below this, um so I can actually click on this toe access or target overline small and say there needs to be four pixels of margin bottom. All right, that's showing up correctly. Now, this is just a normal a normal text blocks. I think the settings might actually already be correct. No, that's not because this is pixel. This is paragraph two. I was 14. So we can create a new class called paragraph two. And it's not 16. It's 14. And let's make sure this set toe like one point 1.5 or so. Okay, s it looks like this is now correct. So what I can do is copy. And then if I click the up arrow to select the grid, I can just duplicate this four times. And now we've got our grid. And then we just got a label these correctly and then linked him to the correct thing. So shutter speed aperture, eso, shutter, speed, aperture. And then finally, I s o. And then I just gotta change what these things are linked to. So this is not focal length. This is shutter speed. This Ah, aperture. And finally I s o All right. So for the most part, it looks like our cards are done um, there now, all linked to the correct fields and showing appropriately. I'm really happy with that. Let's make sure that the light boxes still working. By the way, you noticed that when I go to preview mode, the, um, pointer cursor is showing up when I hover over the images, letting me know that I can click on that and get to the light box. That's really nice. Okay, then the next thing I want to do is go ahead and set. Um, by the way, we're gonna we're gonna work on animations a little bit more. So I would like that when we hover over the image. Ah, some of this stuff kind of like eases in a little bit more. But just to keep things simple for this specific lesson I'm going to do is with portfolio caption Rapper. I'm actually going to set the opacity to 0% from the beginning, So when you scroll through, this section is automatically set to 0% and then on hover, we've I think we've discussed states before when we set the hover states for the knave links at the top of the website. Um, hover. I want to change the capacity to 100% and then done here. I'm sorry. I have to go back to the nun state and down here under transitions. Uh, actually, we do want to target opacity. Let's sit like, um, stood 300 just a little bit slower and ease, I think should be OK. And now, when I hover over the elements, my, um my little caption card is showing up on top of the images. Okay, that's really nice. The other thing that we did is, um I think if I go back to Lightbox, we can set a hover state for it as well. So I got a shoe hover and then down at the bottom, we're gonna add You probably didn't notice it, because it's a little bit of shadow on the bottom. It's if I go back to here, you can kind of see the edges of the, uh, shadow a little bit to think of. I go. Maybe took, um I can't remember. Rectangle shadow. Here it is. There's actually three shadows on. That's that's very standard when you're creating drop shutters. Used three to help you create a more realistic one. Um, let's go ahead and work on the 1st 1 Eso on hover with the light box to have let's go out and create all three. And then the bottom one will be our 1st 108 degrees. Um, by the way, that kind of translates to the zero up here, Um, a distance of one that's gonna move it down, one pixel and a blur of two clips. And then this is a passage e 14. Okay, so I does it for the 1st 1 The next one is that's one right here. And it's also 180. It's to a blur. Four. And it is color at 12% capacity. And then our very last one is gonna be the longest shadow at Y for blur. Eight. So 180 Why four blur eight. And this is at 20%. Okay. And then if I go back to the nun state, we can add a transition and say, Um, okay, where is box shed? I can never find it up here. This background box shadow and let's go ahead, make it that 300 milliseconds as well. So now let me hover over the card. Also just gets that little bit of a box shadow the set it apart from the white background of the website. Okay, we're almost done with the portfolios section. I think the last thing we need to do if I zoom out a little bit is this actually has a little bit of a, um, background. It's probably hard to tell because it's quite light, but I just like that it's not this flat white, um, and the click on section. You want to add the back on image to the section just like we did with the header, Um, with section selected. Remember, if I added it here, it would add it to every single section on the website, and we don't want to do that. We just want to add to this specific instance. So this is the perfect time to create a combo class eso With sections like that, we can just call, create a new class called Port Spell Portfolio section and then done at the bottom. Let's add an image shoes image, and it's this tree photo here, and we're going to set it to cover, just like we did with the hero and actually top left is great, but I kind of want that tree to be here, and I definitely don't want into time. All right, Um, now it's set, but I Currently it's, um, way to present its dealing attention away from the photos. And that's not its point is this point is just to be, like a subtle texture in the background, so we can actually add another background. And this time we're going to use a color overlay. And let's just get a white, um, that's that, like, was trying 98 or so and see how that looks. Maybe 97. Um, I like 98 because you can barely tell it This is a tree again. I just want this little soft texture in the background just like my personal preference. All right, so the background look looks nice, Um and ah, yeah, I love the way the section turned out. Let's make sure that our lightbox still works, okay? Everything is working perfectly. And as it should, So we're gonna leave this lesson here in the next section. We're going to be working on the about section, and it's gonna be, um uh oops. What? That moved over There we go. It's getting pretty fun. We're gonna be using a bigger drop shadow down here towards the bottom. And they're gonna be using absolute positioning to get this signature to show up above the image. And I think you go pretty quickly because it's a pretty simple section. I joined me in the next lesson. 8. About Section: in this lesson. We're gonna be working on the about section, and I'm hoping that this one will go a little bit faster because this is a lot simpler than the previous ones. And we've already started talking about some topics, but I think it's gonna be fun, because we're gonna do fun things like add this Ah, signature at the bottom, left there and, um, just kind of see it take shape. So one quick note is I did change the background color of this section because I want to make it a little bit darker to help the signature to stand out. Um, OK, so with this section selected first thing, where do is add a combo class and we're gonna call this about section and let's just go ahead and give it on that nice color that we changed it to on the inside of their Let's add a deadlock on, we're gonna add our container class. Okay. Perfect. Um, one quick change I'm gonna make to this container class is, um if you notice that content here is quite a bit wider than the content here, that's because with this section the vertical photo and the very vertical block of text when I pushed things in a little bit closer into the center. Uh, so I'm gonna add a combat class, the container and say, Max with, um, let's do 9 60 and we can always come back. And I just so you see that the container is not quite a bit smaller. All right, then, um, inside of that container, let's add a new dip block, and this is gonna function as our flex horizontal parent. Okay, up at the top. Under Leah, let's make this a flex box. We're gonna align things in the middle of What that's going to do is, um it's gonna align. If I can get the to these clicks, it's gonna align this box in the middle of this photo, right? So flux aligned middle, and we're gonna push the elements towards the middle of the page as well. Um, then with flex horizontal, let's add a deadlock and call this flex horizontal child. Copy that and paste it that Now we've got two side by side, um, and then the next We want to do this with flexors Until child. Since the parent element is set to flex books. We get this sizing, um, so I wouldn't want to do is make thes 50% of the parent. There's a couple of ways to do that. One is to hit grow, if possible. And what that means is that each child is gonna be as big as possible in relationship to the other Children. So if I keep adding them there now, 33 or 1/3 of the parent, not another one, they're 25. A different way to do that is if I want to just make sure that it's exactly the size I want . I could actually hit basis. And I want to say I want each of used to be 50%. Um And then, by the way, that's not working, because, um, with Flex, the parent actually said this to wrap Um, All right, so now, uh, the Flex Children are 50% of their parent elements. We can get rid of those last two there. All right, so now we've got this nice to column layup, and then instead of flexors until child, let's add our image and we're gonna create this one and, uh, for medium shot of photographer that could be our I'll text lips. This is a little glitch I've noticed with Web flow is if you don't type this fast enough, sometimes the text will disappear. Um, am I trying to say medium shot of photographer? There we go. And then with the image, let's give this a class of shadow for because that's what I had in my design. And we're gonna add some or drop shadows. Uh, that is, uh, what is the out, Curtis? All right, so let's add our three. Let's do this as quickly as possible. 1 80 Ah, for eight. I think it waas um, I think this waas eight 16 something like that. And then this final one WAAS 16 32. So that looks nice and large. Um, I think I got that wrong, actually. All right, let me double check. Just a second. 64. 32. Okay, so, four, this must be 16. 32 and this must be I think that's probably right. Actually, the smallest one for eight. Yeah. Okay, um, then that's at our signatures. Click image. Um, we'll do photographer signature. I like to add these all text right away, because if you just say, Oh, I'll come back to that. The truth is, you never will. Um, let's go ahead and click our image. And then let's get the actual size from our design here. And, um, there we go high of 104. Okay, remember, in the box model Ah, the signature is showing up below the image on the left hand side because that's how box model works. So we need t again. Use absolute positioning to get the signature to show up on top of image a little bit above and to the left. All right, So the first thing we need to do is with image selected. Let's got a new class called Signature, and I already know I made a mistake and I'll show you why in a second. But we're gonna set this top position absolute. And it's drying up there, um, nowhere near the image. So what I actually need to do is with flexors until child, that's what's holding the image. I need to add a combo class of position relative at that position relative here. And then Now, um, if you see the target, the signature is not targeting flex horizontal child, and I want to send it to the bottom left. All right. Now, if you look here, we're gonna be using this little box to set where the signature shows up. So by hitting bottom left what it that was it set the left and bottom 20% and the top and right to auto. And the reason that works is because it's kind of like saying I need the element to be 0% from the bottom and 0% from the left. That's why it's nesting right here. Uh, so we can use that to our advantage. So instead of 0% let's make this 32 pixels. We've sent it up a little bit, and then we can use a negative pixel amount of send it to the left of the image. We could do negative 80 pixels. Right now, the signature is showing up in the correct spot there. And that side that column is done next up. Is this one, uh, in this child. I want to go ahead and add that padding. Um, so we're gonna give this a comeback class of P L for patting left 104 and add that here. It's hard to see because none of this has collapsed. But, um, let me go ahead and add some elements. So, like, for example, this text, Um, here we go. And so now you see that 104 pixels of patting pushing the content away from the image. Um, here, we can actually just copy and paste um, this info here clips, delete that. Then add a heading I get to and then that showing up. So let's change this to about it's copy and paste this. And then let's copy this text here and let's add a paragraph and bill. The last thing we need to do is add a button. I don't think we've done buttons previously. OK, so this is a new thing for this lesson. Perfect. So with paragraph selected, I can hit Command E, and there is actually a button little component in Web flow, which is great. And so let's just set the where the link is, too. Here. We're not going to concern ourselves with that right now. Let's give this a class of button and the Texas already set toe white, which is what we want, but we want to set it. Teoh this black color here and then, um, I think it says send me a message. Send me a message. Okay, um, let's go ahead and set the typography and then next will set the spacing s o. I know that the, um, type is all caps, and it probably has, like, three pixels of spacing. That's probably too much. Um, it's actually going here, and this is 13. It is three pixels on its semi bold. Okay, so 13 pixels is three and is semi bolt. Then let's zoom in nice and close and holding option. It will tell us how far away everything is. None of the pixel amounts are uniform. That's my bad, but should be 16 top and bottom and 24 on the sides. Okay, so 16 top and bottom and 24 on the size of holding option. So that a zai move one. The other one is uniform with it. And then the next thing I want to do is use margin to push it away from the top, and then it needs to be 24 pixels running into a little bit of an issue here and If I go to enable x ray mode, you'll notice that the paragraph has a margin bottom of 10 eso since this is a to 24 but, um, paragraph above it is set to 10. So, really, this needs to be 14. So that in total, this is 24. All right, um, so let's set a hover state for our button to make sure people know it's nice and clickable , and I think we can go to Maybe I chose the wrong one, not black. Um, I guess we'll have to step down to, like, Darkest. Um, we'll go back to the nun state, add a transition to soften that background color transition. Worst background color. Um, yes. If I preview this, uh, when I hover over it, I get that nice hover transition. Okay, so that was pretty fast, right? Um uh uh. Okay, so that's it for this lesson. And the next lesson we're gonna be working on the services and we're gonna have some fun creating a card. You I so stick around for the next lesson. 9. Services Section: in this lesson, we're gonna be working on the services section And what's interesting about this section as that we're gonna be working on a car. Did you I you i being user interface card. You I and those are very common elements and website design. And what they're used for is when you have a lot of information that you're trying to convey and maybe that information off, it's kind like in this thematic element, if you will, you can kind of create these little bite sized moments or use a fancy French word MSM saying, um so that the users and get overwhelmed by all of the information. So hey, we've got four services and these cards is horizontal elements giving border to the sub content. It kind of makes it. Like I said, these bite size chunks where we can engage with things a little bit at a time. We're gonna be using CSS grid to achieve this layout. And we already used CSS grid for the, uh, kind of like photo settings in the portfolio section. But we didn't really engage with it in a full way, so I wanted to take the time to dig into it a little bit more by working on this section, right? Let's jump into Web blow here in this section. Let's do what we've done with almost every other section which is at a container class inside of this Dev. And then the next I'm going to do is ah, Pat on the back to us for thinking ahead. We created this section header. It's not all had to do is copy and then scroll back down and make sure that lips Sorry about that. Make sure that my container is selected command being and boom are section header is ready to go and all we have to do is type in the new content. All right, so I go back over here, copy the H two text, and I love how easy we made it for ourselves to do that. The next thing we're gonna do is not with suction header selected because the woods here is very constrained. But with the container selected, we're gonna add a grit. Not previously we added a de block and then in the layout section, we created the grid. By clicking on this icon, you can actually just search for grid and add it that way. You medically creates a deadlock with the layout of great attached to it. Just kind of a little time saver, right? The next I'm going to do is give this great name. So let's hit command return, and it's kind of behind the overlay here, but we're gonna call this services grid. All right, so this is pretty close to the layout that we actually need, But let's talk about grid for a little bit longer, so that you kind of have a sense for how you could apply this to your own projects. So first of all, we can add a our own like custom amount of columns and rows. So here have got a four by four graded. In other words, 16 cells. Um, and you can just keep adding or subtracting columns and rows fit that. Not only that, but we can easily mess with the gutter space in between. These or, uh, can use the settings panel over here. On the other cool thing is me. Pop out of here. Let me add a dip block. Um, now this did block is set Teoh position, auto, And what that means is that because I keep adding elements that just gonna show up in the next available grid space. But if we wanted to, we could actually change the position to manual. And then we could move this around and just have it in any space where we designate The other cool thing about this is these did blocks. They don't have to spend only one sells. I could grab this corner note here, drag this across the grid. And now, if you look over here, it starts from called one through three and roll. 133 It's now we've got this element here and we can do another thing. We get at us Notre de Block again, said it to manual, position it in the bottom right hand corner and then spin it. And it's actually not overlapping. Are other Dave block. So just by using CSS grid, we can create these really complex layouts. Uh, that would other buys just be really, really tough to do. And we can actually create Lance that break the grid quote unquote using CS. That's great. I love the irony of that. Um, so we talked a little bit more about grid. Um let's get rid of this. And then let's kind of get our grid back to where we want it. Yes, I'm gonna delete all but one row and all but two columns, and then I'm gonna make sure that the spacing is set to 32 which is what my design calls for. We may go ahead and change that. It feels like a bit much right now, but we'll leave it there for now. Leadeth add a new de block and we're gonna give us a class of services card. The card's gonna have a background color of I think it's called lightest her later. Later. Okay, then with this, we're actually gonna use a flex box inside of our CSS grid toe layout, the content of the card itself. So if I go back to my design, we're gonna treat this card. Are this photo like a content itself and then the content over here? We're going to treat it like a group. So we have one dead block for the card. One don't block for the content here, and then we're going to treat the H three and the paragraph text as a group and then the length by itself. Alright, So, back to the design. Let's add to dip blocks and then with services, grid reviews flex box. And we're going to, um I think I did that incorrectly. Say what? Services card we're gonna do flex box. Here we go. And we're gonna set this to, um What am I looking out here? Okay, so these settings are actually find at the moments we'll leave those bear. All right. First, let's work on the photograph. This is going to get a little bit complicated, cause we're gonna be using image ratios. But this is really important content for you to know about. All right? So just to set the stage a little bit, if I go back to my design, you noticed that the cards are very uniform, and part of the uniformity comes from the photos and how they're all the same size and image ratio. But if we just go ahead and like in the step block, we just had an image field, and we're just kind of expecting, but the client is gonna upload images. All have the same image ratio. We are probably going to be disappointed, and the client will probably uploaded something a four. That's a different image ratio. It's gonna break the whole system. So really, we gotta figure out a full proof way for these images to display at the correct ratio without breaking our card. And so, uh, rather than used the image field, we're gonna use background photo. Um, our background image, I should say, just like we did with the hero header. All right, So what did block selected? What I'm gonna do is, um, give a class of image and forget what the exact ratio. So let's just do services image. All right. Um, you know, actually, I did that incorrectly site. Ah. First, I need to set the wits that contains the service image. So let's delete that for a second. Let's add a, uh, okay, but that's elected a new class of flex child 33 that sense for 33%. And so in basis, we already talked about basis above. In the about section, I'm gonna set this to 33.33%. In other words, a 1/3. So now this is taking up 1/3 of the whole card, and then in there, we're gonna add our services image. All right, there we go. And what the services image selected were to make the with 100% we're gonna make the height zero. I know that sounds a little weird, but, um, stick with me here, and then we're going to get the ratio from the images. So how do we get the ratio? Well, we just divide the height by the with, or vice versa, depending on whether it's horizontal or vertical photo. So this is with the 496 and the height of 96. No, that's not right. There we go high of 268 and 1 79 So what I can do is in my patting due to 68 divided by 1 79 Um, and I make that a percent and it's got It's not gonna be correct, because, really, this needs to be 149% as opposed toe 1.49 eso is They should be multiplied by 100 and we could just round up. I think it's 100 and 50%. Okay. The reason that works is because, um, a percentage of padding is determined by the wits of the parent element. That's why we made this flex child 33% of the cart. If we had. If we hadn't done that, this patting thing wouldn't have worked. Um, and then we're going to set a background photo, go ahead and choose the image. And I think it's the guy on the kind of, like, minimal shot there. And we go to the same settings that we did for the heroes had to cover center and do not tile. All right, so now, uh, as we copy and paste this card into the other ones, each imagining matter, what we do is image is going to be in that ratio. That's exactly what we want. But this one we're gonna do flex child expand because we just want this child to expand and fill up the remaining amount of space. All right, Next, let's go ahead and add a new did block, and this is going to contain the content of the card. So we're gonna call this services card in her. The first thing we need to do is figure out that spacing for this so it looks like it's 32 pixels on every side. So we'll just add that 32 here and we're gonna make it height 100% because we wanted to fill up, um, the whole card. And then we're gonna add a dip. Look inside of there. So that we can add are, uh oops. I did the wrong thing. Where we go, we can add a h three and then right next time we're gonna add a paragraph and then outside of that box, remember, we're using that de block to make these elements act like a group. We're gonna add a text link right now. The card is breaking a little bit here, so we're gonna fix that. One thing we can do is, um, Let's see. I think we can set this to minimum height 100%. And that should work. And then as we scale down, it's gonna maintain, actually, sorry. As we scale up, it's gonna maintain the original ratio. Right? So what we did there was if we don't have that minimum height, we're gonna get that little gap. And as we scroll in, it's going to continue getting bigger and bigger and bigger. But on a larger browsers. We shouldn't get that gap. But I said in the minimum height, we're going to make sure that, uh as it exceeds the women's ratio, it's gonna grow. And then let's go ahead and grab the actual content from here. And our hope is that, um, the client will have last content in here. Tham what we had just previously entered. So they're going to be more kind of like short teaser blurbs, if you will, but we need toe. We need to develop this in the eventuality that the client types and more constantly we were bargaining for less. We always got to kind of anticipate them breaking the same. Um, so that's what we have the minimum height of 100%. So on large sizes are images, the ratio that we want. But as the browser gets smaller and the content starts overflowing, the image is going to grow with it. Okay, there we go. Right next is with the services cart Inner. We're gonna use flex box yet again, and we're going to use the same trick that we did for the hover states in the portfolio where we're going to align them vertically and then push everything using space between so that the link is at the bottom of the card. Um, all right, just a few more things here. Let's go ahead and style are H three and then they go back to the design and get this info here when I get settings and it's monster at 17 medium. All right, so it's 17 medium, all caps, and I think it had about one pixel of letter spacing. And this is commercial, I believe. Okay, then let's dial the link and we'll just call this text link, go back to the design. We're not gonna worry about the underlying for now, but let's get the, uh, thing here. So this is size 13 and it is all caps, I think three pixels of letter spacing. We're going to remove the underlying its. They're currently because it's too snug to the text. And then we're gonna make sure that it's our black color here. And then I think it's a different font way semi. Both. Okay. All right. So how do we get that underlying that appeared below the text link? Um, first of all, let's make it book a shoot. That's more representative of the actual final product on the way we do that is by using a bottom border eso down here, I'm gonna click on the, uh, little bottom border icon. And instead of X, we want to make sure that it's a solid line and black and we can't see it because, um, the blue box bounding box was covering it up, but it's almost there. Um, is it one pixel? Yes. This let me zoom in a little bit and figure out how I had set this up. So it's four pixels from of padding between the text and the underlying what we do that is by clicking on the text link and adding four pixels of padding below the text link. Now we still have a little bit of an issue where, um, the underline is going to the full width of the card minus the padding. But the text is not so why is that? And that has to do with layup. So I'm glad this came up because we got to We got to talk about some of the elements we haven't talked about before, but there are three other display settings. We talked about When is block when his in line block and one is ah, in line. Okay, so black is what this cursed currently set to and essentially what block is is, um it's gonna sound like this element is gonna take up the entire wits of, um, this line. Uh, so no other element can be on the same line as this element. So it's kind of like 100% wits of the parent element. So because of that, the underline is going all the way to the right hand side. Now, if we actually make this in line block and it's telling me I can't, I think maybe because it's a flex child. Okay, um, so one other thing we can do is come up to the services card, enter and we can set it to align left, and that should take care of the issue for us. Or what we could have done is wrap this in a block nest, uh, that in there and then make sure that this is that toe in line block. Currently it's in line. It could be in line block or it could be in line either one it actually needs to be in line block because in line doesn't allow us to give that four pixels of padding. You see in line elements you can't have padding. And that's one of the features of in line Is that, um it's kind of like you could have different elements. Are, um it treats kind of like the elements, like their words in a sentence on and they are next to each other on a line. I didn't explain that. Well, I kind of have to have a specific example of to make that work. Ah, but essentially, it's like the treating it this last, like an element of its own, and more like it's something in another group. All right, I still feel like I didn't explain that well, but, um, but I think for our purposes in line, block here works. However, I think the most elegant solution is just to go ahead. And, um, get this out of that deadlock and, um, used the line left feature here. Okay. I just love elegant solutions that use the least amount of stylings. So that your again we're trying to create a lightweight Very thin. Uh uh CSS for our website. to keep running smooth and fast. Um, the last time you want to do is this paragraph is actually a P two, according to the design. And it's a different color. Uh, so it's the darker color, so we can just create a combo class called darker text. We're gonna change this from black. To think this is darker. This is Dr Oh, there we go. That's darker. Okay? And I think the line height could use a little bit of work. So, uh, here in the, um, getting to the target target p two and instead of 1.5, let's make it 1.8. Maybe right. That looks a lot better. Then I'm gonna copy the services card, and then with services good selected, just go ahead and copy and paste four times and you'll notice if I had a grid that there's actually only one road. And now there's one auto generated road cause there's four elements, but only two columns. That's a nice feature of CSS cred. Right now, all we gotta do is, um, just change up the content to fit our designs. This is gonna be weddings. I think engagements and couples all right. And the very last thing that we need to do is we need toe, um, change the photograph for the cards, and I purposefully, uh, wanted to have this example so that you could see how this works. But OK, so currently, like, let's say this current services image I want to change this to the wedding's photo. Well, if I wanted here and said, OK, I'm gonna choose the image. This is the wedding photo. Well, wait a second. We're having an issue where now it's applying that same photographed every single one, um, make let me go ahead and undo that. The reason that it's doing that is because services image is a CSS class and this background image, it's actually not remember, it's not an image element in and of itself. It's a a CSS style that we're applying to this HTML element to the services image CSS class . So whenever I make a change here to the class, since all four have that class applied to it, they're off for going to change. You need to know that because if you want your client to be able to change like header images on multiple pages, you're going to run into this issue on the way to fix it is by using combo classes. So we're going to call this weddings image. This is going to be engagements image, and this is gonna be couples image. All right, so now you notice that this isn't blue anymore. Um, now, when I go ahead and click on it and change it to, uh, weddings, this one too. Engagement's think, is this one and this one, two couples and I can't remember which the couple's 10 I think it's this one right now because of those combo classes. When I change the image for that CSS class, it's only changing it in that one scenario. All right, so that does it for this lesson. And the next lesson, we're gonna tackle the contact page down here. I'm gonna be creating our first form which, like I said at the beginning of class, is incredibly important because the whole point of this home website is for people to be able to connect with the photographer. So join me in the next lesson. Learn about forms 10. Contact Section: in this lesson, we get the tackle, the last of these sections inside of our main element and a people abroad. But by working on the footer as well. And so I'm excited to get this finished. And then we'll wrap up the course by talking about, um, were actually developing the mobile responsiveness in adding some interactions to the website to make it feel like it's a little bit more organic and less static. Right. So let's jump into outflow and actually create, uh, this So I'm gonna click on the last section here, and we're gonna do what we did with the abound portfolio section. We add a combo class and we're gonna call it Contact Section and the background color is gonna be our dark inside of there, just like we've done with all the other sections previously. That's gotta develop and give it our container class. All right, on the inside of container, let's go ahead and at a heading. That's gonna be an age to, and it needs to say, Contact me. All right, I'm gonna go and create a new class for this just because I need to do a few things to this um uh, what am I trying to say to this piece of type? It just be sundered. I needed to be why? I need to have margin bottom of 48 pixels on. So instead of using a bunch of combo classes for that, let's just create a new class called contact H two. And so that way I can go ahead and make it white. I can center it, and I can add that margin bottom 48. Actually, I can take off this margin top of 16 pixels here. I've got my contact form ready or headline as next is the layout. So if I go over to my design and we've got this two column layout and you probably saw me scrolling up to this section, I think that we can just borrow, uh, the way that we created this layout with flex horizontal. I think that we can just borrow that and we use it with a slight modification for this section. So I'm gonna delete all the content that we don't need. Um, so I love this stuff in here and then inside of these, let's add a, um each three tag. Okay. And then one more on this side right now. We can't see it because the heading is actually the same color as our background. And what we can do is remember with cascading style sheets. If you set the attributes to a parent element, it's gonna cascade down to its Children. Since you pretty much want all of the text in the section to be white, we can go ahead and change the text color right here and we'll be able to actually see, um, are heading. All right, so this is is send a message and this one is, um, contact directly, I think was reached out directly there. We go inside of send a message, we're gonna add our form block. So if I just type in form here, you're going to see that the form block shows up. Alternatively, you could hit a and there's actually a whole collection of things for the forms. So you have individual items that go with in the form block, and then this is kind of like, um the element that holds all of it. Together we went into a little bit of an issue where this is not showing up in the middle or aligned to the middle of this element. And that's because our flex horizontal is set to align center. We can just create a combo class that is a line top and then make it so Okay, um, next up, let's had two boxes. What is gonna be for holding this element? And what is going to be for holding this? All right. Um actually, I think what we can do is go ahead and do their flock. Uh, what's not sure what I did there. Sorry about that Rights Golden. And that's at a depth block. And we're gonna put this insider that did block on. And then and there was another deadlock. We're gonna add a piece of text. We're gonna give it that overline small, um, the thing that we created previously. And if I go back to my design, you'll notice that this is at capacity 70. And actually, if I just go to the selector field, that capacity 70 combo class that we created before is already in there. And then we'll add a paragraph text. All right, let's just copy and paste this. This is actually paragraph jumbo. So we're going to need to create a class for that. Let's do that in a second. Um, and then inside a black, let's create another one. So what kind? I got the format a little bit for this already set. And then let's go ahead and to copy this the block and add it again. And, uh, now we've got, um, like, the format. Ready for this right here. Follow my work. I guess they work. Okay, We're gonna have, like, the basic structure set up. Let's go ahead and work on our form. Um, So what I'm gonna do is we've got to labels and to field inputs. And instead of adding the classes kind of manually weaken, just delete what we don't need. Add the classes here. I'm gonna wrap these in a deadlock. And this is a little bit is your to do the navigator here. Let's give a class to this. We'll call this a form and put a wrapper. Okay. And then there's gonna need to be four of these. Uh, make sure all of these have classes. Uh, this one actually needs to be passed a 70. Um, all right. Perfect. And then we can copy this three times 123 The button is here, Um, where it shouldn't be. So that's a cable. Just move everything upset. The button is towards the bottom. So now we've got the basic structure of our form ready to go. Um, the next thing we need to do is if I go to form, are less like, let's do foreign block and we'll just call it foreign block to match what Web flow is calling it. We need to add some margin toe, push it away from the H three. So if I click on this and hold option down, that's his 34. I bet it's supposed to be 32. And let's actually add it here, since this already has this eight pixels. So margin bottom 32 and we'll make this here. We'll do the same thing with the Soviet matches writing. Um, the next thing we need to do is work on the form input field. And so, first of all, let's go and change the background color. Teoh. It's one step down from the black, and it is the darkest. Here we go now. It's got this great border, and if I scroll down, you're going to see. It's telling us No, there's no border, but there actually is, and it's just because this is a Web flow component. And so it's got some, like settings are already applied to it. So we just need to click that again. And now that we've officially declared that there's no border, they're showing up without that border. All right, let's drink the content. So that is name, phone, email, message name, phone, e mail and a message. And by the way, this form input field is we're using the incorrect one. So this is like a regular text field. But if I go Teoh a hit and go down to the form section here, uh, currently, this is an input, but it needs to be a text area so that the user can type in like their own content. So form and put field and you'll notice these little like that little, little two lines and another called. But that signifies that the user can make that field grow so they can type and more text if they need to, so we can get rid of that one. And then let's add, um, in the elements settings we're gonna add the correct label for these, we're gonna have placeholder text, and then they can change the type of that field. So the place holder Texas going to enter your name and let's make it required. This is not the name. Of course, this is the phone, and this is important. Um, modify. Because when the user submits the form and if you're using well, flow for your form submissions. When you get that email, um, it'll have these labels inside of it. So if it says name, too, and then it has a phone number, it might be confusing for your client. Uh, so you need to make sure that you modify all of these labels text type. What it means is the data that's being entered into this field. Is it? A plain piece of text is an email. Is it a password? Is it a phone or is it a generic number? And this We want phone, and you do want to make it required to make sure that they nights trick wireless at an asterisk. We'll make email required as well. So that's changes to, you know, tear your email text type is gonna be email, and what's nice about that is if they miss, type their email like, for example, so that instead of saying dot com if they miss, type it and there's like no period, um, the website will tell them, Hey, this isn't an actual email address. Make sure it's correct. Just gonna give them a warning to let them know because we set this to email, make it required, and then the message will say a message. And let's say type a note. We're not gonna make it required. Um, just because it's a message, Right? Um, next we need toe style, the form input field here and again because this is something that kind of, like comes pre baked with Web flow. Um, even though it says 16 here, this is not 16 pixels. You can tell because this right here is 16 pixels. So I just go ahead and press down arrow and the up arrow, and now that is actually 16 pixels. Let's make sure that we set this to White, and it's not white here because there's a state for these input fields called placeholder, and that was is, that's what's showing up right now. right. So if I change the text color here to White now it's showing up like, but let's change it to 70% just like we did with, um, the labels above the forms on Let's go back to none. And then there's one more thing you want to do if we go in here and change the padding or look at the padding its 12 top and bottom and 24 on the sides. But notice that as I add this padding, um, it kind of feels like Why is it that, um, this is still a lot shorter than what it looks like in my design? Um, and that's because, uh, for whatever reason, um, these form inputs feels they treat the tax inside of them just a little bit differently. And so I found that I just go. It's better to use, like a minimum height for my design. So it's currently set to 50. I just do the minimum height of 50 pixels that looks way closer to my design. Then what it did when I just added that padding, Um okay. And then at last, is let's tweak the distance between these. Um, so I think we just need to add 16 pixels of margin bottom, uh, to the rapid. Okay, that added a little bit of white space between this label and this field feels like it's breathing a little bit nicer. And then last, let's work on the submit button. So I think we already worked on button, so we can just simply apply that class. And we need to add a combo class to tweak it so that it works for this. Let's add a form button combo less. And first of all, we're gonna make it. What's 100%? Just like our design, it spans the whole width of the form block. The text color is gonna be our, um, black and the background is gonna be white. All right, so I think that let's correct send message. So here's where in the elements. Sightings for the button. This is where we change the button text send message, lips spelled. Sent here is some pretty cool stuff that you can do. So one like let's say this was a form for people to sign up for a newsletter. You could go into male chimp instead of get you could change this to post, and then you would entering your information from male chimp. We're not going to do that here. Of course, because this isn't a newsletter. Sign up. I just wanted to make it make you aware that you could automatically add people to your mail. Chimp lists are probably other email provider. Um, And then, uh, that way you could grow your mailing list automatically from your website and the nothing you could do as you could create a success page so you could have a page that is specifically same. Congratulations. Your message was sent here. Some other resource is you can check out while you wait for a response from us. And you would put that here. So it's showing you example Success lips did the backslash instead of the forward slash area. Um, this refers to the page. So they had a page called Success. After they completed the form, it would redirect them to that page. I do that a lot in my projects because it feels like it's a little bit more polished, if you will. Right now, let's work on this section over here. The first thing we need to do is we're gonna have, um, let's create a class for this box right here that we can add the line and the spacing around the line. So I click on this Looks like there's 32 pixels of spacing on either side. Um, so with this did Block was given a class of direct rapper, and it's got patting of 32 pixels above and 32 pixels of margin below. And then, um, uh, you know what I realized is let's just go ahead and add it for now, and it's a light 12%. Uh, I think the line is going to go a little bit too long for my taste. So I wonder if we can tweak this. Um, so this is set to block. And I think if we set this to in line block, um, we'll get that line. There we go. So we talked about blocking in line block before for the links here. Now we're getting to use it. So previously when it was set to block, remember, it's expanding the whole woods of the parent element. And if we said it to in line block, it's just taking up as much room as it needs that I would get that nice white line that's on Leah's wide as the content. Right. Then let's change this content. This is call E mail on. This is gonna be p jumbo and let's get the sightings here. This is 18 pixels and, ah, with quite a bit quite a lot of line height. Let's go and change that 18 on. Let's make it like that, too. That looks good. The other thing we can do is we can actually make these text links s if I add a text link on copy over. Watch it. But at the class p jumbo, All right, now it's blue and it's underlined because the browser is realizing, Hey, this is the link. Are you sure you don't want this to display as a linked by using, um, the classic link style? Um, And while I appreciate that the browser is trying to do that, I wanted to have the sounds of create so we didn't We didn't set the color toe white in the class itself. Remember, that's coming from the section. So let's go ahead and declare it within three class, and then let's get rid of the underlying. Okay? And then let's go ahead and copy the number. And in the element sightings, we could not actually choose phone and at her phone number in that box. And now on mobile, somebody could just click that little automatically. Let them, uh, will bring up the dialer so they could go ahead and call, and then we can do the same thing with the email. Um, so that was Couldn't copy this. Uh, this is just regular I was feeling a little bit. Um, let's use light for a P. Jumbos is feeling a bit, um, bold. So on, so I email dot com And then instead of fun number, it's gonna be an email, And we can add the email that you can even type in, um, an automatic subject line for when the user clicks on that. All right. Last is, uh, the social links down here, and I think that we can actually go up, um, and steal these social links right here. It was just copied one. I don't think we need that labels. Let's just delete that. And then we can delete this whole Dave block yo at our thing in there and then we'll call this, um, contact section social like, got a long name, but And we're gonna switch, uh, patting. It's gonna be 32 on the right. Um, let's change the color. So this is dark, which I think is this one. All right. And then on hunger, let's just make Goto white. So we need three of these on. Then let's copy that text from up above. All right. And one more the 500 PX. True. And there we go. By the way, the way that we would actually set these length is the same way that we did with ease, so we would go to element signings, and then we would take this in here, so this would be like 500 PX dot com and I recommend opening a new tab since we don't want people to navigate away from our website. But we do want them to check out the work and follow the photographer. All right, we're almost done. Except that, um so we're actually this looks like the designs of my hop over to my design. It looks like what we created, but we need to do one more thing, and that's with form. We need to create a state for the success on for the air. So we're gonna keep this pretty simple. Uh, where? Let's go ahead and create this Will call it a success state and will make the same color. Sorry as I think. Is it this one? Yeah. Uh, so this one says thank you. Um, and let's make sure that 16 pixels in reality, okay? Yeah, it looks like it is. All right, so I'm happy with that. I think that's fine. Um, if this was a real design, I'd probably spend a little more time making that look better. Uh, but just for this, um, of course. I think that's fine. And then, um, error. Um, here, we want something nice in front. It's gonna grab the attention of the user. Um, so area message. It's gonna be our CSS class. And then let's use like I said something nice and break, So let's actually make it wait. Make the text dark. That's a line it in the middle. And I think we need a different color just to set it off from the button. Right? Something like that, right. Oh, I misspelled it, but That's OK. Um okay, so I'm again. If I was working on actual website, I probably would get, like, a red color that drived okay with this, because usually you want air messages to be read, and you want success messages to be green. But I think for the purposes of this course networks, All righty. Um, So I think the last thing I want to do is make sure that the spacing between these elements is correct. Um, over. That's supposed to be 16 pixels above this. So we can just dio another combo class of margin 16. I think this is the first instance where we have three combo classes are three classes. Two of them are combo. And that just gonna push that down a little bit so that these feel a little bit more like, um, they're a group and none that I'm seeing this. I think that two pixels might just be a little too much. So 1.6 looks better. Okay, um, already. So that does it for this section. I'm really glad that we got to work on the form. We talk through some of the technical aspects, like making sure that these have correct labels so that when you get the email, it's labeled appropriately. We talked about the states making sure that you have a state for when there's an heir or the success. And ah, and then we even used the same layup from up above. So you see how you can, like, recycle layouts on some. I'm glad they had the opportunity to do all that stuff. So all right, let's go ahead and, um, finish up with the footer and then I think we should be golden. All right, let's add a class of flutter and then, um, this has some padding hoops. I don't know what I did there. So if I select both elements and option, we can see that's got some padding, and it is 48 pixels on either side and 32 whips. No. 24 bottom. And then let's go ahead and add a link block. Ah, Link Block is essentially the same thing as a text link, except it's a dead block with link capabilities attached to it. And we want this is to go to home and inside of there. Let's add our logo. Um, actually, I think, um I just realized I don't have the logo and the dark color are doing. Oh, yeah, I did. I guess I could just copy and paste Let me go. And then with footer selected, I'll go ahead and add a paragraph on. Let's just copy. Uh, this copyright disclaimer. I believe this is gonna be a p two. Alrighty, then, my footer, We're gonna use Flux box at space between to get the logo on the left and the disclaimer on the right. And then I think we're having a spacing issue. Maybe this one has that 10 pixels of margin. Let's do margin, bottom zero. Okay, here we go. Now it feels like the spacing is even on the top and the bottom. Um, already. So, believe it or not, we're actually done developing the desktop version of this website. So glad that if you've made it through the lessons congratulations. A night was a lot toe learn and take in as we created all of this stuff. In the next lesson, we're going to make this website responsive. And then the following lesson, we're gonna add some interactions to make this website feel more alive. And then finally We're going to talk about getting ready to launch the website. Live right. Thank you, guys. See, in the next lesson 11. Making the Website Responsive: in this lesson, we're gonna be working on the responsiveness of our website now. Responsiveness is when the website responds to the width of the browser with being the important crucial element there, so that as it gets narrower, the website makes adjustments that's optimized for that with size, and the narrowest point would be mobile portrait or when we look on our phones with the phones right side up. And the phone needs to look really good when it's that vertical, even though on desktop it's quite horizontal the way that we see things. So let's jump into a flow and start actually making some edits. Now there's two ways to make your website responsive. What is toe on the desktop version, toe build and some responsiveness into the website itself. So, for example, if I turn an X ray mode, we talked about how these containers are, um, a building block of responsiveness, because as the browser gets smaller, that container adjusts, Um, so that's one way to do things is to build in some responsiveness. But the second way is to make adjustments at various break points to make sure that it looks good for different devices. What is a break point? Well, the break points are actually you can use really any break point that you want, but in what flow? We have these default break points. We've got tablet, uh, portrait landscape and portrait mobile on. And then if you look down here at the bottom, particularly the bottom right As I scroll up and down, you'll notice that there's these little diamonds that show me. Okay, so at this browser with are actually specific devices that I contest for and they've actually all the way, you'll see that I can't scroll past this amount 991 pixels. That's technically my break point. And, um, everything you should know about break points is that when I make a change like here in the tablet break point, it's gonna cascade down to the smaller break points. But it won't cascade up. Let me show you an example. If I got in my h one and just do something like change the text color really quick, I noticed that on landscape and portrait it's not that color, but on desktop it's still the dark color. Eso again cascades down, but that up and that's exactly what we want. All right, Then there's two ways to contest your website and kind of the qualitative analysis to make sure it looks good as the browser. What gets smaller and smaller one is just to simply use these built in wonderful of break points and just go through the website, um, while in the different break points and see how everything looks. So obviously, you've got an issue right here. Um uh, but the other in the method that I prefer is using Google Chrome's developer tools you may have. You may have some reservations about Google or using Google chrome. You may prefer another browser on the other. Browsers may have tools like this. I'm just personally not aware of them because I default to Google Chrome. But anyways, if you publish your website, let's go ahead and publish it here. And, um, open it up. So this is kind of like the live version of the website. If I right click and inspect, I'm in chrome developer tools and appear at the top toolbar. We can actually toggle devices or previewing the website in different devices. So, like, right now, I'm looking at it on a pixel to. And if I go to like iPad, I can see what the website would look like on an iPad. Eso pretty great the way that this works. Um, so let's do this. Let's, um first of all, that's that's fit to window so that we can see the whole thing. And let's go through the website and just kind of see if everything looks good. I'm gonna scroll down. And in terms of the header, the header looks good. I will say one thing that, um So I worked on this video before recording it, of course. And I added, um, for the social links. I wanted to get rid of these on tablet cause they're going to be inside of the menu. So I added a combo class called Tablet Display None, and simply just hit the nun. I come here and display. All right. The sexual header is looking pretty good. I like how the mountain looks in the text, and, um, I think that will be left alone. And then I like the portfolio section. It looks great. I want to keep that three column land. It looks nice, but there's one issue, and that's the hover card. Um, so if I happen to web flow and hover over these on mobile and landscape, there's not really a way to hover on things like you can't hover with your finger over an element. We only have hover on desktop when we can hover over things with our mouse. So, unfortunately, our hover card all they're a really cool feature. Um, we need to keep that to desktop only. So with her photo caption rapper selected, I'm just going to click display none on that way. When I hover over it now, it's not going to be there and it won't show up accidentally. Um, somebody's looking at it on their tablet or phone. Next is the about section, and we already saw that this has some layout issues and we're gonna address that now. But we gotta be mindful of the fact that the contacts section is built using the same, um uh, CSS class. So we had to kind of make adjustments to both. All right, so what's happening is, uh, this is still set to horizontal. They should be stacking side by side, but we set the Children to wrap and what that means is that, um the Flex parent is kind of looking at the Children and saying All right, if you guys exceed or grow beyond my my bounding box or how wide I am, I'm gonna force you to the next line. In other words, when this child and this child are on the same line, they grow beyond the boundaries of this box. So the parents kind of saying I'm gonna force you down to the next line. That's what rap If rap was not selected, uh, so we said, Don't wrap. Uh, then it would still be on one line. But rap is selected, and I like that because, um, when they're side by side on tablet, it's feeling a little too scrunched. Okay, so what we can do is we can just say all right now, I want you to stop vertically instead of being horizontal and right away we're seeing some improvement, cause the image is a lot bigger, and things are looking quite as a wacky, but we can change the flux horizontal child here. Remember, this has a combo class of patting left so we can get rid of that so that it spans the full with here, and we can add some panning to the top, uh, so that we're pushing it away from the image. Currently, the image feels like it's a little too big, and the signature is going beyond the website. So with E flex horizontal child selected, let's add a combo class of tablet 60 VW. Like I said, I was working on this previously, and we said The Max with toe 60 v. W. So now the images still nice and big, but it feels like it's appropriately size unders. Nice white space on either side. All right, let's go down to the We're gonna leapfrog the services section because since we made changes to the class holding this, we need to now address the contact fashion. All right, so now this is also stacking vertically. You can see over here in the right hand side, but the form is just way too narrow. Should be quite a bit wider. And we can fix that with one button over here in a line it's currently set to align left. If we do a line stretch that's going to stretch the fields to be 100% with this is actually also said to 100%. But the content itself is, uh, only as wide as the content is, and therefore, it's just aligning to the left there. Okay, um, next up is the services section. Now, these cards are, um I think the two column land is not gonna work on tablet. The photos just look wait to scrunched in vertical. And the blurb, uh, is not white enough, So let's go ahead and change that. Let's click on the grid and we're just gonna delete one of these columns. And what's wonderful is that weather is gonna automatically adjust this to a four row layout. And, um, and by the way, the cards are still kind of in the order that I had created them in. And if I go back to desktop, you'll notice that we still have the two column layout on desktop. That's a wonderful thing about See, it's That's cred, as I could make changes to the layout. Uhm, based on the break points. Okay, so let's go unpublished this and look at it again. And crumb developer tools, and I think that on the same mistaken we're done with Tablet and again. We're gonna work on navigation in the next lesson. Um, so just scrolling through everything does look pretty good. All right, so let's work on, um, portrait and landscape now, um, so let's go to, like, iPhone six. Um, Now, let's go to 100%. So we're seeing this. It's actual size. Um, Ottawa. Just maybe I feels too big anyways, um, So with landscape and portrait, my philosophy is make as many of the changes for the portrait break point make as many of those changes is possible in the landscape break point. And the reason for that is, um, hot back into Web flow and go to portrait and then kind of drag this to be as wide as possible. You'll notice that the break point for Landscape Portrait's 479 pixels currently the biggest phones are around 425 pixels wide about, You know, we don't really know the future like we don't know if a phone is gonna come out with 490 pixels wide, and that just happens to exceed the break point that we were using. So it's better, I think, to make as many of the changes as possible in Landscape, which has a break point of 767 pixels. Eso that we're optimizing things for portrait way beyond, like the current, um, browser sizes. There's a few things that we need to do, like if we go to this looks decent right now. Obviously, there's issues with readability here, But if I turn this over, um, you'll see that we're getting this rough layout with the caption being on top of the, um, tax there. And that's because we set the with arms side. We said the height of the hero section to be 100 b. H. Not here where it's kind of like, um, deceiving us because it's the height of our computer. But really, um, this should only be as tall as this. So what we can do is instead of having the height set by the View port, we need to change so that the height is determined by the content. All right, so how did he do that? Um, we need to do a couple of things with hero. Let's go ahead and change the height from 100 VH Just toe Auto and that means that it's kind of saying like, OK, now, my my height is determined by the, um, height of the things inside of me. Ah, we're having a little bit of an issue with the caption rapper because remember, the caption is set to position. Absolutely. And what that means is that, uh, the caption and the website is kind of ignoring the regular box model, and it's just positioning it as we said it. So if we just change it to, um, static now it's obeying like the regular laws of the box model. Next, as we can take this H one and let's go to all H one sightings and we can add 104 pixels of spacing. Um, do you blow it like we did with the padding above? Uh oh. Sorry margin above. And now this is looking a ton better. I think one last thing we can do with the background image is just lower it a little bit, um, so that there's more sky, um, something like that, by the way, we're getting some tiling. Like when I went down to negative 10. We've got some Thailand's that weaken turn tiling off Okay, let's go ahead. And, um Oh, sorry. One more thing I want to do is we're gonna tackle the not bar and full in the next lesson. But with enough bar, we can get rid of all of the padding top. And we can change the padding on the sides to, I guess, 24. Um, and that's a little bit more optimized for mobile on Mobile. You want your content, Toby? Wider eso that. It's kind of butting up more to the edges of the browser of the view port since the View port is so much narrower. Okay, now, let's publish it on. Let's take a look at it. Um, here it's Let me refresh. All right. So now, um, now you see that it's bigger than 100 v h. Because the content is setting the with our side the height of the hero. I feel like, uh, maybe there's too much white space above and below the heading, and I want to see a little bit of mountain right away. So what we can do is lets us reduce, um, the margin here to, like, 64 maybe. Or something like that. Um, and s I would the hero know that we made that reduction? Maybe we can scoot up the mountain a little bit when TV for something like that. Let's see if that gets the mountains above the fold. All right, that we are there, barely visible. But there, There. Okay, great. Um, let's go to, uh, portrait Mad and in portrait Were definitely having some issues with readability And what I did Waas I think we can go back Teoh having at least 100 VH. Um, so let me click on Hero and let's make the minimum height 100 VH so that it's at least that big. Oh, we're gonna have issues with our caption. Okay, let's not do that. Let's get the heading and let's increase it back to 104 just to make it girl a little bit. And then with hero, What I did was I exported, um, a new version of the hero image. She's image, and this one is just like a much taller ratio of the image. I click on that. Um, that's just gonna be way better for, um making making this visible. And then let's see if we can align to top. Oops, Okay. And it's still not quite readable. So let's Ah, let's publishers and look at it on actual phones and see what this looks like. Okay, yeah, I think on the actual phones, it's looking pretty good. Maybe like a really large phone is a two XL. Okay, that looks great. Having a few issues with the title on notice that spaces is kind of unaligned by itself on what running into is, um, there's a hard line break on some of the words. Um, if I go back to the desktop version after spaces I hit enter to create this new space and because I hit Enter, there's a is a ah, in the HTML, there's called a br Tager a break tag right here. And that means that, um when this when the browser renders, the website is gonna push the next line, no matter what to the next line, so we can fix that by doing something with max width. Let's go back to the design. Click on this and he said, the max the width is about 394 5 pixels. What we can do is let's get rid of those hard breaks go into our H one and say the max width is 395. All right, so now it's having those same line breaks. Um, and then that's good and do auto margin to get to the middle. But what I can do is in portrait. I can, um, I could say what Max wets none. Um, so if I published that, you're going to see how this looks. Refresh that we got rid of that weird a line break because now we don't have those Artificial breaks were kind on desktop and tablet. We let that max with Mengele's lines for us. And then we got rid of the max wet on portrait and landscape so that the sentence would kind of form on its own. I hope that once you that okay, now that was a little complicated. I Let's go back to iPhone six and let's keep scrolling down and seeing how the rest of the website looks OK, A couple of issues I see right away in the portfolio section. When is that our H two is too big and the other is that we need to switch to the two column layout in the Mason Regret. Let's take care of both of those things. With H two selected, I'm gonna make sure I'm in landscape, not portrait. And then I'm gonna go to, uh, actually, if I do, that's gonna take me to desktop. If I click on here, you notice that the dust hop icon is right there. So if I click on that, it's going to take me a desktop. So whatever, do I'll just delete this class temporarily so I can access all h twos and we're gonna change the pixel size here they go back to my design and see that. Oh, that's stunned to 24 pixels on mobile. And then let's add that margin bottom 64 back. Okay, Um, another thing that I didn't mention is I think with our sections, uh, we can reduce the padding above and below. So, typically on mobile, we kind of want to reduce the size of this stuff the white space a little bit. Um, so I'm just reducing it. Teoh, let's do 64. This is kind of personal preference. I don't know why I'm doing this so slowly. Okay, here we go. Get the other thing is with our container. Um, I don't want to do that one. Um, where's a good container class? Here we go. Um, with our container on a what I'd like to do on a tablet or sorry on landscape and portrait , I want to make the width 100%. And then I want to add 20 pixels of padding on either side. I guess it's margin. Let's do padding. He wasn't working. There we go. This must typed there. Okay, so now the content is closer. Toe the edge of the view port. Remember I said that the smaller the screen gets, the more you want the content to go, like, almost right up to the edge of the screen. I guess it should be 24. Um, this is an A pixel grid. All right, there we go. All right. So now you see that there's less based up here. Uh, this is quite a bit smaller with margin bottom 64. There's to on this page because we've got two of those section headers. Let's reduce that about 30 to, um and that feels like it's a little bit more appropriate. And then with our Mason regret. We're gonna scroll down instead of three columns here. We can just change that to to All right, so now that portfolio section looks a lot better. I think the about section the changes that we made to it are still looking pretty good. Maybe we could just reduce the size of the signature a little bit. I think it's currently set here. What we can do is, um, remove this setting and add it to our signature class of height, 104 pixels. So there it is right there and then on landscape. Let's just reduce the size of the signature a little bit. Here we go. And let's do 64 since we've been doing that regularly, All right, so that looks a little bit more appropriate to, uh, this size. Um, I think everything here is looking pretty decent. The form still looks great. So does our fighter. And let's publish this and take a look at it on developer tools. Eso Let's flip the view port and let's refresh scroll up to the top already, So that's looking good. Um, we've not got that two column layout, which looks great. Um, that's still looking great. Our cards have that one column layout and everything looks good. All right, let's go back to, um, portrait mode and scroll down. And I love how that to calm. That looks on portrait. Might think it looks really good out warning into a slight issue here with signature. All right, um, so what? The signature selected the cause of the issue. Is this negative 80 pixel. So on our phone, um, I think it's exceeding the with of the browser. And here's what we can do since we know that the flex horizontal. Sorry. I think it waas looks horizontal. Child. Since we know that this is 60 V w What we can do is we can make this negative. Um, 25 v w uh, oops. Did the incorrectly. So, um so if this is it, this is 60 VW. There's 40 on this side. And so that means that if we do negative hann v w There we go. Um, the signature is not gonna exceed the width of the browser. Right? So not Let's looking good there as well. Okay, let's go back to this and keep scrolling down. Um, here, I think. What we can do is we can switch to a having a vertical layout so that the photos are stacked on top of the content is right. That's feeling a little scrunched, and so is the text. All right, so let's go ahead and click on the services card class. And currently it's set to horizontal. Let's change its have vertical, and all of that is looking pretty good. But the image itself is just way too big. So let's change the padding to 75% and 75% is a 43 ratio. That's a pretty common for, um, what am I trying to say? It's pretty common for cards like this. Um, OK, so with the inner, let's reduce 32 to something like 16 maybe. Okay, that looks pretty good. Um, uh, let's go ahead and publish that and look at it. And the developer tools. Okay. Yeah, that looks a lot better. Now. The cards are kind of the first thing we see, and the text has a lot more breathing room. I like that. Okay, uh, the form of public still looks pretty great. And then we're having some issues with the foot or down here. I think that will be it. And then we can wrap up the lesson. Eso with footer. Let's change it to vertical. Let's stack things. Let's align them to the middle and then let's give a limit of spacing. Um, so all right, here. I noticed, um, that this this particular combo classes only one instance on this page. So maybe what we could do is weaken duplicate this class and just call this footer text That way we won't reuse it by accident in the future. And then let's just do, like, eight pixels of margin top to push this paragraph away from the logo. And I think that looks good. Now, let's do one last check. Perfect. There we are. All right. So I think that does it for this lesson. I'm really happy with all the changes that we made. The site is looking good on mobile. Now, in the next lesson, we're gonna work on the navigation menu, and, um well, make that a nice, beautiful custom experience 12. Developing the Mobile Menu: in this lesson, we're gonna be working on the navigation menu website. It's pretty small. It's only one page. So, uh, maybe a navigation menu isn't super important. But really, I won't demonstrate how to do these for you guys, so that as you work on your own projects and especially if you've got multiple pages in your project, you know how to create an easy to use, accessible navigation menu. So let's hop into Web flow, and the first thing we do before we actually work on the navigation menu is I realized when I was preparing this lesson that we didn't hook up thes knave links and let's let's go and talk about that really quickly, and then we'll get back to the menu. So first of all, we've talked about most of these. We did the phone and the email way worked in the contacts section. When we unhooked up the logo to the home page, you talked about linking two pages. We haven't talked about this one, which is a file attachment. So if you choose something uploaded, what floor is going to save that file into your Web flow? Assets on the Whenever a use your clicks on that. They're going to download it, have easy access to it. So this would be super helpful for something like if you have a form on your website that you need somebody to access, that would be a great thing to link to. And then finally is choose a a page section. What that's doing is it's looking for specific anchor tags in your HTML document, and then its speed scrolls a site to that anchor type. So let me show you what I mean. If I scroll down to portfolio, I'm in my element sightings. And here in the I d, I'm gonna add a portfolio, make sure I spell that right. I'm gonna add portfolio. Okay, so with portfolio selected, when I click on choose a Page section, I now see portfolio and that dropped down. And when I click on it, it speeds girls down to that particular HTML element so really handy and a great way to do in page links. Now, one quick thing you should know is that this is not gonna work if if your anchor tag is on another page. So let's say I was trying to link to the A contact form on the about page. If I'm on the home page, I'm not going to see in this drop down any anchor tags. That's on another page. So there's a way we can get around that, though. So let's say in that example, I'm trying to get to the contact form on the about page. What I would do is forward slash about. And let's just imagine that I gave that, um form and idea of contact form. Okay, so that would be how I would link to that particular section. Now you notice that I left out the root domain. If you look up in the top left, Web flow dot com is kind of like the root domain, and then all the stuff that follows is the slug, so forward slash design forward slash web flow for beginners. So when we are adding the URL here, it's better practice to leave out the root domain because, like it's going to continue to work for both the Web flow, sub domain and for your custom domain, it's gonna work for both instead of working for just one. All right, so we got forward. Slash about contact form. Now let's say that we want a link. Teoh the section here. How would we do that? Well, easy. And we're not gonna We're just gonna take out everything that links to about Page, and we're gonna type in portfolio because that's the I d for that particular section. That's not when I go to preview and head portfolio, it'll scroll down just like it did with three Choose a page section. All right now. I mean, we're gonna go and stick to this right here, Click portfolio, and there we go. All right, so let's jump into the night menu now. Um, the first thing I want to talk about is how this knave component is built. If I twirled on hero and then twirl down naff bar, Um, there's a couple of elements that we need to discuss. The first is the menu button. A menu button is the trigger. It's what causes the knife venuto open when you press it, and then the Knapman you is what actually opens its the death block that is being activated to move onto the screen. Let me show you what I mean. If I go to menu button and click open menu here and the Nat Bar settings. Um, and then I click on this thing that slid out. That's the Knapman you see highlighted here, Um, and the navigator. And just by the way, it's the same thing that's holding the knave Links inside of are not bar. Now, you see the reason that I had to get rid of these social links here on the right hand side , I had to get rid of them because these are not going to show up in the, um, never menu because they're not inside. They're not nested inside of this element. So Onley things inside of this never in your element. That's the only thing that's gonna show up when a user clicks on the menu button. Okay, so now let's go ahead and do some styling here. First of all, this icon comes ready made in the night bar component, and what's nice about it is, um, it inherits its color from the font color. So if I click on font color here and just change this to like, uh, whatever color that is, um then you see that the icon change color that doesn't work for anything any SPG or I can you upload to the website only works for these Web blow icons. So I'm gonna get rid of that. And let's go ahead and just delete the icon. Now, um, that's a nice feature of the icon, but that particular icon is just a little small and it feels like it looks like very default. So I'd rather use something like a custom, uh, spg that matches our website a little better. So I like come the look of this one away more than the other one. All right, next, let's go ahead and give this a class of menu button, and I know that when it opens, um, let's go ahead and do drop down. For now, it's got this gray background that I don't like, so we've got a state of open currently on the menu button. Let's go ahead and make sure that it's set to transparent on open. Okay, um, landed that I remember that we actually haven't talked about thes. So drop down would be when the menu slides out from the top and opens up below the menu button and then overwrite would be when it slides out from the right hand side and over left, of course, would be from the left hand side. These settings have to do with the timing of the animation. So I go to preview mode and click this. It kind of has this eased slide out. You can change that animation by changing these settings here. And then the menu icon for this has to do with, um at which break point the menu button shows up. So if I move this down to, um landscape portrait Uh oh, here we go. And go back up Teoh tablet. You'll notice that my nav links showed up. And that's because this is set for only, um, mobile portrait. If I come back up to landscape now, the menu button is showing up on my knave. Links are hidden. So that's how you control where the menu I countries that for Let's open this up in antiquity. Head start styling this. So I'm gonna give this a class of never minyan and, uh, oops disappeared on us. Let's go ahead and make it with 100%. Okay? Now, what I've learned in using this component is that I want to give as few styles as possible to the knave menu itself. Now remember, this is an element inside of the not bark component, and weapon has kind of assigns them, setting some styles to it to make sure that the NAB our keeps working that it doesn't break as we add things to it. But that means that sometimes you style it, and you think, Why isn't that working? And it's because it's the never menu element. So it's better that kind of leave that element alone and create your own like rapper for all the stuff inside of Never menu. So it's had a dead block. Andi, in here. We're gonna call this have menu inner and then that nothing inner is gonna hold three dip blocks. Uh, let me see if I can grab that it is. And copy and paste that twice. And these three boxes represent the header up here, the links and the social legs at the bottom. That's what those three things Air Force. So let's go ahead and move the knave links down to that second def block, all right? And then let's style are Knave Ling's now, um, a simple way to get these two stacked vertically is much in the same way as they are here is tests. Change them from, uh, change them from in line. Block in line block says, uh, weaken style the height and width of these things. But there going to be on the same line if we change them toe block. Uh, now, that's kind of saying, Hey, no other elements are allowed to be on the same line as as this element eso. And then if we change it to Texas Line Center, we've not got it showing up in the middle. All right, Perfect. Next. Um, let's go ahead and get the styling for this. If I click on here, look settings, it's pixel size 18. I think it already has plenty of letter spacing. And finally, or maybe not finally. But we need to add 26 pixels of padding top and bottom. Um, so if I click on here at 26 what that means is that don't do that right. Oh, I didn't Sorry. I meant to add it here. What that means is that there's not 52 pixels of patting between these and we've made the target for these nice and big. Okay, so last as we need to change the color to white and this, remember, has a hover color of that dark color. So I want to go ahead and make sure it's weight as well. Oh, it's already set toe white. Okay, go ahead and open the menu again. Um, second to last, I want to change, um, the Knapman you from that gray color to our dark car and then with never menu inner. I want to set the height to 100 th and, um, I want Teoh set the display to flex vertical ah, lying stretch that everything is nice and full width, but, um, space between so that our links are not in the middle. But we do want to add some padding bottom if I click on these links and hold option is 104 pixels of patty on the bottom. There. At next, let's work on the header. Eso We'll call this, um mobile now header and we're gonna make this flex as well with space. Between the logo and the close button are on opposite sides. Let's go ahead and make it middle, and we'll kind of mimic these settings for the nap bar, and we'll change them in just a second here. And then we're gonna add a link block. That link clock is gonna be appointed to home. And then inside of there, let's at an image she was image. Let's get that white version of our logo. And I think it's 20 pixels taller. So yeah, for an element settings, we can say its 20 pixels. And that's given all text photographers logo. All right, um, next with never any selected. Let's close that and we're gonna steal this menu. But we're gonna copy it over them in your back up and in that header, go ahead and paste it. Then let's get the image and replace it with our close button. And I'm pretty sure that this is, uh, 24 pixels. Yeah, 24. Just do your clothes, icon. Okay. We didn't make a couple of tweaks now, um, so I don't think we talked about this, but the menu button it automatically comes with 18 pixels of padding all around. And what What floods trying to do is say, hey, make sure that you have a nice big target for people to click on or tap with their fingers . And that's especially helpful because search engines I I know Google does this. They actually measure the size of your targets. And like, if you upload your site to Google search Consul, it will say, Hey, you've got a warning on your site. This, um, this link doesn't have a big enough target or its its spaced too close to this other link. Um, so they'll actually ding you for S e O if your targets aren't big enough. So that so even for SCS, something as small as this is important. All right, But since there's 18 pixels of padding here are spacing is kind of off so that this white space is bigger than this white space. So with 48 weaken, just subtract 18 from there and the 32 at the top. We can subtract 18 from there, and now that looks closer to more actual design. All right, now remember, we stole this menu button to be copied, and then we duplicated it here, and that's OK, because it's OK to have duplicates. They're gonna do the same thing. So I click on this one and it opens up the night of menu Click on this one, and it closes it so they do the same thing. All right, so let's go and open it again. Actually, let's keep it close. Let's go, um, up to the desktop and we're going to steal these links that we can add them to the navigation click on menu button Open here and the deadlock. We're gonna pay step now. We don't see anything because the rapper for the links that such a display? None. But I can just go ahead and, um, bring them out. And now we're seeing them. Let's give him a different combo class eso We'll call it a mobile social. And then I think they're sent to the start color here. And then instead of having 32 pixels patting left on Lee, let's go ahead and set it to 32 on right as well. And now they look aligned in the middle and we're almost there, not It actually looks it done, but we're gonna face some issues. Let's go ahead and publish the site. Um, we're publishing to the web blow side domain. I can't remember if we've been that previously or not. Uh, and then click on there. And now it's open to the actual website. Now, this is a hot mess, but don't worry. That's okay. We're gonna fix that just a little bit. I'm gonna click, inspect, and then pixel to exile is fine. This is what we're previewing what this website looks like on a pixel to excel. When I click on the menu, I want you to notice that as I scroll down who are facing this issue where, um, the menu actually glides away. We don't want that. We want that. When somebody opens the never menu, it stays fixed in the view port. So we actually just give ourselves the solution for how we fix that. With Nevin you selected, we need to make the position not absolute, but fixed. And I'm gonna fix it to the top, right? So if I publish, wait for that to you take root there, refresh on click on the night of menu. Now, when I try to scroll, it stays fixed in the view port. But we're still going to face one more. Um, one more problem. And that is if I go into landscape mode and try to scroll you'll notice that, um, wait a minute. I can't see all of the knave. Wings like the social links are not showing up done here. All right, so there's a few more things that big I do to make sure that the Nevin you will always be accessible. Um, so with Knapman, you enter orange is going to change the position to absolute and set it to top. I think previously I had said, Whenever you're working with an absolutely position element, it always has toe, um, find its origin. And another thing it's got. It's got a reference, another element here. It's referencing, naive menu, And that's because Nev. Menu is such a position fixed. So a relative can be a point of reference for an absolute position element. I have so can fixed what we're gonna do. One more thing with Nev menu inner selected. Let's also make it overflow Scroll. So where's over? So here's overflow. I'm gonna make it school Now. What we're telling the browser is that this element is 100 vieux port height. But if the content inside of this element overflows that boundary scroll so that the user can see the rest of the content. So that's published that up into, uh, crime developer tools open up the Nevin. And now, when I scroll, um, I can actually see all of the other content. Um, one more thing I forgot to do is make sure that we've got some padding around the knave links so that the social links aren't but it up right up close to it. Um, so here with the step block, let's give a class of nav links, rapper. And then let's, um let's just add something like 48 pixels of margin top and bottom and publish. And now, uh, when I opened up the navigation menu and scroll, uh, there's just a little bit more spacing here, and that looks nice. All right, so we fixed that issue. Um, the last thing we need to do is go back out to the desktop and fix what is going on here. Uh, so pretty. Simply all we have to do is, um because we've gotten have been you enter here, and that's that's what's holding all of this element on our mobile version. Um, so if I collapsed these three things these three elements are where are inside of the night when you inner with not venue header. I can just simply, What I'm gonna do is actually go down to tablet. First, I make sure that it's gonna display, set, come back and hit hidden. And then with Mr Block, let's give it a class of mobile social rapper going to go down to tablet and make sure that I said it to block on tablets so that it still shows up and then in desktop said it to display none. So now when I go back to tablet and open up the menu, these air still showing up because this one is set to block. If I hadn't done that, it wouldn't be showing up, and this one is already set to flex. All right, so that is it for the navigation menu. Now, we've got a fully responsive website and we even got a navigation menu on mobile so that we could navigate to the different sections on the site on our phones. In the next lesson, we're gonna be working on interaction, so we're gonna add some animation to the site so that it feels a little bit more alive and organic. So join me in the next lesson. 13. Adding Interactions: So we now have a fully developed website, both desktop version and a fully responsive tablet and mobile version. And now we just need to add some animation to this sites that it feels like it's a little bit more and lively. Let's jump into web flow and we're gonna skip the header for now. And we're going to start with the portfolio section. What I'd like is that when I scroll down three cards kind of slide in from the bottom just to kind of make a little bit of, ah, grand entrance, if you will. So I'm gonna click on the card and go up to masonry grid. Um, chose masonry. Great, because I'm sorry. Makes any child. It holds all of the elements in here. So I want all of the elements to slide up together and we're gonna go to the interactions Tower was gonna hit h to get there quickly. And now we have a choice between Do I want to use a page trigger? Do you want to use an element trigger? We're gonna cover page triggers in a little bit. What I want to do is I want trigger the element when it scrolls into view. You see, you have a few more options down here, and then we've got some options, like drop down not far slighter and tab that have to do with what flow components. So any omitting things when you're using these particular things? All right, so we're gonna do scroll interview. So in other words, when these photos scroll interview, I want them to do something. And then, uh, we have two options. When schooled interview and one scrolled out of you, we're not going to do any scrolls out of, you know, animations for these cards were just going to school interview, and again, we have a couple of options. We can other choose to do a custom animation. We're gonna be working on custom animation in just a second. But for these cards, we can use one of the default animations that come baked into web flow, and we're gonna use thes slide animation. We want to slide from the bottom, and we're gonna give it an offset. Offset means that the animation if it was that 0% offset, it would start right here when it enters the view port. And then I want to give it an officer 20% so that the animation begins more like around here when the object is 1/5 of the way up through the view port. All right, so if I preview this, that's kind of what it looks like. Okay, great. Um, now that trigger settings, these are for, um, do you wanna do want this animation to take place on every single break point, or do you want to restrict it to only certain break points? And my experience has been that on mobile animations like this, they tend to be pretty Laghi. In other words, they just They're not very smooth. Um, and because it's such a smaller screen, it's more annoying than it is pleasant. So I like to disable these types of animations on mobile and tablet. I think it's OK to keep it there. Okay, Um, so the last minute to talk about is we trigger the element or the class. Uh, if you trigger the element, What that means is that it's gonna trigger Onley this element, and that's it. If I trigger the class, you can see it's gonna target masonry child. Now it's a little bit deceptive. Here because if I click element, it's still going to affect all of these cards because I'm I've got a, um, CMS collection child selected. So remember anything I do toe one child, it's applied to all of them. And so even though I've got elements elected, all of the Carter greening, animate and, um and that's OK, that's what we want. Okay, so now that when I scroll and you can see these kind of sliding from the bottom in a nice way, I Let's leave that there. The next thing I want to do iss with this section, Um, I kind of want Teoh bring some priority like the image, your eyes immediately drawn to it. But I want people to read this text, and we can use animation to draw people's eyes to something. So the foot squares until child I'm gonna add in their school interview information It wouldn't be another slide. The sort of 20% offset again and not from the left. But I want to animate from their right and go left. And then since we, uh, remember on tablet this now stocks vertically, so we need to make sure that we disable this animation for tablet and below because it doesn't really make sense for it to slide on the tablet version and then went signature. Omnigo had had this scroll interview as well, and let's give it 20% and I want it to apps. I didn't mean to press that were in the, um we're in the custom animation section at the moment. I wanted to slide, uh, from the right, and, uh, we can leave it trigger on all classes, I think. Um, okay, so, no, when I scroll into the about section, this is gonna slide in from the right and so Well, uh, the signature with these services images, I think we could do something pretty interesting with how this works. So what I'd like to do is when you scroll into view Ah, the photos kind of like scaled down. Um, we've used the slide a lot, so maybe we can just change it up. A little bit of these kind of photos gonna slide in there. So what we're gonna do is, um let's click Click Services Card. And this is gonna be our first custom animation, so But we're still gonna dis girl interview and instead of clicking one of these ready made ones, we're gonna do starting animation. We do want the offset to be 20%. And then let's go ahead and add a new one. We're going to call this service card scroll interview. My experience has been that if you have a big enough website like 10 20 pages, you'll have a lot of these types of interactions. And so it's really important to give them a nice name so that you can find it again later, um, and tweak it or get rid of it as the case may be. And then any time actions, where is asking us is okay, What do you want to animate when services card animates interview our schools into view? We want to animate this photo, and I'm gonna quit the plus sign on, we've got a number of options of what we can enemy. So just by reading this list, you can see Okay, so those are the things that I could change or I could intimate, um, through a wonderful interactions. I mean, want to use scale for this particular think now its added it to a timeline. So these numbers represent in milliseconds. What is happening? The first we want to do is set an initial stake. That means that when the website loads this services image is going to be at this, um, initial state and we want to set the scale to about 1.1. Here we go. Okay. I mean, let's try 1.2. Is that too big? OK, one pointing. And then we wanted to scale down, so I mean that Sorry did that too fast. Um, I'm gonna click on the plus sign here in the next part of the timeline, and I still have my services image selected You. Kentucky is the bounding boxes over the services image. And I wanted to scale down to its original um ratio, which is 11 Okay. And then I can control the duration I can control if it has a delay, and I can control its easing eso. I want the duration to be Let's say one second. And so when I preview it, it's gonna slide in like that. Can't take one second, by the way, it's exceeding the boundary of the services card. That's okay. We can go ahead and fix that real quick. So with, um, services card selected OmniGo to my style panel and I'm gonna go to overflow now. We previously used Overflow Scroll for when we're working on the navigation menu and here I'm gonna use overflow Hidden. And what that means is that when content exceeds the boundaries of services card, it's just not going to have a peer. It's gonna be hidden so that when I go back to my animation and ah, click the original scale, you'll see that it's, ah exceeding the boundary of the services car. But it's actually not showing up. And when I preview it, it's kind of like scaling in. Okay, um, so now I want to affect the easing Currently, that using such a linear and that means that it goes from, ah, scale of 120% to 100% and that animation happens without any kind of ramping or acceleration. And it's not always want because in the real world, in the natural world, everything has kind of like a naxal oration to its movement. So think about a car like let's say you're at a traffic light and the light turns green when you start taking off, Scott, like you accelerate slowly, the wheels start turning. Everything starts grinding. You said gripping the pavement and your acceleration is slow at first, but it speeds up as you go on. And then when you get close to your final, like cruising speed, your acceleration trust to slow down. Uh, that's kind of like ramping up on ramping down. That's essentially what easing is. So we can change this to something as simple as ease and that when I preview it, it just feels a little bit more natural. It doesn't have that robotic mechanical feel. Okay, Um, next we want to do is, um I noticed that when I had scale collect. Um, no, that's perfect. Okay, so the next thing I want to do is click out of here and we want to apply the class we want . Apply this animation to the whole class because right now it's only affecting this service card If I go ahead and click class Now, when I scroll in from the top, um, all of the cars are going to have that zoom in effect, and we do need toe at an offset. Oh, already did. Um remember, what we can do is just make the animation a little bit longer because those hard to notice . So it's try 1.5, and, um, let's try that again. So just by the way, animation takes a lot of experimentation just to get all the timing right, The timing is really the most crucial piece of the animation. Yeah, I'm happy with that. I think I'm having some, like, lagging just because I'm recording this video at the same time. So I'm just having a little bit of liking issues with the animation. Okay, so now we've got an animation for our service cards, and that's great. And then for here, we're just gonna use another slide. And just like we did with the ex, since this is the same layout as, um, I'm trying to say about section can I want to use the same information, Okay. And then I could do the same thing. We're just gonna have it on desktop on Lee. All right, So now Scarl and boom. There we go. Okay, So that's it for the sections done below. The last thing we're gonna do is work on the header that I want when the page lows for the headline to kind of come down from the top and the nice, low gracious transition and the caption to come up from the bottom. Okay, so this is gonna be our first page triggers, like click on page Trigger. There's a few here that you can experiment with. The one we're gonna work on his page load start a new animation and let's go ahead and call it home Page um header load. All right, so just like we did before, we've got a custom animation titled Ready to Go. And now we need to select elements and actually add some transforms to them We're gonna use move and capacity for the title. We want the opacity to be at 0% of the beginning And let's do something like negative 100 pixels and clicking both again. We want this to be the initial state we want this to be, Ah, what it looks like when the site loads And then when the animation begins, it's gonna go down to zero, and it's gonna go to opacity 100. I want this to be a pretty slow animation, because when the website lows I just want to be nice and really gracious. Eso wouldn't do 1.5 duration and something lank out. Cirque, um Now, East out means that it's a acceleration happens really quick at first and then the closer against to its final destination, it slows down. So if I previewed this, you can see it's got this nice, beautiful slowdown effect as it comes down. And they were gonna do the same thing with the caption where we're gonna move it. Um, that's traumatic. 70 or so, just to get it below the header there and opacity of 0% and we're gonna move it back, Teoh zero Um, when it loads now, I want to give it, um I don't want it to happen at the same exact time as the heading, but I don't also want it like if I move it down by ah, click and drag to move it down. I don't want it toe happen after the heading comes in because the heading takes a long time toe fade in. I kind of wanted to happen just a little bit after the heading itself starts to come in. So I could do that if I click and drag and pop it back in there. It's gonna be in the same time area. But I can give it a little delay of life 0.5 seconds. And now you see that it happens at 0.5 instead of 1.5. All right, And then I want the opacity to go upto 100%. Let's do the same thing. A duration of 1.5 with an easing of out circle. Okay. You know, when I preview this header comes in, so does the caption. Okay, I think we're done with our animations. Let's go ahead and publish this to the line website or the staging. You are all I should say. And now, when I, um refresh tell comes in, the caption comes in, scroll down our photos slide in. This has some nice slides affecting our, um, photos. Kind of like zoomed in on slide and then this living as well. We've got some nice animations to this. I just making it feel a little bit more interactive. I just a reminder that I think is on recording at the same time. Some of it's a little Laghi, but but it's It's looking good, and I'm happy with it. Okay, Um, that does it for this lesson. And the next lesson Now that we have have our website totally complete, it's responsive. It's fully developed. We've got animations. Now that it's ready, we need to launch this to our live domain. So we're going to cover some best practices for how to launch a website. And then the final lesson will just have some final thoughts. And I'll have some encouragements about your class project. Right? So meet me in the next lesson. 14. Lesson 13: Prepping To Go Live: all right, so we built our website and it's ready to go live now Before you actually do publish it, it's important to make sure that there are any errors and you've kind of done your due diligence to make sure it's ready to go. Now I'm hoping to fig Ma and I created this little checklist for you guys. You're welcome to always come back to this figment file and use it to help you do your cue a welcome toe. Export it and print it out and use as actual checklist. Whatever you think is helpful Now, I don't want to go through every single item in here because there's a lot. But I do want to point out a few things. If I hop over into the workflow page settings under general, I just want to point out the favorite con. This is kind of like a little pet peeve of mine. I really like it when websites do something really fun and custom with these favorite cons . Eso I encourage you to do that and that this is what it shows up as eso. If you upload this, it's gonna show up here in the browser tab. And then these larger ones are for like if you save the Web site to your bookmarks and your phone, that's what's gonna show up over and hosting. I don't want to talk about custom domains just because we didn't have showing or I would end up showing private information. But you can click on this link to learn more. The one thing I want to encourage you is DNS is extremely sensitive, so that's when you go to, like, Go Daddy or another domain provider, and you change the settings inside of that domain. Um, if you don't know what you're doing, you can actually interrupt email for your client or some other kind of network service. So if you're not sure what you're doing, don't pretend to know more than you do now. I said that out of personal experience, Um, I made a change ones, and I didn't want to bug the clients, and I wanted to seem like I knew what I was doing, and that ended up interrupting email for a full work day. And if you are in the corporate world and sales or anything, you know how important that is. So I was a huge mistake. And, um, in the future, I've always made sure to say, Hey, um, I'm not familiar with your particular settings. Um, who can I Who can I ask for help on your team or something like that? Um, So, uh, so sometimes it's super easy. Um, like you just good one flow. Recognizes. Oh, this is a go daddy domain. Can I take care of the settings for you? Yes. Awesome. Please. And then sometimes it gets really complicated. So just if you feel like you're out of your depth, don't fake it till you make it. This is not an area where that works, okay? And then I do want to talk about 301 redirects as well. Now with 31 redirects. What that does is it maps an old girl pathway to a new one. So let's say that year, working on a web design that is a redesign of an existing site. And for whatever reason, um, on the old site, they hadn't about us page, and it's been changed to our team on the new site. Now, on the old side, it's probably, um, forward slash about that. What I would go to the about page, but on the new site, it's probably forward. Slash are hyphen team. What you could do with 31 redirect is say all right now for slash about is mapped to forward slash are hyphen team. So if somebody accidentally navigates to forward such about, they'll be taken to the new page. Not only that, but search engines will take kind of like the S e o value the assigned to the old page and assign most of it to the new page. So you're not losing any of that search ranking that you your client previously built up on that page. So three, when redirects are really important. Okay, um, next I want to talk about a CEO. So if I go to the CEO Tab, um, we've already talked about indexing, but we haven't talked about site map. Now a site map is too sick. It sounds. It's basically a catalog of all of the pages on your site. So So here's how Seo works is when a search engine gets to your home page the first page in your index, they actually go toe all of the links that you've listed in your sight. And they That's what's called crawling because they're going toe every link and trying to figure all of the pages associated with your website. But we can help them. So instead of having to, like, go to each link that we've listed on our website, we could just give them a catalogue and say, Hey, you don't have to crawl like you know, the check every link. Here are all the pages in my website. So it speeds up the process of a search engine indexing your website in totality. So that's super important. Not only that, but I would encourage you to go to search Consul eso. I think I provided the link here. But if you go to the this link right here, you can add the site to Google Search Consul, you can add the site map there, and you can request that they index the site immediately. So that way you're not waiting around for Google to index the site for you, you can go ahead and request it. All right. And then the last thing Ah, in terms of, uh well, baby, that's not CEO. But I want to go and just highlight integrations. I want to highlight the Google analytics, not Google Search Consul does provide you some analytics in terms of like, um, what keywords. People are typing into search engines to find your website, but analytics has more to do with what they actually do when they get to your site. So Google search console is about how they find you. Google analytics is what they do when they're there. They kind of overlap in some ways, but that's kind of the main just of it. Um, so you can see how many people bounce back from their site once they get there. Which pages they visit. Ongoing In what order? Ah, and you can even set up goals and you can say, All right, I want to track how many people click the contact me button or go to this page, whatever it is. So I encourage you to set up Google analytics, all right? And then we've already talked about the language code for in the custom code section, but I do want to go ahead and talk about the page settings really quickly. We're actually gonna hop back into the designer. I'm gonna let the page load, and this has to do with S CEO again. So if I go click on the page, likely we only have one we have to do. But I clicked on the page settings. There's two really important fields here. Um, so what is the title tag? And what is the meta description and the title tag? That's what shows up like this is showing you the search results preview. That's what shows up as the largest, most prominent piece of text in a search result. So it's important for two things. One is. You want to use this to grab the user's attention. If when they're scrolling through and looking at the search results, you want to make sure that this is a really inviting, an informative but short and brief, um, piece of copy that's gonna get them to click on it and go to your site. It's also important for S CEO because important keywords that you want to get fun for online like let's say you, uh, probably landscape photographer, um is an important key word for this particular page. That's what we're gonna enter in, Um, so let's go ahead and go something like Ansel Adams, Ansel Adams. I never know how to say that. Ansel Adams, Um, a Monterey based landscape photographer. All right, now what I've done here is I'm I have the names of that. If somebody's searching for that person specifically, this title tie will help those folks to find this website, and then I have some keywords. Monterey Monterey would be a big keyword because people might be searching for, ah, photographer in Monterey. So that's important. And then I had a little bit of like a drill down landscape photographer. So maybe there are folks are specifically searching for that niche photography field. Uh, so I thought about what would be, ah, good title tag for this website when you go ahead and save it. And then, um, I'm gonna copy this. And if I was doing this for a real project and probably would think a little bit more carefully about this, Um, but I'm just gonna take this in here, and so is a eso. Eso is a professional landscape photographer inspired by America's beautiful wild spaces and devoted to the preservation. So there's a little bit of debate about this meta description and some places I read that it's important for S U and in some places, I don't. I tend to fall into the camp of I don't think that it's, um, helps with Seo, but you never know. So you want to make sure that there are some important keywords in your meta description. But mostly what you should be thinking of is the user. What is going to be something that encourages them to click on that link? It's gonna be short, brief, but evocative and encouraging them toe actually convert to a website visitor. OK, so now we've got some of our basic S E O sightings. If I scroll down now, we're gonna go to the open graph settings Open graph has to do with when somebody shares your content of your page on a social media china. And here it's listed Facebook twitter. But a bomb. Um, this is what's gonna show up. So I'm just gonna use the same title and same description as our meta description. But we need to go ahead and add an open graph. You are Oh, and if you look down here, it says, make sure images, or at least, and they have this particular image ratio. I'm gonna save that. And let's go ahead and upload an image set to those specifications in my development assets . I saved an open graph image, so I opened that. All right, so now it's on my Web flow assets. And if I click this little settings and then click on this expand in a different tab, this is the actual you, Earl for the image. So I could just copy that, come back to the page settings and paste that in my open graph image. URL. All right, so now my, uh, this is my open graph card. That's what's gonna show up when somebody shares the website. I'm gonna save that. And now that's ready to go. Let's hop back into fig MMA and talk about a few last things, and then we'll close the course first is you want to name any forms with an easy to understand title. Now, this website only has one form, but on a lot of the websites that I've worked on usually have more than one like you have a form for people to sign up for a newsletter and you have a form for people to contact and then you might have a form for a different purpose. Eso it's hopeful to go ahead and name these forms with a clear and easy to understand title . So currently it's called email form. Well, uh, that isn't, um that doesn't really tell me what it is. I'd rather call it, um, contact form people who want to make contact. So that's important. Because when your client, when they get an email from Web flow saying that you've had a submission on the website, it will have the name of the form this field in that email so that they know which form it ISS. So it's really important to name those, um What's That's my email. Okay, um, scroll back. The next thing you want to do is check for spelling errors, and I'm extremely prone errors, As you probably know, from watching this video, that's important for me. Check all links. It sounds like that would be a, um like duh. Of course I would do that, but probably on every project I have published. I happen to miss one link that the client will end up having to email me about. So just do a very thorough check of all of your lengths. Next, check your website on multiple devices. Now we've talked about, um if I right click and had inspect. We've talked about chrome, um, developer tools on using the device toolbar s so you can go in here and you can click on any device is, by the way, you can even edit this list, and you can add all of these devices that you might want. So make sure you go through all of these federations and make sure that the site looks good . Um, no matter what the device, then use actual devices like if you've got a phone. If you've got an iPad, make sure you check your website on all of those because you would be surprised that sometimes things show up differently in chrome developer tools that does on an actual thing . And obviously this is a little bit bigger than the actual phone. Like you may realize. Ah, this caption on the phone is just too small. I need to increase that right here. It looks okay, but it is a little bit blown up, so maybe on my phone it doesn't look quite as good, right? back into this on. The next thing you want to do is check your site on multiple browsers. Now, sometimes there are what's called, um, cross browser issues. And so you may be looking at your website like we have done in Google Chrome constantly. You've never treat on a different browser. And then after you publish the site, your client emails you and says, Hey, I was on Montilla Firefox or, um, I was on safari and I noticed this issue, and you check it on Google Chrome and you can't find out. Well, I'm not seeing that issue. It's probably because there's just this little difference in browsers that's causing that. You need to address it in the development. Um, so check on multiple browsers, and then finally check your websites performance. Now, I just talked about how we shouldn't rely so heavily on Google Chrome, but, um, chrome has this incredible tool called Lighthouse right click this era and go to audits. Um, actually, I mean back up. How do you get to their specifically? So I right click on website hit, inspect chrome developer tools, shows up and then I click this arrow toe open up the rest of the tabs, and I'm gonna hit audits that brings up it's called Google Lighthouse. Uh, we can choose a couple of things. First, we're going to check out the desktop version, and we're gonna check out performance, best practices, accessibility and S e O. And then I'm gonna run that audit. Now it's gonna take a little bit for this to go through the whole website. But what it's doing is it's checking on how it loads how it's built. Um, if it's accessible like it if it works for people who maybe are color blind hate like me, I'm colorblind. Ah, or who have impaired vision or, you know, whatever the case may be, and then it spits out these codes for you. Okay, so we've tested performance, accessibility, best practices and S e O. And what's great is that we can scroll through and will give us some data for each one that performs. You've got score of 98 which is pretty awesome. It's like, uh, there's not much I can do to get better than that. Um, okay, in terms of accessibility, it's telling me that there is one item that's lowering our score from 100 I can click on this drop down and it's actually gonna tell me which element uhm is the issue. So it's telling me, Hey, you have an element that doesn't have sufficient contrast ratio and that that element is the overline Large. So I think that's come up here, This one right here. It's telling me this doesn't have enough contrast with background so I could go into the website and just darken up that color a little bit to make sure it meets satisfactory ratio with best practices, 93 is pretty great. There's a couple of things that we just don't can't control. Uh, they're like, what flows domain? But it looks like But then everything in, uh, in our realm to get that 100 and then it s here. It looks like we've got some major issues here. One of them is Document does not have a meta description. That's because we didn't publish the site. There you go. Has it never publishing? Um, let's go back to this and then pages blocked from indexing. If you remember, we came back out to project settings and under CEO, we said disabled indexing cause we don't want it to be indexed on the web flow side domain . So if I fix both of those issues, I would likely get a 100 score. All right? And then last. Oh, that's it. Okay, So the other cool thing is, let's go ahead and refresh. I can also test it specifically for mobile. If I could to inspect, go back down to audits, and then I'm gonna switch to Mobile and run that audit. Hey, actually, see, it pulls up the phone. That's pretty neat. Um, so, uh, it's gonna go through. It's actually gonna test based off of a phone. Um, if the elements are responsive, If, uh, some of the targets are two smaller too big, it's going to spit out the score. I got 100 and performance this time. That's awesome. We've having that same issue with accessibility, and then s CEO, You see that are, um, score dropped from 80 to 90 after we added our meta description. Our sorry meta title. Okay, it's Ah. Now we know how lighthouse works, and you guys can use that, uh, just to check your website and make sure that it's looking good. All right, let's the end of the lesson. I encourage you to go through this website launch list. Check list the next time that you launch a website for a client for yourself to make sure that it looks good and Ah, the next lesson, I'm gonna be saying my closing remarks and encourage you with your class project. 15. Final Thoughts: If you're watching this lesson, that means that you finished. They won't flow for beginners. Course. Congratulations. I'm so proud of you. I know that it's a lot toe watch all of this content. Listen to be droning on forever and try to unload this stuff into your brain. So you did an incredible job trying to learn something new, so you should be proud of yourself. Now, if you haven't started your class project or if you're halfway through that, you need to finish encourage you go ahead and finish it, post your project to the class project section, And that way I could take a look at it. And you can even post any questions that you have and I'll try to address this. Plus, you get the show off to the rest of your cohort so they can see what you've done to now. I hope that as you continue to learn what flow continue to practice that you'll have fun making stuff for other people for other clients, maybe for yourself and that this is gonna be an awesome tool for your business Now, hopefully I'll see you guys in the next lesson. Thanks and goodbye