Webflow Essentials: Beginner's Guide to Building Beautiful Websites

1. Introduction to Webflow Training Course: Hi there, My name is Dan Scott and together we're going to learn how to build responsive, beautiful, accessible websites in Webflow. Now this course is aimed at people who are new to the workflow software. And for those of you who are new to web design in general, you'll start by creating a simple one-page website. And in the fundamentals of layout and animation are using Webflow is no code software, everything is designed to visually, you'll learn how to make your website look consistent on desktop, tablet, and mobile. You get started learning CSS classes for layout and font styling, as well as the importance of class naming conventions. If you're someone who has used workflow just a little bit, okay? And you'll finding things like grid and flicks and columns and devs. All a little bit tricky to know which one to use. I don't worry, I promise by the end of this course, you, my friend, will know when to use which NY. You'll then tackle our larger project where you build your own portfolio website. Here you'll also start making more complex animations, timed animations, parallax animations, fancy. You'll learn how to create and style forms. Some of you might have some skills in Figma or Adobe XD, and I'll show you how to convert those designs into a workflow website. But knowing Figma what XD isn't essential for the course, you'll learn sticky navs is E0 symbols, brands floats, red to green gradients, Comic Sans. But it's wrong with Comic Sans impact. So once we've got the fundamentals of web flow under our belts, we'll then look at creating a dynamic CMS website. We're going to create a blog. Okay, you'll learn how to create a new style and then how to hand over the responsibilities of that site to your customer, your client, your staff member, your house plant. They can login and start making their own changes to the website and creating their own blog posts without any of your help. Then at the end of the course, you'll use your med new skills to create an e-commerce store, creating and styling shopping carts, order forms, payment gateways. You'll learn about selling physical and digital products as well as selling services. If you're sitting there thinking global class flicks, grids, float, That all sounds way too hot. Door. Remember, we're going to start right at the beginning and work our way through step-by-step. This course is aimed at anybody who wants to build websites and workflow. You might have just one website or store that you need to build for yourself or for a client. Or maybe you want to become a full-time web design, or maybe you are a freelancer already and you need to expand what you offer as a freelancer. I sit assignments throughout this course so that you can practice what you've learned and build things really for your portfolio. Alright, it is timed to upgrade yourself. Go from websites zero to Webflow hero. 2. Getting Started with Webflow Tutorial: Alright, getting started. First thing is there are some exercise files. There'll be a link on this page here. Download those. There'll be the files that we use for this course. Alright, the software workflow is actually browser-based. So you go to, you can use this link here if you'd like to go and sign up. It's an affiliate link. So Webflow give me find his fee for that or just go straight to workflow, sign up for an account there. It's free to sign up. It's Mac or PC because it's browser-based. I'm using Google Chrome. Check the browser specs from Webflow, whether they support your browser, if you're using Safari or Edge or something else, but I'm using Chrome in this course. So paid versus free workflow has both a free and paid one. For this particular course, we are going to start the course using the free version as far as we can. And there's a point where we need the extra features and we'll sign up for the paid one. So if you are, you can do two options. You can do all the free stuff and then just watch the paid stuff and decide if it's view. Or what might be useful is you can sign up for a monthly account with them when we get to that paid stuff. And then you can decide after their first month, whether it's right for you or not gay and maybe switched an annual after then. But yeah, you be able to do a chunk of this course, let's say 20 to 30% of it using the free version. And I'll let you know when we do crossover the paid version line. Now workflow is updating really fast. So if there are any updates to the UI that aren't obvious, and check out the comments below the video just to see if there's anything or if it's really bad or a big change, I'll go and re-record it, but let me know if there is any changes and so that you can help other people or if there's something that doesn't know, gripe, just chicken to the video To see. There's been a little update. The other thing is, I speak really fast. I don't I'm not sure if I'm speaking fast right now. I feel like I'm a little bit more chilled out. I'm at the beginning of the course a bit nervous because we've just met, but I speak fast. You'll notice there's a cog and the bottom that side of all the videos. You've ever changed the speed and slow me down to inebriated Dan, it can be easier if maybe English isn't your first language or I just talk fast. Some people speed me up. Both. A weird sounding nice, but you get used to it. And the last thing was, oh, yeah, I, there's a bit of explaining workflow, what it does for the next few videos. If you want to skip that, skip along to the video named weight. They're going to check, found it. It's called how to build your first website and Webflow. So you'll see that a little bit further on in the course if you just want to jump to that part where you're like actually just start making stuffing cook with all the turkey and you can jump to there. Otherwise, we're gonna go through the next few videos just or answering all the questions that I had before I got started with Webflow. I think it's important to frame it up what it does, what it does. Frequently asked questions. Diego. Alright, next video. 3. What is Webflow: So what is the workflow? Workflow is a way to make websites and where it sits in the market of website making is, is considered a no code website builder. So it means like on one side over here you've got fully coding, your website, HTML, CSS, PHP, whatever you using. On the other side here is more the Wix and Squarespace where it's very drag-and-drop. And they handle all the backend. So Webflow kind of sits in this happy medium for me of it's, it, it writes beautiful code and gives you access to the code if you want it, you don't have to. But and for me as a web designer who understands a lot of the code, I find it really useful because it gives me full control like the coding side of it. If you code your own so you can do whatever you want. But it takes longer and it's a different way of building, right? You're a coder. I'm more of a designer. What I like is Webflow because it allows me to build really quite complex sites, custom, like exactly how I want. Or I can start from templates kind of more how this Wix Squarespace world works, okay? Workflows in the middle, they hide the code from you. It's accessible if you need it or wanted if you want to push it further. And has a lot of depth. Coding. Your own website has infinite depth. You can do whatever you want. Okay? Wind flows in this middle ground of you can do pretty much what you want, anything that's normal to do. You can do it in workflow and it's expanding where and then over here on this other set are more drag-and-drop for people who want to build one website for their team or club or business, and never want to touch it again. Because you can pick a nice template and you're off. Whereas here you can pick a nice template and you're off. But also if you want to do this other weird thing and this thing here as well. And you wanted to look this way. This is where it flows sets and it kind of hides the code from you. Write good code. Just for those people who freak out with like having the right syntax and stuff like that. So that's one thing about what workflow is. That's what Webflow is, who is it for and who normally uses it. It's normally designers and marketers who want to be able to produce a site without the help of a developer. They might feel like they can only get so far on their own and then they kind of, it becomes quite tricky then to kinda get another person involved and pay them. So design is often will use it to build multiple websites for their clients. They might be doing other design work for them. Wants to build websites, don't know how to code. We've lowers that perfect solution. No code, quite complex websites and it gives the client access to update it as well. So it's this, It's a lovely flow for a designer to make websites and it's becoming very popular with marketers where they've got an idea or a microsite or something that they want done maybe quickly. Okay? And don't want to have to make it a really big project with other external Dwell. There's nothing wrong with working with a developer. I work with the developer all the time to do custom stuff. But with logos me the ability to get quite far on my own without any help. And you can take workflow a little bit further and it's not, can't use a developer. What you can do is you can take Webflow and you'll probably get 99% of what you need done. But for that weird edge case, you can get a developer to help out. And there are becoming more and more developers that specifically help designers and marketers push that with a little bit further so you can kinda gentleman there as well. And also business owners are using Webflow because it means they can take full control. They're not outsourcing it and feel this disconnect between their idea, especially at the beginning and what they want to deliver. Because we've heard allows you to e-commerce and database driven CMS style websites which are traditionally need help from other people. Whereas workflow kind of brings it all in and allows you to do it all on your own. Let's talk about where it fits in the web design process. So Webflow is not used to design a website. You should have done that previously. You do it in something like Figma or XD or Photoshop or Microsoft Paint. Why would you design it in those first and get maybe client sign-off or your own sign off. And then build it in Webflow afterwards. And not just build it straightaway is because it's very quick and easy to design something and something like these other tools like Figma, XD, Photoshop. We got courses on all that illustrate it doesn't matter. Any tool you want to use to design it. It's very easy to move things around and workflow, it's a lot more structured. You gotta kinda build stuff, Bob, from the ground-up. And it's very hard to, not very hard to change things, but moving something around with your mouse versus changing where it is on a website is a lot different. And the best analogy is, you want a house, okay? You could design ten of them, and you could build tin houses and decide which one you like the best. Or you could draw a tin houses and decide which one you like nist and then build one to get the idea. It's not as elaborate as that you can totally design and Webflow is just not a great way of doing it. Designed something first, Git client approval, sign off, you can get it tested. And these other programs, I'm not sure why they're over here. This slide is all these guys, the design software and then you build it and workflow. Once you love your design, you can make some changes along the way. It's not set in stone, but I hope you get the idea. Design, building workflow. And then workflow is the last port of call. You can then say, here's a website, I'm finished. So that's what Webflow is, who it's for, where it fits in the whole web design flow. If you are like, Oh, I've got more questions. Oh me, me, me. Good. Because I've got another video. I'll go through all the frequently asked questions that most people asked me and I had about it when I first got started, I was seeing that video. I'm gonna get a cup of tea and I'll be back. I'll see you in a minute. 4. Webflow FAQs - How Much is Webflow Part 1: Hi everyone. Welcome to the Frequently Asked Questions video. What was that thing at the beginning, it is like a way so that you can jump along in this long video for all the different Frequently Asked Questions. For lots of you, you just watched the whole thing. For some of you. You can look through it. Go I know. Let move on to the next video. For some of you again, you just want to check out a few things. So I lift that right at the beginning. So it's easy to scrub back and see where it is and then move along in the timeline. Does that make sure it makes sense? Well, while we're doing this is because there was just a bunch of questions before I go into Webflow that I had that I eventually figured it all out. And I was like, that's the kind of stuff. I wish there was just one place for all of that stuff. So that's what this video is for you. Hopefully this will answer all your questions and answers all in one place. Just get going down. Alright, most frequently asked question about Webflow is price. I'm going to talk about US dollar and monthly payments here just for consistency. And let's go with a free one first is that the pros and cons, the pros is you get to work for free and you can build a site and launch it. You can only have two of them. And the big drawback for that is that those were, the first drawback is that those two different websites you make can only have two different pages. That's a fine for a landing page or a brochure, websites or Homepage Contact Us page, homepage becoming quite extensive. And the thing we're building this course here is you can make them quite long to have. Still show a lot of content for those two pages. 2 websites, two pages only. The limitation becomes when you want to stop paying is when you want a custom domain, because those first two websites can go out, but they're on, on the free account, but they're on Dan's amazing website, dot Webflow, dot io. So that's the URL you'd have to give out. So it's not very professional. So if you want Dan's amazing website.com, okay. You need to then upgrade to the $15 a month. Okay. And that's your web hosting. And it's like if you're taking forever, web hosting costs, it can cost as low as $5. But with Webflow, you get the puck, all the perks of workflow. So you have to upgrade from there for the website, but only when it's ready to go out, get that custom domain. And yes, the next kind of price jump would be in, in this course is going to be when we need a CMS. Cms if you've never used one, it's like really good for things like blog posts. Let's say we don't want to be designing every page and Webflow. We want to give it to the client and get them to be able to go onto the website and put a blog title in at some images and their own texts hit Upload to website. And they have nothing to do with Webflow gates uploaded to a CMS or a database and displayed on the website. So it allows people not to be coding and designing every page just gives them a little bit of an area to be able to upload stuff kinda like WordPress. So you move to like, I guess $20 a month to get to that CMS, there is a bandwidth traffic. So most small sites are going to not exceed this bandwidth at all. But if you've got are super high trafficked website, they might ask you to upgrade to the next level because it's getting so much traffic, but it's really popular and you're making loads of money so you will be able to do it. Other pricing brackets, There's lots of different scales and he, I'm just kinda picking the key ones that I find most useful is when they move from CMS to e-commerce. So let me look. E-commerce. E-commerce is a different one because they they need to do a bunch of different stuff. So to get a lightweight e-commerce site, so say you're making headphones and you want to sell them on your side, you're going to have to move to the $29 a month plan because that's what we're flow stays. And it unlocks all of their e-commerce stuff. You can go right up to her like What was that? Yeah, that's a month. You can go right up to the most expensive one I can see here is $212 a month for e-commerce. And it's it comes down to Lake. They break it down with like how many items you have in your shop. And did they tell you a transaction fee? Do they not? All sorts of other stuff. So have a little look at a webflow.com slash pricing. Those are the main bits. Again, these change, the rules change. But those are the kind of 015, 2029 are the main food groups for you might be using for Webflow. And if you're thinking, I'm not paying them, if you've ever done web design before, you know, you need some sort of hosting and you need domain registration and somebody's going to have to do the e-commerce for you. You're going to pay somewhere. This is what workflow does. It's above what you can get if you are really kinda on a tight budget. But the perks for doing it are pretty good. They handle all the patching. You have to worry about servers and yeah, that's that's it. That's pricing. 5. Webflow FAQs - How Much is Webflow Part 2: Let's talk WordPress versus Webflow. What are the differences? Which one should you use? So let's talk about what they both are. Wordpress is essentially started as a blogging software that you can manipulate to do basically anything. So much of the world is powered by WordPress. It has an exhaustive amount of depth, so much depth. If all these weird edge cases, you can probably find a WordPress plugin that will sort it out. Whereas when flow is more the core of what you need to do for web design. But none of those like tiny little edge cases, or at least it's not a click and plug-in and play. You can make WordPress to quite a lot of it. And so if you are a person who just wants a quick blog this afternoon, hey, blogging website up. Just install WordPress, pick a plug in or pick a template that you kinda like install and start plugging away. And if you want, if you've got a design that you've made and you want to build that. Do it in WordPress. Because getting that customization into web, Wordpress, taking their time design, you want it to be perfect. Or at least you've got a really strong idea of what you want it to look like. And making WordPress to it is real tricky. Like I'm OK encoding and it's still quite tricky to get WordPress to do what I want. And you have to get into the code and stuff. And saying that though I don't want to, WordPress is amazing because of all those plug-ins that you need to do something. If you need a plugin that will accept payments but only from their weird payment gateway that only your country users. And it's only for left-handed people, you probably going to find a plug-in for it. Whereas WordPress will take generic payments from most of the world. Yeah, that's kind of loads of depth, quite tricky to customize, but really easy to get started. Wordpress, pretty easy to get started. You'll see in this course. But allows you to control everything. And you're a bit WordPress, good workflow, very good. And both have their pros and cons, but those are, that's the overview of those two. Which one you start with? You go, Can your client update your Webflow website without your help? They can. There's two sides to Webflow. There's the designer side, you, the maker, the creator of the website. And then there's something called the editor. And the editor is for customers or clients and they can go in and update the website as they need. They don't need any interaction with Webflow, okay. They can do it within the website. I'm going to give you the teeniest tiny is demo. Just to show you what I mean, Here we go. There's two sides to Webflow. There is the designer, which is me going in here and going, You know what I need to do? I need to increase this padding to move it across and design at all. Get it looking good. I publish the website and then the client or my customer uses something called the editor. The editor allows them as the customer to not come back to you, but go into the website and click on editing and say actually I want to change this. This needs to be 2036, okay? And when I've made a change, what they can do is they can say publish it, and they published the website. And the cool thing about it is that it'll update the live website so that text change or update. But also it will change over here in my design view. There we go. So it means client changes appear for me as well. When I'm designing, I can see what they've changed. Now they can change text images, links, anything. They can also add blog posts if you've set up a blog or add products, if you've set up an e-commerce site, it's quite a nice little setup here. You can use Webflow Justin design of you and just for yourself, okay, if you building your own portfolio and never touched the editor. But if you want to hand over to a client, they have got ways of updating the website without coming back to you every time. So can the client update the website? Yes, they can. Without your help, fancy. 6. Webflow FAQs - How Much is Webflow Part 3: The question is, can I host my Webflow website on my own server or my own hosting platform? Yes, limited use cases. And if you want to build something and workflow like a static website and maybe its portfolio. And you just kinda make it and you didn't want to go and stick it on your own host. Totally doable. If you want to make updates to that website, you can either hack the code on this side, okay, if you've got some basic HTML and CSS knowledge, you can totally do that on your own host and forget about workflow now, just used it to make it. If you want to continue using Webflow to make changes, you can go into Webflow and say, OK, I want to move that around or add this next project and lay it all out and then export the codon to your own host. You can totally do that. The limitation becomes when you want a CMS, you want the client to be able to login, or you want to blog posts. We're going to create our blog posting website. And we're also going to create an e-commerce. Both of those functionalities need to be hosted on Webflow. They don't explore all the databases and stuff to make that work for your own site. So static websites perfect. Anything that requires either functionality like client login or a CMS for uploading our blog posts or e-commerce that needs to be hosted with with low for that to work. So yes and no. Can you import your own code into inflow? Yes or no? No. You can't grab your existing website and put it into Webflow and make adjustments and then spit it out again. You can't import a whole website, so it doesn't do that. What you can do in Workflow though, is you can put it in your own custom code. So you might have some code that needs to go in the head tag or into the body on a particular page or pages. You can inject your own code into pages so you can bring in little bits of code, but not import the whole site in to Webflow. You go, can I build a membership website in Webflow? Kind of Not Yet. It's in beta. It might be out by now, depending on when you're watching this. As of this recording, it's in beta, so they're working on it. So it's probably out by now. Yes, you can. For the moment, you can build like a password protected section of your website that's already functionality in Webflow and membership site is coming or it might be out. Now, go check. They go. That's the answer. Can I use my own custom domain name with Webflow? Is can they give you one as part of the free part and development site of Webflow. And that is like Dan's amazing website dot Webflow, dot io. You can use that one. Everyone wants their own custom domain though, Dan's amazing website.com. And yes, you can connect them up. Do they sell them? Know how to set them up? I will show you later in the essentials course, but it can be done. Yes, again, alright. Onwards. Does Webflow handle your e-mail addresses? You've got Dan's amazing website.com. Okay. You want Dan at Dan's amazing website.com? Our workflow don't handle the email for you. You need something else. Most people will use Gmail or Google workspaces. That's what I use, is very common. Or sort out your own e-mail hosting. So they don't do the email kind of management for you. You can just use your Gmail account and not get a special Dan at the special website.com email and just use your Gmail. The other thing is, is that they do handle things like say, make an order through your site, somebody makes a purchase. They will handle there like grabbing the order and e-mailing it to you and giving you a space to login to see all your orders. So they handle not quite email, but like those transactions. Same with a form. I'll show you how to make a form in this course. And when somebody says Hi, my name is Daniel Scott and I want to hire you and submit. It, will process that that will hold a copy of it and they will send it to you. Your whatever email address you want to send it to your Gmail or Hotmail, Yahoo or would it be using? Okay, so they'll process that incentive to use. You get the context. So they'll process the form and send it to your email address. They do not sort out your fancy e-mail addresses, but they process and send stuff to your existing email address. Is Webflow good for SEO? Yes. I'm relatively qualified ACO person, dealt with it a long time, reasonably good. And it does the basics very well. Workflow on page, on page SEO and actually gets quite deep in terms of water actually can do for your website SEO. So the answer is yes, it does. Website on page SEO. Extremely well. I'm going to say extremely eager. 7. How to Build Your First Website in Webflow: Hi everyone. We're going to build our first website in Webflow. It's gonna be super basic like this and we're not actually going to build it so much as use a lot of the pre-made stuff in Webflow. And I do this because I want a real good overview of what the process is like, how you start a site, how you put stuff in it, how you publish it, how do you preview it? Okay, so that's why it's a short video and we're gonna get to hear quite quickly because there are just some basics. I want to show you the whole process in one little bit and show you the main areas that you're going to use before we get into some more of the fundamental stuff of Webflow. Nice brief overview. It's going to either be really helpful when you'd be like, Oh yeah, that was good. I can now I get a sense of where we go in or it's gonna be too fast and be very confusing. I'm unsure which one it is yet, so let's go right to begin. Depending on where you start, you might be here, you can start a new site. You might end up actually just in this window here. You can start with templates, which is gonna be great later on when you're awesome. But for now, let's just start with a free project. You can, I'm just going to demo it. You can follow along if you want at this stage, but we're going to bin what I'm going to make. It's more of a complete walk-through member just to give you a sense of what's in the future. So this is the designer. Welcome. This is where you're going to spend most of your time. The, it's kinda like four main places to find stuff. I'm going to show you three now and one later on called the editor. Let's later in the course. But the main ones you need now as the designer, this is where we get to add and draw stuff. So I go in here and say this little plus button and I can say I want to hitting and then I want button. Remember this is just a quick was through if you like, slowdown. Not the purpose of this video is to give you a kind of a broad overview. Before we get into the nitty-gritty, the designer, will you make stuff and do design work. The other place that is useful is say up here in the corner Is your project settings. So this is our project, okay, this is my project. I can go into those settings and it has a lot of important stuff. So mine is called Dan's Awesome site. And we've got a button and hitting on it here, general stuff, the name of your website, they've got icons. Okay. Watch where you're based, all these sorts of things. And members is an area for, you might have it another design helping you or your client goes in there ways of publishing your billing, things you can change for the website, for SEO, any form submissions. I guess it's not too ready to go through it is it's more like this section here has lot of important stuff that when you get started, you'll be like, where is that? It is in your settings, your project settings. Okay, so let's go back to the designer for this project called Daniel is awesome site. There's a few ways of getting everywhere. It's all right, remember designer, I can go to my project settings, okay, but let's say you've got two projects. You're working with three clients, ten clients, you're awesome. Okay, you can go to your dashboard. You'll end up here quite often when you load up workflow after awhile, you log out or go away from it and close it and come back here, you'll end up here. At the moment, I've got one site, you'll end up with multiple sites in here. If you build multiple sites from here, you can more often than not, just click on it and go to the designer where we were before. Or you can go straight to the project settings. There it is, this project's settings. So those are the three parts, the designer, the settings, and this dashboard. You're going to toggle between all of these, these things along here are, that's important. These things here, cool websites that have made designers that you might hire their education part, like, that's the main bit. And within this dashboard, you can open your project and a designer, Diego. So those are the main areas. And the other main things I want to cover is I'm going to click these and just delete on my keyboard. And I want to just quickly go through these chunks here. So you've got elements and layouts. Elements are the building blocks that you are going to work with. You're going to start creating a container. And then inside that container you can put your headings so it's not hitting was all the way over there. You start building your website, you go, okay, I need what else? We need. Easy stuff. I need an image. Okay, let's put our image in. Missed it, get it in the right area. You start building your website through these elements and there's lots in here, there's forms. You can see there's nav menus, all sorts of cool stuff that we're going to learn in this course. Layouts is let me delete these layouts, is not cheating, but is pre-made chunks. You want a sticky nab to the top. Boom. You want ah, layouts. You want a hero section? Footer? Where am I going? There we go. Plus layouts. Footer. Okay, you've got a quite a complex site going already. And the cool thing about it is, I'm going to show you this is your preview. So this is the designer. This is me with all the editing and lots of junk everywhere. You can clean everything up in preview what it's gonna look like to the end-user by clicking this little eyeball. Here we go. It's going to look like you can see here. I can't do a whole lot. It's not beautiful, but it's a lot of the structure is there. Like if you switch down to this, say, mobile view, can you see the nav? Does it change? Every stacks, the images kinda stack differently on that. Done a lot of the work for you by using those layouts to come out of the preview, click the eyeball again. Elements, all the individual bits, layouts are all the individual bits stuck together. That's still hitting, and that's still some texts and that's still a button. But it's centered. Now, look at that seem to fit in the box. So it's just a way of kinda jumping, skipping. Now, you can't do it yet. You could. The problem becomes is like, okay, I want to get this, I want to delete this, okay, I want to delete this whole bit. We're just delete all of them. Why did that jump over there? There's a lot of things that This is super-helpful for once you know what you're doing. You at the end of this course, what you'll be able to do is be able to use all of this and know what the floaters and why Flexbox is keeping this in the middle. It's not hard, you just got to learn it. So jumping to these pre-made stuff or templates of other people's is cool. But only once you've got some basic skills, I'm gonna give you some basic skills so that you too can save time by copying templates or cloning websites or using these big layout chunks. Anything else I wanted to show you? So element's building blocks, layouts, cheating, okay, previewing. And the other one is publishing, okay, so up here, we can publish it and it can be seen on the Internet by people. It's going to use this kind of strange domain. Like I said earlier in the course, you can use your own custom domain. But for the moment we're going to use this. And you can publish it and people can see it. Previewing it just for you, publishing it to the world. Building it with elements. Cheating by using workflows, elements that are already made or kind of pre styled and ready to go. Okay, that is my brief overview of making something in Webflow. The full process is brief as it was. Also don't forget the places you need to be. Remember your project sitting is everything about this particular project. Okay, back to the dashboard to see all the different projects you're working on and the editor will actually talk about later on. This is what the view that your client will potentially see if you give them access to update the site. You might not be planning to do that, but that's another chunk. Alright, I hope that helped, didn't help. I don't know. I feel like a quick little brief through is kinda nice to see where everything goes or it's going to confuse the academy. It's one or the other. Either way, let's go to the next video and actually start building something from scratch so that we get to know Webflow. Little bonus, I guess as we get to find out how to delete a website because this is all it was for, was to get something up and throw it together. So if you've made something, we're going to delete it. So I'm gonna go back to my dashboard. And I'm going to say, here's all my projects. This particular one, I'm going to delete. You have to be very type in all of that because it's very important because they delete it and you'd never let it back. Do not copy and paste that because that's cheating. Alright, so we're cleaned up and ready to start properly in Webflow. I'll see you in the next video. 8. Class project 01 - Create Your Own Webflow Brief: Hi there. We're gonna do alphas class project. It's a nice simple one. It's just going to generate a brief that you can use to follow along with me in this first section of the course. And I don't want, well, it's not very fun. If we all make the exact same thing. We're going to have the same structure, but I want everyone to have their own client and brief and colors so that it's unique and that you can use it for your portfolio. Now the class projects are all listed in your exercise files. There's a full PDF called class projects, so you can get to something that looks like this. The first one is go to random project generator. It's something that we made here at bringyourownlaptop so that we're all unique. So click on Webflow centrals and all you need to do is type in your town or name or city or whatever it is. Okay. It doesn't have to be the actual place. Just I don't I don't want to know where you live. But what we wanna do is have something unique for everybody. So that when you click on this, you get your club. So this one here, use the first one you get, don't cheat, don't press retry. Okay, I got the idea. Roundabout Appreciation Club. There is around about Appreciation Club, I think in the UK. But everyone will get something different here in the brief that we're gonna be following is that I can read it out. You've been asked this is a one-page website for this club k. This needs a simple website. It's gonna be a one-pager just to post upcoming events, past events and sponsors. This is their ideal client. They're in their 60s. They live locally. And basically this slide is just a way for the club to not be contacted every single time somebody wants to know what time we're meeting on Saturday. Okay. So that's the goal of it. Downloaded PNG. Don't hit retry to just use the first one you got an a if you do, the internet will break if you hit it three times. Okay. Do not ever tried three times. Downloaded, get ready, and then we can stop building in the next videos. Is that all? It's in the class projects? Yes. Into your name, downloaded deliverables. There's nothing for this. Some of the future class projects, I'll ask you to take screenshots and upload them for this one. No, just grab your brief. Optionally, let me know on social media that you're getting started, you use that hashtag, starting wind flow. You have to copy and paste it so you can see other people getting started and let me know. You really excited. Is it already too hard? Because I'll chicken later on in the course, violet, same tag and see how you go in. You more overwhelmed when we started to get the hang of it, let me know. It's cool to see people getting started with myCourses. Has all my socials. Yeah. Drop me a line. Alright. Get your brief and I'll see you in the next video. 9. What are Container vs Sections in Webflow: Hold onto your hats, everyone. We're gonna make this a beautiful design example. We're going to make it because we need to learn a couple of things we need to learn under your layout elements here. The most important ones contain it in section. I'll show you how to do those and I'm going to introduce you to this guy here, the navigator. He's super useful. Alright, design Brilliance. Here we come mark first up. Let's make a new site. If you haven't deleted row one or making a new site, make a blank one to get started, give it a name. And my one remember is called Dear kayaks day kayak club. There we go. Great. And you cite. So remember this is our designer. We've been given one thing. It's this body. The body is everything you see on the Canvas currently is white and there's nothing in it. If I preview my site, this member That's libel, I got nothing. Click it again to come back out. So we're going to learn the two most fundamental parts of building a website. We're going to click this little Add button. And under elements we're going to look at sections and containers. We'll look at the rest of them later on. But these are the two main ones. The container is generally okay, this is very general. You have one per website and you stuffed it full of different sections. What I mean by that is let's say that I add somebody down here. I had some topography if I add it here into my buddy. Okay. It just hangs out and it's all the way over here on the left and you're like, I want it to be in the middle, like websites are. Okay, so I'm going to undo that using Command Z on a Mac, Control Z on a PC. Okay, so what you need to start with is not hitting dumps straight into the body. What you do is you say, well, why can I just put a section in the problem, this section as well, it has the same problem as the header. It'll span as far as it's allowed to, which is all the way to the edge of the body. So you don't start with a section. What you do is you start with a container and you can see the container. It's got edges, okay, so like say the sunny side here. It's just common now you can expand to the edges and I'll show you how to do that later on with a more complex website. But a lot of websites just hanging out in the middle here and have this whitespace. That's just common. It's not central. But remember when websites were on the left anyway. So we've got this container and it hangs out in the middle. And inside of that container we add, our sections are sections. Sections are, let's look at Apple. Website is broken into kinda unique sections. It's a way of delineating information. This is a navigation. It is a section called navigation. This is a section called charity. I'm guessing these this is a section called MacBook Air, iPhone 313. Okay. So these are different sections. Scroll to the bottom, there's a footer, same with Sony. They've got a nav, they've got this carousel, they've got this I don't want to call this different business units. And then the bottom or latest news and a footer. So those are different sections. That's what you have. And workflow, you'll end up with quite a few sections. So let's look at our preview. So this is what we're building, right? Yours is gonna look different, but there's a nav, there's what's called a hero section. There's gonna be a sponsored section, new event section, and then a past events within there. You can break it up. I'll show you how to do that using a grid. But you just have some big things called sections. Okay, So what we're gonna do is we're going to skip the navigation and just build the hero section. And it's just easier to learn the hero section and we'll do the nav a little later. So what did I do? I clicked on, undo that. So click on plus and I dragged my section into my container. You can kinda see where you drag it. If I drag it there, it's going to be underneath my container. Bad. So I'm going to undo and I'm going to drag my section inside the container, the member, the section just kinda spread out as far as it could. But because it's inside the container, Hey, gets trapped in there. Let's have a preview. Nothing much going on. Let's have a look at adding something inside this section. So let's go plus and let's add our hitting. So grab the hitting down here, click hold, drag, drag, drag. Remember you can kind of squeeze it in this section or underneath this section container, or just out here in the body. It's not what I want. If you get it in the wrong place, you can just click hold and drag and say, actually go in. There you go. We've got our hitting inside of OWL section. Let's add, well, we could keep adding different sections. I'm just going to leave one at the, at the moment, the one we're calling hero because I want to introduce you to something, two things. I've got my hitting selected, so have your hitting selected as well. Then the bottom here, can you see I have a hitting that happens to be inside of a section that's inside of a container, is inside of my buddy. We're web designing Everybody. Okay? So these are the breadcrumbs kinda showing you where you are in the world, which can be handy. So you want to select the container now. Keep hitting the hitting. You can say actually I want to click the container and give the container a background color, which is down here somewhere, backgrounds. So you could do that. These are handy. The other thing in the probability, the thing you'll use the most or at least I do, is I'm going to click on hitting. Is this thing equal than navigator? Navigator shows you similar to the breadcrumbs at the bottom, but it's got all this indentation which is really useful. So my hitting happens to be inside of a section inside of my container, which inside the body, you will have one buddy. 100% of the time, you will most likely have one container and you will have lots of different sections and lots of different headings. Then navigate is handy for moving things around. Let's say I want to add another hitting or say a paragraph and I edit here and here. But it ended up in the body and her. You could drag it and try and get it under the heading. And that works. I'm going to undo it so you can't do it. Then navigate is really good for this. You can say, Here he is. He's hanging out not in the right place, He's underneath the container. So you can say actually I want them up next to just underneath this heading. So you go drag a mob, move them around. Here we go. He's right underneath these, inside this section, hanging out with the heating. You can change the order which this UVA, There we go. So it's kind of a nice way of working more with the code than it is. The visual, visuals great for loads of things. Sometimes it can be tricky though. That's why I introduced you to the navigator. Let's style this section just a little bit before we move on and look at styles probably. So you could like on the background, let's look at our preview. I want the background for this chunk here I have an image in it. I will do the image a little bit later on for the moment, let's just fill it with a dark color so we can see the text. This. Do I color the paragraph? You could say paragraph here. I would like to have scroll. So you should get your styles option here. It's kinda default ones, scroll down, scroll down, scroll down. I'm using my mouse wheel. You can strike that. You're in charge of figuring out how to go up and down this thing. Okay, I use my little scroll wheel. You can drag the little slider or the side. So there it is, there background. So I can say u, p tag or paragraph tag have a dark background you like. You have to do it The hitting. Okay. So you want to often with like large styles like this, okay, I'm going to undo, which is Command Z on a Mac, control C on a PC. You would like to do it to that probably this section, I know that there's hitting thing here is a whole section that I want to be dark. So how do I select the hands up, hands up. How do I select the section? You know, there's two ways down here I can say You section. Remember the breadcrumbs? I clicked inside of it first. So it kinda knows where in the world you are. On paragraph. I don't want this section to have a background, color, backgrounds transparent. I'm just going to use a dark gray for the moment. And we'll change it later on to an image. There you go. You started your section. You have just created the first bit of CSS. You didn't even know it. So we use the breadcrumbs to select it. You could maybe if I click on my paragraph again, you're like, Hey, the background color is gone. How do I click the section? The navigator panel is probably what I use the most, you could say, not paragraph. Click on him. There you go. There's my color, which I can then click and with this color picker here. And if you're not used to them, you just kinda click anywhere in here. Once I click and drag, often, don't have to, but just kinda find a color. And to pick a different color, you can drag this hue slider, okay? If you want a dark blue, if you want a green, drag the slider to green and then kind of pick within the shades and saturation of the green. But I'm going to go all the way over here, just pick a washed-out gray and then kind of just go into here and we're done. Alright, that is it. We've added a container, kind of keeps us from the edges. And inside out. First section, we're going to add multiple sections to our one container. And Buddy is there to rural everybody sitting in the background keeping everybody in the right place. Alright, that's it. Basic structure, containers, sections. Let's get onto the next video. 10. How to Create CSS Classes in Webflow: Hi everyone. This video is learning all about what classes are CSS classes in Webflow. How do we style things? It's a long one because it's relatively important topic that is quite foreign to people new to web design. If you already know what a CSS classes, probably watch it anyway, there's some Webflow quirks that we need to get a hold of before we can move on with the course. Alright, let's go. So what is a class? A class, a CSS class. The long version is a way of styling the elements on the page, gives them color and style and padding and what fun to use. So we drag these kinda like block-level elements onto the page, just these kinda like things. We just lumped them on. And then we will want to style them, we select them and over here, change the style. We did the background of the gray before. So let's do another one. Let's click on our hitting. Okay, and let's have a little look at how the design we're following. Remember you can pick whatever you want along on your own one. Let's go and style it. So I've got my hitting selected. Now, the right way to do it is to go in here and say, Okay, I've got my hitting selected. I'm going to click in here and give it a name. So I'm going to say this is my is gonna be dens hitting, give it a name. You can see over here it's applied to it. Then I'm gonna go to style and I'm going to say down here and typography, scroll down. There's my color. I'm going to say, click on the little thing there and say actually I want white to get white. Doesn't really matter what Hugh urine, as long as you click hold and drag, drag, drag, drag, drag. Kind of like all the way to that corner and going to pass it a little bit. Or you can open if, if, if, if, if that is the code for white in with hexadecimal language, can we hit Enter on my keyboard? I'm not, I'm just going to click. Okay, and we've styled it hitting white taste. If I click on it, it's got a CSS class that I named dance hitting K and it tells things to be white. I can reuse it. Okay. I could call I could say actually this paragraph here that I added. You're also, if I click in here, I can say, look, here's all my other ones that I've made. My existing classes that may go dance, hitting, you go, danes hitting doesn't really do anything. All it does is makes things white. This is only job in the world today is hitting. I'm going to use it like this might be bitter, cold white text. I can just apply to different things. So you have now created your first CSS class called hitting or density in my case. So selecting something and purposely adding a class is what you wanna do. Bond workflow knows that people just hack around and do it. And what they do is they actually make classes for you. We've already made one, we've already made emphasis. This is like your second CSS style. Remember when we had our section, the background. So how do I click this section? Remember, you can either do it down here. I'll click inside first and say actually not the heating on the section. Click on that. Or maybe you can go to your navigator and click on. The section has a style headed, a good style. Can you see that they got automatically named for us, that little blue thing that wasn't there before. The site wasn't born with it. It was just edit when you start a chain to change the color and you forgot to name it. So this is all, I'll just name them for you. So you'll end up with lots of that, especially when you're new. So let me show you an example. Don't follow along. So I'm going to add a new section. Section. I'm going to drag it off, try and get in the right place. Well, they didn't work. Okay. Undo, undo. I'm gonna go section. You can put one inside of each other. It's against the rules of the Internet, or at least the rules of workflow. Section elements cannot be nested inside of each other. So I agree, I'm gonna put it down here somewhere where you can see that his body at the top there, you can get a bit higher, is inside the container, which is kinda where I want it inside the container, not inside this other section because of y, let me kinda get it in the right spot. Even if you don't get it in the right spot. I want to show you some, actually, no, let's finish this example. So I'm gonna get in the right place and I'm going to style it. And in my little mock-up here, you can see it's white backgrounds. Oh cool. I'm going to do white background. Wow, why it's not gonna be that helpful at the moment. Let's pick any old backgrounds. So over here, and what I want you to do, I'm going to change the background. Watch this, watch this bit up here. I'm going to say, let's can we scroll it up so it's closer? It is worse there. I'm going to say you're going to have a background color of really bright red. Can you see it said, Hey, you didn't give it a name, so I'm going to name it for section two. When you're new, you will end up with Section 42, which isn't very helpful. So what you wanna do is be a bit more purpose. I'm going to undo it. I want you to see if you can add your section, give it a go. Then let's give it a name before we style it. Okay, I'm going to call it section. I'm going to use title case here. It doesn't matter what you name your CSS classes. You can give them any old name. I think they have to start with a letter, not a number. That is important. It's gonna be section and this is going to be my sponsors to let her on. I can find it easily and I'm going to now pick a really interesting color, wrong color, backgrounds. We've got to click in here for color. I want to drag around until I get something. I'm just going to use another gray for the moment. I'm being a bit more purposeful now I've created a style, applied it to the section called sponsors. And you'd be like, Wow, what do we do with the one we already made? So we're going to select it. We're going to click in here. We're gonna do something. Well, let's click on it down here and say I want this section selected. Okay, instead of a cool section, because that's not a very good name, you can just right-click on it and you can just double-click on it and say section. And this one is called My Hero. Okay, so now I've got a hero section and I've got a section. There we go. After a while, you get in the habit of making names first, but for the beginning you'll end up making them and naming them afterwards, and that's totally okay. Now, next thing to note about CSS classes is that it is more often useful to style the section or the thing that it's in rather than the elements itself we styled. We use Dan's hitting and we put it on both of these. And that's fine. You can keep doing that. There's nothing wrong with it, but it's probably better. Let's get rid of it. So how do we remove a tag over here, dropped down. There's one that says just remove that one. And I'm going to remove it from here as well, remove that class. So it's gone. What? It's easier instead of creating a class in doing it to both of them. You say, actually, I want everything in my section, the hero, to have typography down here that is white. It's not really, you didn't have to do it that way, but you see it's easier. It's easier to style the container that it's in the individual elements, often saying with the padding, Let's look at our example. There's a big push off this side. So I could go hitting if I don't give it a name and I add some, let's say some padding on the left-hand side here by clicking, holding and dragging. Can you see it instantly made something called hitting. And if I make another one, it's going to be hitting 2345674. So I don't wanna do that way. I'm gonna get rid of it. Remove this class so I could name it, and then add the padding, which is slightly better, but actually it's easier. Just go on the section. Okay, so I'm clicking on my hero section. I'm going to say I want padding for everything in there. Click hold and drag it, and everything comes along for the ride. It same with the top one. Penny, from the top to this one's a little tricky. You drag it the way you wanted to push. Okay, so I'm going to undo that. So I wanted the number to go up. So I dragged it up. You want to drag it down? We go. How much padding do I want? And we're just going to guess it for the moment. I'm gonna kinda look back here and say something about there. That looks good. I want some padding at the bottom. How much padding is down here? About the same as the top. So I'm going to say your 23 so I can click the bottom and say 23. Now, I have some problems with numbers. I realize in 23 it's 53. What am I, wade quick? You'll probably see it again in the course. My eyes, my brain, and my mouth. They don't sometimes call it. So anyway, we've very purposely made our section. We've given it a background color. Okay. Or is it background color? I'm scrolling down there. Is there. And we've seen everything inside of here is got a text color of white and some padding going around. Probably some padding on this side as well. Drag it the way you want it to go. You go. Look at the example that far. Actually it doesn't really need that. I want that paragraph to come in a little bit there, but I want a different over here. So now this is a really good example where actually if I make the padding for everything, we are on the paragraph takes let's say, let's go, let's go all the way across. Here we go. The hitting is not gonna be long enough. The ego, so this is where actually the padding for the container is not that useful. So what you can say is Go, you, actually, I'm going to tend to padding down because you're just going to turn it off for the section. You to turn it off. There's a couple of ways you can just hit. Zero is kind of working. Okay? So removing something, he sees blue and this one is not blue. Blue means I've made it be zero. I've said be zero. This is grayed out because it's like I'm just guessing. Whatever it's not set to zero just happens to be zero. I'm being very specific here. So what you can do is you can hold down the Option key on a Mac, alt key on a PC and click something. You see when gray just kinda say is, I'm not saying be zero, just be whatever your default is, just go about your day. And now what I wanna do is I want to say this paragraph text here. I'm going to say you're my paragraph. I'm going to use the word, I'm going to use letter P, k, then a space because I'm probably have more paragraph text in my whole document. So it's going to say paragraph for the hero, little special class that we're going to make. Okay, create it. You can either hit Enter or click this. I want this to have some padding over here, which is different from the kind of section. And what happened there. Why isn't it kind of listening to the section? This section is kinda like a parent. Okay. He's saying, alright, do these things that children inside of here can override and it's called specificity. We'll talk about it, it's more specific. So this paragraph takes as getting some vague instructions from high above. If he gets some more specific instructions, he will override it and say, hey, yeah, but I wanted to does other things to get the generic stuff into the outside wrapper. Now cases something called Section hero. And then if you want to do a little more specific things inside, give them their own class name. And in our case, we're just doing padding. Now, class naming gives everybody anxiety. And even if you're the best, most diligent, I'm pointing it myself. You can't see that, but I'm kinda diligent and I like all this stuff and I understand it all. You always end up with hitting 17. Can't remember, maybe not that bad. You'll end up with classes that you start off with best intentions and you end up making it work, but maybe not as organized as you'd hoped, but you will get better. And in this course you'll notice that there is kinda three sections for CSS, just introducing a little bit now enough to get us going. And then later on we'll do a level two and level three will be high core CSS code is, by the end speaking of code, let's have a quick look at two things I wanna do. I wanna see the code and the Navigator Panel. This doesn't have a kit panel because it's quick and there's a lot of like clicking on this and then figuring, say I want to drag this into the next section, I can probably do it because it's not that hard. Oh, very good. Point. I got three things to tell you. The first one is the navigator panel is just handy when it's always out. So it means when you're doing stuff in the navigator panel and you're like, I want to drag this in. Can you see it doesn't go away, stays there all the time and it's easy to actually drag straight into this. You can say I want to hitting inside of the section, rather than trying to drag it on the page, you can do it. There's nothing wrong with it. And undo the navigator panel if you go to it. Okay. Because otherwise it automatically closes and it's super handy to be open all the time. To do that with me, you'll get used to it. And this option up here, it says pin the navigator, don't close. It was to things. What were the other two? You wait there? Oh, yeah. I remember. So let's have a look because I said you've been writing code, running code. How do you know? You can go up here and this is an option that says Export Code. You can click on it to export everything you need to pay to count. But you can see a chunk of it in here. It's loading the code. Come on. Code loading. I'm not sure my normally always loads. Let's close it down and try it again. Yes. Okay. So what coded we written? We've written some HTML, some CSS, and some JavaScript HTML. So we've added, we knew there was a body tag. Look at that. That's what it is. So if you were doing, I've got like a web design essentials. We'd be writing this code and saying body inside a div class called container. Inside of that is something called section. We are writing code and it is nice and pretty and well laid out. It's easy to read, but we're just doing it in a more visual way. You never have to look at this side. It's just interesting. I think it is anyway. Divs are just generic containers, divisions divided tags. We've got one called container that keeps hours in the middle. Okay, I'm going to section and we gave it a class name of section here. We've got another section here we gave a class name, okay, so div class of sections, sponsors. So this isn't the HTML. We've kinda said, here's a box, it's called section sponsors. Over here in my CSS, we've styled it. We've said, okay, where's my section sponsors there it is there. And this is what I want you to style it. This is the CSS class you've made. This class is called CSS section sponsors. And this background color, That's what we've done. We've done a bit more to the section called hero. We add some padding and background color and color of the font. Remember Dan's hitting in there. We don't need anymore, but it set the color to FFF, which is white. And some random hitting one we made. Okay, So we are writing HTML, CSS, and the JavaScript. We're not really touching at the moment there, but it is getting produced for us. Your Coda. That's why it's like no code coding. The other thing I'll mention while we're in here, can you see class names have, if you're doing my other web design course, we use VS code, you'd actually have to know that a class name starts with a period and then has to write, has to be lowercase. You can have spaces, all these sorts of things. Whereas Webflow says, we don't want to teach people that you type anything in there. And we'll convert it to you to the right syntax, which is there's no spaces, so they just put in hyphens where I put in spaces and they made it all lowercase automatically for us. We never have to come in here. I think it's useful. Anyway. Have a look at your code, see what you made. Now, I said there was only two things and then there was one thing. This you saw it. I ignored it. So it's a good example, okay, is that this thing here is being told a couple of things. It's being told to be this paragraph here that I named. And what does that tell us to do? It tells us that it wants to anything it's telling us to be is we only see it be what it was, it padding, that's the only thing we did to this thing. Everything else that makes it white, that pushes it from this side is, comes from. Where does that come from? That's right. It comes from this section to section says B, this from the top, this from the side, and be a text color of white. Keys is blue when things are done and everything is white or gray when you haven't said to do anything, we'll discuss what the MBA colors later on. But this tag here, this paragraph text is getting some commands from. It's getting one specific command connected to it, saying be padding on this side. So when I drag it over here, That's the only thing that comes along with it is this thing here because everything else that makes it white and it pushes it down from the left. Now we're going from the top and the left is coming from this fella, from this section here. So that's an interesting thing to understand. Does it help will make it more confusing this early on? Why don't we just apply it to everything so that when you drag it down here, it's white and pad it over. You can do that. It's just very repetitive, especially if I then say I'm making a blog site and I've got my blogs, probably only got four posts because that's as far as I get before I lose interests. But I love making videos though. But let's say you are an avid blog writer or your client is, and you make 1,000 pages. And you've applied one to every single bit of paragraph texts and they say, Can you make the font bigger? You can say no, because you're gonna have to find Every single one, click on them and go and change them all to some other style. Whereas if you just do it to the containers, it's relatively easy because everything inside comes from the right. You say actually I wanted to take us now to be awful read contrast, easy. And if there was 1,000 bits of text in this section, it might be like the article section. Well, the blog post section, everything comes along for the ride. Alright, there was a long one, but it's a pretty fundamental to the rest of this course, Understanding classes, how they apply, and a little bit of specificity. Specificity is a hard word to say, okay? And it's a way of saying, I'm going to be really specific for this bit, but everything else is just generic. Follow me unless I tell you to do otherwise. Alright, that is it. Onto the next video. 11. How to add Images with Margin in Webflow: Hi everyone. This video, I'm going to show you how to bring in an image. We're going to look at the Asset panel and we'll look at adding a class to it and experimenting with the differences between margin and padding. Alright, let's get into it. Oh, and I'll also show you a way to get free commercial use images for your project. It's bonus. Alright, now let's get into it, okay, first stop. Get your image and what are the club you're doing it for. And you can go to something like unsplash.com. Unsplash is just a great commercial use free images. Okay, It's pretty amazing. I'm going to click in here and type in juggling list. I'm just assuming your clubbers juggling and find any of these images down here and hit this little option here says downloads to find something for your club. Yours might be, I don't know, sewing or kept juggling whatever it is. Find your image, download it and get ready. So I've already got my image, It's in the exercise files. So first thing is we need to add an image, okay, so add this first little tab here, okay, and down the bottom here there's one called Media and his image. Click hold and drag them and just kinda pop them in where it needs to go. You can, but above a little blue line. Okay, Got an image. Let's go to choose image. This little sitting pops out and you get to do some basic stuff. I'm going to use choose image. And what it did is it opened this tab over here, your assets tab. We've been on the Add tab and that Navigator, but now we've got this Assets tab. This is where we keep all our images. You can either upload your image. We're going to do this and go to browse and go find it. What I find super useful is just to drag it in there. So where's my exercise files? So here's mine. I'm in the club of insight. I've got one image in here. And it's really cool because if you've got 20 of them, you just click and drag them in. Here we go. Here's my image, it's uploaded, okay, and now what I can do is because we've got the selected. If I click on that and just kinda throws it in there. Okay, so my little place holder selected, just clicked on it and it just kind of injected itself in there. Nice. And it's way too big. You can just grab the edge of it. See this little anchor point down here. Click hold, drag. Don't have to hold anything down, just drag it up and it will resize online. That sort of size. I'm looking at my mockup that I did, something like that. Here we go. So in terms of image settings, you can be a bit more menu and you can get to the settings from it. Because at the moment dragging its fine. You can kinda see the numbers there, but say it needs to be to 50 Exactly. You can either go to this little cog here, image settings or there's actually a tab over here, so I'm going to close it down. Close it down. The same thing appears. See this cog here. They're the same thing, two different ways of getting to the same thing. That cog, this cog. The difference between this cog, it has a bit more settings, a little bit more advanced. So the basics though, replaced image here and you can type in the size. So I'm going to say, and this needs to 50 and I leave the height to auto. If I type in the height, Let's make it 20 pixels. It squishes it. So you want to leave it as auto by deleting it. So there's nothing in there. There we go. Well, do 50. Here we go. Alright, we'll talk more about images later on, but that is it for the moment. I promised we'll talk about padding versus margin. Okay? So I want to add a bit of space between my paragraphs are very tight. So what I wanna do is add a CSS class, okay, and how do we do that? I have it selected. I could just go to Styles and start dragging stuff. What's gonna be the problem? That's right, it's going to automatically create me a class that I can rename later on, which is fine. But what I want to do is be special and say, I want to go image. And this one's going to be cold. Capital I. It doesn't have to be. I just know it's a tick. I have image hero. So I put it backwards because there's gonna be an image that's going to be maybe in the footer or the sponsor section. So I always put image first and then the other things second, just so that it's easier to find later on, or my image salsa together rather than hero at the front. Here we go. I'm gonna do that. Hit Enter on my keyboard. And I'm going to say, I'm going to add some padding or margin now with an image padding and margin doesn't matter. So I'm going to drag it down this top one. So I've got a bit of space there. Nice. You'll notice that if I undo that, undo it, you hold down the Option on a Mac, alt on a PC and click Okay, and it will get rid of it. You'll notice margin if I drag that up. Okay, it doesn't visually look like it though Anything else? Okay, so padding and margin for an image is pretty much don't have to worry about. You can do either. Okay, where it gets different, is it say this section here, so I'm just clicking in this area here. We did padding before. Let's say I want more but I'm just going to use margin because it doesn't matter. Dan said before section look at this. If I drag the margin down. Okay, well up, you see the difference between margin and padding. Padding is the internal bounds of what's considered this section. Margin pushes it away from its next element. So it adds space between them. Even though, let's say if I do it to this p tag, It's still doing the same. It's going to either open up and padding is going to push it from the inside of the p tag. And the margin is going to push the outside of the p tag kind of away from the next element. It's going to look the same, which this, so if I drag this up, I get some space. Fine. Do it. If I use padding, drag it down. It's weird, right? You drag it up that drown internal padding. You can kinda see on these boxes is the insight that's the outside. But what you can see is this actually the same thing? Like if I click off, it's got the same amount of space with I use margin or padding, so doesn't really matter here or an image, but some things do like this. I want you to have some space at the top, okay? Or some padding on the inside. You get the idea. We'll do it a few more times here. But in this case, if you are looking for a role, okay, It's better for this case to use margins than padding because you can kinda see this box is all the way up here. Nothing really wrong with it. I'm going to remember Option or Alt, click it. It's better to kind of push it away with margin. So the p tag is separate from this bit here. There's a gap in-between. It makes more sense later on when we make things clickable. If I want this to be clickable, I don't want like maybe all of this clickable as well. I just want the p tag to be clickable. Here we go. So I'm going to What have I done? I'm going to undo that what I'm doing. So your Command Z or Control Z on a PC. And I've got some, in this case, margin at the top of my image. I've added a class called image hero, vetted an image, and it's awesome. We can get to the settings by clicking on this or with its selected going over to here. Same, same. That was some extra stuff. Alright, images importing into workflow. 12. Background Images How to Overlay Text on Image Webflow: Hi everyone. This video I'm going to show you how to add a background image that kinda fills it so the texts can go on top. I'll also show you how to darken the image so that you can have texts over the top that's legible. Alright, let's get going. Alright, to add the background image, you need to first pick a background image. Okay, so again, if you want a free image for your background, for your particular club that you're building. Go to unsplash.com and type in and find something. It's better if it's got a dark background. Wow, doesn't have to be. If you're going to have a light background like this, you'd probably have to have dark text on it. And I looked for something for me that has a dark background, like this would be good because the text will appear nicely on it. To add your background image, It's best to add it to the assets first, okay, so I'm gonna get them Assets tab here. And you hit the upload and upload it or do it, I do find it. And image two here, I'm going to just drag it. It's going to upload itself up there. It's really big file. I'll show you how to get these smaller later on, but nice big file. And what we're gonna do is we add the background graphic. Notice like its own unit, It's not like an image that we push behind everything like in other design programs. What we do is this section here is helpful little section that we named hero. We're going to say you have a background, we've done background before. Look down here is a background color of gray. Actually what I want is can you see it says image and gradient. So this plus here, background, I want to add our image, which is cool. What gradient? Okay, if you want to do that and where it says images, his choose image and I click that. It bumps open the assets panel and you got to say this one, please. You're gonna give it a sec and it's gonna be massive. Yours might be small, depends on the size. Okay, So to start with minds on custom, okay. Which means really it's the heightened width that it was that I downloaded it. It's massive. The one you probably want is cover. There's custom which you can type in any old size. You can say I want it to be 30 pixels by 30 pixels. You couldn't do that. It's very common though, just to go to cover what color does is actually it stretches the image to fit whatever the size of the section is. If I decide that, I'm going to add two P tags, which says if I copy this p tag by Command C on a Mac, control C on a PC, and then paste it command or control V that I made extra. But this background goes, I'm bigger. So I'm going to show more. And I paste it again because it just keeps filling the background. It covers it. I can't see any this side of the image now which is a bit of a pain you might be like. The central part of this design is this lovely river. I want it to be in the middle and you can do some changes to it. So remember heavier section selected because that's where the background is applied. And overhear and background, I'm going to click on my image. And you've got some options. So you can say, can you see position it saying, I'm going to start the top-left and spread out, you can say actually just grew from the middle. So when it does re-size, it's going to have the center of the image in the middle. Let's delete this. Now a little bit. The bottom has gone a little bit that top little bit of the sides, what cartilage. So that's the kind of trade off and you'd be like, hey, I want it to be pixel perfect. This image is perfect. Its product shot, it needs to work perfectly. Now, the trouble with being like that for web design is the amount of devices that you need to show it on. Responsive design is a term used for showing on the desktop. And she got this one here. What does this look like on a tablet? It's a whole different size. The format is different, so the content resizes and readjust to adapt to that size. And so does the image. So if you get it perfect and desktop, it's not going to look perfect. On tablet. You're not gonna be able to see every single pixel and get it framed perfectly. Unlike print design where you can be really perfect. You need to be, you need to be 90% good web design unfortunately. So get down to here, shows a tiny bit of it. I'll show you how to fix all these different break points as we go along. But it's just something to be careful of when you are designing things. And especially background images covers good because it adapts for all these different device sizes were only designing for a generic desktop. You've seen how many laptops and big screens and screens are out there. There's just so many that your site needs to be responsive to them all. So let's click on our hero section again and look at a couple of other things. Before we go, I'm going to click on my image again. So cover constraint is more like it will show the image completely the, the rock down the bottom here. It will squeeze it into the spice provided if I make it on mobile now, it will squeeze in and then tile. I don't use it very much. Okay. If you don't like the tiling, you can turn the tiling off so constrain, so it's the fits everything in the window and you can say actually I want it to not tile, tile forever. You can title it left and right, up and down, no tiling, but it's not what I want. I want it to cover. Thank you. Cover. The next thing I wanna do is darken at the moment it's a bit light. You can darken your images with CSS with these styles. You could go to Photoshop or Figma or XD or illustrate what are you using to design Canva, whatever it is, Microsoft Paint. You can definitely not duck in it and Microsoft Paint, but we need to darken it. So there's a little trick you can do. I'll show you we've got image on our background. You can actually have more than one thing on the background. So at the moment I've got an image in the background, but let's have another thing. That's why there's a plus. You can say I want to add no one, but you want to add, I want to add an image because already got one of those. Not a gradient or a linear gradient, not a radial one. I want this one. I want a solid color, please. Okay. And that solid color is going to be going to click on it. And I'm not sure if this room visit from last time I did it or this is the default. But anyway, I want to pick a dark color. It might be a tinted black. What I'm gonna do is drag it right into the corner here, okay, black zeros 00000 is the CSS color for black. If, if, if, if, if if was white, remember. And what we can do is we can use this one called Alpha. At the moment it's 50%. That's the slider transparency. Nikola Alpha, web design to be fancy. But we know it is opacity or transparency, okay, you can decide on how I pick versus how transparent it is. So I'm going to find something where I can read my text because we want a nice good contrast between the text and the background. Alright, that's good enough for me. I'm going to click off. If you're like, That didn't work for me, what might've happened is I'm going to click on my section again. Is can you see there's actually a layer order here. Your one might be underneath, it, might be on the top. You want it to be on the top really with a bit of transparency. And the image on below, you go, well, one last thing I made a note here to show you is I'm using the undo Command Z. I went straight to the shortcuts. Here's a manual way. Look, undo, redo. If you do close down workflow and come back to it, those undoes have gone caving. You can undo, redo using the buttons. Alright, that is it. Onto the next video. 13. Buttons with a Hover Color in Webflow: Hi everyone. In this video, we're gonna look at adding a button and getting it to go somewhere will also add this hover color here plus a few things related to a button. If you came here just for the rollover color, have it selected. And it's in here. This little drop-down. Go to hover and style that, that pick a background, different background color, and you'll be adding the hover. I know the title of the video, Promises rollover color and bought. I ended up doing it about five-minutes. So there you go. That's the cheat code for the rest of us who want to learn all about buttons. Let's carry on. Alright, adding a button, easy. Go to Ed. And down here, there's one called button under basic. And click hold and drag it. And it's going to not go underneath. It's going to want to go to the site of an image. It'll go underneath this text by paragraph tags. But let's see why I'm gonna go after this button. You'll see in my navigator panel here. Remember if you haven't got it stuck, go to navigator, sticker to the edge, super handy. You can see he's in this section box and he is what's called a sibling because he's in with his other siblings. He's all amongst these guys are all in this section. He's the parent needs of children and also siblings to these guys. Anyway, some language there for you. But he's not underneath. Why is it underneath? It's because of this image is doing something a little weird. This hitting tag here, we've got a paragraph text. Okay, can you see when I hover above it, can you see this Trisha is on for infinity, okay? It's called a block-level element. And what happens is, unless you tell it to be a width, it goes to 0 as far as I can to the age. Same with paragraph text goes I'm going all the way over here and I'm filling it. Nobody else can be up here. That's the default for it. An image can you see here, he's not racing off to the edges. He's saying, I'm here. He's what's called inline block-level, inline, change them. So here this fellow is this option here. So we're going to cover layout more detail as we go along, but let's do this one now. So with it selected, I'm in my styles. I'm going to this first option here says Layout. He has displaced setting is set to something called in line. In line, you just means that he's in line. This guy is in line as well. Can you see he's in line? Let's look at the difference between this one like that. He's display and he is set to block a and he will fill up you can even see. Thank you. But afloat says he will fill up all the available width. Or is this fella? He won't. He could stack next to each other. So buttons are really good when they're in line. Because if I want lots of buttons kinda like in this nav and the top that we don't have yet. That's really good. And as image, sometimes you want images stacking next to each other. But in this case we don't want to say you, my friend has actually go to this one here. Look at that. He says, Nobody can be next to me, not friendly at all. The button though, it gets pushed down and squeeze down. Alright. So I'll buttons on his own little bit. Let's go and do some changing. So this one's gonna be called event details. Okay, let's look at some styling so you can select them all in here. I can do bowls and stuff in this. And what I wanna do is with it selected, I'm going to show you advanced topography. Topography. There's one in here. It says, we're going to type more type options ready? There's one in here that says make caps. I'm not sure why it took you there. Anyway. We've been there. I mean, you just type in capitals. Save yourself some time. Alright, let's style it. Now. What will happen if I go and do? Well, actually, I've already styled it. I did didn't know it. I made it all caps. What happened? You saw it a style was created called button. I didn't make it. It wasn't there when I first dragged it out. Watch this. If I drag out a button now by itself, you see that he has no class applied. Okay, but when I went and added that style, pretending to do it on purpose, but forgetting to name it because we all do it, created this thing called button. And that can be confusing when you're new and you're like, oh, does that something already made like because it's special note, you made that by accident. So let's call this one button and we're going to call this one here. Okay, just because it's inherit box, I'm going to do some styling that I'm not going to use anywhere else on the website, just in this hero box. So that's why I call it button hero. You might end up button nav or button footer, button Contact page. Okay, so we've got that fit into. And I'm going to do some styling. I'm going to pick a color. So under backgrounds for this button, I'm going to pick just a green from my design. You can pick any colors you like. Okay, and what else do I want to do? I'm going to pick some topography areas fine. We're going to use the new areas. Open Sans is a really pretty, pretty, pretty strong word for it. It is a very sensible body copy font, really legible, free to use, and I like it, but I'm gonna go to bold size-wise. Yeah, 14 pixels looks fine for me. The only other thing I want to do is I want to add rounded corners. So now this panel here, I want to give you a little tip on using the styles panel. It is big and confusing. No big and confusing. There's just lots of like where is everything you can scroll down and you eventually find it. What I like to do, you might not like is you can see these little arrows here. You can actually just click these to make them smaller and just opened the one you want. Okay, So I wanna do what? The borders excellent, just open that up, work on it, close it back up. Feels a bit more. Freedom me. Another cool trick is with them. You can hold down the Option key on a Mac, alt key on a PC, hold it down and then click any one of them, and they all open and hold down that same key. They all close. These little blue dots that shows you that somewhere in here you made a change. You've made no changes to border. So there's nothing going on. So button Hero, Nothing. You've changed none of these. You've done some topography. You remember what it was? It's right. We've made it all caps and we've done some background. So if I do borders now and I say actually I want that border radius to be something. I'm dragging it here. I'm watching it over here. Okay. Picking something and you go. Now I twirl it down. Can you see oh, it's a blue dot. Dot means I've changed something, will do n, but later on it means that something else is applying to it. It's not something you've directly done to it, which is important, but we'll get to that. I know you will ask. I've got rounded corners. Let's look at padding and margin. Actually, no, let's make it work. We don't rounded corners, but we haven't made that link anywhere. So a button has some default things. Now, like before settings from this cog here or with it selected, we can go to the cargo over here. It doesn't matter. Lots of options, just a few options. Let's use just the few hurt by default here, we're going to use this first one. So when this button is clicked, it's going to go to URL. You can pick any URL you like. Okay, and it's going to open and now case in another tab, okay? That just means that when the button is clicked, it's going to leave this website open, open up a new tab up the top here in the browser and go to that. So both of them are open if it's an internal link to another page on your site or you want it to replace it, you can turn that offset. It will switch out the website to wherever that ask. Okay, let's do that and give it a test, open a new tab and close it down. I'm going to go to my preview. We haven't done much previewing anyway, because it's pretty, it's pretty good at showing you exactly what it's gonna look like in a browser without you previewing. Preview it closes down all your panels and gets rid of all this kinda like weird blue lines, which this weird blue lines gone and watch this, I can click it and magic, I've got myself to an amazing website. Okay, so let's go back into here, turn the eyeball off. Other things I want to show you to do with the button is actually let's go through these other ones. So you go into a URL. This will be going to an external website like Hey, go check out this great Webflow tutorial that you should go check out by this sum. But here he dude, you could link to that. And another one is you can link to a link on this page. We've only got one page. So if you go on to link to a page on this website, Oh, I can only go to home because we've only got one page. You can do linking to a section. So we're gonna do that in a bit. Our one-page is we're going to add navigation to jump around the different sections. It doesn't quite work yet, but we'll do it. You can, when this button is clicked, go to somebody's email. Okay. Or when it's clicked on a mobile device, start ringing. So you can have it like a colas number. That only works well. No, it works in my browser. If I put it in a phone number here and click on it, it will try and launch Google Voice or something anyway. But on a mobile phone, it'll click and it'll kinda preload the phone. So those are those options. For the moment though, we're just going to use our NEO URL just because it's a placeholder. Until later on we get to jumping to our sections on our side. So those are the different links. And the other thing we might want to do is change the hover, because the moment you want to change the hover color. So let's look at that. So with it selected, I'm going to take you in a secret place. So we're gonna go to my styles. So the moment we're looking at button here, I want to style the hover. So when you got your mouse over it, it works. It's hidden in here with the button selected. Webflow knows that, hey, there's some special things with buttons which we would put them in here at the moment. How will the ground somewhere in here? It says height buttons have special things. Here they are. There's the hover, pressed focused visited hover. You can see it's added a special class, Green means Figma, sorry, Figma. Width flow already knows what you're talking about. Kinda like a pre-written one. There's already a class called hover. You didn't have to name it and goes, hey, these are special things that buttons have, we've made them. You can just pick them from KU drop-down with it. Now on, you can say, I want this style for the background to change to something else. Pick another color, okay? Because down and there we go. Let's give it a preview. Okay, if you click off, it'll kinda preview without going into full preview mode. Some of them do that. We're going to hover. We're less CSA superstars. And so we've got a hover. Anything else I want to show you a k. There are if I have it selected, if I want to go back to hover because I want to style it, I've gotta go back into here because it defaults. Once I've clicked off, I clicked off, click back on and you can see it's gone to button here, but where did that go? If you wanna go and change that color again, go to hover and narratives. It's all kind of loaded backup and you can go and change that one. You might decide to do one of the other ones. The other ones don't, they didn't not work. But things like pressed is when somebody clicks it, what happens, but nobody sees the click. This is my opinion. Anyway, let's make it bright and red, bright yellow, bright yellow. So let's have a look. You have to go to Preview mode to check pressed. Watch this. When you click this, you're going to fly after another page. But did you see it? You can it's really quick, but you can see it when yellow. So you can do press to feel like there's gonna see it focused is something else Google that it's to do with tabbing around our website and accessibility and bad. Out of the scope for this one. Let's have a look. What else we've gotten their focus visited. If you've gone to that link before, people don't really use that one anymore. It'll change color if somebody has clicked it once, remember those all blue links, they go purple. That because you've been there before, not really used for button in my opinion. Alright, cool. And secretly you made your first combo class, which we'll talk about in a bit. But yeah, that is a button that is styling it. Oh, the other thing is I just checked my notes there. Hover. Hover going to work on a phone. It is not. You can't hover on your phone. You can hover your finger over your cell phones screen and it changed color. So the desktop only thing. So yeah, oh, the other thing we need to do is padding and margin while we're here. So got my buttons selected, I can see that style here. I'm gonna go to my spacing and do I want padding or margin? You have a think now before I say anything is bent as a pedicle. If you chose padding, you were wrong. Look, click hold. So I can put padding in there and it moves it down. But obviously, paying is on the inside of the box. And margin. Click, drag it up. Like that. There you go. Alright, It was a bumper. We learned buttons hovers. We showed you the different ways of doing it. I showed you how to close these down, Option or Alt to open them all out. Click one of them. We visited the Comic Sans Appreciation Club and we found the secret ingredients for these buttons here. There's not just buttons. We've found stuff in here. You can other elements within this course and within workflow will have this drop-down to show things that are related to that particular element. Alright, cool. So one thing is that if you are following along, I'm going to set a class project for you to submit and a little bit. And basically it's going to be making sure you're up to where I am. If you are following and just watching, I don't know, It's really good to practice, but also we want to do the class project. You'll be mostly done and ready to submit. Yeah, do the exercises while we're going along. It's good. It's a good way to learn and it will make the class project just a small little thing to add anyway, Alright, Onto the next video. 14. Making Our Own Custom Nav in Webflow: Hi everyone. We're going to build this navigation along the top here. We're going to build it together so we understand some of the principles. You'll notice that I didn't end up styling these buttons very much. Why? Because we're actually going to bend this in the end. So do it, follow along with me, build it with me, but don't put too much style into it. Don't spend half an hour getting the Kooning right and the font size pivot because we're going to bend it. We need to know how this thing is created in a simple form so that when we add the easy one from Webflow, we can adjust it knowing what we're doing is we're gonna cover things like float, inline and block elements. So let's get started. Okay, to make our menu, we are going to put in first a section, because we've got a hero section, we've got our boring little sponsors section. Let's add another one for our navigation section and drag it. Remember I can drag it on the page or I can drag it in here. Okay. Up here, kind of get in the right place, probably not inside the container. So I missed it. You can adjust that afterwards. So see you my section here. Actually I want to inside the container just above the hero. Look at us. Alright, I'm gonna give it a name. Okay, while I remember, okay, you're going to call this one section. This one's gonna be called my nav, Enter on the keyboard. Because we're going to recreate this on my mock-up here. Maybe you can pick your own colors in urine styles, in your own fonts. So let's make this background color, start with that. So remember I've got online killed up. Maybe that's Option or Alt on a PC, option on a Mac. I'm going to say with that selected, I've got my selection nav, background is going to be some sort of dark gray. Excellent. Let's add an image for the logo. So let's go ahead. Let's go down to image, okay, and just drag it inside. Perfect. Now in terms of the logo here, I'm going to click Choose Image. And let's go and upload one. Now, I've got one that I'm going to use and I've got a generic one you can use. So under Club event site, go to icons. And I've got, I'm going to use icon click. Okay, it looks like that. You can use Go get your own icon, try something like icon finder.com and look for the free ones in there. You can find your own logo thing you can use for the moment. We could draw one in Illustrator. We'll figure out where x, t, or just use one of these two generic club icon. Another generic club icon in the moment, just use the 64 pixel one, small one. But I'm going to use this visual kayak one because it's the one I'm building. We go Kayak logo in. I must have changed the color. Somewhere along the line. Our notes payable now, size-wise. Okay, it's weird, but sometimes you can't drag it and list. This is closed. That seems to be intermittent. And what we'll do is we'll add a class to this image. So I'm going to say this is my image. I'm going to use uppercase I, image, logo. And I'm going to say this has some, what will padding and margin do not lay out the spacing. It'll do the same thing. Okay, so padding and margin will look the same. I'm undoing. Okay, so I'm going to use margin. Alright, roughly. Sorry about that. I would like to add my little buttons over here. So let's go to add, let's add some buttons. Let's go one button, get it in there. You're like, how did we get it over here? Okay, so the way to get that over here is something called float. The button selected. I'm going to say you under Position, have this thing called float. I'm going to float him to the right. Okay, like write a line, but for objects, it's going to float him to the right. What happened? I've added a style to this button and I forgot to add a class on purpose. I forgot. What can we do? It's already created this one for us. That's okay. I can live with that. I'm going to call button once a company called Space nav. Now, what was my tics and this one, I'm going to have past events, sponsors events. So this one here is my big one. Events. Let's go to Vince. I want another one. What we can do is just copy and paste. So I've got it selected. Command C V on a Mac, Control C V on a PC. You can actually hold down the Option key or Alt key on a PC and just drag them out. Actually, it makes a duplicate two, it's a bit fancy. So at three buttons, this one here, I can't remember, was sponsors. Sponsors. Again, this one was past events. He's button to probably too closely named. Anyway, we're building our nav. So let's preview it as we're going through. So have a look. Okay, it doesn't go anywhere yet because I don't have those sections, but I will. Yeah, let's do the spacing on this. That's an eyeball off. So I'm going to say second it on one of them. And because it's applied, it's on all of all of these because I copied and pasted button, nav button, nav, button, nav zone, all of these things. If I had a button now a new one I had in there. Can you see it doesn't get the same thing applied. And you like actually, hey, what if I go over here and apply button nav? So can you see here, if I clicked in here, I can type button nav and it would work. I have to be exact same. But now, yes, it works. It's easier though, just to click on it and click in here and it goes, hey, this existing classes, Dan, do you want to use one of these? Like I do. I want to use button nav. And if you've got 1,000 of them, which you might do in the end, you can start typing them, but image and you'd just showed you is your immaterial image logo. That's the naming convention that I like because it makes it easy. But I've got button. I've only got two of them, but at least it cuts it down to these two. Nice. Okay, so I'm gonna get rid of him. I'm going to style these guys are only need to style one. So I've got them selected, doesn't matter which one. Okay, I'm gonna go into my spacing and I want to push it down from the ROI, push it down from the top and away from each other. Okay, So how do I do that? Is it margin or padding? Just drag both. Then? There's gonna be a bit of this. I want some margin on the sides. Now if you want more space inside of the button, now let's say you see my button here has quite a bit of a negative space in there. This one's really close, so I click on, it doesn't matter which one you click on. Now is this gonna be Patagonia? Have we padding Dan, come on. Can you see that? The gray one, it's got 15. You didn't add that. It's grayed out because it's the default. That's what Webflow and web and Jim will have added. The ones that are blue are the ones that we did. I'm going to drag this up from the side and 32 on this side as well. Now, a little trick for styling these things are going to undo, undo again. It goes back to the defaults. If you hold down the Option key on a Mac and drag one side, can you see they both come e because it's doing left and right at the same time. So that's option on a Mac, alt on a PC. Same for the top and bottom. Any one that has a top and bottom. If the right, you can do that. It's up to you. You hold down, you hold down the command key, Shift key, Alt Shift key. I can ever remember. You hold down Shift key. It does all of them at the same time. All of them at the same time. Okay, So here's the Alt Option one quite a bit, the holding down shift, one bit of keyboard smashing. But anyway, we are there. Now. I should go through and completely style them. Actually, there's one more thing before we move on, because we're gonna have been this, remember? So I want to add some text. So I want to add some text here. I want to show you how you build it. You already know this. I spoke at the beginning, but I want to show you how it was built on your own so that when you get given the, the was it called the element that is a component ready to drag in and how to adjust it. So let's add a bit of text and this is gonna be interesting. We've added headings and paragraphs which made sense before. I want a logo, there's no like logo ticks option. If you're unsure, if it's, if it's none of these, There's this one takes block is generic block of text. That means nothing really. It's not, the browser doesn't think it's hitting special or all. Hey, this is the article and the paragraph very special. Well, the main guts of it. Okay, if it's just supportive ticks and you can't think of what to call it. It's not any of these to drag this and just to kind of like a really basic unstyled block of text. And let's type in your look at your brief. And what was mine called? I put mine in caps. Dear. King club. It's putting yours. What do we do here? Have a little think about it, pulls it like, what would you do? What would you start clicking on? What terms bubble to mind. We looked at it before and it was to do with the layout. So I'm going to click on this and he is the name, it's hidden in the name text block. Block means it goes all the way, clears a space for himself. Nobody else can be on the same line as them. But we can say, Hey buddy, under layout, I don't want you to be block, I want you to be inline-block. Get in line. Okay? And it's given it a class because I've added a style to it which is layout display, inline-block. Hey Kate, I don't want that. What I want is I'm going to call this one text. I'm going to call it logo. And I'm going to say you are using the right place, job done. I'm just going to style them now. I'm gonna get spacing. I'm going to add some margin to the side was the wrong way. Okay, I'm gonna go to my typography. Okay? And I'm gonna go to what am I using? Can't remember Roboto, I think No, we're using Open Sans or is it? There it is. Okay. I'm going to use the bold. I'm going to use the color of white. Will do the red stuff a little bit, but that's kinda the right size as well, based on my mock-up, but we could change that. Cool. So sometimes the default is right, okay, like this image here, just kinda, well, actually this textbox here is set to display block and we needed any pushed down the next guy and then we wanted that. But then sometimes you're like, No, we don't want that. We had the image. Remember it was in line, but it wasn't where we want it. So you push down, clear a space, pushing this guy down. Alright, all this work. And you told me at the beginning we're going to delete it. Why? Well, it's because you don't have to, but we've been working on a desktop and we've kind of just hinted at these other different displays. But if I get down to mobile jiggles and doesn't quite fit and you want the little navbar nav sandwich, the little three lines that you can click and drop down. Everyone loves that and get that going. There's a bit of JavaScript. It's, it's breakpoints. It's not hard, but it's way easier to let Webflow do it in me, even as an advanced user, I'd still just use the pre-made one in Webflow, but it is super handy knowing how things like float and inline-block work first when you start modifying it because you dump it and you're like, I want to change everything. And it all falls apart and you have no idea why. So now we know how some of the structure works. We can use with a bit authority, we can use that nav component. So let's go in business and do that one. Now, I'll see you there. I'll see you in the next video. 15. How to Make a Mobile Friendly Burger Menu Nav Bar in Webflow: Hi everyone. We're going to rebuild this navigation at the top. We're going to use the built in component from workflow to make it super easy. We're going to style it to how we want. And it's going to do the nice thing when we get down to mobile, it's going to change to this burger menu with a drop-down without us doing anything. Alright, let's go and make it in Webflow. Is he ignoring how bad it looks? Totally m We'll get to that. We will. Okay, what do we do? This old one, we could select our section nav. We could say actually, it gives me an excuse to show you this. We've looked at display, block and inline. Look at this one, says none, Okay, and click on it and say none, and it goes away. It's still there in the code. Okay, Just the browser can't see it anymore either. So it's no real point of having it okay to turn it back on. What you really want to do is click on that or that doesn't work, you got to go back to what display sitting you want, okay, which is now case block. So it pushes down his buddy underneath. Alright, so I'm actually just going to delete it, select on Section nav and go away. I need a I can go to here and add my or is it my navigation bar? And it will actually be pretty much fine if I edit above my, my section hero. I gotta inside my section here. Okay, never goes above section here. It'll work just fine. It's better for this to be inside a section, not 100% essential, but the browser and the search engines want to see your different sections. And it means we can navigate lot easier. A lot easier. Because not a word. But you have, you seen those websites where there's an error says go back to the top. You can click on the button and save. Go to what section we can say the nav section. Go. So let's put it inside of a section. So we're going to add a section, you section. I'm going to put it just above my navbar and then I'm gonna put my nav. But in side. Here we go, nothing is changed except I've got this section. And the section I'm going to call section nav. You're like, hey, but we've already done that. And yeah, we just use Section nav. We could, if this is the first time you're doing it, you're gonna have to make it. But because we already made it, there you go. But there's thing called section there already to go. You'll notice section now has a background color. That's not doing anything. Why is it not doing anything? It's because the navbar has its own color and it's overriding it because it's more specific or it's over the top of it. Okay. It's actually gray in the background, but we can't see it because nav bars on top. So we can select our navbar and either go nav bar. You are completely transparent, this one here. So I can see through to my sections nav or we're getting in the weeds here, aren't we? We're learning. All we can just style the navbar. There's no real difference here because I've already started. I'm going to make my navbar transparent and my section is going to bring my color through, which is my dark gray. Alright, let's have a look at what's special about this. The special thing is, there's two big special things. One, it's already done. I can put my logo in here. I've got some buttons already to go. Net saves me time from adding buttons floating it left, floating right. And that also when I get down to mobile version, I look, these are already a bit of JavaScript that switches that out and changes it. Let's have a look at preview which says I can click on it. Or that sort of stuff is done for us. Css actually switches that out for this little icon. And then some JavaScript does this lovely drop-down, but it's all done. Okay, I'll go back to desktop and I'm going to go to my preview off. Let's have a little deconstruction. So we've got this first chunk is just called brand. All it is, is a container that they've called Brand Webflow and they've made it linkable. So if I dumped an image in here, it will be one of those links that links back to the homepage. Thank you very much workflow. What they've also done is they've got a bunch of buttons. Okay. So the button, button, button. And we know how did they get them on the right-hand side here, you're like, I know, hands up, you know, the back. What was it? Float, right? Great. So it's going to say you are floating two, or is it under position? There it is. Float to the it's not doing any float. Don't float. Why is it not floating, Dan? You promised us float would work. What they've done here is there's this container wrapping it all up. So these mild buttons. Okay. That's what I did it too. I applied to float to these buttons. What they've done is just to be cleverer, is instead of doing it to all three of these at once to the wrapper, we put this wrapper around the outside, okay, and in this case, this is coal made it using this thing called a diblock, which is like a generic wrapper, which will do this house in bits. But to have a look, Let's get back here. They've got this generic thing, they've called it and have bought and I've seen you float to the right look and everything inside of it goes. We'll flip to the right to, I guess, because we have no choice. The navbar goes flying to the right, dragging these guys inside along for the ride. So they go pre-made. But we can understand how it's made a little bit. We can make new ones by copying and pasting them. Nice, okay, I don't need them. The last thing I want to show you is this brand chunkier. It's a container that has a link applied to it. Thank you very much. Workflow. And what does it doing? I said the cog, why isn't working? It doesn't work because there's just so much that needs to come out of this that would be massive. So what they do is, this is my assumption actually might be broken. But if you see the cog here, I've got it selected. There's just so much that they've done for this menu that they. It's not really an easy drop-down. So they've just done nothing. You got to click on the cog over here and you can see there's my link settings. The moment is linking to a URL. What I might do now because it's my put my logo in there. I'm going to say go to a page. Which page? I've only got one page home. And it's good because when I duplicate this whole website to do different pages, it means that it's going to always, whenever you cook the logo, it's gonna go back to the homepage, which is pretty typical of websites. Alright, I want a logo in there though. It's not particularly hard. We've already got a logo from earlier. Okay. Whatever your winners. So my assets panel click hold, drag it inside, check that out. When inside, I'm going to adjust my size, which doesn't work when that's open some other time. Okay. And the go so there's my little logo. I am now just going to go start styling stuff. So that's it. If you want to carry on, I'm going to basically do what we did already, okay, In the last video. So I'm gonna go through and push this around at my logo text, at my buttons. That's why this video is so long as that little bit of just doing stuff. If you've got nothing else to do or you can't reach the Skip button, you'll get to watch me solid. Let's do it together. So my image, I've got all my styles. Sometimes you're like, where's all that stuff gone? There it is. I want to put some padding around it. But hopefully, remember I did image a logo one from last time, saving time. Same with these buttons. Are these buttons though? They're not. Can I apply that style for them? Let's go button. Nav. We totally can. It didn't bring the color through, but we didn't add the color last time. Awesome. Okay, So we can still reuse that button nav even though we deleted the last navigation. And that's an important point at if you create styles and they've used them, they'll just hang out. We'll have to clean them up towards the end of the project, but they don't go away. The Persistent, what do I wanna do? I want this one to be green and actually I want the spacing to be taller. Taller. Both sides, Haiti to both sides. Same time. Yeah, that's right. Hold on. The Option key on a Mac, alt key on a PC. Something like that. I want my background color to be not typography. Background is going to be that kind of greeny color. You pick your own. I want the button to be the ticks to be. All right. That did not work. What I have selected, I had the buddy selected. It's not what I want on this button, that button nav here. I want the typography color to be white. There we go. And is that kinda what I want to have a look? Wanted to be caps. We know we can do that. So tie work, feet and up more type options, caps. I want it to be also owl, Not great vibes or impact. Impact does the Comic Sans of Webflow don't use it? You can use it. That's fine. We're using no area, we use an Open Sans. Let me go. Here we go. Okay, so now I want to do is apply it to all of them. So you have got a style called button nav. You've got a style called nothing. So it's GO button. But nav U2 button. There we go. I want to change the colors of these ones. It's going to require combo class, which we'll do in a little bit, but let's just leave them for the moment. I'm not gonna do the hover. I'm going to add the heretics over here. So we've done that before. You. When I say heretics, I mean the logo text. So I'm going to use a text block, none of these other ones because it's kind of generic text. And hopefully, where did it go? It is we don't want to do I want it like this. The brand which has got this in it. Then inside of that brand linkable thing is got image and then do I have it afterwards? Okay, which is kind of freaking out or do I put it after the image? I'm not sure. I'm just going to see what it looks like. It's kinda in the brand. So it's in the box brand. You see there, but it's doing something a bit weird. How do we fix that? We're going to have a look at our position. So we're going to say the logo is not letting it play ball, or the textblock is not doing it one or the other. It's tried to take spot because I'm guessing and I'm pretty sure that under or it is it size? No, we won't display whereas I'm gonna have to scroll up here it is. Display. I don't want to be inline-block, I want it to be, I don't want to be block, inline-block. There it is. Cool. Now we can style either the logo to have more padding on the side or this bit of text that says kayak club. And I think we already did style. It's created a stock with textblock. And this is an interesting one because it created that for me because I wasn't, because I changed the display. So I said, Alright, you didn't make a class. I'm making one for you now in the position where the last video actually made one. So I want to apply that to it, but I want to get rid of this. What do I do? Okay? I want to remove this class, okay? Because I don't want two of them. I want the one that I already made called what was it called? It's called text logo. We already did it with inline-block, didn't we? So we deleted the automatic wine and kinda went back a step. I found the one we want and it's done everything we need. Happy Days, cool. Alright, beautiful. Ish. It's getting close. I want to grab this one and play around with the margin. Jeep. Top, be the top and the bottom of the same. Alright, so that is it as good enough for the moment and it's coming along. We added navigation. We were learning terms were coming more web designers, you know, terms like display block, inline-block, floating. Fancy. Alright, fancy. Let's go to the next video. 16. Production Video 1 - Building Support & Next Event Sections: Hi everyone. Welcome to the protection video. What is a production video? Well, it's a point of the class where I actually need to fill out some of the details here to build a website, but I'm not using any new things. I'm using existing techniques that we all know and just putting them into practice to do repeatable stuff, I'm going to start some tags, put some images in style tags put some images in. And there's just a lot of repetition in this one. Not a lot of repetition, but more of putting our skills that we know into practice. Now, I could do this and not record it and just surprise you with it. And some people would be happy with that. And some people were like, I want to know how he did it even though it's the stuff we've already done. So watch this video if you want. That's what these production videos or skip them. If you tried to make sure there's no new techniques in here case you're not missing out if you skip it, Okay, so I won't be angry if you skip it. But my advice would be watch, See how I make these things problems I run into and how I fix them. That's why this one's a bit long because we make a couple of different boxes. There we go. Okay. And copy these two things. So yeah, Production Video. Follow me. Okay, so let's begin. What I'm gonna do is I've got this demo, this thing I'm working off an example. So what I'm gonna be doing is you obviously can do your own styles. And what I'm gonna do is copy of my design. We'll cover how to get it exactly out of some other design programs that are wrong with the moment, just going to do some copying. And I'm going to move mine so I can see bit of both. The one thing you might be on a smaller screen and you might be like, I can't use this thing totally right, that's why it automatically goes back in. If you are like, yeah, you put this and it just covers too much. Yeah, sorry. You need a bigger screen. You can get around that by going up here and saying, it doesn't scale your website down, but it scales your view of it in, put it down to 70% so you can see more, okay, and then you can use this thing so it stays out. Or is it that one? Yes. No. Why did you staying out? Expand your browser? It won't stay in. Here we go now, Well, I didn't realize that whether you go, we all learned something. Browser needs to be a certain width for this thing to be able to pin to the side because there's not enough room, alright? But you can also still lower this down if you need to fit it in. Okay, you might be designing on a really small screen and you just needed to get it smaller. I'm going to get mine down smaller. It doesn't change the preview, which says when I get to preview, it goes to the right size, come out of preview. Fortunately goes back. Sorry, it's dwell styling. So what next thing we wanna do is let's work on this sponsors. So first thing is to change our background color because it's just kinda dark gray here. So what we do is we start our body, which is everything. And we say the body has a class, buddy. Okay, I'm going to say this body has a class called body and it's going to have a background color of, I'm going to toil slows down a background color of not white. I'm going to use, I'm just kinda looking at it. It's kind of a bluey gray. There we go. Bluey gray color. Here we go. So that my sponsors can do a couple of things. It can have a background color of white. And I'm going to add some spacing. I'm going to add some margin. Here we go. I'm going to add some text to it supported by, okay, so I'm gonna grab my plus, I'm going to add, this is gonna be a hitting. I'm going to use these like little heatings all the way through. Now looking at my hierarchy of headings, this is my most important one. This is my, what's called an H1. H1, most important hitting my H2. I should probably, because it's the next thing I'm doing. I say Alice is gonna be my H2, but it's not the most, second most important bit of information on my page. Google's algorithm will look at it and go, Hey, what's the most important? If your most important thing is this, you're sick and most important is next event that's not particularly useful for search engines. The second most important bit of information as a heading is actually this river event. Okay, so I'm going to skip H2 because I'll do that in a little bit. And I'm going to say, I want to hitting, I'm not making sense in mind. I'm making a hitting here. That's gonna be h three, even though I'm kind of nixed as H2, but I actually want to save that one because it's, this thing here is more important. So I'm going to use H3. It's got some default styling. I'm going to say you, my friend, I'm going to call it hitting three. I'm going to do some things. I'm going to pick a bit of typography. Typography is going to be amusing. X0, font size, guessing about 26 ish. Okay. The color of it is going to be this kind of 3D color. It's kind of a pinky red dish. Like to fridges Nuclear red, not pink. Here we go. And we need some padding around. It's changed, the text double-click it. And this one is cold, cold, supported, supported by I want some padding all around it. So what we're do it too is we could do it to the hitting, but what's a better way of doing it? That's right. Do it to the section that it's in. Because there's lots of things in this section that need to follow the rules of the spacing. So I'm gonna put in what does this one, okay, I want that same spacing there. So let's go to this. Section hero. I'm 73 from this side, k and 53 from the top. Let's see what we want to copy my section. I wanted to go margin, actually padding. And the margin wise, I wanted margin 30 is perfect for me. Let's do some padding. Let's go something like that. I'm just eyeballing it from the mockup that I've got. And the bottom is gonna be the same. Remember, margin, push it away. Heading pushes the inside. Probably need some more bottom padding. Now, how can you do top and bottom at the same time? Okay, You remember, hold down the Option key on a Mac, alt key on a PC and they will match. And you might notice that actually this isn't perfectly in the center, is because this H three has its own little bit of margin. He see, he comes with just his own margin without asking some of the elements that you drag in from here. Have some their own settings like a button, a button does some stuff is blue. I didn't tell it to be blue, but it comes with some default stuff that we can override. So we can say actually this hitting three, we can say, I want it to be zero, not 20. I want the bottom to be zero. Now it's kinda perfectly in the middle. Now it's ruined my eyeballing. It's like clicking this section. We're going to say actually holding down my Option or Alt, drag out one of them. Good enough. So now I need some images underneath. So let's grab our images now. We've got a few to bring in. So let's do the few bringing any chick method. I've clicked on my assets in my exercise files. I've got some in your exercise files under club events. They're not actually in there. Let's give them a name. Inside of here. There is sponsor 12.3. So what it can do is just drag in all four of them. You can all use these sponsors. Okay? And then I'm going to, what we've done in the past is we've said now add an image, drag it in, and then choose it from here. And that totally works. But I'll show you, it's actually just easier to go straight to the Assets panel and say actually just bringing this one up in the wrong place. It's alright. Let me go. The next one That's AU is next. Little bit big. It's okay when you're dragging them and you're like, why, why is it going above? Ed is weird. It's just the way the flow of code works. Sometimes you've just got to either just dump it in and move it afterwards or just keep it on that blue line because he's just jumping around the place. Theories. Next one, let's bring in Who's next. This one. These are just various logos are made from various projects. And you can see it's actually quite easy to do it here as well. So let's do it on this one rather than on the document. It's the last one is CSS grounds. That's the GAG for this t-shirt that I'm wearing is that we're coloring in. That's what I feel like I'm doing. Anyway. I'm taking my design and using CSS to color in with crayons. It's like a big adult coloring in version, but you're doing encode or at least workflow. Cope. So I've got my images, Let's shrink them down. So I'm just going to click the one. You're a bit smaller to get them all the right size. We go. Seems about right. By default this hitting three is blocked, so it pushes them all down. And by default images member are inline, so they will stick next to each other. What I'd like to do is space them out a little bit. So I'm going to add a class to this image. There's nothing. Okay, so I'm gonna call you image. I'm going to call you image sponsor. And this is just going to have some list of all of them. I'm going to add it to this one. Where has it type? Can you see it on any existing classes? It's only showing me a few days if I go in. I am. Okay. Hey, Angular sponsor. There you go. Sponsor. You sponsor. Here we go. It doesn't matter which one I have selected. I can say I want them all to have a little bit of margin on both sides. It's a holding down my Alt or Option to kinda getting it so it doesn't break on to the next line. Yeah, looking good. Next thing is I need another section. So I'm gonna say new section, section, section. You go, it's gonna go underneath you very much. It needs to go inside of my can go inside the sponsors one, but it needs to go inside my container, which is tricky to do right? By here. It's outside of it. Up here. It's now gone inside of my sponsors. Can you see? It's still inside my sponsors, but if I drag it to the left, can you see it's kinda, the indentation changes and you can kinda see over on the right, so wrong, red here, it's gonna go inside my container. I go a little bit more lift. It's going to go inside the body, not what I want. Somewhere in there. There we go. Inside my container. Let's give it a name. Let's call it section, and this one is called next event. Next event, intel on my keyboard. I'm going to make the background green now. First of all, actually let's make the background green. I want to show you something. Background is going to be, it's going to be a green color. Now what you can do is because you can see, I can see both of these. I can, doesn't mean to be later in the course, but hey. Use the eyedropper tool. Watch this. I can pick any color from in here, or I can go over here, look, steel that color. There we go. So I've got this section. Let's preview it. That's what happens to the selection. Preview. Gone completely. It disappears because it has no height or width. What Webflow does, because, because we've got this empty section, what in absolute fact is that there is no height to it because we didn't add a height. The height is just magic. And yet because Webflow knows that if you added a section and you couldn't see it until you added height, you'd freak out and run away. So what it does is it just adds this like temporary heightened here so that you can add things to it. And it's not just a complete empty box, no visible signs. Case if you're coding this, you'd add this section and there'd be nothing to see. Okay, so that's why it's kind of that's why there's nothing to see. It's not until you either give it a height by selecting this section and saying, let's have a look at the size. You could say, I want a height of 30 or 300. Now it has a height because we've told it that section has a height. If you have nothing which is lifted auto had it clear it out. You can right-click it. Can you right-click if you right-click that, but you can't. If you just delete it from there and hit Enter, it goes back to default, does it? It does. Okay. I don't know that why? Because this is the way I do it. Hold down the Option key on a Mac, alt key on a PC and click it, click the word, and it just resets it to default. Alright, so now we're back to a box that has no height or width, but we know we can add some of the spacings. So we might use the same spacing as this. So let's have a look. We've got a margin of 3,049.73. You remove a 73? I'll remember 49.30. Alright. What was it? 49. That was 73. There was one you remembering. Thank you. And I can't remember. 49. Alright. It's going badly, people. Alright, so 30, 49, I can do that. Where's my section? Where did it go? It's teeny tiny. Let's have a look. Alright, What have I done? I'm going to select it. I've given it a margin, I've given it a width. I haven't given any. So let's just type it in and see if it fixes itself duty. And then 49. Hey guys, let's come back to life. And the bottom, we'll do 49 as well. Alright, so we've got some sort of structure going. Let's add that title called next event. And what we're gonna do here is we're going to reuse this one, going to copy it because it's got all the styling applied to it. It's the right age three, the wrong text. So I've copied and pasted it for all the styles over, and this one is just called next event. Now, the only trouble with this is the kind of contrast seemed like a good idea over here, but it looks pretty bad. Anyway. We're going to have to live with the eye burning red on green and mix. But I want is, I want this maybe what we decided, I pre emptied it being the H2, so I skipped it. So I'm gonna go, you going to be hitting underneath yet? It's gonna be my H2. And I'm going to give it a hitting of H2. And we're going to say, what is it? It is, Let's do typography. Fist going to be Open Sans. You just type 0. When you've got this open, it will jump to the o's. If it's bold, it's fine. Size-wise, it's going to be a bit bigger and it is going to be white. And it's going to say, you come up with your own event. Mine is there's a river near me. Okay. I can't pronounce the River. Irish. My Gu my ego. If you're Irish, I'm sorry. Some names where I just, I find it really tricky. Mike. If you give me a Maori name, I'd be okay. But anyway, so let's The next thing, Elisa, nicer block elements. So they're all just kind of stacking on top of each other. Let's add an image. I'm actually just going to cheat. Copy that one. It's the same image because that's what I want. I want that kind of like the details for this jumps down to here. And I'm going to add some paragraph text. I'm just going to copy this. If I copy this, this is interesting, so I could copy it because it's the white ticks that I want and I paste it. I'm going to click in here, paste it. Okay, Now it's done a couple of things. It is brought in the style. Have a look at it. These two things wrong with it. The white texts didn't come and this big padding over here came. What did I do wrong? So it's basically nothing I want. Okay, So if you've worked it out, that hero text, sorry, that hero and paragraph texts that we added here it is there. He's got one job in the world and it was a bit close all these down. You can kinda see this, is it here? It's got one job and it's that blue thing. And what it is that we gave them headings. So let's all at board across. Where did the white text come from? Oh, that's right. It came from here. Okay. It came from the actual section. The section says, I've got topography of light. You can go. But this one, the hero section, doesn't say anything about what color the typography should be. Okay. I know it's not because it has got this amber color, which means it's being colored by something. But it's not something that I've done. It'd be blue if I colored it. So I can do one of two things. Looking at this, I've got two paragraphs and I've got text at the top here. They're all white. We're gonna do this red stuff in a little bit. But what I should do is actually go to this heating to say actually don't be white. I'm going to remember hold down the Option or the Alt key, click it to get rid of it. Instead of telling that to be white, I'm going to say the section called section next event is going to be, everything inside of here is gonna be white unless I tell it otherwise, which is this guy, he's a child of the parent. The parent says be white and the child says no way, I'm going to be red. This child doesn't know any better. Nobody told him he doesn't want to be read. So he just takes whatever the parents says. You kinda see that flow. Okay. You style the out-of-box as much as you can and then do individual things to override it a little bit more specific things, specificity. So I always look at this design when I'm working, I'm like most of his white. Let's make the prediction White and we'll do a little bit. If it's half-and-half, pick one of them. It's better than styling this one, this one and this one. So what I wanna do is remove that Hero Texts because I didn't like it. I should have just dragged in a paragraph text from my ad options. But remember, drop-down, I can say just remove this class. Here we go. Now I want two of them. I've got my text. I've got my takes on another document. You just type something out for your next event. You can leave it Loren Ipsum in there if you're not sure what you get learners and this kinda like fake text that appeared, okay, you can just drag it from if you add a p tag, even if you just want to copy and paste at which this you go into paragraph, you drag it in any way, you get a chunk of this stuff, just use it out of it. It's a copy and then delete it. You don't need it. Well, there's lots of online options. You can go get Loren ipsum text from. I've got mine in Figma and an XD file. So I'm going to just grab mine, paste. Okay, I gotta return. There we go. I'm gonna put double returns and for the moment, we'll do proper space after ticks styling later on. The other thing I'll probably want to do is what should we do? Now, I could add a class to this to say the ticks that is inside my section event can have padding at the top to push it down. And that's creating a new class. Or I look at piano got, I've already made a class. One quoted material. And I could just add it to that. It doesn't matter if it's pushing down from the image or up from the paragraph. So I can say you, my friend, It's going to have spacing. Let's have some this 32 at the top. Let's do it. Let's do the two at the bottom. I'm just clicking it to get inside of it. Well, you click and drag it. Here we go, some text. And the one thing as well as this one here, like how did you get that? You could try and split it up as separate boxes, but with that, I'm not sure why editor that the Cohen has made me I'm not a fan of it anymore, but if you want to add that chunk, so select this section. What we can do is we can add a border. So let's close all that down. This is going to have boys. So we did rounded borders. You can do it for sections as well as buttons. I'm going to undo that. It's not what I want. Can you see down here, there's these options. Border. I want a border, not on all of the sides. So let's do all sides first. First of all, put a width and let's put it in ten, just so you can see it. So by default, it's all around all the sizes. You can pick different kinds of borders. I'm going to have just a hard line. And what I wanna do is actually say, I don't want it to all sides. I want to set it to zero and I want to save this side only has a border of about 30, about 50. Another little trick while you're working is click inside of here and just use your up arrow. You see up, up, up, up. If you hold Shift, it'll go up in chunks of 109,000,100.1020. So I use that quite often. There you go. 50 is going to work for me and the color is pick a color for the steel my eyedropper tool. It's not exactly matching just yet, but we're getting there. Other thing is, I've got this padding from the side because it just looks we reading it's very hard to read all the way across the whole website. So I'm going to trim it down. So I could make a class for this paragraph to grab the spacing and say margin goes from the side. How to do it to the side, because there's not much room to go. A little drag it, so that works. But I've had to create a class. It's automatically called a paragraph. I'd call it P next event. But that's a bad way. Well, it's not a bad way. It's just an extra class that you don't need. Because I've got the section of int and I can just add it to this. Drag it, drag. Oh, not imagine. It's the heading. We go, painting goes in. I'm looking at my thing. That's good. Good enough. Alright, that is where we're at right now. There was a few new little things in there, but essentially the same things we've been using up until now, kind of in a bit more of a real-world project. And you get to write along with me and listen to my ramblings anyway. So that is it. Let's get onto the next video. 17. Hyperlinks & Remove Underline & Color From Link in Webflow: Hi everyone. I'm going to show you how to make this hyperlink here. When you click it, it's kinda load another website. I'm going to show you how to style a way that ugly blue and underlined. And we're gonna make it white and underlined. But I'll show you how to remove the underlying as well. So hyperlinks are clickable and they jumped to a website and now case it's jumping to a link to a map. So let me show you how to make it ends stylet in Webflow. Alright, so I've gone back to full screen and can drag my browser out. And let's talk about hyperlinks. What are they? They are certain example and so on a blog post, can you see here and that little link here within the text that the author has decided that it's great to link out to somewhere from here. If I click this, it will go to another page. Okay, I'm going back. There's a bunch of them in here. They use them will offer affiliate links. Okay, so he's talking about things like, Hey, notepads, like totally irrelevant, but I've decided it's part of their kind of monetization that notepads, when I click on it, will go to an affiliate link to Amazon with notepads. Okay. Random notepad. I don't think it's what this person was mentioning, but hey, you can also go to mints and headphones and they all go to Amazon. This one here goes out to Muji, which is cool. Did they have an affiliate program? Don't look like it. Maybe. I love there's some company anyway. So those are hyperlinks. What we're going to do is we're going to get out to go out to a Google Map. So when somebody says down here, click here for the MapLocation. We're going to select it. And what you'll notice if I highlight any sort of text, given these options, I can bold, italicize it. It's not what I wanna do. I want this one here. I wanted to insert a link. Oh, and the blue underlying we love. So that is the link. Let's get it to go somewhere. So I'm gonna go to my maps. I'm going to find my river. Okay. Meg, Meg, me Agriba. In looking at that club, that's the beginning of the river. I want to go somewhere else, but hey, it's fine. Okay. I'm going to share it. I'm just gonna get this sent a link and I'm going to copy it. I'm going to paste it in here. Okay, so here's my link. There it is. I'm going to click on the little cog. And I'm gonna get it to go to take away the hash. The hash is there as a placeholder, you don't need to leave it there. It just kind of acknowledges that it is a link and uses a hash. So it's not an arrow when you click it. But delete the hash, put a Nance. I'm going to get mine to open up a new tab because I want people to keep the workflow open. Big jump out to the map. There's an internal link. Don't have that on. Cool. So let's test it. Let's go to Preview. And let's go to our link. Hey, and it opens up Google Maps to L River in clog attack. Anyway, let's style it. So let's go out of preview. In here, lids stylet. So let's add a class to it. So go to our styles. And I've got it selected. I'm going to say you are going to be a class for hyperlink. Hyperlink. And I want to override the defaults. There's some stuff coming through. You see all of that kinda coming through from the defaults for a link. That's why they're NBA saying, I need to be Aereo and maybe this size, this height, this color, and this takes decoration. That's the first thing we can get rid of. It takes decoration is underlined. I'm going to say, I don't want it on. So let's turn it off by going to none, no text decoration. The other thing I wanna do is I want to change the color to white, please. Okay. But I'm wondering the underlying back on now, it's up to you what you wanna do, okay, so I'm gonna leave the underlying on because it's kind of a universal, maybe that it's a hyperlink, it's going to underline. The blue though is obviously a little bit tough with our design. Now a little bit of foreshadowing for the later part of the course when we talk about SEO. But these are one of the really important factors for getting your rankings for your website is when other people make hyperlinks on their website that link to you. Okay, so our hyperlink or is it okay, is supporting Google Maps, but let's say this was for linking to a supplier for kayaks and saying you should buy your kayaks at this place here, and here's the link. Those are the sorts of links that are really important and what you're looking for and for your website or rank. Well, so sending them out is not so important for your website. But whoever gets these links, these inbound links, like the kayak shop, like in my instance here. And they will love links back to their site. It's kinda like what makes, it's one of the really big indicators for Google. So once you do have your site, one of the things you can do is be looking for people to link to you using good keywords. This is where I had sell to you. If you do like this video, I appreciate it, my courses and that's what helps me. And Michael says get popular. So if you are building a website and it's appropriate somewhere in India to say best Webflow course on the internet. It goes, you Dan, I make that a hyperlink and pointed to this course. Yeah, that's my baking. But so hyperlinks, super important. There are kind of more navigational for your site out, but to get them pointing to your site, is gold dust really helpful for search engines? Alright, that is it. Onto the next video. 18. Anchor Link to Another Page Section in Webflow: Hi everyone. In this video we're gonna do this and I click a button and it slides down to the different section. It's a way of doing navigation on a one-page website where you're not actually jumping to separate pages, you just jumping down to different parts of it. The cold element IDs and anchors, but really they're just fancy page slide navigation stuff. Let me show you how they work. To create that navigation. It works kinda backwards. That's why it's really hard to remember and you'll end up coming back to this video or writing it down somewhere. So you don't start with the button, okay, which seems natural if you start with where you wanna go. I want this button when it's clicked to come down here. I'm going to say this section here. I would like to go to my Settings option. I'm going to give it an ID. That's what it uses. The button knows where to go. Okay, so we're gonna give it a name now. You gotta be reasonably, well. It's just spacing in section called this one's called next event. Okay, watch this. If I hit Enter, it will put her in the hyphens for me seems to be okay with upper and lower, but they just some things like IDs, don't like spaces. So it forces you to put little hyphens and cool. So that's half the work done. Now, we go up to the button and say you, when you are clicked sorta settings. We say, I don't want to go to our website. I want it to go to this page section. And you'll notice that only appears now, even though we've cold things sections, it doesn't care. It wants to see an ID. So that link there, okay, it's called an anchor. It's gonna go to this anchor here called section next event. When it is clicked, let's give it a go. Let's preview it. And let's click it. Re, there's not much down here. Stops. I'm putting more on my website later on, but all that easing is already done automatically for us by the browser and by Webflow, but we're doing it to a section. You can actually edit to anything. You can select this, go to this, give it an ID and say when it clicks, go down to whatever this is. It doesn't have to be a section is just obviously, probably useful. Go into a section and go to an H1 as long as it's got an ID. So let's do some of the other bits. So the contact us we don't have right now, the about us, we actually that's not what we want, is it, what is L? It says past event sponsors events. We've already done this. We deleted it. Didn't we see weight the I'm going to type it real fast. Haha. Alright, so we've got our buttons. Okay, so what I wanna do is when we go to events, it's going to drop down to that section here. And the cool thing about it is I've already got that ID and I want to go to the same place, this button, and that button goes the same place. So I can just reuse it. So select it. I can go into my settings. I can say not a URL. I want to go to a page section and areas. So they both go there. Let's preview it. Here, You guys. Alright, let's turn that off. And what else can we set up? We can set up sponsors. So let's do it one more time. Actually, I'm going to pause. You do it. You wait there. You do it, but you can pause it. Good. Try. Alright, you back. You did it. How did it go? Okay. Have you forgotten? I'll show you if you did make it do what you want. Be proud of yourself, awesome your web designing, Okay, So first of all, remember, it's where you want to go first and settings, I'm going to call this one anything you like that I have to call it section among is gonna be called sponsors. You might have called your supporters getting a bit loose with what I'm calling mine. Okay, so I'm gonna go there, but done. Now, I want to say you go to in page and go to one called, wants us to give it a preview. Sponsors doesn't go very far. But hey, you can tell when we make a longer page, when we're not having multiple pages, we can just have this one page. You can move up and down. We didn't have a past events yet. There it is. There we don't have it will build that section and a little while we'll do these grids down the bottom. But good work. We've done some hyper linking, same sort of thing. These are links, but these ones have cool page slides. Alright, that is it saying the next video. 19. Class project 02 - Create Your Club Page: Hello, good people. It is class project time, not homework. I want you to go through and get your website up to where we're at now and send me a screenshot. So the brief is use your own brief if you're following along with the kayak one, that's totally fine as well. But hopefully you've worked on your own brief you got earlier and get it up to where we are at now at this course, you can push it further if you like. But what I'm asking for is just to get it up to here. So you can choose your own colors, your own images, your own fonts, up to you, okay? These are the prerequisites. You need to have the four sections. So nav, the hero, the sponsor, and the next event at the images, at background image, okay, you need hitting the 12.3, you need to add navigation at the top there. You need that button hover class. I know I'm asking for a screenshot so you can't really show you the hover class, but I'll know if you're not doing it. Okay, that's that rollover event on the button, hyperlink, which is this one here, member on the bottom. Okay. We click it and go to somewhere else. And the anchor links, which is the navigation, where it slides down. Okay, Now, do it while you're in preview, so it gets rid of all this junk everywhere, okay, And also if taking a screenshot, it's tricky when you can't see at all. So what I, what you should do is go up to here. This changes quite a bit. So I'm hoping it's the same style, but if it's not, you'll find it somewhere up here that you can change the scale down. My laptop, I get down to about 70, maybe a bit more, 60. Okay. And then I can take a screenshot. Now, screenshots on a PC, you can do print screen and paste them. You'll have to Google that on a Mac it's relatively easy. It's Command Shift four. Okay, hold those down. You can drag a box on your desktop will be a screenshot. If you're working on something else, or you might have to Google how to take a screenshot on your computer. But yeah, do that and upload it to somewhere. There'll be an assignments or projects or comments section on this website. There are a little bit different on different ones. So upload it there and I'd love to see what you do. Also, take a stab at sticking it on social media. Show me what you've done. We are up to, even if you're like, it's a tricky one because all of these groups are filled with people who had like you who are just getting started. So don't worry about like, oh my goodness, I'm not sharing what I'm up to because I'm new. It's the beauty of these groups is that everyone's new, uploaded and asked for a bit of feedback. Or don't just post and say This is where I met. It's interesting to say everybody's developments see wat group they God, what styles they're doing. Ask for feedback if you want it. It's a great way to start getting creative feedback. If you maybe not used to critiquing work as a designer or getting critiqued. The only thing is, is that I want you to do it to somebody else as well. Even if you're not, you don't consider yourself hardcore web designer. By giving feedback, looking at somebody's work and seeing what you like, what you don't like, what they might do better allows you to get better yourself because you start analyzing other people's work and going, I like that because of that. And you store that away and you go, I hate that because of that. Don't use the word hate. Bit more gentle, but say, I don't like, this is something that everything works because of X, Y, and Z. You can store that away as well. So when you're doing your next web project, you like, Oh yeah, those are the things I do and don't like about web design. Anyway, you don't have to share on social media. But these are the main food groups. The Facebook group is super awesome, that LinkedIn groups really awesome. These ones here, instagram and Twitter are a little bit more one way, but it's cool to see what you do. These groups here, a little bit more group like, but I'd love to see what you do once you let me know how you feeling. Now, earlier in the course, I asked you to tell me, was it be nose and overwhelmed? How are you feeling now? More double nervous, double overwhelmed, feeling a little bit more confident. Anyway, let me know. I'll like scrolling through my social media and seeing where everybody's at high fives and hots for when needed and hugs that people finding it tough. Alright, that is it class project to go do it, enjoy it. I'll see you in the next video once you've done your homework. All right. 20. Understanding Webflow Combo Classes: Hi everyone. In this video we're going to look at what a combo classes. Let me demonstrate it a little bit before we go and make it. So we've got these buttons along the top in my design here. I want actually just this one to be green and these ones are not to be. So what I can do is I can apply more than one class, okay, to update it. It's taking some of the styling from the original one, but the only thing that's changing is background clear. It same with this text here. I want just part of it to be red, so I can click in here, and I've already made these. Okay, so we're gonna make this in this video. But I can say, I want this little chunk Takes red. If I click on this, I've got two classes applying to it, my button nav and my background clear. That's what makes it a combo. Alright, combination, combo classes. Let's get into it. Alright, let's talk combo classes. What are they? They are at the moment we've got like our button here. It's got one class. If we add a second one to it, these two combination, Let's combo class, okay, so we, why would we use it? Good question. Because let's go for instance, let's say our design here has a green button, but a couple of them don't. So we want one kinda bits of it. We want to keep like the font color, font size, spacing. We just want to change the background. What I could do is go you, I could go actually let's remove this one and create a brand new class or from scratch, get it to float right, get it to be uppercase and white and add the padding poor, what a pain in the butt. And then if I change the font, I have to change this plus that new class that I made. This weird combo classes are useful. So what I can say is I want to keep everything, but I wanted to add something to it just a little bit more specific. So I'm going to say you can be button nav, but I want to add another class called background red that I'm making. And oil wanna do is say, all of these are going to say just, that's what it is now going to say actually you are this red color from this text over here you go. Okay, so that combo class is just a little bit more specific gold specificity. I think I just like saying the word specificity anyway. So yeah, we've just gone over the top of it and only just one job design job is to go background rate. We can apply it to more things we can say you also have pre-existing combo class there it is there, I can apply it to that. There we go. Now, I want mine to be transparent, so I'm probably going to rename mine and call it clear or transparent up to you. And I'm going to say actually be this like fully transparent as zip all the way down here. Or sometimes there is a swatch ready to go. They go and they both changed. See that, awesome. The nice thing about the combo class is that now if the client comes back and says, Hey, that font needs to be bold, you can see no problem. I got combo classes. So I can say, click on this one, okay, my button nav. And I'm going to say actually, what are we changing? Topography is now going to be the bolt. Can you see them all changing way? Because they all use button nav. And the only thing changing on these two is the background's been made transparent. That's kinda why they call it the cascading style sheets, the CSS cascades. You start with the body and it tells the website to do something unless something more specific happens, like there's navigations is be in the middle. And then there's navigation says, I remember what it is, but it might say all the text to be white unless something inside of it cascades down and says, I'm more specific, like I want it to be bold. It's going to override and say bolt. And then something even more specific says, I want this button not to be green, to be clear. So can you see the hierarchy start right at the top, the generic stuff and you get more specific and your website will totally work if you have 1,000 classes, trying to do stuff just makes it tricky to update later on. So it's just good practice and it's interesting, I think anyway, let's do another project where we go into make better the tax rate. So let's have a look at our design. Can see I've made a chunk of the ticks red there and the trunk or the tax rate there. So what we're gonna do is we're going to take it a little bit further. So I want this word kayaking. First of all, I think we have a style for the heading. If I click on it, there's no style there. So now I want to style, so I'm going to make one chord hitting one. And I want to do a couple of things. I'm going to make it the XO, I'm going to make it all caps. We've done this before, right? And I'm going to make it the lightweight version. We think we've got a heating one. So I can't make just part of it read for me. I can't say a, you are red because it all comes along this giant block. It's applied to everything. How do I apply something? Just do a little bit of a chunk of text. So what you do is you select that chunk of text and this pops up. So you want a bit that says this one, he has rep with a span. You see a little paintbrush. It's because I want to style just in this it's called a span tag. You don't need to remember that, but in the HTML it's going to put some bits around it so that you can add a class just to this bit. So he's click that. Nothing really changes except we'll look at that. We've got to take span the name. Let's call this one. It takes red. Because why it takes white and blue, it's called TTX, Fred and his job is going to be override what's currently there. There's been told somewhere along in the style sheet to be white. That's why it's MBA, but not this class, but somewhere along there it is. I'm going to say actually go over the top of that one. I want to break from the norm. I want to be a rebel. Children don't listen to their parents. I'm gonna be nuclear. Read, you go. Alright, so we've done that little span tag to style just that little bit. And like we did before, if we change our hitting one, so I've clicked on this bit out here hitting one. I actually, I want you to be not x over now. I want you to be these other funds impact. Can you see because of that cascade or that specificity or I'm throwing words that you just waved design woods. You might be like, I know what that is. If you are new, I'm just trying to get used to some of these things because it makes it health helpful for finding. You've got a problem. You can Google the terms that you've learned, whereas the workflow likes to hide them a little bit just to make things more user-friendly and using human language anyway. So you can see they follow through and becomes red. Nice. Alright, let's do it again. The good thing about once you've done it once and you've got loads of pages, do you can say actually remember on our design here, whereas it, June 8th was red. Same thing here. You can say you, my friend in a span. Okay, and I'm going to add the class of text ticks right there it is. Hey, we've got to us maybe designing. That's the idea of a combo class. You can add more than one to an element to kind of help it along or do something else. So, yeah, alright, I think we got there combo classes, more than one class applied to a particular element, alright, once in the next video. 21. Webflow Grid: Hi everyone. It is time to build grid and we're going to go and build this kind of like three column layout. But you can easily go through, adjust the spacing, just how wide they are, how many columns they are as the more rows, it's all very exciting. Grids are awesome. Let me show you how they work. Undo, undo, undo, done. Now let me show you. Alright, Good morning. It might not be your new morning, but it is mine. I'm ready for action to explain grids to you. So let's get a grid going. We want to put in this, so these little boxes down here, a little past event cards. Okay, so what we're gonna do is we're gonna give it. You could remember we've got our container, we could just dump a good straight into it. There's nothing really wrong with that. But it is handy to put it inside of something fist because we've done it for everything else. We're going to section for next events. We've got a section here for sponsors. We've got a split. We're going to put in a section for past events. So new ad section. Okay. I'm going to put it here that I get in the right spot. Yep. Hanging down the bottom. What's pushing this down? There's a big margin down here. I did that before because it was painfully close to the bottom. I'm going to remove it. Now you can click and delete it. Remember the Option on Mac, Alt on a PC to get rid of it, and we're going to work on it down here. So this section is going to be cold. Let's give it a name. We'll give it a class at least section. And this one is going to be positive means. You can start to see my Miss naming conventions and some of them had looked section, some of them have hyphens, some of them didn't bed down. Okay. Alright, let's get it back in their section. Well, past events, I made it there to say I would like to add some margin for the top and bottom just again, just while I'm working, just so it pushes it out top and bottom. So here I'm going to empty section. Let's throw in a grid. Grid is this one and it is this last option here. Click hold, drag it in. Nice. Grids are awesome and look kind of scary, but then not. So basically, one of the things is when you're editing your grid, can you see anything else grays out during this like magic grid editing mode, you can come out of it by hitting done and get back into it by either clicking this it at grid or cooking inside. Go to your styles and says under here, under Layout, Grid either way. So we're in hand, what does a grid do? It allows us to divide up areas. It's really handy because we get to say, we're going to use the pluses on the ends here and here, not the ones inside of the cells. These are mole compute well, more hardcore, and we're gonna do that later on for the moment. Now let's add a new column. Awesome, okay, you can add as many as you like. You can add a few more rows depending on what you're laying out. We'll use this grid option for our portfolio later on in the course as well to remove them, maybe there is a way, I can't figure it out on screen. Okay, so I gotta do it over here. So have it selected. You gotta be inside editing mode. Click on it. This bit kind of pops out here. You can say Actually columns. I don't want all four of them. I want just three. And over here with rows, I'm going to get rid of The Rose hitting the little trash can. I've just got that. That's what I need. Now we're gonna do even columns, okay, but see this number up here. Like what is an FR? And it's a fraction. It's really handy, kinda like percentages. It's, what it's really handy for is watch this. I can click on it and say actually I want this to be two fractions. Okay, so then divides the space into two. This is two and this is one of them, one of the two fractions, okay, so you can see that division there. I can say that actually this is half of a fraction and it divides it up. Okay? It always spends the whole space, okay, in our case, it is being contained by our container. Says Don't be any wider than this. Okay, notice I couldn't click on that because we're in editing mode. You've got to click Done. Can pick out There's my container. That's what's giving it its width. Can we get back into the grid? Go back into here. So you can divide this up is to all sorts of cool fractions. You can say that is three and it will divide it out for you. Alright, I'm gonna go back to 111111. Let's add something to it because this is a little bit strange. Watch this. I'm going to add an image. If you're following along with your own project, go and find three images and if you know how to crop them so that the same aspect ratio go do that. And like say Photoshop or Figma or XD. But I knew say that if you're like, what does an aspect ratio, if I dump in an image here that are all different sizes, Let's say these ones by putting that one, then that one, and then that one on the same grid that don't match because I want them all to be the same kind of heightened width. We will do it later on. Image, image. There's a section called images level to where we go a bit more hardcore with images and force them to be the right size. But for the moment and go and crop them. Or I've made some past image events, 123, I've made sure that they're all the same. Height versus width. Okay. Go make your own or use these ones. I tried to make them generic. I'm gonna show you a coup. Other trick is I got workflow. I'm going to close it down. I'm gonna get rid of my image. Because what I'm gonna do is I'm gonna show you a really quick way of adding images. You don't even have to have your assets panel open. Just be able to see Webflow and close all this. I'm just gonna go, Hey, can you go look, drop here, there'll be edited to asset manager. Looking them up, they go, Okay, Nice and easy way to add images. So back into my grid. And remember I'm not going to, I'm going to skip the whole adding an image and then connecting it up. I'm just gonna go S8 panel. You go in there. And then I want to put my title underneath my image with the title of the event. This is where it gets weird. I'm going to add my heating. You. I'm gonna go, Where are you hitting you or topography? Drag it in. Great. Pushed it over. All right. Get it underneath. I can use my handy dandy navigator. No problem. So my hitting is gonna get under my images. Though the same. They're on the same level. They are siblings, so they should be in the same grid. What happens with a grid is it looks at individual units in here and goes, I will put them handily for you into different, these different cells, which is good when you're only dealing with images. Okay, so let's get rid of that. Hitting. It means I can go, alright, Where's my things? Is this one as well? And then I'm gonna go another one. I'm going to go you as well and there can just put them in new ones. And then same with this, Let's add another one. I'm going to repeat the process. You can see if you keep adding them. It'll just keep adding them into the very next grid. Thank you. Css grids. But now case, we want to actually have more than just one per unit. So I'm going to undo that. I'll leave all three of them in there. What we need to do is this needs to be inside a rapper, Okay, Something that contains it and hitting together. And what could that be? Okay, you can do a section. We know that section's can't live inside of each other. So what do we use? It's this one here. It's called a diblock. Div block is just your generic wrapper that has gotten a styling. All it is there as to kind of like a rubber band to keep everything together. Section is actually a div tag. Div. That's a div, that's their old divs. But these ones have starting on this one here does nothing. It just has this like empty wrapper. This is a div as well, but it has a link applied to it. Div is the kind of underlying thing, division of space k or division or divided block. I'm going to add it randomly. Okay? So here I've got this div block. Okay? I'm going to put my image inside of it, which is a little tricky. You need to get it. So remember, it's kinda like this, it's kind of like inside of it and it'll be a little bit tabbed. It's hard. You can't really drag it in here on the on the Canvas. Hey, you need to do it over here and then navigator, I've got a div block with an image in it. And now I can say, because it doesn't do anything, it just know it's wrapped around the edge of my image at the moment. But if I add something else inside of it, so my hitting, Okay, I get it right. I'm kind of at least they're in the same cell. You can see my heating underneath. And we gave too often for these, well, they've called cards. These little units may be features or past events or recent blog posts. These are like little unit cards. If you want to use it in a grid, you have to put them inside a rapper. In this case, it did block keeps them together. So where do we go from here? Do a delete these and duplicate that all decisions. Let's do the div blocks I've just selected over here, copy and paste. I get a new one and I'm gonna get, you go in there. You go over here. You go in there. It's hard to do it with a grid on here. So you don't actually get to do it. So I got one div block with an image and a hitting. Okay, I've got an image hanging out by itself. Delete him. I've now got a div with an image in it with no hitting. It can get confusing. I'll leave this in because you'll get lost too high. It's easy just to get rid of these images and copy and paste that IP block. There we go. Let's switch out the images. Easy way, just double-click it. Replace image. I'm going to pick that one. This one. It's kinda generic anyway. So we've got these guys are now grid inside their own little wrappers div box to keep them nice and tidy. So what else about grids and we added, were quite purposeful and we went, uh, you add grid. You can actually transform something into a grid because I want to acknowledge that this is actually just a display and loud display setting. So let's go back to L. So we've got this grid right? And can you see it's set to this we've learned, remember display block. Do you remember what that does? Remember that just pushes everything down. That's the default for a lot of things. And then we learned this one here, inline block, where we did that. Where do we do that with these images or commit when we did that? For these guys, anyway, they end up flowing on the same line. Okay, good week then. This is the other option grid, okay, so it's another layout options. So I could go up to here and say actually the container for this. So the sections called sponsor, I could say, instead of. Using this block, I could see your grid and it just transforms it into a grid in every single unit. And then let's click done is, you know, that was something, there was an element, that was an element. All these different elements have pushed themselves on to, into these different cells like a grid, same thing as before. There's no real difference here. I can add another row and start playing around with it. If you do get to a point and you've put it in diblock and you're trying to lay everything out and you're like, actually I want to just separate them out. You can just transform it into a grid. And same as the same sort of thing is you can say actually get rid of good and go back to the, this one here, the block element, alright, back to block. Other things I want to show you about grids. And the thing is, is that a style was actually created this grid, once you get used to try to catch those styles as they get made so that you can name them. So we made this grid and we started changing and we say, Okay, it's been three across. Not not too. And as soon as you do that, it says, Hey, I'm styling it because I'm doing stuff in the Styles panel. We're doing stuff in here. And it says, Alright, we'll make you a style because you didn't write one. We'll call it grid. You can say you just leave it. The problem is, is if I do another grid and you'll end up with grid 1, 234-567-8910. And that's fine, that we are being given. Good. This is gonna be my grid for, in this case past events. And I'm being quite specific here. If you feel like you've got a grid that you can use a lot of different pages, which is called a grid. That's fine. You might reuse it all. But in this case it's gonna be three across. I might find another one That's two across. And let's look at also the gap between. So you can play around with the gap. You can edit the grid. So I've got it selected. Let's come out. I've got it selected. I'm gonna go to my styles. Actually, I've got my image selected. I'm going to click on my grid. And I'm either going to edit it here or say Edit grid. And I can play around with a gap in-between. So you can do it manually. Okay. And I can use my up and down arrow. Can you see the spacing between them? Changes that linked. Okay. I can do it on the canvas as well. Okay. To kinda get visually, Just Do It. Looks good. Click done. Grids are awesome if you do have in your mind now, like what about Flexbox? And if you have no idea what Flexbox is, don't worry, we'll cover it later in the course. There's a section called layout, Layout Level three, K. And the rule of thumb is if you do have that in your hidden, you like, Hey, what about Flexbox there all the time is they do a lot of the same jobs. They do 70% of the jobs. The same. Flexbox is just a little tricky to understand when you're new and grid is easier to understand when you knew. So my rule for anybody starting off at myself is do grid layout. And if you can't make grid, do what you want. Them looking Flexbox, but they're not really competing. They do a lot of the same stuff. But anyway, I know you're going to have that question. Now. That's all I've got for grids. And you'll notice that the video is longer because I'm going to go through and style the rest of the boxes member in our mock-up here, there's some color and the font needs changing and add this heating at the top here. You can skip along. I'm not gonna do anything that we haven't learned already, but sometimes it's fun to follow along and watch me do it. Yeah, grids over. Now we're going to style these elements inside of this grid. Alright, so first up, let's style the boxes. Want that background color. So I'm going to grab my container. I did block. Okay, I'm going to add a class to it. Because if I don't, it'll lag one anyway. So I'm going to call this one div and this is four, what is it called? Past events. And I'm going to say you have about Option or Alt click to close them all down. Get it back grounds you. And I'm going to pick the color from our font the way using earlier on. Now in terms of this hitting, I would like to have remember it's called hitting. Well, I've lifted at hitting four. Sorry, it hitting one. I don't want this to be hitting one. Why? Because that's my most important hitting and I'd like Google and other search engines to go. That's the most important, Not this. Okay. That's my hitting one. I decided that this is my hitting two, unique, It's good. That's my hitting three. Next most important element. And then hitting for this one I'm going to use here. I'm gonna say KG. You are 4.4 by default is smaller, which kinda suits me anyway. And I'm gonna go add a class to it because it will do it anyway. Let me go hitting four. I'm going to say you, my friend, typography, white. I want to add some padding. So we're gonna go to Spacing and drag out to want padding or margin. It's not going to matter in this case. He's margin. I'll probably do it from both sides. I'm going to hold down my Option key on a Mac, alt key on a PC to get both sides in case the sample hitting. Let me think of something that's about to come up with. Anyway. So I've got my sample hitting in the air. I want some padding on the site in case of bricks to two lines. Alright, now I want to apply it to all of them. So I'm going to say you, my friend, I go into this diblock is going to have a class of div. Past events. This one here. No, not the image. I want the diblock. Okay. I'm going to go live past events. And the same with the heatings. I'm going to say you are a hitting festival. I hitting full. I could leave it as hitting one. And does it appear so if I do heating, does so we can say hitting, we can say it's hitting, hitting four, even though we said being H1 still the defaults from the hitting one, the large font size still comes through. So I'm going to say you actually are cog, H4 saying with you, I'm going to add this one called kidding. Four. Next. Alright, there's my styling. Now I want to add the heating, okay, that's on there. Now, we're not going to use the grid because spanning columns and a greatest possible. But it's just because it's going to cause a lot of work when we can just dump an H, are hitting just above it. So close all these down. There's my grid. I'll close that down to let's get our hitting and see if we can get out hitting in the right spot. Okay. I'm kinda looking at my navigator over there, it's in the wrong spot. I'm gonna go just drag it up here. And this one is going to be, it's got actually give me the same as these. Actually, I didn't need to drag it in and I delete that. I'm going to grab this because it's the right hitting, it's got the right class applied for already. Copy. And I'm going to say you just go here, which is wrong, and then try and drag it out, which is wrong. Let me just use this. Here we go inside my section, but it's hitting three. Now, the trick here as well is I want to seem too, this can add some padding and I could do that by using hitting three class and just say, alright, let's go to ticks the line, topography, text align center. The problem is, what's gonna be the problem you're thinking of it. Can you think of it? That's right. This guy uses the same class. So I needed to be a bit more specific. What could I do? You're right combo class. So by hitting three plus, I'm going to add a tick center to it. Because I wanted to take sitting and padding or margin. So I don't want to call it ticks center. So I'm actually just going to call this one. Past event is hitting plus past event and it's gonna be centered. And I'm going to use spacing and I'm going to use top and bottom. I probably just going to use bottom. That'll go nice. I've got some giant margins at the top here because I just wanted to push the page along. So I'm gonna give my next event section and say, actually where's it coming from? They're coming from this is coming from the section. No. Where's my giant padding there it is the adjoint margin. Okay, so I'm gonna put that down. What have I done in the past? Let's have a look. I'm trying to work out what this is. I'm clicking on it. It's 30. Is it There? It is there. So I'm going to say section past events, you are also 30. Leave the big bottom-line on until I do a photo later on. But that works for me for the moment. Anything else? I think that's it. You change the text. Past events. Nice work, Dan, nice way. Q2. So style yours. Let me know in the comments if you run into any troubles, but for now, let's leave it there. Nice work grids. Grids are awesome, super handy. There will be limitations to grids that you will eventually find. And we'll fix those with something called Flexbox, which will do a little bit later. Alright, onwards. 22. What is Responsive Design in Webflow: Hi everyone. This video we're going to talk about responsive web design. We'll talk about what it is and how Webflow deals with it. So first, what is it? It is basically just when a website responds to the browser size or the device size. I am on a big screen here when I'm recording. But let's say I'm looking at my iPad. I shrink this up. Okay. Can you see it changes depending on the size? So if I open this up on a screen that's maybe a smaller laptop, can you see Dribble has decided that for, for big screen, okay, and they decide to cut it down to three for a medium screen. And we're gonna get down to something like maybe a portrait tablet. I'm viewing this website, dribble.com on a, on a tablet. It's going to cut it down to only two plates loud. So they're adjusting the layout to respond to the device that it's on. Responsive web design. It's layout, It's fonts, it's images. There's all sorts of things you can address. These have a little look, get down to mobile. You can see it goes down to one column. Have a look at one more apple. So at a medium screen, okay, it's on the left and the MacBook Air is on the right. And then if we go down the smaller look, they change the structure of it. Then down here you can see a big jump. See the fonts change for MacBook Air. And same with the charity logo up here. Everything just kinda lays out differently on the different options. So how does it get applied to it? So workflow tackles it by doing desktop. First, you design on desktop, and then you design for these other styles. So what happens is you design on the desktop and then you adjust for these different ones. This is your tablet. This is a landscape phone and that is portrait phone. You can look at it in the preview option as well, okay. Make sure everything's working properly. So desktop, you can kind of see what it's gonna look like and how it breaks down pretty badly across these because of that padding that we stuck on. So we're going to adjust that in the next videos. If you want a specific size, you can drag it and you can see 360, you can type it in here, whatever size you want to look at. You might be working on a device that your device, I've got a Google Pixel. I can type out whatever width that is, so I can preview it on my screen here or just drag it out and just see how it breaks down. And now is pretty poorly to start with. If you do have the question of like, why can I design or can I design mobile-first? You cannot in Webflow, workflow is a desktop first, design design and desktop and then change it for these other ones. Is there a way of switching it around? No. Not at the moment anyway, I doubt they have plans to. They're basing it around desktop design and then moving out to these mobiles. So it is best to design a desktop first, get everything you need in there, and then work out the mobile afterwards. So that's responsive design and responds to the device size. Let's go and actually start working on that in Webflow in the next video. 23. How to Make Webflow Responsive: Hi everyone, time to make Webflow responsive. Look at this title, look at this padding on the side here as a, for instance, this is my desktop view. It looks fine. But when I get down to, let's say tablet, Let's wait for the break point. Can you see it changed? The padding got smaller. Let's have a look padding, massive padding on the tablet, smaller and the font size got smaller. Let's look again. Let's go down another breakpoint, K2, our next smallest size. Let's go get that. The font bigger, smaller. Okay, so this is the responsiveness. We're changing things depending on the device size and get down to mobile and watch what happens. The font gets bigger, no way. And we make it centered. We're gonna do it with the images as well, which those images can flow onto different lines. We'll play around down here as well with this next event. Eventually a Mobile outlook. Just get rid of it because it was a nice design element that worked on larger sizes, but mobile, we just got rid of it. Alright, responsive web design in Webflow. Let's do it, okay? First of all, let's look at how good our responsiveness is. Is not good or bad or responsiveness at the moment. So how it works and Webflow is, it's just not fair. So you're going to start here. Don't be adjusting your phone stuff and getting it ready here. Because there is something called deceases flow. What happens is there's these things called break points. These are called breakpoints as a desktop, can you see it says base. I can't point to it, but you can see just under my cursor here, that's the base breakpoint. There is something for that size. They say tablet, but it's not really for a tablet, it's just for a screen size that happens to be rendered at 991 and down. And then you can see all the different sizes here for different phones or devices or anything in between. So what happens with this flow is if you do anything on desktop, it flows through all of this, which we know because we've got that padding, which is the big kind of weird thing. We added it and the desktop, it made sense to have this giant margin over here, but it doesn't make sense. Obviously, on mobile doesn't even fit. So we don't jump to fixed mobile. We've got to fix all four of these breakpoints. So we're gonna go here because I don't want to show you is if I change, we'll just do this. Hitting ticks will do something simple. So I've got this thing called hitting one, not disliked little span tag. Grab that big chunk of it. So we're hitting one. On desktop. It fits. There's a lot of room. It's lovely on here. It's getting a bit tight. So what I'm gonna do is just to really small font size, change Vertigo to class applied to it. Handy. Okay, and I'm going to say, I'm going to close all these down. I'm going to miss with typography. Typography, you see these things that Amber, it means that the styling is coming from somewhere else. It is actually coming from. If I click on it, it says, Hey, I'm getting my values from somewhere else. I'm getting it from, see this little icon. I'm getting it from my H1 tag, but I'm getting it from, see that little icon matches this icon up here. Okay, so that's where he's getting a styling from. That's why it's not blue. Back here at desktop. It's not blue. Wasn't a blue. Anyway. Where is it getting it starting from? It's getting it from the H1 tag, a generic one. Ignore that. It'll become clearer later on. So it's getting it from the desktop. So I'm going to override that and just say a little bit smaller. I'm using my arrow keys, just clicking down until I'm happy with it on that tablet size. Now let's look at phone horizontal or it doesn't fit even breaks into two lines, so bad. So I'm going to say here, let's hover above it. This is going to make more sense because this is Amber. It's getting its styling from, it's getting from the heading one style on the tablet. Let you go. That's where it's getting its starting from. So I'm going to say you are going to be even smaller. I'm using my down arrow. And then who's visiting my website horizontally on a phone though? Don't think that there's screen sizes that are just the size. And let's look at mobile portrait. Okay, and I'm gonna make it, I'm going to actually make it bigger. You're like What? Bigger? I have to make it bigger. Okay. Because I have to break on to two lines. So I'm just going to own those two lines and make it nice and big. So let's do a little preview. Let's go to our little preview mode and have a look. So desktop, okay, it's the size tablet. It jumps, downsize and watch this. I'm just going to drag it because it's fun and more interesting to see the breakpoints. So it goes, What's this a drag it bigger. It's going to get back up to desktop, drag it to go to tablet. And eventually I'm going to get to, that's why they call them break points is going to get here and get to go snap. Okay. So it's going, you can see it changing up here. When I drag the slides, can you see the changing gets even smaller, but it's trying to occupy, there's quite a range. Can you see it doesn't look really good, they're just gets smaller. But it's occupying this pixel range between these two different limits. So there's all sorts of screens. That's why responsive web design is tricky if you want to be pixel perfect, basically can't. Okay, So it gets down here and eventually it goes boom on mobile phone and a massive, okay, and all these different mobile devices, it's kinda interesting as well to look at the different device that give you some suggestions. Watch this. Let's turn that toggle the preview off if you drag that slider in here. So go to one of these other ones. Anyone? And drag this slide at different from the previous on. We're just in the design and now watch what happens. Can you see it on the bottom? There's all these like watch, I'll drag it. You keep an eye down there. Can you see it? It'll show you all these different breakpoints and kinda snap to them. So the Kindle Fire. So if you're developing something that is specifically for the Kindle Fire, There you go. Okay, let's go out to a bigger size that you go the Surface Pro. At Microsoft. You can go down to these different ones and you can go even smaller. Like let's go to phone. Let's have a look at the different ones in here. You can see, you can plan your phone or your clients find that's probably more importantly just to make sure it's looking good on the person who's gonna be checking it. Okay, so let's have a little look. What do we got was my one, pixel three, I go gotta pixel four. Can you remember? It's ancient anyway? So there you go. That's what it looks like on my phone. Okay. These on the larger iPhones, big maxes, and you get all the way down to like the NES. I didn't believe that I was like No way I had an NES or at least a friend had one. Googled it and yet it was 256 pixels. And that was the resolution was lovely. Good gaming console. Anyway, I was more of a Sega Master System kind of dude. Anyway. So that is our Responsiveness. We've done it for the title. You can do it for anything padding, color, size. So that's kind of it. I'm going to go through and style my site. I'm not going to touch the grid down the bottom here until the next video. So if you just want to jump to that, the rest of it, I'm just going to go through and fix some of the problems and the navigation looks okay, but I'll adjust that because you might not have that luxury or yours might be slightly problematic. I'll work on the padding. Let's do all that. Take you that if you would like. Alright, Remember though, you do not style it down here, hoping to style things up the chain because watch this. If I go through and fix that padding, here I go, okay, on the layout, I want the spacing and I'm going to adjust it down here. This one I want the container or the section. And I'm going to remove the padding here, right in like this. If I go up to the next one, it's back to the big one. Is back to the big one again, back to the big one. Best. Otherwise, I've got to change it every single time. Whereas if I undo that, go to the tablet version and make that a lot smaller. Can you see the flows down to this one and that one. So it's better to start big, go smaller as you go along, even though you really want to style the Mobile, make sure you work through it systematically. I'm going to undo that because let's work on this one. So it has a look. Yeah, it looks good. I'm going to make that smaller. My obviously my padding over here doesn't make sense anymore. Can't really drag it very well to the right. Like rowing the boat or just type it in Dan. Go ahead. That's good enough. 149. Okay. So what else do I need to change on this one? Actually, let's do that padding, so and then we'll look at it, everything else. So you okay. I would like you to go what do we got padding on this one, it's just guessed 50 actually go right to the edge. What have we got on that side? That has got 35. I'm gonna do 35 on this other side. So actually I'm gonna go to my paragraph here and say actually, let's clear it out. Who remembers how to clear it? There's the reset option or Option. Click on a Mac, alt click on a PC. I'm going to get rid of it. Actually, no, I'm not. That's a good point. I was like I'm going to clear it by going back to zero. Actually, I'm clearing it. And it's gonna say, I'm gonna look back up the line to whatever paragraph said. Sorry, paragraph, whatever the tablets it the tablet said 149. So this guy gets it. So I can't just like deleted or reset it. I actually have to say you're at zero. Because what I'm gonna do from now on is this section is going to take control. Why we're doing this way to confuse you, mainly so that I don't know, I don't know what I'm doing. So that's 35 on each side. It feels nice over here, okay, the same thing, It's 35 either side. And this paragraph is set to zero button here. It's probably too wide. So 35, we're going to hold down my Option key on a Mac. 0 key on a PC, give it reasonably close. Depending on the top, there's way too much. So I'm going to mobile device, I'm going to get it down, something like that. Or still feels too close. Don't be afraid as well to go through and check the different sizes. Remember dragging it up, shrinking it small. Nintendo NES. Just to see what these will do. I think probably the padding is still too small on this mobile device. Here we go. Doesn't have to be equal. I've done an equal, but let's look at, so let's have a little look. You, you, you, you. One thing I might do for this is I might go and be centered. And I'm actually going to look in here. I don't want that sintered, probably not just in here. I'm going to get you to be centered. Let's have a look bigger. But actually when you're in this view, it's a little bit different, right? If you are in the preview mode, you can actually drag past breakpoints. Look, I can make it bigger and go to landscape phone, tablet, desktop. Okay, when you're in not preview mode, you and the designer, you can actually only work within the scope of can you see I can't get any bigger. I can go past that breakpoint. I don't know why. Okay. So let's have a look. Yep, I like it. And we're gonna need do something with the background and make it darker because that red and greens, that background is not going to work. I might have to ditch that read completely because it looks cool here. But on this device here, it's yeah. Pain. What am I do? Let's see if we can fix it. I'm gonna, I'm gonna cause a can of worms here. I'm going to go, let's fix that even though I hadn't planned on it. Okay, So the background image here, I could go through and document member got two backgrounds. So on this one here, will it change just in this one? That's a good question. I don't even know the transparency set to 0.24. So let's have a look at it. Let's go into here. Let's make it darker here. Will only affect the mobile it should do. There we go. So have a look. So background image on this section, hero background image. Did it all come along for the ride? You go. Background. It's still at 42. On this one. It is 0.7 to 72%. It did work. I knew that all along. Okay, so it's darker on the mobile. Alright, other things I want to do. So let's look at the image. Images, fine images fine on this one here, it's just a bit weird that it doesn't go all the way across. I've got an image hero. And what I might do is we're going to jump the gun a little bit and say size-wise, we set it to be actually we didn't do we pick a size, we just dragged it, didn't we just went through, okay, what we're gonna do is we're going to say u be a width of 100, and we'll use the percent. 100% will do Units and Increments Property later on and look at all the different ones because he's loads. But let's jump that one and say it. These other versions, it's a specific width, okay, but at this last one it jumps to 100 per cent. Nice. And what that means is watch this the different sizes, okay, if I go to Preview mode, watch this, it'll be a good test. It's getting pretty big. But when he goes to portrait, it jumps back to a specific size. Nice. Alright, preview off. What S, What I wanna do. This is very big away. So kinda liked it here. Do I like it here? We're like it there. It's fine. What's giving it its padding? That's, that's also a fun game to play is like where's that coming from? So with that selected, I'm going to open up my spacing and it's getting some of it from this and probably somewhat from the image. And you can kinda see if I hover above it, can you see little checkerboard thing so it's getting it from there. And where is it getting from? If I click on it from the desktop version of the hero button on mobile, I'm going to override that. And I'm going to set it to zero. And that's actually probably pretty good. Good enough. All this mess. Look at that hot mess. So have a look. Fine. Yeah. You know, good here. How do we fix this? Well, I'm gonna do is play around with the sizing and we're going to play around with, Let's look at the sections sponsor. Okay. Let's say everything inside of it is aligned to the center, but only on tablet. Okay. So you, you can see I'm using the align and the topography. That's a weighed one. You'll notice we're using the topography center rather than any sort of size and spacing centers will do that later on when we look at grid and flex grid. But often you can get away with just centering the text of an entire div tag or in our case this section, and it will follow suit. And do we have we have an image, so we have something around this, right? We have a wrapper called image sponsor. And what I want to do is probably the padding desktop. So I can find here it switches to center and I want to add some padding around it. So I'm going to say who remembers what you hold down to get all sides to be padding. Because I'm going to hold down my Shift key and I'm going to say padding and margin. So you might do them all. Go on tablet. There's a bit more padding around it. The other thing is it's all kind of lumped the side. Why? Because my section has some padding on it and it was appropriate on desktop, but not so appropriate here. So I'm going to say, You go away, zero. There's always gonna be a bit of jumping between the different sizes. Let's have a look actually, let's go to Preview. Okay, So desktop, desktops that it gets down to this, gonna get smaller. Okay, It's kinda responsive. Then you go kind of bigger size fits three on there. You got into this one, gets down smaller. And how is it breaking down? I'm actually okay with how it is from now on. I'm not going to change anything else. We can get fancy with Flexbox later on, but actually this is working pretty good, given it some padding around the images. And they just, they just seem to break down or what's called inline block member. So they fit in line. If there's not enough room, they break down onto the next line, kinda like topography does. Alright, I thought it was gonna be a lot harder than it was. Let's go with this. What else we've got Desktop this. So what's giving the space to this? So let's figure out what's pushing this over. What is it as it u, u, Let's have a look. So is it just everything in this section? It is there. What is their big old padding on that? So on this one, I'm just going to make it a lot shorter or rode across to me that probably needs to come down as well on this device size. Looks good. This one, it's inheriting everything from the last one is a good enough. It is. Because I don't like you portrait or landscape mobile device. I kinda go tablet, heavy. Look at this, make sure it's not too bad and then go to mobile. It's really important. You shouldn't do that, okay, This one here, what I might do is actually this little design choice I head here. It doesn't really work on mobile, needs to go away or get really small. Let's get rid of it. So with this section selected, I remember it's under borders there it is there. So it's got a border of that left-hand side. If I click on this of 50, so it's gonna go zero, gone on mobile. So let's preview it. On desktop. It's there. On tablet, it's there, but when it gets smaller, smaller, gone. Okay. You see what you're doing here. And just kinda work your way through all the elements. Starting at the top, work your way through. Don't skip landscape mobile phone. And if we move this last one, I'm gonna go section next, I'm going to say all of this is gonna be a lot smaller and hold down my shift key. Drag them all. Good enough that all we got, we'll do grids in the next one. But I'm happy with how it's going. You'll probably because you're doing something on your own, you probably gonna have a few other bits that maybe aren't working or didn't go exactly like mine because we using different sizes and different images and different in different text lengths if there's anything asking the comments. But also know that we've got a chunk of the course left that we'll get through it all eventually. The other thing you might be doing is your logo size. Als is fine on these different devices. On this, you might decide that you want it to be smaller and this text to be smaller, okay, up to you to get it to fit in. And maybe the padding gets a bit smaller. Brand Is that where it's getting its padding from? Where is this getting us padding from? The image? Yeah, it was just getting pitting over there. Awesome work through yields and see what you can do. So you can figure it out then, but starting here and working your way down, alright, that is how to make Webflow responsive. 24. Responsive Grids in Webflow: Hi everyone. We are going to responsively designed this grid down here on desktop. It's three-by-three. It gets smaller to the tablet size. And actually, I just picked a three-by-three because they look fine. And then I get two two-by-two on the landscape, mobile and then I get down to mobile and watch what happens. Here it is there. So bigger. And I went, I pushed it all of the edge and I sticked at one column high. So let me show you how to do that now in Webflow. Okay, let's make our grid responsive. The moment isn't responsive or preview. You just go down to tablet and just kind of squishes in there and eventually just gets pushed over to the side to fix. That's pretty easy when they started desktop. Okay, it looks fine. We're going to look at tablet and it's probably fine on the size. So I'm going to leave it there. And on mobile landscape, okay, it's getting too tight, so I'm going to break it into different columns. So what we do is we click on the grid. So if I click inside there, once, there's my grid over here and layout, I'm going to edit my grid or just click on the option in the corner. And what we're gonna say is over here on this view here, I don't want it to be three columns. 123, I'm just going to say delete one. And it doesn't delete the actual content of the columns, the available columns that the things have to go into, that makes sense. So it ended up just pushing down to the next one, created a row auto. Okay, Just wanted to push down another row. It's due tablet. Let's go down to here. The problem with my layout though, is it doesn't look very good at two by one man. It's a design choice that next time designing something, I can decide that this first one maybe it's better to have four columns to start with because then it breaks down nicely to, to make those decisions yourself. Sometimes you have to live with some strange layouts with responsiveness. And you'll also notice that if you change between breakpoints, which I do all the time, the columns thing freaks out like you'd like what? I've never seen it over there before, but it just doesn't like it. Okay. So turn that off. Okay. And if I go back into it, it will be fine. But if you try and change it while you're in here, it kind of freaks out. But turn it off, come back in. And it's just fine. On this one here on my mobile. And I'm just going to stack them all on top of each other. So what I'm gonna do is I'm going to get rid of all of the columns. You have to have one column, one column, and then it's just going to populate as many rows as it needs. Codes have a look. Let's go to Preview. Let's spend it up so it looks fine on mobile. Eventually gets to a breakpoint and goes to my ugly layout and then back to three. And then big three. I saying, like it nice and easy. Let's tidy it up. And just by playing around with some of the spacing down a mobile especially. And there's some big gaps in here. Do I want inches on it? You might think on mobile, it's nice to run sometimes to the edges. So I'm going to say mobile, I am going to change, changes this spacing. This case, it is to do with the rows or columns rows. The row has a height of 60 Omo, but let's actually start here. Let's make sure we're not just stop. I liked the spacing here fine. Here. Too big. Okay, so what I'm gonna do is I'm going to say on mobile landscape, I'm going to say that the grid, and I'm going to say the row height. And I click on it and I'm going to hit up and down, head down, hold shift and hold down. It'll jump in little tins. And I'm going to make it 30, maybe 20. And I'm probably going to have to do the Gap for this as 20 as well for the columns, because otherwise it looks weird. Do I want some padding on the outside? I think I do. So I'm gonna go you because it's pushing to the edges, doesn't look right on this device size. So I'm going to say, let's have a look at spacing and we go from both sides. And it imagine, now I'm selecting my grid, which it'll work on, or I could do my section. Both of these will work. Let's do this one and drag it in. Hold down option, drag it the right way. And 30s probably going to be good because it's going to match everything else. Instead it doesn't match 30. There. Have a look. Why a steady bigger than that 30. You know why you're like, Hey, that thing, I can't work it out so that it looks go inside. That's because there's 20 Dan. Dan is an idiot. This do 20 both sides, 20.20. All right. Let's go get mobile. And that's why we did it up there. And not just in hand because actually it looks okay here. No, I want to push it all the way to the edge, so I want to get rid of that 20. So 0.0. I am happy man, There we go. Our grid is laid out. That responsive. It's give it a taste. Small. Awkward. Find better. Well actually, let's call that one best. Alright, that is, grid responsiveness in Webflow. 25. Class project 03 - Grid & Responsive WebsiteClass project 03 - Grid & Responsive Website: Hello, It is class project time. Okay, class project number three, I want you to add your grid and then make the site responsive. Okay, so let's look at what we've got to. So on desktop here, the only difference from the last one is we've added this grid on the bottom. It's wants you to add it. And then I want you to work through all the breakpoints and decide, make design decisions. Font sizes, padding, k, like we have in the last couple of videos. I want to see them all now upload for screenshots of the four different breakpoints. The trouble is you can't see all four of them. I think earlier in the course I said, you can go here and we can say actually showed this it like 80 per cent or take a screenshot of everything. It doesn't seem to work on tablet. You might get yours to work. I can't forces it to 100 per cent. So what I've asked you to do is take everything that you can see, just take it all the way down to here. So the minimum is the navigation and the hero board. If you can work out ways of doing the whole thing, scaling down the browser, that's sort of fancy stuff. Please do. Otherwise, just take it all the way to take screenshots of everything you can see. To have a look through that, upload it to the assignments slash projects comments depending on where you're watching this and also share it on social media. I'd love to see what you're up to if you can't stand the four-by-four, okay. I'm okay for you to go and backed here and say Actually, Dan, just add a fourth one so that it breaks down nicely on these other devices. Do it, alright, that is it class project number three. Go off, enjoy. I will see you in the next video. 26. Webflow Button Hover Animation Using Element Trigger: Hi everyone, It is time for animation, so we're gonna do it to these buttons. I can't believe I got this far through the Webflow class. Well, you can't believe it. You're like, Why have we animated things? That's why I signed up for workflow because it looks cool when things slide around. We're going to look at that. I'm going to do it two buttons to start with. We'll get that one to do the rubber band. This one's pretty cool. Pop, ready for all jello, whether to fly in and give them to fall from the sky. Floppy doodles and my favorite jigger, GIGO. Alright, let's learn how to do these in Webflow. Okay, let's make that magic. And so you might notice, if you've kinda jump back to this video, I've already got this animation. Where did that come from? Remember, on a button you can go into here and change the hover. Okay, so where's my background color is green to start with, but I can go to hover and change it to this kind of pinky red. Okay, so that's that animation. That's not what I want to click off, click back on. I'm going to add something extra. What am I gonna do? I'm going to do one of those things from the beginning. So let's do it. Is this panel here, have the element you want selected. Now case our button. Click interactions, okay, and we're gonna be dealing with this element trigger, not page triggers, element triggers. We're going to say head plus. So when this element, okay, So button is hovered. Yeah, When, when I hover above it, okay? It's gonna do something not just change color. No, we're gonna get it to jiggle or whatever. On Hover, do this action. Okay, so we're gonna do some of the pre-made ones because they're nice and easy and they're pretty nicely timed. So we're gonna do something, Let's do pop. So they're kinda broken into. This will probably change. They seem to add or remove things from this. So there's kind of like movement stuff appear and disappear. And then there's things that get their attention, emphasis, we're gonna go for pop k. So let's do pop, Let's preview it, You're ready. And it's work and give it a go. So let's preview and look. When I hover above it, it changes color and does a little pop thing. Nice easing, well done workflow, cool. You can play through them all. So with it selected interactions, you'll see all of this. And instead of pop, we can do. Now before we go through any more of these with great interaction power comes great responsibility. I want to find your website. Google was fun, but I don't want to go to your website and have 1,000 things jiggling at me. Okay. Even though it's very cool to watch, It's a good, Okay, But it's like learning. Remember when you learned the lens flare in Photoshop K and everything had a lens flare, be careful. I'm warning, you know, everything on your page needs to animate, even though clearly it brings me joy. The things you need to notice when you do add these elements triggers. So this element triggers something. Okay, Is it gets a little lightning bolt. Awesome, because all Harry Potter, just a visual indication that if I click over here and I click on, let's say like, oh, there's an interaction on this one, and I can only see it when I'm previewing. It appears over here as well. Just a visual cue that this lightning bolt as we are waiting to go, if you need to adjust it, select it. And just over here you can click on it and it will open it up. Close it. There you go. Let's do a couple, a little bit more. Let's get rid of jiggle. As nice as it is. Let's do another terrible one. This is like bond doors from PowerPoint slides. It's like our transition, but it's cool. Anyway. So we've got our hover out. So at the moment we hover in and does something and does nothing when we really, so we can say when it hovers out, we might do something else. I'm going to give it to blink. Give that a preview. You can preview it over here, but it's better to indirect with it, I guess. Oh, it is freaking out. Where your day. That's strange. I've never done that combination before. It's because what I'm assuming it's because it's moving. So it's trying to flash. If I follow it, it won't. It'll do the balance. Watch if I can keep my finger on it. I got it because it's moving up, so it's doing the mouse rollover off. Does that make sense? It's bouncing up and then activating the rollout and so it's blinking and it's freaking out. So let's not do balance. There's just do fade. Give it a go. Hot stove and get out. Okay. Ah, I'll leave this in here because these problems we run into, these problems are on hover fades, probably not a good one. Let's get it to pop again. And when it hovers out, it's kinda blink. And let's see if that fixes it. Blink. Hey, go. There are combinations that just, it just doesn't like. Okay, so that's okay. Don't use blink I think is the vallate and I'll let you play with them. Other things you can do, you can add more than one, okay, so let's get rid of the hover out just because it's killing me and I can show you how to get rid of it. Okay? So how to get rid of it? Action. Select an action. That needs to be a nun option, but let's go back to select an action. Okay, so get rid of it. Let's preview it. It's going to pop the pop and something else, so you can add one more. So let's close this down. So there's kind of two parts, right? You're at this kind of element trigger level and you go inside of it to work on our mouse hover, come back out again. I can add a second one is a little plus. I can say, I want another one. It says our mouse hover. I want to do two things. I wanted to get it to do that plus I'll get it to or trying to think of a combination that's not going to record everything. We've got it to pop. Can we get it to pop in spin? I should have tested this before I recorded this video. What does it do? It doesn't pop and do it, does it. Let's give it a go. Simple to do both. It's got a pop and a spin in. Are you ready? It is. It's popping. It easy. It's another tough one. It's jiggling in and out as it's spinning. Glorious Dan. Okay, you can enable them. One who's terrible video, but we'll leave it in here because sometimes, sometimes it's nice to see the problems as well as the completely always working stuff in case you go down the rabbit hole of China, add way too many. Alright, Actually, what should we do? Let's finish it. Yeah, go through them all yourself. Actually, we won't go through them. Jiggle. Jiggle. Does anybody, can anybody say the word jugar without the Louis throat song come in and the head. Anyway, if you haven't heard of Google it, great. Anyway. So we're going to leave it on jiggle because that's what I want to start with this intro with. Any other big takeaway is we hover, we talked about earlier. Hover doesn't work on a tablet or phone because you can hover with your finger, you can do with a mouse. So what we'll do in the next video, we'll do something a little bit more kind of like the page load animation stuff. That'd be cool. So let's go do that now. 27. Fade in on Scroll in Webflow: Hi everyone. We're gonna do this, watch this. I'm gonna scroll down and things again, a fade-in, much ligand that they fade in while you scroll up. We'll do it altogether and then I'll show you how to kind of offset them as well. One more time. Let's have a look. Magical. Let's, let me show you how to make the magic. Alright, let's create some more lightening bolts. So it's these elements here that I want to fade in. So I don't want to do it to the image. I want to do it to what surrounding the image. In this case, I've got a div that's got a class applied to it called div class of int. So give yourself class if you don't have it, okay, it's a good way of reusing it later on. So let's go to the interactions. Now that I've got it selected, we still use this element triggers. We say this element here. I would like to do something different from before we did mouse hover. We're going to use this one called scroll into view. When this thing is scrolled into view, nothing to do with the mouse anymore. Okay, it's due with the page scroll and you kinda just follow it. You just say, okay, when it's scrolled them to view what you wanna do when it's grown into view. Can you do the action of, I'm just going to get mine to fade in, fade in and fade out. I want it to fade in. Let's go to Preview and let's give it a test. Now, when you are testing, if I test here, just kinda load straight away. Okay, So what you need to do is kinda like go up to the top. So you've got some scrolling to do. Now preview it and we're ready for the scrolling. Scrolling doesn't kinda just loads once, doesn't reset every time. Let's go again. From the top. There it is. There's my pay scroll. Can we using those. Okay, Let's look at something else because the moment a lot of the actual animation is happening, it starts happening like just the second. It appears, like just now it's fading in and can be finished by the time person gets there. So what's quite nice is with my div wrapper selected, I want to use this offset and this is due with the viewport. Viewport is like everything the person can see the top to the bottom. And I want to offset it so that it loads may be a percentage after the, after the start of the page. So it's going to load probably, let's say that that's my 100%. It's going to load 17% about there. It's going to start activating K. If I turn it up to like, it's a hard one to explain. By up to 40%. It's only going to start activating once it's kind of his 100%, it's going to wait till it gets 40% all the way up the page then is going to activate. There's gonna be a bit weird. It's a bit too much. So let's give it a go. You are going to be activated after 20 we sent you that. Remember, start at the top. Give it a preview. Scroll along. And can you see it started quite far up on the page. Turn that off and on again. There you go. So what else can you do? You could do a delay instead of an offset. Offset is going to wait for the physical part of how much scrolling is get done. You could stop that back to zero and say I want to delay, or we'd like it to delay for this mini milliseconds, 1,000 milliseconds is 1 s, okay? Which takes way too long. Okay, so half it is 500 milliseconds. You go, Let's give that a go. So let's preview. We're going to do a similar sort of thing. Watch this. If I scroll down, it's just going to take half a second before it loads, you decide what you wanna do. It's probably better to use the offset because it's going to wait for a physical like how high it is. Whereas the timer, watch this, I can kind of cheat the timer if I go here and wait, and I'll just let it didn't. Okay, Let's go one more time slowly with my mouse. Come on. You see it loaded? I saw it peaked in and then started. It's a little timer, whatever works for you. There's no real right or wrong. Now, let's take this a bit further because I wanted to do to all of them. So what we can do is we could go through and just edit to every single one, do the exact same process. It'll be handy because you'd get good at it. But let's say that I've got this, I've got that interaction. Down the bottom here it says, hey, the trigger settings. This is, I would like it not to the element. Now, which is the moment I'm just doing it to that physical thing I wanted to do to everything that has the same class name. Remember we had, we've got that div class events and you can see it's applied to that one and that one. So we say class, Good, Good, All of them, please look, them all got lightening bolts. And it's a preview. Here we go. So scroll up to the top. Let's go down. And you could do multiple elements. Could you do it to the whole section? You could probably easily just do the section then. You could have done that exact same thing to the section and it would do the whole thing way easier than what I just did. Anyway. The nice thing about it though, is because it's reusable if I used, whereas it div past elements. If I got something else, Let's go over that. In a Div. Do I need to wrap it in a div? I think I can just give it the class name of div parse elements. This is going to work. I should practice these things before I go and show you. Let's give it a go at the top, it's probably not going to work is it totally works. Have faith in yourself, then that thing is reusable as long as you use the same class name. Next thing I wanna do is I actually want to offset it the moment, right? They all just appear at the same time. I want to kinda like one to fade in and next one, next one. So you can't do it with this kind of structure that we've got now where we're going to apply the same thing to all classes because they just applied a little. And I'm going to say applied to the element again. And it's going to repeat myself. I'm going to say, Alright, so we've got offset 20% fade in. We can do that, but a repetitive. So this next, this next div pass div past events. We're going to say, let's add element trigger of l. Scroll into view. What action would we like to think? I want it to fade in and want to offset it by 20% still, actually, we might need this one to go 30%. There's a little bit higher before it actually starts activating. So it's kinda way of timing it. We could do it with the actual delay as well, just like we did before. Up to you, Let's give this a go. You have a trigger of scroll into view. Action is fade. I want it to fade in after an offset of Woody. I have no idea how long is it going to look? It's going to go probably not very well. The percentages are probably be a bit high. Start at the top. Give it a preview. Let's go along. Hey, I was right. And I think I've tried to delay as well. Let's try the delay because that was a little bit jumpy. So you page offset, we'll keep it all at 20 per cent. So go into it. I'm going to send zero for this one. The next one, we will go into it and say stay 20 because I don't want that happening too early. But let's have a delay of say, quarter of a second, 250 milliseconds. We go. This next one here, same sort of thing. Put it back to 20%, 20% off the page. Bartlett's have half a second, so 500 milliseconds. Alright, let's give it one of the top. Oh yeah. What do you think? Is it a cohort or will do custom animations later on in the course. But for the moment and a lot of the time those have done really well job at those kinda prebuilt ones and these elements triggers. All right, my friends, that is fade-in when you are scrolling on a page in Webflow. 28. Class Project 04 - Interactions: Hi everyone, class project number four. This one is to create your own interactions. Want to create two of them, like we've done in this course. One for the button and something that's on the page scroll, for instance, member, that's the button one on hover. Okay, You can do anything you like. And the page scroll in my cases this fading in, but you can do whatever you like. The best way to share it with me is to do it via video. So I'm on a Mac. I know you can hit Command Shift F5 and record a section of your screen and then upload it to the assignments, projects, or comments depending on where you're watching it. And sometimes it's easier just to upload it to Vimeo or YouTube first and just post the link up to you on a PC. I'm not exactly sure how you might do it on your PC. So just Google how to do it on your PC. This screen recording software on both Mac and PC. I've cooked Google on how to do that. If you can't, look, not everyone can record their own screen. If you can't, I'll accept just screenshots. Okay, so see if you can do the video. Love to see what it is. Practice, have fun, enjoy it, and I'll see you in the next video. 29. Sharing With Your Design With Your Client: Hi everyone. In this video we're going to look at shearing what we've made with our client. How do we do that? Now we are pretending at the moment that this is a work in progress. It is a work in progress, but that's what we're doing right now. We want to share with the client some of the big finished finale. Announcing it to the world. This is like, Hey Jeff or Ginny, and this is where I'm up to. What do you think? Well, maybe it's getting it to some testing for people so they can kinda work through it, find any errors or anything missing. How do we do it? Super easy. With your website open, go to publish, and that should already be ticked and just click publish like the domains. Let's do it quickly and then I'll backtrack and show you some other things. So it is live on the Internet now. It's very exciting to get to it. Click on this little arrow here, or you can copy and paste that, or it should open up and that my friends is your website on the interwebs. It is fully workable. Okay, here we go. And you can copy and paste that, send it to your client and say, Hey, have a look. It's very exciting if you're new to web design to get your stuff out there and actually online, rather than just kinda trapped inside Webflow or Photoshop or Figma or XD wherever your first Designs Act a big milestone. Hurray. Let's have a little look back here. So this here is the domain that you're going to be using. Think of it as a staging domain. So weird. Kinda used in web design for like a draft part of the website is fully workable. There's nothing wrong with it. It's just on what's called a sub-domain. So the main domain here is workflow dot io. This other stuff idea, kayak club dot workflow to IO, the sub-domain for the main domain. Anyway, some people call it staging domain and it's just a good, We're a work in progress way. Eventually you will add your own custom domain, which we'll do together. And it'll be on a website. It can live on this one. It's just not a pretty URL. It's a little unprofessional. But if you've got a very unprofessional website, socks off, use that sub-domain. Now if you wanted to check it and then turn it off again, if you unpublished it, it'll take it off the internet. The only trouble is is that if I go to here and refresh my page, you get a big old for four era the Arameans, the website cannot be found. Okay. So if I turn it back on though, it'll be found again. So it's kind of like turn on and off. And one thing you might be asking here is There's a few things you might want to turn on. Okay, so I'm gonna go to my project settings. Who remembers where that was? We did at the beginning, that was four places. We looked at three of them. The designer, there was the editor, which we'll do later on. And then project settings and dashboard. We were they all hidden. You remember it go. Okay, Project Settings. Project settings for deer kayak club. Now I'm going to show you some things that you probably can't do yet if you're on the free plan. We haven't done anything yet. Okay? And if you do, I'm going to show you them because you want to have a look, but they are required a paid version of Webflow. So in general, one here, website password people like to turn on when they are kind of like it's just new and I don't worry about it. I used to because nobody's going to guess that this kind of like a deer kayak club when float IO, there's no way of finding it. Well, it's hard to find, but you could turn that on, but you need to upgrade your hosting. I'll walk you through that later on as well. If you haven't already remember, if you do want to upgrade to hosting, you can use my link here on the screen. At other thing you might wanna do is if it's gonna be up there for a long time, is under the SEO tab. There's one in here called indexing. If you turn this on, it just means that Google is not going to go and index it. And what they mean by indexing is just adding it to the search results because this is just a work in progress is not quite finished. It's the wrong sub-domain, might be placeholder tics like an ALS. So we're just saying they're saying Google, don't go in, search my site and add it to your vast search results. Thank you very much. But again, if you hit Save Changes, it's going to say, hey, you need to upgrade your hosting. So at the moment, and that's not what we wanna do. Okay, so I'm gonna go from back to SEO. So you might want to turn those things on or you might just have those questions in your head. Yes, you can do them. Yes, you need a paid hosting plan, but for the moment, don't worry about it. Like I don't worry about it. Here's what I'm trying to convey. You might be like it needs a password. You can totally go do that. But just sharing that link there is fine. Obviously, when it's on, you can actually another tip you can publish from the sittings. Not that you never do it from here, but you can you can bend the site from here. You can Unpublish it from within the websites project settings. But I find it's just easier to work like this. And if you do want to turn it on and off, just let the client know that there's a day of testing and you're going to disable the URL. Alright, that is it for this one. Let's move on to the next video. I'll see you there. 30. How Much Is Webflow Hosting Site vs Workspace: Hi everyone. In this video we're gonna look at hosting on Webflow, the pros and cons. We'll also look at what the difference between a site and a workspace plan is. It's jumping. All right. First thing is, is that when flow, I betcha are at their office right now waiting for me to finish this video so they can go and update the language and the prices and the features you get. So be sure I'm going to run through it now, but this might change, the language might change, but it'll give you a good general overview. So I'm at my dashboard here. You'll see that that's the site we're working on. It's called status site. There's this other thing called Start a workplace. That was probably the trickiest thing to understand when I got started. So let's discuss those. And I'm going to jump to this page here. It's webflow.com slash pricing, and this is probably the same. I don't want to discuss the two different options here. There's something called site plans and down the bottom here, workspace plans. Where does the difference? Briefly, a site plan is hosting, that's what they call it a cold site plans and economies plans. These things are the same, just different levels here, but this is hosting your website somewhere on the internet that it can live where people can visit it. Somebody needs to host it. So that's what this trunk is. The workspace plan is you as the designer, you as the designer is like at the moment we're using it for free. But let's say I want to build more than that to a hosted sites. I need ten of them. I need to export the code. I need to add password protection. That's where you as a designer upgrade that. You personally will upgrade this and pay $19 a month, then every site will need hosting. So if you've got ten sites, it's ten times 12. Every site needs hosting, but you, as the designer need, you can try and get away with a free, but you might need to upgrade to this one here if you're going to build more than one website because it unlocks a lot of features. So that's it. You may get away with just one payment. You might need both of them if you're gonna go into Webflow seriously, That's the skinny version. Let's look a little bit more deeper and site plans, that e-commerce plan, so we're on this data plane. The big drawback here is you don't get a custom domain, okay, everyone's going to want Daniel scott.com, not a deer hyphen, kayaking hyphen club dot width, load Io. Okay. So that's that if you do need to upgrade it and that's all you're doing. Let's say that this website is your website. It's static. It doesn't do a whole lot and you just want the domain name. That's all you have to go grab the basic one can get the custom domain and that's it. The next jump up is a CMS. So we will do a CMS when we do build her own blog. It's when there's a bunch of items and you'll see me. It's like blog posts or it might be portfolio items or CMS, Content Management System. If you do need any of that, you want the client to be able to update items or blog posts. You're going to need to go to this one here and there's just a restriction on CMS items, okay, if you've got more than 2000, need to jump to here. Same with the bandwidth. K. 50 gb is quite a lot for a small site at 200 is quite a lot. And then you start getting into 400 gig. But it's like the trends, how much information is coming from your host to people. Basically, it's based on how much they actually have to download images and videos and all sorts of other stuff. And really what it comes down to is how much traffic you have. So often when you get up to these higher prices, you often are generating more revenue and it's translatable. Pay less for less traffic, pay more for more traffic. The big jump here is the e-commerce site plans here. Cms, static sites, perfect. When you want to start taking payments, okay, you're going to have to jump to the basic of this one here as we start. This is where we've flow will start helping you with payments and shopping carts and orders and shipping and all that fun stuff that is amazing, really helpful from Webflow, but it costs a bit more. So these are the exact same thing just with different levels. How a day a kayak club is probably gonna be fine at this because I want the extra domain name and it's probably not gonna get more than 50 gb. Says I want to start selling stuff from it. I'm going to have to upgrade to a minimum of this. And then again, this just kinda upgrades depending on your level, how many things are in your shop and your sales volume. You can have a look through all of these. They've got kinda like view all planned features. And you can scroll down and have a look of what will work for you in what you can get away with and you can upgrade if you need to. All right, That's gonna be my skinny version. I don't want to go through every feature because it's going to change. I know it is, but go to pricing, view or plan features for both hosting k, which is the site or e-commerce plans. And then have a look at workspace and just see what's going to work for you. If you're new, maybe sign up for a monthly account and you can upgrade to annual if you want to save some money in the long term, actually before you go. Pros and cons for me, the cons are that it's a little pricey compared to hosting. Hosting has to be paid for, somebody has to pay for it somewhere. Gone over the free geo cities days, hands up. Who remembers those where they used to fund it from ads, I think you have to pay for hosting somewhere. But the con here is that it is a little more expensive than other places. If you have done this sort of stuff before, it's not outrageous, but it kinda leads into the pros and feel comfortable sitting up your own host than one thing. If you're not, I can set up domain. I can set up, I can set up a database and set up my host somewhere else. And, but I like this because it is somebody who's looking after it. The security patches are all run by somebody else. In for me, some of the big ones is sitting up that the client can update it so that they can login to the editor and make updates to add our own blog posts, add their own items to the store, organize their own orders. The form that's all kind of outsource than handled by them. Alright, that's it. Site plans and e-commerce is hosting. And this one down here is basically or is it workspace? Is you paying to use the software? I'm using air quotes because it's kind of a website, but software as a service. There we go. Alright. I was probably stating the obvious there, but anyway, I hope it was helpful if it wasn't. I'm sorry. Anyway, I'll see you in the next video. We're going to start making our portfolio exciting. 31. The Best Webflow Shortcuts & Speed Tips & Tricks: Are you ready? This is exciting one, tips, tricks, shortcuts. Now that we've got a few Webflow skills under your belt, I'm going to share with you some of the things to make your day go a lot faster. Make you look impressive in front of your colleagues as well. Hang around to the end. I've got a special wind flow Easter eggs hidden there at the end. Alright, probably the most commonly used, or at least for me, is on a Mac, it's Command Shift P. On a PC, it's Control Shift P, hit that and it just toggles between. You can just keep hitting those buttons and it toggles preview mode on and off, instead of trying to click this more libel up here. Okay, so that is Command Shift P on a Mac, control Shift P on a PC, it gets bidder go into preview mode and you can, on your keyboard, look at your keyboard, the numbers that are above the letters head 12345, clay. You can kinda just jump between all the different views. 123455 is not the one you want. Just opens that just do 1234 or even you can do it in both the preview mode and in the designer. One-two-three-four, I remember Command Shift P or control shift P on a PC, you can look at preview mode. Next super awesome one is B back in your designer at a preview. And on your keyboard you've got a, S, D, and Z. They're all kind of grouped together on an English keyboard. They're all real handy. Those are the ones that I use the most. If you're if you're using interactions lots, can you see if you hover above it, it's H. I never remember the shortcut for interactions because I'm not there all the time. The ones that M there all the time. Our ASD Z a is Ed. That makes sense. A for Ed. I'm always go into the ad and then back to the Navigator, which is z a z, a z. The other one's S for styles. Watch this if you're over here and you're on something else, hit S for styles that make sense. A for ED, S for styles. And what would be the sittings. D makes no sense. It makes sense because it's next to the other useful ones on your keyboard. But there you go. As loads D I use loads and Z for the navigator. Remember there are lots of other ones. You just got to hover above them. And if you're using the Style Manager loads, you'll probably the only one, but it's G. You go, alright, ASD z. The next one is super awesome is the find everything shortcut. So I am, I am here and I want to add something instead of going into my a and then scrolling and figuring out as a component, maybe it's under layouts. What you can do is cut to the chase and just click where you want it to go and hit Command E on your keyboard. Can you see this? Find anything appears, you just need to know what to type. And if I want another image, I just start typing image. There you go. It adds an image ready to go. So I want to add another heading underneath this paragraph text. So Command D and I just go hitting, there we go. Hit Enter. I just typed in the first few letters and hit Enter and began hitting, if you can remember vaguely what it's called, Command E. Oh, that's Command D on a Mac, control E on a PC. Sorry, PC guys, I've forgotten about. Yeah, Okay, So Command E on a PC and then click Footer. Look at that. There's a footer, giant foot up. I can't add a footer inside of this. Anyway, you get the idea. Command K works as well. Does Control K on a PC as well. If some of these shortcuts aren't working or change, you can go down to see this little question mark down Hugo help and keyboard shortcuts. And it will list out the mole I'm giving you the good ones. Can you see on a Mac it's Command E and Command K. Back in the day it was only Command K, but Command key on a Mac opens up. I can't remember. Is that Michigan patrol something else? So they changed it but they lift the old one, which is confusing anyway. So that's Control or Command E, find anything. Now that gets better. How better to use, hey, when you can add a class automatically? Well, simply watch this. Let's say that I've got this style here. I'm going to add a class when we've been going up here and we've been going through this and we can pick from existing ones or we can type them in to add them. Watch this. If I could just use my keyboard, click on this and I hit Command or Control, Return on my keyboard keys, it jumped up over here. Here I am. I can type in heating because I've named mine relatively well. There we go. Let's go to this Command Return or Control Return. And I'm just going to type paragraph of a gut anymore. I've got text. There you go. I'm using my arrows to go down. There's my textblock grid. Here we go where it gets cool is Festival and undo mine. Command or Control Z. To get back is let me show you a bit more of a flow combining a couple of them. So underneath this paragraph I need a, let's say a nother hitting. So I'm going to go Command E for reload site. What shortcut that I hit, I'm not sure. It's that again. So here we're going to hit Command E. I'm going to type in hitting, hit Return, command returned to add the class. And I'm gonna go hitting down to down one. So you can add stuff and style it without going through all the menus. You add command or Control E, along with Command or Control Return. This one here, button, I'm going to go Command Return. What else have I got forgotten a More button styles. I've only got one button nav. You can add them. Let's say I just want to add one. I want to add a clot and I want to add a new class here. So I'm just going to call it button and I'm going to call this one purple return. It's created a class. Instead of selecting one, it's the same shortcut Command or Control Return. And then I can go down here and say actually the background of this one is going to be now purple. There we go. Alright, next one is pretty cool. It is this one here. It's called X-Ray mode. That's the shortcut is Command Shift X or PC. It'll be Control Shift X. What does it do? It makes everything black and white, which isn't that useful. What is useful though is when I am in this mode, watch when I hover over, can you see I'm not doing anything, I'm just hovering and it's showing me all of the padding and where it's coming from. Can you see that? Why is this over here? It's because there's padding which is green. What's pushing this down a bit? It's because there is blue which is margin, same with this. If I click up, I'm not even clicking just hovering on this section here. It's got padding on it. That's what's pushing all this takes on. It's not margin from the title. It is passing from the section hero. So it's just a really handy way to kind of move around and go, what is making this? Do this. Alright, that's Command Shift X or Control Shift X to an on and off and just work your way around to see what's being affected. Great. If you're working on somebody else's project and you can't or yours from long time ago and you can't remember what's actually making things do what it's meant to be doing. The next one is over here in my styles, which is S for styles. I'm in the Styles panel. And if you hold down the Option key on a Mac, 0 key on a PC and click any of these little arrows or chevrons. They all closed down and it's just nice and tidy way of working and just kind of going in and out rather than having them all open, which has that same key, Alt or Option, and scrolling through them and trying to figure out where they are. The other nice thing about this option is you can start to see if I've got this selected. It's showing me that this image, this class, at least that I've got selected here, is doing stuff on layout and spacing, but nothing else. There's no the blue dots. That means something is actually doing something in this class. And in this case, it's the display set to block. The sizing has got some margin on it. These ones here, this class does nothing with position, absolutely nothing, no dots. The amber ones here, they're just saying that there's actually a max width coming from somewhere else. And that's why it's Amber. How do I figure out what is making this 100%? You hold down the Option key on a Mac, alt key on a PC and just click on it. Actually does the Command key or Control key on a PC. And it says the values coming from all images tag. We'll look at that tag later on. But there are times where let's have a look at this text typography. There's nothing getting done here. A lot of, lot of MBA stuff. Let's hover, hover over that. Let's have a look at the color, whereas the color coming from hold down the Command key on a Mac, Control key on a PC. It says, hi, it's coming from the section called hero. So that's where it's getting its color from. So I could click on this section here and say, Yeah, there it is, it's blue, it's white. It's affecting everything that's inside of it. Alright, the next one are picking units. So let's say this hitting here, we wanna go Actually, yeah, let's do this. Let's do the topography. And let's say we don't want it to be pixels. We're going to use aims, okay, you don't actually have to drop this down and say I want aims or rims. I can just actually let's undo that. I'm going to just type in, I want it to be to RAM and hit Enter. You see it just updated that and adjusted it. Any of these fields you can type in measurements and say I want the spacing to be a margin of 50, but I wanted to be percents. Instead of changing it from pixels, I can just type in percent and it will make it 50%. Alright, undo, undo. Things are getting wonky and we go get rid of him. Next one, all right, This next one is more useful when you've got more complex sites, will do one of those later on. But to put it all in this video here, Let's click on this image here. And if I use my left and right arrow, can you see it moves through everything that is what's considered a sibling. Everything that's in this section called hero or these guys, they're all buddies. They're all siblings. They're all on the same level. You can click on here and use your left and right just to select the different ones. It can be tricky to select these things. There's a lot of data on the page and maybe it's not very big. So left and right is siblings up and down. So I can use my up arrow to go and select the parent. In this case, it is the section hero. We go. So that is the distinction there. Sometimes you can even click on the section underneath. So you click on the child and you just hit the up arrow and that will select everything that's outside of it can be really handy when there's no room. Maybe these buttons are covering the background. We can't select it. So we can just say you up arrow, select the parent that works down here. Because remember there's div tags here. We can use the navigator of course, but we just click on this image, hit the up arrow, and we'll select the parent div downwards, start selecting the children. So I can say Section past events, I can go down arrow, down arrow and go deeper inside of it, which I never do. But the up arrow is really good. Selecting the parent, keep going. Eventually you get the body all the way at the top, the grandparent, nobody calls it that Bowie. Alright, next one. Next one is, I'm going to click on this paragraph tags here. I want to change the size. If I click in here, I can use my up arrow. Can you see it moves through 16, 17, 18, 19, down, up and down. Just the arrow keys in any of these little field you can tab to the next one, which this tab when the height. Okay, So you can mess around with these shift tab goes back. Cool. I use it all the time. But I'm going to add, you can hold Shift and use the up arrow. Can you see it goes in lots and tin. Okay, and that's true for basically any of these options. So let's say I want the spacing over on the margin here to be starting off at one. I can click in here and use my up arrow to go individually, hold Shift to go over and big chunks. Can you see it moving onto patria? Alright, how do you reset it? You can hit the reset button on most of these or hold down the Option or Alt key and click them and it will just reset it to whatever the default is. Remember the zero. Remember the default sometimes isn't. In this case here, if I reset it to the, if I put it to zero to go back to the default, not the default. The default is actually probably 16. Its hold on the option, give it a click and it will actually, 14 is what the default for that is. So remember, Option or Alt clicking is better to reset it, get it out of there. Don't make a go back to what it was by default. You get the idea. Don't be afraid to Alt drag things. So hold down the Alt key on a PC option on a Mac and watch this. I can drag another one of these and look, I've got two of them. You know, the heading over here, hold down the Alt or Option key and just drag it and it will duplicate it while you are dragging. The other useful thing is that you can right-click things in Webflow. I can right-click this, get into different things. Copy, duplicate. I can add a class to, I can rename the class that is around here, can add a trigger. Look at this right here, rather than going to this option over here, I could turn it into a symbol. I can move it up and down to the parent. I'm just reading these out now. And it's kinda weird because in a web based application like this, you assume right-click is gonna do all sorts of like Googly stuff, not the actual application, but somehow we've flow of taking control of the mouse and sometimes doesn't work over here. Can you see this is the normal stuff you see in Chrome browser here that you get Webflow stuff. Another thing you can do is with some of these fields, especially these kind of like singular fields that have the limpets. You can hold down the Option key on a Mac, alt key on a PC and just drag them. Can you see the little arrow changed all down my Option on a Mac, alt on a PC, and just drag these things up and down again. Just a visually get them where you want, some of them like this margin here, you don't actually have to hold anything down. Just drag them. You get used to which ones do which? These kind of like infographic style ones, you can just drag it. But any of these fields you're going to type into, you can hold down the Option key on a Mac, alt key on a PC just to click and drag, nice. Speaking of dragging over here, we've looked at it before, but if you hold down the option key up here and drag, you'll notice that even just by clicking the key down, can you see this but highlights. Showing you the I'm gonna do both sides look the same. They're both 98. If you hold down the Shift key or the Command key, Shift key. And drag them, they'll do the top, bottom and lift. Great for things like the sections where you want them all to have some margin or in this case some padding all be the same. Hold down the Shift key and drag one of them. They all come along for the ride. And the Alt option is either side, either top or bottom. Making a mess of this one. Also, while we're here, remember you can pin the Navigator if your screen is big enough. It's this option here, means it just doesn't go away. Otherwise, the navigator is super-helpful and you got to open it every time. Stay there, please. Thank you. And last but not least, the most exciting of them all, it's the Easter egg inside of Webflow, being the designer, don't do anything else. Actually. Let's say I've got this. I'm like, you know, what? Needs to be something better than impact. You don't wants better than impact. It's this you ready type in IDD, QD, and then go back in. And happy days look, comic Sans is appeared. I hate you Comic Sans. But it's their hate is a strong word. Sorry, Comic Sans, comic Sans lovers. What was that shortcut again, it's IDD, QD. You get extra points. If you know what that is. Anybody remember what that was from? Let me know in the comments. If you do that in Estelle joke for those of a certain vintage, right? Those are all the shortcuts that I love in use. You might have your own, if you've got one that you want to share, threatened the comments. And if you're wondering, I can't figure out a way of turning it off either. Welcome. Once it's on for a project, I can't seem to turn it off. Sorry about that. There we go. Onto the next video. 32. How To Change the Default Styles in Webflow: Hi everyone. In this video we're going to look at changing the defaults for Webflow websites. Instead of adding classes to everything we're gonna go through and say this hitting, we're going to say all hitting on all the pages. I'd like you to be this different font size. You can see it'll change all the instances of that hitting without having to create a class. There are some underlying default tags that we can use. We can go even further and grab the entire body and say, everything on this body of this whole website is going to be a new font, Comic Sans. There we go. We'll end up in a very terrible design position, but a very good CSS understanding. So just wanting the design gets bad, but the knowledge gets good. Alright, let's dive in and change all the defaults. For this example, I've created a site, a brand new one is nothing much going on it, if you want to follow along, just create a blank site and workflow. And what I've done here on the designer is I just threw in a bunch of different elements. Okay, sorry, I threw it in a container and a section and some headings and paragraphs, some links and some buttons and some images just so that we can show changing the defaults. And what I'll do to make it obvious as well. And I'm going to stick the whole section and copy and paste it. So I've got two of them actually going to create another page as well and throw it on them. Just to show you that when you update one, it goes to all pages or everything in this website. You might dip. Okay, you back. Well, I did was create a new page, so I've got home and second page, so we'll start at home. So let's say that I want to style my headings for all the pages. I know what it needs to be. So instead of creating a style and applying it every time like we have done, we've gone through here and say, let's make a new style called hitting one. We're not going to do that. What we're gonna do is have nothing typed in there. Just click in there and these pink ones here, okay, this HTML tag, these huge global tags, these are already existing, k they are block-level tags. They say all the H1 headings in my entire document. That style, that one, cool. And you can see by default there's some of those defaults we saw earlier on in the course. Look, that's where it comes from. You say actually I don't want to any non-zero. To me, it wandered off. And I want my typography, ultimate hero. I want my default to be, we're going to use, I don't know. How old do you see that one updated and that one. And let's go to page two. You know what's going to happen? Second page. Second page has done as well. If you opt out those block-level tags, That's what the coal, they'll update on all the pages. You can still add combo classes to this, okay, to change it. You might not give it the color because it's going to appear in different colors on different pages. White on black, black on white. You might just say it's gonna be the right font. It's kinda get rid of the margins or keep the margins or change the margins. And you might play with the font size, okay? You might say that my default size for an H1, rather than changing it every time is going to be 24. Okay, that's what you've decided in that case, that totally didn't work. That created a class because it didn't have that global block-level tag selected. So now undo that. Go back to where it was. Okay, and if I click on this, you'll notice it's not there. When I make a change, it's going to create a class called hitting. It's not what I want. So I'm going to undo, click on it again, click in here, click on this one, and then say it's gonna be 24. And hopefully, if I've changed that kind of global one, I can go back to my first page and they've all changed them all 24. So how do you figure out what to change? If I click on this one here, again, don't type anything and just click. You can see there's an old paragraphs and I might decide all paragraphs again is going to be great vibes, terrible. Then the space after all those paragraphs is going to be, but they get, and you spend some time working on these right at the beginning of a project. And then you can add combo classes afterwards and later on if you need to make these kind of like default changes, come back to these pink tags, just make sure that's selected before you go and make changes. Same with this image. You can see in here, there are some defaults. If you're unsure what the defaults are existing, we know from that blue, the blue colors. So remember if I hold down Option or Alt Option on a Mac, alt on a PC, and I've got this kinda default. Can you see the blue things are the defaults that have come from Webflow or can it just web design in general? So it sits a layout of display. It's the default member. We changed it early on to be blocked. You might decide, I just want all my images to be blocked. Spacing. There is spacing in Haven. You're like, Hey, it's blue. It says it's doing something. It's actually set to zero, which is not lifted default, it's actually set to zero by Webflow. Same in here. Sizes that done a max width of 100 per cent of the actual size, so it doesn't get all stretched and pixelated. That's not on by default, Webflow have done that for us just as an all images tag, all these other ones don't have anything applied to it. And this one here is getting some styles from somewhere else. Where is it getting it from? That is a great segue, but I didn't plan. But I'm going to talk about in this video anyway. So what I can do is who members, how do I figure out what's what's giving it this? And the color. Where's the stock coming from? Okay, It's not blues, it's not coming from this actual images HTML block. It's coming from somewhere else. How do you get it? Hold down option, give it a click. This option command. Command on a Mac Control on a PC. And it says, hey, it's coming from body weight. What does that one sorry. We've been styling this, this hitting, okay, and we went to the old tags and we went all headings are to Homer. What we can do is actually we can style even one step higher than hitting so we can go to body. Body is everything on the page. So what we might do is can you see we actually purposefully styled hitting and we purposely styled paragraph, paragraph. But still these other ones, I still get an Aereo. So what you can do is you can style the body first. It's probably the very first one to style. Okay, so you click on buddy. Same in here. I look there's a body or pages. So what you can say is actually all the type from this is going to be some crazy. So we can see it all IDD, QD. It doesn't work when you've clicked on there. My d, d, Q, d. Look Comic Sans. The default now is Comic Sans and joy enormous. If it doesn't ask for anything. If it doesn't specifically say be something like two homer, it's going to default to Comic Sans and my 16. Okay, So style your body first. It's good for doing the background color as well. Okay, so I'm gonna go, my background color is going to be this color. Design award goes to dance, got the body looks after the background color plus everything inside of it. It says, Hey, you all, you can go through and say, I want all the fonts to be this and the size. Unless I override it because the heating is a bit more specific than the generic old buddy. So specificity kicks in and says, I'm not going to be Comic Sans. I'm gonna be this same with the paragraph if we delete it. If I go into here and say actually, let's go to my whole paragraphs and go into typography and say, how do I clear it? Because I can change it, but I don't want to change it. I want to clear it. That's right. Hold down the Option key on a Mac, alt key on a PC, it goes, all right, I'm not going to tell her what to do. I'm going to default to whatever the default is in a mike cases now Comic Sans because it's coming from the buddy, Oh my goodness, the lists come along k. So there's lots of things. Style here is pretty important one for changing by default because I know every time you do something like that is an underlying Can you see the underline? There is a little strange blue color. You might decide actually now I'm going to be links. So I'm gonna delete that. Okay, Let's try how I got that class on there. I think I was mucking around with it, but I'm gonna say all links now I have a text decoration, topography of, I don't want it to be underlined. I want it to be none. Thank you very much. And I don't want to be that blue color. I want it to be just the regular text color that I'm using. I'm not even sure what the text color I'm using. You go you might leave the underline on there so that you know it's clickable link. Well, you might not least the blue is gone. Okay, same with buttons. Click on this. There is an old links. So all links is a bit of a strange one because all links are very similar to this one here, which is what do we decide? Ball links, they are the same. So when you ask styling, especially all links, a button is styled link, this takes link is the same and the same when you are dealing with something called a link block, it is still considered a click on it or is it linked block? It's still considered all links. It's one of the few ones that has like a multi-use. But if you find yourself styling the same thing over and over, have a little look at its base level thing. Go through a bit. It's got a class on it. Okay, delete the class and just see, remove, got it selected, click on it to see what appears in this HTML tag here, and maybe you can style all of them at once on all the pages. Well, I did not think would end up here. Then the amazing designer, you're welcome. We've learned what the, these kind of HTML tags or they're kinda defaults for the page, the call block-level tags style, then you can style everything on a whole website all at once. And if you want to add classes on top of them for little unique changes, alright, that's it. I'll see you in the next video. 33. Combo vs Global Classes in Webflow: Hi everyone. This ugly old design is here to teach us the difference between global and combo classes in Webflow. Let's dive in a quick note before we get going at this is relatively tricky. There's gonna be some of you out there, they're gonna be nodding and going on. That makes total sense. And there's gonna be some of you out there who are going, Oh my goodness, my brain exploded. That's okay. I tried to introduce this early on in the course so that we can flush it out over the length of the course. So it's not a surprise at the end, but if you do find yourself struggling a little bit, that's okay. This is tricky stuff. You're allowed to be a bit confused and hopefully by the end of the course, we'll get there better and you can maybe come back to this video. Alright, let's get going. Don't explode your brain. Alright, to understand a global class, we're going to ignore just for this video, the HTML tags, like the default ones. We're gonna look at combo classes versus global classes because it just takes away some of the complexity. Let's look at a combo class because understanding where that finishes is a good place to start understanding of global class. So I want to create a class here called hitting. Okay, and I want this heading to be a font of Mary with a, I don't want it to be a font color of red. And that's what I want. Now. I need two of them. There's other hitting down here. This one needs to be blue. So what I can do is I can add a combo class to it because I changed this original one. It's going to change both of them. So I'm gonna combo class. And this is going to be cold rid. Note, let's call this one blue. So I can say with blue, you are going to be blue or purple. You get it and it's blue. That's a great use of a combo class. Okay, it's built on top of the original one and you add a little bit of extra. The next thing is where it's going to break down. I want to add the combo class is nothing wrong with the third combo class, but let's say it's something you want to use a bit more than just the hitting margin-left. And that's a shorthand for margin-left. And I'm going to have an x out, which is a really big, big one. Instead of saying 64 pixels in case I change it, I'm just going to call it Excel, good, kind of generic size. I just made that up. I hit Enter on my keyboard and I'm going to say I want a margin of 64 pixels, a good Excel size. So I've got those little combination. Now though later on in the course or lender on in your website, you're like, Okay, I need, let's grab an image or is he missed the image? Is Edom in there? He's not inside my container. It's going to go inside my container. And I need to push him across the exact same match. So I'm going to go right, I'm going to use it. Same thing in L. It's not there is my email. What happens in Webflow, and the way that they structure these combo classes is that there actually, you can't have e-mail Excel kinda globally. It's attached to this kind of structure here. Let's have a look at this thing here. It's called the stone manager, showing you that we can only have ML or ML margin-left extra large. You hover above it. It says six equal pixel's only after blue, okay, And only after hitting, they're all attached. It's a nice way of grouping them. Otherwise you end up classes all over the place where they have trouble is, is if I go to hitting now and I say, alright, hitting, I would like to be, when I got blue is ML, can't use that spacing globally. So this is where, here's the global one. How do you do it? What you do is you add diblock. Book has a nice generic thing. It's just an empty container anywhere on your document as a Meta. And you add a class to it at the root level, you're not building on top of anything else. This is nothingness. We're going to click on it and we're going to say you ML, Excel, medium, lift, extra-large. I'm going to hit Enter not, don't just click down here that you might be running into that problem I should have mentioned earlier. Hit Enter to make sure there's a, I've said Yes, I'm going to make a selector. And I'm going to say you are 64 pixels, okay? Because I did it at this kinda like root level, okay? I don't really need this anymore. It's created. If I delete it, it's still Leah in my style manager, but can you see it's at the base level here. Now it's a global style. Now I can say you, my friend are ML Excel. You go push it over. This guy. You want to be MLA Excel to Excel, that is a global style. Let's look at another good example of combo and global, and we're, both of them are, can live in harmony. So let's add a button. So I'm going to add button here. And let's say that this default stuff I want to change. So I'm going to add a class called button. You'll notice that there is no, There's an old links, but there's no Like button HTML tags. So buttons are just styled links with padding and clickable. Okay, so we're going to create a button tag, sorry, a button class maybe had returned to create it. I'm going to say rounded corners are going to be really big and obvious. It's going to have a font. Should be changing this probably with my body tag, but we're just gonna do it for this guy. So I'm going to say it's going to impact. Let's do Homer note something more obvious? Let's pick that one. Okay, so my button is these two things. Let's say I want a large button though. Okay, so I'm going to create a large combo class and hit Enter on my keyboard. What I'm gonna do is I'm going to say you have at the top here some extra padding. So holding option on a Mac, alt on a PC. Okay, I want to be something like this for the large one, maybe even bigger. And I'm gonna change my font size. I'm gonna move it up a couple. Okay, So that is a combo class, a good one. Okay, so I've got a button that does the generic stuff. So it means I can have a button or are you button? A button and that button class. And it has rounded corners, but there's also an option for a large button, which I can turn on and off. And I can create a small one or medium one. You might have a square button one and not squared button one, where global class would be useful now is coloring at k. So I could call it the button, but there's gonna be instances when I need a light button on a dark background and vice versa. So the trouble with doing that in the way that Webflow does these combo classes is that I'd have to create so many different combo classes, okay, I don't have to create another primary. Let's say the color is going to yellow. I'd create a yellow class. The trouble is I'd have to create a button small yellow class as well. They don't kind of crossover. A global class would be useful because I get to use it on more than one thing. So let's create a div. Luck. Okay, Let's call this one background. So bg is a really good shorthand for background. And I'm going to create primary. It's useful to go primary, secondary, primary, secondary to secondary three, rather than the name of the color in case the color changes, somebody changes the main color for a brand. Us stuck with background red, you've got to break ground. Rid might end up being blue case. So primary is a nice kinda placeholder name. And all I'm gonna do is I'm going to twirl this down. I'm going to say backgrounds for this. Let's say my primary color is going to be this color like purple. Perfect. Okay, and I'm gonna create another one. So I'm gonna go, Let's use some of our shortcuts. Remember Command E, div, diblock, hit return. I think my diblock when inside my diff plug. They did. Don't do that. Come on out. You're gonna do it. So I'll leave this in the course. Diblock outside of the other things is a shortcut. Then this one's going to be called BG, and this is gonna be called the secondary. These colors, my secondary one's going to be my maroon. And then I can delete these two. I don't need them anymore. There's still in my styles. There they are. It means this button here. This button I might decide is these things. Plus, I'm going to type in BG and there's my primary color. This one here though, I need it to be my bg secondary key. See these kinda like high level ones are quite useful because I get to use it for those buttons, but it goes here, this one, actually what else needs a background? The hitting doesn't really need a background. But hey, go give it anyway. Let's go bg, secondary. It's not really good, but you get what I mean to you. It's something that needs a background. Let's add a section. The section here needs a background BG of primary. Nicole thing about it is if you change, this primary client comes back and says, Oh, it's not Jushi enough. You want to darken it or lighten it. Can you see everything that has that global class applied changes? This is really good at that initial stage. It's just good practice to use global styles for things like just background color, things like spacing. Okay, it looks we did up here. Remember the e-mail Excel and other good use for it is maybe a drop shadow, okay, if you're using drop shadows over and over on a document and you kinda think it's right, but then you wake up the next day, it's horrible. You can change them all as long as you've just done it and that kinda like root level and not combine them all up. Nothing wrong with that because that makes sense, but enlarge. But then we added these global ones in which we can apply on top of as well. Does that make sense? If it's a little confusing, don't sweat it. Just go through and start adding your own classes, maybe some combo classes to get used to it. I hope that was useful. Global classes. Here we go. We'll do it again as we go along, but that is it for this video. I'll see you in the next one. 34. Class Naming Conventions in Webflow: Hi everyone. This video we're going to look at naming conventions for classes in Webflow so that you've got some sort of structure to work too. So you know, it doesn't naming everything, everything. We'll also look at the beam BEM, naming convention system as well, right, let's jump in. First of all, it is an art, not a science. There's no like specific. This is exactly how you should do it. And if he had not doing it this way, it's broken. You can name it anything you like. You just end with a bit of a miss. If you don't have some basic rules to follow. And saying that though you'll end up with some messy class names, it just happens, we all do it. And he started for project really good. And then by the end you've got final, final, final, final version to all those sorts of crazy naming conventions. But let's go through some general guidelines so that you can do it good. The first one is this one I told you before early in the course, I call this text read. It was easy in the beginning of this course just to get us started and understand what we're doing here. The trouble with red is the class name is red. If somebody goes through and says Actually it's now going to be yellow or some other color. You can see the class name is still red. So don't give it a literal names, give it a little bit more generic names. So ticks, colors a good one, okay, in terms of color naming, often people won't say that. You can say color one, color to color three for the different texts colors you've got. But it's really common to use primary for your main kind of brand color. You'll have a secondary color, some sort of extra color that you might be using. You can have an accent color. If you'd need a third color. You can mix into. So that's a common naming convention for colors, primary, secondary, and exit. So remember, do not call it red, give it a bit more of a generic name so that you can change it later on. So that's tip number one. Tip number two is be kind to yourself. Don't call it what you could call it btn, underscore 01. That's kinda helpful. It's manner. It will be a lot more useful calling it button. And this might be my call to action. A call to action. You can be CTA, lot of typing going on. That's very loud. You can get away with short names, but remember, somebody else might have to work on this project. Future. You on this project might be like, What is this? That works? I know that is a button and the background color and as margin left, but they'll do their teeth. You can. Okay. And people do it but write it up descriptively. It doesn't hurt. Tip number two. Well, tip number three, this is 2.5 and you don't have to worry about how you type it. You can use spaces or hyphens. A lot of people will go button underscore and they'll use as my primary button. Okay, That's fine. You can use spaces. You can use any case you like. You can be button and a space, one. Because y don't want to show you is add that one there. Let's look at the CSS of it. So we can check this thesis by going down to the little question mark and go to CSS preview. You can see whatever you type into Webflow, workflow go silly. Human. It needs to be a CSS class, needs to have no spaces. So you see where it says space one over here, zooming over here, back over here, it puts a hyphen. And what about underscores? You can use underscores if you like. It doesn't matter. The only thing is don't start your class with a number. It doesn't like that, but you can use upper or lower. You can use camelCase. Camelcase is exciting. Button. Primary, okay. Up to you, whatever you like, or maybe you've come from development world so you can use your class naming styles from that, it does not matter. Tip number three, spacing. Spacing is very common if I need this. And let's actually remove this one in class. If I need this to move over from the side, and I need to add a margin. I'm going to make it a global margin, okay, so I'm going to make sure that I'm not building on top of a combo because I'm going to reuse this margin somewhere else. You can either drag a div tag on and apply it to that. Or because I've got no other styles applying to my button, I could apply it to that, but let's just do it as the block a margin. It is very common to use things like extra small, okay, or small or medium. Burgundy, these large in Excel, you can use that sort of abbreviated sizes. It's better than using 64 pixels because you might decide that later on it needs to be 63, okay, and you're gonna go and change the name again. So it'd be very common just to use medium. Another thing with spacing is that often you'll do them separate. So we're gonna do margin and we'll do left. First, k left, I'm gonna abbreviate. And then I'm going to say going to be left medium. I'm going to hit Enter and my spacing for this is going to be margin 24. You'll notice that I'm using lots of strange numbers, not, not typical whole numbers you can use 10203040. People will use and web design multiples of eight. It's based on kinda like an eight point grid. You've done a lot of development frameworks. It's not, you don't have to use these sizes. It's just really handy. It ties in with the font size things. You'll notice a lot of fonts, 816-20-4302, I can add. I'm going to give out there. But you'll find lots of sizing is based on those multiples of eight. There are easily divisible, which is handy, and it also gives you a good range. Eight quite small. 16 is good, kind of medium-size than 24 is a nice good jump there, there, there, good spacing. So you use multiples of eight or not. You can get even smaller. It is totally up to you. You could be doing this margin-left MD. I probably get down to that small for these things like margins and padding left with just b, P, L, MD from my padding left them are applied to something that is a medium space of 24. Question might be, do you start a document and go through and make a bunch of Global classes like this first, you could, I just go through and build them as I need it. And as I get through the course, while through my website design, I need to create classes less and less. But you could at the beginning at the mall, but then you'll probably never use, I don't know, padding top, extra large. You will only create the ones you need. Credit globally. Going to then go and say, you need heading of lift, medium, gonna get it as well. Padding left medium, reusable global style. Next thing I want to show you is beam. You're going to bump into beam because you're going to Google what is the best classed naming convention. And this beam is used foolish. I use a flavor of it and I've kinda been using it in this course already. So let's discuss it because it comes up a bit. It's the, the savior of naming conventions. The only trouble is, is that it works really great for really large sites, will use a bit of it for our smaller site here. And it's also a little bit more useful when you're actually coding your website. We are using Webflow to do the coding for us, okay, So a lot of the syntax beam is helpful for things like where are they? They have these double hyphens and then they have underscores. And there's this interesting kind of syntax to help somebody who's looking at the code understand what you've done. But because we don't look at the code here, it gets made, but we're not hand typing it, but it's saying that it's useful still. What is beam? Beam is a block element and Modifier. Okay. Where are they? Block Element Modifier. What are they? And easiest, the way I explain it as generic thing, specific thing, variant of the thing. Here's an example. Button, pricing, button, yellow pricing button. They get deeper and deeper in terms of the nuances. So you do some generic stuff, you'd say, Okay, my buttons have rounded corners. They are, they're a font of this font that I'm using a size of this and they've got padding around it of this. That's what all buttons on my site, That's the generic button, but there's this one specific button. Okay, that needs to be bigger because it's on the pricing page, the call to action or CTA button. It needs to be big. It takes them bigger padding, but it's only, so that's that you do generic stuff. Okay, so that's the block general, specific button, the pricing button. You might have a smaller version of it than the generic one. Teeny tiny one that goes on. Form submit, okay, still uses rounded corners and the same font, but it just happens to be smaller than the modifier is. It might be a yellow button or it might be a dark mode. Dark mode is when it's a button on a dark background. So it has to be a white button with black text or flight mode button. That's what this beam means. It's a good rough kinda general rule to follow. So let's actually do an example of beam because it can be confusing when you first heard it. I'm gonna get rid of anything that I've applied. Move class. What I'd like to do is do the generic button. So I'm looking at my Figma or XD or Photoshop file and going, my button needs to look like my button. Ignore existing classes. If you do have classes you don't want, you can go to your styles and go clean up two styles. It says all the following styles. These hadn't been used anyway, saying you want clean them up and say Yes please, because I haven't used them. So I'm back to my styles. Click on my button, I'm going to make a stop button. I'm just gonna do generic stuff, the block stuff, the b in the beam. And in this case, I need to be, it needs to have typography. I'm using chair. What are we using? Oswald, let's say. Okay, and generically does this, the font size, generic, the generic font size is small. Let's say it's 13. Decided that he's going to have some rounded borders. So I'm going to say you are, I don't know, five, not big enough. And using my up arrow, just to be obvious, things a bit squishy. Anyway. So this is my generic, be my beam, my block level generic. Now my specific button I'm going to copy and paste this one is gonna be one of the pricing page. And it's kind of all of that except it's a little bit more. So this is my element, the E and the beam, what I call specific because of this specific one fold. First thing, even what am I saying? What's pricing? Cta, my call to action button. Okay. It's going on my hero page, whatever you want to call it. And so naming conventions already fallen off the wagon. Alright, so this is my CTA and all it is, It's gonna be a font size of 16, okay, It's gonna be bigger. It's going to be all caps. And it's going to have a bit more padding. Remember, hold down the Option key or Alt key on a PC and do both sides. It's gonna be a bit bigger that way. And that way. It might be large or something else. A bit bitter button, CTA is probably not great. School as one large, then the next one, what do we do? Okay. I want to add the color of primary. Okay? In this color of primary is going to be Alt or Option. Click on the chevrons, close it down. Background is going to be whatever my primary color is okay for my design. When I use over and over, there we go. So I'll use this one the most because it's the most generic one. This one here gets used just once on the homepage and maybe once on the pricing page where you want to use it and they say there's a submit button version, okay, so I'm gonna do the same thing, grab another button, I'm going use my achy to go to Ed. I'm gonna go button. You can go in the gang. So it's mostly the same, except I want this one to be I want it to be button. I want it to be large. I do not want it to be large and remove it. I'm going to make this one small. Okay? And this one's going to be using my foams. So to actually create the small, it didn't just click out. You actually go to either click Create or hit Enter on your keyboard. This one here, the font size is going to be lower than normal. It's good to toggle graphy you. Less than small. It is going to be Oswald extra light, kinda fit the button size. I'm just mucking around now, you get the idea right? Smaller, smaller. And maybe the rounded corners need to be adjusted because they're a bit big for this particular use case. So that's gonna be five. So that's it, That's the beam. Let's do another example and then I'll show you one of the problems that you might have noticed that I'm ignoring because I'm trying to explain beam. So let's do one more. So hitting the block is going to be, in this case, we're going to use the block is HTML, all headings. We could make a one chord headings, but there's already this one that's on all of them. We looked at that earlier on the changing the default. So we're going to use this button does not have its makeup button. When there is no like All button tags, links one but links does too many different things, so we just grade around one. This one here has a generic HTML heading, one tag, great, so this is my b, my block. What I want to do is I want to make sure I'm using this great vibes font. Okay? And it is going to be this hitting size of holding Shift and just using my up arrow. I've decided that that's what I'm using. Okay. Maybe I'm not sure why I'm styling this. And yeah, that's what I'm gonna do, size and font. And then my friends might be it, that might be your beam over. You just did the beam, the beam because headings are the same on every page. But there's this time later on in the project where you're like, Oh, actually on this blog page, I'd like it to be really big because they've got a lot of space to work with giving a lot of there's a lot of negative space that it can fill. Great, So I'm gonna go, alright, so I've got these headings that I've done. I've done my block. Now specifically, I'm going to do an element. And I'm going to say that this one is the H1, okay, for my blog pages. So my specific thing, okay. On this specific use case, it's kinda do this. You notice that it didn't have that same structure as the button did where you can have this because we had to invent our first B. Whereas on our hitting, there is already that all HTML tags, but we're into the second part now on my blog. The only thing I'm going to change as the size, it's like really big. Because I've changed the size. I'm going to have to play around with my margins on it. Okay, let's pretend we're working on my blog posting page because these have like big descenders here, we're going to have to push it out. So my element is like this, great, right? But then on some blog posts, I'm going to have an image in the background. And some of the images are light, which needs dark ticks when this will be fine. But there is another one I'm going to copy and paste this. There's this other blog posts that has a really dark background. So what I'm gonna do is my M for my modifier, you're getting the idea right? So this is going to be my dark mode vision. Okay, Doc Mode, hit Enter and I'm going to say the only change in this one is going to be this kind of like off-white. So you can still see it and it kinda looks nice against that background. So that's our beam in a kind of a simplified form. It gives you some structure at least of how to do this thing like how much detail to go into generic specific variant. Was that helpful? I know that being was confusing to me. Go to understand it. So yeah, you will run into it. People were like, why are you using vein? You'd be like, what kind of him? In bits? And when I say m bits, there's just like syntax that goes along in here, and it gets more and more useful the larger the project. And our project currently isn't super large. So that's beam. Let me talk about the problem we might have run into or we have is where beams, understandable then combo and global classes pop in because he liked about this one here. We've got this, sorry, this first one here, the B of the beam, the block. Again, we've got a button and what have we done to this thing we have done, we've picked a font because it's blue, perfect a size, and we picked rounded corners. Cool. Then That's what we did. And then this one here, we added a large option. Then on top of that, I'll modify it was primary color. The trouble with doing it here as a combo class, I'm in my Styles Manager. So combo class gets displayed like this. Primary color only can be seen after large because that's the combo. It also shows in here after small, I can't pick that primary color. Let's try it. So let's go button. Go back to here. I'm going to say after small, I want that primary color wasn't there. So I have to make another one. You do if it's gonna be a combo class. So what I'm gonna do is I'm gonna get rid of it from here. You remove, I'm gonna go back to my styles. It's still there. I'm gonna go clean up styles, remove one primary color. Cool. So what I wanna do is created on its own. So I'm going to say u div block is going to be our background. Actually going to create the class first. There's going to be called primary color. And this is going to be that kinda remember what color I picked? What was it? That close enough. Close enough. What a man, whatever that is. Okay. So I'm going to use it there and I'm going to six as a global color. I'm going to say you are now. Remember that the primary and should appear. You see what went wrong. All right. You wait there, I'm gonna go check it. All right. Forget it out. It's because I named this thing, but then didn't hit Enter on my keyboard. I just click somewhere else, which I have a habit of doing. And it said, Oh, just going to call it a diblock instead of their name you gave it. So that's why we were wrong. I just didn't hit return. So I'm going to say color primary. I prefer to put the kind of generic pot well, the more you reusable pot in the beginning of my naming, okay, so then I can have color, secondary color. And this one might be BG, background color primary because you'll have takes color primary as well. There you go. I think this will work. So now I can say button Lodge and I can say you are going to be, I can start typing color. There it is there. The cool thing about it though, is this small button can also reference that one to say color, background, color, primary, cool. You go. So when you are building your beams, sometimes you do them as global and sometimes as combo classes because there is no use for having a large as a global one. No need because there is no large. I kinda go, Oh, hitting, I would like to apply large two, which is going to apply padding either side and left and right. It's purely for button combo classes. Great. About background color is great. Because then let's say the section that it's in, let's say actually do the whole buddy. Buddy can have background color, primary hay. And then I can say I was gonna leave it like that because I can now go and change my background Primary, do anything else, and all the buttons come along for the trip. If I let's change the background color, you can't see them, can you? Because they're on the top of that. And how am I going to do this? Come on day. That's not do this. Let's add a div. It's at a section underneath this one that has the background color bg primary. Now if we change it, they'll all come along for the ride, get the idea. Same with tics color, any of that sort of generic stuff is good because it's reusable. And it means that I don't have to go and change button, the background color to something new. And the section and the hitting that I'm using are not going to work. If I try and do Biji to this, what's going to happen? It's going to work. That might be a cool design you're going for, but it's actually kinda like n, but it's not what it means. I'm gonna have to create another global style called text color, primary and secondary. An excellent, alright, we've gotten too in the weeds there. We had some issues with Dan's naming conventions or forgetting to hit Enter. So don't forget when you are naming something and you want to edit. I have a habit of doing this. Name it and then going off and clicking on it. And what happens is it just didn't create, it, wasn't there at all. Hit Enter on your keyboard. Now, those are the naming conventions that worked for me. There were other variations. They might be something you use that you really think other people will find useful. So throw it in the comments here. So I'd love for you to take the time if you like, always missing that one or this is another good way of doing it or different good way or these are the problems and these are solutions. Throw it in the comments because it'd be super handy for you now as the viewer to go and have a read of those to say, I prefer this way because there's no real rule as long as the website renders nicely in the browser, you can have final, final v2 if you want. Alright, that is Dan's guide to naming conventions, not science. It's more art and don't be hard on yourself halfway through a project. And it's all like in bits because you've got terrible naming convention. You just keep on going and just keep on tracking what I wanna do every time I build something and when flow is start again to restructure my class name things because you end up sometimes with just stuff that you didn't intend to. But either we're trying to be quick or you couldn't really think of it at the time and you end up with little bit of a mess. It's okay. Be kind to yourself. It's okay to be messy. And if you're a developer doing this course, you're like, no, it's not okay to be messy. That's okay too. You can be super legit, but it comes with a bit of practice when you got everything kind of locked down and got those naming. Perfect. Alright, that is it, but a rambling one, but I hope that was useful. Let's move on to the next video. 35. How to use Style Manager Webflow: Hi everyone. In this video we're going to look at this thing, this style manager, I hinted at it in an earlier video. Let's go through it all and what it does probably in this video now, okay, Style Manager, this one here. So what does it do? Allows you to search classes, the names. So let's say I need to find everything that's got hitting. Okay, there it is. There are these headings here. You can see, oh, look, there's a generic one. There's a random dance hitting. I've made a one-two-three-four and you can hover over them. It'll show you the syntax, and it'll show you what it's doing. This one here hitting three, says margin top 0% margin bottom z represents got a font-family, a color and a font size. There will be different. So that's one thing that does. One thing you will find you like, oh, and then it can do this. No, it's done some basic stuff. I'm hoping the style manager will do a lot of like Find and Replace in the future. It might be there now because you're in the future. But it doesn't do a lot of what I thought it would be doing. Okay. One of the cool things it does is let's say that the client comes back and says, we're going to change this primary color. It needs to be brighter or darker or green. Okay. What you can do is you can grab it because let's say you were pretty bad with your naming, okay. Or you're looking at somebody else's purging and I'm aware of they used it because I can see it sees there, there, there, there there. You need to be careful because you like I want to make sure I get it all because it might be just a small hue change and you might be getting it wrong. So what you can do is install, manage it, and actually just paste that color. Okay, that's the hexadecimal number for it. Hash five, if five, if 5D, you can read. But at least can you see here it went through all the attributes and set. This one uses it, this one uses it, this class, use it. So you can go through and find them all. Now it doesn't do find and change. A car. Can go in here and go, Oh, just click it and change it. But yeah, it's hoping that feature will come. But what you can do is you can stack it takes color. Let's look at this. Then I'll show you all the places being used, affected elements on this page or any other pages. Now case, we've only got one page. I can kinda see it. Can you see it? You can click on it and it takes you to this two places. I've used it. At least, you know, that's where it is. I know what the class name is so I can go change it. Can't go in here at the moment and change it. I can change the name of it. Okay. It's not what I want, but I know ticks color needs to be changed so I can go through, find text color in here and go in and change it so I know it's there. I know it's Eros was it that was there. And now I can go and change it because they're the same ticks color. Let's change it. Something obvious. Those both are going to change. I just need to find one of them and change it. And I can work my way through pacing in that old color. So that's the next one to go and change. Where is it? There it is there. I can go find it in here, hitting three and go change it to that new one. So it's kinda useful. Other things it can do, you can type for fonts. So I know I'm using X0 a couple of times. I know it's in hitting 1.2, which is this one here. Okay. It's not being used by hitting three for some reason, I'm using something else. Okay, but you can type in any sort of attribute, sizing the actual name, color-code, it will go find it. The other thing is cleaning up. Cleaning up. I'll show you here because we're in the style manager. Often I won't clean up until I'm further on in the project because there's four styles in here that aren't being used in the project at all. Let's go to clean up case a dance hitting is not being used anywhere. There's one called hitting is not being used. There's a combo class that's not being used called image hero div past events. And there's one called text block j. So I can clean these up. And in this case, I know it's gonna be fine. But let's say later on, on the next page that I'm building that I do actually need dance hitting and it's gone. Okay, so tidy it up at the end. You can do it while you're working. It's fine. Like, I feel confident now that actually I'm not going to use any of these end workflows telling me they're not actually applied to anything. So even if I do it, it's not, it's not gonna break. It just means I won't have access to them later on. So cleaning them up, Vega, we'll tidy. Little bonus I want to throw in the end here is, I haven't mentioned it yet, but I thought it would come up by now. But let's say that I've got this hitting him and I copy it because only use it for something else, not a heading two, I'm going to say I want you, I'm going to use it after this less. Yeah, paste it somewhere random and you like, actually, I'm just going to use this for something else. I'm not going to call it hitting two anymore. And I create a new style called, I don't know, hitting five and I'm gonna go and change it. So the problem with doing that, so we change it and we changed the color to something else because I'm using it for it. You haven't actually made a new class, you just rename the old one. That happens quite a bit for me. At least I go and copy and paste something I'm like, Okay, I'm going to change it and make a new one. So I duplicated it thinking I've made a new class and I get to rename, but actually we just rename this one as well. This is quite hitting five now. So we do want to duplicate it and make a new thing. So not using this, they go to delete it or delete or remove the class and give it a new name for hitting F5 and start working on it. Or you can say actually that was pretty much close enough so I can duplicate the class. And it's gonna equal heading five. And I'm gonna make this a bunch smaller. And you'll notice now it's not connected to this one. So just know if you do want a duplicate, an element that already has a class on it, don't go and rename it. Either delete it, make a new one, or duplicate the class. That makes sense. Not really a bonuses. I'm calling it a bonus. Alright, that is the Style Manager in Webflow. I'm looking forward to getting it upgraded. I feel like that could be cool. Stuff like find and replace in here. Can we add like groups so that we can drag on classes on to staff? I feel like maybe the future of Webflow in there. Anyway, that is the Style Manager. 36. Production Video 2 - New Portfolio: Hi everyone. This video is a production video. We need to create a new site because we're going to start now building our portfolio. Now that we've got some Ned CSS skills behind us, we're actually going to stop making stuff and putting it into action, so I'll do mine. That's why this video is relatively short. It's gonna make a new site. I'm going to have to upgrade my workspace to a paid version. I'll take you through what I did. But yeah, so create new site if you can squeeze it in under your free account, do that. But it's about that time I need to upgrade my workspace. I'm going to choose monthly anyway. Let's do it and you do it. Alright, so first thing we're going to run into is if you're on a free account, we're going to have to upgrade or delete one of your two. I'm going to upgrade because if I want to add a third side here now for my portfolio, and it's going to say you've reached your limit, you have to go upgrade. So I'm gonna go do that and I'll be back in a second. Actually, I'm going to upgrade to call just so you know, they might change the name of this one, but I just need more than more than two on hosted sites. And those sites need more than just two pages. So let's do that. I'll be right back. Alright, so I'm back at my dashboard at the top there, and I can add a new site now though, any drama, okay, so I'm gonna add a blank site. And this is gonna be Daniel's amazing what is called a dance portfolio. And you can call yours with your name, okay, so build your own portfolio for this one. You're not going to give you a brief because just think of it as your portfolio. Even if you don't have stuff for your portfolio now, they'll join one with your own name. We can put in place holder portfolio, stuff, door. So go on and make your own blank site that you can join me. We're going to set proper class projects later on, but for the moment I'm not going to check this one. Just go do it so that we can start building our portfolio and learning more Webflow stuff onto the next video. 37. Minimum Height vs ViewPort Heights in Webflow: Hi everyone. In this video we're going to look at this group over here, Min and maximum widths, Min height, maximum height. What do they do? Why don't we just use height and width? What does this Overflow button do? All will be revealed in this video. Alright, the first thing to note is that if I add, let's say a container, a key section, okay, and I give this section a name. This section is going to be cold section. Let's just do hero for the moment. I'm just going to just generic examples here and we'll use it throughout the course as we worked through. And so section hero, He's going to have, if I give it a background of something, I pick this color. If I get a preview, click on this. We didn't go. Remember the shortcut command Shift P. Control Shift P for preview disappears. So by default, adding anything, any of these kinda like dibs that didn't have a height by default, so they just collapse and go away. Workflow knows that. That's a bit weird if you're trying to use that design. If you added something and he couldn't see it, it wouldn't be a good user experience. So they just add some fake heightened here doesn't exist when it goes out and publishing the website though. We need to add some height. So that's one thing. There is no height. Take the matrix. Anyway. We can give it some height though. We can give it some physical height. We can say actually this is the height of my hero box wanted to be 500 pixels and that's fine. Okay, The trouble with giving it this kind of absolute height, 500 pixels is that it's not very flexible. So people will use a min-height. Min-height is probably the most common used of all of these minmax is, okay for me at least, it means I can grab something like my paragraph text. Okay, So a a, whereas it, I'll add paragraph. Let's stick it inside and grab it all. And I'm going to copy and paste it because this is what this fixed height. We're going to run into a problem because it's going to get to here and it's gonna go, what do we do? K that fixed height is problematic. Okay, so I wanted to expand. So all they do is just switch it from, let's get rid of a chunk of this scraped off section hero will just use instead of height, will use min-height in both declare it is holding down Option or Alt key on a PC, you can leave it like this and it will expand and contract. But for my design here, Okay, Hello me the first time you've seen them. Anyway, I've got this height that I want. Okay, So I know roughly what, how high it is. So what I wanna do is it's never going to be that small. Okay, I wanted to say actually just give it a minimum height of Foner pixels. So it looked the same as the last one. The difference is, is now when I copy it and paste it, paste, paste, paste, paste, paste. There's a minimum of 500, but if it needs to, it'll get a bit bigger. So it's just really common. Just use minimum height rather than height because you'd bit of flexibility. Min-height gets really useful if we look at some of this, we've made these earlier, and by default they just worked with the right height here. It's because grid is pretty awesome. And if one of these ones moves up to three, Let's go three lines. They all come along for the ride. That is not always true. Watch this. If I grabbed my grid with my grid, there, is that okay? If I say actually you are only two across, it will automatically generate another row. Let's have a look. See, that's two, that's now just one. Why are they the same? And the OCD designer and you're like, I want them to match. Why on the metric, you can give these a minimum height. So let's go to this one here. It's got a div or a class right around the outside member. We put that in earlier. There's something controlling one to all three of them. So I'm doing it to all three. I'm going to say actually for the sizing and dense that we could give it a height, Let's just give it a minimum height in case it needs to expand. Okay. But I'm going to give it a minimum height of, I'm just gonna guess 500 pixels. That means they can be bigger, but they can't be smaller than that. Okay, So I could, if I have this really big card that has three lines or in my case, five-line, it will get bigger if it needs to. But there's a minimum height that's super handy for things like this, like these cards or maybe it's a pricing underneath. An image of pricing might be captioned, something like that gives you the flexibility of height, but setting it all to be the same. So it's min-height to use that the most, you'll just use it instead of height most of the time, jump cut because I got lost. And you might have noticed that I didn't actually do the min-height to the section like I planned. I ended up doing it to the paragraph. It doesn't not a problem in this case except if I want to use paragraph somewhere else. So I did the min-height on this. I really wanted to do on this section, min-height of 500 pixels. So you get the min-height. Let's get rid of it now clear it. Remember, Alt Option, click Instagram, max height. I don't use max height very much. You might find good use for it. There's only one I can think of, even Googled, like other good uses of max height, couldn't find any good ones. Leave in the comments if you've got a good example better than my one K. So I'm going to have gotten this text. And it's in a box that say is maybe descriptive underneath an image, but you don't want it to go on forever. You want those little scroll bars to appear. So what you can do is you can say actually, I want this section hero to have a max height of maybe 300 pixels. Okay, What does that mean? It means that watch this. If I add some more text, copy paste, paste eventually gets a max height. You go one go any bigger than that. If you are injecting a whole bunch of CMS data might be product descriptions or blog posts or something into there. You actually don't want it because at the moment it's overflowing, it just doesn't look right, it's fine. You can still read it. But let's say you want those scroll bars. What you can do it make sure you go to the section hero selected. You can do this overflow option. The moment still visible, you can make it no visible, which isn't very helpful because you want the scroll bars up here. Okay? So you can scroll down and check what's in there. Means you've got at least some screen real estate is used, is only 300 pixels, but you can actually fit in a lot more content if the person really wants to dig in its max height, don't use it very often. They'll come back and check the comments on this video because I'm sure there's lots of other reasons you'd use max height, just can't figure them out right now. Well, one thing you might do with max height is especially for doing this overflow. Click on the section tag. Hero is we went for this one. This forces them to always display this one here is automatic. Doesn't really change much except if it goes less, watch this. Can I get lifts? This is eventually they go away because it doesn't overflow. Now there's no scroll bars. The force from B on all the time. Overflow. Okay, so that's auto. It will come on and off as needed or you can force them to be on all the time. All right, that's definitely max height over about max and Min width. So to understand that, uses the example we did before. We can do the same thing as this. What we did in this one is here, as we said, the paragraph in the hero text had a big old padding on the side. Can you see that? What we did earlier, we can do something similar. I'll turn it off. Remember Alt or Option, click it to get rid of it is I'm going to say that this p tag hero is going to be with my sizing is going to have a max width. There we go. Of how far you want it to be. You might do, let's say 500 pixels looks like, again, you might decide that's it. Okay, so max-width is good for headings that you want to break into two parts. We're gonna do it in a little bit. For this one, you've got a really big screen and it stretches all the way across. You can say actually just force it to stop because I like this kind of negative space over here. So this one here as well, you could say, let's have a max width of 600 pixels. Okay? It just means, oh, actually it's 500, means that it's going to break it on there. If you are injecting different headings for different, say, blog posts, they're not going to keep going forever onto the side. They're gonna give themselves a bit of spice you do with margin. Or in this case we're doing max width. What you might do as well is weaving using pixels will do a whole video in a bit on all the different, these things. There's loads of them. But percentage-wise you might decide actually, I just want it to be at 80%. What does 80% of its, 80 per cent of its parent, k of the parents space, which in our case, the parent here is the section here, okay? 80% further out in the body here is a lot wider. And this gives you a better example. We grab heating one, it would copy it. Let's put it inside something. Let's put it inside of this. Okay. So I'm gonna put it off to the heating for will it go in? Can't read native clipboard data, doesn't like it because it's got that in it. It's got the span text and I'm going to grab that and paste it. Kinda can. Let's try it again. Let's go down here after heating for paste. Now it's 80% of this space because it's kinda trapped inside this div past events class that I put in here. If I say 50% here, it's going to be 50% of it weigh different size from 50% up here. Okay. Because it's 50 per cent of that larger container. Does that make sense? You can change them. So a desktop you might decide that 50 is good. You wanted to break because you liked this negative space, but on tablet you might go, I don't like it. 50 too. Caught up in the corner and maybe it's breaking it into three lines. You're going to say actually on tablet, I'm going to say you can be a bit more, 70% or 8%, okay? And when it gets down to these ones, 80% still not enough. So you might actually just go full hundred percent on all of these from then on down. Alright, so that is max width. We've done it to our headings, but you can do it two div tags, you can do it to anything you like. Okay, so let's look at doing minimum width. At minimum width example. Trying to think of one. Don't use it super often, like minimum height. But minimum width can be useful. You probably understand what it's gonna do, but let's do it together anyway. I'm going to have to, these buttons are going to copy and paste them. So two of them. And let's say there's actually, let's make three of them. This button here, if I go like this, and one of the buttons that has like a question mark in it, the buttons too small. Imagine if it had a minimum width. You got it. So button hero is actually going to have a minimum width of guessing how big is 100, okay? It means that I'm going to make the fill text centered on all of them. It just means that this one here, if this gets down to like a really small word, like Dan, can you see it's still won't go past the minimum size. That's actually a good example. I was struggling there for a second. Alright? So you use min-height a lot and you use max width a lot. At least I do the other two. I don't use very often, but you know what they do. They're the opposite of the other ones you use lots. Could this be the worst video made in this course so far? I think so. I've been at this for more than an hour and that's as good as I got. I need to move on. Hopefully you get the idea. Don't use absolute heights, use minimums and maximums to give yourself a little bit of Flexibility. Before we go, let's apply our min-max, goodness and fix up the myths that I've made in here. So I have got, I'm going to copy this one. I'm going to have and white navigation along the top. Actually you just need to navigation section hero. Let's go Command E or Control E on a PC and go in section. Okay. I did about sections. They can't go inside each other and it doesn't just think to put it afterwards. I hope you could do it by creating a container first and then go Command D and go section. And then it should go into the right place. Or does hit a and drag it out. So I've got my section, Let's give it a name. Cool, this one section. Okay, it's white by default, that's fine. And remember if I go and preview it and back command Shift P, Control Shift P on a PC, it's gone. Where did it go? It's there in their designer, not there in the actual website. Why? Because maybe we've got our fake height in here from Webflow. Let's give it some actual height. Let's give it a minimum height of 80 pixels. Okay? Just to add, allow for some flexibility. And let's preview it. Command Shift P. That didn't work when I'm over here, can you see I'm half typing this AD. So commodity of p in any smash my keyboard, then work. I'm going to click in that kind of Canvas over here, then Command Shift P. I'm going to go hold this space open. Alright, this thing he needs fixing, first of all, is a bit of paragraph tics that I don't need. So goodbye paragraph text, click in here. There's some other things that I did to it, but the overflow, I'm sitting it back to visible, which is the default. And I'm going to have not a max height. Remember, optional Click that one. I'm going to have a minimum height of 400 pixels. And the color, I'm not too worried about the color for the moment. We'll show you how to pull colors from Figma very soon, or XD or Photoshop. But at least my structures, they have got my nav section hero. It's all tiny duct. Alright, I've Wow, that is gonna be it for this video onto the next one. 38. Convert Figma to Webflow: Hi everyone. In this video we are going to take elements from our figma design over to Webflow. I'm going to show you how you can work between the two bits of software. Now we briefly talked about why you would use something like Figma and not just design in Webflow, you're a pretty good sense of it now, right? Because if we have to make design decisions here in Webflow, move things around. It's quite tricky because we got to consider things like spacing and margin as a padding or as n, something like Figma or alternatively XD, which is a competitor, or doing it in Photoshop or Adobe Illustrator. The design here, you don't have to worry about it. You just like, I want the button to be over here because it looks good. Okay, you'd have to work out how you're going to slice this box here. You gonna get it to overlap this thing. How do you get it to go behind stuff? Figma, just move it there. In. Sorry, yeah, Figma does move with it. In Webflow, we've gotta make some decisions on how the code is going to render it. So it takes a lot longer in Webflow. It's so much easier. Design, get it tested in Figma, get the client to sign off and then start building and workflow. So there's not gonna be a full course in Figma is just going to show you how to pull the elements you need to build a workflow. If you want to learn Figma, I've got a course on it. Okay, Go check that out. It's called Figma essentials. And so, yeah, let's actually pull our first bit. Let's look at images. Let's say we need this fella out, this handsome thing. Don't ask. So here in Figma under design, you can down the bottom here, click on Export, click on it. Scroll down to the bottom, you can decide what kind of image format I want there to be a transparent background. So a PNG is great. A JPEG is going to export it, and you're not gonna be able to see around the edges of the square. So PNG is great and I'm going to export it. And where am I going to export it to? I'm going to stick it into anywhere. And it will bring it into Webflow k. So put it where you need to. I'm going to put mine in the exercise files okay, after this. So you can pull in these images if you want a handsome caterpillar in your portfolio, but otherwise you'd be making your own. Okay, so I'm gonna throw mine on my desktop just to throw it there. Let's go. Image of Dan. There we go. It says on my desktop, if you do want to grab more than one can, you can go round and mark all these things for export. Export this one here, or just double-clicked on it here. I'm going to export that as a JPEG because it's squared, it's got lots of colors, doesn't need transparency. Excellent. Okay, you go through that, do them all the things you want to export it. And then in one big fell swoop, you can go up to here, go to File Export, and we'll explore all those images in one big go. So instead of grabbing images out and then bringing them into Webflow is just dragging them onto the desktop, into the middle of the designer. Or using this option here and drag them in there, or click on that one to upload them. So let's images from Figma into Webflow. Let's talk about colors, okay, so it might be as simple as double-clicking on this. Can you see there it is there. Just copy and paste it. I want that to be a button in. Where's my button? Or I can move on. Okay, so I've got a button in here. I need it to be that color. Okay, there you go. So pulling the colors from Figma, you can be a bit fancier and switched to this Inspect option. You can select options quite nice because it means you can just kinda move around and click on stuff and you can see Inspect. It's doing a few things. It's giving me not only my colors, okay, the moment it's giving me a hue, saturation brightness and alpha k, you might actually just go to hicks, copy and paste them off this. You can see they share the same CSS output. We're not going to use that in Figma. We're just going to grab the individual parts so you can grab colors that way. And the other nice thing about inspectors to do with the spacing. So can you see here and I'm just hovering, not doing anything. It's going to tell me I'm 21 pixels from the bottom, in 16 from the side, I'd probably even those both out to 21. But let's say the height of my navigation which a guest before. Okay, if I hover above it, where is it? It's telling me there's rectangle is the height of 86 pixels. Switch back to Webflow and say, Hey, navigation, that I said to be a minimum of what was it? Maybe six. Here we go. I said AT I got close, that's pretty close. So I can stop matching my design now, in Figma, that Inspect option can be quite handy if you're working with somebody who has the Figma file and they've designed it and you are the buildup in Webflow. You'll ask them to go to Share and you can get them to share this view because she had this view option. And it means you don't have to have a paid version of Figma. It just means you end up defaulting to this inspect view. And you can work around and check out all the spacings and get the colors. And you can get the images out there as long as they've loaded them for export, mark them as export. So depending on whether you're the person in Figma making stuff, or whether you are building it for another designer who's happy and confident in Figma but doesn't want to do the whole Flow. Part of it Can, you might be in that position. So that is the skinny version of how to use Figma and get stuff ready for Webflow. And obviously I've got a full course and for Figma if you want to get into it. But yeah, Figma to Webflow, that is done. 39. Convert XD to Webflow: Hi there. In this video we are going to take our Adobe XD design and then convert it into Webflow. I'm gonna show you how to pull out the different parts that you need to build your Webflow project from Adobe XD file. If you're thinking, hey, Adobe XD looks a lot like Figma, okay, it looks the same sort of way. It's a design tool. Click, drag around, get the client to sign it off, can get your users to test it in here. Then start building in Webflow. Now, which one should you use? Webflow or, sorry, Figma or XD? It doesn't matter that very comparable. They're chasing the same audience. For me as a UX designer, I don't mind. I use both of them all the time. I built this one in XD just as quick as I built the other one in Figma. Okay? So up to you, you decide, I know it's a bit of a cop-out. I'll explain maybe the end of this video a little bit more just because people asked me all the time. But firstly, it's full, had a pull information from XD. How was it different from Figma? Well, it is very similar. Say we want images. So in here you can click on them. And then what you wanna do is see over here, you've got these three different tabs. Where are we on your assets tabs note your layer tab, dip layers tab. Couldn't remember as gold. If you haven't selected here, can you see it gets highlighted and you can right-click it and say Export Selected. This appears slightly different way of doing it than Figma. You can say, I want it to be a PNG, give it a name tag on your desktop. Click on them. I'm going to double-click to get inside the image. I'm going to go over here and say this little group here I've gotten want to export that you can do a big bulk export k you to do that though, you've got to sit on the things you want to go and say, mark for export, this one to go as well. I want this one to go, it's already marked. Then you can do the batch export and you click on any of them and go to export batch. And we'll explore any of those things you've marked k or File export, batch, export, anything that you've marked for export. And you have a pile of images to drag into, dragged into Webflow. And then for workflow, assets panel, and just drag them all in here from your browser, will click this one to upload them. So that's images from XD. Let's look at doing what else? Colors. Just click on them. Okay, this one's a groups. I'm going to double-click it to go inside. There's my Fill. Click on it, you go, I can copy and paste this code over to Figma. In this case, this is exactly the same as if it's uppercase. Same, same. Like Figma. You can do an inspect version of it. And so in XD, Let's say you want to figure out, and let's do the spacing now because this is quite cool. In XD, you can hold down the Option key on a Mac, alt key on a PC. And let's say you want to know the distance between these two, okay? So you want to know the distances button needs to be pushed down. If you hold down the Option key and select a fist, hold down the Option key on a Mac, alt key on a PC, and then hover above it. Can you see it's like nine pixels is the gap. How far away these guys click on it, hold down the Option or Alt key, then hover above this, can you see there 11 pixels apart? You can just do that while you're in design option. You want to go a little bit further. You can go to share. And let's say that you are in the position where you're building it in Webflow, but you're not the designer. Somebody S is designing a next day and they want you to build it in Webflow with your sweet new Webflow skills. That'll give you is they'll go to Share and they will say, which version do you want, Okay, they give them to put it onto development because it defaults to design review. You're not doing a design review. You're at development stage, developing it in Webflow. You want it for web, okay? Unless you're building something for iOS, which you're not doing in Webflow because it's web. Okay. And do you want the downloadable assets, those things we've marked for export now will be part of this link. Then I have to send them separately to you, which is really nice. I'm gonna give anyone with the link axis. There'll be an option here that says Create link, already done that. The past. My case I'm updating it looks exactly the same. Just says Create link. Okay, I'm going to click it to copy it or just open it. And this is what you get as your Webflow Developer. Those are the images that were marked. You can click on them. You can download them yourself as a JPEG, PNG or PDF. Here's what the colors used in the document. This is pretty sweet. You can hover above this, you can see that it's the height. You can see if I click on this, it's 29 from the top, 29 from the bottom. It's very nice. Is the CSS as well, which we probably won't use because we're more doing visual designer with Webflow. Again, just a short version of how to use XD Figma in your project. I've got a long course, XD essentials, so you can check that out if you want to learn XD. Well, I promised at the beginning, I would tell you which one you should pick XD Figma. It really doesn't matter is my answer. But then people go but tell us more. Am I more is Sigma is more popular and you as a UX design tool at the moment. So if you're looking for a job at a big company that probably going to want Figma. So it's good to have Figma skills. And if you are a freelancer, often it's better to go with XD because of the pricing. Keyframe is expensive and you pay for it separately. But if you're a freelance designer and you're doing workforce once you've probably already got a Creative Cloud license. And Adobe XD is part of that Creative Cloud license. So this doesn't cost you anymore. And because the toolset is, it's identical, they deal with different things differently. People get very passionate about it. I'm pretty dispassionate because I love them both. That's really good. So similar. So it comes down to pricing and job applications. So if you look on your country and say, Hey, look on the job applications to see what, what are they requiring. Looking for a UX designer, great, must be provisioned in. And then if it says XD, XD, if they say you need to know Figma gorilla and think about my advice. Do both. If you do one of my courses that anybody's courses, once you've done the first one, fuel own XD first and then go switch to Figma. Not a big transition. It's okay, you just got to figure out what they've kinda move things. So things are slightly differently named, but it's really easy to pick up the second tool, that's my $0.02. They're working really hard both companies to make these amazing tools, they keep getting more amazing. But for me, XD, figma, or comparable, I'm sure that people are working. Both those companies disagree. But that's my $0.02. Alright, that's it. Xd to Webflow, done. Next video. 40. How to Add Fonts to Webflow: Hi everyone. In this video, I'm going to show you how to add custom fonts to Webflow. In this case, we're going to use Google Fonts. I'm going to show you how to pull them in and add them to your design. You can use them. Let's go. Okay, so I've added a heading and the fonts that are built in to Webflow, a pretty limited the kind of generic ones for the Internet. If you want to add a font, Hey, look, you can add font. Click on it, opens up a separate tab K, you've gone into your dense portfolio site. And remember general, we've been in there. We've got this one says fonts, which takes you directly to there. So both are open. So we're not going to cover Adobe fonts. They're pretty complicated this API keys. And then you might have to get your client to license the font and pay for it, even though you might have picked it from your Adobe Creative Cloud. Yeah, it's messy. One Google app. I have some good documentation on it. We're gonna go with the easy one, the one that people would do the most Google Fonts. You find your font on fonts.google.com. There is amazing fonts to use. You can pick them, download them, use ammonia machine, use them in your Figma design or your XD design. And then eventually though, you need to bring them into your project. So you bring them in separately from your desktop. Okay, So even though you've got it in Figma or XD, doesn't mean that's going to be in your Webflow project. We need to kinda like jam it in there to do it, I'm going to figure out what font I'm using. I'm using public Sans. It's a good, nice Helvetica want to be, I like it. So let's go into workflow. We clicked on the ad fonts and all we need to do is say, well, ZZ should have just started with this was called public sense. A public sense. This is the big part like these variants. The problem with adding all of these variants you like, I'll just take them all. Woohoo. Problem with it is that it is down to site speed. If you install all of these fonts on your workflow project, it will take a lot longer for your website to load. And if your website takes a lot longer to load, Google doesn't like it. They punish you in the search rankings. They want sites that are good, easily accessible, and load fast, don't take forever, especially on mobile, says be careful. The main ones are 400, which is regular, 700, 900. If you from font land, that's light, that's regular, That's bold as extra bold. You might decide, you need all those. Or you might decide, I don't need the light. I need a regular but a regular italic, which is that one there. To use them I project. You can turn these on and off at the end. We will look at later on when we look at SEO, search engine optimization, but you can turn them all on for the moment. Again, coming to the ones you don't offer letter on there makes sense. I can kinda tell from my design. I know that in here I've used, what are they used? I've used 400 there. I've used use this one. Doesn't tell me. You are 400. What am I saying? I'm an inspect. There'll be an inspector being designed. Here you go, Dan. I got regular which is 400, and this one here, extra bold, which is 900. I know there's parts of this are going to be the light version to the ego. I kind of already know that, that man, that I haven't used italic anyway. So be very sparing on the fonts. Click Add, and that's it. If you go and then decide you're going to use ten other fonts. And it will Lowe's, they're going to add up quite quickly. So just be mindful when you are designing and sell it into the client. What fonts you using? Just put two, maybe three, and just a couple of different weights because you don't want your site to load very fast. That was a long explanation for use a font. Can we go hitting one is going to be what we'll do is we'll style out all hitting ones and they're all going to be public. Now, it didn't load. Why didn't load? Probably need to refresh. Refresh? Yes, please old. Now let's see if it works. Hitting one typography, poke Sans There it is there. Welcome. Okay, and you'll find just the fonts that you've actually picked are in here. Alright? And this one has to be black. There we go. Because I'm pulling from my close it down, close it down. I'm pulling from my Figma file, which is extra bold. It's weird how they'd give them different names. And black, extra bold or 900, they all mean the same thing. Big thick font. I'm going to copy and paste the ticks that are this. And that is how you add fonts. Alright? That is it adding fonts to Webflow. And I'm going to build it to make it look a lot more like this in the next video. But for now, we've added fonts, job done. 41. Production Video 3 - Hero Text: Hi everyone. This is a production video. It is. We need to get from here to here is where we ended the last video. But our design, Let's look at our design. It's kind of more like this, where there's kinda two columns and this is right aligned. There's a bit of blue text. So what I tried to do in these production videos, I try not to introduce new concepts. I separate those out for like videos. And then I just put it into practice while I'm doing these ones. And you can watch if you want, you can skip it if you would like to. This one though, we ended up with loads of problems trying to complete my design and we figured out ways of overcoming it. So skip it, but you might miss out on some good learning while Dan floundering a little bit, trying to make it do this. I think it's pretty useful for people to see, like we might run into problems in your own projects anyway, which is just get started then, right? Let's get going. Let's first of all, the big thing here is that it's kinda like two chunks, k two columns. We're going to use a grid to split them up and then we'll start styling it. Okay, so the first chunk, actually, the first annoying part is the background color. So let's go. Okay, background color for this homepage is background color of this. I'm going to go, you know, grab my buddy tag and say, the body on all pages is going to have a background color of that into I'm gonna make it actually a little bit darker. Just clicked in here the B for brightness and using my down arrow just to make it a bit darker, this hero section should not have any background. So I'm going to Command or Control, click this. Okay, and that's that my navigation is going to be white. Okay, here we go. And we'll, I'll show you later on how to get it to stretch. Can you see this one stretches all the way across. You might have to up the contrast is really low. It seemed not that it seemed pretty different when I designed it, but doesn't anymore. So that's the color sorted. Let's sort out that spacing. So I want a chunk for this side and a chunk for this side. Grid would be good. Then let's do that. So let's go and look at the grid. What a mess around with my window. So first up, let's put the grid in and put this H1 inside of it. So there's my section here. Let's add a grid. Here we go and check them underneath. He's going to have two columns and only one row. Okay? And my hitting one click Done or double-click to get out of it. Hitting one, you're gonna go inside the grid. Here we go. Okay, and let's click on a grid and get the spacing right. Now, I am not going to measure this. I'm just going to kind of eyeball it and say, yeah, it's about that far across. So I'm gonna go hover here. Yeah, but that's the gap. I'm going to grab these little like little lines here. Are again something like that. You can click in here and type it in. If you want it to be 0.55, it will calculate the rest. Okay. I'm happy with 0.5. Okay, so that's that part. Let's click Done. Let's give it a minimum height because how tall is this in general? And on Figma, you can hold down the option key like you did in XD. Just click on something like this, hold down the Option or Alt key and it will give you the measurements of everything around. But in this case, because there's not really a box is just the background. You can use rectangles to say, well square. This square is, can you see the numbers that are popping out the bottom, okay, it is 576 pixels tall. So that's what I want the minimum to be. So I would like this hero section to be a minimum of men, 556. So bad. No idea what I just measured. Close enough. Alright, so there's that part. Now I need it to come down from the top. How far I'm going to click on this, hold down my Option. On a Mac alt on PC, it just kinda hover over this button you see is 187. Remember Dan, you remember you telling me a sec when 87. So I can push this hitting down or I can make this Harris section have margin or padding. So if I add margin, it's going to make my total size bigger. Can you see the actual box is moving down. So I'm going to say no, it's going to be 187. I remembered of padding on the inside. I actually do I want that because that's not that tall, is it? Good point. Okay. So I need it just to affect this. I could apply style, just the hitting or maybe Thank you. Wait there. Okay. There's a couple of things I could do. So what I'm going to do is I'm going to apply special class to this. I'm going to undo to get rid of the padding that was on Harris section. And I'm going to do it to this hitting, I'm going to say hitting. I'm gonna give you what's already got a class applied to it. Danger, It should remember we added the all hitting one to it. Now it's got a class here. What is this class doing? So the way I check is you, I'm going to hold down my Option key. Click on these little chevrons. It's doing something blue in here. It is doing the weight and the font. I just assumed I did that with the class. I assumed I did that with the heading one tag. It doesn't mean you go. And now it's only gotten that. And I only have Aereo no public sense or do oh, okay. We're back in business. The size-wise, what did I pick in here? I used at 50. Okay, so in here this is going to be all my heating ones on all the pages again to be 50. But I say 51. This must be intolerable for you. Use all 50. And the line height k, we're going to use a line height of I, use 95% in here. I'm going to do it in here as well. 95% will come in, but some other ways to do that later on but follow the design. Okay, So I'm still starting my age ones. That's everything that I want. This one here needs a special one that k in another class mode. This is kind of like block, remember our BEM block part, the generic ones I'm going to use and lots of pages. I need a little bit extra here to say hitting hero, because I needed to do a couple of things. I need it to be right aligned. Okay. Which not all my age ones to be just this particular one. And plus I need a margin of 187, something like that. So under spacing, I'm going to have padding or margin doesn't matter in this case, it's getting 20 from somewhere. Okay. Let's go up to 187. Let's type it in. If you're all wondering where it's getting some from member, hold down the Shift key and click it. And it says the values are coming from the H1. So the H1 just default has some padding margin top and bottom. I'm not going to override it. Let's cool down as far as it needs to be. Looking at right. Now. The other thing is, is that I liked this whitespace over here like that. It doesn't line up with the edge. So what can I do? This is a good one. What do you think? How do I get it? So it's kinda over here. Imagine if we could do a minimum or maximum width. Okay, So what we'll do is the special hero, special heroin, okay, that does the special one just for this box can have a size. Oh, it's kinda halfway. We can have a maximum width of this one. For how far from, excuse my rectangle again, I'm going to say I want it to be about this, which is 54550, something around there. Maximum width of five pixels. Let's break it down to two lines. Am I happy with that? Sometimes you do need to be happy with it. I'm not happy with it. I need it to be. I'm going to keep going up and using my shift key and using the up arrow until it breaks into three lines. I a good work, Dan. I think it's because I designed this in Figma a lot wider than what the default is in here for the container. The container is one of those weird things where I can grab my container under size. You'll see it says it's locked. They do a lot of work and Webflow to get these breakpoints that will do work and all pretty styled. So the best is just to leave it as the skinny one. But hey, we got here. I designed it too big. So I'm going to create a class for it to override. It contained a width. And it's applied to container. And I'm just going to say, can't use that, can't use that. I can use max width. I think I'm going to say 1080. Okay? Alright, we're closer to the design. Now the max width is kind of okay, except it's over there. We said this hero hitting here is this wide, which is the right size. But I want to know where that side, it's right aligned. The text within the hero, hitting hero is right aligned, but the actual box itself, okay, this thing called the H1 is not, It's just defaulting to the left leg. Everything does in web design, how do we push it across? You can do it to the grid. So there's the parent of the grid which does kinda overall stuff like our spacing and we can do the gutter or we hear, okay, here we go. Leave it down. Okay, maybe a bit smaller. And all the gutter in the gutter is in-between here, these things drag the sizes gotta in-between. Alright, So that does the overall stuff. If you want to get inside to the child, you can double-click inside or actually click Done, then double-click inside. You'll notice that if I scroll to the top on the layout or is it double-click to get inside? Now, click to go inside. There is over here, the grid child, wow, I totally can we just do it again? Alright, so they're further parent click Done. Take anything inside this grid and you will see the child. So this is, we're looking at this cell here plus all the things inside of it. But we can say actually within this grid child, okay, there's one cell. I want everything to be justified to the right. Hey, oh, good. So the right size. Anyway, let's look at what else do I want to do? Let's do that color. Remember that we did that highlighted cut up. We've done them before. You reckon you could do it. Okay. So I want you to remember what it was. You'd probably be done. It's called a span tag. It's this thing here. Wrap it up in a span. And the span is going to have a span class of you can have. Primary color is the first time we've made a global class, okay, It's gonna be out primary color. And it's going to be this color here is the one we're going to use the most, is it? It's not a secondary color. I'm going to rename it. This is my color, secondary. I prefer to do it that naming convention that way. And this is secondary color, the text. Okay, so let's do it to text. Color, secondary typography. That's my color there. So there we go. One here, this one here. Now, I can't live with that. China was font. I thought that I was using extra bulb was actually a 900. That's 900. That's 800, Dan. Okay, so what we're gonna do, we're gonna have to go back to the fonts and change it. So, yeah, here we go. Let's go do that together. So we're gonna go to my project settings for the site. On the top here there's one called fonts. These are the ones that have been installed. And I'm sort of these ones, but I installed 900, 800. You can edit them, okay. Which is a bit annoying. So I can add them again, but they don't go through public Sans or is it just typing PUB? And I can add 800? The trouble will be is that I'm pretty sure it will probably in the code ed to try and load these fonts twice, which is going to slow down my site. So both of them. And just do it again just in case. So regular I want 8000 once. I can't remember what else I need, I should be way better than this regular. Regular should be more prepared for you. Anyway, we learn stuff, alright, and it's gonna be enough. And I'm going to go back into my designer. You can go straight from here. We can go back to the dashboard and back in and hopefully the font or load, because it's kinda like reset right here. It's going to go to, so how did we get to this? Because hero hitting hero was member just the element of R BE. So it wasn't the initial thing we did the block. Okay, So it is under here topography. It is not calling the font here because there's all this stuff. Remember hold down the Shift key and click it. It's coming from the old ones. And this is a good, a good thing because like, how do I get to it? I can't get it up here. Where is it? I can do one of two things. I can delete the stuff I've done here or just remove it and add it back in a second. Because now when I select on it, it's got no other classes. I should be able to go to an H1 tag or you could, instead of doing that, Let's undo it. You could just add and hitting down here and don't Andy style to it. Then you can access it. Later on, I'll show you how to add just these elements to a style guide page so that you're not having pick I dumped them on the page, change them, and then delete them again. It's good to have them on a separate page altogether for the moment. I'm gonna do it this way. I'm going to delete it. I'm just going to remove it. You hear going to public sense. You see it kind of didn't know what to do, wants to be 900, but it can't do it. So it's kind of grayed out. So I'm going to do 800. Now. I'm going to apply my style again. And what do we call it? We call it text colors secondary. We did not. We call it hero, hitting hero. Here we go. Better. Alright, happy then we did a lot more in their video than I thought we're gonna do. But that's gonna be live when you are doing stuff and Webflow. Even know what he's talking about. That is the big question. What I'd like to do is practice that a couple of times and just show you directly how to do it to the end. But I know it's super important to see the way you run into problems and you're going to run into problems and how to potentially fix them. Now if you're sitting there thinking, hey, I can think of two better ways of doing exactly what you did in here. There is loads of different ways of doing the exact same thing. If you can figure out a better solution. It's cool puzzle. It's a cool puzzle. Completion projects. It's fun to actually work out best ways of doing stuff. Maybe it's a bit quicker doing it your way. Maybe it's a bit quicker doing it the other person's way. Regardless, it's a fun build project and Webflow, but that's it. Alright, production video over. 42. Line Height Space After Letter Spacing in Webflow: Hi there. In this video we're going to look at a few things. We're going to look at space between characters or Kooning or tracking, what do you want to call it? We'll look at the space between lines. K might be correlating depending on what you want to call it as well, the vertical height between lines, then we'll look at paragraph spacing. Okay, so if we have two paragraphs, how to adjust the spacing between IT space after you come from more of a print background. Yeah, let's cover those three things then. Will make a big mess at the end and try and fix it. I'm going to try and pretend I put it into the course because it is useful for you to know. It's also because I didn't think far enough ahead when I was designing my design and I designed myself into a hole. You will also design yourself into a hole. Cover the easy stuff first, and then try and fix our problem. K is, let's start with line-height. That's the space between the vertical space between these two lines. Maybe you might think of it as living if you come from a different part of the design world. Okay, so let's open that up. You do with height. That's the simple one k. First thing though is where do we do it? Okay, I could do it to this class that we made. There's nothing wrong with that. But in my head I'm like, actually, you know what, I probably want the spacing to be the same on all headings on all future pages. So it's better to do it to the, all the default tag. So I'm going to remove this class for a second, okay, and then I'm going to with it selected, have access to this old H1 tags. And now I can say actually I want a height of and I can hold down the Option key on a Mac, alt key on a PC and just drag it, okay to kinda get it the way you want. Or let's look at the measurements from these, from Figma. And let's look at XD as well, just to show you some of the differences and the way they work. So fitness is I want a line height here, k of 95% here. And workflow, we can say, I want it to be percentage 95. There we go. Okay, If you get it from XD, XD will say it's going to be there, it is there. It's going to be 47 pixels. They don't say that. But if you type in 47 on all of these pixels, then does anyone who works, 47 plus 47 into, there we go. You end up at the same place. Okay, so that is leading or line spacing. Let's look at Kooning or letter spacing. Okay, It's under this like more type option. I'm working on my old H1 again. And this one here, where is it? It's this one here, letter spacing. So we're going to doesn't have percentages in here. We're going to look at rims and a few other ones later on to kinda get something similar. But for the moment, I'm going to just, it's going to default to pixels. So I'm going to hold down my option key, alt key on a PC and just drag it to the left, it to where I want it. That seem nice. Minus two pixels. Here we go. Minus, alright, that was easy. It's just started with that one. Let's look at the next one which is kinda paragraph spacing or space after the space between paragraphs, because it's going to bring up some interesting points. First thing is let's add that class back to this. Okay, so remember our hitting hero of class to get it kinda pushed down the bottom. Now we are going to, well, actually before we do that, let's do a quick Okay. Out of context before I recovery thing. I know I'm going to make everything. So I'm gonna go, I'm gonna be outside of this hero section. This container. I click on this commodity paragraph. Here we go. I've got a paragraph. I'm going to add another paragraph, not print screen. Let's go for adding another paragraph command D, Control E. On a PC, you got two of them. So whenever you need more than one paragraph, you have to have two of these paragraph blocks, which is really weird, but it's just waved design the way it does. You could fake it by going return retune. The trouble is, it's very hard to space this, this gap in here. If you're happy just to do that, that's fine. I just don't like it. When websites don't like it, it's best to have paragraphs all the way along. So in separate ones, have you got 100 paragraphs? You've got 100 of these little paragraph blocks. Now, let's look at the space between them, or the space after or what else to call them. It's basically the bottom margin. We're going to say all paragraphs. Let's do all paragraphs. All paragraphs. It's going to have a layout. Can have a spacing by default, this tin, I'm going to open it up. Okay, so I'm gonna do that. And it means that if I copy and paste this, they're all every paragraph that I've got is going to have that space between them. Depending on what you wanna do. I might do the same thing and go and do the line height. Okay, so you, line height is going to be a bit taller. It depends on what you want to do. That is space after paragraphs and the weirdness of paragraphs being separate. Every chunk has to be in its own little wrapper. You end up with loads of these, because web design, now it's gonna get weirder before it gets not wait to k. So we're going to run into a problem and then we're going to be almost able to fix it. We learned this before. Remember our grid, this grid up here, or is that a grid? Grid. We've got these two sections and we learned earlier on. Remember if I drag this paragraph in here, okay, it goes, alright, CO, two things. So they're gonna go into different grids. If I keep adding stuff to this grid, it's going to keep adding stuff to the grid and just move it on to the next cell. That's not what we want. We want to add them just to this first one. Who remembers what we did to get them both in there? That's right. We kinda like group them together. And that's going to work mostly here. And then it's going to call on some future knowledge that I'll just lean quickly go through here and if you don't understand it, it's okay because it's part of the later course. I designed myself into a hole with this mock-up. So what we want is remember we had a div tag, div block. We stick it in. I'm just gonna put it down here and then we're going to put the hitting inside of it. And where is it the headings inside of it. So there's my diblock. Okay, and I'm gonna put a paragraph inside it as well to them both together. So they were inside this, I'm gonna get rid of these other ones. And normally if you put the diblock inside the grid, okay. Where is it? Can't really see it is my grid there. Okay? I'm going to click whole grandma diblock. Actually do I do it this way or this way? Let's do it here in the navigator. I'm going to grab the diblock, put it inside my grid, and it's not gonna go. Then I'm going to make sure it's indented a little bit, so it's inside. Look at that. Okay, so those two can occupy the same, but you're like, What about this space? That is the tricky bit here. We're going to use something called Flexbox, which I've got a whole section on that will lead into. But for the moment we can just leave it because I've just figured out we don't actually have any paragraph text here, but there could be a button has the same problem, but we fixed it. We got these two together inside of a div block, inside this grid. Pushing that across there is quite tricky with a grid. Just because I've done a funny, I've done a kind of a max width and I want to write a line it, but it's inside a div block, which a grid doesn't really like. So I could say child UB, right align, right align. It doesn't work. I'm going to option click that one. I'll click it to get rid of it. And what we can be doing here with this duplicate switch to Flexbox. Flexbox to be vertical and I want to right align it. You're like, what is flexbox? That's for later if you want to fix it right now, do that. Okay. It's the opposite of grid. Grid is awesome and does most of the jobs until they don't, then you need flexbox. In this case is pretty easy. You just go vertical and switch it to end. So it aligns it on its side. But that's what we're going to talk about Flexbox for the moment. We'll come back to them in a bit. Alright, so we did Line Spacing k-space between our vertical lines. We did space between letters than we did space after paragraphs, copy paste, okay, members just margin. And then we went and broke out design in our grid, but we fixed it by wrapping it up in a div block. Then we did some magic with Flexbox, but that's for later. Alright, that is it. I will see you in the next video. 43. Text & Box Button Shadows in Webflow: Hi everyone. We're gonna look at shadows. This text here, keep an eye on it. We're going to show you how to add a shadow so you can kind of like push it off the background before, after. Okay, we'll get a bit crazy and get right into the full shadow where there's multiple shadows. Some of them were white, some of them are dark. And we'll also look at box shadows. So either on buttons or we've got it up here as well. On the navigation, you can barely see it there. There's a shedder. Let me show you how to make both of them. By both of them, I mean text and bookshelves. It's getting there. Okay, let's start with texture. It's easy. Decide on where you want, what class you wanted to apply to, and then go, remember Option Alt, click the chevron to close them all down. I'm going to stop that shortcut soon. Loads of times. Hopefully it's getting in there. But on to typography, I'm going to say More Options. And then down the bottom, ticks shadows, easy, horrible, horrible drop shadow. It's probably better on this design here, okay, that we did earlier. I'm going to go the same thing and I get a text shadow. And what I'm actually going to do is I'm going to leave it there because we've got a shadow now, we are able to lower some of the dark into this back image. But that way, we, way, way, way long ago. I can, I'm going to hide it because I want to turn it back on. We'll delete it. But now with a bit of drop shadow, we can kind of see it. Now also, let's have a look under Typography. Now. If you want to edit it again, just click on the word. Okay? And the basics, you can drag this around for the distance. It's for a little bit hard to zoom in on both. It's all the way over here. Sorry, the angle, which way you want it to go in. Okay. Or you can use this to jump around. I don't know. I like it add when AT so kinda pointing straight downwards. And I don't really like at the moment things changed. Drop shadow styles. I don't like the blur too high, and I liked the distance quite low just to give it a really solid line to push out. Okay. And then the black here often can be too dark as what kinda leg lower down to let some of the background through lowering the opacity slider here. Alright, you can go a bit further. Let's over here, this horrible one. What we can do is actually have, and we'll make it better ish, you can actually have more than one texture. So first of all, I'm gonna go to, I'm gonna go to my 180 distance at one pixel and the blur at one or two depending on maybe two. And I'm going to lower the color down all but just to kind of have a hint there, I might get rid of that blue. Click off. Click back on here, click in here. So the blue vector one, you can actually add another one. So I'm going to add another text shadow to team up. And sometimes it's quite nice to have quite a strong internal one and then a really big, fluffy one. We've really low opacity. Keep picking off. Okay, so there's that one there. This one has got no distance. Distance is how far away it is. You can decide on what you wanna do, okay? But I'm gonna go a distance, still quite low. But the blur, can you start to see it? Might be just wishing this, but with double shadows, you can kind of get the cut that you need, but then you can lift it off the background a bit more. I'm going to lower the opacity. Is that cool? Is that not? Let's have a look. Go with the naught. Let's turn it off. I'm going to turn it on and off. You really just need to go Option or Alt click to disable it and then use your undo and redo, which is on a Mac Command Shift Z. But a gymnastics with the fingers or Control shift C. Just use that then. Okay. There you go. Do I like it? Yeah, let's get it right. You can add a third one, let's do it. Then another one, and it doesn't have to be black and white. Okay? And you can start to see, well, let's do it and it's doing the opposite side and just dragging the angle over this side to enhance that side and cut it out of that blurry background. The blue is going to be quite low as well. I want like a little shine on that side. What do you think? Good bed. It could be bad. Now, when it comes to this sort of shadows, actually, let's do the angle over that way. And I think I need to lower it down a little bit. I'll leave it high because I want to show you something with it selected and this layer order. So that gets seen first, which is great. You might have done it earlier on. And can you see if it's the back covered by the other shadows? These two don't really matter because they're both black and they're both trying to do the same thing and the kind of mix, whereas this one here is a very different color. Okay, so got to make sure it's at the top. And I'm going to lower the opacity down to get this like little hint. You probably seen it online. You like just something strange about it. The text. I'm not happy with the shadow underneath, but I'm going to leave it because it could be for why drag the slightest anyway, that is drop shadows on text. So let's look at doing it with boxes. Will do it with a button. Why not? Because I don't need this paragraph text. I need a button though. So with this selected, I'm going to go Command E or Control E on a PC type enum button. To name the button. I think earlier on I did create a button class coming BY. We did. And it's this color. Is it the right color? Anyway? Let's leave it. Let's just do the shadow. The shadow is not in typography, it's under effects and box shadows. Okay, now, do I want to style the generic button is the question, well, let's just turn it on. You go shadow. Everything else looks the same. It's got a couple of other little options before we go off and talk about class naming has size k, which is if you've ever seen spread on things like Photoshop and Illustrator, the same as that. So distance, how far away it is, blur, how blurry it is and size it. It's like this whole thing. Does it push the edges or is it really even? You can kinda do really fluffy ones which you can't do with the text. Just something that's not useful. You can do it inside to find. Okay, so let's say I want to do something nice. I'm gonna do my navy because that's what I like. I'm going to a distance of one, layer of one and the size of one. And I'm going to lower this color down just to be a hint. What's wrong with it? Something going on with it. The fact that I have a shadow at all, maybe it needs to be a bit more blurry. Not having a good Chateau de anyway, I don't really like shadow. Hundred bucks that or I don't know if I can make a good. And let's talk. So that's how you edit, right? Let's talk about, I'm gonna get rid of it all. So I'm gonna go Option or Alt click. Okay, is where do I apply it? Box. And that box shadow can be used over and over. So it's probably best as a global one. I'm not going to use this crazy thing other than like marketing part of my homepage, okay? Otherwise I'd make it a global style. What I'm gonna do is I'm going to grab a box. It's just gonna be, uh, can be anything. Okay. Just a tiny old actually is a debulking or work in this case, regardless, this is going to be called box-shadow because that's what they call it. And it should be easy to find the search using the word shadow. It means I can apply it more than just this button. I can use it for all sorts of things. If I need to adjust it, I can adjust this global one and it'll just all through the site, okay, in case I decide, sometimes you've decided on a shadow and you wake up the next day, you're like, why are there? So box-shadow and then work it out this way. Okay, So I'm going to decide this, this one that is zero, it'll lower down a bit. But if you do it this way, it means that I'm going to delete it. I get to apply it as like this extra gang. So I can say shadow here does their box-shadow. If I apply it to other things like this nav box shadow, we go, I can go and get that. Global one again to adjust the global one will create a style is page later on, so they're all on it. For the moment. We can just grab it, grab out box-shadow. And if we make an adjustment to it, Let's make it distance up. Can you notice it? Does it for all of them, not just that one. Good old global stuff. Here we go. And that is Texts. Good on this one. House, push it off. This one here. This is the push the limits. And what a good Drop Shadow should be. And then we looked at box shadow. We've done it for a button, but it works for any sort of box element. Alright, that's it. I will see you in the next video. 44. How to Create Global Swatches in Webflow: Hi everyone. In this video we are going to look at swatches. Can you see down here, I've got some premade swatches ready to go, brand guidelines, colors, corporate colors. The cool thing about them is that once you've set them up as global colors, which is super easy, you can go through and change them and all the ones connected to it. Can you see they all change at the same time? Super handy. Alright, so let's jump in, do global swatches. And at the end we'll tidy up a bit of our fonts to two-for-one this video. Alright, let's go. Hi everyone. Let's make a global swatch. Would do it quickly and then we'll break it down a little bit more. I'm gonna do it with Command E or Control E on a PC. And I'm going to type div. I'm just gonna throw on a disk block now rather than adjusting anything up here, okay, so break it with the selected. I'm going to in this case, do backgrounds and ongoing to pick my corporate color that I've been using, or at least the one from the design. Okay, and then click on that, that my friend is a global swatch. It ends up there. It's got a little tag on it. It's kinda the universal symbol for global. It's given it a coup name, and that's how you do it. Let's click on Create. It just means if I create anything else later on like this nav and you're like, oh, I want to use that pink. I don't have to go use my eyedropper tool or type it in. I can just click on this reusable swatch, global swatch. Let's do it again, a little bit more slower because I want to get you to understand what it's all doing. Actually, let's look at the main point of a global swatch and not just a regular swatch. And a global swatch means if I click on this one down here and I go into my color, and I go to this one that says Edit. I'm editing the global swatch, which is currently called hot pink. And watch this when I drag this and change it, can you see this is applied to it? Okay, And that connected, That's why it's global. It means when I make an adjustment down here, if the client ends up picking a slightly different color, I have used that global swatch over and over. It will then update. It can be used in text as well. So this text here, and I'm going in and rampage and ruining everything. But the other good point is that the color we did Background Color Swatch, they use the same one. So this is text color, but you can see that global swatches still there. And again, I can edit it, doesn't matter where really where I am not. You don't have to be brought in that original div, but you can see a change one, they all change. That's why globals are handy. There are times when you don't want them to be connected. You want to use it, but they may be adjusted to make it a little darker. Let's say I'm going to undo that. Say this narrow at the top here, it needs to be darker for just because of the texts links on top of it needs to be close, but I'm just going to lower down the brightness. So what you can do is you can apply that swatch and then click on this one to say break it and I just kinda like disconnects it. And now when I change it and then use hue saturation brightness, down, down, down, down, down, down, down, down, down again. I'm gonna hold shift and down. Can you see that one there is no longer Global, just standalone color. Okay, let's look at a little bit more. Let's add one more and we'll go through it a little bit more slowly. So let's add the blue from this. There have been using, again, you can just pull it from the design. You can use this hexadecimal number. So you can go through and say, Okay, I'm going to break the link on this one. I'm gonna make a new swatch by either typing it in here. Okay, tab along. There's my blue. If you have the H is B numbers, you can type them in. Most people won't have these, but maybe in your corporate spec or your brand guidelines, you might have RGB. So you just click on any of these guys. You can see it toggles between RGB and hue saturation and brightness coat. So you could do that. The other one is might be dragging in a logo and pulling from those. So I'm gonna go, what am I going to do? Command or Control E? I'm going to go image, hit Enter, choose Image. I'm gonna go and upload it. And it's just something for my last project. It's more of a, for instance, where is my sponsors? You use my one. So there's my logo. And you can, with it selected. Actually let's click on this thing. I'm going to create a new somebody wanted to do. Yeah. Okay. So I'm going to use my eyedropper tool, pull it from the logo. Okay, now I can make that a global swatch and this is gonna be my BYOL. At green. You can use the default one. It's amazing the colors naming that it works down there. There's no really good. Every time I click on something, It's like, oh yeah, I think it's a great name for it. Whereas I do, I add white at the end of my colors. I go. That's orangey. To get around the fact that don't have a really good name for m. So workfare, workflow, you might pull it from there. Okay, the other thing we might do is you might be working from a document. I've got this one open from our fragment class, is that depending on who made your project, this is when we made to hand over to somebody like you now as our workflow designer or developer, and you can see these colors in here. I made this little step to make it easy for them. For me what I can do is go to Inspect like we did before. I can click on it and there's the hex number. Hicks is weird. It's not weird. It's actually RGB. The first two letters represent are the second two letters G, Next to be hex number. It's kind of a web-based version, although web users RGB now too, I've typed it out for the person as well that might be using it. Okay, You can see it down here in the CSS. Second, grab any of those beans on how diligent the person who's doing the project before you is, you might get other big style guide. In my case, it's quite simple when we made, in the last course chipped all guides do make it a little bit handy all in one place. You can see in here as well. Up until now we've done just primary, secondary and an accent. But you can see you can have primary 12.3 for the different shades. It will depend on how complex your designers. This one here just uses those two colors. So, alright, back out to Figma, back into wood floor. Can you can go now, I'm just going to add the rest of the colors for my project because I don't actually want that green. How do you delete them? Actually before you go, That's a good one. Did I create this one already is created. And let's delete that one. I'm going to grab my blue, which I already know is up here. Okay, adding it, I'm going to call this one and I call the sky blue. Great name. I've got like an off-white and the background here. Okay, so I'm gonna go and create another one. And I'm going to go high jump at you. And can you see that? I did it the wrong way round. So I created this swatch and then changed it and it's still pick sky blue. So I'm gonna cancel that. I'm going to do is click on this. Then do the eyedropper to get the right color. Then hit plus white smoke, cool, great. Name them easily impressed. And remember, if you do need to break it off so it's not connected to the global, so it won't change anything else. Do that. And if you need to edit the global one, have it selected, edit to something and then hit on that option and you can go and amended it Cancel because I like those ones. I'm going to add plain all black and plain old white. Actually do it the right way around in. So I'm gonna go and then drag it to the corners. If, if, if at this one we white, and then I'm going to do all-black. Actually, I've got a couple of other colors in here. It's this one here. It's kind of a bluey gray that I made. Here we go. I'm going to grab that one. So let's go and this selected you and I kinda tap out so that it actually changes. They're going to you. And slight dark slate gray. Blue-gray. Thank you. Figma. Now these two are probably too close. I'm going to reorder them. You can't reorder them. Could you use to be able to reorder them? Maybe they don't. These two are really close. I feel like I'm accidentally going to click both of them. What I really want to do now is delete them all and have white right at the beginning here, and have some space between them. And use this kind of smoke white a little bit further on. But I'm going to leave it for the moment because it's got enough. Okay, and the last thing I'm gonna do, it has nothing to do with colors. Just need to do it for the rest of this course. And because the font, I'm going to fight this battle of changing fonts all the way along. We changed it here for the heading. We did it for our H1, X1. We made this public sense, okay. And then this button to y, then add it to the button as well? No, because looking at my design, I only use public sense throughout this design. So what I'm gonna do is who remembers? How do I change it globally for everything on all the pages, everywhere, okay, and less over and it's the body. So click on the top here or on the outside. I'm going to change the picture. Where is it getting it from? Remember Shift, click, buddy or pages. So not this body. There's a style on here. I'm going to have to remove this and add it back on again. Okay, I'm actually doing this study. It's a good thing. I've got this body class here and you're like, what does it do? Well, I don't know. I don't make it I didn't make it. I just don't know. It backgrounds this color. Instead of the problem with having the body tag with a class that you've named, or at least Webflow named on your behalf called body and adding this color to it, that's fine. The trouble will be, is that the next page we make, you'll have to apply that style to it. And actually I'm just gonna go remove that class. I'm going to go click it. I'm going to say all body tags have a background of this. Weird they both had applied and you go, That was a big waste of time class. And under topography, I'm going to say not Arial, I'm going to say my public, public, public sense. Okay? What is the default? And we'll use normal and then I'm going to override it on all the other styles. So it means that my button text here now it's hard to see, but if I move through it, can you see everything that is text in this document unless told otherwise, it's going to be public Sans normal. And I'm gonna look at the body copy size that I'm using. What's the most common size that I'm using? I'm trying to find it on my design here, zooming out. That's the app, that'll be my body copy size. What have I decided? Lot of jumping around. I know that's gonna be my most common size. It's going to be 16. So I'm going to say actually, my old buddies tag is going to be 16. And the line-height, where's the line height is 26. I'm going to go in here and type in 26. You notice that this went and changed. So it's really important to do the body tag early on because you'll end up starting that button perfectly. It's using its got some line-height because we using text inside of it. So you 24. Let's actually make it really small. 12, you see the actual size of the button changes. So get all of these kind of right first, that body tag down first, and then move through in terms of the text color. Keep talking to the wrong one. I'm using, not using black, I'm using this a3. A3, z3. See, I'm going to say body tag or pages text, it's gonna be three. See, very similar to what we had. And that's it. Or body tags are done, got rid of a class. Another thing we might do now, just while we here is we, should we or shouldn't we? We said this to be public sense. Remember early on, we don't need that anymore. So I could go through it because it's coming from holding Shift and clicking on the envelope and saying it's coming from H1 or H2 H1 headings. I edit it on there. I should go through and remove it. Should I don't have to. This is just being like, I don't know, OCD. But I'm trying to give you that what you should do and what I probably do it practice are not the same. I probably just leave it. Okay, but I'm going to click down here, Command E, hitting, throw it in. And you can see I want my headings tag and I'm going to say actually ongoing too. It's funny like you want to hit None. That's my natural reaction. It's not what I wanna do. I want to turn it off. I remember you hold Alt or Option to say, don't, don't do anything. And it's like, Hey, but it's gone back to public sense. But it's not being told by this hitting to be public Sans, I hold shift and click it. It's coming from my old buddies tag now, does that make sense? It just means later on, if somebody goes, alright, we're not using public Sans, be using Arial because we have two gives you the headings come along for the ride, not just we'd have to do that separately. So just trying to give you that you should be doing what considering when you are doing these things, sometimes you need to backtrack just to clean things up, do it feels good. Alright, swatches plus some topography sneaked in there. Alright, that is it for the video. I'll see you the next one. 45. What is Color Contrast Ratio in Webflow: Hi everyone. In this video we're going to look at contrast ratio. Basically it means how legible is your texts compared to the background. And it's to do with color, size of your font and the weight of your font. You get given a given numbers and a passing grade. It got AAA. Who, who? Let me show you how it works and what it means to your website to ignore it. Alright, contrast ratio. Well, let's start with this heading here. So I'm gonna select it and you deal with the conscious radio, with typography and the color k and not the background colors. So I've got this one selected. I'm going to click on this. It's showing me that using that global swatch, I pass the test. It's a AAA k. It is a really good contrast between the foreground color, which is my slight, and the background color, which is my smoke white. You'll see these lines appear here in wondering what they are. They are the conscious ratio lines. So you can see I'm a AAA. If I move it up, can you see I'm in the WBS and then above that is phi. Okay, so that is considered not enough contrast to be legible against the background. Now we're trying to design for all shapes and sizes and different abilities to see. That's what this is giving us a helpful hand for, is a little restrictive in terms of design. Let's look at this pink one here. So this pink button here, it's not the background. You won't find the contrast ratio. And here it is to do with the typography. So I need to find the topography that is dealing with the because at the moment look, it's telling me it's black cake that is coming from. If I shift click it from all bodies, we know it's white. I can see you. You're white. Okay. So the way to fudge this is I'm just going to quickly go and change it to white. Now, add to this class as Bhatia class, just to white, just so that I can see how bad it is. And it is the baddest of all bets against that pink color, my hot pink. It's saying this really is a fail and to get anywhere near it, it needs to be basically black. So that's the trade off we're going to have to make here for this particular button, because it's quite an important button. So we're going to have to switch it to our black. We're going to use this or it still fails just now. It doesn't. It's a, it's a point system. There is helpful A's and double A's. There was helpful WA is AAA. You'll really looking at this number over here, how good or how bad it is. Obviously something that is like this is going to fail badly because I can't see it. It's free bed. Okay. And it's good at this one here. How bad is it failed? Not 100. You know, you don't like lose the Internet if it's below this. But this is a nice gauge in line to help you get a sense of how close or far away you remember, we might be able to play around with the font size, the font weight as well to mess with the contrast ratio. So it's interesting, I might decide to actually run the doc takes and maybe make the button had a line around the outside rather than a full color, like a border around the outside. But in saying that it does feel quite limiting in terms of the kind of really squeezes up the Caliban that you can use. Obviously they're gonna be instances where it needs to be 100% as good accessibility as possible. Especially if you're chasing that search engine dream. And you're dealing with the wider audience. If you are doing something a lot more artistic or creative and you are trying to push the boundaries. Contrast ratio is a tricky one to work within just so you know, there are things you can do for existing sites, like it's kinda nice within here that they've got this option. But you can go out to Google, have some options where, let's say I want to test this. Let's go back to, I'm going to undo it. So I'm back to my white text and doing, and doing and doing. Okay. I'm going to leave it there. And I'm going to publish the site because Google needs to see it got published the sick, the domain. And that is handy tools in general. So it's published. I'm going to grab the link, copy it, and I'm gonna paste it in this one here. Web dev slash measure is a good generic overview of a website. We're not gonna go through everything here. It's way out of the scope of this course, but we're going to look at accessibility just to prove that don't ignore the contrast ratio because Google knows it's very easy. Goes and index your pages and goes, okay, you go less information and you fail the accessibility like rats took on accessibility. And where is it? Here you go. Now button. It knows. It's a low contrast so you can go through, find out more. But that's the trade-off of it, is that you can see accessibility. It's one part of it. You haven't committed it to the bottom of the search rankings. It's at 84, it's yellow, it's not. Okay, but it's not green. So you gotta decide what your project is doing and how much you want to chase this, okay? All the contrast ratios. Sometimes the text is just decorative and it's a small part of a large because ours is pretty low because it is like we haven't got much on our site. This is taking up quite a large portion of what's available k. So all the kind of call to actions, all the important buttons should be have good contrast ratios and some of the more decorative stuff might not need it like this, but here is a small part of it. I didn't like it anyway, It's pretty light now and the drop shadow, It's kinda running it. But you went just been at, you might be like it's not worth that for the extra whatever style points you are going for. I'm rambling. All right, that is it. That is contrast ratio. I'll see you in the next video. 46. Gradient Background in Webflow: Hi everyone. In this video we're going to look at putting in this gradient down the bottom here. I'll show you how to add it. Also show you some cool places to get one's from other sites and how to borrow them from sites like dribble straight from Webflow. Alright, let's make some gradients, okay, to make it background gradient, we are going to style our sections. So we're just going to add a section in the wrong place and edit. All it is is under backgrounds. We've been using color up until now, okay, but there's this little plus here it says Actually let's use the background gradient. There it is there, ugly black and white one. To adjust the colors, you just click on one of the ends either in, okay? And then you click on down here, okay, so he's black and you can pick your colors. I'm going to pick this one and the other end. This is kinda wait for me, I wanna get back to the gradient of this thing pops up, you gotta kinda click off and then it kind of goes away. You go. There's my horrible gradient. I don't know. 1980s. It's actually growing on me. Anyway. So that is how to do it, Okay, At its annual box, you can do it to your button as well. It doesn't have to be. We've got a color here, but we can add a gradient to it. There is a linear one and our radio and radio, which just means around E1, undo that. The other thing, the other things is to edit it, just clicked on it on this. And you can play around with the angle because I'm going to change mine in a bit. You can switch these ins k left to right. So that's the basics. If you're looking for good gradients, I was in people to gradient. So gradient.com, There's just some nice gradients in here to choose from. And when you do find one that you like, this one here, you click on it. There's that picks number. Go back to Webflow. I can click on here, and instead of my hot pink, I can just paste that one in and I can start building my gradients that way. You can add a third color. Because even some of these grabbing at ones can you see it's three colors. Let's say this middle color here, I can click on it, copy it, go into here. And what you do is you've got these two colors. Just click anywhere in here. You can have as many colors as you like. Click on the actual line. Down here, paste it. And you can have three colors. Actually, I'll speed through and do this. Alright, there we go. And other things you might do. So gradient is nice. Sometimes it's good just to look at other people's work. So dribble is a great place to go for inspiration. And there's always some nice gradients to kinda get the creativity going. And what a cool little trick is, I'm going to drag this tab so there's separate, so there's my Webflow and there is my dribble. So I'm gonna make dribble smaller. So I can see it. Hey, there we go. And I'm gonna make Webflow smaller. This is a bit of a window gymnastics. You might not be able to do it. We'll find a tricky on your size monitor, gay. But over here now I'm going to go to my Gradient. So I've got this selected. I'm going to remove this color. You just click it and drag, drag, drag, and eventually it just goes away. Just click and drag it off a while. Okay, and let's pick our two colors. I'm going to use this, click on that color and actually use the eyedropper tool. And actually I need to find something that I like first. So just looking findings. Say we liked this one, Eyedropper, pick that. And then I'm going to click off, click on this end. There, click on this. You can go through and appropriate other people's gradients. Gradients aren't trademarked. I've stolen old horizons one. It's pretty nice. So let's, yeah, you can do that sort of gymnastics to get colors or at least gradients. Alright? I'm also going to with the section just add a minimum height just because it's hard to see. It's tricky to see that gradient when it's kinda tightly squeezed. And we know if we Command Shift P, Control Shift P to preview, you can see it disappears. So at a minimum height, just so we've got some stuff in there. So this section here, not going to be section name. I'm going to rename this one and this one's going to be cold section lower because I can't think of what to call it, because my design, it takes us this bottom chunk. Okay, and I'm going to stick out this stuff and I'm just going to get a terribly named section lover. And let's give it a minimum height. So under size, and remember we don't use height because we are clever. We use minimum height so that it can expand bigger if it needs to. Alright, that's it. I'm actually going to go now and wow, I will leave you now. I'm going to go put it in the right gradient. Okay. I want to put this one in, but yeah, you go to the next video. I'll see you in a sec. 47. Navbar Full Width Container in Webflow: Hi everyone. This video, we're going to take out this hero section here and expand it so it goes full width. We'll do it to our portfolio site as well. We'll make this navigation whitebox go all the way to the edges whilst allowing a section in the middle we retained for the navigation will upgrade this bottom chunk as well to have a section inside of it, Let's look at making full width and navigations and container boxes in Webflow. Alright, so first up, let's look at the past project. I'll kind of like a club that we did. Everything is inside one container. I'm going to pin it there. Okay. So I've got one container and everything is inside of it and it feels like you should only have one container. That is not true. It can have lots and lots of containers depends on whether you want everything to be restricted within the center part or like our design where the headache goes all the way across. And so does this bottom gradient part. So let's start with this navigation. Mainly what I wanna do is actually let's delete the navigation section that I made. And I just want to show you under the add down here under components, there's one called nav bar. If I add that to my design, kind of try and get it. That I get it class isn't there. And if I drag it out of my container, look what happens by default is actually come structured with this full width section. And inside of it is a container that contains the bit for my logo and all my text button. So that's kinda already done for us and that structure. So that's what we're going to rebuild. We won't use this default navbar because we only have like one button. So we don't need all this complexity in here. So I'm gonna get rid of you. I'm going to undo until my nav section came back. Basically, all I wanna do is grab this section and get it outside the container, which is great. Now it's full width. There's nothing really going on with this container. It's got a style of some box-shadow, but nothing much is going on. Now I want to put a container inside of it. So a okay. To go to Ed grad the container, see if you can get it in the inside. And then we go, We've done this section. I'm going to add a button here for the moment. I'm going to grab this one, copy that one, put it inside. You can see he's kinda contained inside this container funnily enough. So that allows you to push, do some styling for this whole width, meaning in our case, just background color, but retain it in the center of the site. Really common web design practice. This one here doesn't really need doing because I have got, I've got no fill on this section here called section here. There's just no fill. So the background is showing through k and that's the background color that I'm using. So you can have sections first and containers inside of them. You can have lots of containers. Let's look at Apple. Okay, so this one here would be a nav section with a container inside this one here, the same. This one here probably doesn't need it, but could Same here you can see they all stretch they using the full width. Let's do another example of this bit down the bottom here, because our design has these guys in a little thumbnails in the middle section. Okay, so in here, I've just got this lowest section. Now, this brings up a good point. I could now just go throw a container, hey, for container, get in there. And I could start building my cards, which we'll do in a second. Okay, that's fine. The only trouble is I call this a section. And what do we know about sections? What it's one of the panes for sections if I go, because at the moment my design doesn't have anything else. I have not done a footer on this one just to keep the course a bit shorter, but it's probably gonna be a footer maybe in here within this big chunk. And if I want to fit a section, a section, put it in here, big red lines. You can't put sections inside of each other. Okay, so what about this? What do we do? This thing here is probably better not called a section because looking at my design, this is just ornamental. This thing, portfolio thumbnails as a section. Then maybe there's a testimonial section and then a photo section all within here. So what do we do with it? What I'm gonna do is I'm going to bend it. I'm going to remember actually going to rename this class because I like it. I want to keep it because it's got my gradient in it, but it's no longer section lower. This one is going to be called color background gradient. And I'm going to go and delete this section. I don't need you. But I do need though is what's the generic thing? That we can add a generic box, a generic division of space here, diblock, try and get it in the right place. I got lucky. So it's no longer, it's not inside of my hero container here. It's here. Excellent. So I'm going to say You now have this diblock, just going to use my background color gradient. It's the same thing except now I can go to a and I can add a section and then call this my thumbnails section. I can add another section called footer. So yeah, sometimes you just have generic box, which is just a div block. I want to finish it because now does this section go next? Or the container looking at my design, if I had a footer here, okay, and it's gonna be the same width. I'd have one container and my thumbnail section plus my sorry, my thumbnails plus my footer plus the testimonials depends on what your structure you are trying to get. My case, a container is going to be good. A full container. You're getting sick of that, but you're getting good at it. My container is working great. It's actually noticed why does that container, remember we added, we want it out website to be a bit wider. So we added a container class of container width. We did it the same for the nav up here. So container width, reuse it when classes feels good. So inside of here, I'm going to add my section. And inside of this section, this is going to be my section for life thumbnails. And this particular one is going to have some spacing. It's going to have some top margin. I'm going to guess it for the moment. And we're going to add a grid inside, but that's kind of that structure. So there's an internal container we've worked out that sometimes we have just an ornamental div around the outside of this stuff because in the future I want the section plus I probably want footer later on to go inside of there as well. So two different sections you give me. Let's go and update this one. I want to show you this one so you can leave now if you've got the principal, if you want one more example, we're gonna do it to this one retrofitted and we're going to push it all the way to the edges, like we showed at the intro. This one, it's not tricky. It's just the navigators tricky to use. So what do we do? How would you do it? Pause it, have a think about how you don't go and do it. Come back to it and see if you got there, if you just want to watch. So what I'm gonna do is I need this guy not to be in this container anymore because that container contains them. We want it to be free. Section needs to be free. So how do we do it? I'm going to go a, I'm going to add actually, I'm not going to go section, I'm not going to get to it. I'm just going to drag this guy out of the container and it's kinda hard, get them out. Left, right, left, right. So he's outside and down the bottom here. He already is full width. Excellent. What do we need to do now while he's down here, what we might do is put a container inside of it and trying to lump all of this container, I'm going to put it in there and I'm going to try in either do it, we'll try and do it this way. It's working. It's working. Kind of working. Okay, so you get the idea. You can try and do it in. This is actually easy enough when they're all stacked on top, but can just straight to the right, drag you to the right, track you the right counts like more than one at a time at the moment, as far as I know. So here we go. We've got this section, which is perfect because it's my hero section. And all of this stuff is inside this container. Here we go. Now we need to move them up in the list because he needs to be in-between NAB and sponsors still. So what do we do with these guys? What I'm gonna do is I'll probably put a container in first. So I'm gonna go a container and the drag it right to the bottom. I'm not going to get it. So I'm going to try again container. You can put two containers inside of each other. So you go, he's outside the thing I want sponsors to be in it. Worked. If you find this tricky to use, it is totally tricky to use. They getting better every time I seem to load this thing, things work a little bit nicer in here. That container that contains all of these. So now it's just the layer order. And I think I might have accidentally done it all. So I've got this top container, which has got my nav in it. Then I've got this hero section, which spreads out to the full width. Inside of that, I have my container that contains all the stuff in here. Sometimes the section goes inside the container. If you want it to be inside. Sometimes the containers inside this section, It's like inception. You're not helping then. I'm hoping. So. That's how we retrofit that site. I don't like it because this probably needs to be full width as well, but it's the exact same prices is doing this last one here. So if you want to do it, go do it. If you don't, you'll just want to move on. Come on, Dan. Next video you'll wish is my command. Let's go next video. 48. Webflow Layout - Columns vs Flex vs Grid vs None vs Inline: Hi everyone. In this video, we're gonna look at layout display settings. We're going to cover block, inline-block, and none. We've covered them in bits throughout the course. We'll just wrap those up. We'll look at why we're not using columns, okay, and then in the next video we'll do the battle grid versus Flexbox. But for now let's get onto these first ones. Alright, so let's start with the two probably easiest ones. The ones we've run into a few times already, display block and inline block. So let's look at headings. Hitting is by default our block. What do I mean by that? I'm going to copy and paste it. There's two of them. They don't want to share the same space, or at least the horizontal space. They push each other down. They are a block. The nemesis for block is inline block. So I can say this one here. I'm going to give this hitting one class. Okay? I'm going to say you're not locked anymore by default, going to teach you to inline-block. Nothing really happened because this guy is still block. I'm going to play the class to him as well, that both inline-block, if I keep copying and pasting them now, they're in line. They're still box, but they're in line. Okay, So you will find some elements by default, our block means they all want to stack and some of them are inline kinds of inline one. So let's have a look in here. Buttons are in line. They want to go after each other. Let me get it in there. If I put it in one, put another button. Like that. They're in line, paste, paste, paste. They will want to stack. They're all happy to occupy the same horizontal space. I can change them. I can say my button, okay, he's gonna be Button one. And I'm going to say delete all these ones because they don't have the class applied. That's why this one here with the button one. By default, you're in line, not anymore. You block. It wants to fill the whole space, but that's okay. You told them to do that. It's a bit weird for a button for the ego might be more interesting to do that. And I'm what I should've done this with an image. So here's my image. Image by default wants to be inline, but actually we want it to be given an image class. And I'm going to say actually no, you'd be blocked. Just push everything down please. That'd be on the same line. Okay, so block, inline-block. Let's look another easy one. Let's look at none. None just says All this image. When I get down to mobile, I'd actually like to go to none. I'd like it to go away. See on desktop and tablet, landscape mobile. But on this one, turn it off, you go. So it's kinda like deleting it, but at least it's available on these other breakpoints. You can make it off on desktop and back on on tablet. How do you find it though? That's a good point. Can you see over here, It's got this. I can still select it over here, even though I can't see it. So I can select them here. It is set to none. So it's actually here, okay, Here, come back to block or inline block or do not there on desktop, appears again on tablet and should be there and began again on mobile. There you go. That is none. What else we got? Actually, let's leave it there. Let's compare the grid and flexbox in its own video. And the next one. Let's go do that video to get sick. 49. Webflow Layout Flex vs Grid which should I use: Hi everyone. In this video we are going to look at the differences between grid, which we've done before, and flex, which is this option here, k, Flexbox or flex layouts, flex and grid compete to do a lot of the same jobs, but they have some differences that I want to jump into. And it's best to really understand flex in comparison with grid. So let's do it. Alright, let's start with a grid. Okay, we've done before click a container here, I'm gonna drag my grid inside of it and we get this. The first thing I want to mention is if I undo that, you'll notice that grids over here. So it was columns, okay, but over here where I can change things so my container, I can actually just make the grid. Here. It doesn't really matter with you have something on the page, like an empty div block or a container and you convert it to a grid. Or if you drag the grid over, because it's more of a thing applied to a div tag. We like to drag like lumps over k, So we're going to do it that way. But all of these things here in this layout is just a plain old div with this container has some styling applied to that div that makes it centered. This one here splits it into percentages for columns. This one applies a grid layout for us. Certainly the section, they're just these div blocks with styling applied. So we love grids. Grids really easy to add columns and rows, remove them. The spacing between these, I'm showing you these because in comparison, Flexbox is quite tricky to do some of these spacing things that grid does really well. It's, it's something to our grid. Okay, so we're gonna add some topography. The one thing that we know about grids though, if I now need to add something into one of these cells, I'm going to add an image as well, okay? It moves on to the next one. You want these to be together, but you remember, all we need to do is put them in a rapper. And I'm clicking a on my keyboard loads for this case, I'm gonna go div block. And inside that block is gonna be my image. Come along for the ride. Here we go. It's tricky. It's tricky for all of us. So now that div block is inside of here, if I click it here and copy and paste it, okay. I can paste it again, pasted a three times and it's another perk for grid. You can just keep going and we'll keep adding enough cells. Okay, so that is a real big perk for grid. Now, the way the grid works is a lot of the overall structure is done with the parent. Can you say the parent of all of these things on the inside here? I can do stuff too. I can say actually I'd like to align them to the center inside their cells. Awesome. Whereas let's say the image that we dealt with in the last video, I will say this button down here. If we want to change it, we don't do it, do its parent, we just do it to it. We say you are now in line block or block. So we do it to the actual thing, whereas grid and flexbox. Okay. We do it to the parent container. Okay. But the parent have children, these little guys. And you can do individual things to these children. So you can say they're all centered except for this rebel down the bottom here. If you click on the child of the parent, okay, you can say, Hey, you're right aligned. Grids are awesome. Grids are amazing for really structured content like our thumbnails that we're going to be doing for our portfolio. A lot of repetitive stuff. It might be items in your store, might be images or your portfolio. Really good but very structured. It's all Samy flexbox in contrast, which we'll do in a bit, is good for irregular stuff. Stuff that's a bit strange, needs to do some weird things. The thing I want to know is that say this image, I want to move it to the side. Can you see this image is not a child of our grid here. Like you see, it's like there's the grid, the trialed and it goes down one level. So there's diblock here is the child the things inside the child or the grandchildren that I'm doing anything. There's no such thing as a grandchild has made that upcase seemed right. Okay, but there is no like extra layouts for this. So it's one thing to note and we will double back to there because we're kinda crossing over and because they like, but I want this to move on the right. This is quite small and I need it to be on the right. Do I put a grid inside of it and go right there? It'd be ridiculous. You could do it. But it's way easier to use flexbox. Okay, so I'm going to pick this diblock. Forget that it's part of all of the child. It's just close it down. Ignore it doesn't have to be. But let's just say now I'm going to flex box. Flexbox has a lot of these options but didn't have to create as Mike massive grid. And I can say actually it's stacked vertically, which is awesome. Back to where we were. It always goes to default to horizontal, which is never the way I want it. And you can say actually I want all of it on the right. Now that we've combined grid and flex, I'm waving my arms around because that felt good. It's tricky describing grid versus Flexbox and where to use it. Because often you will use a combination of the 21 or the other, okay, It's never a little people like Mac or PC, you have to commit. I'm going to make in front of me because I like it, it works really well. It's fast, super expensive, but I like it. I can also be on a PC. Okay. I have to hate PCS. That's my that's part of the contract you sign with a Mac but with flexbox and grid, There's a lot of like, Oh, I only use flexbox or you can use grid. There's a mixture you get to use. There's just perks and there's just pros and cons for both. What I'll do now is I'm going to clear my grid just to focus on flex a bit more because we don't want to mix them up. It's understanding separately. And then in the next video, when we do a few more examples, we'll mix them up again. So I've got this container and I'm going to add a div to it. Okay, So a grab my div block by block will expand to fill the space. And like, I don't want it to fill the space. I want it to be I'm gonna give it a name. I'm gonna call this my card one. Okay? And I'm gonna say you are size of 33%, 33% of the container. You can kinda see him there, YZ so tiny you, okay, you know, because there's needs a minimum height, I'm going to put minimum height of 500, way too big, 300. Okay, so I'm gonna give it a background color so that we can see it. Hitting into flexbox. Trust me, pick a color. Marge's spent way too long picking a color and it's a horrible color. Okay, So we've got a card, it's got a minimum height, it's 33 per cent because it'd be great if I could go copy. Actually, let's put some stuff in it first. So we're going to add hitting a, hitting, I'm gonna go a at an image above my hitting, I'm going to choose an image. I've got one that I've just loaded up from the earlier tutorial is you can grab it, anything you like. Just want to add this just so it looks nice. Okay, so we've got an image, I've got this. Let's try and rebuild that grid using Flexbox and want to see some of the limitations. It's good to see it because it'll help you know that why you'd use grid over Flexbox. Flexbox is good about this card. I want 12 of them and by default, okay, my card, which is a div tag, is set to block and we like it would just do inline. Let's do inline-block networks, paste, paste, paste another one. And that might be what you want. You can add some spacing around it that would work. Now, why on earth would use flexbox? Because it has lots of cool extra features. I'm gonna click on it. But we have all this kind of alignment stuff. We can justify it. It's all very cool. Let's undo that though. Because like grid, you do it to the parent. So I'm going to do is turn it back to block. And I don't wanna do it to these individual items. I want to put it in a container or in a wrapper and then turn that into flexbox. And all of these guys become children might my cards. So I'm going to add a div block. Could I do it to the container? I totally could. Let's just do its container. So let's say container is, Flexbox will hold horizontal, vertical. So we're back to where we were. Now though, we had, what do we have 33%. Let's make it a bit smaller. So my card has a style that says you are 33 per cent. Let's make it 25 for Google's and make it a little bit bigger. Okay, but spacing, I can start doing percentages for spacing, okay, but it becomes tricky. So like before we could use inline-block and just say add a bit of spacing. But this is where Flexbox gets good. You can say actually the, actually I want to change the spacing and I'm going to do it not to the child, but the parent. And I could say, Hey, everybody here, I'd like you to justify how this one looks space between them. Job done, instead of trying to calculate and our spacing. The nice thing about it is that when you get down to this size, it's still space them out. Okay, so it's nice and responsive. So Flexbox, if you're just going to only do that, okay, it might be enough. Okay, so these cards might be actually quite big. So you might say actually they are 33.3%. They fill it all up mostly. Okay. And you can say Actually though, I would like to go back to the parent and say justify them all, but let's put a bit of a gap in there. But I'm ten pixels. Flexbox wins, but we've got close to where grid was working. Okay, so this is where there's a lot of confusion like which one should I use? If you just wanted one column of these little cards here, it wouldn't matter. Flexbox or grid. Lot of this stuff is the same, so it doesn't matter. My vice I remember grid first, use flexbox. Next, if it doesn't work with Flexbox and fixed box is bit of a pain in the but if you have to have four of these, if I go copy paste for them, it tries to squeeze them in one line. That's where I can say parent rap. And this is where it all goes horribly wrong. And I find it really tricky to get things to line up K, paste another one in. We can work on this and get these to line up and we can mostly get them to be perfect. And the problem happens with PAD. There's just way easier to do grids. We saw how easy it was all of these guys in a grid in your way. But if it's just one line of them, flex Flexbox and Grid, same thing. We would Flexbox be useful then over a grid here would be for uneven would be uneven cards or anything. Okay, we'll do kinda like a mosaic looking thing. So if you remember, grids, good, as long as they're quite structured, whereas this, if I go you, this mole and you, or even bigger, okay, and you quite small. The smallest one, this heading here in this particular case is tiny. This one is longer by bit. We can with flexbox, we put in the code, we said You're 33 per cent, okay, just to give it some spacing bought because now we've added Flexbox, I can say in but optional, I'll click, Get rid of that and look at that. It will be the size that needs to be. Does it need to be small or big or tiny? Then I can decide with the parent, I can do things like, what does it what does it do? Did they all just stack up? Oh, that's nice. Grid can't do that kind of Cain. But you have to be very explicit. You have to say column a is 0.5 fractions, whereas this, you can link the content, decide how big it is. So flexbox, super flexible, a little bit more tricky to understand. Grids, super rigid, but great because a lot of stuff on websites are kinda step and repeat rigidness. Let's go mad with Flexbox container. We can say all the children are aligned at the same time instead of the top line along the bottom stretch to fit line along the top in the middle of their container to the right. A lot of this stuff is in grid as well, but they're all kind of occupying their own cells, split them apart, pushed to the edges to wrap. Okay, So that's kind of some general overviews of grid versus Flexbox. Let's go into some more examples in the next video, we'll actually just make some stuff and see where we end up. 50. Flex Box Layout With Examples in Webflow: Hi everyone. This video we will show you some, we, I will show you some examples. And we together will understand flexbox layout a bit more. So we'll go through some good use cases like this one here, the navigation, okay, everything's justified. So stuff on the left, this stuff on the right, I can add and remove things. Here. Alignment is really good for Flexbox as well because it's section and right in the middle here, I've got this Lovely bit That's not using margin like we've done before, just wants to be in the middle. And another example here where we get these two options case stack next to our image and we'll do it with Flexbox. Alright, It's not making stuff. Okay, so let's start with navigation. Were build this navigation here at the top that has these things in the inside. It's good use of Flexbox. And I'm gonna do it in isolation. So I'm not doing it on our main project, I'm just doing on an empty project just so that we can work on Flexbox on its own. So a container, a, using a on the keyboard, put in a div block inside. Notice put a section inside of it, okay, because it's gonna be navigation section, Section side of my container called Section nav. I'm going to add a couple of things inside of it, like an a, I'm going to add our logo. I'm going to add an image. I'm going to choose one from our exercise files. There's one called sponsor. Okay, whereas if they sponsor one, I'm just using this as an example. You can make it a bit smaller and add a button, a button, squeeze it in there. My section nav is expanding to fit the stuff inside of it. I want to put a minimum height on. We know all about that section nav. I'm going to put a size, I'm going to put a minimum height. All hundred and 50. No, 100. That'll do. Now. I want to get it to go center, which is tricky. I could use margins. Okay, and that's fine. I could work. There's loads of ways of doing the same thing is, I guess one of the points from this layout section, but let's use flexbox. So a cool thing about flexbox is, do I do it to the children or do I do to the wrapper, the outside, but that's alright. We do it to the outside parent part, to these guys, we say you Flexbox job done. One of the defaults is horizontal, which is what I want, not vertical or horizontal. But can you see here the default as well is stretch. I want it to be center. Go ahead and justify. Look at that. There's left align, centered, right line. But look at that one. Well, who exactly what I wanted. Okay. Whatever that one is hovering above it, spacing between case it's going to evenly put the space between Flexbox, super simple in this situation. Okay, It's exactly what I wanted to do because of the ease of this align and justification. Let's go a little bit further. I want to add another button, copy and paste. Okay, so it's evenly distributing them, which is great. So none of these other ones are going to work for us. So what we can do is we can push Flexbox a little bit further. These two, if we wrap them up in their own div tag, okay? That'll mean that there's a logo and one div tag. So there will still split them out. Okay? The fact there's two things inside of it doesn't matter. It just looks at the higher level. It looks like there's a logo and a div tag and we'll separate them out. So that kinda makes sense. So diblock, I say div tag, it's from HTML land, they call it a div tag. They call it a block here in Webflow, which is accurate. It's just another way of calling it. I'm gonna put you in there and you inside that block. So what just happened? Okay, I've got a section and is only two things inside of it. Okay. So splitting one to the left, one to the right, within the diblock, there's two things going on, but then you go fixed it. Okay? And I can obviously go through and add as many buttons as I like because it's all in that little wrapper, that diblock and it's pushing to the side. Now another thing, another level that I might go into, I could add some padding. I could create a button text. I could go button nav and add some margins. Okay, there we go to space them out. Totally fine. Okay. But we're exploring Flexbox. So what I could do is at the moment, right, we've got our wrapper, the parent That's got Flexbox applied. And those two things there are two children inside of it. I doing this stuff. Well we can do is say, Hey child, which is called terribly named DIV block. Let's give it a proper name. Let's call this weather Nav. Buttons. Now button rapid, just to make it clear for myself later on, what I can say is I can say, I know your child. I can see you there. You can do stuff doesn't do enough. I want the gap. Okay. And that's fine. Okay. What I can do is say, I know your child, but you're also now going to be a parent or grandparent thing. Okay. So now you are a parent, and I can say people inside of you, your children are going to have a gap of columns or rows. Let's do columns. And let's go. Could I just put margin on the button? Totally good. If I, could I build this in a grid. I totally could. I could go You grid after my container, after my in the container, but after this, the trouble is going to be getting it in there. But I need 123, I can do that. So I'm going to grab this. I'm going to have three columns. One row. I'm going to make that one about that sort of size for the logo. Actually, I'm going to make these two and make that big. This is where you run into problems you'd like, okay, how big does this 1ab? But because it's so rigid, Mike takes links and these buttons at the same size. So if they weren't, there were exactly the same which they never are, you could use the grid because you can make these the right size and just put the buttons in and it'd be great and you can adjust the padding. Okay, great. But that's problematic. If you have your second button has very long text, number ten. So you can see how it's splitting them out. And if I got another one that already has Flexbox to the rescue, uneven shapes, Flexbox flexibility. Alright, let's do the hero box. So inside my main container, I want another section. So I'm gonna go to a, I'm gonna go to section and I'm going to try and get it in the right place. It's gone inside. There we go. So it is underneath this one's going to be cold section here. And what I would like to do at the beginning, then I am going to just color it. I'm going to have the Alt or Option click any of the chevrons. I'm going to say you are going to be a dark color. Great. All the typography in here is going to be white and it's going to be random font. Okay? And I'm going to do a height. So the size is going to be not a height, but a minimum height of 500 pixels. Now, if I want to add a hero, sorry hitting in a paragraph and a button like the beginning. If I get a they didn't work. What you see over here, that happens, happens to the bestest, it returned in. Actually click out. Now hit a and say, I want, I want a bit of paragraph text. And when a button, Okay, I want this paragraph texts in here is going to be my p hero and he is going to be a size. I want it to be minimum. Actually, we're going to use maximum width of 600 pixels. Does not stretching to the outside. And I want them all centered. I could go through and say, alright, topography. Everything inside this hero section is topography Align Center. And that kinda works kind of. Okay. But to the rescue as Flexbox, flexbox is going to say, man, that bolds, not good. Anyway, the outer parent, okay. I'm going to say the layout is flexbox, which doesn't work. It's gonna be vertical. Do I want this to stretch all the way along? Just go in the center. Hey, look at us and also don't want wrong with top. It's going this into our Flexbox. Bottom stretchy, even spacing. There's lots of flexibility with Flexbox. And obviously a grid here wouldn't be useful. There are other ways of doing it. There's ways of doing things like auto margins and there's other ways of doing it. You might stumble across in your adventures. And it can be just as right as this one. P hero needs to be centered. Here we go. And it needs to not be the giant font. Let's go for public sense. You might not have public sands. We can use a bunch of nice, alright, so some good examples of using Flexbox. Let's do more. Let's say that we want this image on the left and these two things kinda stacked up next to each other. Grid would work totally would, but we'll only flexbox. Okay, so what we're gonna do is how would you do it? Sit there, pause it. Have a little just memory game like thinking challenge of how you do it, get it to work. Okay, first of all, we're going to need a div to surround all of this stuff. Okay, so I'm gonna go a and a if block, put it in there somewhere, image in urine. And it said we just want this. We want that just kinda stuck next to it. All we need to do that, go to the parent, the wrapper around the outside and say you'll Flexbox you the wrong way around. Okay. Vertical. Horizontal is kind of what I want and I want it to line up center. Now, I just happened to have my heating in front of my image by accident. And this reminds me, you can do some weird stuff where with Flexbox to say can change the direction so that you can make, make the image first in that first, then everything is in opposites. I don't know what you'd want to do that for. But you can, let's put them around the right way and make them align to the right side. So remember back to the parent, go to left align. And the cool thing about flexbox is the gaps between the columns. I'm going to use my up holding Shift Up Arrow is, you can decide there. Cool. So that works. Let's say I want to add the button underneath here. What do we do? That's right. If I try and edit, what's going to happen, get in there. It's kinda spread them all out. So I need a div wrapped around all of these. So a diblock, throw it in there and there, you and near miss the order over here. So notice right away. So I've got this div block, is a child and so is this image. There's only two things in here. So now it makes it easy to go. Everybody parent, everybody left align so it fits in there. Now it's centered right? But you can see top, bottom, there's all this space in-between. So let's figure out what's causing that big gap. It's a good kind of we were looking at a site that we did a while ago and we're not sure where all the styling is coming from and why is there a big gap in here? So remember that x-ray vision, okay, It's hidden in here. We can say you go to x-ray mode, click off, kick off from the background, and just hover around and you can start to see where all that spacing is coming from. So there's a chunk of space and coming from button, hero and some from something called H2. It's an H2 tag with a stock or heating five. So let's go and remove those. We can do it while they're an x-ray mode. So click on this and say button hero. So it's only the button for a Hara page because we named it nicely. We're not using anywhere else. Hopefully, I can clear this. I'm going to go Option or Alt on a PC. Clear that. Do I need the right-hand side? I don't need that either now it's going to pay that off. Now. It's looking better. I might want to clear up this one as well. Let's click on this. He's getting his styling from summing. He's an H2 tags have a look. So he's H2 for some reason. It should be an h5, which clears up our problem. Because if it's H2 and I go and clean up the H2 tag. I've used H2 a bunch of times. I think that's it's an H3, that's an H2. I just mislabeled this earlier in the course. You might have noticed earlier in the course. So I actually should just make it an H5 and my problems survived. Alright, so I'm gonna turn x-ray view off and look another good use of the flexbox because it has even more, let's say the spacing in here, I can go to my block. Actually, I'm not going to do a good turn it into another flexbox and play with the space between, but it looks fine. And I've already got this class apply cold button here that I could just go with. So it's not all. You don't have to keep going down the rabbit hole of more Flexbox is on top of Flexbox is you could do no right or wrong for that. Let's do another one. Alright, let's finish up with this one. We did it earlier on. Remember? I just make it flex. Megan Flexbox, push it to the right and I'll talk about it later. It is time to talk about it. Alright, let's deconstruct what we did. So there was a container inside of that container was a hero section. Inside of that section, we put a grid, kinda put one on one side, one on the other. Perfect. And then to have these two things are hitting Enter button, they need to be wrapped up in a div, okay, otherwise they end up jumping into the next grid column. So we did that. And what we did is we said, Hey, just grabbed the div, make it, well, it started off like this, but that was our problem. We got it to go to the right-hand side in terms of the alignment. But you can see the hero, the H1 box around it is to left align and we couldn't make it go over to the other side, the button stuck there and so is this. So what I did was I said diblock, please just be flicks, be aligned to the right. And then I wave my hands and we don't ask why do it later. But now you understand super easy container, parents make flakes on the right. Happy Days. We also learned earlier on in this video though, had to push this thing in the center. We fudged it with this one by saying, hero one has a whole bunch of margin and it works, nothing wrong with it. Okay, so let's do it a better way or a different way. Just to flex our flicks skills. So how do we clear That's right, option Alt, give that a click. Okay, so now it's stuck at the top. How do I get to go to this into, this is where you go. Alright, click the diblock, and there's this into one. Boom, boom, boom, boom, boom. We ran into this problem before. I run into all the problems all the time and get confused a lot. I'm like, how do you get down to the bottom? It's because this diblock is, its height, is set to nothing has gotten no height. So it just kinda wraps itself up the heights actually not coming from this diblock, it's coming from higher up the list, quite far up, not the grid. The grid is not giving you the height. It's the hero section. Okay. Let's check actually, can we check with the x-ray vision? I'm not sure if it picks this up. Let's have a look. Does this does that? No, it doesn't pick it up in this one. Alright. Bad x-ray vision. I worked my way up until I figure out which one is giving the height. Okay, and I'm gonna remove it. Well, I'm going to actually cut it. Sit that back to nothing. Okay, remember Alt or Option click. And then I'm gonna give the height or the minimum height to the diblock, then it knows how big to be. So let's go minimum height, paste it in this end because we've got it in the center. It knows to go into the center or the bottom. Well the same time or spread it out evenly spaced it. Okay, so the ego, we came back, we live what we did and we made it better. It's not better. It's the same thing. It's in the same position niche, just a different way of doing it. Alright. I don't know how you feel. I'm going to continue on with the flexor now, flex skills. I feel like that's my new gag the rest of the course, Let's flex, flex skills. And I feel like we've done a few little projects run into some problems, but I feel like we've got a few examples under our belts. Let's move on to the next video. Let's learn some new stuff. 51. Equal Height Cards With Button on the Bottom in Webflow: Hi everyone. In this video we're going to get this button to be at the bottom of all of these different cards. If you're coming back from the future and you've already watched me like what was it again? You make sure that the parent Rapa is set to a layout of flex and then this is set to his he's a child. Okay. Well, she is set to a margin and the margin top is set to auto. It will push its way down to the parent box. Alright, let's go and make this whole thing. It's gonna be fun. Alright, we're going to start with a problem. And I was like, where's my button's gone? Kinda half works. I can kinda navigate it. And then up here I was like, Hi, requests design control, you're designing and another tab. Good work, Dan. So I just got it open twice. I don't normally have it open twice because I don't need them. But when I'm doing these tutorials, I do. But hey, you might run into that problem. So let's just have one of them open and let's get going. Okay, so we're gonna be adding this chunk down the bottom right. Let me grab my Figma file, joint it up there so I can see it. So building this first thing is, is I need either a flexbox or grid. Grid just gonna be way easier. So I've already set up my background that goes to the edges of this container in here. I gave it a name and inside of it, I'm gonna put a grid. So I'm gonna go, I'm gonna use a slightly different method rather than hidden a and dragging it in. Okay, I'm gonna do that. Just get us comfortable using all the ways. It's gonna be a commodity. And I'm gonna go grid. Okay? And I'm just going to hit into because it's the only one available. There we go. So we've got a grid and now I want it to be, I'll do three across. I'm going to delete one of them. Actually not going to doesn't matter. It adds them as you go because it's own order. Alright, so I've got our sizes. Now what I wanna do is build my little card inside. So I'm going to click Done. Okay, and in here, I'm not going to double-click it. I'm going to drag in a container and a nice generic container. I've got this selected. I'm going to go Command D and type in div, div, div block. I'm going to give my block a name, just going to be called cod. Cod is good generic name for my pricing card and our cases, these cards for thumbnails for our portfolio might be cards showing different items in your shop. Okay. So card, thumbnail. Now I'm not going to spend too long. I guess I wanted to show you how to get the button thing down the bottom. I don't want to style it too much. We'll just throw in a few basic things. So Command E inside this div, I'm going to put an image. And I'm going to leave that for the moment. I just want to throw in, we're going to throw in a textbook. It takes block is just generic. Text. Doesn't really, it's not paragraph, it's just kinda be owl. And this one is our UX design project. Okay, inside that div as well, I'm going to say Command E and I'm going to put in a hitting. Okay, I'm gonna make sure it's a heating to. And then what else can we not put my button in? Command D button. And that's good enough. The only thing I've probably need is my image to make this work. I'm gonna go to my assets panel, and I'm going to grab these ones as well. I pick some generic ones that we can all use. So it's in portfolio and thumbnail one to six. So go get those and just dump them into your page. I'll end up in the Assets panel will beat your own portfolio stuff. And we'll start with, actually, I can delete my image and just drag it straight from there. I'm sure it goes in the div tag. Do it over here. Here we go. Alright, so great. I've got an image. It doesn't take some heating and some button. Let's not go too much further. Let's put, even though I'm going to put card thumbnail, Let's just put a background color on it. Came in but Alt or Option click those chevrons. Going to go to my slate. I'm going to style the dub biography is going to be wide enough. What we really want to do is have a few of these with different size headings. And we want the button down the bottom right. So I'm going to grab some texts. Just copy and paste it from this thing. Copy Paste. I'm going to, I've copied it over here and paste it. So I've got a few different ones. And now I'm going to zoom and just change to different headings and switch out these images. Okay, ignoring the margins around the outside, I'll style at the end of this video, I just want to get you to a point where I want the button both over here and I want to all at the bottom because at the moment, because these headings are different, this one is not quite at the bottom. So it's this is a this is a job called Flexbox. So we've done the grid, It's great. Say consistent. But we want to do some funny stuff. So we're going to use flexbox. So I've got my card thumbnail which is wrapping everything. I'm a child of the grid. Okay. We're going to ignore that because what we're going to do is go to Layout and say, actually now you're the parent all Flexbox and needs to be vertical. And it needs to be not stretching the moment it defaults to stretching. Okay, cool. So to move it to the right, we did this earlier. So remember, the parent does kind of generic stuff, but the child can be rebellious and say you are charter flex and you have an alignment of right. Here we go. Next thing we wanna do is we need to move. Why isn't that one moved over? Why did that one and not this one? Because this one got a class as I was changing it. This one doesn't have that class applied. So I'm going to call it button card. Okay, and I'm going to play it here using my super sweet shortcuts we learned earlier on, where you earlier on Command and Enter. You see it just jumped up to the styles here. And I can type in button. I'm using my arrow keys to go down to apply it to that one. Same with this one. Command or Control Enter. And we're going to get a card, whatever we want button. It's probably good, wasn't it? They've all got the class applied. So we're doing the same thing, that red line. How do we get and pushed in the bottom? In the big thing is with it selected, you can go to your spacing. And if you set the margin to auto, auto just means fill. Intellect can't fill anymore. Okay. Is it kind of expands out and pushes until it can't go anymore. So instead of giving it an actual size, give it a margin. This only works when you've set the parent to Flexbox and the child too, margin auto. That's the big trick for this. Now let's go in and we're gonna cause more problems, but learn more. Let's do that. So I want this. Also. I haven't really been doing it this way. Let's see the little, we'll do this, we'll try to do this a little bit more. Instead of using the navigator, we're going to use the card thumbnail. What I wanna do is I want padding around the couple of things. I want it to be a specific height or a minimum height, so they're all the same. So there's card thumbnail is going to have a size of, I'm not going to use height. Remember we can use minimum height of 300. Terrible guess. I'm going to keep going up until I find something. I'm going to allow room for a third, a third bit of text. And I'm gonna probably lower this spacing, but I went to a minimum height. These guys all come down for the, come down for the ride as well, which is cool. So then Nixon gonna do is gonna totally wreck what we've just done. Because what I would like to do is I want to put padding around the outside now I could put a class around that, class around that, but a class around that. But obviously, it's better to put it around the wrapper. The problem is, is the image, I want to go all the way to the edge. Design. Image goes all the way to the edge, but just this chunk. Okay, so I could just go cod, thumbnail spacing, hold down shift and not sorry, not margin padding. Okay. I could do this if that's what we wanted. It's not what I wanted. Because what I want is just spacing down here. So I'm going to create a little div inside of this, okay, another div and put all of this junk inside of it and do it. The trouble is is I've made well, not the trouble at the whole Flexbox that I did on this outside wrapper doesn't really need it anymore. I can leave it there. Let's leave it there and I'll show you when we turn it off, it doesn't do anything. So I'm going to grab a div tag. I'm going to click in here. I'm going to go Command D and try to type div around my microphone and I go, okay, I'm going to throw it all in. Lucky get in there. And then then we'll go in. And did there we go. Now I've only done it for this one. I'm gonna have to repeat it for all of these other ones. And I would have done it from the beginning, but I didn't want to confuse too much of it. So let's confuse ourselves now because this is gonna be weird. Because, well, I'll just try you get weighed together. So this one here, I'm going to give a name. I'm going to call this one my cod lower Rapa there when I'm okay. And I would like to give it some padding, hold down, Shift, a drone sound effect. Okay, and there we go. So that stopped working. Okay, it's still got those class applied. It still got auto along the top there. Okay, but it's not doing its job. Well, it kinda is. Let's actually repeat this on all of them so that we can, it'll show you the weirdness easier. So I'm gonna just copy and paste this div into all of them. I'll get Jason to just go through and speed me up. Okay. So when does lower card wrapper, I'm going to move it on and change the heading. So let's go speeding. Okay, so first step, it's not sticking to the bottom. Okay. How did we do it? That's right. We grabbed the outside wrapper, which is getting a little bit and let's tidy it up. Let's look, look nicer. So my grid cut thumbnails inside those cards, thumbnails is just work on the lowest trunk. Okay. And this one here, my cod lower rapid needs to be a child of flicks already. Okay. That was just from that original thing we made. Let's get rid of that because we don't need it because it doesn't clearly work. So the outside wrapper, Let's go back to block. Let's go to that little wrapper around those lower chunk, okay? And just say you are now the parent. And you need to be vertical. And it remembers, It's kinda cool, like I assumed it would flop back to the left. But it remembers that it's got top auto. And it remembers that it's right aligned. But desert remember it's called telephoto. It says it does. But that one doesn't seem to agree. Neither does that one. That one kinda looks like it does, but it's just the biggest box. That's it make it even bigger. So it's grabbed the cod thumbnail, the entire thing. Let's grab my size. I can go We had minimum height. Let's go up to 600. You'll notice he doesn't even work. So what's happening is this wrapper in here. We said this little wrapper. Okay. There's lower Cadoret back. Can you see if you look at the dimensions, it's doing it perfectly. Look at this one over here. Okay, he is ordered to the bottom of it, but it's just not getting bigger. Can you see that? It's down the bottom of this one, but it's not, it has no idea what this outside things doing. How do we get it to recognize it? We don't. This thing here is not going to do the minimum height because this can only see his parent Rapa. So there's no point doing it to the grandpa or the really high one. So my minimum 600 pixels, I'm going to clear holding Alt or option. And it's going to be this, the rapper that's gonna give me my minimum height. I'm gonna do it on the parent of them. So let's type in 500 pixels. That's way too much for this, but it works. Okay. I'm going to hold Shift and use my down arrow to get it so I can yeah, that's gonna be my size. Now this all can be a little confusing. I guess what I don't want to do is just have exercises, but everything goes right because that was a bit of a head-scratcher for me too. I was like, why the knee at the bottom. And it wasn't till I kind of move my mouse around and I saw the little blue line, unlike you go, He's not he's doing what I said. Okay. He is at the bottom of the box. I put them in his parents, but he has no idea further up the chain, What's going on. You can only recognize what's in his kind of like one step up parent, which is just as low a cat now. So we just switched the minimum height from the outside wrapper to the inside one. We solve the problem. Now, I'm going to actually leave the styling. We'll do it together in a future video because I think that's enough, done a lot. Then I think about it now is once we've built it, I can grab my cod, thumbnail, copy paste by space, space, space, space, space, space. And we can have lots of these guys and just switch out the images. All right, the big thing to remember is that this child of my parents Flexbox needs the margin on the top to be auto and we've figured out the box, the parent that he's in needs to be big enough height, then you can push down to the bottom. Alright, onward to the next video. There's bitter. Get easier. It gets mildly easier. Now it gets tiny bit harder, then gets really easy. Once you understand the structure, stuff can get a hit around a bit. Then all the real easy fun stuff happens. I promise. All right, thanks. Video. 52. Position Absolute & Relative Explained in Webflow: Hi everyone. Look what we've got. We've got a button in the top corner over our image. It's over-the-top. This overlapping stuff. It's either metric or is absolute positioning. Look, move it around. It's easy, easy ish. Let me jump in and show you how to do it. Right first up, I'm going to add a button, so achy, drag it in. I'm gonna put it in between those titles just because I want to express some of the positioning what it does, and it's gonna be helpful for that. So I'm going to give it a plus. I'm going to this this stretching too far. This is only because it is child of a Flexbox. If you haven't set up a Flexbox, you don't have to do this, but I set it to the left and now I need to move it up. Actually what I'm gonna do is do two versions of it. One using absolute, N1, using relative. So I'm gonna give it names. This is gonna be my button. Okay, They already exists, is going to be my button plus two of them. But button plus one. And I'm going to copy it and paste it over here. Get it. I grabbed the whole thing and copied and pasted it. Just you copy. You paste in the same position. Now, I'm going to give this a different class. You've probably done this already. If you go, I'm just going to rename it number two. Okay. You haven't renamed it. You renamed all of the classes to number two. Look at this first one is now number two. So what you need to do is undo that and say actually let's duplicate the class. Or you can delete the class and edit again up to you. Alright, so we've got two separate ones. This one's called one. So let's go to this particular button. You can use any element, text, a div tag. You can position anything. Let's look at position. It's going to close all this down. Open up position. Default is static. Okay? We're gonna look at relative. Okay, and then we're going to click hold and drag some of these. Watch. Look, it's moving. Now hey, going up and I'm clicking and dragging to the right. A little bit dragging, going on. Here we go. We've got it up in the corner, went up like negative 250 and across 256, 265, come on brain. Excellent. But it left a big hole there. So that's what relative does if you need to leave its whole, they're great. I never do. What I wanna do is say you are going to be absolute. The cousin to relative. But watch what happens over here when I turn it to absolute. Look, kinda close the gap up. And that's what I want. I want to go up a bit now, in over a bit here. Here we go. And you're like, Great. But let's just use absolute for everything. And it'll work like it's totally working now, you run into some little problem. So let me explain what might happen. Is that at the moment, Let's look at this first button, this one here. It's relative to itself. It knows where it used to be in the world. So it can go up to 50 and across to 65. This one though, this one because the gaps closed it basically in the matrix. It doesn't know where it used to be. So what it does is it says I'm relative to the in this case, the body, what it is, is actually relative to the next parent. Okay, So at the moment, the next parent for this guy is my lower card wrapper. The parent of this one is the cut thumbnail. There's a parent of this as well wishes my grid There's loads appearance going on. What it does is this button says, I'm gonna look for the very next parent who sit to relative. Okay. We already did that to the side. But the moment I've got nothing none of these parents are set to relative, so it goes all the way back up to the body. And it works ish. Okay? The problem with it though, is, it is, can you see these giant numbers? Okay? It's like 700.800. Okay. It's because it's relative to the body. The body starts over here, so it's a cross 800.844 and down 724. Okay. And that's fine. As long as you don't change the position. Let's say I make this a lot smaller. Let's go size my minimum height. I'm going to hold Shift, hit my down arrow. I got my button down here. Okay. Well, no. He's moving. That guy was relative to himself because that position moved. He moved. This guy. He's relative to the top left-hand corner of the body and he's still doing exactly what we told them. Okay. He's still 800.700 down. Doesn't matter What's going on around them. Okay. Silly box. Okay. So what we can do is let's kinda move what that was. And had lots of undo, undo, undo, undo, undo. Here we go. Alright, so all we need to do is sit one of his parents to relative something that's gonna move along with them, which is this thing or the card thumbnail is going to move along totally. But let's use this cod lower wrapper. We're going to sit him to relative and it's going to break. It's okay. You button button gone. Okay, so that's irrelevant relative. My button can only click on them over here. He's still there. He is down here. He's still set to 700 by 800. Okay, So he still remembers that. But he's now relative to this thing that bit there. So he's going across and down kind of like you did in the body to get the idea. Sometimes you might be off screen. He might be like totally, Where is he? He might be totally like over there. You'll never see him again. The trick is just to clear these go you clear. Remember hold Option or Alt, click, click. It goes back to where you started. And now we can drag them across. And he's relative to that parent, which in our case is very close end will move up and down. Go to this that's tangent to 100. And look, it came up because he's relative to this, not the body. So the trick with absolute is that it will work for a little while until you change something and then it doesn't. So if that happens, you just forgotten to say you are relative to something, some sort of parents, some, you might have to wrap it in a div tag that does nothing else. Then be relative, okay, so grab the parent, make them relative, do nothing else. So now he is relative to my catalog wrapper. That makes sense. One last thing that might catch you out, it's not at the moment, is sometimes miss the button here when you absolute position and move them around. He disappears. It goes, just disappears. All fake it at the moment. He does this. He like, I can click on them here in my navigator or is he takes button. But I can't see him. Where is he? Is he blank? Because actually just behind this image and it's something called the z-index. So there's my button by default. Okay, if I clear that out, he's fine. But sometimes you might be using somebody else's project or template and love miss with the z-index they've said image here is going to be a position of relative and I'm going to be the z-index of one. Why did I make it relative and absolute? Because I want them to hold this space because if I go absolute, it kind of goes a little bit tricky and clears out of space and jumps out relative to get back in your spot, hold your place. And all. They've said the Z index to one. So I can go to my button, say button. You would now going to be two, I win. And then the image could go, you wait this three, okay? And you can battle it out. Sometimes if you get somebody else's one, some clever designer might go or develop, Oh my God, I'm just going to turn this 2999999. And then you spin the whole time going hitting, where is it? Where's my button hitting? And you go to three. You could be there forever. Okay, so you've got to be cleverer and put in 99999999. That gets tricky. Trying to jump to high, stay in the teens. Because the poor next person might be trying to type in so many nines. That doesn't make all those things, but you get the idea as long as the Z number is higher. Okay, This one here, I'm just going to clear out as long as it's higher, it's fine. That's true for anything. If you do find any other part of your project with something slipping down underneath, something like this is the index. It's the height, just needs to be at least one higher than the person. It's slipping underneath. Alright, How was that? There's a tricky one. Positioning. Absolute was on my outline and then I was like it's too hot. Let's get out of his angels, then speck in and back out. It's like, I feel like now that we're at part of this course that I feel like we're getting a handle of it. And you probably get to the end of this course and go. He's taught us every single one of these except for position. Why didn't he does this? Because it's tricky and it's meant to be Essentials. It's the longest essentials course have made. But hey, web design is interesting and there's a lot to understand. So you go position absolute, not that hard or your brain melted. One of those two things happened. Alright, that is it. I will see you in the next video. 53. Sticky Navbar Footer Webflow Position Sticky Not Working: Hello you, you back this video we're gonna look at, see this nav. Yes, it's a nerve to very minimalist nav. But the good thing about it is that it sticks to the top and things scroll underneath it and you can kinda see them does the same here for this footage on the bottom, it's stuck to the bottom. It's relatively easy to do. You use the Sticky option in position if you are here because you've done that and it just doesn't work. You need to do is sit the top number to zero. And you'll be a way. But for people who've never done it before, let's dive in. Alright, we're covering it now. I'll menu is not looking very good, but we've got a nav bar along the top bit of an ideal button in it. So imagine a beautiful navigation that you want to stick to the top. I do it in this part of the course even though the name is not completely finished, because when the layout section of the course, so I want to kinda keep it all together. So sticky is weird, it's easy and it is tricky. Alright? So I've got whatever I want to stick to the top, I go to position. There's this option here, it says sticky and then you go preview and don't work. The only thing you need to do is say, the sticky needs to, it needs a height. In this case, I wanted to stick to write on the top, so I'm gonna hit zero, hit Enter. Now, Command Shift P, Control Shift P on a PC. Look at that. It's stuck there. Will get us. Thing we might do. If you are going to do a sticky NAB, you don't have to do a sticky note of is that there's navigation has a background color of white. I might lower the opacity a little bit so that we can do some peaking underneath it. So that Let's have a look now it's even works in display mode. And you can see here, the designer, you don't have to preview. You might decide on how you do this. Okay? Do I like, It's probably needs to be darker. I want to just hint at what's underneath it. Okay, don't want to actually covered all z-index IO. Going to pretend I did this on purpose. Why is that above it? Why is all the rest of it below it? You remember the z-index? So I'm going to say that this navigation is going to be set to a z-index of I'm going to use 1,000. Okay? It gives me, on this page, another one too. It gives me ten or nine are the options. You can put a negative z's. Knowing of the options. For stacking. You might make your navigation as a rule in your own head, 100, then you've got 100 bits of stacking. But you know 100 is where your nav goes. Now it's above. Understand? Alright, The same is true. If you want to Footer, Footer, you probably don't want to be sticky. Maybe it's like a call to action as some sort of like notification. So they might be a thing you wanna do. Let's add a section down the bottom. Can't go in there. Get in there. How do you get the right spot? I'm going to call this one section footer. And you can do the same thing. I'm going to add a background color just to make it obvious. And I'm going to do the same thing. Let's get it too sticky to not the top or the bottom to set that to zero. Okay, and that should work. And it's going to work in here. See that it's kinda stuck there. Up to you whether you find that useful or not. People don't do it very often, but people do like to ask me how to do it. And so there you go. The one thing about it though, this section here, and what I'm going to go, Who remembers? It doesn't have a height. That's a really needs a size of a minimum. It's got a minimum height. Let's do 50 pixels. Might be just a little bit of text in there to explain there's a sale on or something else. Click here. Alright, that is it, sticky navigation, sticky footers. Just remember to set the top K to zero or some sort of number for the navigation and then something for the bottom for our footer. And you might have to mess around with z-index if things are going underneath or can check mine because my I can't scroll up high enough to get this to go underneath. Let's have a look. Maybe this one can't do it. They're either. Alright, that's enough. I'll see you in the next video. 54. Class Project 05 - Portfolio Homepage: It is class project time and probably the most important class project that we've done so far, we will probably do in the whole course. What I want you to do is use all the skills that we've learned so far in this course. I've got them all listed here as just a reference of the things that you should be looking to do and apply them to getting from where we are now. Or if you haven't started from zero, create a new page. And I want to get to this stage where you've got a homepage that has all your portfolio and it has different breakpoints. So I'm going to get you to do responsive design as well. Now, use all your own, your name, your own colors, your own font, all your images. If you want to kind of follow my structure. I've added a folder that's calculator at two the exercise files under portfolio, there's one called finished design. I've put in just screenshots of the structure so that you know what needs to go on it. Okay. I've included all the different break points as well. I've got the Figma in XD file if you want to open those up and have a look up to you, or just look at their screenshots. So it looks long and it kind of is, I guess if you haven't done anything yet. But my advice is to, I'm going to do a solution video next and do it all myself so that you can see how I got to my point. But my advice is to do it first yourself, get those problems, try and figure the amount that type of learning is probably the best learning you're gonna do in this whole thing me showing you what to do is good, but doesn't get that stuff to sink in and know that they're going to be troubles. There's just, your new will be some tricky parts. The one most trickiest part is a cheat or as my cheat on this navigation. So on this navigation at the top here. Okay, I want to get my pushed to this side, this to push this side. And we've done similar stuff to this before. We made the parent flex. Now we've pushed it to the edges. The only trouble with this structure if you've been following me along now is that we've got a container. You could apply flex to this container and make them push out. But this container, the one that workflow gives us, actually has some styling applied to it and it can cause problems and it does in this case. So even though you've got a container, it's better to put inside that container. Put a, just a, just a plain old div like this one here. And start from that. Use that as your wrapper or not, the container because it has some styling already applied. So just put another wrapper inside of it. And these, my text logo and my button inside. It's the only thing that might catch you out. So there's a little cheat, but everything else should be, you should have the skills or at least that we've covered in the course to see if you can work it out. Go ahead and do it. I've listed out the different topics and the elements that should be in the navigation. There should be a logo and a button. The hero box should have a hero hitting a button and an image. If you want to know what goes in what area. The challenge, a little secret challenge I've got for you is that the image is in a circle. How do you do that? I want you to see if you can figure that out on your own. There's two parts to it. There's the rounded corners, but also, you will find that I've used square images. You can cheat and make your images square two. But if you've got your own image and as rectangular, you will find a problem. And it's an open book test exam, research project. I'll give you a hint when you are looking online for solutions to it. If something called object fit, you'll probably make grandma tell him I said hello. If you can't make that happen, don't worry, we cover it later in the course when we do images level two. Okay, just wanted to see if you can figure thing, figure that on your own little challenge deliverables. Take a screenshot of the four different breakpoints, desktop, tablet and the two mobiles, and then share it, share it on the assignments part and also on social media. I'd love to see what you get in the comments. Let me know the kind of like where you got stuck and just couldn't find a solution. Because it'd be interesting to see what other people have there to say. I also had that problem, but I fixed it this way. Or there might be 1,000 people had no idea how to fix it at this point in Webflow. And I'll be interested to see, maybe I need to go back and add something in the class. But if you do have something that was hard and maybe you didn't fix it, put it down there as well. Be interesting to know where all the newbie issues are. Alright, that's it. Go make a portfolio. And like I said, there's a solution video next, but don't watch that until you've done your own one. You might leave some bits because you can't fix them. We will do them together in the next video. But yeah, Go enjoy, solve the problems. I'll see you in the next video. How long did this take? Probably a couple of hours. It's gonna be a long one. And it might even take you a couple of days depending on your ability. Okay. So just so you know, it's not a quick job and you're not doing it wrong if it takes a couple of vowels, alright? Bye. 55. Class Project 05 - Portfolio Homepage - Solution Part 1: So how did it go? How did you do your version? I'm going to show you now how I did mine. We're gonna go from, I'm going to go from this to this more complete version. Okay, it's going to work across different devices. And I'm going to work through some of the issues that I got, how I solve them. And it'd be interesting, definitely do your own first so that you can come in here and say like, oh, like he did it differently to me, but I got to the same point or I got stuck there and just skipped it. I wanted to Haldane did it. Okay. So that's what this video is for, showing you my solution to the, to the class project. Let's jump in. Right? Let's get started. Well, in fact, I've actually started, I actually done 25 min of this video already. And guess what? I'm plugging my microphone. And so that's why he's since the hostility because I have to do this again, plug the microphone and next time you tell me I can hear you. Alright, so let's do this again. We're going to start at the top, okay, So out of this top chunk here for the navigation, okay? And we are going to get this kind of ugly nav at the top here. What do we got? And so I've got a button. Let's add a chunk of text for the name, okay, if you've got a logo, throw it in and you can make a logo in a different program. Illustrator. I've got a course for that. But yes, I just got what it takes them. A, I'm going to go to Text Block. Textblock is going here not a paragraph text because it's not paragraph text and it's not a heading. So Facebook is a generic thing. No, drag it in above my button. I'm going to type in my name. Daniel Scott. Folio, full stop. I need either layout, right? So I'm gonna do it. Now. You might have run into this problem first, the first one, and you've already like thrown your laptop out the window. And is that you can make this container. This is one of those containers. We've given it a class, but it's a container. You can make this Flexbox, but it just causes problems. So it's better to have a wrapper div around it. How come you ask this container, these things here actually just div tags that workflow of added a bunch of styling to that styling can sometimes, because you didn't create it and you don't know what's going on. Can do stuff to things like flicks. I'm going to just put in a bicycle diblock. Put my button in it, put my ticks in it, get the order the right way around. And then this did block, which I'm going to call div, nav. I'm going to make him flicks. And I'm going to say, go to the edges. There we go. The height-wise one in the middle. We've run into this problem a couple of times, is that the div doesn't know how tall it is. Pigs, we've given it no height. Height comes from this nav, which made sense earlier on. Okay, So it's not the box-shadow. I'm actually going to keep the box shadow. Anyway. It comes from this section nav, how do I know? I can kinda see it here under size, minimum height is set to 68. If I hold down my command key and click it, it says it's coming from, so it's not from here, not from box where it's coming from section now. So I need to go to Section F and say You are not zero because that's different from clearing it. Clearing it is different from zero. In that case, it probably would have worked fine, but just get in the habit of clearing them in, but Option or Alt clicking them. And I'm going to add it to this div nav now. And there's a U, a minimum height of 68. And it kinda works. Let's go to the layout. And by default it stretches. I want to be centered. And the edges. Here we go. Nice. Alright, next thing I wanna do is style this. Okay, I'm going to call this one text. And this is going to be called logo. And I'm going to do it takes logo, I'm going to check it. It is going to be public sands. It says it's 400, but it's kind of a mixture in there. I know it's the heavy stuff and it is 20 pixels. So let's do that. So you, my friend are going to be 20. You are going to be bold. And I think there's a little bit of negative that is spicing. Just going to eyeball it. It looks good. Alright, this bit here, I want to, who remembers how I change this? Because if I add a combo class here, okay, so this is going to be my, I want it to be the color of secondary. It doesn't do all of it. Who came in? This was a while ago. Okay. If you did remember, you get a bonus point. You select it and you wrap it up in this span tag. Instead of doing a little bit, just that little bit. Okay. And I'm going to say, actually, I'm just lucky I remembered. I made ticks colors secondary for down here. Remember I made it a global class that we're using classes, happy dice, okay? And what I don't want to do is make. This tick, ticks colors secondary, the lower weight, because it'll do it to this as well. That's not what I want. Okay, So I want to create a combo class. Do I make it a global class? Will I use it again somewhere else? Probably not. Maybe. What I'm talking about is move its global. I can use it multiple times. If I make it a combo class, text or irregular, I probably will use it somewhere else. So I'm going to go Are we done? That a span text? So I'm going to make it a global one. So what I'm gonna do is grab a div tag. You could apply this to a div tag. I'm just going to edit to a text block, just a random one. Okay, you are going to have txt rigueur. And it's kinda say you are forced to be regular, copes, get rid of him. Now, I can add a couple of classes. I'll add text regular Next, and I'll also add text secondary. It's cool. I don't know. I feel very successful web designer when I start having classes and I get to reuse, look at me reusing classes. So let's look at that. Yeah. So button one's gonna be an interesting one because what this button, this button is re-used. I'm not going to just make a button for everyone. I'm going to try and build them up using combo classes. Okay? Because I got a big one, I got a small one and then there's down here meeting one. This one is actually a bit smaller than this larger one. So what I need to do is I'm going to create one kind of like base level class, like the lowest one that does most of the work like rounded corners. And maybe it does the color as well. It makes all the ticks uppercase because you can see they're all uppercase and all of these, okay? And bought, I need to do it to the most generic one. This one only gets used, the big one, and it gets used once on a page. This small one gets used at the top here. There's nowhere else in my design. This one gets used multiple times, and I'm more likely to use this one over and over again. So I'm actually going to style this one. And I'm not going to style it down here because it's doing some weird stuff in the code here. So if I get rid of this, roof, kinda goes stretchy. I don't want to add child positioning, sorry, child flicks and do this because it'd be part of the style. And it's not really what I want because it's quite a unique thing. So I'm going to style this one. Okay? This one's got a couple of things applied to it. I don't even like that box-shadow, so I'm getting rid of it. So button does a few things. What does it do? Remember Option or Alt click. It only does background. That's its only job. So I'm going to keep using this one. Okay, so he does that. What else wanted to do? I want it to be uppercase. Okay? I want it to be bold for my buttons because that's what it is on here. Okay, I want some more padding top and bottom. Now it comes to padding top and bottom. What you really wanna do is copy this perfectly, okay, because workout the padding and kind of get it calculated lovely. The trouble is, is that a lot of these things come with pre existing things like margins. Like if I look at Hera One by looking at it, Where's my hidden hero? Has some things already on it. It has a margin of 20 at the top and ten at the bottom that comes from this hitting one. Who made that some person way back when decided H 1s on the Internet are all going to have this kind of default padding. Okay, So when you are trying to measure things, you need to take into account some of the default sizing. So there is a chunk of time. We're actually just going like this kinda looks, that looks close enough. Okay, so I'm gonna go close enough. So I want some button is going to have some padding. Let's see, I'm looking at this one. It looks a little bit more. Actually, the button text is probably the thing I need to do next. So this is 14. I think this is probably 16. My buttons is going to have a default, all 14, then start doing the padding. And I think it might be close. If I was doing this, I'd have this on another screen so I can see it. But you can't see that on the screen. So we have to do this awkward dance. You can hit Command 1.2, okay, For what tabs there, okay, we'll control 1.2 on a PC. So that's alright, I think the paddings or right on the top and bottom, it's due the edges here and the rounded corners. I'm going to do the rounded corners by this interesting one. This is the one I sit that little task for you earlier on. How to round them is going to work for both buttons and images. So find the border. Okay, and crank up the rounding. You can see me, I can get mine all the way up. Perfect. But let's say I make this height of this button. So I've made it 20 pixels. That's all you can drag it to in Webflow. But let's say I make the height of it bigger. So I say the size is a minimum height of it's 100 pixels. Can you see that 20 doesn't cut it? I wanted to be perfectly rounded if that's the goal here, people, what you can do is you can say actually this border radius is 200. You can go way past where it needs to be. You can make this 2000, 20,000 XD and it will only ever get super handy. Okay, So don't get it perfect and get like all that's perfect. Because if it gets bigger, you'll end up with like little cut-off bits, like an exaggerated one. Maybe not that exaggerated, but you can see here I can get it close, getting close, closer. Okay, just make it instead of 61, make it 100. Then it's always gonna be perfectly round. And that'll work for that image to, we'll do that together though. And I want the radius, setting it to 100. I'm gonna get rid of that minimum height, right? You minimum height option, I'll click go. It's looking pretty good. I'm liking it. I think you need more padding around the outside. So let's do that. Drag it the wrong way first, went back the other way, a reasonable time then, alright, so I've got my generic button. Then down here we can say you are, I'm gonna get rid of button card, your class. You're going to start as button, generic button. And then we added that class called button card. Okay, that did the whole flooding it to the right. And in this particular instance or that the count, remember you just go to the flicks child and you say align to the right place. Thank you very much. Alright, so we've got a button. Let's make a small one and a big one. So start with the big one. So now let's have a combo class. There's no point of this being a global class because it's only going to ever apply two buttons. I'm going to pull up button L-O-G. You can write it out the full large if you like. Okay, and this one needs more padding. Both sides, hold down the Option key or Alt key while you're dragging a bit more. And the text I know is because I've already done this. 16 are remembering some of it. But it's not your fault. I'm blaming you though. So that's my biggest button. Okay? Yeah. Okay. Let's look at this one here. Needs to be small button and get rid the box-shadow. I'm going to go in. And I'm going to say the festival. The text is, I think it was I remember it was topography, say tonight. Okay. And the padding is gonna come way down. And this is going to come along. Here we go. I am happy. One thing you will find is that see the ticks here, it's the right size, but it just doesn't look the same in here. There are web design is funny like fonts, especially are given to the computer and the software to render. They're not the same on every computer. So basically your computer's different from my computer. Chrome is different from Firefox. They all render font slightly differently. So don't spend too long trying to get it exactly perfect between here and here. Because you might find when it loads in Firefox or a different browser, it's going to look slightly different. The font gets rendered By the thing trying to show it to the computer and the bit of software. So text does not look the same in Photoshop as it does in Illustrator, as it does in Figma or XD or different browsers. So get it close, but do some testing at the end. Don't get like pixel-perfect now and brush off and figure out what's wrong. And get it close to end. You get it close to where you are in it to be, do some testing and see where that okay, maybe Figma says it needs to be extra bold. But I've decided I'm going to go through and actually make everything 700 because browsers seem to in general render them just a little bit smaller. More like what you had in Figma. In the weeds, Dan? Yeah. Yeah. Get back on track. So we've got this this and this. I need a little bit of padding here. So I'm gonna do, I'm gonna do a couple of things. I'm not happy with the line height from this, or is it coming from? I'm going to hold down my monkey control key on a PC, it's coming from all 1s. All 1s have some got way too tight there. And also I'm gonna get rid of or I'm back. Where did you go? I went missing. That microphone is still working. I wouldn't know to be nappy. Anyway. It was working good. And they'll panic attack there. And so because it's about the time that I figured out that it wasn't working last time. So what I'm gonna do is I'm going to get rid of this heating hero has some where is it? Topography. Take shadows. Good bye. Take photos. I like him and I want some padding here. This is interesting. How do I push this apart? Because this thing is in a grid. Okay. It's not in a it is in the Flexbox, isn't it? It's an David Bach. And you could add some margin. I would add some margin to the button separately from button Lodge, I'd call this one. I'd add a class call a global class called margin top. And I'd make it large or small, whatever size you want it. And that would totally work and you might have done that. What have I done? Here we go and bought because this has flicks applied to this kind of rapid div block we've got here, which I've called diblock, which is not great. And I'm going to say you are, what are they going to do? It's alright. And the grid children, no layout. So he's a child of the grid, but he's also the parent of this Flexbox. Flexbox has cool things like the rows are going to be going to use my up arrow. Oh, look at that. Maybe hold Shift and up to kind of get this spacing you want. Alright. No, I'm not gonna do that. I'm going to decrease the line-height. Just move on to in. Alright, next bit will do is that image. So image here is you're in for a treat. We're going to bring in the images. I've got a few that you can use already dragged mine because I've done this already. So go into your exercise files. You put your own face in there for your portfolio. Or maybe a generic person from Unsplash or put it in, maybe some of your work in them, maybe you're late latest work, or you can use one of the mask. So you can use one of these. I'm going to drag in this one. Okay. He went in the wrong spot. So I'm going to get him to be after this diblock. He'll move to this next grid item because there's only two things in this grid, even though there's lots in here, they're all wrapped up in this div tag there were hiding in there. This guy second, great. And the cool thing about grid is that you can do things to the children, okay, so then this grid here, anywhere inside of it, It's not done inside here. That's kinda like overall spacing and layout and things. But just select select anything inside of here and say grid child, would you align in the center for me? And let's make the rounded corners. It's exactly the same as the button. Just cope. So we go down here and we go borders. You are, you can only get up to 20. But we know we can put it up to 200 or 1,000. Just kinda check to see if it's got flattened edges. And if you are kinda like paranoid, just go down to 100,100.2, short 5,202, 50, no change. 250-200. Just leave it at 02:50 then I don't know why find like something big enough but not too big. But up to 999 would Mehta. Okay. So rounded. It needs to be a bit smaller as well because it's not, you know, we can definitely move the gap up. That's easy enough to do or, or end. You can grab images, we did it earlier on the course. You can just drag them, get the kind of not that one. That one. Okay. The arrow there, it's kind of like hey, we go, I'm gonna make it smaller. But this, any conflicting thing inside of this grid cell. And I can say actually the top here, the grid child can be sainted that way in there as well. And there we go. It's looking good enough. Alright, let's have a look. I'm gonna get rid of this. I don't want it kind of hit it there earlier. And what else can we do? What I might do though is my instinct right then was so section footer. I don't need it. I'm never going to use that CSS classical section footer, or it might do, but it's doing weird things. So my, like my web design brain sees Go get rid of it now, keep it clean. So I can get my style manager type in footer. And you can go you and then, Okay, and I'll make that later on because I'll be adding it and it'll do weird things and it'll freak me out. I know it well. Alright, so now we're onto this chunk. What we need to do, things that we need to button up there, which is kind of already just need styling and just little bits. Let's do those little bits. And I am going to do, I'm gonna get rid of all of these except for one. That's the one that has the button that already works from an earlier video when we did absolute positioning. Okay. Go back to that one. If you didn't if you had trouble with that one because I'm going to reuse this for the moment. I'm going to grab you. And I want to take the parent, which is a little bit tricky because there's all these things in the way. I can't get to cod thumbnail, I can click on it over here. So there's two ways you can click on it and say, cut them now, delete or click on this one. And I can use my up arrow and that grabs the parent. Remember that that workflow part. If I click on this and use the left and right arrows, it's going to go left. Right depicts the siblings in there, which is kinda cool. But main one I use click inside of here, hit up arrow, it's going to grab the parent, which is my lower wrapper. It up again. It's going to grab his parent, which is my cod thumbnail. And I'm gonna go delete, delete, delete. I added lead to those. I'm going to make one, repeat it and then go and change it. Otherwise, they're going to have to keep adding classes and stuff. So we're going to start with this one. We are going to stylus the moment and it has no class to it. So I'm going to call this one text, and I'm going to call this one topic. You will notice I put the like the more generic name first and then the more descriptive part second just means later on when you type text, I find this an easier thing to look at. Rather than logo takes regular text. That's just me. So it topic text, I'm going to say, what are we gonna do? I need to find out the size. It is 12 because the 12, I can do that. So topic text is going to be topography 12. It's getting all of its font sizes from command or control, click from body or pages. I've done that already. And I think that's all I need to do them. Let's look at this one here. Now. This one is an interesting one because the spacing here is quite small. And this one here by default, I've done nothing to this stuff. I just lumped it onto the page. No classes applied in a spacings already quite big. It's good to x-ray mode. Okay, and go to x-ray mode. Where is it coming from? Hover above this can you see there's a big chunk applied to my H2 and it just comes from that from the internet. Okay. Did we discuss that over here? The H one does as well. I didn't ask it to have this spacing. If I click on this, it has some default of 20.10. If I command click that, it says all H2 is come with that in item, but they don't. Some person when they're first inventing the internet or at least HTML, decided heatings are going to have a bit, a bit of margin at the top and bottom. And what I am deciding right now, probably to my future annoyance, is I'm going to just clear off the margins. Okay. I'm going to say actually hitting two, I'm going to go out and x-ray mode. Okay. I'm going to say you are hitting twos are actually just going to be set to zero at the top and zero at the bottom. Okay? And I want to edit not you. Historic HTML create a guy will go. So I'm going to edit if I need it at the moment, I think I don't need it. Okay. Other things I wanna do with my H2 generic, I'm going to make it a smaller font size because what's this war of them can be the font size of 23. Okay, I'm probably just going to make it 24. Common kind of font size. It created H2 because I clicked off and then click back. So what I'm gonna do is undo it. And this thing here, I'm going to make sure I'm doing it to H2 tags, all of them. Okay, and this is going to be 24. Nice. I'm going to make sure it's all uppercase because that's kind of a rule of decided in this design. And anything else I want to do. I need any padding. I don't need any padding. If I was going to add padding, I'd probably add it to ticks topic. I put some margin done the bottom of it. Because this, the moment is quite a pure thing. There's no styles applied to it and it's kinda perfect. I don't want to start adding padding now because who knows if it will be useful later on. But that thing there, he only gets used as a text topic for this particular card is only job in life. So he can be quite, you can add all sorts of weird stuff to him. This guy will keep it nice and tidy. 56. Class Project 05 - Portfolio Homepage - Solution Part 2: Alright, the height is too high. Let's the buttons already done. So what we'll do is figure out where the height is coming from. Okay. So where's the minimum hikes coming from this cod lower rep I just clicked on it called the right one. Excellent. Okay. And I'm going to lower the minimum height to, I'm not sure. What I'd like to do is actually have this two line. I want there to be enough room for two lines. Okay? So I'm going to style it, you know, base my minimum height around that to line height, holding Shift to use my down arrow, obviously to too low, somewhere on there. And because it's minimum height, it means that if I go and add ed more, can you see it pushes it down. Okay. Because it's the minimum height, not the maximum height. It'll allow it to grow if it needs to. Overwrites. Anything else we need to do, you need a style that button. Let's do that button there. So your call button plus two. And we will remember earlier on we had two buttons, we add button plus two and button plus 11. They're just examples. This one here added relative, that one added absolute. So I don't need that anymore. So I'm gonna be tidy again. I'm going to rename this one called Button Plus, because I've only got one of them. And I'm gonna go to my styles and say button plus one. Don't need you anymore. A venue like our tidy IM you I'm going to style, I think originally was going to be black. I don't like that anymore. So I'm gonna make it this secondary color where Button Plus, yeah, but I'm Plus can take all these styles. Actually. He doesn't do anything. It's that science kinda close to my color and sometimes I get confused. But what I'm gonna do is I'm going to check, do I already have color, background color, or we have text colors secondary, that doesn't work because it takes inside of it. So color, background gradient. Now what I want, okay. So I don't have that one, so I'm gonna make it global class because I'd probably be re-used that background color, colored background secondary. So let's make it. So I'm gonna grab my a key, drag in a div block. Just went in there. Don't really care, because I'm going to make this thing called color. I'm using the American spelling, even though I'm from New Zealand, I live in Ireland. We use use everywhere. But surprising how many people will write to me to say I've spelled colour wrong. I spelled lots of things wrong, but I just got it. There we go. Alright, so color BG for background and this one is going to go a gradient. We're gonna do secondary. And I'm going to say the background, I'm going to total them all closed backgrounds. You got my sweet swatches. And that's what that guy is gonna do. What I'm gonna do now is I'm going to duplicate it because while I'm here, I'm going to make a secondary one. Sorry, secondary one. Another one called primary. And this one is going to be this excellent. So I've got you and I can either put background primary end or I can remove it and say color backgrounds, secondary, you go. So he was just there to create my little Global classes. If you know, a better way of doing that, you probably do. If you do, let me know in the comments. Anyway. So I've got Button Plus I'm going to use color secondary. The reason is, is not applying it to just button class is if I need to change that later on because it's just the contrast ratio is not good. I need to adjust it. I wake up the next morning. I just don't like it. If I just change that one class, the button will change, along with that will change everything else that I've used it. At least the color backgrounds secondary of applied. Same thing with the button roundness that we did up here. And what we're gonna do is say, I'm gonna, I wanna do it to the button plus, because I don't want to add it to that class there. So button plus is going to have borders. Crank it up and just put it up to 50. So it's completely round. It is not completely round. Can you see? It's kind of oval. How do I make it round? I'm gonna give it a size. And my one's going to be, how big did I make these 3D, four pixels wide. So I'm going to say you are a size of 34. I feel like I'm gonna give myself problems here. Yeah. It takes the co how do we get him in the middle? That was very good point. How am I going to get input? And this is a head scratch and time. So there's a bit of ticks in here. It's got some styles coming. If I select this, it's got some styles. I might turn it into a graphic and bring it in. If you weren't here, I'd probably do that and go off to Figma, make and draw it and just bring it in as an image and move it up. Okay. But you're here. So how am I gonna do this? I'm going to make the topography festival bigger because I'm just using the plus. And then inside of here I want to move it. Do I use position? Move it across. I do. I try and play with the padding. Let's see whether it is any pattern coming or I can do it. My problem now though is I'm doing it to background secondary. And I who kept the undo? Undo a load of times measuring weight my keyboard because I was playing with size when I was connected to that combo class. So undone, I'm going to make, I'm actually just going to take this off for the moment, just in case I accidentally go back again. I'm on button plus I'm gonna make you a size of 34. Why didn't I use minimum sizes? Because there is no expandability that I want. I don't want it to expand in case it needs to not allowed to give you a fixed width. And this is going to have a font size of what I got too. That'll do. And I'm going to use the padding and margin that's coming from, it's coming from hold Shift, hold Command. Time you where it's getting it from. Ignore that. So I'm gonna give you a little bit this way. Quite perfectly in the middle. Go up one more. Five. We happy with it. I'm happy with it. Okay. And we're gonna go background-color secondary. Here we go. He's not when the right kind of position. So we'll go back to my button plus find the positioning and go. I just kinda drag that around last time wasn't really particularly excited about where it ended up. But now I am excited. I am drag it up and down or left and right, eyeballing it and there we go. Okay. That is kind of it. And my I need to play around with my heading for this. I also need some space on the bottom, kinda stuck to the bottom and it's driving me mad. So I need a bit of room down the bottom afterwards. Okay, So what I'm gonna do is figure out where that spacing is coming from. Okay, container width, so have a look size. So maybe the section thumbnails has spacing there it is there. So I've got 64 at the top. And what I did there was how I decide like what is controlling this. You can get an x-ray mode. Okay, so you could go x-ray mode and go who, where, where's this coming from? It doesn't even show you. Okay. So that didn't work. So if that doesn't work or what I do more often than not, they're going to x-ray mode is I just work back through. I know that's kinda right inside of things. I go back through the parents. That guy has no spacing at the top. This guy, the grid has no spacing. Section thumbnails. There he is there. He has 64. I'm happy with 64. And I want 64 at the bottom as well though. What did I do? I had 12.3. Okay. Remember that's the shortcut to go through all these different sizes okay. Or the different viewports. That was an excellent okay. What I was meant to do is just type one was at 64 and hit Enter. Now because I'm spacing on the bottom. Ray. Actually I want it to be bigger. 164. That's how it got some breathing room. Now I'm going to grab this up arrow to grab the parent, which is the COD thumbnail, copy it, paste, paste, paste, paste, paste. A. So satisfying when you actually finally get to a point, you're like, I can, you know, you've done all that hard work and you can just step and repeat. Okay, So now I'm going to increase the padding in here. So I want to grab the grid Up Arrow until I see the grid icon and make it bigger. And do I make it even that I make it even here? I did. What was it? So I'm gonna go to click on this. Hold down my Option key. It says 32, But it's going out to the air. What's hanging over the edge there. And it's a big old group. Draw. It doesn't work. Grab a rectangle. Let's say you are a width of 50 pixels. Thank you very much. And so I want, where is it? My layout? Type it in. Gap is going to be 50 by 50. Here we go. Alright, that is that. Now I'm going to go through and change the text and the images here. I'll do it on fast-forward mode. I'll pause if there's anything interesting that I find. I doubt there is. When you are doing your own ones, obviously, you've got your own images or you can use the ones that are in the exercise files. Mine are already in here. They are. So yeah, I'm gonna go speedy mode and pause it. If anything. Awesome happens whenever there are. Whoa, whoa. Okay, let's stop. Do the spacing first. Why? Because why is it over there? Okay. It's because let's have a look at do you know how would think? Because yeah, the pause. Have a little think what could have happened to come up with one or two ideas and then unpause, ready, go you back. Okay, So this button here is getting his positioning from this his parent relative to the parent Rapa. You remember we did it. So button is posed more down under positioning on a button plus. So not this one. He's getting it from the button plus, not the combo class. He's getting positioning and it's saying these absolute relative to that wrapper called card lower wrapper, which is the one just around the outside. And we said be quite literally this by this. Okay, and now we've changed that. It's still exactly that right measurement, but now hangs over the edges. So now what we're gonna do is we're going to say u or this way. And actually what I might do is do it from that side rather than coming off from, let's see if this works. This is my theory anyway, rather than coming off this side and up. Because if that gets smaller, It's still. But if I come off this right-hand side, it's always going to be just a little bit. Let's let's try it. Does that make sense? It doesn't. I'm gonna get rid of that and get rid of, I'm going to leave the top one because that's right. But I'm gonna use this side. I'm going to say you are that side. I'm using that corner as the reference. Okay. So the top of it and the right-hand side of the parent, I'm using that. So I'm going to have to come across, you have to kind of shuffle, shuffle, shuffle. I'm hoping now that when I change it, this is going to work. Totally going to work. Come on, work. Grids. You are going to grab that. And when I move it, it does it does the sidewalk and I'm going to have to do the bottom. I'm going to do the bottom. It's doing the right side. I might have to do it to another good point. We're doing it to relative to this. But even though we're sticking it over this image. So let's do another thing that might make this easier for us. Is it at the right size, 50 pixels? Let's have a look. Another way of doing it. I put it in here just because it was good to show you in here and we moved it up over here. It would be better if this button lived inside of wherever this images can you see this card is separate. I want it to be in the same plane as image because that's what he's relative to. I want them to be relative to this image, note to this thing down the bottom that keeps distorting and changing because of the heightened width. Whereas this image here that's grabbed the button. If you're hanging out with his image here, I would like you to be relative to that. Okay. And he's escaped his parents and his parents was relatives and that's what made him work. I don't need that anymore. Let's go back to I'm actually going to remove that. So this guy's parent now is this cod thumbnail. Okay. So let's make his parent relative. That's fine. This plus button. And go to the plus button there and say You are zeros, zero. Let's make him. We use the side, we use the bottom. Will this be better? Let's give it a try. Let's move to these different styles. Wagon. Go. Let's try again with the thing. He's much better. Okay. He's sticking in the top right. So it was kind of a work in progress and I'm thankful that it worked that out. And it seemed concise enough to get what we did them. He was originally inside of this, So he was trying to be relative to this and that's fine. If you wanted them in the top right-hand corner of this. That's not what we wanted. We want them to be hanging out with his image. So it's better to be in this kind of group, a sibling of the thing you want it to follow. Okay, So I'll want them kind of end with this image. The trouble was is that we had relative. He needs to see something. His parent needs to be relative and it was fine when he was inside of there because we made that wrapper relative. But now we need to make this one relative, which we did. Did you Brian explode? Kinda could've. This is either really helpful, a really hard, or I guess to show you that things are a little bit tricky and it's like problem-solving. I love the problem-solving. I loved alike, which is a good idea. And you might spend half an hour trying to fix it and you get a new web designer. I find that exciting. But we did go into the weeds and U2 will go into the weeds trying to fix something. Or I take a deep breath. I'm going to pause for a second. Alright, pulled over. If you did find that really tricky, just don't put stuff on top of images, at least not yet in your web design career. Just don't design them in Figma or Photoshop or Illustrator to have things overlapping like that. Just keep them separate because they can be tricky. And next thing we're gonna do is responsiveness. We're being ignoring it so far. So let's have a look at what it looks like a tablet. Crush your fingers. There's not too much work. Hey, it's not too bad. Let's just start at the top. Okay, Let's have a look through them all. You need to work on the next one. You kind of jumped to mobile and then go and fix tablet because maybe they cascade down like this one, gets this one to fix everything underneath it. And if I change this one, it affects these ones. So you need to work on the very next breakpoint. For me. Any padding. So where am I going to add the padding probably to the parents. I'm going to click inside, use my up arrow a couple of times. He my parent is because it's getting messy over here. It's like getting a little bit tricky to look at. So div, nav, yeah, didn't have went off. Let's have some spacing of padding or margin. In this case, it doesn't matter because the colors coming from the his parent from container width. But if it didn't, that was coming from him, we'd have to use padding. I'm going to use my option key, alt key on a PC, drag it in. Perfect, this one here. Can I get away with it? Probably not. What I might have to do on this one here is go to my grid and say actually I'm going to tighten this in. This grid here is probably going to need some margin. On this side. It doesn't really need it over here because the tax breaks, you might want to put it on both sides just so that in case you've got a different hitting me on desktop. There is, remember, come on to that if you want to change these. So there is no padding over here, okay, but down here you can see the margin come up. There's none here. Okay. It was weird. You could see 22 They did. You see it? Jumping through bike points has some quirks like that, but kinda clicked off, click back on the grid and it went away. But it is here. There's a margin. And I'm kinda happy with it all. It's getting a bit tight there. I'm not ready to degree decrease the font size just yet because I quite like the brakes to design on that third line down here. These guys. Yeah. We can probably play with it and get it three on there. And I'm just going to actually get to go down to two by two and decrease that H2 probably grid is going to be now at the top here and a layout, it is going to be. And you can see it's not blue anymore. It's because it's getting it from the desktop to have a quick look. It is getting, wow, actually grid to choose a style it's coming from, but it's from the desktop version. Cake see little icons quite important. That's where it's coming from. So I'm going to actually just do two-by-two. Now. We'll do that. What do I want? I want some or decrease the padding and put some more on the outside. So I'm going to say grid style that I've called grid to my grid thumbnails. And I'm going to say have some margin either side hold the Alt or Option. Getting sick of these shortcuts. And that's 33. I might do the container. Where does it I think the section thumbnails. For that I say good enough to match those. Am I happy with those now? I am. I need to switch out the images. I know, and I'm happy with that enough. Does it need to push over? Ignore it. There's one here. This one here. I hate landscape fine. Who looks at a website? Landscape fine. You might do it, but we have to address it at least as what I'm probably going to do is make this grid go. Get rid of my 0.5 and make it one-by-one. Okay, So I've got this and this grid option here. What I want to do is Let's look at this one here. So hitting hero was right aligned on the, on all the other ones. But this one here, I'm going to actually make typography. A is sent it to this one, so it's gonna be fine, right? Right aligned. And then this one's going to be centered. This guy here, what makes him go to the right? Do you remember? Okay. He was doing the flux trial, was forcing him to go to the not doing it at all. It's the parent of the parent. Parent is saying it's not what I want. It's funny when you've got grid is the parent and then inside the grid, you've got Flexbox. Good bit confused them like too much. Okay. So here I've said everybody inside of them go to the right, but actually everybody inside of it be seen to now. Nice. And we've got some minimum height somewhere. I can't remember where we got it. What gives you all the padding inside of this is that the diblock. Look. Let's look at spacing size. There's a minimum height coming from command or control click from the diblock, which is what I've called this terribly named thing. And what do we call it? Div here? I've already got a div, Hera. Hopefully not. We're going to say override this to be. I use that option, hold on Option or Alt on a PC and just drag left and right. Especially when you're not sure, you just like me, you don't know what to type in. This one here is going to be a lot smaller on this option. Does it look okay round? You can turn the bolt itself. You can say image two is the style that I've got applied to this thing here. Give it a bit of name, image hero. And I'm going to say you get maybe the corner radius of zero. I think it looks better on. But if you did want to leave it off, you could round okay. From heroin and it's gonna be square. But I actually going to go back to round. It needs some minimum height. I go even smaller. Option drag. This thing here has a grid gap. I'm gonna just kinda close up just for this breakpoint and done. But what I really want to do is for div Hero, want to add some padding to the bottom. So where do I edit? I can edit to this section thumbnails. I could add some top padding to it, sorry, top margin. Or I could find out the image hero. Okay, because this is pretty unique. It's only being used on this image. I could do it to this or the other one. Totally fine. Be interesting to see what you did or you didn't. Just funny how like there's not do either one. Okay. Landscape my phone. Okay. I'm happy with the two-by-two. Let's go down to mobile. And I want to change this up top here. This is an important one. It's got a thing called div nav. It has got flex applied to it and it's got horizontal. We're going to go vertical. And we go. This is kind of an interesting one, like see that flip. It would have been handy probably if we use Flexbox for this and flip those two around, maybe the image would be better at the top. But grid doesn't have it. I don't think. So. I'm gonna go vertical. And I don't want to use this, pushing it to the edges. I want it to be just in the middle of the air, but I can apply the gap for rows and columns in this case is rows. I'm going to hold down my Option key on a Mac, 0 key on a PC. Expand that out a bit. Alright, I'd be enough. All right, everything else in here, is it right being that size, it's probably too big, big, big, probably too big. So my hitting hero on mobile phone, it's going to tomography. I'm going to hold down my option key and drag it down. I like it like that. The height-wise I'm going to go down of it. Button text. It can be massive. The everything else. Let's get into the image off because it's weird in general, but it looks even weirder on mobile phones. So I'm going to say hero image. Will this grid close up? That's good question. So let's go to our display none. And it did. Nice. Alright, this, but here doesn't fit. So I'm gonna grab my parent grid. And I'm going to say you are set the grid. I know it's the grid because it's got this little icon there. Can you see that's the grid and I want the spacing to be Where is it? What kind of see? We're on grid, a grid. That's why I'm going to say it's gonna be one-by-one. And what I might do is play around with the width. It's completely ones that we'll try and fill the space. It's God. So something's pushing it from the ages. Let's have a little look. Let's come out of this grid thumbnails, are you doing it? And size, spacing. Hold down Command click. Yep, It's grid, thumbnails is still giving it to it. But it's coming from the squat little icon. Look at that. He's the tablet one. He's coming from this. So I'm going to override it and put it to simple look at zero. Both sides. How do I look? Command Shift P, Control Shift P on a PC. Do I like that? I feel like it needs some padding on the outside. Command Shift P to turn it off, or Control Shift P. And I think probably I'm gonna go back to my grid, thumbnails spacing. I'm going to probably just put in a little bit on both sides holding down the Alt or Option key. Maybe go and the grid itself. So what if I pick 16? I'm going to grab the grid itself and drag that down to 16. So matches Command Shift P. Have a look at a couple of phones, like different sizes of a phone. Yeah. Anything else you'd change? We need these because button takes him. Button takes that makes sense, right? So what do we call them? This one is ask a question and that one is called depth called Ask a Question. So what I might do is actually go back to the desktop because I want to change this all the way through. I'm going to come out of preview mode because it's stuck in there. And this one is cold. Just they then asked me a question. Ask a question. And this one here is also ask a question. But on mobile number 1234, that kinda made sense over here. But when it's on the mobile phone version, it doesn't make sense. It's just turn it off there. So let's go to position and opposition and display. Whereas display, layout, display off. That is beta. This button, this button is maybe a bit ginormous. This ticks down here. These buttons, I probably want to make them go button card. Anything else I wanted to I do still want to go through all of this stuff. So I'm going to say alignment. I want you to be center. Do I want these to be centered? I'm going to have to look at this a little bit, but I think we've done all the hard work. I'll probably go for a break, come back, look at it. Chicken on my mobile phone. So I'd go and publish it. And then go and check the URL on my phone or my tablet to have a real good look. But I think we're there for this video anyway. She's alone one anyway. How did you find it? How long? This is? How long it took me. I had to pause there in the middle that I cut out in editing. But this is relatively how long it took me. How long did it take you did it take you today to take you to Alice? Did it take you 10 min? Probably not. But let me know, be interesting to know. And also it'd be interesting to know what you did differently. Okay. Tell me the crazy long way that you've got something to work and then discovered that there's a better way. Or you might have seen me do a crazy long when you're like, why did you just do that? It probably is right. And you're probably better at doing it your way. And there's no right roles and, or harden fast ways of doing everything. You can get to a lot of solutions using different methods. So let me know and other people through the comments yourself just to see you were like, Oh yeah, Then did it that way. I did it that way. But look at Jane or Dave did it this other way and it makes better sense than both of us. Have a look in the comments. Drop your comments. My way is not the best way. I am. Reasonably, I'm a pretty confident web designer, but I'm also very excited to do video editing and graphic design and stuff. So there will be people who hopefully you, you'll get way better than me really quick. The wave will change. There'll be better ways of doing stuff. So yeah, I'm not sure where I'm going with this. We're just rambling because as the end, that end, I'll see you in the next video. 57. How to use Px Rem & Em’s in Webflow: Hi everyone. In this video we're going to look at why we shouldn't be really using pixels for fonts and we should be using rings, will look at ends as well, but rings as the one we want. Why did we going to use them? How do we make them work? That's what this video is about. To get started to understand this, let's add two paragraphs. So we're going to add a paragraph just there. And we're gonna make two of them for being fixed. I'm going to add two different styles is gonna be my text experiment, one, copy. And I'm going to have another one down here. And cold takes a Spearman two, I'm going to bend these in a sec. So we've been sitting now fonts to a topography size of 16 pixels. Let's just type in 16 to force it there. Okay, here, over here, we're going to say, we're going to use rems. Rooms is better than aims to say, you know, we'll cover both of them but use RAM. Okay, Wow, that is big. So let's type in one room. Why is rims so big? Rim is one of the default size. So the default size for most browsers is 16. So if you type in 16 rims, that is 16 times 16, you get giant font. But if you just need one log of 16, you just need one Rim. How would you if you needed to rooms, what size would it be? Can you do the math? I did 32. 32. Hey, so you end up with that sort of scaling if you want 1.5 rooms, what size is that? 20 to? The editor would have cut that out to seem really fast, but they took me a little while. So you do that calculation. Why did we bother? Is because there are people out there that need to upgrade their browser for all the fonts to be bigger. Okay, let me show you an example. I'm going to load up, I'm going to publish this. And I'm going to load up in a browser, you ate them. Alright, so I've got it on the Internet. I'm also going to check it in Chrome and I'm gonna go to my preferences and jumped up with a font sizes. Okay, in Chrome, they changes all the time, but I'm in appearance and you can see the font size. The default for this is medium. And what I'll do is Alt drag it so I can see both of these. You write them. Okay? So I can see both of them. If now you, somebody has accessibility problems, they have visually impaired. They might just be old now, have their glasses on. Or just like giant takes fonts like my dad's phone and grab it every time. It to like supermassive size. Okay. So he or anybody might go and change it to large. Okay. Can you see what's happening over here on the left? Can you see this one sits one Rin increased. This one didn't, neither did that. Because we sit them to pixels. Pixels don't want to change. They'll, they'll stay 16 forever. Whereas the person who needs more accessibility, okay, That's the word we're using, k because that's what Google calls it. It's looking for your website to see. Is this site good, useful for all sorts of people, people that need large fonts. And it's no big drama for us to be sitting things to rims instead of pixels. It's not particularly hard, but it does mean people that need to can increase the font size. Now, regardless of whether you use rems or pixels, if you do that, most people in the world don't use that sitting there, just go, I might like to zoom in. I know how to do it on my Mac. It's Command Plus to zoom it in. Okay. It's probably Control plus on a PC, zoom out. It doesn't matter if it's pixels of rooms, this white bar. Google would like to see the rims being used. It's not a huge thing. If you don't do it, you can stick to pixels at the moment. If you're new and you're like skin too much, eventually you'll move to a rims because it's only a small little thing. They had a little mark against your website. But when you are going for like search engine domination, you want all these little marks, a tick next to your website's name, so they rank better. You can fake this inside of a workflow. I'll show you up here. When I go to this one, he had ticks zoom preview. It's defaulting to 16, but if I move it up to 32, can you see all these move up? Chrome just calls it medium. The medium default for most things is 16. Okay, so in here they just say, if I reset it, the default is 16, but if I make it small or big, it will preview it in here if you do want to see how it kind of breaks down and changes, do check it because sometimes you've got a title that has to be on two lines like this. And it is large and is accessible because it's ginormous, it's really thick, really good contrast. And you might decide to leave it as pixels, because if it does expand and contract just breaks the slide and that's worse than having a font. Maybe that's. As a ginormous as it could be. Okay, so do check it. Okay, so how do we go through and update them all? We don't have to, but let's have like an easy trick to do. Let's say that I need this to be. And say this one here. I know it's 50. How do I make it the right rims? Just go divide by 16, which is the default and type REM afterwards, and it will hopefully do the math. There you go. You see it didn't change. Its calculated that 15 oh, sorry, 50/16 and rims is 3.125. Okay. You might just decide it's three because that's kind of a, I don't like decimal points dealing with fonts. Okay. Okay, so divide it by 16 and what have you font size you want it to be. We'll get you the rim size. But just know that if somebody does go and change the default, it will mess with your layout. That's okay. The other thing you might do is you might do the same thing with your height, your line-height. If I keep this as pixels, Let's have a look. When I get larger, it's sticking to pixels because pixels won't change. But rims look. Can you see it needs to go up proportionately to the font size. So I'm going to go back to three. And over here you can use rooms as well. So I'm going to make, what's 52? Why can't I click it in there? Because it's coming from all headings. I should go and change my oil headings. I shouldn't be doing this just in here. So I should be going to all headings and I should be doing it in here. Bad Dan. Okay, so I'm gonna say, I'm gonna do a u divided by 16 RAM, hit into Nico. And this one is crossed out because that's selected is overriding it. So I'm going to command click it to get rid of it. I'm gonna go back to my hitting one. And you are now going to be 50/16 REM. To add a little bit of extra complication. But we're making our site more accessible for both the users. And because the Google search engine wants it to, we want to rank good. My advice is only use it for font stuff. Do not use it for spacing. You can. The problem is, is if you decide to use my margins, as some people do, I see lots of people using their spacing. Where if I got, let me find some heading somewhere. Let's do the minimum height, okay, they might go minimum height on this is a size. Find it container width, div nab. There it is, minimum height. You can use rings in here. The trouble is, is it will go up and down when people change their settings within the browser, and that's not what we want. You can do it totally does, and it makes your site more flexible, but majors ends up breaking loads. And it's not one of the things that Google counts on accessibility. Now, that's my opinion. Google never tells anybody exactly what they do. But yeah, rims, really good for fonts and font related stuff. Next, let's discuss aims. You, Maxine's get into you. It is him, rim. I say ems and rems. Okay. So we've done ramps easy. Just use those. Don't use the Ames. That's the short answer. The long answer is like, you'd be like, why? I'll tell you why. At reasonably complicated kind of they're just tricky. I just use them all the time and deal with the trickiness until I learned about rims. So I've got this div blocky, I'm going to move it up there. I'm going to put in a bit of text paragraph tags getting there. I'm going to be super fancy and go, alright, I'm going to have my fancy class and I'm going to use Ames. And I know 16 is not what I want because that's 16 times the default. Guys want one of them, one of the defaults, which is 16. So it works just like rims in that case. The trouble with it is that it looks to its parent to check the default is okay, whereas a root aim, okay, That's why it's RAM. The root m looks for it doesn't care what the parent is telling it to do. It just says, I'm gonna look for the browser. And the browser says I'm 16, I'm one of those. Whereas the AME says, I'm going to look to anybody above me, any parent. I'm going to use that. So if you decided on this block, I'm going to create a class for it. This is gonna be my fancy div, div in here. I'm going to make the topography, everything inside of it. We've done it before, right? We've said everything be public on a body tag. We said everything be white, so we don't have to repeat ourselves. So in this case, let's say somebody decided, I'm going to make it three EMs. Why did that change? It's set to one. I can see it. There's one image should be 16. No, no. It is looking to its parent which says, I am three M's, be one of them. Then you go, he's doing what he said. That's why we use the root. The root goes all the way back to the beginning and just looks at the browser and says, What is your default? I'll be that. Or is this guy goes, what does the parent I'll be multiples of that. So if I said I wanted to be three aims for this paragraph text, what's gonna happen? It's gonna be three aims from the parent times three teams inside of, okay, so that's why we don't use names. You can then some of the time it will just be 16. Some of the time you'll end up with multiples, which we don't want. So I'm going to undo until it goes. Anything else I want to discuss? Nope, That's it. Why did they call it aims is from older topography and pre-digital. And basically they kept, if you had one aim, it'd be one of the the sizing of the M. That's how they'd take the size of the fonts. Different letters are different. They wouldn't use the sizing of the eye because it's too narrow in with a capital M especially would be a very good kind of it's like a box, right? So they use that. They look at every font and go, alright, everybody capital ends together. And that's what we're going to use is like the baseline for this font and we're going to call the EMS because it's just but it became the m's. Anyway. That's my understanding of it. Yeah, That's it. Use rings. Don't use n's. Fonts, don't use pixels, use rems for spacing, use pixels, clear as mud. Alright, I will see you in the next video. 58. How to use VH viewport Height in Webflow: Hi everyone. In this video we're going to look at height, and we're going to look at this number here, VH viewport height, okay, this one is set to 80. It means in this published one, this big gray box here is only going to be 80% of the viewport. The way it can be seen. You see it changes depending on the viewport size. And in this case, 80 per cent. It's kinda like percentages, but it's based on the view port height. So let's go and figure that out. Alright, viewport. We're gonna do viewport height, but what does viewport height? I'm previewing this in a browser. This is my view port from this tippy top corner here, all the way down to here. All these measurements. Your computer might be smaller, you might be on this one. So your viewport width is going to be about half the size of mine. So that's something to consider. It depends on who's viewing it and what device they're viewing it on. Same with this. If I do viewport height and I'm looking at a computer like this, I don't know. From the nineties, teeny tiny one, It's going to use from there to there as its measurements. If I say B 100 viewport height, it's gonna be this big. On my machine. It's this big. You might have one of those join Norma's wrap around once your viewport width is going to be epically long. So it's a little tricky. It's, it's definitely a lot more consistent with height. Let's do it. So at the moment, something is keeping this open. Why does it div hero, is it, it's got a minimum height. I'm gonna get rid of it. Alt Option click. What I'm gonna do is I'm not going to use minimum height because this is kind of variable anyway, so I don't need to use min-max. So I'm just going to say the height is, let's say 100 vh. Well you can, from this drop-down here, 100 vh is 100% of my viewport. I want this div hero to be 100% of my viewport height, which is good. Let's have a look. Let's preview it. So Command Shift P. Now, see, it's the whole thing except what's just look down the bottom here. Let's close that down. Have a look down. There's more there. Thought I say 100%. It's doing it, it it's not a, it's not trying to fill the space lift. What it does is it looks your complete height. And then say Is this box is 100, is that size. So it is from the top here to the top of the bottom. It's taking that measurement and applied it with this lighter gray box starts. That's why it carries on for a little bit. Does that make sense? Kind of grabs that measurement and then applies it. Alright, let's have a look at, let's just do like say 50 viewport height. It looks at the complete from the top all the way to the bottom, divides it by two and then gems that measurement in here. So you can decide whether this is going to work for you. It's really nice on some sites where there's different sections. You've got said navigation and it drops down to them. You can use the full browser height. Well, the viewport height. Often what I like to do is have it so that it can still be seen. I'm clicking in here holding shift. So if I go to 80 per cent, this stuff is still peaking kinda like above the fold. It's just peeking out when somebody is go into my site and they don't use the navigation, they don't think there's nothing else on this slide is just a big old guy and a caterpillar suit. It is, they can see this stuff picking up and that's a way to forcing it to pick up. Whereas before, when we did min-height, hoping, we're hoping people can see. That's why I kept it quite small. So let's get rid of that. Let's go a min-height of I can't remember. So it does pick up. But what happens on somebody else's? I'm going to preview command Shift P. Control Shift P. If somebody has got a monitor that's this big, it's not gonna work. They're gonna go, it's just the guy in the caterpillar suit. Whereas if we did it with viewport height, let's go back. You getting it right. Let's do it again. Guarantee you, you do 80 per cent of viewport height. It doesn't matter what device they're looking at on. It's always gonna be 80%. Can you see? It was in it can neither. Well, Visually gets too small. It's calculating the viewport height and then making it 80% of that. So it's pretty cool, great for height. Now to make this work really good, if you've just jumped into this video, is I've set this div hero to be a layout of flexbox because it allowed me to do this. If I actually turn it off, it allowed me to go. You Flexbox, you are vertical and I want you to align in the middle. Okay? So rapid div around it. Do that if you want to be in the middle of their viewport height, this child here, you can go over there. Oh, man, I totally broke everything. You in the layout that way. Go back. That's viewport height. The one thing to consider is when you're previewing it, it's a little bit tricky here, because when you are previewing in these, using these options, especially mobile phone, can you see it's doing a percent of the viewport and be like that's weird. But nobody's phones that long, or at least not at the moment. So it's hard here in Webflow to go. How tall is that going to look? Can you see it's using the viewport now phone, my phone is probably about that sort of ratio, right? Height to weight, height to waist, height to width. Okay, way to get around that and preview it is you publish your site, publish it, and then open it up in another browser. Will actually, let's do that way there. Alright, so this is my viewport. I can just drag my monitoring, what my, sorry, my browser and it doesn't get me. I can kind of fake it. But I want to see that mobile one and it's not showing me it. So what you can do in Chrome at least, and I'm pretty sure all of them figure it out. If you're using something other than Google Chrome, you can right-click it and say, let's inspect this website. This is pretty cool. And you, what you're looking for is this button here. I think yours might be on the right-hand side or the left-hand side, but you're looking for this icon. Click it. And you can say, I would like to show me this on an iPhone pixel five, okay? The nice thing about is look at this. It's actually cutting the bottom-up. So that's what's gonna look like on my phone. If I had a new one, I have an old pixel. But what is it going to look like on iPhone SE? It's going to look different, big a phone, different ratio. But at least the viewport member is matching what it's gonna look like on that phone. Whereas here it's super long and stretchy. Chicken and Webflow might go and do stuff in here where you can kind of the moment, you can calculate the width, but you can't do the height. Chick feels like something that might add, alright, back to this viewport width. I never use. It can be done. You might have a good use case for it. And I'll show you a random thing because I can't think of a good use. And I'm going to grab my grid thumbnails. And I'm going to say You grid thumbnails are going to be a width of, let's say 50%, 50 viewport width, VW. Or you can drop it in here and it just looked at my viewport. The whole thing divided by half and said, alright, that's that measurement and I'm going to apply it to here. Notice it's not in the middle. It's not like 50 per cent from the edge or going to the edge of the screen and stopping it saying, what is the width? Alright, I know what that number is. Have it and apply it to this box and it goes to the n. That's why it's kinda over the 50%. You get it. Alright, that is VH and a little bit of VW. Onto the next video. 59. How to Style the Navbar Component in Webflow: Hi everyone. In this video we're going to look at this guy, the nav bar. He's a pre-made component k. And we looked at earlier in the course, and we kinda left them because we went off and built this really simple one but only has one button. One button is no fun. We're going to have multiple buttons. And because we're using this pre-made component, when we get down to, say mobile phone view, It's a burger menu and look, it slides out. Kind of. This video is gonna be fun because it's going to do something that's going to tie in all that knowledge that we've learned in the course so far. Take all the good bits of the pre-made stuff like this nav bar here that's pre-made components but also be able to customize it, get it to do what we want, flex our amazing Webflow skills. You're ready, I'm ready. Let's do this. So first up, I've got just a blank site to keep it separate from what we've done. Because what we did before is our navigation was fine. We just had one button. So when we go down to mobile, it was fine. We just use that button. Okay. Or small enough to go to the side here. But a one button website isn't particularly fun. So let's make a multi button website. So we're going to add to this blank site the Navbar component, drag it on. It's got a cool thing, is got a few things. It has got this outer wrapper, kinda like a section. It's got a container which keeps it in the right width. It's got a space for a logo. It has got a wrapper around a bunch of different buttons. They called them nav links here, okay, instead of buttons. And then there's a menu button that we can actually see because it's turned off and only gets applied. You their mobile there is Hello. That's why we like these components because they've done a lot of this turning on, turning off, getting all the alignment working. And even more so is let's click on, if you click on the little home icon here for navbar. And either the Settings option here or the setting cog over here. These things, this isn't web design like this isn't code stuff that we're trying to figure out. What is absolute positioning. This is stuff that Webflow have done to make things like navigation easy. What they've said is actually when you get down to mobile and I preview it and I click it, it does a drop-down. What if you want to come from the side, instead of rebuilding the whole thing? You can say navigation. Come from the right. You go preview, it comes with a right click anywhere. It goes away. Some other fun stuff. Okay. Let's say that it doesn't really matter what view urine either. I can go to my settings and say, I want to add another button. I can click Add Link and adds another one. I'm going to maybe call this my shop. Just because what we're going to call this my shop. Okay. Makes it easy. I know it mean, you know, now I can just grab that link item, go copy paste, that is the exact same thing, but workflow has made it even easier. Now without really cool skills, we know that there's a rapid div wrapped around these guys keeping them all together. And other cool thing they've built into this for us is let's preview command Shift P. Control Shift P is when I get down. Can you see here, I'll add my logo in a second. Okay, when I get down to here, it converts to the burger menu, which is a bit early. Okay, there's plenty of room for all of this stuff. I've only got four buttons. So what you can do is you can say nav bar settings only Come on. I want the menu icon to turn on for turbulent flow. Now, let's turn it on for landscape phone and below, or just mobile, depending on how many buttons you have. Okay, so now when I preview it, I get down to tablet. It stays there. But when I get down to landscape mobile, it activates. Cool, Thanks, workflow. There's other things you can mess around with K, play around with the easing. Don't mess around with easing. There are all. The default was good. Expo was just do one while you're here. Ready? Okay. Here we go. What else? The timing? If I wanted to take 2 s, how long should this big? How many milliseconds Do you remember? You do You got it right? 2000. Okay. And that's going to take way too long. Let's give it a preview. Okay, add your own sound effect. So let's look at getting in there and breaking it, fixing it. And let's say we want to change the bigger menu, somebody. This is an interesting thing for this particular setup here, this component, if I want this and I want to style, it, can go down to one of these, so it actually appears. And then I can click on it. And it gets treated like a font. Weirdly, icons get treated like a font. I can say you are a different color. Okay, my brand color, which is always some sort of green. It's going to be darker along here. Wa contrast winning gold. Let's go back to desktop lids. Let's go a bit. This is all pretty quick and fast, little bit fast and I want to watch it again. But I'm gonna go a little bit slower now and try and get it to how it looked in my last project. Okay, where was it? Here? It is here looking something like this with these kind of buttons. I'll do a quick version of it because I want to show you now how we can flex our skills. To make it look like that, but I'm not going to spend too much time. So first up, I've got this brand thing, which is cool. I can throw in a logo. So I've got one from earlier. There it is there. It's in your exercise files. You can put any logo you'd like. Okay, we use this earlier on for our sponsors, for our very first web flow website that's in there. Now how do I get it in the center? You could do flex. You can start flexing or you could just say actually logo has some padding. There's nothing wrong with that. There's nothing you can flex and get the children to be centered. Or you could just do this because this in particular, this nav is never gonna get bigger or smaller. I don't want it to. I think it's big enough. It's not going to expand and contract. Okay, let's style these buttons. So what I'm gonna do is I'm going to add a class called button nav. And I'm going to do what? Let's start with the background color. I'm going to pick a random color, maybe that darkish green. I can't remember what it is. They do. Ticks is going to be topography is going to be white. I'm going to pick a font for all my buttons. Now I always click out and then start doing stuff and what tag my styling. Now, I've got the body selected and I know that's what I was just about to start doing. Case it back on the button. And you are going to be a font, Droid Sans, not gonna make it smaller. And I want to play around with the spacing. I'm going a little fast now because we're using skills we already know I'm going to do this smaller. Holding the Option key on a Mac, alt key on a PC and dragging up, we can get that. I get why do with this? That's an interesting point. Can you see that with the 20 2020 confirm, okay. That's part of the deal with using some of the components, even though there is no way I can click this isn't. Normally I can shift click it and it'll tell you where it's getting their styles from. Its hiding those a wife away from us. It's predicting this thing from breaking it, saying, I've made you a nav component or Navbar component. And there's lots of stuff that I'm not going to show you, so you can't break it. There. Awesome things we like. I want to get in there. I want to change it. Well, I'm just going to have to override it. I can override it, which is cool. I know with this navbar, there's things going in the background with floats and all sorts of good absolute positioning things. But you can't find it in Webflow, the output at the end. But just keeping it nice and simple for us. And I want to put rounded corners on. You. Want to push down from the top. Again, I could use Flexbox, but actually I'm just going to say all buttons. Have a top manager. Here we go. It's edit to all of them. Let's use our special shortcuts Command or Control Return, and then type in NAV, going to go down a couple of my keyboard. Now I need to go to the next button. I could go here and click it. But remember there's a shortcut way it goes. Remember how do you pick siblings that up, down, left or right? One of them hit them all right, and left. I gave you again Command Return. I can say nav got down a couple, go to the next one. Feels good when you throw a few shortcuts together. His name as well, it's probably gonna need some spacing. Okay. I'm gonna go margin on the left. You can go. Nice. At the height of this was actually, turns out that the button was the thing keeping it open. So what I'm gonna say is navbar, you have a minimum height, all ready pixels down, down. Clicking in there, I'm holding Shift and using my up and down arrows. We go, That'll do. It's not very pretty. So we've styled it, we using some of our classes. You might have used a combo class, and now it's going to break. Let's preview it. Okay, and I'm gonna get down to this view and my God, so I can go. Oh, you're like, Yeah, let's go to them and good. Okay. On the desktop. Okay. Ish and that over here, I don't want to do that and I didn't get to those. How do you change them? Because, you know, and I know that I can just go to this view and change it and it will change it from this down. You're like, Well, why don't I see it. Click on the navbar and either click the COG or go to your settings. And you can say, show. This thing here. Confused me for a little while, is like, what does it do when you're a desktop? Does not. Oh, actually, let's go here. And when you're at desktop, it kind of does some weird stuff. Okay? What it's doing is it's just showing you in here. It's not turning it on forever, just while you're in preview. And now I can style it because if I go to preview the site, it goes away. It's just there while you can work on it. So it's kinda just they're temporally. So I show it, but it will turn off. So now I can say actually when I'm in this one, I'm going to Nav buttons gonna do some other things. It is going to, it's going to stay the same color. I'm going to override the padding. First of all, gonna go with the rounded corners. Goodbye, zero. The padding wise, I'm going to set it up so it's nice and big and clickable on a mobile device, the font is gonna have to get bigger. It's going to be centered, doesn't have to be any of these things, just what I've decided. Okay. 13 at the top and 13 at the bottom. Okay. And it is ugly. And it's okay, I think it's okay to design algorithms stuff if you know, it's okay. But I guess the point was, is to show you how to, and how cool this nav component is. Because we can say actually navbar, we'll hide it. And if you want to style it, show it temporarily while I can style it, I'm gonna get rid of one last thing before I preview it. I wanted to set the margin to zero. There's a bit of margin sticking out the side there. It seems to be doing that. And now I'm going to preview it. And it goes off and back, seems to reset it. Now, there is my beautiful menu. Okay, it was a bit of a whirlwind one. I felt like. But I guess it's showing you kind of way back at the beginning where we, why don't we just drag everything onto the page and build that app components. It's because when we get to things where we need to know what are classes and what all these settings here in my style, I mean use does and how to override them. And what blue means and yellow means rho becomes a bit more natural. We can start using templates and other pre-built components and be the boss of them. Get them to do what we want. Alright, that is styling the pre-built Navbar component in Webflow. 60. Adding & Connecting Pages in Webflow: Hi everyone. In this video we're gonna look at this Pages panel. Okay, we've got a homepage. I'm going to show you how to create new pages. Folders, create pages that are drafts so that aren't actually get published while you're working on them. We will discuss utility pages, will connect them up with a little bit of navigation. It's not going to be super fancy. Okay, there's our Contact Us page back to the homepage. And two are beautifully designed portfolio page. Alright, let's get making. Alright, to create a page, There's a Pages tab, or you can click it up here. It's up to you. They both open the same thing. All the P key toggles on and off. And we've been given one-page already, one static page, which will be important later on when we start making dynamic cmos pages. For the moment we need another static page that it just means it doesn't do a whole lot. It's not drawn from a database. And if you still don't know what I mean, we'll cover that later on. So I need another page. I have a habit of clicking this button first, not a folder. I want a new page. So click that one, give our page and named Contact Us is a very common name for the contact page. The slug here is, I guess, reasonably important. Can you see that'll be our domain slash contact us. Let's, they're going to be what's going to appear in people's browsers, will cover some of these SEO settings later on and password protection later on as well. But for the moment, let's just give it a name. Let's click Create. And that my friend is a brand new page, doesn't do a whole lot and let go and toggle between our homepage now. And I'll contact us page. If I go to my homepage and I preview this site, we've got no way of getting there. Okay, There's absolutely no way we need to come out of preview mode and beyond our homepage and make one of these buttons at least clickable. So let's do it. Let's do this big giant one here. When he is clicked because he's a button, he has this nice little cog here that says Link settings. You can either click that one or with it selected, go to this cog sitting over here. There's more in this option. It doesn't matter which one you use though. Let's have a look at this one. It's nice and tidy, so it defaults to this URL. This is our link to another site. If you want to go within this page, you want to click on us. Next one is called page. Which page? Handily, it's here already is our Contact Us page. Alright, let's give it a preview now. So Command Shift P or Control Shift P one is page can ask a question and I go to the big old blank page. There we go. Connect it up. So I'm going to go back to our homepage. I'm gonna do the same thing for this guy. He also connects out. So go to page you go to the Contact Us page. The trouble is is once I get to that Contact Us page, there's no going back home. So what we're gonna do is we're going to move this navigation to be on both pages. We'll do it the caveman way, and then a little bit I'll show you how to make symbols. So caveman way is, let's click this whole section called nav. Let's copy it. It's switch to my contact us page and hit Paste. It's going to say you need to select an element. Just doesn't know where to go. So you just click on body, then hit paste, and it's going to work. Let's go back to our homepage. Let's preview it. Let's go here. I've got some stuff. This button, if it connects to itself. Okay. It goes I am going to the Contact Us page, but we've got no way home. We could add a Home button and a lot of people will do that. What we're gonna do is we're going to connect the logo back. And that's an interesting kind of user testing. Cade, look at your audience to see, I know a lot of websites don't have a home button anymore, but some of them do. It'll depend on your audience, whether they need really explicit, like how to navigate this site, or whether they're very savvy and know that you click the logo to go back to the homepage. That is for you to do your best guess to start with and then do some testing with your users to see whether they can be done and not get stuck. So let's go back to preview. Let's go back to our homepage. Actually, let's go to our Contact Us page. Because what we wanna do is I want this logo to be clicked. If it is just a plain old logo, like a JPEG or a PNG or an SVG. Actually, we'll do that in a cyclic because we've got ticks there. Let's do this one first. You've got a couple of options. We'll do an option at the moment. I'm just going to select it all and I'm going to wrap it and move. We did hyperlinks way earlier in the course. It's going to insert a link. The trouble is it's gonna go that way. It blue colors, I need to style it. Let's ignore that for the moment. I've got the underline. What I wanna do is I want to go to page and I want to go back to home. Okay, and let's give that a preview now so we can just preview this page now. So Command Shift P, Control Shift P. But just look at that shortcut. It's stuck in there though in it. So I can go back to homepage. I can go to my Ask a Question page or my Contact Us page and back again. Alright, if it is an image, Let's pretend that's an image logo like this, handsome men. With an image. We need to wrap it up in something called a link block. And actually, let's do that together in the next video, I'll make it a special one because there's a few things to discuss. We've got some basic navigation. Might be easier just to go copy paste. And add another home button. I'd have to wrap these guys up and a little div to get them to stick to that side. But there you go. Let's go into these pages are but more. So this one here, create a new folder. What is it for? It's when you want to group. Like, I know I'm going to have lots of portfolio pages, okay, So I've got six to start with. I plan to have 50 or 100. Okay, so what you do is you put them into a folder so that they're not just like this huge stack here. Like any sort of file management. This one's gonna be called my portfolio, port folio. And all it is, can you see it's kinda like a little folder icon. Now I can make it page that is my web design for a deer kayak club. This is the project that I want to display my portfolio. I want it to go inside the parent folder of portfolio. So before I go any further, I also, when I click Create, it's actually ready. If I click Create and go to publish in, say I'm publishing the homepage, it'll publish this side as well, this page as well, even if I haven't finished it. So if you're if you've got a live site, people are using it at the moment. I'm just publishing anything because nobody is checking this. It's, you know, it hasn't ranked well, probably hasn't ranked at all. But you've got a site that's working. You probably want to go to Save As Draft. Okay. And like I've made a page just like it did before. Okay. So the difference is, can you see there a, it's in a folder, and B, it's got that little icon there. It means that I'm working on this, but when I hit Publish, it's not going to go out until I'm in that page. And I go to this little cog here and I say, you are now stage for Publish, okay, it just means next time, not now it's not published. Just means next time it's staged, ready to go. And next time I hit Publish. Okay, It's gonna go out to the Internet and other people can see it. But the moment, obviously that's a bad idea because there's nothing on it. Maybe go back to being a draft. Okay, I'm gonna do the same thing and get my P key grip the homepage, grab this nav, copy it. I'm gonna get my peaky, go to my draft, clicking the body first, hit Paste. And I've got a portfolio page. There's nothing on it. We're going to design these pages as we go. But given the structure going, again, I'm going to jump back to the achy, the peaky, back to home. I'm gonna get this button when it's clicked to go to, I know that's the wrong kind of project, but hey **, when it's gonna go to this draft page here, which is my web design project. Now, when I preview it, it jumps to that page. Alright, all things pages. Before we move on, is this talking about these two here. Password. For your free account. You're not allowed to use password prediction. You got upgrade your site to get the moment on this free account that I'm using for this particular one. Yeah, we can't do it, but this password protection page is actually let me show you. I can say this page here. Actually this page here. Go to the cog I can password protect. Okay. I can turn it on that if you want to go to this page, maybe it's members only, some sort of sensitive data. I can turn that on. But because it's the free account I needed to own the site plan first. So what does this page? This is just the look and feel of it. If you don't like it, you go, we can mess around with it. I can add a style to this. Okay, So this is just what it looks like when somebody comes to this page, you could change this for a different image. You can change the text, okay, is it just gives you a place to style it. I'm going to leave mine as is same with the four four-page. A four or four page is what happens if somebody, if they click a link on your site and it doesn't go anywhere, the browser will go look for a, for a full-page and display this to them. And this is where you might go and change again the style. You might have more helpful information, maybe have a link back to the homepage. A lot of people will install it for a full pages to be kinda fun and funny. But again, this option we're just looking at, we can style it. Alright, homepage. We know what that is. I've made a contact us page. We've got a folder so we can stack. We might end up with ten or 20 or 30 pages in here for our portfolio. And these are just utility pages that we can style later on in the course. We're going to create a seamless pages and we're going to create e-commerce pages too fancy for your project. Go and create a Contact Us page and portfolio folder. And one of your pages doesn't matter what it is because we're going to start loading it up with different stuff. That was meant to be the end. I'm back from the future because I forgot to tell you something. Let's say you want to duplicate a page because you're going to need lots of portfolio pages, which I realized later in the course. And I didn't show you under pages how to go to Portfolio. Go to the little cog at the top, not on the folder, sorry, on the actual page itself that you want to duplicate. Then go to the cog, then that one there, duplicate the page. You can make a second one. Okay, So we're gonna make a second portfolio page called second portfolio page because I can't think of anything right now. You get the idea. Alright, that is duplicating pages as well. And that'll wrap up this video, all sorts of page stuff all crammed in here, plus a little bonus. We'll call it a bonus, just something I forgot. Alright, next video. 62. Create a Symbol & Overrides in Webflow: Hi everyone. In this video we're going to look at symbols and instances, symbols as this little tab here we can, we're going to create a navigation. We just add it to our page. And the cool thing about it is that a, it's a nice little reusable block. But if I go into it and I delete stuff, it's gonna go off all of the pages that I've got, the instance look, it's gone off that page to add stuff, copy paste. Now, go back to homepage. They all follow. The leader will go a bit further and will create these cards down the bottom that all are connected, but we can make them unique by sitting overrides on your symbols. It's super slick in great for things in your web design project that you can have lots of like a live things like this card here. You might have hundreds of them, might be product listings, thousands of them, all controlled by one symbol. Alright, let me show you how to make one, alright, to make a symbol. And I'm going to work on my Contact Us page, homepage because that's the one I spent the most time on in our problem at the moment, right? There's if I copy and paste this and another button, forget that it's in the middle. And if I go to my homepage, they don't update. So that's what I'm gonna do. I'm gonna go to my contact us page. Let me get rid of that guy. I'm gonna say this whole navigation section. I'm going to convert you. Let me go to my symbols panel. The second one down, I'm going to create a new symbol. I'm going to give it a name. Create the symbol. And that's it. We've made a symbol. We're actually inside the symbol right now. We can come back out of it. Okay, this is now what's called the instance of the symbol. Now let's go to my homepage. Okay? And this chunk at the top here called nav section nerve is useless. Okay, I'm going to delete it. And what I wanna do is grab my symbol and drag out an instance of it just means that this is the main guy that controls them all. And I can drag out copies of them, get them in the right place, can use this. He's green as well. And the cool thing about this is now if I go inside and edit my symbol, okay? And I say you, there's two of you. Happens back on our Contact Us page. Eventually. There we go. So it controls all instances of that symbol. That language is quite important. You can see here that little icons important, the green is important. So you know, you're looking at symbols. Maybe you're looking at somebody else's document or a template you've bought or cloned, stolen, found on the street. Cool. Let's put it on our last page. We're actually got the two of these. Again. You gone symbol. Drag out an ad. Here we go. And I've got one more page to do, which I won't do now, which will probably come back and haunt me later on when you're editing, assemble, everything else kind of grays out and you're adjusting every single thing. But there are times where, let's have a look at our homepage. Like these things here are reasonably good candidate for a symbol. Okay, there's only six on the homepage. Would I go and do it? I probably would 50% of the time. Okay. But if this was an item in a store, display of the price and product details, then yes, because you might end up with hundreds or thousands of them. Six of them, not a big drama to update all six of them until it is I find it's the curse. I'm like no, it doesn't need to be a symbol. And that instantly makes the universe invent a reason that I need 1,000 of them. But let's say I do want this to be our symbol because I want to reuse it, but they're all quite unique. Case I don't want them to be all the same like my navigation. So how do we do that? First of all, you select all of it. So I'm gonna click inside, use my up arrow to grab the whole card. Actually, which one should we do? I'm gonna do this one. Okay. I'm going to grab the whole card thumbnail that I've made. Go to my symbols. Let me go create new symbol. You can actually right-click, if you right-click this name at the top here, and you can convert it to a symbol, will create a symbol. Gonna give it a name. This is going to be my card. It's cola card, thumbnail. Now. Alright, and this kinda works. I'm going to copy it, paste it, paste it. No, I'm not. One of my conflicting cut thumbnail. Copy, paste it, paste it. Why wasn't that working? Is because I was inside of here and I wasn't actually copying the whole thing. I think I just had that selected. So I'm going to come out with my editing, the actual symbol. Okay, now I've selected the instance of the symbol. And what I want is 123456. Okay, and this one here, I'm sorry. Will that work? We're going to bin you. Goodbye. Okay. So I've got all of these and it's kinda good because it means I can go through and say actually, awesome, I'm going to remove that around. Here. You go. Easy for my thousand of these on the page, but I want to make these things unique along with the text as well. How do I do that? So first thing is you need to find your symbol. It's the green thing. There it is there, go inside of it to edit it, double-click it works to select the thing you want to change. Like this needs to be unique on every single one. And you go over to your settings here. So not the styles go to Settings cog. And you can see here, you're looking for these things, the purple stuff. In this case, I'm going to say You are linked to a field K, and I'm going to create that field. I'm going to call it my Thumbnail hitting, create and link. What's happened in purple? That's what's happened. What else has happened? That's come out of this. So not inside the if you want to edit everything, you go inside of it. If you just wanted to now, like change little bits of these instances, any one of these now, because they're all instances of that one symbol. If I click on this one and I go to settings, you will see, can you see instant overrides that? That's that thing that I just made. That wasn't there. A second ago, we called it thumbnail hitting and I can replace the ticks in here. And this one was, I can't remember. This is colored web design project. Okay, Now I'll instances are unique, but if I go and change something, I can go inside any of these ones doesn't matter which one it is. But I physically can even go through a move it and they all change. Gua, symbols are awesome. Let's do the same for this image here. I'm going to select on this image and the same thing looking for the purple dot wherever it is, okay, just keep an eye out for it. So that's something that can be edited. Let's create a new field. This one's gonna be called maybe image image, but just image. Come out of my editing my symbol back to the instance. And remember, this first one is fine. The second one now under settings has two things overrides for the image. Also, the thumbnail hitting two things I can give you, and that's this one. Let's do one more thing we might do. I want to change this button so they're not all going to the same place because at the moment I change one, they're all going to change. So I want to say it, the symbol go inside of it. You notice that going back to the original one kinda clears the overrides. Now this button here, the same thing. I click on it and I'm going to say you add the text. Does it need to change? Maybe it does. Mine is not because I think I'm just using the word view, but the link definitely does. Okay, so I'm gonna say a new field and I call this, my button link is fine. Click Create. And that's it. Now come back out. Gotta get used to like what going inside of it to change things, all of them, and then coming out and being beckoned regular old designer mode to change the instance of it. So in this case I can click on it, just the whole thing, okay, and I've got loads of things. I can change the image, the thumbnail hitting and now the button link. And what I'm going to say it's page and this one's going to my portfolio page, symbols. So keep an eye on the things that are purple, keep an eye on the green stuff for other people, symbols you might be getting somebody else's project and it's got a bunch of symbols in there. You can unlink symbols that say that there is a time where you want, like, Let's where we are on the homepage. So it's gonna go inside our symbol. Okay, I'm going to change this button to say home. Clients come back and said We need the home button. Nobody knows how to click this. Or you're testing came back and said, Yeah, nobody knows how to get home or at least half the users don't. Okay, so I've got that part. And that's cool because on these other pages, it makes sense to have the home button and you go and get back home. All these other pages. Really handy to the one-page. I didn't paste it on this one. I did CC homes important on all these other pages. But the client comes back and says, why is there a home button on the homepage? And you like, It's just because it's a symbols and all the pages and I like, get rid of it and be like, Okay, so what we're gonna do is we're going to detach it. So we're going to right-click it. And there's an option that says unlink instance, the green is gone. It is now something I can say delete and it's not affecting anything else. I can go back to these other pages like my contact us. It's still there, it's still on every other page. I've got this instance. The only trouble is me as a designer now need to remember that when I make changes to the navigation, I need to do it to the, to the actual symbol. And if I make changes, Let's say I change the color of this, I need to go back and update the homepage as well because it's separate from everything else. But it's a good enough trade-off because this appears on my thousand pages. There's only one homepage I can live with that. The only tricky thing now with symbols is that if I want to go and change my text, okay? You kinda double-click it. Click it. Like, how do I change the text? Because we've made this. What do we call them an override. We can just change it in here. We've got to go out and we've got to select on it here. And we change it in here from now on, which is fine as long as you know where it is. But that can be a bit tricky because you get lost. You might open up somebody else's project and be double-clicking on stuff and going, why is it changing? What's going on? Now, you know, it's purple bits in this green bits. Green bits control everything. Purple bits are overrides and you'll do it in the settings over here. Awesome. Alright, What else we got that? Is it right? That was the fake end. I said would just ignore that and would tidy it up. This just tidy it up. You probably know how I'm going to go inside my editing, my symbol, okay, that's, that's fine. I'm going to do that for them. These ones, What's making it go in the center? Do you remember you remember our div nav the thing that wraps it all up is set to flex. And we've got this option here, which worked great when there's just two things, okay? But now can't really make it work for what I wanna do. So how do we do it? I'm still going to have pushed all the way left and right. Okay. So remember it worked great for two things. So if I put these two things in a rapper, it'll be back to being just two things, the wrapper plus this logo over here. Let's try and do that. A key, all the wild wicking inside my navigation. Everything else is grayed out. And I put that in there. I have a uni and put you in there. Now it works easy. Do I need to name this? I probably could, but I'm not going to do does it need a class? Not at the moment. Do we need space? Yes, we do. How are we going to do it? Let me think about it. I have got a button button small. Do I have a margin-left? I do not. Do I have a margin right? How do we not have any of these? I'm gonna make a margin, right? Where am I going to do it? I'm gonna do it to a div tag that has no classes applied to it. His only job is margin left. And I'm going to make it the guess small, hopefully is gonna be right, because it's going to be my 16. So great, this one, it is going to be margin left, okay, and it is going to be 16. And I'm hoping that we get rid of this now. I'm gonna be able to apply it because it's global, because it kind of made it on its own. Margin-left small, Ron, one, that one needs to lift and lift small. That'll do. There we go. Now we can go see you in the next video. 63. How to Make a Contact Form in Webflow: Hi everyone. In this video we are going to be making this form. It's got named fields, emails, there's drop-down menus, this checkmarks, and I'm going to show you how to submit it and what happens to it afterwards. Or at least, there you go. It ends up in my email. Alright, they're super easy to make. Let me show you how to put one together. Alright, let's add a form. So I'm going to get rid of that. That's familiar. I'm going to add a container for them to go into and I'll add a section for it to go into. You don't have to have this. Otherwise it's just going to pop onto the left. This is going to be my section and this will be contact. And I'm going to add a bit of margin to the top so it's jammed at the top. And all we do is we go to Add and then we go down two forms. There's a whole section here. Can you see it? Okay. And these are all individual components of a form. This is one big lump of it altogether, and that's probably a good place to stop. I'm gonna throw it inside my section and that's it. You're ready to go. Let's give it a preview. I can type in here. You can see it's pre filling it out. My blurry information, name, e-mail, more blurry information, and I hit Submit. Now it says please fill in this field that's required. So let me fill that out. Okay, so we've got some forms still quite work. You got to publish your site for this to work. I can do that. Okay, it's come out of here. I'm going to go publish, published domain. Now. We can preview mode, but it will work if we go out to the live versions, gave a look. Alright, now I hit submit and magic man forms were painting a button, trying to do them in my web design course. If you've done my web essentials, little bit of it's tricky, somebody has to handle it, and that's what Webflow doing. So what happens now? Where does it go? Let's have a look. So back in Webflow, there's a couple of places you can find it. One is under the project settings for this particular website. Okay. There's Project Settings. So this is Dan's portfolio. We've been to a few of these. Okay. It's this one here forms a lot of information here. Important one here is where this e-mail address is going to minds go into my blurry email address. But right at the bottom, bottom of this page, you can see there is my form submission or here I can read it from here. I can download a CSV somehow or is it there? It is. The big black button. Also though. Let me check my email. Alright, so I'm in my email address and there it is. I got a form submission from Jason. From the form this is the name of the form from this website case you managing more than one. You'll also notice there's a part of my free site. I only get one out of 50 for this month. Okay. And it's kinda like at the beginning of the month, at the end of the month, it will reset, but we'll have to upgrade to another plan if you want that to be higher. Very cool. If you didn't know that can be really tricky if you have to set up your own mail server or at least forwarding server, it can be tricky. Let's go and do a bit more. I'm going to jump back to designer. I could go back to my dashboard and then go to design a look straight from here. Go to my contact page. Let's add a few more different parts to it. So go to the ED, go down to the different forms and all you need to do is make sure you drag it inside this Form Wrapper. Can you see they're kind of ********. I'll show you in a sec. Okay, So this is the whole thing. Don't need another one of these. What I want is I want another field. So I'm going to drag it in there. And this one is going to be for like a phone number. So what I want to do is give it a label as well. There's kind of two parts. There's this field label, you see the name there, and then there's the actual text field. So I've edited another TextField. Let's add another. It's close these down. I'm gonna go to, so we didn't have to keep going scrolling down for this video. At least. I don't want the label to go just above it. And this label is going to say, you'll notice this one has some placeholder text, but this one doesn't either just turn that off. You can go in here and say placeholder email. Here we go. This one here needs better placeholder text because it just says sample text. You might want to hint at maybe like an international number. Okay. I don't know if that's a number. It could be a mobile number in Ireland, like it's got too many digits and you get the idea. The other thing to remember when you are adding these things, especially these fields, it's going to send you an email to look at the email. Can you see here it said, Where is? It says name equals Jason Bourne. Email equals this because we added this ourselves, hasn't been added, is this called field. So I'm going to have an email that's going to come through and says field equals phone number. So I'm gonna say phone. When I get my email, it's gonna be a little bit easier to understand for me as the recipient. The user of the site will never see this little option here. The other one is, is it required? Okay, you can turn that on and off by default. This e-mail one has been turned on by workflow. You can turn it off if you don't mind. Do you know which one you get? Let's have a look at maybe one or two more. I'm going to go to Ed, go to my forms, takes area is quite a useful one. I'm going to drag this here. This is blocks of texts. So it takes field is just one line. Now it takes area can be considered, drag it down. It takes area, can have multiple lines in it. So this one is going to, I'm going to add a field label as well. So if you lay boo here is there, and this one's going to be my question. More information. Okay? I'm going to say instead of sample ticks, I'm going to say something in there. I don't want her to re-record that. Let's preview it. Somebody in here can start typing and can hit return it to the end db dot, whereas this one is just a single line mulberry text. Alright, let's do one more together. So let's look at adding a form. Let's look at the checkbox. I'll do two more. Two more. So the checkboxes might be usually they're giving us permission. We might automatically have it. Start checked. There is always the trick. You have to undercut k. Let's add, ah, drop-down, select option here, drag that in. Okay, it's gonna go here and we're going to say this one's gonna be called. Remember the name is not actually going to come through to me as the creator of the form. The user won't see it. But this is my, maybe my preferred method. And we've got these fields here. If I leave them all blank, Let's have a look preview. Okay, you've got first, second, and third choice. Turn preview off. Let's go and change it. Can't turn preview off. Some reason, there we go. And what do I want? I'm going to have select one is an interesting one because it's like the default. Okay? It's the one that appears there. I'm going to leave that as select one. And actually I'm going to call it something else instead of select one, I'm going to say this is going to be preferred contact method. What I might do is use that as a label as well. Okay, my options are going to be first choice. It's gonna be fun. The value here, you, it's probably just needs to be fun. We'll have a look at the other side of it because it's going to say, I preferred me if that equals phone, equals the value of phone, which is cool. Okay, Let's do the last one. This one here is they can choice is can be email. Okay. And it's just going to come back as email. Anything else? I want to remove the last one because I don't need it is not required. Let's give it a preview contact method. Here we go, phone or email. It probably needs a title like the rest of them because that kind of it's hard to know. It looks like we're doing something with the email there. Put in the label. Remember these labels don't do anything. They dislike text blocks that people can read. So you go, it's a terrible title. So big, but let's give it all a tests. I'm going to have to publish the selected domain. I could open it again, but it's already open over here. So what we need to do is we need to reset this page to get all the extra information. I'm going to fill it out. Okay. Usually I don't know Jason Bourne don't want your newsletter and I want to be contacted by email. Submit, please fill in this field. I made this required. Alright, now we're going to do it. Alright, let's see what happens on the email side. Alright, so we've got all our fields. Name equals Jason, email, phone number, field, see, I forgot to name it. This is where you need to go and check that. Okay. So this should be what do we say? More information? Checkbox is false. Another bed naming, I'm pretending I'm doing this. I'm pretending I'm doing this on purpose, preferred method via email. That's a bitter side to it. So we've got two, we've got these two. Let's look back here. Let's have a look at this one. The checkbox is What was it? Checkbox false. So there's two things. Not checkbox, it's going to be newsletter, newsletter, sign-up. Remember the user doesn't see this. This is just what comes through in your email. And I don't think you can change false. It's either going to say true or false. Pretty sure we can change that. You might be able to somewhere I don't have, but it's gonna be better. It's going to say newsletter sign-up, true or false. Okay. That's still not yes or no, But it makes sense. This one here, can you see this one here just says, where does is they preferred method? Note because this one here that has the problem, we just call it a field. I'm going to say more information. There we go. And that will clear up those two problems. Alright, that is it for adding a form is looking a bit boring. So we're gonna go through next video and style it. But as long as you keep adding these elements inside the Form Block, okay, they will get passed along to Webflow. Who? Webflow will send it on via email, or you can get into it via the project settings and under forms. But if it makes it nice and easy workflow, Alright, Onto the next video. 64. How to Style a Form in Webflow: Hello. This video we're going to look at taking this boring foam. That Webflow gives us two, making it a mildly less boring form. We'll style these fields. Look, there's a black liner on the outside, no black line, fancy. It's split into these different columns. Some of them spread across them, some of them don't. Extra fancy. Oh, look at our fancy button. We've got rid of the labels. We've got some placeholder text in the middle. I'll show you how to get this grid here to break down differently on different devices so that it's stacking nicely on a different device sizes. And I'll show you how to find this message that comes up when somebody has finished sending you an email, the Success notification, and had a style that will make it pink. Alright, let's jump in. Let's style it form. Okay, first thing is, is that I want to, Let's say I want to style all these fields, each of them. So they need the same class applied to them. The moment there is no class applied to them. So I could give it a class. I could say this is my field title can go and style. One trick with Webflow is that we've learned by mistake, is that if I forget to give it a class name, it'll just give it a class name on its own. Often it'll use whatever is in here. And actually this is pretty handy. So if I don't give it a class name, it needs one. If I say actually I need it to be the font-weight of normal. Can you see it says all automatically make you a class name, court field label. And actually for me, that's a good one way back at the beginning of the course. That wasn't handy because we didn't really know what we're doing in these classes will get made, but now using it to my power. So now I can do field label. Excellent applied to all of them will use a shortcut Command or Control Return. I've been field down arrow. Here we go. Remember siblings can use left and right even though they're up and down and up goes to the parent. So when I'm in here, I can just use my right arrow, go down into U like that. I like doing that sort of stuff. Like no hand on the mouse. Look amigo. Okay, cool. So I'm gonna apply it to all of them. And actually what I'm gonna do is I'm going to say, I don't want any of you feel tables that don't do anything for the form other than help describe what's underneath. But I can do that a lot in this placeholder text. So name, maybe go if you want to style what goes into it, you can see the same thing again. I want this thing called text field, which is different from before, was field name. Again, I'm not going to give it a name because it'll just go, I'm going to use this for the class name, which is perfect. And let's say that I want the stuff that the user types in to be that hot pink color. Preview it. Okay, and now if I start typing, Here we go, It's hot bank. Can you style the actual fields itself so you want? Because my portfolio here is dark lines around the outside. If I click on this text field, I've already got a class applied for it, which is cool. Okay, And I'm just gonna go down in the command. I'm going to option click the Chevron Alt click on a PC borders. The moment there is a style, it's just they are hidden from us. But we can say, I want to add another style on top. And I want it to be, I'm just going to show you it can make it big and thick. It's not what I want. But you might decide that this is what you want to do. Rounded corners. Rounded corners. Why isn't it doing to all of them? Let me make something less ugly looking. I'm going to use my gray. Oh, yeah. Not much different. Why is it a blind all of them. It's because even though these are called ticks field, it doesn't have the class takes field, applied field. What is it called? Field label, note ticks field. So you text field Down Arrow, Command or Control into text field. Okay, Let's do the last one. Alright, And it's, it's poured over my hot pink which I didn't actually want. Sorry, helping. You are going to clear it. Alright, How do we stall out button, button. Get started like anyone. I've already got one we made earlier Member button. There we go. And because we're super cool earlier on we went, remember we made button large or remove buttons small. Look at S, web designing, building stuff early on in the course where it takes us forever. But later on, website building ninjas with all our cool classes, or at least that combo classes. And they'll global classes because remember, we want to do color secondary. So good, carried the button. That's okay. What happens when you submit it? We saw it before. When you actually submit it, there was like, Hey, thanks for submitting it when you get to that. So you need to click on either of these two, either the Form Block or the form that's inside of it. It doesn't really matter. Okay. And go to your settings is an option in here that says the state of this form, normal. So we design all this. Success is what appears once somebody has done it and now you just go and stylus, you might decide actually I'm going to use my color secondary. Nope, I do this so many times. This is the ID. We don't use this much other than when we do way back at the course, these IDs we used for doing navigation, where we jumped down to sections from buttons. And add our class of color. And we're going to use the background of primary. This one here is going to be the tick style. I don't have one. I can think of one that we've done takes color secondary, always going to be good. Here we go. So you can solve this again back at the form into settings and you can do the era as well. Okay, installed this but down the bottom. Let's put it all in a grid because at the moment, I want this, this is my Figma mock-up where I've got them side-by-side. How do we do that? We're going to use a grid because grids are good, they're easy to use and there are quite regimented k. So I'm gonna go grid. I'm just gonna make sure it goes inside my form somewhere anyway. Okay. As long as it's inside the form and form block, okay, it will work because basically the formal grab, anything that's inside this foam, stick anything in there. It'll try and send it as a form option. So I stick my grid in here. And this at the moment I've got what, two-by-two, which is fine. So I'm going to grab the name one. Okay. Can you grab the email one? I'm going to grab my phone number one. And that's going to work here for my fifth one. It's going to span both of these and that's letting the spanning both of them. It's just not in the grid. It'll still work. The grids only coming down to here, the form doesn't care. But let's say you do here. So let's put this one in to there. And this one in as well after this guy. And he ends up here and you're like, Oh, can I get them to span across inside this grid? This is a good kinda like bonus cred explanation here as part of forms, there is a secret trick with the grids. If you click on the thing inside the grid, doesn't matter what it is, you can actually drag it to spend to grid option. It'll cause us a little bit of grief when we get down to mobile, but we can fix it. Next thing is this a we it's a good point. If I got on my phone because I'm designing, something went wrong and I go to settings and I design my normal urine installed this pot. Luckily, it doesn't all go back to the same layout. Alright? So there's newsletter here. This is a label, but unlike the field labels, this thing needs to come along. Can you see the field, this checkbox field, it's one unit. If you delete one part of it, freaks out the kind of intertwined. And I could just leave it like this. There's nothing wrong with it. But if you want it inside of this as well, inside the grid, I'm not sure why am I giving it to the grid. Don't need to. Okay. Now it's part of the grid. Here we go. Get it inside the grid. There we go. And I'm just going to leave the button outside of it. Otherwise, I'm going to have to get put them in, kind of get them in. And then I'm going to have to get this guy and get them to spread across and push them down. And then this guy is spreading too far. Then I can go into some selecting inside this grid option. Go back to my grid settings where a child stopped doing stretchy stuff and go to the side. What if we want this one to push down onto its own cell? These two made sense, that made sense on its own line, but this one's kinda weighed over here. So what I can do is just throw a placeholder. So I grab a div tag. So I'm going to twirl down all of these again. Topography will leave seam is closed because we're not doing that one. Keep forms open. Alright. So you just put it in a div tag. Where is it there? He does nothing else other than keep it open and he's kinda high now and you're like, oh, the layer doesn't work. Remember what he does when we preview them? Okay, he just goes, he collapses down. He's just opened up so that we can click on in Webflow. So this one here, this one doesn't need a placeholder because this guy wants to go across two of his form cells so you can't fit there. So we just breaks down to the next one. Okay, we're working, we're doing stuff. What I might do for my section contact, I might style this section contact and say actually the spacing I'm going to put in both sides. Hold down the Option or Alt key. Here we go. Nice. My grid options. I want to be a bit bigger. Alright, Other than that weird spacing issue that's come along. Alright, let's look at mobile view and we're basically just wrapping back to doing grids. Nothing to do with forms now. But we might as well do it because it looks okay, doesn't work on this one, but too small. So we're working on our grid. So click on the grid, go into here. And I'll show you this because this guy, he is doing funny stuff because he's spanning two of my columns. So if I say to my layout for my grid, and I say actually just be one column. Why don't you be one column? It is kinda trying to, but at this guy he's fighting. So what you do is you can click Done, come out of it and go, you actually just do one on this particular breakpoint. Okay. Now I can go back into my grid. Grid. Why isn't that working? I've got one. You all there. Add another one. Move on. What's spanning across? I do not know. You wait there. Somebody else is spending across. I've worked it out. Come on, brain. It was these guys mean, but I did that earlier on as well. I made the newsletter span across couple of them. They go high success. Alright. And this thing here, that was a good place holder, R6, it down here now on a hill claps, right. Let's have a look. So he's done on mobile, Let's preview it. He's collapsing, but he's leaving a little bit there. How do we get rid of that? We can say this, Toby's their tablet, he's there because he's good placeholder. That when we get down to horizontal landscape phone, okay, I can say display this guy, None. Oh, we have designing. Now let's have a preview. Nice, hopefully now some of these things that we did earlier that we know it's been a long time doing display properties and all sorts of inline blocks. Once you get to these things now, which are pretty easy to dump on but harder to adapt if you don't have some of those fundamental skills, I feel successful. I hope you do too. Alright, last thing I wanna do is add my hitting. You can skip along now I'm just going to dump the hitting in. You can hang around if you like, and I'll put it on my desktop. Always start at desktop. And I'm going to grab my what was it wasn't one that was doing all of that. I think. Am I going to cheat and just grab it from the homepage? Probably. Oh, it's got a lot of styling on it, doesn't it? Do I do it anyway? Let's try connect us. Get it in the right place to put the section that I wanted to go into and hit Paste. Then goes to the wrong side, get it at the top. And I don't want to use this styling, so I'm going to say, get rid of that class. And what did we want to say? Ask Dan question. Ask. Then Dan. I want that span tag because it's not hard to apply, but it's going to paste it in it. Just do it the long way. Okay. So Dan, question, and how do we spend it? You remember, there it goes. And why did we say We said text, secondary color. We go standard question that we wanted this lowercase q. And we want some margin bottom, which we don't have. I don't think margin be in B, but imagine bottom. So what I'll do is throw it onto a div block. And I'll say You are NB. I'm guessing I probably need my medium because my medium I know is those maybe it's 81624. So extra small, small, medium. That makes sense. So this is going to be media margin bottom. This is going to be my 24. Let's see if this one works. There's nothing applied to it. I could have a credit created my global class here because there's no other classes applied to it, but we've done it now. Medium bottom. Yeah. Alright. That is my styling of my form. Anything else? No, that's it. I'll see you in the next video. 65. Image Types in Webflow SVG vs PNG vs JPG: Hello, my friend. We're going to discuss when jpegs a good way in PNG is a good, kind of good. And we're going to look at when SVGs are amazing in Webflow. If you already know the differences, you might want to check it out. We do cover some cool things of exporting from things like Photoshop and Adobe Illustrator. And we talk about what size they should come in. But if you know all that, you can skip it. I won't be mad, but for the rest of us, let's jump in. All right, let's start with Jpeg. I'm in Photoshop. You don't need Photoshop. I'm just going to show you it. So jpegs are perfect for something like this where there is a lot of detail and there's no transparency. They can get really small and look really good. They can get to a really small file size and look really good. When are we going to use PNGs? If you want to play along in your portfolio exercise files. There is one called SVG, PNG JPEG. Got a couple of examples in here. So I'm going to open that up in Photoshop. And like this by itself should still be a jpeg BOD. If I say magic, rename, remove background. A. If you haven't done that before, usually really update your Photoshop skills. Come join me for my Photoshop essentials and advanced course, cross-sell bards, regardless, it's got transparent background. Now I'm going to trim this up. Okay, Return. And now I'm exporting it. It needs to be a PNG because I need to see it. I need the see-through newness of it. And a J peg won't let you do it when you are exporting from something like Photoshop, be using this one. This is the best one. Export As File Export as don't be using Save for Web anymore, okay? Because this has better export as those great. So JP Can you see no transparency is very small. Well, my images, massive. Dewpoint three, probably not good for Web yet, but it's go to PNG. Okay, and look for the transparency. You go transparency. The trade-off is massive file sizes. So jpegs, if you can get away with them, PNGs are great if you need transparency. And if you are coming from something like Photoshop and exporting things, you can at this stage here, decided this is way too big. I'm going to do, we're going to need it at 4,000. You might decide that I only needed it, maybe 1,200 and get a more reasonable file size, even that's pretty big. The limit for bringing into Webflow to seeing those 4 mb at the moment, that might change your mind if you've got giant those images, have to do some editing before you bring them in to Webflow. Again, same size, 1,200, but as a JPEG, k goes from one point to okay, down 2.3 kb, well, 0.3 mb. Okay, so a fraction of the size, it'll look great, but no transparency. So JPEG for detailed images that don't need transparency, PNGs for stuff they do. Also when you are exporting from something like Photoshop. So we don't need transparency. We just saving it down to a small size, makes sure it's at least double the size you need it. Most devices like browsers now and phones will need double the resolution. They call it like high DPI or I think Apple calls it Retina K. So if I know I need it to be about 800 pixels wide, I should really export this as 1,600. It needs all that extra resolution to look good on those extra fancy displays. You can do it fancy in here in Photoshop. So I can leave it at 200 and say, or 800 and say, I would like a size that's both. Maybe, maybe I don't even need you can add more than one, right? You can say I want it to be one size, might want one to be actually double the size as well. You can export both of them, but we don't need the one size one. And when I export it now, it'll actually be 1,600. Alright, JPEGs, PNGs, PNGs get murky when we get into things like logos. So let's jump to Illustrator. This is Adobe Illustrator. If you haven't used it or you want to go a bit further. I know a guy who's got a course essentials and advanced course, just saying, but regardless, it's a really good way to show you the PNG and SVG comparison. Because what we've learned from Webflow is it doesn't make things, you can't design a logo in Webflow, you could try out a div tags, it'll be tricky. So you need to do in something like Illustrator or InDesign, or Photoshop or Figma or XD, something. Okay. And when you do, you've got to pick a file size. And when you do, you've got to pick a file type. So illustrator has a cool thing under Window, Asset Export. Make sure it's grouped. You can throw it into here, give it a name. If you have tried to export something from Illustrator and trying to make the canvas the same size. This thing is a lifesaver. It's going to be my logo for thesis. And down the bottom here, like Photoshop, we can say actually, do I want it to be a JPEG? Let's have a look at J peg. Okay. Let's have a look at P&G. Remember Dan said it needs to be twice the size as I need it to be because of those high DPI and those retina screens, they look good on that. And let's have a look at the last one, SVG. Okay. And did you notice all of that disappeared? Why can I do two times cookers? Good old scalable vector graphic. That's what SVG is, means it can be scaled to any size. So if you've got something like this, Victor, simple shapes needs transparency, just go SVG, PNG will work, but SVG can be as big or as small as you like. So I've got all three of those. Let's go Export. I'm going to put them in this folder in our portfolio. So you can go have a look as well. Let's have a look. So it's made these two folders, the two weeks, Okay? And it's going to be interesting. The jpeg is quite big and has no transparency. This PNG is a lot smaller, which is cool, and it has a transparent background, means I can have it over the top of things. I'll show you in a sec. You have to trust me with a transparency, but file size is smaller, which is awesome. But what about SVG? Let's compare these to the SVG is even smaller again, and let's bring it into Webflow. Okay, I'm gonna bring in these two. I'm gonna make my background buddy page here. I'm going to have all temp. Whenever I'm making Delete Me too. I make these little Delete Me classes because I know later on I've just used them for like maybe a tutorial, maybe destroy somebody, maybe just a taste something. I'm going to say background is going to be a color. I'm going to throw those two images in. So I've got these two. Let's look at P&G. Okay. It's coming good. It's coming in a little bit fuzzy though. Don't worry, I'm going to copy and paste it is if I make it half the size, can you see it becomes this lovely crispness. It's gonna be hard to see other video. Can you see it? Okay. Depending on the quality of the video coming through to you. So it comes in at this big size, you scale it down by at least half so that it gets crystal-clear on this monitor that I'm recording on is for k high DPI monitor. Most things are these days, so it needs to look good. So PNGs though, what about SVG? Okay, so let's go and bring that one. And this is my SVG version. Look, look at it. It comes in crystal-clear. Look how big it is and the file size with smaller heaps, smaller the file size. Look how big it gets, because it's a vector and they can get as big as you'd like to be big as a mountain and it will still have a nice crisp edges. So jpegs for images that don't need transparency, they'll often be smaller and be really good quality like Alfred back. Now that guy, that guy, if you need detailed image that needs transparency, PNG is the way to go because an SVG can't do this. It can't work out all these little pixels. It needs very simple geometry. All of this stuff. It needs kind of lines and anchors, and that's what it really shines. So if you're at this situation, node PNG say yes to SVG because like it should be a bumper sticker. And just quickly as well in Figma and in XD, if you are exporting anything like this guy, remember down here where we are exporting these, make sure it is a to x k because you want that double size, alright, that is looking at the different file formats and what size you need to bring them in for Webflow so they look nice and sharp. Alright, Onto the next video. 66. What are Hi-DPI & Responsive Images in Webflow: Hi everyone. Let's talk about what this high DPI thing is. What does that what does this responsive image? What is that doing? Why is Dan got three different sizes here? I'm really excited about this one because if you've done any sort of other web design, this used to be really tricky thing, responsive images, but Webflow does it all for us. So good. Let me show you the goodness. Alright, let's start with a high DPI thing. Okay, so I'm going to drag in this PNG that I had earlier. Remember we brought it in and we worked out that if I copy and paste it and make it, we've talked about making it the half the size. The size is going to look great. Bit fuzzy. Half the size looks nice. Okay? What you can do is you can skip the dragging pot and to say make it high DPI, they're just cuts the size and half used to be 701. Now it's 351. Close enough. Okay. Watch this. If I drag it, it goes off. You can drag it bigger. It's not high DPI, but watch this. It'll just automatically turn on when I get to the right size, can you see high DPI? You go just to kinda like a visual indicator that it's half the size it needs to be. It's kinda look great on those retina screens. And there's high DPI monitors. Alright, so that's that bit. Let's look at responsive images. If you are from web design land or development land or your software engineer, you might be thinking, what does it do with images? Okay? Does it just, if I bring into giant image, does it scale it down to I have to do it. The cool thing with Webflow is it does everything for you. So what I'm gonna do is I'll get you to bring in. You don't have to, but if you want to play alone under this under portfolio, SVG is this one called responsive example one. Bring it in. And what I'm gonna do is I'm going to put it inside of a div, needs to go inside of a container, can't just leave it lying around, otherwise it doesn't work. Okay, And I'm gonna go to this, and I'm going to say, You come in, you are massive. What if you're high DPI, it's still massive. Even half the size it fills the screen. Okay, let's forget about high DPI, but I've got this really, really big version. Okay, I'm going to leave him there. I'm going to copy and paste them. So I've got two of them. It's hard to see, but I've got two versions. This top one here. I should even do the one underneath. Click it and try and find the cog. I'm going to make it very small. I'm going to say you are 100 pixels. There's joint version. I got this little version, copy and paste. I got I'm going to drag it to go to the bigger version. Copy and paste it again. Big aversion. Be placed again, bigger vision. Okay, so all these different sizes, the cool thing about Webflow is that I think it's during the publish because you can't preview and make this work. You've got to actually publish the site. Let's see if it works. Okay, in amu it, I've got this big version. So let's save this one. I'm just right-clicking in my browser. I'm going to save it in here. I'll save them in. So you can have a look to this ginormous version that was 3 mb. There's this version, save as, I'll save that one as well. Save as right-click, save as well. I happened to have a look Webflow. It said the big giant version. Or can we see it? There we go. It is still 3 mb. Didn't touch it, join on us nothing because we didn't give it any size would just say go in there. So it's the big size, but then the smaller version. Okay. Well, where is it? Yeah. This one says, I'm the scaled down. Okay, there's a 1,600 pixels version, there's a 1081, there is a 500. And actually these bottom two, I think 500 is the smallest, it will make it. So it actually just got two of those. That's these two. Okay, so it is pretty clever. You don't have to do anything, just, just upload your big version as long as it's smaller than 4 mb. And Webflow will not only just scale it down tins of physical size, they use some image compression to make it smaller as well. And it's pretty good, pretty clever. And like you could go and try and make these smaller again before you bring it into Webflow, do some experiments. I'm finding that the compression that they use looks good. File size is a super small, leaving it to workflow. If you're thinking what the heck was all of that? The thing to know is that you don't have to know anything. Just bring in images as long as it's not bigger than 4 mb. And width flow will cut them down to the right size rather than trying to load this. Otherwise it's going to try and load this three megabyte file and squeeze it down to the size. So it's wasting a whole lot of, doesn't need 3 mb worth of data. And quality just means that this version, if you've done my web essentials course, we will get more to the code. We just been a load of time trying to work out how to switch out images or different breakpoints. And because that's the other thing as well, is if it's rendering this on the desktop view, but it's going to render, it gets cold on a mobile phone, it might be a lot smaller. So only look for the 500 pixel one, not this join almost one, which you might have nice and big on the desktop, but small on the mobile phone booth flow just kinda injects the right code to the device can call the right size image. It needs super handy. One little bonus for making it to the end is in Webflow, kinda do with images on the assets panel. You can get a bit crowded in here. What's this? You can actually just this one here, expand it, can get nice and big hay and you can decide actually just make them a bit smaller, make them teeny tiny with the list, show me the images that I have and the documents don't have any documents or files. Back to whole assets. You can search, show me everything that is one of those we'd hate shots and you go these dragging them in here. You can order them. You can say show me the the oldest one first that came in. Show me then in alpha numeric order, and then select them all. Delete them all over. Exciting. So we're going to get that back in their bonus for the people that made it to the end. Alright, that's it. Onto the next video. 67. How Crop Images in Webflow Using Object Fit: Hi there. In this video, I'm going to take our rectangular image and force it to be a certain size, higher rectangle. And then I'm going to stick it inside a circle. I probably should have done this earlier. Anyway. Let me show you how to crop images in Webflow. First thing I'll say is that if you do have the ability to crop things out in, say something like Photoshop, do that because if you're cropping off a lot, it just means that there is, the file size is up high. It doesn't need to be, but there's lots of use cases where it needs to be cropped here, Webflow. I'm gonna get rid of that guy and I'm going to bring in a rectangular image. I'll use that one we used earlier on. If yours is stuck like me, I'm like, Where's my image is gone? I'm gonna go clear that. Okay, And I'm gonna go back to grid because I like it. And I'm going to bring in this one here, clearly rectangular. I need it to be square. What do I do? The next thing is that this needs to be in a class, but I can control it with k. So I'm going to call this one my image hero. I'm not going to use that one because I've already kind of go backwards and undo it and use that. I'm already using it for the rounded corners thing. So I'm going to call this one image. Here are two, very clever. And I'm going to give it a size and a width. So I'd say size, you are doing minimums and maximums. We're going to say you are actually just like something that fits in here. I'm going to say you at 200 by 200. Okay? And it's squished it, which we can't live with. So what we say is this option here, It's called sit. So we say object is not filling it, which is trying to fill the height and the width, just cover it. It's cropped off the top and the bottom if I make this quite wide. So I'm going to hold down my Option key on a Mac, alt key on a PC and I drag it this way or the way width then you say I'm making a wider Can you see it will try and cover everything, but it's losing a lot of the top and the bottom. So it depends what you need to do. Remember these go down the bottom here before we turn them into symbols. We should have done this bed day. But now you know, I've wanted to be perfectly square. Again, I'm gonna go 200 by two. That's 2,200 by 200. And now I can add my border, make it round for a bit and just make it like 200. So it goes all the way round because it is inside of grid. It's a great child. I can say you sent it and then that way sintered. Nice. We're going to have to adjust it for the different sizes as well. That works fine. That works. Want it to be bigger. I don't want to move it around. So you can go through and say actually on this size, it's manana, 500 by 500. Okay. And you can see there the rounded corners to hundreds, not enough. Let's go. 300. Neo gets a bit ridiculous where we just turn it off. But the idea, you can adjust it as long as they've got a class around it. You can adjust for the different breakpoints. And the trick is just sitting it for just sitting the fit to cover. You can force it to be any size you like. Alright, that's it. I'll see you in the next video. 68. What is Lazy Load in Webflow: Hi everyone. We're going to look at this option here. What is the lazy load mean? What is it to be IGA, all will be revealed. Alright, so lazy load is on by default in Webflow, okay, I found an image, I've clicked on the cog and it says here, load. Lastly, the opposite is load eagerly, very cool names, so much of other web design parts or does, I don't know, display block or inline block or class ID div zero, terrible names, lazy and IGA. Makes sense. Okay, all it just means is that, and I've made this really long version of it. It's really hard to, I just got to describe it. Basically what happens is when the website is loaded, it will load this one because I can see it. It'll load the tippy tops of these ones where it'll load all these images, these three here, because I can see them. It won't be loading any of these other ones because it can't see it. It's not in the viewport. So lazy just means that I'm going to load the ones I can see, but I'm not going to do the other ones because I'm lazy. Why is that good? It just means the page loads really fast. So Google goes all look at this page, look at facets loading when the person gets there and while the scrolling, it can then be hurrying to try and catch up and load the images. That can be like, you can force it to say actually these images down here, I don't want into my symbol, I still can see the COG. And I can say actually I want these to all to be eager. You can go through and do it for this, for all of them, as long as you do it to the class. Okay. It'll equally like these things. I don't know why you would, you can set it to default. So you can say actually just let the browser decide. And I think in Google Chrome, the default is lazy loading. I don't know about the other browsers, but there you go. It's just an interesting thing. I know you're going to ask this guy here is not going to lazy load because he's seen firstly, he'll, he'll load straight away, but all his buddies in the bottom, we'll wait until they're good and really lazy images that only works at images as well. Got lazy load text. Alright, that's it. Let's easily get to the next video, dendritic, bed danger. 69. How to Change Favicon in Webflow: Hi everyone. This video, we're going to look at these little guys at the top here. There's a favicon. We're going to update ours to this weird like Little did emoji guy. Just because let me show you where to do it and what the rules are. Let's get going, okay, to find the favicon for a project, you've gotta go to the project settings. So I'm on my portfolio and it's just in this first general tab. You've probably seen it. That's probably why you've googled what does the favicon? It is this icon up here. Can you see the favicon for Figma? Is that little guy, little f for it floats that w you want to make your own. The issue is that it won't make it for you. You need to upload something that is exactly 32 pixels by 32 pixels. It needs to be any of these little guys. It can't be an SVG, even though That's good quality. Probably going to be a PNG because you've might want transparency. This one here does not need transparency because it's a solid square. It's a little bit of rectangle going on, but it's a solid square. So there are a lot of favicon icon makers online. I use Photoshop and all I did was go file new and make a 32 by 32 pixels. Make sure it's RGB. Click Create. And then I just copied and pasted some graphics that I was working on for something else. Okay. I was working on some cost stuff anyway. So yeah, get it in there. It's teeny tiny. It's sucks. The quality is terrible, but Ernie has to be pretty small. Okay, then when you export it on a, on at least Photoshop, you can export it as a PNG, so you get that transparency, okay, and you export it. So it can't be 32, it can't be 31 by 30 to account B, 33 by three, the very strict. So once you've got it, you can upload it. I've got a couple I've got those two in your exercise files if you want them. I'm going to upload in my portfolio in the exercise files, this favicon, I'm going to rename that as one in a second. But there's wanted to pick one, click Open and wait for this. Once already updated, didn't even need to hit Save Changes. Now, how do you go and see it in the designer? You're not gonna see it watch. It'll still be Webflow. In preview. It'll still not show. So you need to publish the site. I'm gonna go publish it. I'm going to view it and get ready. Because the new favicon, obviously skeletal, did emoji, probably not appropriate for my portfolio. But hey, you pick anything you like. Equality is terrible. Use you can use colors. The one thing that does happen with favicon, so if you are updating it loads case sometimes the browser holds onto the favicon and doesn't change it. So sometimes if you go and update it here in workflow, it will update. But sometimes the browser needs to be, you need to clear the cage, be in private mode, something because sometimes it holds onto that favicon way too long and it doesn't update. Even though you have updated it. It just stores aversion and doesn't show it to and doesn't go and check for the new icon very often because who updates the favicon very often they show a designer and you do it all the time trying to get a pixel perfect in there. Alright, feather cons in Webflow. 70. Footer Stick to Bottom in Webflow: Hi everyone. This is my footer. It was fine on other pages, but on this page because it's really short, keeps sticking to the top. I want you to stick to the bottom at brokered Deborah. Alright, we have actually done it before. Just reusing a skill familiar. Let me show you how to do it. First of all, it's not the same as the hitting that we did. We made it sticky with that position. Okay. That worked her foot. It's slightly different and we've actually done it before. We did it here. Okay, remember this double-click to go inside my symbol came up with this way to push to the bottom on all these different sizes. Okay. We made the parent Flexbox and we made the child. We had a margin at the top of order. What we're gonna do again, but again, it is the parent's gonna be the body tag and the footer is going to push from the top using order. Let's do it. I'm gonna go to, there's no point doing it on this page because it's going to be forced to the bottom. It's really handy to see this in action when you are on the Portfolio page. Like if I add a footer here, you footer. It's stuck to the top because it's not an a content on the page. We might just have already short page. So I'm going to put in some super basic styling. So we're going to put it in something called section, and I'll put it in section footer. But actually I don't that's from I've already recorded this once and it's gone badly. I'm going to show you how to delete one that you don't need anymore. Okay, So I've gone to my styles. I've found it by searching for it and I'm going to bend it. Okay, I forgot to tell you something in the first topic of this video, so I'm doing it again. It's back to where we were. I'm going to create a class for this one called section. And I'm just going to add two things. I'm going to Option or Alt, click the chevrons to close it down. I'm going to say background is that slate. And I'm going to give it a size of minimum height of maybe 100. Cool, How do we stick it to the bottom? The first thing is it needs to be because we're making the body. That's gonna be the parent. Okay. This is the child. I can't have this hiding inside of any of these other div tags. I can't put it inside of a section inside of a container needs to be in parallel with the body for this to work. Okay, so when I say in parallel, it needs to be like one step in. The parent is the child wandering into body needs to be changed. Now, I want this to happen on all pages. So I don't wanna do it just to this body one because if I go in and change him to watch up here, if I change him, he goes, Hey, create a class called body two. And then you're going to have to go to every page and apply it. So what I wanna do is be back in here and say Buddy, click in here. I want all pages on old buddy ones to go Flexbox done. You want to say direction is vertical, then it gets back to how it was. Now, I can say you, my friend, my child of my flex, that's weird. We can go to Spacing and we can say the top is auto. We did it. That's pretty much it. I'm going to go through now and style my photo. You can hang around and check me building a footer out, be sorted the beginning there. It's not particularly fancy. You can be dismissed. Otherwise, hang around. I'm going to turn it into a symbol and put it on all the pages. Alright, so what I want achy, I don't want to put it in a container, a Keegan, and want to put in a text link. I'm just gonna do a simple one. I'm going to wrap this text link in a text editor. Okay, it takes, what does that make sense? Yeah, I know the topography is going to be white. I'm going to get it to link somewhere. Okay, but first I'm going to change the text. Okay, so I've got some text. I'm not going to worry about centering it just yet. We're adding the link. Actually, I do want to do, I'm about styling it. So I could push the painting down. I can play with the margins. Actually, I will show you another way because the easy way, well, our way is to grab the container. I said, do not make the container of Flexbox. Will it work? Let's have a check you centered and will it send it that way? What you go, that's why we don't do that. Okay. So I'm gonna put in deadlock and put that inside it. Okay, so here's my text and summative block. It's not inside my container. Here we go. No, it's not. Here we go. Now I can say that diblock, okay, is going to be called div. Div. So many footers. And I'm going to say you are flex. You are going to be centered and you are going to be centered in there. Oh, it's still not working. Oh, I know why. Do you know why? Pause. Think why? Why is I can see it there. You can see it run for my eyes. There's no height. The height is coming from the section. A ***** of the container would have converted just fine if I'd given it the height. So I'm gonna say, I'm gonna get rid of this one. So this has a minimum height of 100. I'm going to clear it by holding down the Option key or Alt key on a PC. And I'm gonna give it to you. You're going to have the minimum height. Now it's in the meadow or a dance super amazing web design company kinda knows what he's doing a little bit. It's way too big. They're down arrow. Here we go. Alright. I'm going to turn it into, I'm going to turn it into a symbol. Let's do that. You can right-click it and turn it into a symbol where you can go to the Symbols panel and say Create symbol. This is gonna be my footer. Already have one of these. I don't. Look at my symbols, don't. Alright, there's only one instance on this page. Let's put it on all the pages. So I'm going to copy it. Let's go to the pages. It's got a homepage and scroll down to the bottom. Let's go to my symbols. Fitter. Can be tricky to add. Done the bottom. Nice. But of course, because it's a symbol, I can go into it and change it and say actually, we are not TTY like Australia. We are limited like New Zealand or.co. I don't know what that is, but it means that it will update on the other pages like this one. Here it is there.co, the company. And we're gonna go through and add it to all the other pages. I will spare you that because you've seen it. Alright, that is how to get your footer to be sticky. Stick it to the bottom. You actually use the flexbox and you use the child to be ordered at the top is weird but true. Alright, let's go to the next video. 71. How to Create a Page Load Animation in Webflow: Hi everyone. In this video we're gonna do some page load animation. We can get this text to pop up when the page loads. Okay, so page loads that pops up. We're going to cover this interactions panel. We'll look at easing. And we're going to build our first custom animation, not using some of the presets. Alright, let's get going. Okay, So for this next section doing indirection and animations, I have created a whole new site just to keep it separate from our portfolio and the club website we've done. Just to keep it yeah, to keep it clear and be able to see what we're doing without 1,000 classes. But of course it can work in those ones. So what I've done here is I've edited background. I've added a nav just because animated container and Harris section, which is just the regular structure for the site. I think I'm regretting the gradient already. It's quite the, quite the effect on the eyes. So there's a logo. So to get started, it is pretty handy, put because we don't really want to style too much of the section and then stick that diblock in there. And it does nothing except it's going to accept the things we're going to animate. You can animate anything, an Image, button, lists. I am going to bring in just text blocks, like sort of the beginning there. This one's gonna be cold. Dance. And then I'll have another one, a couple of based portfolio for 30. All right, I'm going to style these real quick. I'm creating my own classes. So that is pretty important. So you don't actually animate the element, you eliminate the class that you apply to it. So just whatever you want to animate and you going to add a class to. And you'll notice that I put two separate text-box not it's hard to animate them or if they're all in the same text box because I wanted these to animate separately. So you're going to be called text then maybe use caps just to make it clearer so you can see what I'm up to. The animation panel is a little bit, a little bit tricky. Well, it's not, but it is, it takes, and this is gonna be large portfolio. All right, so I've got these two, so I'm going to animate these two classes. How do I do it? Actually, I'm going to style these real quick. You wait there. Alright, so styled them. You don't have to animate both of these up. You can animate them any which way to get started, have your class selected to extend? We're gonna go to the little lightning bolt here. And this one's going to be a page trigger at weight. Earlier in the course we did Ellen and triggers and we're going to do loads. You'll end up doing with lots of more element triggers. We're doing a page trigger just to show you what it does and it's appropriate here we want when the page is loaded because watch this. If I go to page trigger, there's a really cool trigger. This is when the page loads. So wholesome. You've gotta kinda read through this. I have a read through it because it is, I find it tricky. And if I find a tricky, you're going to find it tricky. They are very explicit about what you need to do and it's pretty good if you read it. When page does loading, select an action, we don't have an action. We're going to start our own first custom action before we were using a preset ones go. So we started an action, started an animation so that a new one, but still don't have one really will go to kinda created one. Now we've got to add to this time the animation. We're going to say add two here. And this thing of p is going to give it a name. We're going to call this one here a text animation. And we're going to add some stuff to it with your class. Now, because you could have got to this point without having anything selected, you need to make sure now you've got your class lifted. Because what it does is I'm gonna do a move. You can do any of these. I would do a move. Can you see it brought through the class name text Dan Capital dan bought it through. And whenever you're doing animations, keep an eye on these guys. They're quite helpful. Okay, it says this move action does not have a value. Okay, So do that. So what I'm going to say is I'd like to move it and you can see it appears way down the bottom here. Ignore the timing for the moment. Let's just look at this action here. Let's just look at the settings down here and you can kinda see X, Y, and Z. I won't mind going kinda down all mine quite far. So I'm going to clip it off off to laws that looks like it's kinda like coming out of the ground. But regardless, hit play, it's the wrong way around. So that happens a lot. So what you're saying is at zero K here, I want it to be down here. Actually, I want this to be the initial state. I don't want to go there. I want it to start here. So this is the initial state. The trouble now is that it's got no other state. Okay, so you need to say actually let's add another action still with a selected. It's funny like you can actually animate 1 million different things in here. By clicking this just makes sure the thing you want to animate, okay? I want to add an action to it. I want to do another move. Okay, and what does this move say? He is back to 0 and put it back to zero. You can see it says zero. There it is. Why it says zero. You actually had a sake go to zero please. So it looks at this first one, okay? This one is set to, the initial is set to, I'm setting it to 234. Then this other one is set to zero. Then we go get her plate. Hey, we're animating. Ignore this thing. I find this really tricky. And it's actually happening over 5 s. How do I know that's the duration there? So this top one here loses all that timing because I said be the initial state, so it doesn't do anything. The second one though, has a lot of information. The both moves that both for text in. This one says, Oh, I want the duration to be 5 s. I'd assume that this would be at 5 s. I don't know why it's not. So I don't even look at these are protein, they don't exist. They may change it. That changed this UI here in this, this option here, loads to try and make it better. Alright, So it's kinda going up. Before we do the second one, Let's look at a few things. Remember this first option here, the initial state doesn't have a lot of options. The second one does the sick ones is, how long is it going to take this take 1 s, Let's hit Play. It takes longer than not. The best one though is this thing here. Easing, easing is to do with the moment is quite linear, right? Well, it is linear, just goes boring. Powerpoint animation. Well, I want, is probably the nicest first one is ease in and out. It's gonna go slow at the beginning, slow at the end, which feels like real life, but gravity, friction, I don't know, something is happening to it goes fast in the middle, slowed the beginning and end. Whole lot nicer. There are some really nice ones. It'll depend. Minds coming up from the bottom. Yours might be coming down from the top. So let's look at often don't use ease in and ease out. I'll use In-N-Out together. Okay, someone who is both of them. So if I go to say ease in out, actually skipped to bounce, bounce work this way. See bounce doesn't work because it's coming, it was coming from the top bounce with so work. But because it's coming from underneath, you might like it, but it's, it's kinda weird, right? It's the anti-gravity text. So it'll depend on which way you're doing it. So what I want to do is I would like to do this one looks quite good. So remember, all of these ones in and out can be quite good. In an outbox. Quite nice play. Can you see it goes away, kinda goes the opposite way before it goes the Ford's way. It's called anticipation. It kinda goes backwards and then up. It's kinda nice. And duration plays a big part in this. And the way it kind of looks that it looks kinda silly. And this 2 s looks way too long. So there's a lot of playing around with it. But let's say that, let's say 2 s, but it is doing it for one of these other ones. Sometimes it can, we perfect for 2 s because there's a lot more going on. Let's go elastic. You see 2 s is actually quite nice for elastic. Alright? So first one, a lot of options. Second month duration in easing, have a play around with the different ones. Bounce past is pretty cool. It's got that one. That's the one that's coming from the ground. It's kinda, kinda up and jumping over. But the durations too long, so I'm going to leave it there. It's kind of cool. Alright, so let's leave it there for the moment. Let's hit Save if you have come out of it. Okay, Let's say that you've come out of it and you want to get back into it, okay? You don't do anything, don't have to click on anything because it's a page animation or page triggers. So you go to hear all your page triggers. A part of the page, not part of any sort of elements. You don't have to click it first. So I can say you is this big old thing. Okay, this is where we started, but we added an animation. Okay, we added her own one. We called it hero text. We named it kind of in this part. To get back into it. Remember, go into page load, and this is where the magic happens in here. You preview it here. I can go to this one and I can say, do I do it to the first one? Okay, not a lot going on here. The second one though, I can say actually, I'd like, I don't like the bounce pass anymore. I think I like the elastic one. That needs to be longer. Alright, again, I'm going to save it. You can just preview it in here or just go to your preview mode. It will preview. Next thing I want to do before I start animating the second one is I quite liked it when it came, like jumping out of the ground rather than seeing it down here. Actually, let's do a Pasadena first because before we cut it off, and because that is a useful one to see in action, I'm gonna go to here and it go inside of it, and you don't do it separately, they all go in here. So we're going to animate text and again, but to play with the opacity. And basically it's repeating this. And it's going to bring up some interesting things. So I'm going to hit Plus, okay, I want this one to be opacity. I want the opacity. Remember it appears right down the bottom here. The move was pairs of them is zero. But I want it to be the initial state. It's going to start completely transparent opacity at zero. Great, hit play. Nothing's going to happen because we can't see it. It's doing it. We just can't see it. So we need a second one of these, I'm going to you, I want another one, opacity. And I want this opacity. A big trick with this is look at, sees 100 like the size and it will probably work. Okay, kinda works. It's best to make sure you're really explicit. Tell it, I want it to be 100. Okay. And how far I want it to be after half a second. And look what it's gonna do. That I'm going to do Opacity first and then do my move that you might want that. Okay, I don't. What ends up happening is can you see here it says, So what are we doing? So it does the opacity first and then moves to this one. So if we click this last one, the move k, he's being said, Okay, he said, This guy is going to start after the previous section, the previous section as this one. So it's going to start after it. I don't want that. I want to move to happen with the previous section. We go, There's a lot of reading in Webflow to kind of get your head around it. Here we go. They're doing both at the same time. You can kinda see as well in here, can you see these got a little liner on the outside? These are grouped together at the beginning. These are grouped together, whereas if I undo it, okay, can you see there are separate. They're kind of like there's a kind of a line between them to say do this one, then that one. Okay, so we're going to go into which one move. And I want to say actually start with it, right? My ones kinda weird. It's because of the still kind of fading in down here. It's because do you know why? It's not waiting? It's actually just spending a lot of time doing the animation. So the move animation has this one called out elastic. I'm going to just get rid of that one. Lower down. And hopefully, Here we go. It's kind of fading in as it goes. Even then it's still not. What we can do with capacities. We can say this delayed a little bit. Okay, Let's delay it for half a second so that it actually starts doing its thing half a second into that little animation. You might have to play around with the delays. That might be enough. I'm going to get rid of mine. How do you delete them? You go over here and say you are in the passive gun, know what they were. Murdered, one gone as well because I'm going to get it to jump out of the ground. Save it. How do I get it to jump out of the ground? So we're gonna go back into the styles. It's nothing to do with the interactions, it's everything to do with its container. So there's a diblock wrapped around the outside. There it is there. I mean, even given it a name, let's call this one div hero animation. All we need to do is we're gonna look at this one called overflow. Okay? The moment, anything that is outside of this div as visible or you can say is anything outside the div is invisible. It's kinda chopped off the edges there. Because I was the font. I think I've got a really big line-height on it. So what I'm gonna do is actually just make it a little bit bigger, you know, a little bit of padding to it so I can see the bottom part. Here we go. Alright? Alright, now let's play animation. I'm going to go Command Shift P to go to Preview. Can you see it kinda jumps out of the ground now? You can see jumped out at the top as well, which is maybe not what I want. So I'm going to add some padding to the top of it as well. So you padding, padding there. Look, hangs in the whole time. Alright, let's do the second one. So again, I don't have to have anything selected. I can go to this one and I can say, Here's my page load. It's doing this. Hero takes animation, okay, coat, click on it. I've got text in doing just to move. I am going to now click on this one called takes portfolio. I'm gonna do the same thing. I'm going to add a move to him. I want him I want this where he is to be as initial state because that's where I want them to end up. Cope. Again, there's this little guy keep an eye out for them. You do not have another value. So it's making it a value. Let's say I want move for ticks portfolio. And I want it to do something. Again, it's got another one saying, Hey, you haven't even changed the values, like okey-dokey. I can do that. I want to start it off screen, which is outside of that div with overflow sets about that means it jumps out and it's going to have work done wrong. Okay. So he starts their hearts the wrong way round, right? Okay. I did it wrong. They have trouble with this though, is I know. Let's undo it and do it and do it. Can you see the Undo? At the moment if I undo because I was dragging this is going to see all my undoes or going into that slide. I wish they grouped them together. That might be true in the future. Workflow if you're watching, I think to undo should be like all of the because I just slid this long. So it counted every like little number as Undo. Okay, so this first one here is not the initial state. The initial state is going to be down. And then this one is gonna be set to explicitly type in zero. Now I'm going to hit play. This one here is the initial state. There we go. You can kinda see they're grouped together now is the initial state and it's going to have work. Who remembers why one's going and then the other? You might like it like that job done. Like I said, it's the reason it's there because remember, these aren't doing it at the same time. That's totally up to you whether you want that to happen, one to come up and the other one to come up. What I'm gonna do is combine them, okay? And you can do a couple of ways. I can say this one here. Don't wait for this guy. I want you to go with him. Okay, I want you to start with the previous section and they kinda mushed together. Can you see that little band around them? I'm going to undo that. Undo it again. You can actually just drag it in there. You didn't. There you go. Buddies. And the other thing when they're in there, because this is his den portfolio and portfolio then my OCD is like move them around to get them in the right order. Can you see it's a little bit tricky. You can actually reorder them, doesn't do anything because they're in that same little band. It would reorder them. If you drag them when they were separated out, one would happen before the other. Okay. What is the difference between the two? Why is one happily and full of life and the other? The other one is a little bit Palpatine, sorry, PowerPoint, you're awesome, but I use you as your terrible animation. Whereas Webflow, you can go here and say, I'm going to use the same one. I'm going to use in-out density and announce. Good. We could get away with just out here, but because we're new, stick it on in and out back. And the only other thing is that y is one going fast. The timing, can you see one takes 1 s, this one is taking half a second. Let's make them both the same and see, now there's just a lot of playing around like, what do you think? It's kinda cool? Because Dan's has to move so much faster, further. It's moving at a different speed. Okay, That's kinda cool. So maybe though, I might get Dan to have a little bit of a delay. Dan is delayed. Here we go. Too long. Okay. If we're doing seconds, so 0.25, quarter of a second. Yeah, the trick with it though, is I'm delaying it by this much, which means the total generation is actually quite small. Which says if I may get 0.99495 or freaking out. Sorry, computer. Look. Can you see the delay? Oh no, it's still taking 1 s, Dulles me. Go. And 0.25 already done that. Have a 9.5 delay point too. Because I kind of want it coming out with it. Alright, it's kinda nice. Now we've just done two moves. Remember we had to text and opacities. You can have as many. You could be doing 14 different things to take Stan and then he went to portfolio. Setting the initial state is quite important. And then for the second one to make sure that you actually quite explicit about what it is, even though it's kinda, Can you see it? It's faded out and says it's zero. It won't always assume that it will say, well, you haven't said anything and it's just a place holder. It's actually say I wanted to go to zero, which was its original homebase. You can reorder them, make sure you name them. Okay, you won't be called new Animation, going to name it. Remember to name your classes because it's not if you drag in an image and start trying to do it to it. And it needs to be a class applied to that image or hitting whatever it is. And while it doesn't make a whole lot of sense now, and when we're doing page triggers, we do it to the actual element itself that we're animating. Whereas the, but we did before and later on we do it to the parent. Can we add the animation to the parent div, which will make more sense in the next video. Just thing to remember. Pates triggers to the thing. And when we do more element triggers, you do it to the parent. Alright, save it. Let's have a little preview. Alright, that is it, page load animation in Webflow. 72. Image Fade In & Get Bigger On Roll Over in Webflow: Hi everyone. In this video we're going to get these little cards to get bigger and kind of fading when you roll over them. Okay? Yeah, Let me show you how to make that and Webflow. Okay, to get started, we're going to actually use that card that we built earlier in the course symbol. Currently, what I wanna do is I've just created a new page on my website, just go called animation, whereas the animation test, just to keep it separate from everything else, I'm going to add a grid so that my cards got somewhere to go. It's going to be three columns, one row. And I'm going to grab that symbol. Okay, cool. It cod thumbnail, it's gonna go in here. And because I also don't want to mix it up with like us, does it have to be a symbol? No, we're just gonna go and say right-click and say unlink instance. So it's no longer connected to that symbol, doesn't have to be, but it can be. Okay. What we're gonna do it too is I want the whole COD. I've got a div code card, thumbnail, wraps up everything up, everything is hiding in there. Cool. So what we're gonna do with it selected, we're gonna go to our lightning bolt interactions and we're going to do a trigger. Last video we did page. This thing here has to do with an element. You have to interact with it or the element has to do something. Now case, our element is going to have a mouse hover. Okay? We're going to say on hover, the action is going to be, and we've played around with a bunch of these, but it's not like there's a couple in here that would be so get close. Preview. It's kinda what I want. It's not what I want. There's no actual pre-made ones that I want. So we're going to create a custom animation. Okay, great, that's done nothing like before. We're going to say, alright, let's add one. This animation we're going to call this one girl, what COD? Grow. And hit Enter and like before, have the thing you want to animate. And I'm going to say plus, I would like this one to scale up. This one's a bit weird. I don't really weird. Before maybe we're moving that text can we started below and we moved it up. So it started in a place where I wasn't already. So we had to do that initial state. This one is starting exactly where I want it. I don't have to have an initial state. So what ends up happening is all I have to do is cod thumbnail scale. Over a certain amount of time. I'm going to do it a certain amount of size-wise up to you. I'm gonna go here one point to It's a bit big probably, but I've never been to showmanship here. So there is no initial view just to have the second view, you can go play it. It's a bit simpler if it's already, if it's sitting there where it needs to be, you don't have to have an initial state to change it and then get it to go back for the second one. This one, it's already where it needs to be. So I'm just going to change it to be a bit bigger. My x and y are linked, so it's gonna be 1.2 for each. And that's basically it. Hopefully, Let's save it. Let's give it a preview. And I'll hover over a half works. Okay, so it got bigger. And the trick is, is watch this. Again. If I click off, click on my container. I've got this trigger, element trigger and it says on Hover, do this cod grow, then on hover around, does nothing. It's forgettable. This is just tidy it up on hover around. I need to do the same thing. I'm going to say, start and animation. I'm don't want it to do COD grow because they'll just do it twice. I'm not even sure what happened there. Let's add another animation called card and grow. Very clever, Dan. And I'm going to say with the thing I want to do it too. I'm going to add plus and I would like to scale it to back to one. It started at one. Some of them are zero. It's confusing. Okay. This one started at once. I want to get back to one and I can just leave it like this. I had to say actually, number one. And that's it. I don't have to sit the initial status kinda say go back to one please, on rollover, save it, Let's preview it. Hover. Hover. Although it's cool. It's a bit slow. So it looks a look at the timing of that, but that's the basics of it. Okay. Let's make a couple of them. Let's go card thumbnail, copy, paste, paste, and go to preview this one. And this one does one. Alright, so let's do this, make it look pretty and that kind of darkness to it. So I'm working on this first one here. Okay. And let's look at the easing for COD grow. So when it's hovered, I'm going to do this one called Cargo. Okay, I've got this one selected and I would like the duration to be faster. Probably not. I just want the easing to be different. Ease in and out or some of these ones. I'll use quad, just the shape of the ys. They've got weird names. Names. Let's give it a preview. Alright. Yeah, this is where Dan spends way too long going play. I'll speed this up. Go kinda like that one. Went with in-out, caught. And the timing was okay. I need to do the same for the COD ungroup. Okay. I'm going to do the same one. Now the trick is when it's fading out, even if I do the same one, what was it? Okay and save it. And play it. Let's save and preview it. So I click out here command Shift P, Control Shift P. You will find that it takes too long, which you get a feel for it, like it comes out quite nice, but then it takes too long to go back. It is being my experience as a long-term animator. Okay. Average long term. And there is that the, if I click on the card and I go into my mouse over the like, whatever this is. The like the, the first instance, when it goes backwards and my costs to hover out. Okay, do it about half the time. If it takes 1 s to pop up, I find if it takes half a second to pop up, I reckon about a quarter of a second is generally a good rule for like how faucet should go back. But half the time it takes to get there feels kinda nice to go back. That's been anyway. That's that part. Let's do like an other part of an animation. Unlike the last video, we just got to be careful, but in here, we've got to add more stuff. So we're gonna get into that where it's edit its initial state. Okay, I would like it to be a little bit darker or transparent or something. So I'm going to hit plus, and there is a bunch of stuff you can do. There's a few more hidden under filter. Filter has this one here, down the bottom here I want to do something with filter. And you can take a blur. Brightness contrast is a bunch of stuff in here. Have a play around with them. Okay, What I'm gonna do, crease cow might be cool. And I see that a lot. I'm going to use just the brightness. And the brightness is weighed 200 per cent is twice as bright, hundred is regular, and you can go blow 100 and get darker. What I want, I'm probably going to go darker than I want just to make sure it's very visible in this video tutorial down to 50%. That's where I wanted to start. Because if I play it, it's doing it at the other end, the wrong side, it's getting darker as it comes out. So what I wanna do is say actually, this is my initial state. This is one of those times where on a tour of them scale just needed one because the initial state was already there. It's the right size. This one is not, the initial size needs to be darker, and now I can create another one, create a filter. I'll show you a little trick. I could go the long way which we did in the last video. Fill to go, find it, go edit, add the brightness and put it back to 100. Okay, and that works. But what I wanna do show you a little trick is this one here. You can right-click it and just duplicate it. The right one, not scale filter. Let's duplicate it. It's already unchecked that I'm not the initial state anymore. That's the initial state. Is there no settings? This one is unchecked and I've got a bunch of settings. And what I'm gonna do is get the brightness to go from there, backup to 100, which is just standard. Nothing really applied. Save it. Let's preview it. They're going to be problems. So they look good. Oh, does not work. If fade it in, took forever, it's two things wrong with it. Let's go for the size thing. Watch. What's happening. Why is it taking so long? Any ideas? Everything, have a little pause here, will think, why is it taking forever to load up, let's reset it and give it a bit of a taste. Those dark, then that's it. It's fading in and then getting bigger, we need to fix that. So you click on the outside parent, you say cod grow. You can see them. There's a little gap in between. I wanted to do these things at the same time, getting the same group Guys come on, There, we go. Now go to Preview. All look at that. That's half our problem. Let's do this other one. Why? Is it not going back to the dark color? You might like it like this. It might be the great, That might be the great design effect that you like. But let's say I do want it to go back. What do we do? You got it. So my ungroup needs to do it as well because we at the moment outgrow has got these extra bits. Okay, It's got the scale and the filter, but my unknown grow or any has the scale. I'm gonna do the same thing here from wherever it is now, which is 100% brightness. I'd like to do another one for filter. Down the bottom here. I'd like it to be brightness. And who remembers how dark I made it? I can't remember. It was about 50%, right? I should go and check. I'm going to, let's all because it was it's kinda started life at 100. Okay. From my roll-over or my growing. And now I'm saying Go back to 50. They'll be awesome. After this much time. Timing wise, it will have to test it. I know it says about core. I always say about quarter of the time. That's generally for movement in scale, sometimes with capacity and brightness. It's not as it's a little bit more of kind of checking it. Let's save it. Let's have a look. Hubba. Hubba. Yeah. I think, I think it's fine. It's pretty cool though. I love it. Alright, so it could have been a symbol already. I can turn it into a symbol now by right-clicking it and saying, well, let's do it here. We could go create new symbol from it and give it a name to reuse it. But I've already got that one from earlier and I don't want to confuse it. And also actually one other thing I want to show you is got the parents selected, go into it. And I'm going to say, let's go into it if you do find funny trouble, okay. It can be often this one, who does this affect indirection trigger is working for R1, working perfectly. Whoever triggers it, k, whatever the action trigger is, which is the wrapper on the outside has gone to these things is going to apply to it. You might find that actually you just want it to do it to the selected elements. Not all of them. Okay? Sometimes class works. I want this to apply to all the classes. Okay, so let's go to, let's do that. This is not going to be a stage where this works for you. But at the moment, have a little look. If I hover above it, can you see they're all doing it though, at least the grow in k happens to all classes. I don't want it in this case, there might be a chance we, you do. So if there is a zero point we like, man, it's not doing what I want. Have a play around with these through these three. Just the one I've got selected and doesn't apply. That effect doesn't play any of the other ones or apply to them all at the same time. Or this one here with it triggers it. Do these things. Anyway. Alright, that is it. That is our image fading in and getting bigger on rollover in Webflow with Dan. Alright, that is it. I will see you in the next video. 73. Parallax Background Scroll Image Move in Webflow: Hi everyone. In this video, we're going to make this like parallax scroll things. I'm scrolling up and down and look, it looks like it's kinda got some dip the front ones out of focus. I'm going to show you how to do this. It's called parallax. It's gonna be a fun one because it's kinda tied together, not only the animation skills that we've learned in the last few videos, but also some of the other skills that we've learned throughout the course. We're gonna look at positioning and overflow and Z index and other things. All that previous knowledge is going to allow us to do this relatively easily. Alright, let's jump in. Let me show you how to do it. Alright, first up, I have made a new page just to keep everything separate. I've added a nav because I feel like a page needs an EV. And they're also helps gives us some sort of context of where we're scrolling in the page. So to get this to work, we're going to add our section, okay, I'm going to give this section on name. I'm going to call it section clouds. I'm gonna give it a height. I am not going to give it a height. Can leave it as is. It's at a container. And then while we could do it to the container, it is better to put a div inside of it and add all our animation to that. Let's get our div a name so we can easily find it again, clinical div clouds. Alright, let's add our different elements in your assets panel. I've actually imported mine already, but you will find in your portfolio exercise files, there's one called Cloud front and back. Bring both of those in, and then bring both of those in. Okay. So there's one other guy there, he is there. So there are SVGs, which is kind of good. Well, it's great. The comment really big size though. By default, images, can you see 100% the width that they can be in? Because in SVG can be any size or likes it just massive. So it's gonna scroll. Drag it down to an appropriate size. How big is appropriate? I'm just, I made this an Illustrator, found some clouds style, then exported them as SVGs for you guys, so you can use anything. Next thing I need is that bit of text. I could have exported it here. Okay, I did, but then I thought actually it's better to have editable text. You can change it and it's not like fixed forever. So let's add that. So I'm going to go you textblock, had you in any way. And I'm gonna go and style it. I'm going to speed this up because we've styled texts loads and give it a class and I'm actually before you go. So there's gonna be my text, the clouds, and I'm gonna go and style it. You wait there. Okay, so what do we do now? And we have two, this has to be on that. It doesn't work. How do I get that on top of that? Because that's what I want, right. I want this to be on top of it. How do we do it? Do you remember you've done it before? Paula's, you get a gold stay if you can remember at least the term even number, you don't even have to know where it is, alright, if you remembered, it is this person here needs to have positioned, set to absolute, then I get to move it around. What I will do though is I'll give it a class name or we can do afterwards. If you say position absolute gives it a classical image. I'm going to call this one image clouds front. Excellent. Okay, he's positioned absolute so I can move them around. What's one thing I need to remember the remember Dan said something about when we did absolute, there was something else to remember. If you remember the moment it's using the body. Okay, and that's fine. As long as you don't add anything above these clouds, otherwise, it'll record all. So what you say is the parent, which is my case, the div clouds you, I said to relative. Okay, now this person is relative to that wrapper. That reference always going to come along, so it's nice and useful. Now we can just mess around with this to get it in the right position. Now, don't spend too long here getting it perfect because there is such a test repeat chick thing when you are doing this and just get them roughly, we need them to be in the roughly the right size, do some experimentation and then adjust afterwards. He's gonna be there. I'm not going to move this one. I could, I'm going to have a background, a middle ground, and a foreground. The middle ground generally is don't touch. That's how he becomes a middle ground. So this one here though, I'm going to do the same thing at a class name, image, Cloud, Beck. Click. Okay, and I'm going to say you are a position of absolute kind of Rix my text a bit. Okay, I'm going to pull it down a little bit. My text I could make absolute as well, or I could just add some padding to it up to you what you wanna do. Um, it's kinda, kinda like push it down from the top, would go. It doesn't matter in this instance, Qu, roughly something like this. Alright, if you got everything, everybody has got a className, which is one of the rows. It needs to be inside a container that we can use because in, because in previous ones we added the animation to each of these. What we're gonna do is add it to the parents now, okay, so we're gonna go select the parent which is called def clouds. I'm going to say in directions, I want to element trigger. The one I want is the one that says, while scrolling in the view, that's pretty cool. While you're scrolling in the view, please. Can you do something for me? Okay, The trouble with it though, there's no scrolling at the moment. If I preview, I can't scroll anything because there's no, It's not long enough. So what we're gonna do is just fake it for the moment. Okay, I'll show you how to get it to work when it's like up here. But for the moment, I'll just push it down. So they've clouds and say div clouds are going to have a chunk of margin. Okay? It's off screen at the bottom and add a chunk, not negatives and positives so that I can scroll past this thing to make it look cool. When you're working on your own site, you will have more content to scroll past with faking it at the moment with giant mitogens scrolling. Great. So did clouds and directions already started making sing that said while scrolling, or we're gonna do on the scroll, we're gonna do an action of select action. We don't have anything. Okay, so we go to create one custom animation. Ignore this, but for the moment boundaries we're going to look at. That's not meant to be there. I've recorded this video about three times now, trying to make it simple. It is not simple. So this is the simple one. It's going pretty good. I got stuck off on tangents to make it look awesome. He's going to make it look, okay, good. The principle across. You also have nothing. So we're going to say, we're going to add one. I'm going to give it a name. I'm going to call this one Cloud scroll. Excellent. And what's going to happen is there's a 0% and 100%. What ends up happening is the animation will start up here when 0% means just when I see where you're just before it comes on screen that's here. And when it gets past this box, jaws post here. Okay, that is where 100% finishes. If you don't understand, let's do it. Okay, So it means that if I have, if I want these clouds to move, ok. Now we go away from the whole thing. We say I want this cloud here to have an action. It's gonna be all move at 0%, which is all the way here. Where is it? I would like it to be down. The ones that are closest to you should start down. Okay, I'm gonna move mine down a bit. How far today you're going to taste it. There's gonna be down and then at 100% down hands already given me one, I want it to be up. And if you move it quite far, it gives the right kind of dip in front. It's probably moving faster across the camera. Well, if they can release Co, let's give it a test. You can preview it in here. So click on this. So when it's just coming in screen, It's wherever I put it is. We can't really see it. So it doesn't really matter where you put it at 0%, just needs to be down close to where you want it to be because it can't even see it. But eventually when it gets through the scroll, I can see 35, 35, 31% of it. Can you see it's coming past. Now. It's working, can see it's quite jumping. It's funny at my scroll wheel. Okay, I've got a mouse. I use a Logitech scroll wheel. I love it most of the time, right? In this instance though, it does these jumps and it looks gross. My track pad on my Mac though, look at this St. I've done nothing else other than my trackpad. It looks nice. Look at that and look at my scroll wheel. Baba, baba uses a bit jumpy. That's gonna be true when people are actually using your site as well. So it's a little bit of a bummer. Sometimes it doesn't look as pretty on some people's computers, but my track pad, nice. So that is kind of it, right? We're going to do more. But you've basically got it. This is closer, so it starts down and moves to the top. Let's do the background. We leave this guy because he's the middle ground. He looks like he's doing something even though he's not doing a whole lot. This one because it's going to be further back, which it's not currently. Do we fix that first? Yeah, let's fix that first. This is on top of this image. Who remembers how I got things on top of each other? You remember there's a z-index. So let's do this. So this image Cloud back, make sure it's got to come out of this, save it, go back to my styles. Okay, It's nothing to do with the animation. I'm going to click on this guy here, image called Beck. He's already absolute, which gives me access to the z-index. So I'm going to say you are 11. This one here takes Cloud. I can't see this index. So I'm going to use the relative because relative just means it kind of gives you these options. But he holds his space, holds his place in the code. And I'm going to say you want to, which is above that one. This guy here, he can already see the Z index because we made them absolute. He's gonna be three. Alright, there's my layering. Now this person, where does the Cloud back? Let's get him to animate. So if I have him selected and I go in here, There's nothing like it's because maybe the parent starts, he's the trigger. He's kinda kinda controls everything. Then when you go inside of Cloud scroll. Okay, now we can look at the individual parts now, this person or as my tics cloud and this one here, it was easier to select them over here in the navigator. I'm going to add him, going to have to move it 0% where I want them to be. If you want them to look like he's in the background, you start them up top and move them to the bottom. Whereas this guy, you started lower and moved them up. This is the opposite. So I'm gonna say You kind of a bit higher and just doesn't go through so much of emotion. This needs to move fast and it looks like it's close. This needs to look slow, fits in the back. A lot of testing. So there he is. I'm going to add another one of these at the back. It didn't automatically give it to me. So I'm going to say plus at a move because I had that selected, it's got Cloud back. Okay. And I'm gonna move it to me coming down. So number where is it, front or back at the top? He's a bit higher and we needed the bottom. He's a bit lower. Is this going to work? Let's give it a go. Let's turn live preview on. Maybe don't use that mouse pad, mouse tracker. They're looking, they're all got different timing, parallax done. We're gonna do some other things just to tidy it up, but you can go to town with us with your z-index. You might end up with ten different layers. And you'll have ten different things in here. And the things that are further back need to move slower and move from the top down. And the things that are at front need to move faster at all different speeds by speeds amine, this one here at the front starts here and ends up there. If you want something to be closer to the screen and phosphate, it just needs to end higher up. It'd be moving faster in the z and x needs to be higher. How are we feeling about that? Okay, It's not previewing two in preview on using the scroll wheel and use my left hand. It's pretty cool. This is a preview mode because it gets rid of the boxes. Hey, parallax is awesome. My problem. I'm going to show you some examples of the India. But like I know it feels like everyone's just discovered this and I love subtle ones like this. There's something moving, but the parallax ones where it's like, I don't even know to click on things, a scroll around and it's very confusing. People can go a little bit nuts with parallax if you're allowed to, like when you learn Lynn sphere in Photoshop and you just put lens flares on everything. It's okay. You can make everything parallax, but know that after a while, make sure you do some user testing to make sure people can actually operate. Your site is not like My God was happening. Everything is perplexing. Alright, let's do a little bit more. I just want to kind of, I don't know if you're with me and you're like, That seemed to make sense and you've practiced it. Pause now, go practice it. The video a few times. It takes a little while. I want you to be happy. High-five. High-five. Okay. Let's go further because you're probably going to have some other questions and some other things I want to show you, but I want to feel like a full stop. We're done. There was good it worked. Let's look at some other things. You can do some cool things with physical had to edit it. So you've got to remember you when you're out here, you're going to go to the div clouds. You can see the little guy, the little lightning bolt to get into it, otherwise you can't find it. Okay. The page triggers are easier to find when I'm in here. We're ignoring all of this and that is the bit we named go inside of it. And now we're kind of at the animation part. What we might do as well to help, help with the depth is you can play around with. So out of animation, we're not doing animation at the moment. We're just going to say way back here in my styles. I'm actually this front cloud. I'm going to pretend there's a bit of out-of-focus depth of field. I'm going to say you have an effect of some filters and one of them in here is blue. So I can turn it down. The trick is you get what I'm trying to do. I'm trying to like, make it out-of-focus. It's probably better when you've got a few more elements and then running got a couple. But yeah, it looks kinda co then trigger this one's okay. Does it looks like it's maybe poor-quality. I want to be obviously blurry without it being like crazy blur. You can play around with these two. Two's good for me. And it just means when I preview, it kinda feels like it's kind of out-of-focus. Some bits are in-focus. Can you see it's kinda fuzzy around the outside. Do you like that? You can look up. Other things I want to show you. Now we don't in this case, but you might want to set the div clouds to be made, but not in the animation. And here we can set the overflow to hidden so that you can only see stuff within here. You can play with how big this is. You might just need to clip it in because let's say that big clouds cool, but it's, you've got a portion underneath here. Another section that doesn't need to be affected because it's covering everything. You can lock it into a bit of a boundary like mine. The scroll wheel doesn't really work, but my trackpad does. It's beautiful. How to make it more beautiful? Smoothing, smoothing, I think is on by default. Now let's have a look. Click on the parent div. Let's grab the animation. Let's go in here. So smooth things on. Now it's on 50% with it off, Let's turn it fully on. Actually this best probably example. And fully ons not probably what we want, but it gives us an example. Can you see everything is so slowed down? Watch this. If I scroll past. Can you see if I scroll really fast? Nothing really happens until which says if I scroll here, it takes ages to catch up. Okay, That's the smoothing or when it's on a little bit, it just gives a bit more realism, like it's not mechanical. I can go. Can you see it slowly catches up? Where if I have it on zero, it will just be very mechanical and we'll just be wherever I am much. So there's no damping. Damping is the way I want. Okay. They call it smoothing. What is good? Anything is good. I have a play around somewhere, kind of in that top chunk. The top 70% ish looks quite nice. What is it kinda jump? It's because nobody loads a website halfway down. You normally load a website here. So it's jumping to do preview mode. And it's how are used to get the clouds where they need to be. Does that make sense? Nobody will see that jump. I'm gonna get rid of my other thing. We're gonna do the last thing. How do I get it to work when it's all the way at the top. So let's do that now let's break it. So let's go to def clouds. Let's remove the margin. We still need a margin at the bottom because if we can't scroll, we can't make the scroll animation work and it kinda works, right? Can you see here, let's go to my works. And what you could do here is forget this next bit and just go through and mess with your animation and just play around in here till you get the front and back moved into the right places. Or what you can do is they allow you to do this one here, animation boundaries. So you can click any one of these. And what it does is it says, start the animation, zeros end in the animations 100%. Let's quickly check out what they mean by that. So that's this, that talking about at this space versus this space, what do we do? So it says at that zero per cent, apply it when you start entering, which doesn't work because it worked before because we started entering, we scroll down. It's already there, it's fully visible. It's fully visible. I start the animation when it's fully visible. Now this one got me and you're like, Oh, I'm going to switch the envenomation to be stopped when it's exiting. Know, we're going to not stop when it's exiting because it's going to exit straightaway. What's going to be 100% complete when it starts exiting. Sorry, I was confused to just leave it on this one. Can you see it says invisible. That's my I don't know. I don't want to call it but I didn't read it. Stopped when it's fully visible, which it is, and I want it to be in the animation, get to the 100% point when it's fully invisible. Invisible, which means, let's have a look. Fully invisible means when it's completely out, you go, Let's go to my nice scroll. Here we go. We've got it at the top there as well. Okay. So the only other thing, I'm not gonna go into it too much, but in here, you can play with the offset. The offset it just means like this thing here is actually fully visible, but it's already fully visible for quite a bit. Like there's a chunk already at the top gone. The same with when it's fully invisible. Okay, you might decide that you wanted to finish just a little bit before. It's fully invisible. And you can see that offset at different percentages. Have a play around with that. It's getting pretty nerdy, but you'll get most of what you need without any of that. But you may need to tinker with the offset, just drag it to the present St. 80% to see what the results are. You get a sense for how it works or ignore it and just play around in here. What I end up doing is just spending more time in here playing around with the different timings of where it actually is, the front. Now, when it's ended, what if it looks like here? And then just go and preview what it looks like here. Preview what it looks like. It's over here. Preview. That's, I find more useful. Again if you undo, okay, after you've been dragging these thing, if I drag it somehow counted all of those little steps like there's like 1,000 little undoes. I'm just going to set it to, I'm just going to drag it back. We can probably rectum. Alright, that is it. That is parallax. Last little preview. Using my scroll bar, using my trackpad. I like it too. That's the fundamentals. We've got different layers, different SI indexes, and we've played around with Al. And what do we do? We did an element trigger. It is while scrolling interview and we edit our animation. You can now with those tools go and apply it to other things. So to get good examples of other people's ones, workflow has a cool thing called Made in Webflow. And you can type in parallax. Parallax can't spell any other way, but parallax, that's the word you want. And go ahead and look at other people's examples. Okay, so let's have a look at open a few of these. There's just amazing examples in here, okay? And they kind of take what we've done plus add more plus M0 plus eight more. Okay, Now hopefully you got some of the tools to be able to follow those sorts of tutorials. Hall, this is a mouse one. I love it. So we look at another one. This one here. I love this one. Look the clouds moving. And it's got parallax. Parallax and moving clouds double. So because this one, oh, 3D and the parallax as well. Because the roads can be levels. There are super cool. When you do this one with us, Dan. The course is already so far and it's these angels. I think we've done loads. Anyway. Now you should have some of the skills to be able to build some of this stuff by following other tutorials. It's been fun, especially this one we've tied in things like overflow. We've tied in things like, remember we did position relative position, absolute z-index is all sorts of cool stuff to make this parallax work. Alright, that is it, parallax in Webflow over see in the next video. 74. Is Webflow Good For SEO: Hello there, I am out of the screen recorder in real life. Real life. In this video we're going to talk about, is Webflow good for SEO? And this video as well, we'll talk about what SEO is kind of more what on pages and what you're responsible for as a workflow designer? This is off-page. And who's responsible for that? Yeah, Let's do both of those. So is a good for SEO. I'm really surprised. I'm reasonably proficient ACO person, so my full-time job, but I've built a couple of businesses around. Yeah. Basically about ranking really well on search engines. Okay, So yeah, I was surprised when I first got into Webflow and how much they've developed since they've started it on what you can do as is the anomaly, this just kinda basic stuff. But it is if you are reasonably experienced and search engine optimization, or you want to get better at it and you want to make sure workflows capable of it. It's surprising the depth they allow you to do. I was surprised, so yes, it is good. We will show you in the next few videos, like some of the basic on-page stuff, but yeah, no that from me at least I'm particularly impressed by the SEO abilities of workflow. First up, let's talk about on-page and off-page SEO. Seo, search engine optimization. You probably know what it is just, well, your website rank in search engines. We need to optimize for that. Okay, and there's kinda two parts to it. There's on-page and off-page. As a website designer using Webflow, you are wholly responsible for the on-page SEO can and should be part of your work as you're working on your site. The off-page is something you might do, but often it's down to the client. The difference is is on pages, stuff that's on the page, we're going to look at things like Meta titles, keywords, alt-text, stuff that is relatively easy to do. And then the off-page stuff is things like linking to your site. I asked you, I think earlier in the course like, hey, if you like this course, link to my Webflow course, because those ones are tricky to get, really hard to get, but are really valuable for our portfolio. If somebody links to it from another site, from somebody else's blog or another trusted website that says, Hey, this guy is really good at UX design. Go check them out and there's a link to that site that is amazing, off-page. So somebody else off your website is linked to you. That is one instance of off-page SEO. There's a lot more, okay, and it's a big worm hole, black hole, one of the holes to to explore. And that should be one of the things you do after you get your workflow skills up, got your on-page Galen. K is to explore off-page SEO. And yeah, it's kinda like top things you can do, but it is quite, Yeah, it's super valuable for making a site work, but there's potentially a lot to it. I love it. I'm going to do a whole course on off-page SEO. I do it all the time from my stuff to rank wells that you found it? Yeah. On-page off-page SEO we're gonna do on you need to go and do off-page is just get on with it and I'll show you where it is and where it has to do in all workflow. 75. Meta Description Title Tags Robots & Sitemap Explained Webflow: Hi everyone. This video we're going to cover some just high-level SEO for the site, okay, just a couple of things you should do. And we'll also look at SEO title tags and Meta descriptions for your pages. Alright, let's start with the sitewide SEO. So we're gonna go to every website you can go to your project settings has like a global kind of overall website SEO tab. The one thing we will cover here is this one here. Reasonably important. Basically, the moment we're on this member who on this kind of development website, like a staging website before it gets its own domain name. What can happen is Google or Yahoo or Bing or whatever other search engine can come along and actually indexes site and potentially rank it. The trouble of it now, is it still in bits? It's not ready for prime time and I don't want Google thinking this is the domain name. So when I released the other version, it's going to see two versions of it, and this is the original. So what you can do is actually say Disable. And they say workflows, subdomains. So Webflow give us this website, the domain, we, the sub-domain of that. So you can just say Google, don't check this site blocker please. And it adds a bit of stuff to the website to say, Don't come in here. It can be ignored though, by Google might still call it, but they're not going to add you to the search engine rankings. When you get your full domain. It doesn't matter. You can leave this on and leave it off. It's just not going to allow this kinda like development site gets searched. That's what this robot thing is for. It's going to automatically create a robots.txt and to say User-Agent, Google does allow come into my site. It can, but it's just handy because you don't want to rank, I guess, the site and then compete with it when it goes out to its great URL in the future, I'll run here, wasn't gonna go through too much of it. Let's do one more. Turn this on, okay, just generates a sitemap to make it clear at the moment, and your site is quite small. So search engine like Google will come and be able to index it pretty quickly by index and mean, like crawl through it and check it out and decide what's on what pages, what's important, what it's all about. Okay, you can make it easier for it by generating a sitemap. These become more and more important when the site gets massive, okay? And you can make sure that the search engines know where everything is and how they're all interconnected. But at the moment, an automatic sitemap is perfect. Plus there's a lot of like online checklists to say, is my website good? And it will say you didn't have a sitemap. You can just click it on and say, now I do. Alright, so that's kind of an overall for the page. Let's get into more page specific stuff. So go back to designer. Alright, so every page has some Meta information that you need to add so that it can be all it can be when it's ranking in search engines like Google. So we need to go up to here to our pages or this one. You can go to both. Anyway. We're gonna do it to the homepage first and hit this little cog. This name at the top. You don't need to worry about this is just how you reference it inside of Webflow. The important one is this one here, SEO Settings, there's a title tags and Meta description. These are super important because if you don't have them on your page, you're unlikely to rank it all. And once you've filled them out, It's not like it's gonna be like, absolutely, you're going to start ranking number one, but it's one of those things where you can rank number 1000000th. If you don't put them in, what do they do? You'll see a kind of a search result up here. They actually appear in Google search rankings. So let's have a look. Say I'm trying to, I'm trying to, I'm trying to rank for this. This is what people will search in Google and this is what I want to appear. So I want this to be on my homepage is my most important set of keywords. It's local to me and it's the thing that I might be doing. I'm going to add my name. Okay? Because somebody might be searching for my name as well because of my portfolio. I might've seen it out as they took out my portfolio. I want my name to ring as well. Can you see there? That's what our peers. I've done a search here in Google, okay, for web design limerick, There is some maps. So I might want to go and make sure that my office has a specific spot. Make sure my office is actually registered in Google business, okay, and you see down here all these results. These people can you see a kind of web design, web design limerick, WebAssign limerick. But design limerick, can you see how important that title tag is? Like this one, web design Ireland, okay? All safe and best companies in limerick. So that is the title tag that you need to be unique for every page. So if I move on to say my portfolio for the ADEA kayak club, I'd call it the ADEA kayak web design project in limerick. So it's unique, but it has my keywords in there as well. So it can be tricky if you've got hundreds of pages, but it's super important because there's no point having this on every page. It's not going to make your site more web design limerick, the search engines just don't know what's on that page or unique. So I might have pages where it's UX, UI, or graphic design. So that the general sense is that it's all about design. And it's all about limerick. Maybe I have a couple of different areas. I'm in the county of limerick, but I'm in a different town, maybe a village. Okay. So that's the title. You can see it there. The description is just as important. Is this chunk down the bottom here, it gets clipped off so you can only have a certain amount of characters. Can't remember exactly what it was. Does it tell you, does the length 155-300, it decides you can't decide how much it cuts off. Just it just cuts it off if it needs to. So here's a bit of a longer description. So again, I find, you can find this tough when you're at the beginning. Just go and have a look, type in the keywords that you, you know, if it's an industry that you're not part of and you're in charge of this. Go out, do a search, and then see what other people are doing. Okay, How does it can you see we've designed limerick also appears in the description, so make sure it repeats in it. But this is more of the cell. This is gets people like high up. This is where I need to be. And this is where people confirm IS exactly what I'm looking for. I need an e-commerce website or a windfall a bit website. So do go and have a look, especially if it's an industry like, it's easier for me because I'm into web design. But if I was doing a website for cheese factory, just going to be tricky. You have to go search for cheese factory stuff and help with emitted descriptions. Now, even though, let's say I was doing it for the cheese factory, I'd go out to them and say, Okay, I need descriptions of these main pages. Might be the five high-level pages, and I need them to write it. Given the keywords that I need. They need to be unique or the length that I need and I get them to write it, maybe send them an article of how to write a good meta description, or I can write it because this is just some clients we like. I'm just going to write this a dad's website. I'm gonna write that myself. Okay, so write that out, make sure there's good keywords in there. Down here. Search engines or this one down here, you can like you can just use the same SEO title tag and description has ACO, this open graph stuff is what appears in things like Facebook and Twitter. Have you seen them? And there's a link to a website, it'll pull it up. They call it Open Graph or is this kind of Meta title and Meta description makes you a unique on every single page you do. If you are writing blog posts, make sure that it's a snippet from it. It can be a snippet from it. That's fine. One was a unique as long as it's all about your title tag and your meta-description. Alright, I'm gonna save it and close EBIT, right, that is Meta title and Meta description. Make sure it goes on every page. 76. What is Image Alt Text in webflow: Hi everyone. In this video we're gonna talk about SEO for images. Okay, it's called alt text. Takes it you can add to help describe the image. Search engines like it. We'll discuss decorative text as well. Plus, can you add alt text to background images? Now you can, there's kind of a way around it. Alright, let's talk about what it is, what you should put in there, alright, alt text, you edit two images. Why do you edit image? Is they call it alt because it's alternative text. It's what will load, what will display here? The image doesn't load, okay, that is the alternative text, so we call it alt-text. More importantly, it is for people who can't see the image. They've got screen readers and it will read them to them. It can read this really easy. It says it'll say hitting is, I'm Daniel, full-service UX and web developer designer. Even better, we'll get to here and go circle. It won't know what's in it. Okay, so what we need to do to help those people, and also for search engines, search engines wants to know that a your site is accessible for people that are visually impaired. And also it gives them a hint to what the site's about. If this is the only text on the page which it is right now. Okay, it's going well, what else is about this page? And if this is designer working at lepto, okay, it helps with the hole for the browser to know what this page is about. So to edit, you select it here in the images, or you can do it in your assets panel. You can see there's the same image. Can go to the COG and I can add my text here, or I can do it over here. A very similar way. You can say use it from the acid or I can add my own custom one here. Can you just write it in a good way to know what to write? Don't just definitely put some keywords in here, like there's no harm. I'm a designer. That's what me. I'm designer working at laptop might have to say wearing costume. Wearing a costume. Yeah. It'll help describe it like the way I do it is the best method is close your eyes and try and describe it to somebody described you can see it. Close her eyes and then try and describe it out loud to yourself what it is. There's Daniel Scott working and laptop. I'm doing it. Close my eyes. He is working at a Mac laptop wearing a caterpillar costume with rainbows. That is useful alt-text because it's kinda help the people understand what's going on in the site. It may make you wonder why. Maybe it's not really appropriate to wear that costume. That could be totally right, but we do it because it helps the visually impaired. Google likes to help the visually impaired and we want to rank well. So just make sure there are keywords. Not everything don't right? Limerick, don't write web design. Maybe it can be designed in a web designing on a laptop. Yeah, it gets a bit tricky when you're onto your 50th image, but don't skip any images, go through, add alt text to the mall. There is one time where let's have a look and you don't have to do it if it doesn't bring any value to the screen reader. Let's have a little look. We've got animation taste. It's not in this one. You right there. Alright, this image here does this image by discussing what it is and what it does. Why is what it looks like? Orange blurry cloud. Is that going to add to the value of the site or is it just there for decoration? The clouds, a bit of an ion because it's kind of a cloud and I can explain it. It's very easy to explain. But let's say it's just a big star graphic, just some kinda swish or something. What you can do is say, actually this is just decorative, okay? It just means that you can see has limited informational value. It just means that it can get skipped. Just be described as like a decorative image without having to go like it is an orange cloud, like the explaining it all what it is to somebody who's getting paid. It's not going to add to the site, help explain it. And clearly clouds and how can I help my web design business rank well, Cloud-based web design, or maybe it does, but that's the alternative. You can either write it in a proper description either on the asset or drop, write it in yourself actually on the page, or just mark it as decorative. And again, go through and do on every single image I do it while I'm adding it. Because otherwise, if you wait to the end, you just don't do it. One question I get a lot is due. I don't two background images. Can you even do it a background images? You cannot say this one. He is actually a background element to where is it? Um, I can't remember. Was it a hero section? It was background there it is there. It's not something you can go and add alt text too, knocking the screen redefined, it just kinda skips over it. If you sit and lots of them as background, let's say over here, let's say you went for this. We added this as an image on purpose because I want this to have good Alt text. I'm going to go through and add great old text explaining what it is because I wanted it to be part of the structure of the website. I want people to be able to be read it through this screen readers. And I want Google to see, like all these images or relating to design, this website must be about design. So if you have set this as a background graphic here because it makes it easier for this to put over the top. It's tricky. And the other way round, if you do want something that's a background image, but you want it to be read by the screen reader and by the search engines, you can do this thing where it's actually a thing and you absolutely positioned stuff on top. You got to make a choice of how important these images are to search rankings. Many of them you have because in this case, I've kind of set it up as a symbol so I can do the hard work of getting this to be over the top and I can crop it. But we learn how to crop images because I want this to rank and be in the flow of text and not hidden as a background image. Alright, that is alt text for images. 77. SEO Keywords in Headings & URLs in Webflow: Hello. This video we are going to talk about keywords in SEO. I'll show you where they need to go and some tools on how to pick good ones. Alright, let's jump in. Okay, so where did they go? It's easy in the headings, okay, you need good keywords in there. But on the actual page, browsers and other good place, actually just keyword knowledge is super useful to put it in your old texts, just making sure you're using the right words and finding other words that you could use because you might get sick of web design limerick, okay, So pages, and let's look at what we've got. Contact us. It's tricky one, It's nothing much more than Contact Us page, but these other pages, I can look at a good keywords. The first one is I've got this kinda like subfolder called portfolio. Portfolio is an okay name for it. Remember, this is gonna be Dan's amazing website.com slash portfolio slash. In this case, we've designed a day a kayak club portfolio might be okay. Is somebody going to be searching for web design portfolio? Maybe. Okay. I think I like the idea of the slug K, because this is what happens. This is the name that Webflow users. So it doesn't really matter. This is what will go out onto the Internet and what Google will use to help understand your website. So what's in this folder? I'm going to say Website design. That is going to be the URL there. And then it's going to have whatever other pages are after that. So that's a good place to put keywords. It is wanting me to say that if this is published and people are linking to it and I go and change it, It's going to break the links. It's okay at this stage because nobody is linking to the site. I'm not linking to it. Nobody else's. So it's easy to change, save it. Let's have a look at the other ones. So let's look at these pages here. Actually, let's go into the page and go to the cog. So again, this is the slug k, So this is the page name within workflow. This thing here is where good keywords can go. Can you see it's under web design? And then I'm repeating myself, we've designed, so maybe I shouldn't do that. And that, although that's what the site is about, It's not particularly good. People aren't going to be searching for a day kayaks. I don't want to rank for a day kayaks. I don't want somebody looking to go kayaking to come find me. So that's probably too long. But something like that is a lot more useful in helping describe what I'm doing here. I'm not making a club for a deer kx, or at least I'm not a place to go kayaking, but I'm definitely a place for small businesses and limerick to get web design done, I probably need to cut a couple of words that are there. It seems pretty long, but knowing what q is go into here, also into the title tag and description can be tricky. So what do you get keyword information from? I'll show you what I do. I use the pay service. You might be able to find free ones. I know that especially like this one here, SEM rush, you can do a seven-day trial. So you might just have a small project, just use the trial and then quit out of it. But for long term web design, you're going to need something like this. There's a link on the screen here. If you do want to sign up to ACM rush, it's the one I love. It's an affiliate link, so I do get a commission if you do sign up also put the link in the class projects right down the bottom there. What it's useful for, amongst other things, is keyword finding. So when I'm writing this course, we're okay for Webflow. I'm always hoping in when I'm deciding what to call the website, I'm thinking I'm going to call it Webflow. And let's say I've got a video that I want to make about images, about background images. So I'll just type it into something like this. And I have a little look. And I could call it background images. But can you see here background image doesn't know it, that's it. It's got 3D views, 30 searches per month, which doesn't sound very high, but it kind of is for these kind of like obscure blood flow by itself is not obscure, but if it's not a car insurance or anything like that. But you can see here if I name this thing called How to add background image to blood flow, there is not quite double the amount of search volume. So I'm also call it this. If I'm just looking for suggestions about remember our cheese factory, you can start typing in keywords in here and getting ideas of what people are searching for because there's no point putting it in something that is wrong, that people just aren't searching for. It might be just the way you call it. I call are sitting room at the lounge. My wife and kids don't know what I'm talking about. The lounge. You mean the sitting room like yeah. So if I'm doing renovations here in Ireland, I'm not going to call it the lounge. And also tells me cool things like about this is it's easy to rank for this way because there's not a lot of competition out there, just other super useful stuff. So I really enjoy something like this and it really helps me when I am making pages to get all the right language right and get the right keywords. First, since I'm making a lot of Adobe Photoshop courses is one of the things I do. Let's do Photoshop Training. Because when I started, that's what I was calling it because that's what I did and that's what I put on my pages. You're like, Great, Shake it out. All right, for the Photoshop Training, hundred and 70 people searching for it. Cool. Let's have a look. When I finally compared Adobe Photoshop courses will cause boom. People use the word cost way more than training. But if I do say my InDesign course and versus InDesign training, they're basically the same. Some of them flip. Some of them are more likely to use training than courses. Weird stuff that you can find out through tools like this. And it's amazing when you can go to a client and start understanding this stuff and help them create the right pages for their site as well. They might be missing some great pages that help. They're really well searched and they should have a dedicated page on this site to explain it. Alright, so when you're working on your own project or clients, get an idea of what keywords you could use and make sure that you're using them throughout this site with your alt text, your title tags or meta descriptions and in the slugs for those URLs in the headings. And so that you're not reusing the same one over and over again, you using variations of them. That's what this is good for as well. All right, my friends, that is my rant about keywords. I loved the stuff. Alright, Onto the next video. 78. Can You Export Code Self Hosted Webflow: Hi everyone. This video we will discuss, can you export code from Webflow? You totally can, and it's really usable. It'll export all the files, the CSS, the JavaScript, everything. You need to make this work on your own host, or maybe to hand over to a developer who can take your website a bit further. Alright, let's jump in and take a look, alright, to x what the code is up here. There's a little export code. I've got my website open and the designer, I can export the code, give it a second and you'll be able to see the HTML and CSS depending on what you need to do, you might just copy the HTML and CSS and JavaScript out onto your own file. Okay, because it's all in there. The one thing though is that if you do not have an upgraded workspace account, you'll only see partial of this and you can't export it. I'll show you where that is in a second. But let's say we have got, I'm working in the core. They call it the core workspace. So one up from the bottom, I can prepare a zip, give it a sick download it. Alright, I've got a folder. I'm going to save the zip into it. Here's the zip file and there's the folder. And you'll see it's pretty nice. You can see all our pages is my homepage, which is the index page. You can see my contact us page, the animation we made error pages. And you can see maybe that sub-domain, while that folder we made used to be called portfolio, we changed in the last video to be web design. And there's those two ones. You'll notice that the drafts are in here as well. So something to be mindful of. Now you can copy and paste this whole thing to your own hosting server. Why would you do it? It is cheaper doing it on your own hosting server. The drawbacks are though, if you go in and open this in a text editor, say VS Code or Sublime or Dreamweaver and start editing it. You can't put it back into Webflow. It's a one-way street. But if the client comes back and wants a change, you can come back in here, make a change, and then export it again and upload it to your server as long as you're still paying for that workspace accounts that call one, I'll show you that in a sec. Now to go into a bit more detail, the trouble with this particular site. You can see it down here when it actually loads is gonna give you a warning. Okay, in this case, everything would work here except for the form on the contact us page. Webflow forms are kind of tricky to do online on your own. They seem simple, but there's a few checks and Malfoy noting that needs to go on. So you can see here, exports denote include native form functionality. You can use the form if you know how to set it up yourself. The bits that I've given you, or you could switch it out for something. There are other services like maybe MailChimp or other services that you can put onto the page. There might be a way, the big one will be if can you see it here? We're going to do CMS and e-commerce in the next sections of this course. But they will not work if you export the code and host them yourselves. There's a lot of checks and databases and validations that need to happen for make this stuff work. So for aesthetic site, perfect forms, we can get around that. But when we start doing things that are CMA spaced, like a blog with a client can upload it with a client or customer can start working on it. Or if you want to start working with e-commerce, you need to use the hosting from Webflow, the exploit code. Let's have a quick look. I'm going to jump back to my dashboard. So for me, I've got the core workspace. You might be on the Stata, which is the free one. You might have to upgrade to this core one. It means that if you're gonna do any sort of time in Webflow, you're going to need this one because you're going to need to have more than just two and hosted sites that you're working on potentially plus all the rest of it. And one of them is exporting code. Another good use for the export code option is even if you're not gonna be the person hosting it because you don't know what that does, how to do it. You might be working with a developer who does. So you can design a lot of the front end, including low, the JavaScript, actually making it living Webflow, do it for you. This would be something totally appropriate to then hand over to a developer to add that database or e-commerce functionality. It allows you to take on a lot more of the job. And if you're like me, you're OCD about getting everything to line up and being perfect and not just leaving it to somebody else to hopefully do good. You can do a lot of this front end work for the project and then hand this folder over to a developer. You will find Webflow specific developers out there as well. Now, that's become a bit of an industry where there are divs that will help people who are like me can do those front end stuff, but really don't know how to do the back-end database stuff and needs support because we want to take this design and do something that maybe with flow can't do just before we go. It's just interesting if you haven't had a look, you can see here we made it this div with the class applied to it called texts logo. That is, can we see it? As I've looked, this is nowhere is it. Let's look at this one. We've got an H1 called hero. There's a span tag in there. Let's have a look at the exploit code. Alright, let's have a look. There's my div for the nav and you can see opens their closes here. Okay, and then where's my hero? There it is there. That's my open and close of that heritage that I made opening closing. And inside of there is something called Who's my heating? There it is. There's my H1. It's got a bunch of other stuff on here as well. This is edited by Webflow. Basically they append everything append. That's at the beginning. I can ever remember. They put a W Hi fanon. That's something that you haven't made, that they've added to make this thing work. And there's my class that I made called hitting here. There it is. There's my text. I added this little span class. So it's interesting. Span class just spins that little thing called designer. It's still within the H1. Can you see? But it spins around designer and applies this class called secondary. If you know a bit of HTML and CSS, this is easy. If you're new to this, it is really interesting and to see how this all kind of lays out, and I wish I wrote is tidy. Html, is this. Look at it all so beautiful. Same with the CSS. You will see that there's a mixture of, see this one here, this checkbox. I didn't write that one because that's a W hyphen gay, but you'll find lots of stuff that you've written and edited. Okay. Let's have a look. There you go. I styled the paragraph and I did these things. I style my a, which is actually the old links. I made this thing called hero section and I made overflow visible. I'm not sure what I was doing there. Section nav is my section. Okay. For the nav and all I did was make it a background color of white, fff, have a little look through. Look, there's my button and all the code that I use to make it as awesome as it is, to have a little look at the export as well. Just it's interesting. So that's the homepage for 4.4. I want to just error pages. Look at the CSS, is broken it down nicely. That's the one I made. This is normalized, which just helps it work across different browsers really well. And that's the Webflow one that they wrote for us when we drag in a navigation and just magically works. It's because they've applied a bunch of classes to it to make it work and we didn't have to flow images. You can see all of the large, small, medium sizes is our lovely favicon. Javascript. Javascript is useful the front end and directions stuff. So any of the leg mobile nav, drop-down menu type things on that sort of interaction for the users is done with the JavaScript. And that's my subfolder. Alright, that is it, that is exporting code out of workflow. 79. What Are Read Only Links in Webflow For: Hi everyone. This video, we're going to look at this read-only shared link or share read-only link. Even you can create this copy. It seemed to people say, I need your help, they get a link, it's read-only. They have a full version of Webflow to work through. They can check your website, cheeky code, check what's going on, give you some feedback. Tell you what's wrong. Totally racket. Move it around, but it is read-only. So when they close this down, it's not going to break your original. That's why it's the read-only shared link. It's super nice. Yeah, Let me show you how to get it going and show you a little bit more detail about it. Did I just show you the whole thing in the intro? I think I just did. There's a tiny bit more to make this a little bit more to discuss, but yeah, there you go. You're welcome. Okay, So to get the link, you go up to here. So shared project and there's two num this year read-only link. Let's copy it. Let's have a little look at what gets made. I'm going to send this off to somebody else. Okay. So I'm pretending them someone else. I'm Jane. And Dan has sent me the read-only link because he needs some help. Okay. He's saying he's asking like, hey, see this image over here. I don't know how the rounded corners are being applied. I need to turn them off. Can you help Jane? And Jane gets this link? And can you see that we're actually in Webflow, which is cool. Jane doesn't need to be signed into Webflow or have an account. Okay, Jane can just go home. Let's have a look. I can do in preview mode off and look, it is full working version of workflow. The read-only just means if I make changes here, it's not going to update the original, which is super cool. Okay, I can go into here and say, all right, have a look what's going on. I can close all these down and say, what's blue? It's blue. Alright Dan, there's a class called image hero that you set the radius to 200, either reset dead or set it to 100. Okay, there's just no way of saving it, but it's a fully functioning version of workflow so people can help. You can ask on groups and forums, Webflow has one as well, okay, it's called discourse.workflow.com. Post in the comments of this video poster on any of the Bring Your Own Laptop groups. And while I can't get to them all myself, I have like hundreds of thousands of students now. The forums that groups The full of ego people who are both just learning and have been through the course. So in saying that as well, if you see a question that you think, I could probably work that out or it'd be fun to figure out, check out there, ask for the read-only link and have a look and see if you can help other people all help each other. Alright, that's it. Actually one of the places you can get to it via up here. You can also get it from your dashboard. You can go in here and say shear doesn't matter which way I turn the read-only link on shared, get help, help other people. It's a lovely world. Alright, that's it. I'll see you in the next video. 80. Style Manager & Cleaning Up Classes: Hi everyone. In this video, I'm going to show you how to tidy up all your classes, all the styles that you've made in this course, okay, I've got 13 that just haven't been used anywhere. I can get rid of them all. We're in this style manager. It's useful for when you are finishing a site that's going up to domain or you're sending it off to a developer. And you want to make sure it's as clean and as tidy as possible. Let's talk about it some more readily giving you the basics of it. But let's talk about it in a little bit more detail. Alright, it's clean them up. It's the Style Manager. We've been in here a little bit. Okay, it's going to show me everything that I've made in this site or that workflow is made on my behalf because I forgot to name it. And you can see how I've got 11 of them live in that haven't been used anywhere in the website. So I'm going to click clean up. And the only trouble with this, it depends on how you're working. You might be creating styles that you might use in the future. Remember how like margin-left, margin-right margin, bottom margin, top. This might go through and kill all those and you might use them later on for me. I haven't done that. I've got this paragraph texts that hasn't been used. I've got this combo class called button box-shadow that never got used. All bunches of stuff. So I can now I'm going through them. Hang on. You buddy. I didn't use buddy. Well, this stuff that I've been made lot of these like hitting and body I just didn't use and I didn't even make them Webflow made them on my behalf because I was changing something. Then I either hit undo or decided to grab the title tag. It will, sorry, the HTML tag which has these, I probably did it to the body. Okay, and then just forgot to delete the class that I'm a cold body. You go all sorts of junk. It's cleaned it up, and it does nothing other than it's cleaner. And here, it's not going to start trying to suggest classes that haven't been used anywhere and during that export phase, okay, Let's say I'm exporting this to host it somewhere else. There's not a bunch of classes in there that the developers like scratching his head, deciding where was this being used or they start using it because they're like, Oh, you wrote it, must be useful. And it wasn't while we're in here as well. The Style Manager is really good for searching. We've kinda looked at this. That's why I like using the word say text before I start describing what it is. Because it shows me all the different texts classes that I've made for my painting classes. Not many. Okay, It's really handy just to be able to search them. The other thing is, is that you might have something in here that you like, when did I write the one or is it I don't know. I'll find something. Ticks field that's a terrible name one, what did I do? Well, maybe it's not an error name. There's a lot going on with it. What did I do hots for the form to find something not as you wait the grid three, the heck is this. So have a look. Where did I use it? You can see it's on a page called animation tests that's being used. So have a look. Grid three that go into here. She's go back to here, click on this, whereas grid three, you're in here. There it is. Good three. And what is grid three to close it down, it doesn't do a whole lot. It's applied. What does it doing? It's getting my grid to be three columns wide and only zero rows. So if I go and delete it removed class, it's gonna kinda go back to the default. It's not what I want. Yeah, Good, Three needs to stay, but I might call it grid animation test page. Okay, so there you go. The Style Manager, I'm going to undo before the cleanup. Oh, I can't undoes a tied to the page. If I change pages, the undoes get cleared. Okay. So I'm gonna go back. Go back. Okay, it's done forever. Let's go and create a class and delete it. So I'm going to create a class called axes. Just do it to div global class called thing. Okay, I got to do it. I'm like, Oh yeah, it's gonna be great. It's going to be width of 100. Okay, and that's what it's gonna do. And then later on I'm like, I actually don't need that thing. So I'm gonna go deleted. You can go into the styles and it should be done the bottom than not alphanumeric. You can order them that way where she could. But they are in the list of the cascade, the cascading style sheet. The last thing I made, you notice this is the only one that doesn't have the little line there because these little lines here just shows you where it's applied and on what what other pages it's applied. So this one here, It's not applied to anything because I deleted it. So I can just go here and go delete. Whereas you'll notice in grid three, it says click on this. I can't delete, does this tick? Whereas this one down here says, you been good, cleaned out, alright, so it's something you should do before you finish a site, send it off to client, uploaded it to its main host, whether that's Webflow or on your own domain, or before you hand it to a developer. Alright, that is it, That is the Style Manager and cleaning up styles. 81. Using Your Own Custom Website Domain Name in Webflow: Hi everyone. This video, we are going to publish something to our own domain name. It is the most exciting part. Here it is. Daniel Scott, web design.com. It's live, people can see it. It's got a good 60 URL is by far the most exciting part of this whole process for me. Like it's live, people can see it. It's amazing when it's your first time, when you've made loads of sites, it's still pretty exciting. This particular video, I will show you how to do it automatically using something like GoDaddy or exactly like using GoDaddy. And in the next video, I'll show you how to manually set up your custom domain using somebody else. But the automatic version within Webflow is pretty slick. Alright, let's go buy a domain name and connect it to our workflow side. First up, you go to publish and custom domain. Click the link that's underneath it. And one of two things is going to happen. If you're still running a free account for your site. This data, you're going to have to upgrade at least to the basic because that's when they allow custom domains. Otherwise you are stuck with this one. You can totally use that one. It's just a bit strange looking, okay, so once you've upgraded it, it will look a bit more like this. I'll show you, alright, same thing. Click the button. And it's going to take you to the project settings, which you can jump to if you want to. Can you see it there? It's under Publishing. I'm in my portfolio. I'm going to add a custom domain. And it's kinda let me now because I have that site plan. Now, if you've got an existing domain stopped there, you might already have your dub, dub, dub dot Dan is awesome.com and you'll need to jump ahead in the video a little bit for people who don't have a domain name. I'm going to run through that first before adding it here. Now, buying a domain name, there are some automatic versions through workflow, and that's totally cool. Gu doesn't work and my country for some reason, just as it doesn't. So I'm going to use GoDaddy. Now you'll see a link on the screen here that is my affiliate link with GoDaddy. So if you do sign up with them and use my link, they give me a finder's fee, helped support me and the things that I do. Otherwise, you can go to GoDaddy directly. I won't be offended or use Google. It might work in your country, but I'm gonna do the GoDaddy route. Now, what metal will you buy it if you've already got an account somewhere else, you can go buy it from there and then jump ahead in the video where we actually add the existing domain, but we need to buy it first. I'm gonna go buy mine just quickly. We'll do it together because it's fun picking domain names. Alright, so I'm gonna go daddy and up the top here, it allows me to pick and search for a domain name. The website changes. It should be easy enough to find how to pick a domain name. You might have to sign in or create an account and then be bummed out because somebody's already got the.com and go daddy will go through and give you a bunch of alternatives for domain names is.co, okay? Obviously dot-coms the best one. The good ones are often gone. So a diode or co, might be a good second best. There are a lot of generators out there in terms of domain name generators, and they might give you suggestions on what you might consider naturally a good dad, he's pretty good at it going through different kind of extinctions here. The one thing to be careful of is that for the first year, go and check because sometimes these ones are like dot tech might be great for the first year, but then you can see that every other year is $70, which might be fine depending on what you want to. But there's always kind of like, oh, you get it for $0.01 is as long as you do it for the first year, for two-year registration. Just be mindful of that. And there's lots of cool stuff. It'll go through and kind of give you different options on. Obviously the promoted ones you've gotta be careful of. You don't have to, but just note that people are paying to show you those ones. Alright, so I'm gonna go and pay for it into my credit card details. I am not going to record that. I'll be back in a sec actually, before you buy. I just wanted to run through a couple of things. Doesn't matter which registrar you're going to go with to register your domain name that will try and sell you other things and you might want them. Just in my experience to your own research, that all of this full protection and stuff for your domain name doesn't do anything. It's still Nita. Who is? You still need to hand over your details about what is fold. It could be partially obscured and all this like prevent hackers. For me, I feel like that might be a little bit of scare mongering. You can go through and turn on your own two-factor authentication to make sure nobody can make adjustments. But it's not that expensive if you're like, I don't know. Just turn it all on. The one thing we do want to do here is we do not want to stop billing website. We've got one sort of drama. It's free, it doesn't really adjust anything. And down here, do you need email addresses up to you? I would probably use something like Google to handle the emails. So I wouldn't use Go Daddy, you can, but Google has professional web e-mail hosting. Web flow does not do it. Or you might just use your current Hotmail or Gmail Yahoo Address and just don't use a professional e-mail. So I'm gonna go no thanks. And then I'm gonna go continue to cut. Then I'm going to jump to having a board, okay, So you've got and bought a domain name or vertical one would go daddy first because it's quick and easy. Then I'll show you how to manually set it up if you're using another domain host provider. So we're going to add our custom domain. We have bought one. And now I'm going to type in my one. It's going to add domain. It's going to, my case recognized that I bought it through GoDaddy, which makes it super easy. K will do manually in the second. Alright, it might ask you to sign into your account. It's going to explain what it's gonna do. I'm gonna click connect. Connecting manually. It's not actually just doing the automatic thing. Let's give it a sec. Alright, that appears up. We looked at that earlier on. Remember we turned on and disabling indexing of staging site. Okay, just let it do its thing and we're partially there. It's connected. My problem is I haven't published the site. And actually before we go, we need to make a default. So at the moment, there is actually two versions of your website. There is one width, dub, dub, dub, and one without anything even make one the default, what it's gonna do is actually going to redirect. When somebody types in just this, it's going to redirect to this one. Otherwise, we kinda ended up with two sites. It's weird, I know, but just make this one the default with the dub, dub, dub. And we can go to Publish. Now we can go back into our designer and publish it, or we can do it from here. Okay, Let's go back into the designer because that's where we're most comfortable at the moment. It's what we know stuff. Okay. We're in a comfortable place, could have comfy pants on. I'm gonna go to Publish. We've only had that option from now, okay, now we've got this one. We can publish the both of them. Are you ready? I use city. You're going to publish your very first website. Maybe. It's a very exciting moment and it's probably not going to work. Why? Because I bought the domain name about 5 min ago. Sometimes those domain names can take a little while to go and be there. Alright, we're ready to go. Check it out. Let's see if it works. 321. It's la Hey, straight away. That never happens normally when I do this. It can take few hours for the DNase to populate and all sorts of stuff must be some magic going on between Webflow and go daddy, I love it. So this is live now. This is my own website. It feels more real, doesn't it? Now? Go check out the site now yourself. Okay, Daniel Scott web design.com. I'll add a little Easter egg in there for you. You're welcome. Okay, but if it doesn't work, reach out to Webflow, reach out to go daddy, they're both really helpful in getting these things going because they want you to have a great experience for what you're paying for on Webflow and GoDaddy, they look favor cons there. The one thing you might do now is you might go back to here and you might actually say, like these two, do I need this one anymore? You can just keep publishing directly, make changes directly to the main website. But what you could do is you could actually make changes and publish it to the staging website for clients to check, somebody else to check before you go and go. Okay. I'm going to commit to putting it on the main site as well. Okay, so that's kinda like your work in progress. And this is the final slide. That's very exciting. Alright, that is the super automatic way of doing it. We bought a domain name and basically we let Webflow connected to go daddy, which is super useful. In the next video, we'll do it manually. Let's go do that. 82. Manually Connecting Your Own Custom Domain Name in Webflow: Hi everyone. In this video we're going to look at setting up a domain name that already exists. That's not the automatic one that we did in the last video through either Go Daddy or Google domains, we'll look at a couple of hosting providers that I've got access to, Bluehost and GoDaddy. Plus I'll show you where you can get documentation for all the different hosts that if you're using one of these, you should be able to go and find where to update the DNS records manually. It's jumping right to get to the right area of setting up your domain name, you need to go to wherever you've bought your domain name. I'm going to show you Go Daddy and Bluehost, basically what you're looking for wherever your domain is, there'll be something to do with DNS. That's what you're looking for, your domain name servers, okay, here it is on GoDaddy as well. There'll be in different places, but you'll end up at a very similar place. So let's check it out. Next up, find your site and you want to go to this publishing tab. They have renamed as in the possibility of publishing or hosting. And we're going to add a custom domain. We're going to edit an existing domain. I'm going to set up this one here with the plural and add the domain. And it's going to give me some options. This changes as well. Okay, so if you are unsure, checkout, There'll be a link on the page here somewhere to go and get direct help from Webflow if they've updated it or maybe feel this doesn't work, go check it out and don't be afraid to contact with Webflow or your DNS who have you bought your domain name and explain what you're trying to do. What you're trying to do is update to records, the a record and down the bottom here, the CNAME record. And this takes record here. So this first one here got two options. Just use the recommended one, not gonna go into too much detail about the redirects and stuff, but let's just do this one. We need to add two DNS records K for this a type and add you're looking for that. Let me show you what they look like in the two domain name companies that I have got access to, GoDaddy, it's pretty simple. I'm looking for the type which is a, and the name which is at the host name is Ed, and it's an a record. I need to delete both of these to actually before you do that, take a screenshot of anything you're going to change, stick a screenshot of everything on these pages so that if it goes wrong, you don't do it right. You can at least reset it back to where it was. Delete both of these. If you can't delete them for whatever reason, or there's just no access to it in your hosting company, reach out to them, ask them because if there are blocked off, it might mean that you are paying for another service that requires them to never be changed. So you might have to unlock that. Alright, so I'm deleting both of those at records, nothing else. Okay. And I'm Bluehost. They do it slightly different. If I go and update this DNS and here I've kept all the records all in their own little group. So I've only got one in this case, you might have nothing in here. Go and delete that one. And we're going to add two records. Remember, screenshot before you go and make changes. Okay, so I'm going to go in, delete these action cannot be undone. I just copied this out because this is a kind of a demo for this class. I'm going to paste that back in in a second. Okay, So it has gone, my website's not going to work for a little bit. So I'm going to add my record. And this case, it's kinda weird. The a record, it's assumes you mean a record. You might have to be a bit more explicit. So it assumes you're gonna make an error code. It's hosted at. And points to. This is where you grabbed the things from workflow. So in this case I want this. If you just click on it, it actually copies it to the clipboard, which is cool. Okay, so type name, Let's go to Bluehost. Type the record. They do have different ways of naming it. It'll make more sense in a second. I'm going to leave the TTL plank. Let's click save mine. Look like it didn't appear in this one here. Show all or is it, hey, there it is down the bottom. So the way that these hosts or work, what they like to do is mess with me. They move them all around on all different hosts in different places. If you are running into trouble, you can. There's this website here or webpage here that Webflow have made, okay, and it's a really great way because they actually gone through a bunch of domains, or at least DNS providers, what do you want to call them? And they will show you how to get to it. Okay, and then made some documentation. I'll add this to the class projects. There'll be a link option that you can jump down to the bottom and there it is, there. This might change as well. So go check it out. If it's an error, let me know and I can update this link. Yeah, it's a little bit of messing around trying to make it happen. Same. I'm going to add my second record. Okay. In this one here was still a at and I'm going to copy this back into Bluehost. So it's at zero points to you and hit Save. So that's half of it done. In GoDaddy, it's a little bit easier. I'm not going to delete these, but let's say, let's pretend I have, if I add them, It's a little bit options, More drop-down. And this is going to be at, and then paste both of them in here and leave the TTL to default. So you'll end up with those to, your host will be different, right? What else we need to do? Well, you'd be able to do now is click check status. It will go and check. You've done it right and come back. Sometimes it can take a few hours with the DNS records to populate through the Internet. So give that a test now, see if it works. I'm going to close that down. And the next bit is the C name and ticks re-code, similar sort of thing. So depending on your host, go and find and delete what you have looking for this one, the C name with a dub, dub, dub there, delete this one and add it back in. Okay, Bluehost separates these out, or is it C name? So I've got this one here that I want to get rid of. Okay. I'm gonna go You and remove. I don't have to worry about the other ones. Just this dub, dub, dub recode the same as before. Let's pretend I have deleted it. And I'm going to add a new record. This was dub, dub, dub. And it points to, let's go grab this option here, copy faced, and we go and edit. I'm not gonna do it here because I want to Rick this anymore than I have. And here's my tics records. So I've got one that I need to delete. Remember to take screenshots of everything and copy and paste that out because some of the stuff you don't want to be typing that we're not going to delete it, but I want to delete that record k and replace it with a new one. That will flow tells me what it's called. Super easy. Again, you go and check status and hopefully eventually it will say, We're all good. And the last thing you need to do is like we did in the last video, it does make one of them to default. And for us, we're going to make the dub, dub, dub one default. That's important here because we said we use this option that says we want our domain to redirect everything to this. The dub, dub, dub. This one here is if you don't want that, you want everything to redirect to the non dub, dub, dub, dub, dub, dub, make default. Now if you have got something set up on your host already or you go to sub-domains, lots of other stuff you might like. It's kinda tricky stuff. You be sure to reach out to your DNS provider depending on the quality of their service. I'm just kinda take a screenshot of what you're trying to do, just explain Webflow is asked me to do this. Can you help me make it happen because it's locked or I can't find it. Remember, Webflow have a really good connection to the right sides of the documents within these sites to go and work it out. But don't be afraid to ask. Then eventually you'll end up with a website that works, Daniel. This. Eventually you'll end up at a website that works on your own domain name. Alright, little bit annuity. This one, manually setting up DNS records for your website, hardcore web designing. Alright, that is it. On to the next video. 83. Testing on Your Actual Mobile Phone: Hi there. In this video, I'm gonna show you a couple of ways of testing on a mobile device. Let's test and a fake way. And we'll test in a real way of testing the fake way is just doing it in the browser's pretty easy, good on a mobile. And you can kinda drag it and you can see the little breakpoints on the bottom. We've talked on that. Okay, that's one way. Another nice way is to actually publish the site. So publish a domain. And then in the browser, especially Chrome, okay, if you don't have Chrome and you're a web designer, you probably install it because it's the most popular browser and you need to make sure it works on it. This one though, in Chrome, you can go to Inspect and there's an option in here down the bottom. Can you see this little icon here? Sometimes it's by default upon the right or the left. I think it's down the bottom normally. But let's have a look. You're looking for that icon and you can click on it. And you can say responsive. I wanted to on on the various different sizes and compare five K to the 12th Pro or whatever the latest version is. Can you get a sense for Can you see it scales down so you can see what it looks like on that full size. You can see I need a mess around with my button. So that's one thing. Another good way of doing it is I just like to publish it still and just see myself an email with that and open up on the phone, my phone in Chrome because I'm a Google person. You might see if it works for you. I can click on this in Chrome and say, I can share to my devices and I can just open it up and it sends it to my phone. It's slightly quicker. And then just open it hands on my phone. Okay. And I see that. Can you see it? And I can interact with it. The good thing about this is like I can see that the buttons broken, but it gives me a chance to push all the buttons. Are they big enough to click, which is a thing. Google will test your site to see whether you can actually physically, if you get teeny-tiny buttons. So I'm not going to like it. So you can go give it a test because sometimes it looks fine on screen and then your leg looks weird. And person. That's mine. N plus it's fun. It's fun to see your website on the Internet, on your phone. Just going to paste that on the actual thing, publish it first and then open it in your browser. It's pretty easy. Alright, testing on an actual phone. Your workflow project. The next video. 84. Class project 06 - Portfolio Complete: It is class project time timing to put all that knowledge that we've learned in this last chunk to the test, you can use your own images. If you are building your own book is a good place to get started, okay, use your own images. You are in headshots, that sort of stuff. If that's not what you wanna do, You can find placeholder images at something like Unsplash or pixels PEX ELS k, and you might get damages for the portfolio from there. What do you do? There's three pages to be finished, the homepage, the Contact Us page, and one, at least one portfolio page. Okay, here's my link to my design here. Okay, Let's just got some placeholder images at the moment, but that's what I was gonna do for mine. I'm going to go off and build it in a bit. But this one here, It's up to you. The way you want it to look can be simple, it can be a little bit more advanced. You can spend some time designing it. It's up to you. It's mainly just practicing and Webflow doesn't have to be the best thing you can copy what I've got, makeup, something of your own, go do some investigation for what other people have done, get inspired. Okay, so those are the three pages. Make sure they work on mobile as well. Okay. All the different breakpoints. These are the requirements. These are the things that we've covered since the last round projects, just make sure your typography go back. You might have to redo it and make sure it's on rims. The buttons need to work to all the content pages. Case is just the navigation working. Symbols. There should be a symbol for the nav, probably for the card and the footer to practice making sure you can make a symbol. This should be a form on the contact us page. I want you to practice cropping an image using object fit. Maybe we just brought it in pre-made, ready to go images. You're not going to have that sort of easy ratios. Images when you are getting stuff from me to Unsplash or urine stuff. So how to do that CSS cropping, you might have to jump back to that video, make us have a favicon. All look at that guy. The photo should be sticky, means it just is pushed to the bottom, at least one homepage animation. It can be super simple, just something subtle doesn't have to be parallax or anything else. It can be, it can be super crazy. It's up to you when you're sharing the animation case shear the staging link, not the read-only one. Staging link is this one here, the one way. Let's go to the designer. It's this one here, the top one. So just kind of push it out, doesn't have to be custom domain and just copy and paste that, but on the homepage so we can see what you're doing, make sure there's a middle title and description or at least the homepage, and I have to do it for them. Make sure they all work on mobile. It might get a little tricky with the animation. On the actual smallest mobile. You're allowed to just disable it for the mobile one because it might be just too much for the screen real estate you have, but it can be owned for desktop and tablet deliverables. Take a screenshot of the three pages as much as you can see within the browser and upload those and also shared the staging link. This one here. Upload them to the site, share on social media, especially this link here, if you're willing to share it on the groups, even if it's just the screenshots, love to see what you're getting with your portfolio. But one thing to note is just marked down whether this is your own work or work from from a stock library site. Just to stop any confusion of people thinking, Oh man, you're a great can I hire you and you're like, Yes, but I just stole all that stuff. So just be very obvious to say that this is it I'm using somebody else's work as placeholder to practice my Webflow skills and even credit the images if you'd like to. And it's always a good idea to credit the images. You'll notice an Unsplash when you download it, it gives you the name. You can say, Thanks Carol, somebody for the images or images supplied by and list out the people you've used. Alright, it's a reasonably big one, especially if you haven't completed this top section yet. You have, there's only a few little things to do. I say that go design, It's real easy. Again, this is not about how good your portfolio look for colors. You use fonts, layout, those other stuff. This course is all about getting confident in Webflow that don't be afraid if you're like, I'm not the best designer, but I'm learning workflow. I'm not going to share it. Share it does explain you're new to design, maybe that you're learning the functions of Webflow and we'd love some feedback. Alright, that is the class project, never sex portfolio, complete. Go do it and then we can start on another project. Alright, I'll see you there in a bit. Actually, you're going to spend some time doing that. I'll see you in a little while. I'm going to get you started on the next video. Now. 85. What are Static vs Dynamic CMS Collection in Webflow: Hey, what are we discussing? We're discussing two things. What CMS is and what a static versus dynamic site. Up until now, we've been making static websites, even though we've been cool animation still considered a static website. What makes it dynamic website? First of all, let's talk about a CMS because that's the key ingredient to making it dynamic website. Cms, content management system or database. It is a bunch of information that you can pull into your website and load up and show people. You don't drag it on copy and paste it in static. You're doing all the work. What you can do is have this seamless database. Hello, call it a collection. And you chuck a whole bunch of information in there. And you say, put all the information on my page, on my website as pages and it just goes and puts it all up there. Okay. That is a dynamic site, let's say a blog post, really good example of it and what we're going to make in a bit. Okay, if somebody said to you, Anna got three blog posts on my website, keep with it might be like, sure, don't worry. Build the first one, duplicate it, and then make the next one copy pasted all I didn't get it looking nice that when good and then a great, cool. Love those three. Can you do 300 more like? Sure. Okay. And you ran away? A dynamic site. What happens is you can say, Yes, I can do 300 them. What I'm gonna do for you though is I'm going to just style. I'm gonna build a collection database, CMS, all kinda the same thing, slightly different things, but the same thing in this context. I'm going to build that for you. I'm going to style one blog post. The hitting looks like this, the paragraph looks like this. Images go in here. Okay? It all looks like that. You say, Hey, client, make as many as you like. Great. They just enter stuff into the database and it just starts spewing out pages. That is good, that is also dynamic. So other good examples of it might be that you have a staff list, okay? And you've got a CSV of it from your CRM or whatever it comes from, and you've got tens of them, hundreds of them, thousands of them. You can style one. Check them all in and the website. Okay. Loads them all up, has you wish. Okay, it might be events that are coming up that you've got a big list for database, for collection, other good use, recipes, menus, anything you have a lot of. I had a couple of other examples. Can't remember them. Authors, clients, team members, listings, songs, shows, recipes. Those are all good use cases where there's a lot of the same thing. So yeah, that's it. We're going to go and start building our dynamic site requires a CMS Slash collection. Okay, and then I'm going to show you how it all works and make one, it's fun. We'll make, we'll make some testimonials. First. Gay, they get loaded up onto a site and then we'll start creating pages with blog. Alright, let's jump in to shave this morning. Totally didn't. Like you wouldn't notice. Replaying the video, like you can tell the notice, but guess what? You're not my mom. I Dan 86. Creating a CMS Collection in Webflow: Hi everyone. This video, we are going to create a new site. It's gonna be for all future blog k. We're also going to create our very first CMS collection. That's what we're here for. We're going to create a connection to our database. It's what makes our website dynamic. And then we're going to manually add just one item to that database. In our case, it's gonna be a testimonial from Sarah Smith is going to have a testimonial, It's going to have a head shot and a few other details, right, to get started on making a brand new site. Okay, just a blank one. Now it's a bit of a weird one. We're going to start building a collection in a second and we can create one in the free site. Awesome. Nothing to do with my workspace, but this site itself, you can have up to 50 items in your CMS, which is a handy thing to get started. The trouble is, at the moment, is you can have CMS items that might be an alkane, 50 testimonials. But as soon as you go up to the basic one, you get zero again, if you need a custom domain, you need to basically jump up to one of these two accounts. And even so, 50 records isn't that much, so we're going to need a lot potentially a lot more. So 2000s EMS items. Perfect. So I'll upgrade my site and the second we don't have to for the moment, we'll just see how far we get with the free one. Alright, so let's look at making that collection. So let's create a collection. They call them CMS collections think database. Okay, this gives me a pretty name. Okay, so you create this overall collection. You can have more collections in one thing, you might have testimonials as a collection. You might have a collection of prices. You might have a collection of products with prices and product photos. You can have lots of collections in a site. We're going to start with this one. This is going to be testimonials. Alright, well, ignore the rest for the moment and look at our basic info. We're given two options. By default, just something for the list k. So we'll give it a name, which is perfect for us. We're going to have the name of the person who's given us the testimonial and ignore the slug for the moment. We'll talk about that in upcoming video when we do blog posts, Let's have a look at adding fields. Let's add a custom field. And probably the most important one is a plain text field. That is the label for it is going to be called testimonial. Testimonial. Okay, so the label is you can see a preview over here, my editor, okay, the person who's going to be uploading this stuff, it might be an employee, might be the client, might be you. They're going to have this nice little interactive thing to fill and stuff. They're going to be able to type it in. Okay. Type in the name of the person of the testimony on they're going to fill in the testimonial field. You can add help with text if you like. There's a weird thing like this skew number. You like, you know that the person filling it in as like, you have to explain that the SKU number is found on the left to explain it a bit more. I don't need to because the ammonium is pretty simple. What goes in there? Mine is gonna be multiline in this case. Character limits. Probably. I don't know what it's going to be. I'm going to type in 500 and test it because I don't want my testimonial too long. Is it required? No. Okay. Well, it probably is. Not to be honest. It's no point. I mean, testimonial. That doesn't have a testimonial. What else did we go wanna go in the other person's name, the testament of the written. Let's add this. Just have a quick look through, right? Rich takes will explain in a bit, image, Great, multiple images. You can have this, this one is gonna be great because we'll do a headshot, will let this one on the sake, multiple images means that there's gonna be lots to pick from. Okay, good for a blog post. Upload bunch of images to a blog post so that the person can choose between them. Is it going to be a video link, link, email, phone number, k, just a regular old number. Date time. We'll do that yet. We'll talk about it switches later on, and we'll look at options later on. Is there a file upload option? Now remember this isn't, you're adding a file right now. This is giving them the option later on when they are uploading to attach a file, a Word doc, PDF, it might be, I'd say we're making something for our shop gain is listing out the price what it is, and maybe you can download some specs on it. I do not want this without saving. So I do want an image. And this image is going to be hitch up. Okay. Maybe it's a company logo. If it's that testimonial, I'm going to add a couple other things like a date picker. I'm going to say this is date of testimonial. I liked them on my site where you can actually see that they're from five years ago though from this month or last month. Okay. So don't need help or text. Don't need a time picker. And it doesn't need to be required. I'm gonna do that one. Let's add one more. Just a plain text field. Actually, no, we don't link. Okay, exit without saving, let's add our link clickable. So this is gonna be like Instagram, Instagram link. So they can paste that in there when they're uploading it so that people can go out to their business or whatever it is. Mainly because I just wanted to include a link. Alright, so we've got some basic stuff. What ends up happening? Let's create the collection. And now we have this like placeholder stuff. We don't actually have any testimonials yet. We just got a way of like pulling them into the website. Okay, if you need to go edit it over here, under testimonials you can see these are the things I'm going to ask for. So let's cancel that. I have zero items in my collection. You can just go give me some sample items and it would just put in some stuff. We're gonna do it step-by-step. What do the first one together? And then I'll show you how to bring them in with a CSV. So I have got in your exercise files under Blog, there is testimonial one. Okay. And I've just got some basic stuff for it. You don't have to use it. I'm using actual testimonials, but I've changed the names just for privacy. So Sarah Smith, a testimonial, is required because of the red asterisks pasting listen. She has got a hitch up. Okay. Which one's the lady? Okay. You go, these are just placeholder ones as well. They are in your blog. You'll see headshots and I've got four of them in there. You can use what else do I want to do? The date of the testimonial, going to click on this, pick a date in the past and Instagram link. I don't know what this fake persons one is. I'm going to use mine. Come follow me there. Okay, and I'm going to click Create. There we go. So I have a seamless collection. I'd see Miss database and it has one item in it. Okay. From a testimonial from Sarah Smith. Alright, as long enough for this video, let's get into the next video and we'll upload a CSV to kind of fill it out. So we're not just doing one at a time. Alright, I'll see you there. 87. Adding the CMS Collection List via CSV Webflow: Hi everyone. In this video, I'm gonna show you how to bring it in a CSV that's produced either maybe from your CMS, either from your own CMS, maybe a client management system, CMS, maybe it's your accounting software that produces that. All your, maybe your product management software or like us here, we're just gonna do it from a Google Sheet. I'm going to bring it into Webflow and automatically put it in as items inside how collections. Let's do it one by one, is doable, tedious. And there will be lots of situations where you are bringing it in from a database that already exists. You might be working with some a CRM like a client management software or some sort of accounting package or stock thing. What you're looking for is to be able to import a CSV, okay? So you will know if you know, if you don't, you might be doing it this way that I've done is I've just created a Google Sheet, gay, and I've got my client to fill them in. By my client, I mean, me just doing it manually this way. And here in Google Sheets I went File and I went download. And we're looking for this comma separated values, CSV. I've got one for you. Okay, You can go into your exercise files. There's one called testimonials to now it's asking is the first row. Basically what it's asking is like, should we ignore the first row? Here? First row, it doesn't actually have people's names and adjust the title. So yes it is. And what it'll do is it will try and match up what you've written. We said we lifted his name. That's what member Webflow called that first field, which we filled in. And this one is also called name. So you can save yourself some time if you are producing the database or the CSV, you can use the same name because the testimonials the same and it's automatically mapped it to it. So name equals name, testimonial equals testimonial. Software didn't actually add this one today. I'm going to import it and create a new field. And we will do this as well. Let's do this as an option. Okay, new field called software help Texas is actually software used. Maybe that makes more sense for the user. And it's going to create these following options that we can pick from. It's a little drop-down menu, no bonus. And here we've got I was doing that date. I don't have any dates. I'm going to have to add those manually. This date. Date, I've call it date and here it's called Date. Why didn't it match up? And then, well, if it doesn't, you can go to map to an existing fields that I've got called data testimonial. That's why Instagram. I did not put that in there. I did a map it to a field. All this stuff I forgot, I added Instagram link, mentioned them up then makes life easier. I didn't have headshot because you can actually get a database to link to two images and files. And it'll depend on where they are if they're online and makes it easier. Okay, and you can put like absolute paths and here for a defined but out of the scope of this one, we're just going to upload them, add them ourselves. So we go ready to import nine can be 900, okay, it's less satisfying with his only nine. Okay, but when there's 9,000, look at that. Alright. This is important, not important at the moment. I don't, I don't plan on publishing these as their own pages mentioned, these are blog posts. I might so the stage republished, they're not published and I'm happy to leave them as this. I like at the beginning, they're kinda earlier on I showed you the testimonials. That is what I'm going to be just gonna go on to the homepage. They're not going to have their own separate pages. Now over here we can see things like name and stuff we used. There are bits missing. You can go over to here because it's a little pen and say actually show me the testimonial itself and show me the date of the testimonial. But I don't need created, modified, or published Instagram link you might do. It's up to you what you want to see on this list, okay, so remember these my list items, this is my collection. If I want to edit the collection, I gotta go back to here and click on the little cog. There it is there. This will edit my overall collection. If I want to go into the collection. If I want to go into the items in edited it, cancel that and I go into these individually. I can go and adjust them. And what we'll do is we'll pick the first four and add an image. So actually Sarah Smith has already got one. So let's do, let's just pick randomly because this will help later on I'm going to pick this person had jobs. That guy, that guy isn't like, it's a stock photo of graph. I think of himself. I think that might be Joseph, but he's used on everybody's mockups. He's a great place holder. You're good looking, man, Joseph. Let's have a look. I'm just gonna pick a couple of different ones. I actually, I'm waiting for the upload. Save. Awesome. Let's pick another one. I'll speed through this. Alright, don, they're all saved. Can you tell that I used a random name generator? They're almost not names. Okay? So that is how to upload a CSV. And actually what we might have to do with Syriza here that wasn't there earlier. So I'm going to have to pick and say this is a testimonial from she was doing a course, maybe it's Sigma. Save her. And onto the next video. 88. Adding the CMS Collection List to the Webpage in Figma: Hi everybody. In this video we're going to take this list of testimonials from our collection. And we're gonna put it on the page, and it's going to automatically start populating it like a dynamic website. Alright, let's jump in and I'll show you how. Alright, so I've got a blank sites, so just a quick bit of housekeeping. I'm going to add a container inside of that container is going to be actually doesn't eat anything. It's always nice to have a diblock inside the container because I'm just going to push it from the top. I'm not sure I can't stand it stuck to the top. Alright, so let's go and add it. It is under our ed. You might have come across it. There it is there. Cms, the moment there's just one item in this little group. It's the collection list. We know what the list is. We've seen it before. Okay, it is this part Collection and this is the collection list. So we go, Let's go and edit. This is bit tricky to get out of. It feels like something new. But can you see the crossover here? You can close it all down. So it's just a giant thing that opens up. So let's go and add our collection list inside of my div. Here we go. It doesn't really do anything until you connect it to a source because you can have more than one CMS on our website, we're doing testimonials. It might be your products as well. Maybe staff members, case moves, kind of testimonials and look at that. It kinda half works, at least is bringing through the names. But there's nothing else watch if I preview it, not a whole lot of anything. They're just kind of like ghost things. They'd help you get an idea of what all these different cells are. And it looks way better when let us go to this different layout. It's got three columns because that's half of what we want it to look like. So let's start adding bits. So what I'm gonna do is we can add anything now, any of these options and connect it to our list. So let's add the testimonial. That's the most important one. So let's put in a text block. Could it be paragraph? I probably could. Okay. And you can see it goes inside of my collection item. What I wanna do is I want to actually even popped it out here. It says, I would like to get the text for this text block from testimonials. It knows because we connected the list to testimonial. So it's going, Hey, do you wanna get the text from somewhere? Where would you like to get it from? Four. Let's get from this and let's get it straight from testimonial. It's plain texts. Great. You can go into my plain text box logo that it's bordered through. It's a little hard to read, but you can see there is 12. How many did we make? Do we make nine or ten? I'm not sure how many we made, but it's crammed all in there. Let's style not the textblock, but let's style the collection item. I'm gonna give it a class name of ammonium. I call it testimony or wrapper. I'm just going to add a bunch of margins and padding just so I can push it around. And let's say it's imagines. Actually I'm going to use padding that doesn't break my little boxes. Potent. Paying both sides top and bottom. Just so I can separate them out. Alright. So we have pulled through from LC-MS, look at us, we built a database called collection. Then we added this list wrapper inside the list. We started adding elements and connecting it to the list. Let's add another one. So let's go you what else we need the name of the person. It's another text block. Okay, boring old textbook. I'm going to connect this one to the person has a name that I'm going to give it a little style. Okay, this is gonna be testimonial. Copy that code and use it loads. And this is the name formatting. I'm just going to do some basic styling. We're doing fast mode. That's all I did. I asked the editor to speed it up, but I'm sure you when you give me 2 s. Yeah, great. So the textbox I could start. I'm gonna do the whole ticks wrapper, number of added testimony or wrapper to this whole thing. And I'm gonna go all fonts in here actually now we can speed it up because I can do some stuff. Your weight there. Alright, that's all I did as well. No speeding up. Sustains the font for everything inside of it. Okay, and maybe this textbook, so I'm going to call this one testimonial, and this one's going to be called text. I'm going to call that. I was going to add a little bit of padding at the bottom. So spacing you. Alright, let's keep adding stuff. Let's go you, I'm going to add another text block. Okay? And this is going to be, actually it's, it's gonna be textbook, yeah. So there's gonna be a textbook from testimonials. What is it going to be? It's going to be the software that's used. Even though it was a drop-down on the input side where they could pick. Actually, you didn't actually see that digit. Let's go do that. It's in here is text. Let's have a look in the actual collection itself. Because remember we made a drop-down. I didn't actually look at it that much. Okay. There it is. It means that when somebody is adding, let's say they're adding this and they get down to this. But can you see? They got to add, they get to pick ours at Figma or is it photoshop and then save and back in my document now, you can see it's switched from Photoshop to XD and that's a really good use example of that database. I get to change it in there, maybe import a whole new CSV. It will go through and update all of these. So it's not something I'm copying and pasting in. Maybe it's testimonies in you only have three of them on the homepage. And you never changed them. Don't need a CMS. So a lot of drama to get that going. It's for this kind of repetitive stuff that happens all the time. Like for my testimonials, I like to update it every week of new ones for different bits of software. So I'll go and style all these in a second. Let's look at what else we can add. Because what was asked for? My list, I remember there was an image or should we did the image now we'll do the image, I'll edit, but it's going to break because only a few of them have images. So let's add an image inside of here. Okay, you can go to the top. Sure. I can choose an image or I can say actually get it from the testimonials. You see it, cut it down to like there's only one thing that's an image, great. And only a couple of them, heavens, it's going to break my layout. I'm going to turn it off for the moment because I'll show you that in a second. If you just want to delete an item that you've connected up, just hit Delete. That reminds me of a good point. Let's say that I leave those in there. And let's say I don't want the middle one, like I'm gonna get rid of them. I could go through my list and say just go and remove them all. Or I can go to my collection which is kinda like the overall, It's the boss account gave all these items. And I can say actually, let's get rid of that. Don't want headshots just cause me trouble. I'm going to go to here and I'm going to delete it. It'll say you can't because it's being used on the page. Where is it being connected? Okay. It's telling me its own the homepage. There's an image. Let's go view it. Saying here it is. I can't delete it from the database because it's being used. So very good. Thank you. But I could now go and delete it. And because it's not being used on the page, it will allow me to delete that in the database or they call it the collection. Good little side note there. Alright, that's the main guts of this video. If you want to carry on, I'm going to style these and add a few more, but it's the same thing. Whatever you've got in that list, you can go check. I've got a link block. So I'm going to add the link block. I'm going to get the URL from my Instagram link. Actually, I think the link blocks not going to work clearly doesn't. Let's go. What else could we do is two things we could do. I think texts link or we could add just a regular textbook and add that, the hyperlink that we've done earlier on. But let's add just a text link. It's connected. Get it from Instagram. Now what does it getting Fromm he say it's getting the URL from there to put it in the end, but it's not getting, you get a text from there as well. Okay, Instagram link. I don't really want that text. Okay, What I wanna do is just actually write it in there and say Instagram link. Instagram link. Okay, and go install that. Arousal will be unique except I've made them all the same. Okay, so what else do I want? What else we've got in that list? We're going to ignore the head shots for the moment. Can't remember what's in my list to wait there. Alright, and it was the date. So another textbook. Okay, you go in hemp. I only get the ticks from testimonials and it's going to be the date you've got these other ones. So we have the date of testimonial. There's these other ones created, published, an updated on. These ones are automatically generated for like when the list was created, when it was published. This hasn't been published yet, so there'll be a time associated to it and if it was updated, I don't want any of those at the moment. They're going to be useful later on, but date of testimonial. Perfect. Alright. So you can hang around if you like. Actually, I've already said that, haven't I? I'm just gonna go through and style it. So I'll do it in Speed mode, actual speed mode this time. Alright, that's not very sexy, but I did it, right. Let's go and play with this list a bit more in the next video. 89. Reorganizing What is Shown From the Webflow Collection List: Hi everybody. This video, we're going to take that list and we're gonna be able to reorganize the information shown. We can decide only show the ones that are testimonials for the software photoshop, or only show me the ones that have images, or only show me the first three then other latest testimonials. Let's get our list to do our bidding. Let me show you how. Let's do some reorganization. And at the moment it's showing me too many options. I wanted to maybe just show the first six or three. So what we can do is what ends up happening is the list. If I'm clicked anywhere in here, I should be able to get to this cog and it shows me stuff about this particular one. Let's go up a level. Let's go to the parent and it gives me more stuff. Okay, and I can go back and say I want it to be two columns are for k or three, you can limit items. I would say I want to only show three, please, or six. Let's go back to three. Filtering can be good because at the moment it's just showing me an order k. So let's say that this is the testimonials for a particular page that say it's the Figma page with Photoshop page. What I can do is I can say actually, I only want to show you in this list. I'd like to show only the name that equals not the name I want. It's gonna be easy. The name I can start typing, I can say people that name is Pam. And I spelled it wrong. So it's going to have no names. What I wanna do, it's probably easier going not named, but maybe I want to show ones that have the software used that equal Figma. Perfect. So it's only going to show me those Figma results. So this might be budget products to your tags. What budget products not only shows on that page, or maybe it is on a page for your portfolio that's showing you Wix testimonials. So it's only showing you UX testimonials. Nico, you understand? Let's say I want to because those images, let me say if I add the image. So over here I'm gonna go ahead and go Image. Okay, there's lots of other pages that don't have images, but let's say on the homepage and particularly, I want this to have headshots be like, well, not all of them have headshots. What you can do, remove it, go back to the outer wrapper and say, show me three, but not the software use. I want to filter by ones that have images, headshots that us, images that I said and the people that don't want check, there you go. I need to style these, will do them in the next video. That's really quite powerful how you can sort that information. Again, remember, you could be typing this in one-by-one without using CMS's. But you can start to see how useful and powerful it is when you stop filtering and sorting. Okay, sweating might be useful as well. Let's have a look at, let's say that I'm going to sort by name, but I'm going to say the big when the testimony was created, the date of the testimonial. Oldest to newest. Newest to oldest. Okay. Or it might be in there instead of the date of the testimonials, just the data was actually created or when it was updated? Yeah. Newest to oldest. Save. You go because I edit images to these which updated those list items. So they got to the top. Last thing I haven't mentioned yet, you can disconnect that. You can say Actually this thing here, this little cog, you can say actually it's not testimonial, It's meant to be it's meant to be software used. You can reassign them if you want to. That's not what I want to do. But I forgot to mention earlier, one of the things with the CMS and list is like, should it show my portfolio, have a list. You should do it just because it makes it, it makes a good practice, but depends on how much you're going to update it. Like if you are a person, no person portfolio, updating it every week, maybe you doing a 1s and leaving it. Like a lot of us there, maybe a CMS is a little extra work that you don't need. But for maybe a larger agency where you do have lots of testimonials and there's lots of different kinds of categories for that work that you've done. It makes sense to have a CMS. I remember that was my job, a big agency when we had no work on where to go through and make portfolio pieces because we had nothing else to do. Okay, and we go through, find good images, make them look co, do some write-ups. Somebody would have to check my copywriting, my spelling and grammar, and upload it to the site. Cms would be perfect for that. Okay, so that's reorganizing the data from our lists. Very powerful. Let's go style it in the next video. 90. Styling our Collection List With Grid & Flex in Webflow: Hi everyone. We're going to take kinda where we finished the last video and we're gonna do some styling to our testimonials. The main new thing in this one is that I've converted this list to a grid, which is not the natural and display setting for these collection lists, there are columns by default, but very often I want to convert them to grids and I'm going to show you how. Plus we'll do some styling. We get everything to line up the same down the bottom rounded heads, because somehow all people with heads have to be around circles. It's like the rule of the internet. Alright, let's jump in. All right, we'll stop the thing that you haven't done before. And then a lot of the other styling is just stuff we've done. We will recover because it's good to remember. The first one is that at the moment, a collection list comes by default in the display called columns. We kinda looked at it before and I said, Just don't use columns. We're going to use grid. Columns are good, the finest, nothing wrong with them. I find them tricky when you've got more than like we've got three items when there's like another row and six of them, you just lose a lot of control. It's how to divide out. They just are other problems. So you might be doing the same thing and you're like, how do you convert it? Well, if I go to my display settings and go back through this, so there's my wrapper, displace it to block. I'm gonna go one higher. The space at the block, none of them is it two columns? As Wade, what ends up happening is it's actually controlled over here in the settings panel. This is the only time that this happens. Okay, It's with this particular collection list element that we've added. They kinda take it off this page and put it over here. We'd, Who do you do it too? There's kinda like two. These are rapper on the outside k to say which list it's coming from. There's this parent Rapa, then there's another wrapper, and then there's my actual list option. I'm gonna do it to this one because even though we can't see all three elements, that's what it is. There's one and it just gets repeated a few times. So the parent, I want to split all of these guys into a grid, okay, So you gotta be a grid and it's going to break. And I'll click Done. You like what's happened here. You can even see workflow says, Hey, if you want to use this grid, you need to turn off the columns and you can even click the button or go to here. Same, same, same place over here. And even here, there's a little warning saying you got to turn this off by either clicking that button will clicking that same, same, you go and it's working. It doesn't look like it's working. This one that has this giant image is wrecking my layout, but it is working. Let's have a look. Grabbed the list, go in here, let's say only filter. Let me show headshots that I set or not set up to you. So it's showing me my three that acid. I'm going to turn the limit off. There you go. Those are my dude's and due dates. Okay. I'm gonna do the opposite. Show me the ones that sit. If you do want to switch one of these things to a grid, click the parent list, not the parent of the parent. Okay, switch it to grid and then just go and turn off the columns inside the settings, which is a strange place. Alright, let's look at doing these images first because it's going to help with the layout with a grid as well. I'm going to switch it to, I've been adding my columns over here this whole course. You can add them up here. I never do some reason, nothing wrong with it. Okay. I'm going to do a full yeah, it went up. Okay, let's click Done and let's fix up these images. Was the task earlier on. Maybe you didn't figure it out, maybe you did. If you did, you'll know that I need to set the size for it. Let's say I want to make them 200 by 200. That's probably I don't like this full column is just too small. Grandma, parent you it's going to be three. Alright, it's good again. So 200 by 200 is still probably too big. Now, I haven't added a class for these. I'm going to call this one image, rename. These gonna be 15150. I'd like to tab across and it will just on your keyboard, it was tab to the next one. And then we say fit, we're going to say can cover. Then in cava, you can go to these options here and decide where does it stretch out from the center for a head shot. It's obviously not working for me, so I'm gonna probably have to go for the top near you go. That's kinda like the most consistent one. Everybody's chin. We'll do that one. Co and anything else we want to do. This added the rounded corners. So down here, rounded corners, just say beat 200 is large. Now I want to get everything to a line. And I did it with this before, just with a text member, I just made a style and I ran right Ally, SRE, right align. And it works for texts easily. But sometimes if there's lots that you need to miss around with, how do we get everything to kinda maybe line center. How would you do it, if you guessed, grabbed the wrapper and set it to not He's a grid child, we know that, but he can also be the parent of flicks, which doesn't work because it's needs to be vertical. Vertical should be the default workflow anyway. So we're going to say, Oh, we seem to, that's kinda what I want. You see, it's kinda overrided my right align. I have to go in here individually and say, you're the child of the flexbox and you can do your own rules. But I'm happy where it was. Let's first of all, very important. It's italicized, which means it is spoken word. But I feel like if it has to be like a serif font to serve mirror with a good, alright, Where am I going to add my padding to do? I just want to do all spacings. This is where I'm going to hit my up arrow to grab the parent. I'm going to look at my legs. Hey, maybe I can just do it all here with the rows. Excuse. No. Definitely can't do that because there are two separate. So I'm just going to say you can do either image can have a little bit of bottom on it, or the testimonial texts can have a little bit of ham top on it. So you do, I'm doing it on this one because I just think if there's gonna be times where maybe there isn't an image and they won't be needing, there'd be no need for some padding above it or margin. So you spacing. Next thing I wanna do is can you see they're not lining up down the bottom. Okay? Those to do, the actual sizing of the words is really close, like they're almost on the same lines. Does this one break? Yeah, this one breaks down to another line. So what we're gonna do is, I want them all the names to be on the same row. How do I do that? Do you remember you've done it a few times now? You remember? Good on yeah. I'm gonna get you. I don't have to do it to one of them. Can be any one of these. And I'm going to say, do you remember? We just say you have a margin of error. Remember the flux is already applied to the parent wrapper and then the child, you just say be auto the top and we'll push it down. Nice. Alright, that is it. Changing your collection list to a grid. You just got to turn off the columns in the settings, which is strange, but everything else we've done and it's looking better. Alright, that is it. I will see you in the next video. 91. Class project 07 - Kitchen Collection: Hi everyone. It's gotta be Class Project time. This one is easy. It's nice little compact stand alone project. So in this case, make yourself either a new page or a new whole site up to you. It's not going to be used further on in the course. So this is kinda like a little standalone project. And so I've given you some data for this kitchen collection. Similar process to the testimonials. Okay, I'm just giving you new data to use so you can do your own one. So there's a CSV. It is in the exercise files under blog. Even though we haven't made a blog, it It's the blog section in my notes anyway. Okay. And there's one in here called Kitchen collection. So there is a CSV that has the designer's name, their location, and their website. And there is a corresponding image, C jj design studio. There is an image here that goes with it as well. So you'll be able to import the CSV data and then manually add the image. I want the image to be part of the database, not just adding it separately as an image, though I won't be able to tell. So let's have a little look at it. So Ed and style the collection. Great. That's where the files are at all the data, at all the images to the list. And this one here I wanted to see if you can make the URL, which is this thing here, the profile. Can you make that a button instead of a text link? I haven't shown you how to do that, see if you can make it happen. There's a couple of ways I can think of two, if you get really stuck, the comments, ask a question, answer a question. Anything else? Nope. Once you're done, take a screenshot. Now, I've given you images if you want to use the CSV data with the names and stuff, and then go find other images of kitchens just so that yours looks a little different. You have better tasting kitchens. That may be me, I highly doubt it. But at least if you picked your own images, it would all look very different rather than Everyone's kinda being the same. Once you've done it, take a screenshot uploaded to the assignments and also share it with me on social media. I want to see what you do. Share with others if you run into any troubles and how you fixed it, sharing is caring. Alright, Go do your project and once you're finished, I'll see you in the next video. 92. Allowing Your Client to Update the Website in Webflow Editor: Hello, This video, we are going to look at the editor. I've talked about the editor lots, but we haven't done that. We've been working in the designer for a long time. The editor is the ability to get your client or customer, your staff member, your mom, or your dad who've built a website for. It allows them to go through and make changes. They can go through the site, the live site here, you can see I can actually go through and make a change. I can pick a new image, okay. They can publish. The site will update. They can check the forms that might have been filled out on the site. All without having to come back to you. They can make changes and publish from the website. They can also start adding things to our CMS, add a new testimonial. No problem. Look, we've got testimonials down here. Add a new testimonial all from the website without having to come back to you or through Webflow, can do it all in the browser. Super fancy, I love it. It's probably one of my favorite features of Webflow. We don't have to do anything, just start using it. Alright, let's do that. Let's start using it. The first one we'll do is just a static website. We want the client to be able to go in and change the ticks, make button takes changes, switch out the images. Just stuff that didn't have to come back to us for no CMS involved. The rules are it needs to be published either on your staging domain or I'm going to use the main one. Okay, and then you can go over here and say, or is it shared project? We've looked at shear only earlier on, that's for sharing with other designers. This one here is what you need for giving people access to the website without coming to you or going through Webflow. One thing to note about this though, is that you need a minimum plan at the moment. Is this c same S1? Okay, So you are allowed three guest editors with this one, you can kinda go through and see the differences. Okay, So I've already upgraded mine, I think can't remember what we'll find out. If I click on it, it jumped out to members, okay, and I'm going to add a guest editor. You can go straight to your project settings and come to members. Okay, I'm gonna go to guest editor. The coolant gets editor, strange name. I like to call it client editor, customer editor, staff member editor, I get guesswork, put an e-mail address, decide whether they can edit or edit and publish. What can happen is you can allow people to edit and get it already and being drafts. And then somebody else needs to be the publisher, create content, but not able to publish this. So you can do both, please. Thank you. Alright, I'm going to type in an email address and hit Send. They'll get an email and we'll jump to opening the email, okay, They can either click the link that you email them or after a while they'll get to know that you can just type in question mark and type in edit on any Webflow site. And at that, and if you know the username and password down the bottom here, put that in and you can start editing the site, and I'll put mine in. Alright, once you've logged in, you get this little bar on the bottom. And it's cool. You can jump to different pages on your site and be editing those. They can decide, alright, they need to go through and say, alright, It's not ask Dan and cushion, we've got more than one team member. It's us. A question now. Okay, and over here, I can hit Publish, okay? Because I was given the edit and publish ability and watch what happens. Alright, so that is the live site updated and we can go back to live site, but it just kinda gets rid of our editing abilities. And that's changed forever on that website, back in Webflow as well. Which this, if I go in as the designer, I don't have to like accepted or have a different version of a go to the Contact Us page. Can you see it's it's amazing. They updated on the site, then you can update it here. That's why you might have to have that. They can edit but maybe not publish just in case they go and rent the place now to make things editable, okay, well maybe unedited will say like quit changing the Submit button. If you select it on here and on your Settings option down the bottom, there is option that says the button can't be changed by the Done button, we change lives to click on this text here. Let's go to Settings and Settings collaborators can edit this element. I'm not sure why buttons aren't. There you go. Let's go to the homepage. You can edit images, look at this. You can decide whether they do or don't. Let's have a look at what happens with images on their site and forms and a few other things. So I'm going to jump back into the editor. You can do it yourself like I was pretending to be the client there. You can actually pretend to be the client yourself and just go to editor on this project. Okay, So this is the designer that we've been in this whole course. Now, this is the editor, and I don't need to login because I'm already logged in. So I can go here, click the image and just pick a different one. Alright, let's click Open. It's going to upload. You have to do is remember to publish. It's pretty nice. I get over there to image. The other thing to look at is done here as forms. We have a form and the site K, and the client can go through and check these forms now in here, export to CSV. Okay, if there's data not showing in here or there's just stuff you just don't want to know. You can say turn maybe email off and just show me because you might be gathering loads of different information. But it means the client kinda look at themselves in this page. Let's look at updating the CMS like before. Make sure that it is published. You can go and invite them, came in but invite a guest editor at the email address. And then, alright, now we're in and we just got this little bad. And the bottom, the different one is we've got collections and testimonials code collections. You might have lots of different collections in here, blog posts, testimonials, staff members. And you can either click on this or click on this little tab here. You can see the same sort of list, but it's white. And you can say, I can add a testimonial that's going to fill this in. Alright, add an image. Okay, War, which are these tasty ones? We haven't used the kiwi one for a little while. And data testimonial six backwards for me. So it's the month, that's the day we would do the year. Instagram link. Alright, and the software that we're using is Adobe XD. Let's say, let's hit create or save as a draft. Okay. It is staged for publish. Publish it. Yes, please. Let's go view the site up here. Well, it's thinking about it, my publishing. Well, it's worked since it's still publishing, but there you go. Worked. Okay. It might not appear depending on the rules that you've got for your list at the moment, I've got like newest first, I'm pretty sure, but it's a lifesaver to be able to give the client you set it up. You don't have to get them to kinda entered the page and change it every time, just getting them to add more, make sure they feel that all the fields and it can appear on this page. It might be appearing on 20,000 other pages because you've connected them all up. You got that list on lots of different places. Super handy, alright, that is allowing your client to go and update the website. They can either use the link that you send them over all the time. But remember a question mark first and then type in edit. We'll pop this up down the bottom where they can enter the details and start editing. And I'll be hustling you. Alright, I'll see you in the next video. 93. How to Create Blog Using CMS Collection Pages in Webflow: Hi everyone. We are going to take our seamless collection like we did earlier, but actually turn it, in this case, blog posts into pages, ugly pages. We haven't styled them yet. We'll do that in a bit. But look, I didn't actually make all of these pages. They were generated for me by with flow based on that list. But the tendon, two pages, ugly, unstyled pages. It's about this time in the course were me and probably you are going to start to feel like strong, confident web designers where we're producing lots of stuff with little effort. Let's jump in and I'll show you how if you're following along, I've kicked my testimonials that we made in the last one, realize I've spelled it wrong. That's my testimony. Nails. That is on its own page, so I'm back at the homepage fresh and ready to go between those don't exist. They didn't have the heart. Delete them. So how do you create the page? The beginning starts the same to go and create a collection. So we're going to create a new one. We've got our testimonials, all one. We're going to write one blog posts. Now, there are templates. Watch this, I'll click through a few of them, actually blog post and it just prefilled and the stuff down the bottom here, you can kinda see post buddy, post summary, the image, the thumbnail image, just handy stuff to get started and give you some of the ideas of what you might be able to use collections for as well. So team members, they bio job title. You can see, we're going to start with blog posts. Everyone do that. You see down here, anything else want to add there? All good. Okay, For this one, we're going to create the collection. Then what happens? We've got no data. Okay, so instead of giving you some, I'm going to show you that you can go through and add sample data. It's just junk that Webflow, Ed's, it's kinda junky as well. Aimed at blog posts. Because if you do a recipe, it's gonna be the exact same names. It's going to have a recipe of historic history of web design. And it's going to have no content in it. So it's going to work for this one, blog posts because they're kinda like blog post titles. Let's have a look. They've filled in for us the name the slug, which is makes more sense now right before those testimonials didn't live on their own page, so it didn't really matter what the slug was. Now though, can you see my website under post slash the name of the post, which should be good keywords. Okay, That's something somebody can link to. It's put in some basic body text. It's called Rich Text, this stuff. And it's edit an image, both main image and a thumbnail image. And we'll look at this featured option. There's a color associated with this list item, which is kinda cool. Alright, so those are my list items. What happens now? I'm going to say, Well, that didn't change it today. Anyway. It's close it down. You're like, Wow, how do I create all the pages before we went plus and just drag the list item on. But that's not all we're gonna do any pages with that stuff. Okay, What happens is the kinda already made, which is cool up here, no pages. So static pages makes more sense now, right? And these are pages for your dynamic pages, you will see Miss Collection Pages. And there it is. There's my blog posts template case. If we go in here, we've got a blank page. Hey, this is the template that all of those list items, all the men know. How many did we ask for 510. Anyway, we got a lot of different blog posts. All we need to do is style one of them. So let's do some basic stuff. So I'm in the template, okay, make sure you're in the template. I'm gonna go to my, I'm going to use a slightly different method. I'm going to use the Control E for PC or Command E on a Mac. And I'm going to say, I want a container Command T again. And I'm going to say, I want to hitting. So I want Command or Control E. I want an image. Command and control E, and I want a text. I want to, I want a text block that's going to have the date that this blog was created. Then another one is going to be tics. Now you've got text area, which you might think, Oh, you can use it takes here because that's like from the forms may, but it's a nice big area. Gave you add that. It says, no, this is just performs, find something else. You can do. Text. We're going to look at rich text. We'll look at rich takes in a video coming up really soon properly. But basically it allows you to have a textbook and within it have headings and all sorts of stuff going on. Ko is that it Are we done? No. Those are just placeholders. You can see it says hitting with my hitting. It was my image. So what you need to do, just like we did earlier with the list, we bind them to the database. We say you, we don't have to put them inside of a rapper like before. You just say you connect to which one? Connect to the blog post, please. It knows because, because we're in the blog post template, the rep is already there. Okay, And what does it from this use the name of the blog. Connected it up. Okay, and now basically will connect all these up. But what's happened now is actually all your pages have been created, actually only five or six. I'll go to the other page, chord, five web design blocks. Look at that. The page has done. It's not very well styled. But that's it. You've created all those pages will link to them in a second from the homepage, but all the pages are made. Let's go through and connect a few things up. Let's go you and connect the blog posts. And I want you to get it from my main image. You go, alright, this one, he actually, I want this below this, this one here. Okay, this textbox is actually going to be from the, we didn't make this one date created or published. But those are there automatically because it knows what day you published it. I can click on that. Mine isn't published yet because I haven't published it. So it doesn't really know yet. Mine ended up what it ended up. That was weird. It's fine. That takes pockets up here for some reason. During knew why not published on is just do a createdOn piece down here. It would appear down here for published on it if it had been published. So the moment is going blank because it hasn't been published, which is a bit weird. We can live with that. Now the rich text, you want to grab, the parent Rapa, not the things in between are not the things in here you go, the rich text block. And I want to attach that to the post body, which is just Loren ipsum at the moment. And that's it. We've got all of our pages. You you all different images, all different headings, all the same date because there are all uploaded the same time. There you go. It's good when you're working on whatever page you want to work on, you just decide on whatever page it is, and then you start working on your styles. But you probably want to just scrub through them or to see what happens with a really long title versus a short title, big image, short image. And on a Mac, hold down your Shift and your Option key and use your left and right arrows. It takes a while for the images to update. On a Mac, it is Shift and Alt and use your left and right arrows. Kinda just go through and say, yeah, that fits. This one here, breaks into two lines. I'm going to have to deal with that. You go and style it, styles to it. Alright, so that's making the pages really good, really quick and easy. Of course you can. This is something that the editor can do like we did earlier on. They can go in, they'll be able to find the list or the collection, sorry, and go through and add their own list items. I clicked on the cog, click on the cog, click on the actual thing. There'll be able to add new blog posts or you can, from wind flow up to you. We'll stylize it a little bit. Let's do the next chunk where we'll link to it from the homepage. This was a little tricky for me to understand, so I'll put it in another video for you. 94. Linking to a Collection Page From the Homepage in Webflow: Hey, in this video we've got blog posts pages. How do we link to them from other pages? Measure if we had a homepage and we want to hear does that connect to them? There we go. We build a collection list and then we can click on these things. We built a collection list for our testimonials, but it didn't link to anywhere. We just displayed information. You can do the exact same thing, but actually link to the list item as it's displayed here, like us on its own page. Let me show you how. Alright, so we've got our pages. How do we connect to them? Let's go to, we'll do it to our homepage. I always go up there. You can go there. Doesn't matter. Homepage. And we're just going to add a collection lists like we did before. Kind of broken it up because sometimes you just want a collection list on its own like their testimonials and you don't need pages, and it's a little bit easier to understand rather than doing them both at the same time. But we know what this guy is. We know you inside my container, my collection items. I'm going to connect them to collection. So blogposts and you can see, remember these are just temporary placeholders. You can say, what do I want in here? Well, at the moment, I'm happy for them to stretch across because I'm going to add a button. I'm going to click in Command or Control E. I'm going to type in button. Where's this button gonna go? Now, this purple one appears this to link to static sites. Nothing linked to the purple one collection page. Which one in particular? You don't really pick from a list. You just say, because we're updating all of these, watch what happens. Current blog. We've got all of these pages in a second ago I had the title of it, so we kind of knew what it was. Remember, undo, undo before I add the button in there. So it knows that the box knows what it needs to do. And if we add a button to it and redo, redo, redo, Okay. The button can go to the blog post so it knew what it was and it's gonna go there. Gets easier if you just say get the text from the name of the blog post as well, and actually do that properly. There you go. Does that makes it clearer? This button when clicked is gonna go there. Alright, I am going to add a little image as well, just so it makes it a little bit easier for the homepage and knowing where you're going. So the wrapper, you we've done this before me. Let's go for them. Why not? Let's add an image to any one of them. Okay, it's gonna be above my button to get it from the blog posts from what fueled my thumbnail image. Excellent. And what I'm gonna do is I'm going to add a bit of text. I'm going to say textbook. Go in there, please. Okay. And that one's going to link to the title, name. And there's button is going to get the text to say is button texts. And this one's going to say view more. Alright, we can go and style it more. Okay, but we've got them all there and you're like, wow, this is the homepage. I don't want to show all of them. How do I show just some of them? Do you remember how do I filter it? You got it. You filter it has a cool filter or sort k. Let's do surface. So again, picking on my collection list, I'm going to say actually let's sort them by the, not the name, but the data was published or not published yet. So I'm going to leave that one. That's probably the best one, but none of them published, so it's not gonna do anything. So I'm going to say the date they were created on from newest to oldest and hit Save. I'm going to say, show me the first four D go. That might be a way you can have your homepage having the latest ones there. Hey, I can preview it and say go to that page there. Excellent. I need a nav to get back to the home. You know how to do that. The other thing you might do is let's look at featured because they might be like at the moment, it's very lusty. You have to have oldest to newest alphanumeric, something like that. Whereas they say, I just want I just want to pick four of them. I want to choose them. You don't get to pick the order. That's what the little switch is very useful. So let's have a look at our list collection. Let's look at our blog posts listings. And let's have a look. There was an option down the bottom of these saying featured, you're like, where did that come from? K to add one yourself, Let's edit to the testimonials. This is a project from earlier in the course, and you don't do it to the list, you do it to the collection. Say, I want to update this collection, okay, to include a field called switch. The label for the switch is going to be, you might add a switch for, I don't know, Photoshop. You can toggle it on and say only show the ones that have the switch for Photoshop turned on or new or featured. Whatever you want to use or you think is useful for that, to turn them on for, you might have discounted, not sure why you use it for. Features works great in this one. Okay, Now I've got this little featured switch. And actually you save your changes. So collection. Now you ended the same place with blog posts, you can say is switched on the bottom here. I've got what, five of them. I'm going to turn only the threonine history. I shall just due to history and the five web design blogs on. So I'll speed through this and just ten those ones on. Okay, so I've only got history and five web design on. I'm going to close this down and they go my homepage and I'm going to do a filter on here. So here's my collection list. I'm going to say I would like to sort it. Actually, I don't want to sort it. I want to display filter. Okay, I'm going to click Filter. What Bi is my little featured switch, and I just wanted to feature switches on. If it's not on, you can't be on the homepage and you go you can go through and say the name of this, which should say homepage. I haven't features works. Cool. Okay, we got to style it more, but that is the way to connect something like the homepage to all of your CMS blog posts in your list item you might have the different categories, okay, as a dropdown, might be health and beauty, your education or whatever the categories you have for your site. And on this whatever page you're on, say it's the health and beauty page. You can say filters on for only the ones that are, you can add more than one that are featured. And also, I don't have this option here but are set to health and beauty. Featured in health and beauty, and then sort by whatever's newest, super powerful. Alright, Let's say that you want to do it manually. Let's do it in another separate video. Next, I'll see you there. 95. Manually Linking to a Collection Page in Webflow: Hi there. This video, we're going to make a button go where we want. So it's going to jump to a collection page because we saved go there. It's a little bit hacky, but sometimes you just need a button to go when you need it to be. Creating collection lists are awesome. They're all dynamically made super cool, but sometimes caveman button go away. I want to show you how to manually connect them. We're going to enter from the homepage. I've got this list that we're going to ignore. This collection list was going to do it from a simple button in a list. Okay, we're just going to say here's a button. How do we get it outside the list? I'm going to grab the list and just turn it off. So let's wrap up display none. And this button here, I can go inside my container at the top there, Various. This doesn't exist, pretend it doesn't exist. So button, how do we connect it? But I really want to do is go here and go pages and then go connect to the page. That's not how this works. I wish it was. And if you know way without building a collection list first, which is good, sometimes you just want to like link to it, just link to that page. What you can do is just use the URL hacky way of doing it. I'll show you what I mean. Let's go into the list. Find out blog posts. Go into this, let's say I own a link to the history of web design. This slug here, okay, terrible name. The URL for it is this. It is at the website. So Dan's website design.com slash blog slash, the history of web design, yours might say posts here. I changed mine to blog at some stage while you weren't watching. But this chunk here, okay, I can grab all of this including that forward slash error, copy it. Okay, I don't want this because that's going to change. Then I can go back out of here. Okay, back to my homepage and just say link to there. It didn't go in. Alright, That didn't go and phosphorylate. Click the Copy, then come out. Now I'm going to paste it in and I'm going to delete this. That's hard-coding it too much, but if you leave the forward slash and leave everything else in there, it will work. Okay, it'll only work with the Published Site, not in the preview. So that is it, perfect. Okay, and I'm gonna publish my site. Remember, publishing takes a lot longer when there's a database to deal with. Okay, let's check the site. And now I've got a lonely button. And when it clicks, it goes to, it'll go to whatever website and it's that plus all of this junk. Okay, and it'll go straight to there. What could be the big problem here? That's right. If we go and change the name of this, okay? Or this, you might have go through and change it. It's going to cause problem. You need to get updated, all set up what's called a redirect. Let me give you a, for instance, I can go in here now and it go collection and go blog posts. And seven ways is that we want to click to think so. Yeah, I want to change this from post to blog or blog to post. Okay. I do it in the actual CMS collection cog here. And I say actually, I don't want this to be something else. I wanted to be back to post. And what you'll see here, it says, Hey, you need to set up redirects, click on that, follow the thing. It's kinda outside of the scope of this course. Or just save it and make sure that when you go back to your homepage, go little button, you are now called post that I save that. That's the one thing to be careful of. Hard-coding it a little bit hacky. So the only way that I can think of manually just connecting to a page, there are times you want to do it. Otherwise, build a list, maybe have a switch that turns it on to say featured or to say some way of just toggling it on so that you can then set up filters and just show the one particular button, more hacky button saying that most of the time we want a list, Let's turn the display back on like this. So it works great. I'm getting old difficult. Towards the end of this course, I will want a caveman button to go where I want. Don't give me this fancy, awesome, amazing stuff that saves me loads of time. Give me the stuff that will break all the time with full URLs, with hard-coded URLs. Anyway, that is it, manually linking to a collection page? Let me know if you know a better way of doing it. There's probably one and I just don't know it yet. 96. How Does My Client Add a Blog Post in the CMS Collection in Webflow: Hi everyone. In this video I'm going to show you how your client adds a page to your website. In this case it's a blog post. Basically, go to the editor, click this button. Yeah, there's not much more to it than this, but hey, there's some other things I want to show you. Well, actually, I'll show you all the steps just in case you get a little bit lost in otherwise, that's it. Just like the testimonial we did earlier, except it's a whole page. Magnificent. Alright, first thing is, is that everything needs to be published. So make sure it's published. You need to make sure that you have shared it with them, okay, invite guest editors. They can either click this, they can either click the link they got from you or remember, they can do question mark in it and they can get in there. Alright, so they can get in and edit the pages that exist. They can go through and say actually this needs to be changed. Okay, this is about graphic design. Hit publish changes. It's gonna go edit the record. But now what I wanna do is I want to add my own blog post. I'm the client. I'm like, I want to add my own blog post, please. I'm gonna go to blog posts or you can go the long way, collections, blog posts. Or you can use that little tab there and look, there's an option here. It says add new, whatever we've called. It now says add new blog post. Same with testimonial. Testimonial, easy peasy. We got to fill in the fields and a sec. Alright, good old ipsum.com. Does anybody use that one? Okay, just some placeholder text and staged ready, set, publish, okay, and like before, like any testimonial, it's going to appear, but now it's actually going to be a page once the image loads. Actually I didn't put a thumbnail and whoops. Okay, but never gets old. They've created a blog post or it's a new product page and you serve us new recipe, whatever it is that you're adding to your site. We gotta get up there. And back in here in my designer, I will see that the client has gone in because my blog post six items. It's nine. Yeah, I know it is. Hello, good teaching wavelet. There it is. It's all being added. Fun. Alright, that is it. That is how your client, Ed's a blog post or whatever page that you want to add to your collection into your website by. 97. How To Use Rich Text Elements in Webflow: Hi everyone. Rich takes elements. We've kinda have looked at them. They have popped up here and there. What are they? How do you add stuff to them? Oh, look, you can add stuff, you can change stuff. You can add images, videos, all sorts of goodness to a rich text block. You and me and the handsome guy, we're all going to learn how to add them, them, adjust them, but not style them. We'll style them in the next video. Alright, let's start making some rich text, okay, Rich text element. We've got one or which takes block, okay, we have got one already. Remember we had one that was just automatically put into our blog posts. We went in there and there it is. There was just thrown in. Different from maybe the one that we added here where they just paste it in this, if I just paste it in, it ends up being paragraph text and nothing else. So let's have a look at doing one on its own, just on the homepage, not connected to the database, just yet, just look on its own. So the, a key, I've gotta kind of a home for it here. And I'm going to add this rich text block here. Alright, so we've got a rich text block. You can click on it like you did before and say, What's this a class is to it. But let's say that I want to add things to it because at the moment it's got some generic stuff in there. Let's add things. All you need to do, double-click in any element or above where you want it to be and does it return? Okay, and if you start typing, it assumes you're typing paragraph text, even though tied to know just as paragraph text, how do I, let's say I want to put in hitting down here, return and I'm going to say this is a mixed hitting. The hitting option. What you do is you highlight it and it will give you the options that are allowed in the rich text box. There's not a huge amount you can do, but basically anything you need for an article or a blog post, chunk of text, you've got your headings, obviously, meetings. Okay, you've got let's have a look. We can make it bold, we can make it italics, subscript, superscript. One thing is, is that when it's a hitting, How do I make it back to being a paragraph? There's no like paragraph option. Just click on the heating again, can you see is a hitting three because it is blue. Okay. Click on it and it goes back to default, which is paragraph. We're just going to be important when we start styling it in the next video. Or the interesting things here, Hyperlinks at hyperlink block quotes, you might not. I'm going to select this, make it a blockquote. Blockquote is, is click off. It's an indented chunk of text meant to be used as a quote. That's why it's a blockquote. Blockquote because it's meant to be a big block of stuff. It's meant to be like when you're quoting somebody, you can just put in quotation marks. But when it's enlarged chunk, you'll use this indented. So it's out of the flow of text and it's meant to be interpreted as a quote referencing something else. And often they'll use this little line. Then that's how they do a blockquote. What else we got selected all blockquote links. That's all. Let's have a look at some of the probably more powerful bits. So let's say I want to add an image, I'm going to press Return. And you might have, I ignored it before. If you start typing, you just get a paragraph. But if you hit return and just kinda wait, look, what's this thing do? I'll give it a quick look at that. It's got some cool stuff. Let's do the boring stuff actually, bullet list, I need orange, I need purple. Okay, It's a bullet list and return again. Let's do something more exciting. There's a numbered bullet list. Let's do it. An image, images, pretty cool because it, Let's add the image. It has some extra features. You can decide whether it's centered, whether it's big as it can be at the moment, if this was a larger image, it would go all the way to the edges, but it's not spreading past, it's 100 per cent size. Left align. That makes sense. This one is quite cool. Let's add some text. I'm going to grab this, actually going to grow some Loren ipsum you right there. Does everybody use this? Generate Loren Ipsum out of the site? It's the most boring side of a guess who's been looking at hose reels? **** you ads. Alright, back into here. So I've got some ticks, I'm going to paste it underneath. Put her tune-in Rambo, just paste it as soon as paragraph text. What an image can do is you can say you, my friend, are left align. You can see the text goes around, right aligned. The text wraps, which is pretty cool. Images you can type in here that has a built-in kinda caption. Okay? The images as well. This is little monkey wrench thing here. Just the wrench even you've got basic stuff. You've got alt-text. Do you get it from the assets other than the Asset panel or do you write custom stuff and you fill it out there? Size-wise, you might decide that the size is actually high DPI, which is half the size, times two. I don't know why that is times two, but you can go full width is it'll try and go full width as far as it can. Custom, okay, you can decide on how big it is going to be. So you can get a bit of detail in here with your image. And this link here is just when it's clicked, go to a URL. In this case, it might go to Unsplash where I got the image from images. And what are the cool things are in here? Let's put something in here. I'm pretty easy to go through, I guess, video. You just copy and paste from your favorite YouTube channel. This is my favorite. And any old and my garage. Any old YouTube clip you can grab, share, Okay, and copy it. Okay, Vimeo works as well. And then you just paste it in here and you'll have YouTube video with a lot of the same characteristics as the image. There's a lot of things you can do in here. But the mostly the same as an image, fun. Anything else in there that I should mention? You can embed code in there. We won't go into code and beans right now. It's a video on my list coming up in this one here, kinda rich, embedded, rich content. I never use this. You can put in things like SoundCloud and Spotify lists. And you have to Google like big list of embed rich content for Webflow. I don't use it very often, but there are things you can put in there. This one here we'll do later, but that's for things like your calendar Li thing, male chimp thing. They can go in there as a code and big code. And while this is good for us as the designer and the designer part of Webflow. It's still goods really useful, really quickly adding content rather than dragging out an image and doing all that sort of stuff. It's really built for the editor, your client, your customer, your mum, who was updating the website because we showed before, if they get into the editor, let me load it up. But in case you forget, you got to make sure the website is published. And you go to the Share option and you make sure you invite them as a guest editor. We opened up the site. And if they haven't got the link from the e-mail, they can just type in a question mark in it. And they can go through and start editing the rich text block the exact same way. You might have to give them a bit of a demo on how it works. Okay, So they can go into here and say actually, I'm going to go through and select Enter. Okay, they're gonna go and just start typing for a paragraph or highlight it and make it an H2 or a blockquote, or return and start adding sort of rich media. Great for articles, great for blogs. Would you tell us how to style it down already? We can't stand it. There'll be another video. Let's do that next. Everyone wants to style it first. Got to figure out what it does. Alright? Alright, let's go do it. 98. Styling Rich Text in a Webflow CMS: Hi everyone. It's time to style our rich text block differently from the regular website. That's a heading one, that is also a hitting one. Why do they look different? Because it's in a rich text block and I'll show you how to knit styles within that same paragraph text, paragraph texts. They look different because one is inside of a rich text block. Let me show you how to do it. Alright, to style the rich text block, you can do it with everything else, or you can do it uniquely for the rich text block depending on what you want. If you just want it to follow the styles of the rest of the website, you don't need to do anything. Let's say that this is a hitting one. I'm going to add a comparative hitting one up here and maybe also add paragraph text. And we get guy's got a chunk up the top here. It's not in the rich text box, okay, there it is, there. So what I need to do is doesn't matter if I style this one. Well, this one, okay, If I click on it and I go over here and I say you wanted to, all the ones on this whole website. And they're all going to be a font that we're gonna be Oswald. Okay? And let's say all the paragraph on the whole website is going to be kind of a light gray or let's do a really obvious color. Okay. Why didn't that work? Because I actually didn't click the old classes. So I remove class. Okay, all of the paragraphs on this website, I going to be blue. Nice. So they all come along for the ride. Now, if that's what you want, that's what you do. If you'd like this to be different. Okay? This is good for the website, but this for the blog or the article needs to be different. What you need to do is two things. You need the rich text block, the kind of parent that goes around at all. It needs its own class. It doesn't matter what it's called. Okay, we're going to call ours rich texts, but you can call it anything you like. And what magic happens when flow is, let's say the headings here. If I say, it does remind you if you forget, but that's my job. I'm reminding you. If I give it the phi, say all H 1s, because it might appear a couple of times, okay, All eight ones, but this thing is new. It says nist, the selector inside of rich texts. That's the class that we just made. And you're like, Yeah, let's do that. Okay. It just means that it's only going to affect H 1s. All of them doesn't matter how many times you use them. If they're inside our rich text box that has that class. Okay, so I'm gonna go here and say actually I want it to be who'd been too, okay, which is different for articles. It's a way of separating content, ugly font choices, okay, probably want Serif font. There we go. Okay, so let's say the paragraph and the same thing again. Let's say in this, I want it to be italicized and I would like it to be not blue because it's killing me. So as long as my parent, okay, of the rich text box has a class applied. Now case we're rich text. You can say you hear all paragraphs. I would like to be going back to being black place. Oh, okay. Why did that work down here and not appear? That's a very good point. Oh, I didn't undo that. I click that. I don't think I did. Maybe that's what I didn't do is have a look. Yeah. Did you see me? There might happen to you. I'll leave it in case it does make sure when you do say I want all H4 is okay to be, wanted to be nested inside of rich text. Only the H4 is in here and watch there's a couple of them, There's another H4. So I'm going to pick a nice, very obvious, terrible color. There we go. Now, I've said a couple of times that it needs to have the wrapper on the outside. So that's going to bring us not to a problem, but it's something to remember. Because if I go to another page, Let's just say I go to, I've got a page that already has it, but blogposts template. Okay. There is my rich textbook. You're like, why is it blue? We made it black. So they need to do is do no. That's right. Just add that rich text. Rich text. And that's going to say, Oh, look at snaps to attention. This is, alright, I'm now black and my hitting. Okay? You're not this one. I want to really click it in here. You might have wondered is probably like, how can I can't change it here? Okay, You didn't go your editor. Within here. You can switch to editor and started doing it, or go back to the CMS and go back to blog posts. And I can't remember which one I was looking at. This is one of them. Nope, not that one. Let's look at this one. Here is where all the changes can get done, if you will, the designer, you'd often work in here. The client often works in the editor. Now you can go through and say actually this should be an H1. Now I'm going to save it and go look for the history of web design. Let's close it down. And it should be that serif font history. It's not this one. History of their name. Wholesome. Does that make sense? Makes sure there's a class around the wrapper for the rich text block. And then make sure you click the nesting option that appears at the top there. Alright, I'm back. I was having dinner and I was like, You know what, I should have told them. I'm back come back to tell you what I should have told you. It's to do with the cascade or specificity. So we've separated these styles for the rich text block. This paragraph here was different because it's nested inside the rich text book, different from this one. Kind of at the Cascades still works because this is a paragraph, takes it to look all paragraphs. It's set to Arial, this end. And this one here, I haven't changed. It's still all paragraphs, rich texts, but I haven't seen anything other than Arial. So it's going to follow this lead unless I change it here. What I mean, so paragraph text here or paragraphs. And because I didn't change it here, this should go impact. Okay. Because I didn't change anything here. It's gonna go Mom, I don't know what to do. I'm just going to default to the parent k, The one up the river, the waterfall, and use that as my base. But if i be a bit more specific here, I go in and say, Look, you the impact was bed. Who remembers the thing? Idb Qdy. You're in their ID, dq dy, should know this of how to do off by heart. Here we go. Comic Sans, take that impact because this is more specific. It's ignoring what's happened up here. So you still got to consider that. Like do I need to change the font size here to heating to hitting one here versus hitting one here. I'm like, No, they're both the same. If I wanted to be both a little bigger, I'm actually just going to use this kind of parent ones so that they all get bigger. And I'm happy with it there as well. So I'm just going to leave the cascade cool. So came back to teach you how to use impact and Comic Sans. You're welcome. 99. Class project 08 - Blog CMS: Hello, it's time for class project. We're going to build a blog seamless. Nothing too big or fancy. Just something simple as just gonna be a homepage and design one of the template pages, okay? And it's about learning that CMS. So I want you to create your own collection and you just need three of these items in your collection. Where are you going to get it? I want you to reinterpret an existing blog. Don't mind where you get it from. If I give you the content, it all ends up looking the same. And if we use the stuff that comes from workflow, it all looks very Loren ipsum. Just go out. If you have a blog that you'd like or go out and just look for blogs. These are some of the blogs that I look at creative review, the workflow one you might go through and use this. Adobe has got an amazing one. Dribble. They call it triple stories. And what you're looking to do is two parts. We're going to have a homepage like we did with is some like this. Okay. They've decided to do their collection list like this. And when you click it, you go into the blog page. So I don't want you to go through and pick three from what are these sites? There's the title you can grab, There's the short summary, the date you can make up, and there's the image thumbnail. So just grab three of them and you don't need the entire page. Just do above the fold stuff. And I'm not looking for like every single thing we made. Just go through image, title. Make sure you keep the author, okay, and then grab a chunk of this doesn't have to be all of it. You can see, hey, look, What's that? You know what it's called? It's a blockquote case and different headings. It just brings some of it in up to you. You can try and figure out how to do drop cap like that. Okay, We just grab a little bit of the text and then go edit to your blog post. So pick three of them. Let's have a look. Redesign existing blog, blog collection on the homepage. Just have a quick nap, doesn't have to go anywhere. We're just kinda getting it all together. Style it as much as you can. If you're going to spend half an hour on this, to spend half an hour on this. If you're going to spend half a day on this spin, half a day on this. It's totally okay. There's no right or wrong here. One has different available time, have a nav, have a hero section, and in the summary cards. Okay, that's that collection list that we've done a couple of times on the homepage was my testimonials page. That's this that collection summary where you can click through and go read the big article. She is a better one. There is down the bottom here that on your homepage style a bit of the mine. And they should link to those pages. So three actual pages. Just be clear that it's a reinterpretation of somebody else's when you're posting it and it's not your work. And just include a link to the author and a link to the original article. Just put it on there saying this is the original article, style it and make it part of it. Oh, I'm back. Okay. It is the next day and I thought, you know, what they should also do is just to turn on the disabled index k. It's in your project settings publishing ECO. Remember this one here, here, here. Okay, just to say to Google, hey, don't bother indexing this because it's a duplicate. These are not the droids you're looking for. Okay. Move on to not try and rank for this stuff because it's not ours. Carry out. While you're there. Just make sure you explore the editor interface just so that when you are dealing with clients, you know what their side feels like and try and do what they'll do. And it might give you a chance to work out like, oh, I need to do this on the designer side to ensure x happens on the edit aside, really just two pages and a collection homepage, one blog page template that spits out three pages for you because it's awesome, because it's the CMS deliverables take a screenshot of your homepage and your blog page layout. So this should be a total of four homepage and your three blog page layouts and upload them here, also share them on social media. Be interesting to see what u was and do a bit of a before and after to take a screenshot of what we took it from, what you ended up doing with IT. Problems you run into help you might need to reach out to the community, especially the groups here for advice, sharing. All of them, one of them, none of them. It's up to you if you want to share on social media. Alright, that is the class project for a blog seamless. Go do it. Have fun, make a seamless, do us proud. I'll see you in the next video. 100. HTML Embed Code From Calendly, Twitter & Castos: Hi everyone. We're going to look at HTML embed codes. It's a way of grabbing functionality, content, interactivity from other websites. We'll look at Calendly, casters and Twitter, ones that I use. But basically you just copy and paste code and you end up with cool stuff on your website. You can see podcasts, just plays on the website, somebody else's hosting and delivering it. You can book time and a schedule to Calendly and you can read all my tweets and then dynamically updated. And the services provided by Twitter, we just copy and paste the code. It's a super easy way to add like real functionality to your website that maybe you didn't create. You've borrowed from other people, making you look good. Alright, let's go and make us look good, okay, to get any of those going, we start with, I'm back on my portfolio because my other site was getting pretty messy. So I've just made a little section for it down the bottom here. I'm going to hit a button and go down to looking under components, this one here called and bid. This will receive the code. This is where the code needs to go. Let's go find the code. I'm going to use just some of the things that I use now this is not limitless, but like there's thousands of sites that allow for their services to be embedded on your site. I'm going to show you like this one here. Podcasts. I use the cycle cost us. They host my podcasts and we don't want to put them on, say, a website, not in a podcast. What I can do is I can say actually this one here, I want to link to it and look at that. This is just as an easy embed code. That's what you're looking for, that's the term the embed HTML embed website and bid embed code. Those are their knee. That's the language you're looking for. And you just come back here and paste it in and hit Save. And there it is, just a piece like that. Okay, I'm going to preview my site and you go, okay, playing in my website and big codes are great for adding a bit of dynamism to you or maybe potentially static website using other people's services, hitting kind of volume to your site. I'm not sure I'm saying there, but there are cool. They look cool on your site. Okay, so let's do another one. Well, one thing you will notice is that that took up the entire container. So let's say this contain that I've got it in, probably I'll stick it in a div tag and if I change it. So we're going to call this one div Locke is gonna be called div podcast. I'm gonna put you in there, okay? And this div podcast, I'm going to shrink up. It's put some padding on the side. Oh, can you see it even changes or it knows it's responsive code. So it knows when it gets smaller, it's just going to use that side. So you can control the size of these things for some of them just by playing around with the container. Let's do another one. So let's say for that same podcast, what I do is when I'm interviewing somebody, I use Calendly, it's just a scheduling app and I don't want you to go sign up for all of these, but you will have some of these in your life. And you can add them to your site because building our scheduling system inside of Webflow yourself, Wow, She'd be tricky. This actually connects to my Google Calendar, which is awesome. It's pretty amazing. Now. They're all gonna be in different places, these embed code. So this one here, I'm going to click share and it's the ED to website. There it is. Inline in bed. Okay, So just Google the service that you're using, Mailchimp, Eventbrite, HubSpot. So every monkey, whatever you are using, look for the embed code k. And then often you can just grab it. And this one here, look, just copy it. This one here has a little bit extra look. You can change the colors of it. If you went on the free account, I'm cheap. Cayenne was using the free one. Okay, so I'm going to copy it, copy the code, go back to Webflow. I'm going to put in, I'm gonna put it just another embed code. You don't mix them up. Okay. You have them in separate ones. Can put another one underneath. Okay. Oh, I missed it. Look. Let's just say it's not in the container. I'm going to paste it in. Excellent. Save and Close. Hit. Now, big thing look, well they wanted appeared. When this one appear, some of them do, some of them don't. It depends. This one is what's called an iframe. The code is wrapped up in this iframe, which is like a little browser that loads this one here, will still work even close. I just want to work, but it needs to be published. You can even see it. Look, I need to be published fist. So I'm going to say publish, Here's my portfolio and have a look down the bottom. There we go. There is my Sweet app where people can book times with me. Okay, it's all interactive. It's doing stuff. They can actually book it. Can actually book it because I've got no times in July using the power of somebody else's service Calendly, which you might be paying for using the free option for k. One thing I do want to show you though is some of them, not all of them. You'd have to just this one here. Can you see it's got a height. Okay, I can see the code. So what happens if I go and change it? You can totally change it. So your code on your site, okay, because I can see this side, I can't really do. I can change the colors here because there's something that's happening on, because that's something that's happening on Calendly site. I could probably do it though anyway. So yeah, there's things you can do in here and just go and change. The thing is, if you do go and change it, you need to save and close and publish again. For this to be on the live site, Let's do one more. I'm going to put in the Twitter feed. They're all slightly different, so this is mine. Go follow me if you haven't. Okay. Dan loves Adobe. I'm going to copy this and I'm going to actually, yeah. So Twitter does it this way. They've got the sweet publish.twitter.com option. You can go here and you can say, what do you want them bed? I'm like, Oh, I want to invade. You can embed a particular tweet. Let's say that you want it to be part of something you're referencing in an article. You can embed just one tweet, can copy and paste the URL for it. Okay, I'm gonna do profile, but you can create maybe a list or you can follow a handle of somebody we might be following. I don't know what my portfolio might be, UX design projects. I'm going to paste my name and go like this and embedded the timeline or just a button pins on what you want to have a look at this one. And unless you wanna do anything else, just copy it. I'll let you go through and have fun with like customizing the options for the things that you're doing for me for the moment, I'm just going to throw it onto. So how awesome embed codes or paste. You'll notice I have line wrapping on. Otherwise it just, it's still there. It's just, you gotta kinda scroll this way and it's kind of hidden over there. Kinda like to break it to see what I'm doing with doesn't change anything, just views the code on multiple lines. So again, it's one of those ones that need to be published. And I refresh my site, scroll down. Well, I probably need to contain it uncontained, so it's just expanding forever. You can see all my latest tweets. Okay, there's ways of doing it for Instagram and Facebook. I was working with a client who runs like a Pilates studio. She uses a bit of software to help her scheduled time and for customers to book and pay an embed code. So they just had a website and you could just throw it on. Then people could make payments through the little embed code part. Now it's not just the designer that we can add them, okay, plus fine embed code. You can actually do it inside rich text box natively. Okay, remember we did these rich text box so that we can have the client or customer ed content. So let's look at it. This rich textbook as the client can. I, I'm going to switch to the editor so they can get in there, they can start adding text. And when I hit return, remember this little plus? They look kinda like the embed code. It is the embed code they can go through. And I grab this again, copy, paste, save and close, publish. You can see here it's not going to appear while they're in the editor, but the website visitors will actually hit Publish again. Alright, back to live site. Oh my goodness, look at that. My podcast, Sarah Parkinson who was interviewed in this, will be horrified by the design. She is surrounded by, in any way embed codes. Let's do one more, actually an old one because I want to show you one last thing of styling. We kinda covered it, but let's have a look. So Calendly offer some really cool options where you can use this one, pop-up text, if I copy it, continue, grab that, copy it, and jump back in. Underneath here. Maybe instead of that button, actually I'll put it underneath. Okay, so you can see it embed code underneath this thing here. And I'll paste this in. And let's have a little look. So that's kinda big and ugly. Let's have a look at what actually happens. So jump to publish site. You see here scheduled time with me. We'll click this. Pop up. How cool is it? Okay, the reason I wanted to show you that is because it's awesome. But also like how do I style it? What happens is not in all cases, but this particular bit of embed code will actually take the style from any sort of parent wrapper. We're going to put a div tag around it and style it. So diblock there. You can go inside. The if block is going to be called kel and Lee. And I'm going to say everything inside of this is going to be public Sans. Let's do something obvious. We need to change. We can change lots of things about it, but let's just save and publish and jumped to the finished site. There we go. It's taken the style from the div tag. Pop up again. Nice. Alright, so that's a bit of a whirlwind for embed codes. There's just so many out there, we're not going to cover them all, but there's probably something out there that you're using already. Might be a CMS, it might be a C RM, it might be some other acronym that I don't know or service that will have an embed code that you can add to your website. Because sometimes you're like, Oh, can we do this in Webflow? You're like, actually, let's just check there's not another service out there that does it really easily and we can just copy and paste the embed code, right? That is it, embed code over. 101. Creating an Ecommerce Store in Webflow: Hi everyone. In this video and the preceding videos, we're going to build some e-commerce, okay, we're going to build this. It's going to have products, be able to have different kinds of products. We have editing to the cart style, the cart style, the checkout. It's very exciting. Let's get started. Before we get started making something, the purpose of this video in the series here is to give you an overview of e-commerce stores in Webflow, we're not gonna get into lots of detail, will give you everything you need to make something, but all the real small details. It's gonna be outside of the scope of this course, but you'll see, you'll get up and running pretty good. The other thing I want to mention is that how close e-commerce is to what we've already done for like our blog CMS. Those collections are we did earlier because it's going to help inform what we do for e-commerce. And you'll be able to see that connection between the two, making this part pretty easy relative to, I guess starting with e-commerce. So first up, let's make a new site. So following along, making new site, do not look at all my ones. There's a lot of drafts and stuff. I blame it on course making end up having to make a lot of stuff just to kind of get it nice and smooth for you guys while you're watching. Don't judge me. I'm going to make something called the T store. Okay, do the same thing, and let's make a site. So the big thing from transforming from being a regular site that we've done previously, either static or dynamic is this button. Click on this. And it's going to say, I'm going to make two things for you to collections. We know what a collection is, so products and categories. Let's do this. The one thing is, is when you are creating an e-commerce site, you got to change your site plan. Up until now we've been dealing with startup will get quite, you'd be able to do pretty much this whole video with the starter one. You just won't be able to actually take payments until you switch to one of these e-commerce plans. Remember, Stata is static, static, dynamic, big dynamic site, and then e-commerce is with this stats. Okay, I'll get you. This page will change style. They'll lay it out. They'll change what the rules are for the different prices. The prices will change. But just know that you'll have to switch to an E-commerce one. We've got the right details. Alright, so let's have a little look what's happened. Now, this big setup guide here opens up that It's actually really handy. I'm going to cover this myself. I mean you together, but definitely go through it. And the big thing is, is that under E commas now there's products and categories. Products are my products go, Let's add some, I'm just going to add some sample stuff. We're going to just do a whirlwind one in this video because I feel like it's good to see the whole thing and then worked for individually rather than trying to adjust. Go through every single video and at the end going, Ah, that's all goes together. So this video is gonna be a little bit fast. Alright, we'll break it down later on. So we've got a bunch of products. What else have I got it under the pages tab. Look at that. You've got some new stuff. A template you like, hey, didn't we have a template earlier, but it wasn't called e-commerce. Remember, now blog. That guy. We had CMS collection pages when we did our CMS and we had our blog template. So it's the same ham, but this is e-mail, e-commerce pages. There's still a template and just like before, okay, if you need to add stuff, this is our product template. So we design one for many products. We've only got five at the moment. But let me just quickly add a container, add a text block that takes block is gonna get the name from the name of our product. You go, that should probably be, be hitting. Alright? Okay, let's add an image and the image if we connect it to our products, anyone image field. Here we go, It's going to bring through a giant image, brings through the price, the description. I said he's bring through the price because that will make it a proper product at the top there. That's okay, and I'm going to bring through the price. Alright, so we styled our templates like before and our collection, which is now hidden under the e-commerce tab. And see that hit, you can still make collections, but they've kind of separate. Okay. They function the same way. But they're under e-commerce and under here and our products, we can keep adding stuff here where a client can through the editor and we'll keep adding them to the store. It's also added some other pages, a checkout page, look at that. Just done. We can style it or we can leave it. But that's ready to go. Isn't order confirmation page. Yes. Thank you very much. Other things that it's added. Let's go back to my product template is new stuff in this ad panel, Canada elements. So we've seen all these, we are getting quite used to them. Was this e-commerce that wasn't there before. That happens when you hit that button and turn it into an e-commerce store, you get this stuff was hidden before. We can add up Add to Cart. I'm going to add this in there, somewhere above, below please. Giant image. You can see they look, it's got the price, I can add it to the cart. But flow makes it pretty easy to make an e-commerce store, but also give you all the control where we can go through and add all the classes to these buttons. Salam, how we want with our sweet new med, styling skills that we've learned through this course, adding classes, global classes, convert classes. So before we go, there's gonna be some things we're not going to cover. Go to the setup guide here. You can work through some of them on your own. Like we'll definitely do a business address just because we can kinda stops us from getting too far. Like reviewing your currency settings and what kinda shipping you're going to do in your text for your country is outside of the scope of this course. It's different for everybody. We've plugged do make it easy. Things that we will cover adding a product or design are storing card will do all of these. We'll look at the e-mails, we'll go through how to host it. Kinda cool stuff, alright, that is pretty whirlwind. Overview Ed products and then two pages connect them to a cart and a payment gateway, make money, how can it be? What I'm gonna do is actually I'm going to delete these products. Okay, so I'm gonna go select all and I'm going to delete, and I'm going to delete my stuff on the page to just to get us back to home base so we can start again by container. We're ready to go. Let's go through now and look at those individual steps. Individually and see where the roadblocks might be and how Webflow deals with e-commerce. 102. How to Add Products to Your Store in Webflow: Hello. In this video, we are going to add products to our e-commerce site. We will add one manually. We'll go through a few other settings in there. Then we'll import the wrist via CSV just to speed things up, I'll show you how your client can add them through the editor as well. And we'll end up with loads of products and nothing on the page we'll do, we'll look at adding them to the page in the following video. Let's add some products. Okay, so let's add a product. We're gonna go to our e-commerce panel. Okay, we gotta products. Go up here and create a new product. Okay. And you've got product type. Is it physical, digital service or advanced? Basically the differences are they all start the same physical. You Scott name, the slug, the URL description, what category it might be part of, any images associated with it and billing, how much it costs. But then you've got things like skews and you've got shipping costs, height, weight, that sort of thing. Okay? But whereas digital, it gets rid of a lot of that bottom stuff and say it's just, there's the filename and this is the URL. So this might be for something like, Hey, download the plans for this. Here's an e-book and you can have your link to the file, maybe Dropbox or something. Okay, so here as well, you can go service, which basically cuts all of that off it because you don't need to deliver anything like a digital product or shipping a physical product. But you will end up doing for a service, is you'll end up customizing the thank you page a little bit differently to say, hey, welcome, and you've signed up for our class or fitness thing. And we'll see you on Tuesday at the class. More to do with the like thank you email. You can see it here. It gives you some examples like consultations as well. Go. The last one is a combo. It does product, it just kinda adds them all to the bottom. You can do does it have downloads? Yes. Does it have shipping? You can do a bit of both. So what we're gonna do though, so we do physical. I'm going to change the type. Now. I've got some text in the exercise files. There is a new one called exercise files. There's one called store, open up product one. You could just type it in as well. Jasmine green tea. And I'm going to grab the Loren ipsum for the description. We'll do categories later on. But you think categories might be decaf, might be a category that people could search by my different teeth. Well, maybe regions, maybe a category of the different tea growing regions. I don't know much about tea. I don't even know if there is a Jasmine green tea. Anyway, media, it's gonna be the image, so we could drag it in or under store. There's this one called T, bring that in. Billing. Okay. I'm going to be my price is going to be 13, 95 texts. You can work on what their texts. You'll have to decide what that is in your region. And the skew the stock keeping unit is generally just something used by stores for a unique identifier so they can easily keep track of it rather than calling it Jasmine green tea, they might have different versions of it from different suppliers and it has a nice code. Inventory. Maybe you've only got ten of these, maybe selling prints or t-shirts. It's, it's a way of you can show the quantity and when it runs out, you can stop it. Shipping as to wait, okay, you need to sort out your shipping caves, go through how much shipping is going to cost you and you do calculations with weight, the end, the actual physical dimensions. We won't do it for this option. Let's click Create. Here, my friend, we have one product exactly like before where we had our blog posts, except this one has got prices and shipping. To save some time, I'd like you to go through an import, a CSV. Okay. I've got one in your exercise files because if you're just doing your own prints and screen prints and I'm selling them online. You might put them in one by one. That's totally fine if you're working with, can remember the acronym for it, but some sort of stock control. You can bring, you can export a CSV and bring it. And I'll talk about CSVs and a little bit because there are slightly more challenging than say, our blog post, CSV, note testimonials. That's what we've brought in, but we'll do that in a video. I got one ready to go. Okay, we're going to click Import. It can take a little while depending on how big your databases. Well, the CSV is. There we go. We've got forward them, alright, so we've added products through the designer. Your customer or client can go via the editor. Before they can do that, we need to publish our website. We've done none of that. Okay, so I'm gonna close that down. And now you would go and share it with your guest editor and the editor would open it up. We've done this right? I have nothing on our site yet. But look, they can go to e-commerce, okay, and they can start looking at their products. And just like we did, They can add a product name, but they get the white version, we get the dark moody version and Webflow. But it's basically the same. But what you might notice is there's nothing on our website. Let's go to that next. 103. Adding Your Ecommerce Product to a Page in Webflow: Hello you. We are going to take our products that are currently trapped inside our e-commerce tab and add them to their own page. We're going to add a cart. We're going to be able to pick different sizes for our product, add them to the cat. There's a cod pop up. This is a cool video where we get to do quite a lot. Actually, we don't do a whole lot. We'd throw it, does a whole lot. That's even better, right? Remember though we are designing a template, not the actual pages themselves, so they are under my pages. But we just design this one products template. And it will pull all of the listings from our e-commerce products. We've got four of them in there and it will pull them all and create those pages for us. Guess what? It's exactly like we did the blog post when we did our CMS earlier on. So there's just a recap really, let's look at the, so we're looking at the template. We're going to build out really quick page. So let's do it quickly. So we're gonna go Command E or Control E on a PC. I'm going to put it in a container. Command E. I'm going to put in a div block. That div block is going to be just a fake nav as a placeholder, remember Command or Control Return to add a class to that diblock. And this is going to be called div nav. I should probably call it a section. That's alright, Command E. Let's add a section underneath this one, and this is going to be my product. I think it's gone inside of my container. Name, this section, I'm going to call it section product. Let's have a look. You ended up inside of that. Let's put it underneath and let's start adding our pieces. We kinda hinted at this earlier on. Okay, so we're just gonna decide what goes first. What I'm gonna do is I'm going to put in an image. Okay, I'll start with my image. We started using the shortcuts. Let's continue. So Command or Control E or an image, we're going to connect it to. It only knows this because we're inside our product template and it's going to get it from my images field size-wise. I'm just going to make it 500 on desktop because it's too big. Section product. Let's go Command or Control E and let's put in, we're going to put it in a heating. This heating is going to be hitting one shore. Let's get it from the name of my product. Now remember, you can decide which one you're actually looking at if you like, oh, that's the wrong, That's my ugly product. Let's look at Mongolia all along, t, along t. These don't match by just grabbing t images from Internet, finding T names. They might not even be T names. But anyway, let's look at adding the textbook. This one's gonna get it for the description. Like before, we can be adding our classes to this and styling it will style it a little bit later when we kinda know how to style things. Now we're looking at more the functionality of e-comm. Now we're going to add our Add to Cart button. Okay, so under here, there's these group, okay? These two look the same. This is like your overall cut for the page or website. Okay. You can have ten things in it. This is the how to get stuff in there. Button Add to Cart. I'm going to put this one underneath. Didn't get it. Click hold, drag it to the right. Now it's in why do we have a size that was some of the data we imported from the CSV. Don't worry, we'll look at that. I'm doing something called variance and a little bit, but mine is way too wide, so I'm gonna do a minimum width of 200, which is not going to work. Let's just do a width of 200 Caught. And these Add to Cart buttons have some special powers. So if they do something slightly different than what you're used to, we'll go through these next few videos and show a few of them. I didn't know you couldn't do a minimum width on it up until right then normally it's an a wrapper container and giving it its width. But hey, there are some special powers and some strange things that happen with costs because they're trying to do a lot with these things, pulling in data, but that's good enough for the moment. Let's go and test this thing. So when you tasting e-commerce, sometimes you can test things under the preview mode. You can go through and say, I am There we go. So many different sizes. Sometimes though, you need to go and publish the site, otherwise, it doesn't work. It will tell you. And if you are running into problems before you go off and try and figure out a solution. It might just be that more than anything else we've done, e-commerce needs to be published and testing on your staging domain. So let's have a look. So we can click this, we can miss with a quantity. And to cut though, it's going to say you didn't have a cut on this page. We've got to add to cart, but there's no cat on this page. Okay, so we need to actually add the cut. We need to add that any page that you want to sell things from him also do it on the template here. Perfect. Where is it? It's this other option here. So add the car is kinda like deciding what you're going to do, what you're going to buy. It needs to go somewhere. It goes to this one. And this one here, I'm going to add to my navigation. That's my cart button. I need it to be on the right for the moment just because that's where the cat feels like it should go. If you are playing along and you've got like say the navigation from in here or from somebody else's template, the component, navbar. We'll look at that a little bit later on. This and weird stuff that happens with that needs to fight it out. But again, we'll cover the overview stuff before we get into some of the nitty-gritty, alright, Now it should work preview. I want two of my hundred gram versions and I'm gonna say etiquette. Look at that. We've got a cat. It's all done for us and it looks kinda good. Set to zero, but that's stuff we can fix. Oh sweet pop up. All right. Well, have a look at some of our other pages. That's the one we put in and it doesn't have that drop-down. All right. My friend, you have added products and we've added it to our website. Next thing we need is let's make a big list of all our products and put it on our homepage. That though, we'll do in the next video. 104. Adding a List of Your Products to the Homepage: Okay, So we've created all of our pages. What we wanna do is link to them from the homepage and create a list like, like this so we can see all our products all on one page. Let's do it, alright, because I couldn't hack my nav being so boring, I made it less boring. I added a bit of texts in here and made the background color that's selected. I'm going to copy it because we need to add it to our homepage. The moment we're still in our testimonials, I should turn it into a symbol. Years. Yes, you're totally right. I'm gonna go delete it and a little bit because we, I'm going to show you something and a little bit. I know what's coming, so it's best not being a symbol. I'm going to add container. My nav can go inside. I'm going to put a section in here for now. I'm going to get it in. It's going to be my section for our products. Do I need to name it? Probably not. Sexual product already exists. I did it in the last video. Didn't I? List? There we go. Okay. To add all of our products to the page we've done it before. Just go to here and you're like, how do we do it before move the testimonials and remember the blog posts on the homepage. How do we get all of those, that big old list? That's right. Use the same one. Cms list. Go we'll see me as collection list. It's not different. Okay. You say you had there. I remember this. Where does it come from? It's going to come from my e-commerce products. Look at that. There's all four of them. So I'm going to stick mine for up that way and preview and nothing happens. What else do we need to do? We need to add the different elements that we want to actually appear in here, like we did the product template page, but we've done that before as well. Let's add an image. Click inside of here, maybe just add it to one of them. Command E, image. I get it from the products and there's only one image to get froms. We get that. I need to play around with the sizing because I just randomly got stuff off the internet. But we know how to crop images, we won't do it right now. But as we want to add, let's add the name of the product. So this is exactly the same as we did before on the template page, I can get it in the right spot. Sorry, I'm going to get this text. I'm going to put the name of this. Should probably be hitting, maybe hitting four or something like that. It's alright. It takes bucket is for the moment. Again, we're not going to style it. We're just going to add some more text box. Let's go to on prices here. Well, we might just go, we might just add a button and say, alright, when this is clicked, get it from the product, actually get the URL, yes, connect to, remember this page, URL, we actually want to take two pages and maybe there's two. Now there's a purple one because it's gonna get it from a collection page. But now cases the e-commerce page, which one? Current product it's gonna pull it from, whatever that rapid name was. Can you see rapid name? And they've gone now, you can see it's coming from that button is going to link to sweet cinnamon. That one's going to link to this. Mongolia is going to link to this button here. Okay, We're going to change this one to view more. Let's do a little preview. Let's have a little look. Let's go to organic camomile, herbal tea. You go back to the homepage and it doesn't work. Mainly go back to the homepage. Let's go back the long way. Home page, neural works. You might decide not to do this. I'm just going to turn it off for the moment. So I'm going to display none because I want to turn it back on. And let's say that we want to be able to buy from this page. We can go to our new handy ed element. We're going to use the Add to Cart. And remember, we have to have the cart on the page. That's why I copied and pasted across. If you don't have it, make sure the cat goes on there as well. I'm going to put it in. You can see it has to go some place special. And that appears when I first learned it was like, Whoa, how can it not go on the homepage? It just needs to go into the right part of these list items. If you start styling it with dividends, I divs, just be careful of where it lands in here. Okay, so I'm gonna go you had to cut and just make sure you see red doesn't like it. They're not read. Good, too high. Excellent. Read bed. Oh, it's not going well. Okay, Just under this. Alright. We've got our products all listed on the homepage. What else can you do? The collection lists? Maybe we did it earlier on. If we click on it, we can go to settings and we can filter it. Okay, So this is where I get to decide. Maybe I want, I want three, but it's showing before, how do I cut it down to three? That's right. Limit the items just to three. Please. Click on it again and I click on the list. Now, we can sort it as well. Maybe we sought by random order save, we can filter. Okay, so let's add a filter, the name equals. Now in here, okay, There's a few other things. What we could do is move with that switch we added before. So we might decide to go into our collection, which in this case it's an e-commerce collections. So it's in here, gotta products. And let's look at adding an option that says, am I featured one of these little toggle switches? And the one thing is, we don't do it to the actual products themselves. We do it to the product way back here. Okay? So we say the cog, not the actual item. And we want to add a field for these guys. And we're gonna say, let's add a new field. It's gonna be a switch. And this switch is going to be labeled sale items or featured items. And I'm going to save it, save the collection. And in here now I can go through and say actually, who's got a sale on this one does. And don't forget to save changes. And maybe Jasmine tea, maybe this one here has a sale on as well. Save it. Now I can go back to my homepage using our sweet skills from earlier. We can say, actually I don't know how to do this already. Homepage, I can click on the navigator collection list. I can say actually just show me the filter that has or is it has a sale switch turned on to just those to appear genius? Well, it's, I'm happy with myself. I hope you're happy with yourself too. We're learning new e-commerce stuff, but leveraging some of the early knowledge, making this whole lot easier, probably only need two. Now, here we go. That is adding lists to our homepage or any page we get to reuse that CMS collection list, Alright, Onto the next video. 105. Payment Settings in Webflow: Welcome back. We have got our products on our pages. We've got a cart is just a few other steps before we can start taking payments or at least taking orders for our t. Let me show you what they are. The best way is going to be actually just to publish the site and go and check so far we can get. So I'm going to check the published website, not the testing one. Okay. And I'm going to say Add to Cart and it's going to say, you can't, you need to pick one of these. Okey-dokey got a card, add it to it, or who we're getting there. We're going to continue to check out and check out as disabled. What does that mean? Let me show you to go and enable the site. It's not going to let you straight away. It's going to say you, Let's go to our, Actually it's go to our project settings. Okay, and we're gonna go to e-commerce and it's going to say, Hey, before you can go any further, you need to tell us your basic stuff. Okay. It's mainly your business address. Me. I'm working in Euros, which you can't type in. Okay. So E for euros. I'm going to put in my business name and address. You look away. Alright, that's my blurry address. Continue. Alright, so now we've got some extra features over here. And the one we want, we can nearly do it is remember we need to enable our store. So let's go and go general. Let's go to checkout and let's checkout oily. Who got to upgrade our hosting. We've talked about this earlier. I'm gonna go do mine now. You can still do a lot of this course or the diversity of these videos without upgrading the host. But I'm gonna do mine so I can go further right in back of upgraded and now pick up my homepage, my collections gone. Or is it? First thing I always try is resetting the page, reload piece. No items found. This is not good. You ate, then I'll go figure it out and I'll let you know what happened. I figured it out. Okay. It was my products in my e-commerce under products, they're all still drafts, so well, they got changed drafts, they were published. Okay. So what I can do is I can go individually and say You are not a draft US staged for publish or going straight up, publish it. The difference between these two is this will kind of stage it next time I hit the whole website being published, it'll go along for the ride. If I had published now, it'll just go live straight now and not wait for me to publish the whole site. But I'm gonna do them all together. I'm going to say select them all. Thank you. Over here I'm gonna say stage full publish. Yes, please. Well, I'm guessing that was it. Good. I didn't actually check. Yep. They're ready to go. We've upgraded our hosting, we've got a cut on our page. We've added our business address. Let's go turn it on YouTube. You checkout is gonna be enabled. Going to be enabled. You need to add a payment provider. So let's click on that. You can go here or there, click on that button. You need to connect one of these two. Now, I don't want to connect my 12 here because my business is not really connected to this T store. I don't want transactions going into it at the moment, but that's it we hear as your payment gateway and you'll be able to turn your button on. Okay, instead of taking payments ready to go. Now with these payments, I'm not going to cover how to sit up Stripe and PayPal. Stripe is a super common credit card processing. You can use PayPal as well. You can use both. There will be limitations. Okay. So when you are setting it up, just check what they are before you go in settlements of the client potentially because there'll be what you really want to do is you want your client to set up the Stripe and PayPal, not you because they are the ones responsible for the taxes and paying the fees. Also, both of them will require some identification. So like when I set up my Stripe and PayPal, they want to know your details on one of your passport or your dresses. They put things, you'll add a bank account and they'll verify that bank account. They will work reasonably quick. But there will be some limitations with new accounts on how much you can process and how much you can transfer out, that type of thing. But yeah, that's it. Add payment provider, stop making, stopped building T store empire. Alright, that's it for this video. Let's get on to the next one. 106. What Happens After a Purchase in a Webflow Store: So somebody's made an order on your website. How do you get notified? What happens next? Well, two things happen. An email goes out and then there's orders that you can go and check. Let's look at the e-mails first. If you go to this little cog here, there's an option that says email. You can add branding to that e-mail. And on the bottom here are the different emails that you can see and change. Go order confirmed. Okay. And you can see here here is a test template of it. I've got one of my one of my products has got a wrong name. Need to go and fix. But this is what you, or if it's your store or your customer gets that gets emailed out, you can test it down the bottom here there is a test e-mail. You can send it to yourself. You can see is partially customizable. And there's all sorts of different stages in that email process of when it's been received, when it's being shipped, who gets the email? Okay. That's defined in here under general. No, it's not. It's under e-commerce. General. Too many generals. And you can see here that is a blurry email address. So it will go, so you and the customer get emails. But it would be handy to have one central place under e-commerce under orders that listed them all. And there is I didn't have any orders at the moment, but that's where you can go see them in the designer gave you a store owner. You might just do it via the designer. But if you're the customer, you might be looking at it by the editor. Remember, this is the view that your customer, client, staff member sees and under orders will be the list of all the orders. Alright, so that is what happens after somebody makes a purchase. E-mail goes out, edited this orders list. 107. Customizing the Cart Settings in Webflow: Hi everyone. In this video, we're going to look at this cart button and the add to cart element that we added earlier and show you all the secrets built into it. And I'll show you how to get inside of them so that you can style them. Let's stay with this cart first. It's special. Why is it special? Because it gets his own little icon over here in the navigator. And inside of here, there's a couple of things. There's the cut button. Let's say we want to style it. We just started like we've done anything else. We say button cut. We say you are going to have all the rounded corners and maybe shutter, nice or not nice, but you get the idea. You can style that thing pretty easily. But how do I find in style that pop up that you saw at the beginning? That's this thing here. That's the cut wrap. And you're like, wow, normally and you click on something, can you see it highlights it. This one doesn't highlight anything, so it's all there. Okay. All of that stuff is in there that you can go and do that. How do you make it show? Basically click on the cart and we're going to look in the settings. So we're going to look at the little cog over here, not the styles, the cog, and it comes with some special stuff. Here's the spatial cut stuff. So open cart, That's the first thing. And by default it's on a modal, pop-up modal. If you just had a stylet, you can go now and say You textbook, we're going to add a style. So back to S for styles, text product. And I'm going to pick a font and the size. And I'm going to pick a weight. My case, it's gonna be unitless and that's going to be one of whatever that is. Maybe a little bit more. Just gonna be 1.3 of those 20 pixels. Yes, we should be using rooms, bed down. We're going quick. Yeah. Okay. So we can get into it to style it. It also has some other options. So again, back to our settings. You can see the card type. We can do one that pops up from the left, one that pops up to the right, or one that actually drops out of the cart. Let me demo that one. So let's open it up and click on it. You see that one? Alright, What else does it do is have it selected in the settings. Open it up. Now, these ones have some basic settings. These first three, you can see it's all the same. This last one has a few other ones like you can align it left or right to the button depending on where it is, how to open it. Do you have to click on it or can you just hover above it when it pops out? You can play with the easing and this option here, they all have that says, does it open when a product is Edit? Do some user tasting. I know that on lots of sites that sometimes I'm just like stop opening up and trying to add things to it. And it keeps opening up when you go to find that continue shopping button to a little bit testing to see what works for you and your clientele. And down here, it will preview how many are a netlist. It's not actually doing it, it's just previewing how many. I've only got four mine, so it's only showing before. You might crank it up just to see what it looks like. Lots of other than their product title, putting a big hitting ticks in here might not be that useful when we got lost. Then the other thing while we're in here is that there's gonna be times where, what does it look like when it's empty? Okay, you can go through here and change the text. Okay, also you can go and add a class to it and style it. Same thing with ERA. You've done the bottom here. This isn't there by default, can you see? You can go and style that the font color. Okay, Let's turn off the card. Now the Add to Cart button down here is kinda special as well, trying to find it. Let's close all of that up. And let's find the add to cart that I dragged out from the elements panel. So this person here, this one here has the same thing under settings. You've got a few things. Do you want the quantity to appear there? Maybe you don't. Maybe nobody ever picks more than one. Like there's just some I can't think of one right now, but do you want three back massages? You do not? Just the one. Okay. So it might not make sense that I'm not sure if that's you could probably think of bidder use cases for that. Okay. Add to Cart. Do you want to show you that are not just straight to buy now, maybe you're only selling one thing. There's no like cut to add. Just want to go straight to like Yes, this is the one thing nobody buys more than one of your things. Maybe it is Add to Cart and know by now, unlike the cart, you can go and style the out-of-stock K and the error options. It's kinda like forcing them to appear so that you can go and install them. Another page you'll wonder style route to the car, which is kind of on any page you put it on. Same with the add to cart. There is under pages. We looked at it a while ago. There's these checkout pages. You just go into them, install them as you want. Now with these checkout pages and the cart and everything, it's still following that CSS cascade case. Any styles actually before that, the checkout form, that's the one thing is if you have nothing selected and here it gets a bit confusing like well, how do I do? Is there anything I can do? If you click on the actual form itself by default, it's kinda clicked on something else I'm Buddy is click on the checkout form, kinda like the cart and the add to cart we did over here. And under settings you can do things like there's not a huge amount, so you can do some of it. A lot of it's controlled by Webflow to make sure everything works. Okay, so there's no, no reason for shipping. So it kinda turn it off. Let's hide the billing address. And like before you can style what the error message looks like along with just the regular page. Now back to my styling rant about this taking still part of the cascade. Okay, so we can style this one here and get this looking great with individual styles, that's fine. But let's say at the moment everything is still using ARIO. So what I'm gonna do is go back to my body, even though I'm on this checkout page and I must styles, I'm going to go into here. I'm going to say all body tags is going to be something you can see. You can see the more changing. So make your high level changes when you're designing the rest of the site. And then you can come in and make small changes in here. Alright, that is customizing your cart. You're Add to Cart and being able to style all of them, including this checkout page. Alright, that's it. I'll see you in the next video. 108. How to Add Variants in Webflow Ecommerce Product: We need to talk about variables. Variables are these things. There's a little drop-down. I want jasmine tea, the €13, but what's the 250? Oh, I can save big dollars and it's a different price. So our variables is the size of the product. Yours might be size of clothing, small, medium, large, might be different colors, might be combinations of colors and sizes. The cold variables. Let me show you where they are in Webflow. Alright, so you'll remember that we actually have some variance already. They came from the CSV that I gave you. Okay, so what I'm gonna do is go and click the I'm gonna go, turn them all on so we can see them. So I'm going to turn the limit off so we can see that person. Okay, The old Jasmine green tea doesn't have any variance. To get the variance, we go to the product which is an E commas got a product. And let's look at that Jasmine one. This is the one we manually added, okay, and then down the bottom there under Options, weirdly, it should be covariance. So let's add an option set. This might be color, weight sizes, flavors, whatever it is, I'm gonna be doing the size. Let's try it with size or weight equal to size. And we're going to have how many options I'm going to have. I'm gonna be able to sell it in 100 g and you get hit Enter or tab K and 150 g as well. Sorry, America, I don't know what that is. It's grams. That'll do it seems appropriate. So let's have a look at let's hit Done. You had done first, otherwise, you can't get to this next bit, or at least the one that you change it. Where did these come from? You're like, I didn't make these. By adding these options. It says, alright, you've got these, you know, you've got something and there's two versions of them. If I keep adding them up here, if I've got like one KG version and I hit enter and I had done. You'll see down the bottom here we have got one KG option. I'm going to bend him and we get this, please. Don't do that. On there. Is there an undo option? I don't think there is. Or undo. Undo, undo, undo. Oh man. You know, Ross, I think I'm doing I think I'm undoing, but not in here because this is still open. It is undone out here. These are in drafts that actually did that work. Uid, I'm going to fix a second. Don't go anywhere. Thanks for not leaving. So I'm back. I just pasted it all back in. And we were yeah. Okay. So we've got these n Remember when I added one, how did I get rid of it? I accidentally did that and they didn't read the notification because I know what I'm doing. What you do is it's not over here or there, or there, it's up here. You say, you can, you delete this option. So that's what I wanted to add that one-kilo option. The other thing that I need to change is the size change, but the pricing is going to change in here. So I'm gonna go in and I'm going to say, let's go what was written in your notes. If you want a made-up price. So type anything you like. Compare at price is quite interesting. Let's have a little look. Let's switch that out. So the Compare at price as this one here. It's that light, it's their price that has a line through it, like normally before the sale is this price, but you can get it for this price. I've calculated, that's what it would cost if you bought it in the hundred gram lots. So you're saving a whole lot of $14. That's where my tea businesses don't take enough. Okay. So lids go in and close it. Okay. Price my quantities, I've got ten of that and only one of those. Let's save it and make sure it's published. Because it's staged, I need to go and publish it. Now I'm not sure if I've shown you this already because I had to reshoot a bit. So I always go close that one, close that one. But you can actually just go and close this one and they all collapse. Alright, I'm gonna publish the site. Can I check out my site like I can do it in here. Okay. In preview mode. Okay. But would that have been published? It works. I've got my drop-down. We've got a variable about the price doesn't change, which annoys me. So on the actual main site that I refresh that I can't remember. I didn't refresh it to see the updates and now I should have 100 gram. Oh look, it changes. So simple things. Okay, so that's a variable. You can go crazy with variables. You can have different colors and different sizes. I wouldn't get too much in the nitty-gritty, but you can have all sorts of different combinations and different practices. You can also switch out the image. Let's do that together. So let's go back into here. Let's get back into my product. And for that different size, saved as a different color. That makes sense, right? You've got different color. You selling underpants in these green ones and red ones and blue ones, you'd switch out the image for the different colors. In here. I've got different white, so I just made a little image for us. Okay, So I'm in the 200 gram one and you can see this is the variable image. I'm going to replace it. I've got one in your notes in your exercise files. Just got to 50 g save dollars, even though it's euros here. And let's close it. The image has worked. Cool. It's really big image for what I'm using it for. Let's publish. It gets straight to publish from here. Once it's being published, once you can also publish it straight from there, the first time you need to publish the whole site. Now, if I refresh the site, we should be able to switch images, price change, and they change that. Alright, that is how to add a variable, look for the options in your product and don't delete it, or at least don't click the heat cannot undo this, read it first n. Alright, that's it. On to the next video. 109. Adding Categories for Products CMS Collection with Filters: Hello. In this one we are going to add categories. In my case is going to be regions where you can get t from India and China. And I'm going to add my products to those categories so that we can filter by them and search by them, group them together. You might be doing it for men's wear, women's wear, kids wear, those could be good categories. Budget, premium might be too good categories. Home where hardware. You're gonna have to think of your own categories. Once we've created a category, which is pretty easy, we're actually going to then go and on our product pages, be able to say, show me all of the T that is related to this T by its category manager and this is menswear. You don't want your kids, we have stuff to appear here. You want although related category of products. Alright, let's jump in. Let's do some categories. Categories, you don't have to have them, but it's a good way of separating out your products. In my case, I'm going to separate the products out into regions that you can buy the tea, India or Sri Lanka or Japan wherever you want to get your teeth from, you can kind of pick that category. But for you it might be there's a means and a women's and kids section might be a premium and a budget option. You'll know your industry and what kind of categories they can be lumped into. So you can do it two ways. You can go to the same as here and go to categories. Or you can do it via the products. Let's do categories from the categories tab. It's got a new category. My first category is going to be, let's say China. Okay, I'm going to create that one. Actually from Mindanao. You can actually start adding them. Let's say that the Mongolian can be from China. Let's go from Kevin mile. Okay, and I'm going to add sweet cinnamon black tea as well. Okay, I'm going to save, That's one way of adding categories. You can do it by the product as well. Let's say jasmine tea here, you can see categories. You can pick from one existing one that we already made. Or over here, you can add, basically it's the same interface, okay, This one is gonna be India. And you'll see your URL. It'll break them off into like little sub folders as well. And you can see it is, it gives me the option of adding these other ones at the same time. I'm just going to create that one. It can be for more than one category. So you could decide that this one is from India and China. Tricky to do. But let's have a look at these other ones. Make sure you save changes. Mongolia is going to be from India. Sorry, I didn't think this went all the way through. And make sure you save changes. Dan, read the pop-up text and the last one is okay, so that one's got one, that one's gone. That one's gone. I'm just looking here. And that one's going, most of them are Let's put most of them from India. Save. What can you do with it now, let's close it down. You could, on your homepage, you some filtering, you can see you, well, we've done that before. It's either reset the page, we'll go back here. Let's have a look at our products. They're all ready to go. Something's wrong, it's back. I did nothing anyway, ignore that. So let's say, let's go into here, Let's grab our collection list and we can start filtering. We can say actually on this page here, and we've got, actually let's turn to limited ofs. We've only got four, but let's say I only want to show the ones on this page that the category that contains China should only have two. This one, I think one of them's got two of them applied. India and China, gets really handy as well when you are on a page. So let's say that. Let's go to our product template. Yes. So we're looking at the Mongolian one. I can't remember who's applied to watch lost my way. That's good. Jasmine TK. And what we can do is let's add that same list. So I'm going to speed this up. Okay, it just added a container and then edit the list that we've used before. And I'm going to connect it to the categories, but I'm going to connect it to the products. Because what I wanna do is add these. I'm gonna do two-by-two. I'm going to speed up again and add a few features. Okay, and I'm just connecting them to the name of the products. Plus a throne, an image speed mode. Okay, So on this page now and I want kind of like if you're in this and you're in a category, so you're in men's fashion. I want to see other men's fashion, not kids fashion potentially. The problem is that I can see the same one again. Let's have a look. Let's go through my list. And let's have a look at the filters. And let's first of all say, I want only to show the categories that contain. That's an easy one. Can you see this little lightning bolt? You could say, I kind of remember which one it has to say any categories from this current category. It knows which category it's in. Now, why are they all still showing? I think Jasmine tea is in both categories that's filled up. So it is showing all the listings that are in this category is and because it's in both of them, all of them. Let's have a look. Give myself a little muddled. So green tea is in both China and India. So it means it's showing them all. So let's have a look. Who's this one's only India. Let's set this one to China only. Just so that you too to China. So changes and to, to India. So make it a little bit easier. You save changes. And you have both India. Nice. Okay, hopefully magically when we get back, it's only going to show two things. There we go. But if I go to one of the other ones, Mongolia, you go, it shows the Mongolian peer. But what you'll notice is that it's showing this one twice, which is not what I want to filter it some more. I'm going to click on the list now. We're just starting to go down the worm hole of like the amazing breadth that workflow has when it comes to this e-commerce, this essential courses like yeah, it takes over everything. I'm not going into too much detail, but I guess this is cool because it gives you a sense of like the thought of lots. Okay, so I'm going to add a filter that is not the name, the product. Tricky one to remember, like the product is the current product. No, I want is not the current product. So I want to show you this list. Want to filter the products that are not the current product. I can do that and get rid of this other one that says Share to the categories. So I can show me the ones that are not this product. Does that make sense? Kind of. It's this one here. Ed name. There's a few things to go through, but I've used this product one here, okay, and said Not this product. Super cool, super powerful. Back to my list. Three, please. Lovely. Alright, that is it for categories in Webflow. 110. Importing a CSV to Webflow Product Ecommerce: Hi everyone. Let's talk CSVs, spreadsheets, excel documents. Oh, what fun I have in the store view in this video when dealing with products. So e-commerce products, putting them in one by one is fine for some jobs and other jobs. Obviously it's not practical, especially if you're selling a lot of stuff. You've probably got some sort of software that manages your inventory already, okay, and what you need to do is export a CSV. It wasn't just import it easily. Like remember when we did our collections, we could just like grabbing the old CSV and it would just kinda ported across and say this one belongs there, this one belongs here. It's a little trickier. Now not the most expert at this, so you might find better ways of doing it. I just know that when I was doing it, I had problems when I was like, you know what, they probably should be in on those problems and my solutions. The best way to do it is when you do so I'm going to import a CSV, the product can you see it says ensure your products are imported correctly using our online CSV template. So just download that. That's the best way because you'll see all the titles kinda give you a kind of a template. You might have to reorganize your information. You might need help from like a master spreadsheet Pivot Table person. I've got a course on Excel, which might not be right for you, but anyway, so CSV template download that and that's what I did. I show you the template that I've got. I've opened mine up in numbers, which is the Mac version of Adobe Excel. Basically you need to follow these titles along with top here. Okay, so just make sure those match up and it will import fine even if you leave them blank. Now with this one here, I'm going to show you some important thing. So these two names need to be this. Oh, actually let's describe this so you can see I've got two of the same thing. Why is it two of the same thing? Because actually variants often in stock control have, so that's my where is it? I have my 100 g and my 200 g. Okay. Which one are we doing? We're doing camomile. Okay, so there are actually two different products, even though they've got the same name, the different sizes mean they have Different, say skew numbers, similar but different. So you end up having two parts on here. I was spending ages trying to work out how to put them both on the same line. It's actually just two separate lines. Okay, The other interesting thing was, obviously you can decide whether, remember we looked at digital download versus product. You can decide where it goes, where it gets put as a product. This is my product description just currently Loren Ipsum, I didn't have categories for this stage. You can put them in here. We just typed down in manually and images. Images can be a funny one like early on in the course, we just imported them and you'll notice that in this one that came through automatically. So how did that happen? You need the root path or the full URL of the image. Now the pages on but the actual image itself. I'll show you how I did it. I've got mine from Unsplash and I'll show you, alright, Let's say that you want this image to be part of it, okay? Alright, I like this one. So you click on it. Okay? You, what I like to do is right-click it and there's an option that says copy image address. Now on PC it'll be something similar. Basically, you don't want to copy the page, but you want to copy the URL for this, you might have to Google how to do it depending on your browser and I've copied it. And basically all it is is watch this when I paste it in, It's the complete URL. It's a bit messy, okay, for that image, and it should load on its own without all the stuff in it. If you're dealing with a product on your maybe your own database, there might be a way of getting to it. You'll have to check with whoever runs the database if there's a link that would flow can get to, if you're on the same network, it might work. Anyway. That's how it works in this way. You might have to just put your products in a public drive so that you can grab them. And in here, where is it? Yeah, I just pasted them in. Anything else to go through different prices, different skew numbers. Does it require shipping? True? You might have your virion heightened white in there. There's the digital downloads sizing options and that's it. You can have more than one. I've got only sizing options. The big thing to look at it as they look all the same. Maybe it's just me, but option one, option two, option one, option two values or these together. These are together. So it might be that this is the sizes and then there's the corresponding colors you're going to end up with quite a lot. But if you've dealt with SKU numbers and products stuff before, you know that there's actually every single unit has its own skew number and there's lots of it. Hopefully you can get your inventory software to talk with Webflow, check out what it is called and see if somebody else has done something. Maybe there's an integration, maybe there is plug-in for it. And if it's a deal breaker, reach out to Webflow and see if they've got a solution that other people might have had. They really want to welcome e-commerce to this site. Good business for them. And the designer slash CMS slash e-commerce side is really good for us. So hopefully you can make it happen. But anyway, I just wanted to give you a little heads up about what I've done with those CMS's and why he was worked and why the why the one in the template works and why the CSV in the exercise files works. But maybe you'll want isn't download the pre-existing one and use that as a guide. Alright, that's it. Csv, goodness over less spreadsheets, please. 111. Float & Why the Cart Button Won’t go in the Nav in Webflow: Hi everyone. This video, we're going to put the cart button in the navigation and you're like, That doesn't seem that hard. It's not, but it is, there is some secret ingredients inside of a cotton is some secret ingredient inside of a nav that make them both don't want to play together. Plus I want to introduce you to something called float. And in general, more to kinda look at some of these things as Funds Solutions to be found, not things that are broken, it can never be fixed. My web design psychology video be at one with the problems. Alright, so earlier on we looked at editing the cart. Can we just throw it up in our really plain now that we made and I said Do not put it into the nav, that's from the components. Let's figure out why now, I want to show you a couple of things about some of the pre-made components, some insights into that, and show you that lots of stuff here and Webflow is really easy. Just get it going. And then there's a couple of things that require a little bit of problem-solving and it's not that you are bad at, it is just part of the process. I don't all the time finding you will Xin in problem-solving. Alright, so we're going to add that component. So we're gonna go and, and elements or components are pre-made stuff is the navbar, we like this. Remember why we liked it? Because it done that is, is because when I get down to mobile, it changes these out too, that it has some secret powers. Those secret powers over here, because it down. So the nav bar has a special icon. It has a container in it, it has brand. It has something called the nav menu, which is this thing here. And then it has this menu button, which we can't see. That's the secret part. It's something that is set to display. None. It's there or is it block there it is. Okay. But only turns on when it's at mobile. And that's some of the problem when it does come to China mush, that the cat also has secret palace and said, Look, we're going to use the car, not the add to cart. That's this one that has all the quantity and size of the cut button is like you could total. So we're going to edit and it's going to first of all go, Hey, you're not being the menu. And I was like, what can you be in the menu? It seems like a great place for you. What you realize is that can you see where it's written? It says cut is not able to place it in the nav menu. That's actually the class. They may not the entire Nav, just that particular class. So I can put it over here. The secret abilities for the cart is that it has all this stuff in it. So have a little look at it. So cat has the copy button, which is the thing we can see, but also the cat wrapper, which we can't see. That's the thing that appears when you click it. That is the div that appears there. So trying to smash those two together would mean that if I put the cut in here, it means it would disappear. That menu will disappear when he gets to mobile. And so would your cart and Webflow likes to try and make sure that simple creatures like me don't end up doing silly things like that. It would work. There's nothing wrong with code. There's cart being inside that, but it would turn off for a mobile. So what they've done is they've made Webflow do a few things, unnatural Cody, things to say. You can't be in the nav menu because he never Yeah, Read it, can totally go in there, but they're just saying, well, nobody ever wants that. So we're going to make it not happen in the workplace. So knowing that the company in the same position, cool. Just do this. I can just push it over. Now, the other thing that we're going to run into is that this nav bars constructed a little bit different than the kind of best practices from this class. We've been using like often using flex to get things to do its job. Okay, and that totally works, but we're using somebody else's component and older component from Webflow. There's nothing wrong with the way they're built it. They have just built a different way. So the way that they've done it in this particular one is I've said you to the nav menu using something we've done, position and relative and absolute. One thing we haven't covered, okay, we're getting reasonably advanced here is that they've done this thing called float. You'll come across some elements that have this. Instead of using flex to kinda get it to push to the edges or grid, they've used float and it's floated to the left and floated to the right. There we go. So I can say, I want you floated to the right and then I want you to watch this. The cut button won't let me adjust the float. Well, it says float can not be adjusted. It's blocked it for this particular thing so that it works. So there you go. It's many, so you don't go. And Rick, this part of it, it'll end up floating over to the side. You can do it to the entire cart, but not the button. Strangely, just things that we've decided are in our best interests. And over here I can set this to float. Here we go. I guess I'd like to do these videos because sometimes I can make courses that seem all like very logical. Just do that. And then you go off into the real world and you're like, I guess what I want you to do is to embrace that web designers. Tricky Webflow makes it easier, but they're gonna be challenges and it's all part of it. And while it's like super frustrating when it's not working, but when you do get it, you're like, Oh, wait for a genius. I guess that's the takeaway and float. Have a look for flood. The other weird thing is that I have no idea why. Let's have a little look. Is brand there it is there. There is an Add menu which is over there, loaded to the right nav button. I know that's the hidden burger menu is the cat. Why does the car in front of this? I can't work it out. All I know that if I do this, it works. That's all that matters. Okay, Have a look. There'll be a lot of developers watching this video and way better at code than me. Have a look inspected. Me know in the comments why I know that. I've just put it down to the mysteries of the car. There's things going on that are amazing. Them and maybe escaped me. But I mean, you really should be, should be the other way round and the little list here. The other cool thing is that let's say that I want to get down to mobile and let's have a look. It probably like it makes sense for the car to be there in the menu to be there. But when you're down at mobile, it feels weird, feels like they should be alternated and we can do this. Luckily, what Webflow have done is they separated out the menu. The menu is the one I can see on this page here. That's this one. On the mobile version. There's the button, but look what I can stick in between. We There we go. Cool. So I did that work other way round. I want the card on the button to be above them all. Here we go. Doesn't make a whole lot of sense, but I can have the cart on this side because they're separate the menus there and a cat there. We can stick pick the menu there, the nav burger menu there. We can stick the cotton the middle so that we can do some cool stuff and switch it around to take this caught on mobile a little bit further at the moment, desktop find big, can see everything done at mobile. She's getting tight. Okay, so what we can do is the cart button can be adjusted depending on the display break point. So what we can say is there's the overall cart, the cart button, and actually have different settings in here. So let's just cut. We can do things like the way it pops out. We can open the cart, but the cart button can you see has its own settings. And we can still up in the cart. But here it has the option of saying the quantity. I can turn it off. Do I run to get rid of the word cat? I do. It's going to click on here. And I'm going to say you have a display of none still there on desktop, not there on mobile. We can make it a nice round the thing, give her the background up to you. You also might go and have a look at the way other people have dealt with these problems K, because you're not gonna be the first one. Let's go. And like, I'm in dribble, I find this good for web and UI interfaces dribbled in particular, I just typed in shopping cart and I was just like scroll, scroll, scroll, and look at that. This website here deals with it by having the cut on its own line. Because it got lots of information. They've got a big search bar. They've decided to take this kinda like double decker nav header file. There's another one here. It was, and it wasn't. This one has no Cart. Be interesting to see how that one is working. It's just a visual, so it'd be nice to actually check on an actual app. There was one more. This one here. You can see what they did is they occupy this top right, and the menu moves over here. The brand has gone off to know it can be stuck here in the middle on this version. So you might do some swapping around. My advice though, make it simple and just have it on its own line, then you'd have to worry about that now. Alright, that's it. I promised we'd fix that Top Nav and we learned about float and we looked at web design is fun solvable problem right after it's frustrating solvable problem. Alright, next video. 112. Work Along With Dan Building the Full Tea Store in Webflow Part 1: Hi everyone. We're gonna do a ride along with me, right along with Dan. We've been looking at lots of these topics here now in isolation, like making these videos, looking at one particular thing, okay, and they're moving off from it. So what we're gonna do now in this video is I'm actually going to build this actually, let's pop it up on screen. Alright, so this is it. This is the mockup in Adobe XD. I've used XD because we've use Figma. And I guess I get asked a lot, like which one should I use? And I just, I'm happy to use either. So we're gonna build a desktop version, but also a mobile version because we've done not as much Mobile in this course. And for this particular client, fake blind. And the, it's gonna be used mostly on mobile, but only have to show you the steps like we have to go desktop first, workflow and then build mobile. Yeah, and I'll just take you through my process. So because this is less of a tutorial or more of a ride along, I'm going to rant a little bit rent. I'm going to try and narrate my own life, which is tricky. And it's gonna be a long one. So how long? I have no idea. I'm going to guess an hour and 32 min. Can you put up the time CFOs anyway, Nicholas? 45 min, 2 h, 3 h. And it's gonna be what it's going to be. And yeah, it's going to show you the bits where I get stuck and how I fix it. I think it's useful to see, but you don't have to watch this. I give you permission to skip along. I'm going to cover nothing new. Just reuse the stuff we've learned in the course and title together. It might be useful, remember as well that this is the best way. The best way, given the skills that we've learned in the course. In my opinion, they might be a better way of doing something that's totally okay. Leave it in the comments if you do know like, Oh, why didn't he do it that way? And you watching this have a read of the comments as well. It might be like, oh, that's how we did it because I'm bound to get stuck somewhere along the way. Yeah. Alright, let's get into it. See you in there. Alright, let's get started the morning I've got my coffee. You tell us the morning. I had to look at that video that I just recorded and that's my morning face a little bit. Not waking up yet. Alright, so we're gonna start with this is the XD mock-up. Like I said in the intro, I'm going to have to do desktop first and then work through the mobile. And I'll show you my process for that. And there's no way the moment that I know you can switch to be mobile first in Webflow without doing some super hacks or right? Navigation, I'm going to start with the normal navigation as in the component. I'm going to make this will do my bidding because I love the easiest switch out to the mobile nav. Alright, let's start, let's start by coloring it. And I'm going to often if the tag looks good, okay, navbar is a great class. I'm just gonna leave it and I'm going to let it float, generate the class name. Grabbed my colors from XD. I'll leave a copy of the XD file if you want to have a look at it, if you know XD, but don't worry if you don't have XD or Figma skills, you can just be building in Webflow. Alright, so the class, I'm going to twirl this down. I'm going to say a few other shortcuts at the beginning here, just as a last reminder. And then I'm not going to do it throughout the course because an hour or whatever it is of shortcuts will both go crazy. Okay, So Option Alt, click, when he goes to 12 and down, delete you. That's going to be that color. I'm going to use it as a global color. I'm going to use that Scott T. And this is going to be my primary. Now, depending on if you're working for a designer or whether you're the designer. You'll see in this one, I've actually got a basic speaking here, so some naming. Okay, So this one here is primary three. Okay, so I'm just going to keep that naming throughout, okay, and just refer to that because I can reuse it. Alright, let's get a logo. So here and upload it. I've got some files that I've got for the whole of exported them from XD. So I go through just quickly and I go and I find him. Okay, and I select it. And then I hit Command D or Control E on a PC. Or you can right-click it here in your Layers panel and say Export Selected. And I just picked SVG because it's scalable. Okay? I've got some jpegs I'm going to use. My son went through and grab those and actually end up with two logos, PNG and SVG. I'm going to use the SVG. Please come at the right size, which is good. Now, I like to do the alt text, the ones I know as I put them in, otherwise I never go back and do it. So I'm not gonna do it on the object, I'm gonna do it in the Assets panel. Okay, so in here I'm going to say that this is the Scott T. Ireland's logo. Can help myself three and keyword, and I'm sure there's a few Scott t's around. I haven't checked. All right. So that should get the alt text. Alt text will come from the asset. Excellent. Now, this navigation is being built with things like float and not grid or flicks. So there's different ways like instead of trying to get grids, great, you can get it stuck in the middle bars building and must myself, I'd definitely built in grid, but I didn't, so I'm just going to be cheap. Use the class that's going to come from maybe brand. Okay, and I'm going to say just showing the top please. And good enough. Okay. Actually, it's not good enough. Let's go and grab it. Down. There we go. So at the moment, I think the buttons are holding the size of this. If you get rid of these, the thing collapses. Like it didn't collapse. British shows the buttons that are keeping it the size. Or maybe the nav menu, which is good for me. And I'm going to get rid of one of them. I'm going to rename got browse home and browse t. Honesty. And I'm going to style these buttons actually, instead of selling the buttons, I'm gonna put in my body tag because the buttons use this font called inter. Okay, and I use enter as my paragraph text here. So Enter and I've got this one called a Mac tick nomadic. So I'm going to Google Fonts case. I'm gonna go install those for the course. Project settings. I'm going to go to fonts into IFA, into, and I'm going to find it. Okay, I use regular and bold in my design. I know it because I checked it. You can go and check your designs. Okay. And I don't want another one called a MA. There is a metric ends only, there's a bold. I think I only want the bold. Alright, so those are the m2. I'm going to jump back to the designer and I'm going to set up my body tag. Body tag. I'm going to say all, everything on this website is going to be a font of that enter. Okay, and my default font size is looking for the most generic 116. These, He's also 16. Perfect thing for the line height. And actually we should use rems divided by 16 REM cope. So one room. There you go. Okay, and this one here, I'm going to use the like nothing like this has just means it's going to be normally one of whatever that is, that's 20 pixels. Make that one in this hyphen just means it's going to be one of whatever that is. So my height is going to be one room. Sometimes it's 1.11, 0.20, 0.9. It's like a percentage of whatever that is. So I'm going to start with one and just see how we go. You can see it's kind of working up here. And I'm going to leave the default color as I think the default color in. Let's have a look. In Webflow is like an off gray, off gray, just a lighter gray, slate gray. I'm going to make it solid black because that's what the design says and I do what the designer says. Alright, and that's good enough for now. And let's look at these buttons. So these are nav links in the nav menu. What I'm gonna do is I'm going to create, I'm not going to create a button class because the button, the generic button is this thing here, these in here, so unique as in the morning you use just there. I don't use them anywhere else on the design that I can see. So what I'm gonna do is leave button because it's a really good name for a class. And I'm going to call this one a bit more specific. And these guys don't share basically anything that both uppercase, I guess. And I'm going to have two classes, I've decided. Okay, so this one's gonna be separate from what I'm going to create later called button. Alright, so there's gonna be nav, button, nav, the thing, the thing, and the thing that's a bit more specific. Alright, and I'm going to say you white. Excellent. Now I'm going to say You are all capitals. Because half the men capitals and it kind of, it's good because say the client is gonna be working on the site. It means that they can't put in lowercase and miss with my design. So when I go and add it here, we're going to use the Command Enter or Control Enter. I'm going to type in button. One, means that it forces it to be uppercase. Alright, other things, it is clear which is good. There's a lot more space in here. So what I like to do is space these out like M. If you click on something and you hold down the Option key on a Mac, alt key on a PC, and you hover about something, you see it's a 67. So half of that is 30 or 33, 33. So I'm gonna make sure this padding of 33 button nav has some spacing of 20. I'm gonna make it 33 on both sides. And I'm just keeping an eye on it, like in here in XD or kinda like command one gets to 100% and I kinda half line them up. Not perfect, but you can see if I toggle between the two, I can kinda go I kinda close to it. And if you're thinking, how did he told me between it on a Mac, you hold down the Command key and tap on a PC, it's different. I think it's control tab or Control Shift. Try a few of them. You might have to Google like how to toggle between openly applications on a PC or Mac, it's Command Tab. I do that a lot between XD and we sometimes get confused. Which one then? Alright, so let's add this cart. Now. We did this earlier where we had some issues, but we know how to fix those now, first thing is, is if I go to add. It's not there. Why don't you there I can see CMS, but here is normally where the e-commerce stuff is. That's right. We need to convert this to an e-commerce site. It's gonna give me two collections. Let's do it. Now again, this is just a free, you can get quite far with the e-commerce without having to pay for it, get it set up for pay, but we can get this ready for the client beforehand. I'm going to close the let down because I wanted it to do is to turn these things on. Hello, and to cut. Let's get you up there. Member can go in here, but it can go over here. Can't go in there. Oh, why when you go in? Oh, I get it all the time. I think every single time I grab it. I grabbed the add to cart instead of Cart button. On the cart button, it looks so similar. Alright, the weird layout stuff. Let's get it styled. Let's get it down actually in place first. So we kind of worked out before that. If I grabbed this cart button or can I remember, we go to position. We can float him. So you can't do it to the button, but I think you can do it to the cart. You can, we can float him. So we haven't done much fluid in this course, but this navigation has been built with floats. So we're going to have to use what they have done. So I'm gonna float to the right. I'm going to get it on the other side I do. Which in this case means in front of the menu. Weed. Hey **. So let's style it now, and let's get it a couple of things now, in my thing here, There's no number. I might go back. Clients say, do you want the cart number? They just might have not thought about it. But let's just say cut quantity needs to be turned off. You can hide it because it's an option. But I think with the cart, you can actually just, it's one of the options under settings. So I've got the cat selected and hide when cart is empty and only appears when it's being used or rights. And let's have a look at getting the cart. Now, I could style it to get this to be uppercase K. So this is uppercase here and it's not here. Actually just turn it off. Okay, I'm just gonna write carte because nobody's going to change this. I'm not going to make it editable for the client. Can type it in uppercase. Anything else? I'm going to have to play around with this height and the color. So we have to add another color. So let's do that first. So I use my iPhone on the keyboard, use my eyedropper. Okay, Rick, my design. But that's the code. Aren't there. Okay. So I want to say you button for card. Okay. I'm not going to add the style name because there's a Goodstein name on here called Cut button. And when I create it, okay, I'm going to say background. It's going to be type it in here. I can see it created the class based on kind of what foot width float thought it was gonna be. Which is actually quite handy here. And I'm going to edit to be a global class. And this is going to be my S T secondary. And this was the third one as well. Click Create. Now I need to play around with the padding. I'm going to do the same as before. Let's do spacing. And it was 33. Hold down the option key, alt key on a Mac to get both sides 33, the top and bottom, I'm just going to match what's in their line. Nice. Alright, everything's kind of lined up and then you just need to come up with tiny bit. All right, looking. Okay, Let's now go and see how badly it goes via mobile. But I tend to do is just do a chunk like a section and then go check if a moon ball rather than doing the whole thing and then having to go back and do it. Okay. So tablet fingers crossed everyone? Yeah. I don't think I think there's enough room to actually it doesn't need to change to the mobile on tablet. Okay, so I'm going to keep the buttons open. So what you do is you click in E and F, and there's some options under settings to say this one here. Keep the Menu icon, like enable it at phone landscape for me. It should be there by tablet and nothing here on, should be here like this. Perfect. The one thing is, when I get down to here, I'll check that they're not broken on these ones. I know for this particular client that there's a fictitious client, but mobile-first is the important one for this one is that a couple of things is down here. It's looking fine, looking fine, but that should be white and this needs to get smaller. Okay, so to do it down here though, I have to do it wherever I want to do the burger menu. I have to do it first. Whenever it appears I can't do it in portrait and landscape because it will float down. Remember, if this thing here, icons are funny and some icons are lists like images, and you style them before they come in. But this particular icon, you can start with the font color, which is awesome. Okay, so icons are no canine, I'm going to call it Icon burger menu. Because on my end up with more than one icon. And you can start it with the font. So topography and pick white. What I'm also going to do is get rid of the word cart at this level. Okay, so I'm just going to say Cart Add it's finite. Tablet hot though, I'm going to say you are a layout of display none. And hopefully now on the mobile, there is one. I'm using the one-two-three along the top of my keyboard, 121234. Alright, it's like I play with the spacing. Again, I have to play with it at three, which is my mobile landscape, just needs to be a bit smaller. So this one here is an overall. It's that it doesn't tell me it's actual size 0, 18 either side. Okay. So I'm gonna see if I can do that the moment it's 2032. So on this one, so I'm just gonna do 18 either side. Yep. But this thing he is kind of off to the edge is a bit of padding on that side. So I'm just kinda get rid of it. And it's not the same. This one here looks fine. They're just everything is a bit different, like the icons are different heights. And so sometimes there is just a bit of eyeballing to go. Actually, let's just increase this to make it look square. And it needs to be a tiny bit taller. 123.4 for the one I'm really most concerned about. Alright, so navigation, almost finished. We're going to click in here and go, you open up, show please. And height. Yeah, let's go and do that. So what I'm gonna do is I'm gonna say you are going to be a design, doesn't have it in it. So you have to make some executive decisions. Is it gonna be green, was going to be brown. Another color, button nav. It's still the same button nav, which is interesting like the button nerve is here. But when it gets down to this option, it gets kinda redesigned and other style applied to it. And I gotta do it to the landscape version because that's when it first appears. Okay, So you show and you are going to be on this version, background color of that one. Okay, Maybe what do we do? We make you same color. Color. Color. Excellent. Maybe it just stays like that. When it drops down. Alright, command Shift P, Control Shift P and give it a click. Now I'm reluctant now two, and leave it there because I want to go and check it on my mobile phone. Because checking it in the screen. Yes. It's a right on your desktop here like this, but it's better to check on your mobile phone. So I'm going to publish it. Open it in a browser. Now remember, this might not be true for everybody. You might just type this in on your phone. I like to use this option and go send to my devices. And I can connect to my Google phone. And it just appears on here. It's pretty sweet. It looks good. The buttons look big enough. We'll have to check it with Google to see if Google's okay with the button size, okay? Okay, chickens accessibility. But it's looking fine. One thing on the phone though is can you see that little line? And that's that. Okay, so I'm gonna go, you just make it a little bit covered up. Alright, so good. On mobile. Let's move on to the next chunk. So let's have a look at what is it? There's hero box here. Looking at the time as well. This is going to be way longer than I thought, isn't it? You already know you don't you don't tell me. Okay, let's get our section in and work on this background image first. Okay, so I'm gonna go you, Let's add our container for it all, basically all the rest of the sites in a container on all these pages. So what kind of do that? Just check. Is there anything that breaks out of the container. So I can do that by clicking in here, Command or Control E. I'm going to go section, command or tune or Control Return this the last time I promise Janice is gonna be my section here. I'm actually I wanted to contain it and i and u section can go inside. I'm going to put a minimum height on just to hold too big, just so that I've got something to look at for my background image. Okay, Let's have a look. So the background image, if I look in here, is, I'm reluctant to pull this out because it's actually a bigger image. And I want a bit of extra for the different sizes because you know that when we resize this, it will get hot, bigger and smaller depending on the browser width. So even though it's probably, I'd probably go knock the top and bottom off it a little bit because there's quite a few bit of extra pixels that I probably not going to need. And that's gonna be a big file size. But for the moment, I'm going to see, just see how this goes. So background image is what I wanna do. So section here I've selected this up, background plus excuse image. That one. I'm going to get it to cover. And I'm probably going to go from the center rather than the top left. Kinda matches what I did in him. The next thing is putting this over the top. I can't remember in the earlier part of the course, did I add, like, there's two ways of doing it. You can clicking through all the buttons. You can add a second color blocks over the top or you can add the effect. There's a filter called shadow, sorry, brightness, and you can lower the brightness. I'm going to just add two background images. But actually this is gonna be a background overlay. And can you see the difference is this one is kind of like a greenish tint. These things will catch you out if you're not the designer. I know because I made it that it's not black or the top business hue to it. I'm going to grab you and I'm going to look at the opacity. You see it's 80 per cent. That's what I'm gonna do. I'm gonna go at you and say, you're color of that. And you are going to be 80 per cent of that and that should match pretty well. Look, let's see. Yeah, awesome. Okay. I need to push it down from the top a little bit. So I'm going to do it to watch. I'm gonna do it to the section or the container happens on the container. They're in there. And I'm mobile. Kinda happens. Yeah. It seems to repeat itself enough that I'll do it on the container. So actually, no, I'm going to do it to the I'm not this I'm going to do it to the section here. Nope, window to the container. A container is going to have container. I'm not gonna do all containers because I wear I'm going to use container a few other times. There'll be a padding on the top. I actually know we want, I think of a better idea we're gonna do is make a global class. Okay, so we're going to say, I'm just going to throw in a div tag and I'm going to create a global margin class. There's going to be margin, top of, remember I've got excess, Sam and Sam. Okay, there's medium, large, extra large. Now often when I'm doing a job, I have to write them down in front of me. What I've decided on excess is eight pixels, is m, the small is 16, then it gets 24, 30 to 40. I can I don't know why they won't stick in my head. So I write them down on a Post-It note where in front of me right here. Okay. So I've got this lying around from an old job, post the note and I'm going to guess that I need I'm gonna guess I'm in XD. And you use this, I'm going to hold down the Option key and it says 20. So I'm going to try and keep consistent, like the designer hear me pick twinning because it looked good. I'm going to pick 24 so that I'm consistent with my fonts and my spacing. So I'm going to use 24, which is my medium. So in XD, sorry, in Webflow here I'm going to say you are a margin on top. You're going to be medium. And the spacing is going to be a margin at the top of that 24. Hope the designer doesn't notice that it's not 2024. Delete U container, it's going to have a class of empty. Okay? So imagine tough and the medium one means I can reuse that medium top would probably have to create it. You might be at a point. Now we go on, I'm going to make the excess and small and medium, large. I find that every time I do them like I'm going to do this properly, I'm going to put them all in. Then I'll only use two. And the jobs where I need that, I don't do it. I'll use every single one of them. Make them individually. It's like Murphy's law. Alright, so we're going to tap on them. They have to have a look. So I need to break this into two parts. There's a few ways I could do it. Can use columns, could use flex. I'm going to use grid because where it is awesome. I could convert the section hero to a grid over here or the layout grid. And that's totally work. I like to just have it separately. Me for my own sanity. It makes it easy to find the grid and click on it, rather than trying to figure out which parent has a great applied to it. And there's just me. Okay, so I need two columns, one row, two columns, one row. And the spacing I'll mess around with, but trying to figure something out, it's probably gonna be somewhere in between it jumps, but you can actually type it in like, let's say that that's too much and 0.25 is not enough. You can just say, I don't want to be 0.35. Just meant It's like, yeah, it's fractions. But they don't all have to equal one, just goes all I'm going to fill the gap. This is just filling the rest of it. Okay, so 0.35 looks about right. Let's throw the imaging. And again, with this image, I could export this from XD already cut out, that would totally work. I prefer to put it in and then cut it, put a border around it that's circular. Or reuse. This image means it only has the load and the website once. It also gives me a little bit more flexibility. There's no real like you don't have to, you can just bring in the already cropped image. Okay, so I'm going to go and drag the image. And if you drag the image into it just assumes you put the image tag in the image element. I'm going to put in my alt text in here. I'm going to say, you are going to be cute hedgehog curled into a bowl. Know, you are going to be. Jasmine tea brewing in a glass cup. I think I like that, does it. And I'm going to make it what size is it? It is 175 by 175 images. I don't want this to be responsive, so I'm not going to use minimum height. It's not going to get bigger because I'm not going to put more continent. So 12.5175, It's all distorted until I got fit cover. Let's add a border. Border of Brazilian. Always pick like a low number. I'm not sure why I'm stingy with the pixels. It doesn't cost you any more to put 1,000 and I'm not sure why. Alright, that's kind of it. The spacing needs to be sorted out. But the cool thing about grid, which is easily clickable, you can say, I want them all in the center. In the center, okay. Do you notice how like grid is? Well, it's not doing the up and down. It's because grid stops there. Can you see the blue line? The parent is bigger, but the parent does not pass on its measurements to the grid that's inside of it. He does what he wants. So I'm gonna do is go to section hero, find the size, get rid of it by holding Option or Alt click. And I'm gonna go grid. You can be the minimum height of 300. Then grid knows how tall it is. So it knows that it can align in the center. It's not far off. Let's get everything in and then I'll miss with spacing. So let's get this, this and this beautiful T. It is going to be my hitting, it is going to be my hitting one. I just have a look round that can be hitting one. That's kinda have to be hitting one on this page, which is a problem. And I'm inconsistent with my hitting that it's probably bad design. Okay. But I like it, That's a cool one. And I'm going to use this more kind of informational hitting one, probably more often that site. Now my site is very small, It's only three pages. Your site is going to be a lot bigger. And I know that this is gonna be the more usable generic one. So what I'm gonna do is I'm going to style all H ones to be more like this because I know that the white on the black one is only going to use this once on the hero page. I'm going to use that loads more. So what I end up doing is kinda just thinking a hidden going. I'm going to tell you first and then make a special exception little combo class to make it white. I'll put my hitting at skid it. I'm going to just pop it down here. Hitting okay. And I'm going to say you're an H1. It's already the right font. Size wise. Let's have a look. You are going to be 51. Random. Designer gets with the designer wants. Okay? I'm going to say all H ones, which you will forget to do loads, okay, you don't have to go back and say I want it to be 51, I don't want to be ramps, so we're gonna go 16/16 RAM. And like before, it's easy just to go one hyphen and it's going to be one. The line height is going to be 3.187 marines. Alright, and it's gonna be the color of my primary three and anything else that it's got? Line-height is pretty close. Okay. We'll miss the same. And there's no other things going on. It's not uppercase. So I think that's enough. So that's my good generic, like stock H1. Okay, so I'm going to use you now over here, but this one's going to have a class applied to it called ticks white. Because I can reuse a few times as well. You are going to be white. 113. Work Along with Dan Building the Full Tea kStore in Webflow Part 2: And it's all the class takes whites gonna do. Alright, next up is this one here. And again, I'm looking around to see if it's being re-used. It's kinda my H2. It's my hitting two on lots of pages. So again, that is the more usable one, like I'm using it, they're there on the checkout page. So that's my default, H1, H2. And then I'm going to add the white ticks for it up here because it's a little bit more unique over here. Same thing. I'm going to say you are going to be H2 and you are going to be that font, a medic. Size-wise. Look, you are 434-34-3403, bold. Alright. You 43. 43 as well? Good designer Dan. Okay. So I'm going to say you are that you're the bold and you are 43 slash 16 rim, and you're going to be a line height of one hyphen. And you are this font, okay, this color here. What does this one? What is it over here in my styles? Or it's not even in there? That's a question that designer, because we've used that one already. Maybe it's this one doesn't look right. It's the warmer gray. So this one's called St. Gray 700 gy. It's hard to call them 12345. You can, It's often, you can use this same font styling. Remember, that was kinda bold and that's light. That's kinda common to use it for colors as well. Alright, so you are going to be the color of oh, okay, I need I think what did I do? The other thing to do is double-check that because I noticed this one. Can you see the code is hash 575 and this one here has hash one a. You have to go talk to the designer like, hey, well, which one do you want? I'm gonna pick this one because I'm the designer who made this. I'm going to pick that date. So let's go back into Webflow. And I'm gonna say hitting two or damage to the wrong one on purpose to try and show you what not to do. So remember, we needed all H2O. You are probably pointing at a going as you're doing it wrong, you're doing it wrong. So let's add a color fast because I've got that in my clipboard. Okay. Perfect. Now I'm going to go grab the name. Can't remember what it was. Back to you. And you are going to be when you toggle between the two, kinda loses it. That's my excuse anyway. So I'm going to edit as a global class. I'm going to give it a name. I'm going to hit Create far right, that's there. It's got the right color. Now. H two for all of them is going to be a medic and it's going to be 43/16 room. 16 room. And it's gonna be one hyphen. All right, so it's there. I am going to add it up. It's going to break his neck. We know if I added up here because it's a grid where the grid gonna do, it's gonna go, Hey, got a new thing, it needs to go in it's new box. So what I'm gonna do is I'm going to grab in here, I'm going to go additive. That div blocks is going to be in this one. The heating is going to be inside of that one and hitting. It's tricky to do on page, Let's do it over here. So the white ticks is gonna be inside him. And then inside him. Here we go. Coats, they did block is one unit so that it doesn't pop down into another cell. And this heating to, I'm going to add a class called text reusing classes. Nice. It's at, Let's first of all get them to left-aligned. So let's go into the, I want to grab the child of the grid, which is this thing called diblock here. And I'm going to get him to do what he wants. Appearances be center. But this guys is be left aligned and it's kinda magic. It didn't apply a class to it. To do it, you assume that a class will get generated because it does for lots of things. But the greatest, slightly different, okay, It's not actually applied to the element itself, it's to the grid. Alright, let's add our button. Alright, you button k, you. Again, the button is like up here. This is the most reusable button. So this is gonna be another unique button and I'll make this my generic one. So this is just going to be called button hero, something. You, okay, I'm going to link it to nothing for the moment. That reminds me. There's a lot of like, oops, did I do that? Brand needs to link to. And where's my drop-down nav Settings, link settings, I'm going to say go to the page of that. Before I forget. So this button here is going to have a className, all button here. Button here is going to do a few things. It is going to have background of none. None. It is going to have a topography of all others. It is going to say Browse t. It is going to have a lot more padding. Okay, So how big is it? Click that hold down option. So you can see it is not equal cubic then about 27 by 16. Let's do that. Need spacing of holding down the Alt or Option key 27th, note wrong layer, that 16 at the top. 16.27. Alright? Alright, size. Let's add a border around the outside border of what? Here is a stroke of two. You need not a radius, you need a width of two, and you need to be White. Toggle, make sure there's 100% toggled, toggled, toggled, toggled. That is bold. That is not bold. This button, hero, it's going to have typography. You're gonna be bold. Font size is 16. My default is 16, which is one rim. Now we're cooking. Alright, so let's add some texts and get the spacing right. So beautiful T to your door. By default, the spacing like it's weird, like H ones have some spacing. Like what's creating all that space in there. And I'm going to use the X-Ray option, can use the shortcut from now on. Okay, So my case, it's Command Shift X will be Control Shift X. It's just handy to go through and say, I am, the H1 has got a chunk at the top and a chunk of margin at the bottom. Okay. Same with the H2. There's a chunk there. What I like to do is just get rid of it early on in a job, okay? And just to say you all H ones have zero, you can put in, you can't reset it. You got to override it because by default it's 20 by ten. So you have to type in 00. Same with this one. You are going to be all h twos are going to be zero. By euro. Go. I'd rather just have that and have nothing and edit myself. So how are we going to space this out? You can either add padding to the bottom of this one or I'll do that. And instead of creating a cost specifically for this one, I'm going to create a couple more global like margin classes and I could reuse k. So in the margin bottom. And how much of a gap isn't there? It's a little bit tricky with this font because can you see it has like some like the capital version of this. Can you see it's like it's not even the ice into like, like the cap is way high on it. It's a weird font. Okay, so my spacing is going to move it a little bit strange on this one, but let's just go for instance, rectangle. Sometimes it's like grab a rectangle to go about that much. And I'm looking over here. So the height is 14. And looking at my little list, 16 is probably closest to it. I'll make both the 8.16 pixel for the bottom. And then I can decide, because you can see there even though the both at zero, the both of different sizes from each other. Because this one is allowing some space for descenders. When I say decent is like, can you see that hangs down the bottom? So it actually is really close, but the font is bit higher. So there's like this, just, just lucky that this one here has no descenders. Okay, we'd side note my name, Daniel Walter Scott, has no descenders, which makes it easy to lap on a line. Width fact. So now I'm going to add a div class and I'm going to say you margin-bottom and I'll do excess, excess. Now for me, one of my big problems is now I go and do it. Notice it went away. You gotta hit Enter, margin bottom x exists. Hit Enter, and this one's going to be extra small, is going to be eight. Okay? Now I'm gonna go and remove it. It's still there, but margin-bottom, small. And I'm gonna do something. You should go through and do the rest of them either. So you are going to be margin bottom. We'll probably just wanted to be small. And this one probably going to be the larger one. Margin-bottom, small. I make my small what did I call it? Yeah. It's close enough. I don't really want to make is a teeny tiny bit different, again, because the client might come back and say, are we using or not using beautiful, we're using Beautiful. Okay, and then I'm going to have to mess with the spacing again. The moment. Just take a deep breath and just leave it like that. Let's have a look. And if you ever get a design for me, it's probably going to have rectangles all over the place because I've forgotten to remove them. Anybody else do that? Use the rectangles as the spacing tool. Alright, that's all good. How does this actually need to be? It needs to be three for three, I just guessed it 300. So let's look at the hero section. Actually. No, it's the grid that is giving the height. You can be there. Alright, let's do this thing, okay? This, because this isn't a weird place. How do we get things into weird places? Do you remember? You got it. We're gonna put some I can't remember position or it's an echo my brain position absolute. That's a good, uh, where's it going to go? Doesn't really matter, but I'm gonna be careful where I put it because I want it to reference. If I put it in here and move it across on mobile, when I move and shuffle these things around, it's going to end up in the wrong spot. So I want to kinda like basically it needs to sit above this. That's his goal instead above this and to move out around the place, I'm gonna put it just above this, so that we're just below this in the stacking order here so that wherever this is, where moves to that guy will come with them. That makes sense. So again, image, I'm going to go to my assets. I'm going to drag him in two underneath my, which is above the heretics. And I am going to, is this decorative, or is this something interesting? I think it might be something like it's not abstract, it is something specific. So we're gonna go tea leaf. The leaf graphic, or tea leaf illustration might be NF1, like it's kinda just decorative, but it helped describe the page. Yeah, alright, so you, my friend, are going to have a class called image, cold image. And I'm going to say position is absolute. Remember whenever something has absolute, the parent mice case this thing called diblock needs to be set to relative in trouble with that, it's given it a classical diblock. I'm going to use the block a lot. So I'm going to call this one div, hero wrap up. Okay, and apply relative to them. I might let her on if I use it because relatives is not going to do a whole lot to a whole lot of div tags. I'm, I just reuse and call it. What was it called? Diblock. Hey, I can rename it later. You are going to be in relation to your parents, Okay? I'm going to say you are. You can click these to see what it's gonna do. My get you where you need to be. Can you see it's bouncing inside of the parent. Okay. What I'm going to just play them all. Okay. And I'm actually just gonna go. You told them to do my bidding. Just over a bit. Alright, I like it. Okay, so next thing is, I am going to, I'm going to that spacing there. Remember, we can go to the grid. It's actually pretty good. Like we can't go to the grid and just open it up a little bit. I can go and measure it because can you see the image here? If I measure it from here to here, I can actually type that in here. So there's a little bit of just eyeballing it to tell anyone. Good enough for me. I know it's meant to be a bit higher. We can just run that for a long time. I probably will. Alright, now, let's see how badly it goes on mobile. There's a bit of a crossing both fingers and toes to see if it all falls apart. Alright, 234. Okay, so what I'm going to do, I'm going to here just push that over cross. So that's easy fix. I can say on tablet you, I going to be just a different size. They're done. Good enough. This one here, mobile landscape. Oh my bad. I might just make the image smaller. Okay, so on you, you're going to be an hold Shift down arrow 150 seems good. And when you get to this size, you have to give it like it's not no mobile phone is exactly the size. You gotta give it a bit of a scourge to see like what's gonna happen and it breaks down okay. And you badly. Okay, so I'm gonna do is I'm just going to have a look. My design actually, my design, It's quite different. Can you see the image goes away and it's kinda full height. So what I'm gonna do is I'm going to turn the image off. Okay. So you just call it image busy. It's not a good name for him because I don't want to do if all images, I want image hero. And you'll notice if you style them here, he'll be the Simon oral them. He's imaged hero, image hero, image hero. Okay, if I left it as image, every time I edit another image, you would follow the sizing and all sorts of stuff. I'm going to say you layout of none Qu, weird. Okay, So you're pushing to the side, the grid is doing a couple of things. What is it doing? It's kinda stuck to this are okay. Because I cleared it off, is jump to the next one, okay, leaving this space over here. But actually on this It's great to have two columns here, but not here at mobile. So I'm going to say is he has actually just gonna be one column. And I want it to be the full friction and I would like it to be centered. The thing is if it is, says it centered, why isn't it being centered? I know why. Do you know why why is it all left aligned? It's because the wrap-up says to be centered, okay, but the stuff inside of that wrapper is doing something different. So what I'm going to say is DEA div here a rapper, I'm going to make you flex because flexors awesome. And I'm gonna go vertical and I'm going to say you all be in the center. And I think the gap is good. Just the font size is going to have to get smaller. End. Where's that coming from? The grid? Grid There's the edges. While it is keeping this guy. Why Why does he get a little bit of padding on that side? I can't see it there. We're going to go to El Super x-ray mode, super X-ray mode, X-ray mode. Smashing all the keys. What's keeping him over there? That's my opening. Alright, you wait, they'll figure it out to get it out. When clicked everything wasn't sure how that was, what was wrong. And I just kinda worked my way up. I'm like, This seems like the most culprit. And I kinda close this down and I look over here and I go MBA, blue, blue, blue, and I check all these things and what it's doing in there. Well, it's doing like I'm in here, like me, I flip it on and obviously that does it. A little bit of that. I figured out was there's nothing wrong with it onto the grid and looked at it and went over here and I was just looking at a notice that the grid child, so this guy in here is actually it wants to do with them. Can you see he's left aligned and that space is only coming because it's left aligned. And if this were a smaller k, that whole thing would be even more smaller. Okay. So does that make sense? He just left aligned that child case. I'm going to say you grandchild. I going to be centered in there. Who figured it out? The other thing I wanna do is it needs to be full screen. Anybody remember the measurement for like making it full screen? If you don't, it was, I'm gonna make the grid because the moment the grid height is just being a minimum height. Okay, so we're being grid is a size of minimum height of 343. What I'm going to say is not that, I'm going to say the height is the vertical height. So I'm going to say it is like 90% of the vertical height, the viewport height. That's the one I want. And it does something we'd like. I've done 90 because I know I've got some chunk of the tower, just guess 90, but it doesn't look very good here in your browser. So go test on your phone. That is the perfect way, or you can fake it by just making this smaller. Okay. I'm getting it kind of the same size. Okay. Yeah. Okay. I can live with that. So you can at least a design in here, but also just make sure you're testing on your phone, send it out, have a look. I'm gonna do that for a sec because a couple of things I need to do to this. First of all, you want it to maybe just break on to two lines, like yeah. So I don't want to make the font smaller. I want to try and get it to break. So white text here. I don't have Class that I can attack, which is no good. I'm going to have to give it a class of probably something. So I can shrink or can I shrink the whole box? I can this div here, a rapper, I can make smaller because he's got a class. I just don't like adding classes to everything. I want to try and be as minimal as possible. But this one here fuels like I could say you have a minimum width of something, you can be a minimum width of this. Just put in 300 and see how it goes. Sorry, maximum width is what I want. You can have on this device here, maximum width of 300 pixels. Smaller. Now breaks into two lines. And now it's left aligned, which is kinda weird before it was automatically expanding. So it just was always in the center because I told the box to be in the center. Now that we're giving it a physical width, it's breaking onto this line and we never told it to be center. And just kinda looking like it was sent to, that doesn't make sense then do I create a global class? This is centered text or might just have to wrap this one up in a class. So what I'm gonna do is I'm gonna get rid of this max width here. And I'm going to just gonna have to cave and say, you've got another combo class called text Hera. Hera gets messy already. So this one here is going to have my max width of, I can't remember what I put in, but that is not small enough. Holding Shift and putting down. That's min-width again, Dan, max-width, too small. But he's also going to be topography of Santa. Alright, so now I can use my up and down, It's just to see something like that. And again, I'm gonna go to see whether if that's working. And Adrian sound effects. Down here as well, this needs to shuffle across a bit. So I'm going to say you leaf on this one. Position is a little bit over 11234 and it's kinda working. I need to get rid of the the spacing at the top there. What did I add it to? I added it to count. Remember, I added it to the container, deny it on here. I want to turn it off. When we're gonna do on here, I'm going to set it to zero. Here we go. 1234. Okay, again, I'm going to taste on my phone to make sure that works at the bottom there. Okay, make sure it lines up. Alright, that is going to be in it. That is it for the hero box. I think nothing else in there. Alright, let's move on to these guys. This is gonna be way longer than I thought. Okay, so I'm gonna put in this chunk down the bottom here. And what I'm gonna do is gonna make a section for these, and I'm going to have a background color for it. Excellent, Let's do that. So let's go back to this one. And let's add a section can be inside my container, drag it in, section B, section product. And it's going to be inside of this. We get, alright, this is going to be using my colleague here. You gonna be okay, and you are going to be the background of the this one edit going to be t gray 300. Okay. And what else we got? Let's put these guys in case we need we need a list. Okay, so my products I don't have yet. So my products, I'm going to import products. Yeah. I've got them from the last one. We're kind of like looking at it. So my products all it takes a little minute for these guys to load up depending on how big your clusters mind is. Not very long Qu, So I got my products. Let's add the product list. So I'm gonna go close it down in here and add the collection list, okay? And I'm gonna say, I'm gonna connect it to the product's going to make it three across. Probably gonna switch it to be actually going to switch it to a grid. I do that very often. K instead of you switch it back to that kind of stretchy one. Okay? And then you say Actually my friend, you are now grid. Okay? And you will see that this collection list is not happy. They're all jammed in there. I think I've added the grids to the wrong wrapper. So I need to add it to the list. So let's undo that. So this collection list is going to be a grid that makes more sense. Now we'll jump into these ones, alright? And you are going to be three columns and one row. Let's add some stuff. Add our image. In here. Let's add an image. Image cannot inside collection to add. Click inside of it first, then edit. We go connected to the main image field. Excellent. I'm going to add a hearing. It's going to be my heating to price. I'm going to say, Oh, we're going to connect it up on it. Make sure you connect it to the product of basic name or problem designer, design the small version. I'm going to have to adjust that because we're a lot longer. They haven't the loads. Alright, let's put in OWL, just a image, sorry, a text block, or connect that to L. Price, price, price. Excellent. And what you can do is actually just typing afterwards that's connected to that. I'm actually, I want this chunk afterwards per hundred grams. So I'm going to do what am I gonna do? Actually? Yeah, that's what I'm gonna do. So textblock at the moment. Okay, I'm gonna call him takes price. I'm going to make him in line. Okay. Because otherwise he's a block, right? Because he's called textblock. He wants to occupy the whole line. So if I make another person, another person, another thing takes it takes block. You'll notice that he wants to be underneath it, okay? And this one is gonna be slash hundred grams. Okay? So you can say to this guy, takes price, you'd be in line. This person still wants to be a block. So I'm going to call this one text. And I couldn't take the price as well because he does the same thing would be inline-block. I need some do I have margin-left? I don't yet. So margin-left x s, not petting. It's going to be, you're going to be eight extra small. And you are going to have margin-left, extra small. There we go. The next, but a chunk of text though is this. So we're gonna go, you get in there another text block. It's actually paragraph now, right? Like I feel like that's now qualifies as a paragraph because it's going to have inflammation. So I'm not going to put in texts, I'm going to put in para graph connected to the paragraph field. Okay? Now, the client hasn't given me like a summary option. Okay, So what I'm gonna do is have to go back to them and add a summary option. So grab a bit of text. Let's say it has to be three lines because that's just what we've got space for or work out what your minimum character is mixed. I'm just going to use this much. Okay, I'm gonna go into the product and say product. You need a new field, not in the actual product itself, but in the global product sitting. I'm going to say you need a new field and kinda appears at the bottom, which is weird. You're going to have a new lane ticks field. It is going to be multiline when they're putting it in there and the label is going to be summary. Okay? And we're gonna have like a minimum, minimum amount of characters. I don't know what that is yet. Okay, I'm going to have to play in taste it, but we have to go back to the client as well and get them to as part of the process, see if we can get a summary going. Somebody's gonna have to make it. So that's that say the collection. I'm going to go into them now and say, where's my summary? Paste? Save must be at least, whoops. Actually will speed changing that. Okay, so I changed it from minimum to maximum. So now we should be able to save. Alright, so it's going to work my way through these ones and put in some placeholder that looks vaguely different. Okay, so now I can go back in and say actually you will note that you are connected to the summary field. Summary better. Alright, what else we need? We need our button, okay, and let's add a button. You remember this one is slightly different. You got the purple one. This is only when you've turned it into either a CMS or an e-commerce site, you could just put one to say, choose the current product. It knows which box isn't. It knows that it's this sweet cinnamon black tea. It's gonna go there. 114. Work Along with Dan Building the Full Tea Store in Webflow Part 3: Alright, It's all in there. I need to style it now. So let's do that in a wrap it all up in a div. I could use the collection item. Don't exactly know what the collection item does. It has probably some special powers. I'm just going to dump a div tag in there and just throw everything inside of it. You just dragging it all to the right. Let me go. So I can say diblock for you. Do a couple of things. Let's have some spacing. I'm going to say the collection list. Actually the whole section is going to have some padding of I'm gonna do margin can use 24-bit. I'm gonna go check actually what the designer did. Hold down Option Theory. Bed designer 32 is going to be at. So we're going to use 32 because that's close enough to production section list is going to have margin on all of them. Hold down one, hold on, shift in 32. And I'm going to make sure that the grid, which was applied to collection list, is going to have 32 as well, should it get inside the grid. And it's gonna be 32, 32, even though we don't have rows. Let's stick it in there. Alright, so that's the kind of spacing sorted. Let's add a white background. I want it to the whole thing, or white background to the bottom, but because there's a drop shadow. So this is going to get messy. Another role in the diblock, excellent, not messy. Background color, white. Let's add a drop shadow. What I'm gonna do is add a global drop shadow so that I can use it on other things. So I'm going to add a div block. I'm going to call this one. Call it shadow because I'll have a tech shadow probably I'm not going to boldly buds. There you go. So add to it. You can have effects of box-shadow. And let's have a check what we got here. So this one's got a shadow of 036, 16%. I'm not gonna remove a half of that. So straight down by three different here in Webflow, they have this dial. They didn't have x and y-coordinates. So 1AD is straight up and down, perfect distance. It's going to be three pixels. Okay, That's the why. And the blue was three home remembering all this, hey, the color was 16. Genius. That never happens. Okay, So that's my shadow and then apply it to see whether it's actually looking the same. So there's diblock here is going to have shadow. To shadow. It looks pretty good when I reckon. It is pretty the same because it's the same code. I'm sure you're wondering. I'm not sure we expecting did my oh, okay. Did you notice it? I didn't notice it. So now it's like once they've dark color gone from it's because I put in padding, didn't I naught I put a margin or padding. So this wrap around the outside has the two but its margin, margin pushes away from the outside and petting pushes from the inside towards the middle. So that's what I want. I'm going to clear all of these. I'm going to make them. How would shift? Okay, I'm gonna be 32 beta. Okay, how am I going to do the padding on the inside? I can do padding because the image like on this one like other drugs. So because I need the drop shadow to be on the outside of the image, but if I add padding to it, it's going to end up breaking it right? If I got this diblock and I add padding to it, it's going to work, but it's going to push the image in. And I might just do that because it's easy. And hopefully the designer doesn't notice. He's gonna notice another guy, handsome, but he will notice things like that. So diblock, I'm going to need another div inside to wrap all this up. Okey-dokey. Let's go additive block. There. You can get in. And then you go across, across. When you go across. And then diblock, I'm going to add a class on it. So if I create it now it's going to create a global class. I'm going to do imagine all of what do I need it to be? Roughly about 21. So I'm going to use my twin T4 will sustain. You have to check. So I'm gonna go diblock marginal and this one's going to be left to do probably test. Imagine all smoke. Actually I'm doing padding or margin doesn't matter in this case, it doesn't. I'm going to do padding or because I'm more likely to reuse a padding all. Okay, and I'm gonna make this not negative and don't do margin. Hold Shift and I can look at it. I don't have to guess. Trying to get it at 16. That's tricky. I think that's better than 22 or 24. I'm just going to run out of room. Note 24 is nicer. 24 is my medium, not small. So you're going to be medium. Alright, so we're getting there, we're getting there, We're getting there. I'm going to have to add a combo class to this to say hitting to text list. I'm going to call it product list is actually going to have to be smaller. Typography was using my down arrow until I get them. I'm happy vertebrae go into two lines, but it just can't break onto three. Now go through my database and just check what the longest name is. And then I might have to reduce what they can type in in the database care at least in my products list, because it can't be too long. It'll wreck my website. Alright, and this one here, I'm going to say you need a margin bottom. What have I got? Can you start to see how useful it becomes now? Because you're like, Oh yeah, I can add that one now. I've raised it. Margin-bottom seems stupid and you might stolen not like it. You might just prefer to just style everything with its own style. That's totally cool. Alright, let's give these guys a minimum height block. Why not size, minimum height, height, and height. And I want the button to be on the bottom. Who remembers how to do that? All these are all know. And sometimes I get like, say I want that to have the minimum height or not, you get lost earned is we go, minimum height is going to be too much. Shifted down arrow. That's probably good enough. The more we're going to have to check through all the different ones in terms of how many, how many lines this is to see how far it pushes the button down. So how do I get the button to the bottom? You know, div tag me. Flex, flex goes crazy. Vertical. Grab this bottom one and say you are, have a class. It doesn't. I want a button class on it, a little bit button class on it first, and then get it to push to the top I have another class, so ignore pushing it to the bottom yet we should go flex. Actually now we can do it because it doesn't need a class, does it flicks child? Let's have a look. Xd needs to be margin top order. It is a class. So what I'm gonna do is I'm going to remove that because I want to style the button first. Look. The styling him there. Yeah, let's do that. I'm going to have a little look. You holding it is 14, 44 by 44. Okay. So you, my friend, are going to be a button which I'm not going to apply that to it. Let's say I had two Flexbox off the parent just so that I can style the button on its own. I'm going to use it all sorts of places. Button, friend, I going to record button. If you have any classes applied to him, he doesn't. So I'm just taking the blue. There's not. So we're gonna go to Spacing. What was it? Can't remember 44. I want to say 44. We can check in a sec what e4 and hold down your Option key 44. And then something 14. 14. Sometimes holding my Option key down doesn't work. I go kind of hit it twice. Sure why? 44? That's buttons are going to be called. Gonna say it's going to save you. It's going to be even. And I'm going to use buttons is going to have a background color of my rounded corners on this one. Round the corners of 44.4 is four. Nice. Alright, so that's good. There's a drop shadow onto it. So I kinda reuse that shadow. Weird way. Where am I? Leave it down there? Did I, I did. Whoops. Shadow to shadow on the button. All right, so now we're going to get it to stick to the bottom. Summer heights still probably not enough. So the minimum height for that P a pad. Oh, you're right. Okay. So I wanna, I don't wanna style that. So I'm gonna go remember PA, PA, mid and remove that class. I'm going to, I'm going to remove that clause because I don't want to style that. I want to add a class to this deblocking. This is gonna be div, list, product, list, lower gray naming. Okay? And it's going to have a minimum height of 350. Way too much. Hold Shift keys, my down arrow, and just get it so it's big enough for them all to be the same height, actually. Why is that guy a little bit smaller? Always the image. Nothing to do with that. And you go, I thought maybe we don't even need a minimum height. I thought this was shorter because it wasn't pushing it out enough. It's the image. Can you see I just happen to have images that are a bit shorter. Let's add our PA to this. So I'm going to get one PA that's pending all. And I'm going to make the button stick to the bottom. So let's make the height bigger so we can kind of see what we're doing. Go back to you and then hide that higher. Big for obvious sakes. And now this guy can be a parent. Thanks, it's not. So his parent of that div tag, you gotta make sure we go back to the one I don't want to keep adding flex to this PA from appending all because that's not a very good use case. And I want it to be on this, and I want you to be vertical, perfect. And I want this one here too. I'll do this one. Does it matter if you start this one or this one? I want the height of this button here. First of all, actually I want it to be flicks of, you can just aligned to the left. Is that what I've done here? Now I've linked it to the right. Now I'm styling divs shadow. I'm going to need a special button class for this. I'm gonna get rid of that. I'm going to call this one has a button class of special one that's going to be button product list. A little bit more specific and you are going to be left and you are going to have a top margin of order sticks to the bottom. Nice. There was a lot of work for that and I don't want it to stick to the left. I want it to go that way. And now these images, so let's say that this have a look at what we've got here. So we'll just copy that design. It's quite thin in here. I'm gonna go, you're gonna be a height of 123. Okay, so this box here image is going to have a special image class would have got hero, tea leaf. There's going to be image product list. And he's going to be a height of this. Width can be 100%, so it fills whatever it is. And I'm gonna do a fit of color. Now, there are at least the same height. Actually, still not. Still the minimum height is not quite enough of this one. Can you see just a teeny tiny bit off? So I'm going to say minimum height of this guy is gonna be just one more. Couple. Alright, takes price. That lost it. So I'm not sure when it lost its oh, look at that. Because I made the thing flex. It won't do inline block anymore because he's a child. Can I make him just flipped to the left? A can but this guy do the same. I have to come back to you. Flexes, kind of pushing them to their own level. I might have to put them in a div tag. That's probably easiest solution right now. If you can think of a better way, let me know the time and the better way of doing it. Because this might be cheapen. It might taste. Class is going to be bold, bold, bold. Alright, getting there, Let's now check it on mobile. Everybody, you cross your fingers across mine. So I will probably not. Okay. I'm going to have to increase the minimum height again. So I'm actually just going to switch this down. We're gonna grab the gag grid. It's the grid child actual grid itself is going to be can I see mine come back better and can actually drag it out? And I'm going to say you on this one, I'm going to be just two-by-two. Get rid of one. Okay, I'm gonna end up having more, maybe it on the homepage and let's work out the filtering me later. Let's get a ladder. Just work on one thing at a time, Dan. You look good. And mobile. It's kinda too squeezy. So remember it's going to look more like that. So it's probably going to look more like that. You've got to scroll down still. Then here you can go. Collection item you, and you're going to be two by that. Okay. Nice. That will be good. Again, has the tests on my phone, but you can't see me on my phone, so it's not very exciting. I'm just gonna go that is good for now. That's good for now. Alright. Then my homepage done, probably not. Look you versus you. That 100%, 100%. One here probably put a height on it so that it keeps everything lined up. But I guess I don't want to get too much in the weeds. I want this video to keep, I'll tidy sum things up at the end. So I think I'm happy. That's good enough for the homepage. Let's move on to our next page. You still with me? You're still awake, Becky? I'm awake. So let's do this hopefully. Yeah, we've got some of the stuff here to start building this. So let's go Page two. So this is gonna be owl product list and it's gonna be a product page. So we're not dealing with the template yet. What's going to create another page? And let's go. You were gonna say this one's going to be product product list, product, product or product Browse files. That'll be fine. I should fill in my meta title and description right now. Go into nothing on this page. Let's switch back to homepage. Let's grab my nav bar and convert it into a symbol. Good idea, nav. Back to the instance, back to this other page. And let's go and add the song. Next. What I'd like to do is duplicate this. So I can see two pages at once. You can edit and both of them, they won't let you. One of them we are read-only like can you see this is nothing on here. I can jump through the pages, which is cool, but I can't edit in the second version. So often what I do is just move it over here as a reference so that I can kinda be on this page and see what I've done on this page. Because otherwise you end up having to reload it every time. And every time you reload a page, your undoes go away, which is a pain in the butt. So you What do we got? Wish it shows you how to navigate it even if you couldn't edit it. Just not there. Alright, so we need a container. I don't think we saw that container. And we added a little bit of stuff at the top. So what did we add to the top? We added and in it was medium top and it was that one. Okay. Let's add a white-box. Do I add a box at the top? There's just white or do I add a box that's everything white and I make it Buxton, the bottom there is gray. Very good question. I'm trying to think which is the best. I'm just gonna do a top section. I feel like I might reuse this one I really want to do is move that down. So yeah, let's make this thing, we can reuse it. So this is going to be section, section and it's going to be called Section. Kidding. Because I feel like I'll use that a few different times. Not yeah. I feel like I will bring my section hitting. It's going to have no color on it. My whole website has a color on it, doesn't it? So let's do that. The body needs to be this color. My 100. So let's go back here. I'm gonna go to the body or body tags. And I'm going to say background is this color. I call this is gonna be edit and this is going to be AST gray, the gray. Gray. Anyway. I'm not going to ask. So it's gonna be the background color. And it means that this section here has to be white. Is it missing my homepage? Know, that's kind of how I wanted it. This one here, section, background. It's going to be white and white. Global color. It could be just, I don't know. I don't feel like there's ever a need for full black for white. They're easy to get to and you're unlikely to change them. Unlikely, probably because the diff, but let's go in here. Let's go Don't hit Command R. That's right next to command D. If you didn't before, Control E to add things, and that's the reset button. Resets the whole browser is annoying. Alright, hitting one, ready to roll, I need some petty. And here, using 32 section hero, I'm going to add heading. I've got a medium and medium is 24. So let's make another one for padding. Padding bold, and this one's going to be large. Lg, just write large. It's just common in lots of other frameworks to use LG, SM excess or those sorts of acronyms. So padding all the way round, hold, shift the two. Alright. There you go. So this section, not the hearing, actually, it wouldn't matter, is gonna be pd. I'm going to use algae. They are what I call it. I didn't even do it. Did I do that all the time? I'm going to undo until it was back. What did I created div class with it on, you see me not heading into all the time PD. So annoying for me to enter. Enter. Now they do hold Shift. Now it should be done. Nice. Alright, section up arrow to grab the parent TED lunch. I think I'm using a different font color. I'm using I think the second one in there. I'm gonna have to go back to the heatings. I don't think even hits the second color. That one there. To actually be. You guys gotta be a font of primary theory. I haven't done a primary tooth is what I want. So I'm gonna do that one. Let's make it a global costs and let's call it as T prime Mary, I've got a three and a tuna. Excellent. Alright, find your beautiful thing. Let's put in that region, this thing here, should it be a section? It can be easily be a section, region section, which should be a div tag, or it's not really big enough to be a section. Don't really know. I'm just gonna make it div section for like, oh, well. Do something, then section. Section cannot be nested inside each other. I don't want it inside of each other. It's going to click on the body section class called section. Section. This is going to be a region. It's going to be inside of my container. Okay? And it is going to be a height of actually what I'm gonna do is I'm going to make the text open it up. I like to do that sometimes then I don't have to like try and get that in the middle of it. What I can do is just say be bit higher and lower than this text. So I'm going to add a textblock is hitting. It can be 123. It's looking at all the pages. I don't have many other pages, so it can be a three is going to be in here. Hitting. It's going to be three style, all the threes to be planet only using this in here. So it's going to be you bold. Put the text in. Okay, What size is 16 should be the default bold. You ended as white and calves. Okay. I think three is going to be 16. I'm going to remove the, remove it for now. Zero-zero. We can add some maybe not to the heating section region. Actually, we don't need this section at all. Watch this. I can put hitting three and let's just do that because I'd probably leave the section in there, but I want to show you that this hitting three gets used for one purpose, this whole block. So it's going to stay block which goes all the way to the edge. It's going to have a background color of the background color on that one. It is going to have topography of this one is going to have some spacing heading of 32-dimensional. Everything else. I'm kinda happy with it. So caps, I use a lot of cats in this. We overuse caps. Yeah, it's rendering the font slightly differently. The bulb fuels more bold on here, but hey, it is what it is. It will render on all sorts of different browsers, slightly different white. So in terms of the height, I might just add a tiny bit of padding to the top and bottom. And call that good. Alright, so another section, and it's going to be this chunk, okay? So this is going to be my list section. You having fun. I mean fun. I like making stuff like when is not going as badly as I like you guys watching. I assumed it would go a lot with so it's going to have the background color. I don't have any background colors. Let's just call this one section. Section. And this is going to be a product list, okay, It's gonna be product. And I'll browse page. That's how I'm calling it anyway, products on Browse page. And this is going to have a background color. Off. It's the 300. It is. You add the padding all for large. I added that to the body. Okay. I'm gonna go heading. And let's grab my list. You can copy and paste lists. I can't do it this way because I can grab the whole thing. Okay. What can I use my up arrow? This wrapper? Can I do it this way? I don't think so. They removed the binding site. I can live with that. Can I bind it again? So you are going to be connected to back to being the products. Did it get rid of my no, that didn't work. So I'm going to try that again. I'm going to undo rather than delete because they're brought me other junk along with it. Let's see. This. I'm pretty sure this works. I can grab it all here. Go back to here, back to my product browse. Who'll go? So I'm gonna use the same list. These are a few classes. I've got to be careful not to wreck over there. So you have to change some of these classes. You're going to decide whether it's going to save you time by copying and pasting it, because we're going to have to edit it to look like this, right? So maybe it's not actually as fancy as well, as clever as I think. Let's have a look. You, Let's go. First of all, change the grid. Actually changes grid. I want to say the grid is going to be grabbed the list and the list because my grid That's why I like to keep the grid. Oh, you do it it it loud there you hiding. It's going to be one by order. Okay, and then here I'm going to grab the div block and the diblock. I feel like if I go and change this, it's gonna be too hard to remember what's going on the other side. So I'm just going to have to rebuild it. We can rebuild them. I'm not clever enough to make everything I do over here work on the homepage as well. So it's easy enough just to additive block. So I can style things. Add an image, image. I'm going to add kidding. I'm going to add text. Add another. I'm trying to remember what's on the other, you know, what's on the list. It takes block K. So let's say we've got image hitting textbook, textbook. Now that takes walk in a button. Before we go install them, we can do that. And let's add a button. Cue from shortcut button. This is going to go to page that is current product. You again, the link to the main image. You are going to be first of all and H2. And you can get it from the name of the product. You are going to be getting it from the product's price. Price, price price. 115. Work Along with Dan Building the Full Tea Store in Webflow Part 4: Okay, you are going to be just the textbook that says you put 100 g. You are going to be the description. This is going to be the full description or still a summary of the summary sheet, the pins, right. Because not that long. What are we gonna be? Summary depends along with summary descriptions where it yes. Right. But I don't want to limit whoever is writing this to the summary, stick within that little list. It's better just to use the summer to make it happen. So let's grab the whole parent and make them flicks because, you know, like default, we always go vertical. This one actually is quite handy for this way because I want a lot of stuff in the middle. So you are going to be very small. So you are exactly how big you, you are, not square. Whoops, this is pretend it was square. So I'm gonna you going to be image on this page. So your image, what else have I got? I've got product list. There's going to be product browse. And you are going to be a size of width by you. And I'm going to say fill with kebab. Yeah, excellent. Let's have a look. So you hitting oral them inside another book. Actually, I want a grid and here, Donna, I could use Flex, put another one in here and flex it. So we just do that to show you grids easier because flex only has alignment top and bottom, which is going to work now, does it just keep going with the flex your flexed in there? I'm going to go there. I'm going to make another div tag here. Div. We're going to go inside. I'd love to be able to select more than one shift click all of these. I'm not sure why we can't can even get it in you once you get the first one and then the rest of them are more likely to go in. At the moment. It seems to the way that they make this work. So they seem to be working on it in Webflow and it seems to get better and better quite naturally yet though, it's a deblocking here, you're also going to be flicks. So you can flex a flex horizontal. This one is vertical. It's lining. This way. Justifying this center. I want gaps and rows. This one can get some rows. So the parent one here is the gap, the rows. Let's put in 32. That didn't work. Are you and you owe gap won't get you. You need to do alright. This one here, the parent of error, is going to be rows of too much. Use my down arrow to where we got. So you are the right kind. You need to drop up there. And it's put these in a div as well. Because remember flex won't let the B inline-block. So actually I just wanted us to be grid because grid, let me do that. Reflects. Okay, so what I'm gonna do is flex. Now you are block has loud. You also need to be bold. Like No, you, for the moment. You can have, it takes about three, can be in margin-left. Just more. I liked all the padding though came with Flexbox. What to do? You're right there. Alright. I like too much of the flicks stuff to be. I'm going to put in, I'm going to put in a div tag. I'm going to wrap it around. I feel like this might not be the nicest way if you're looking at again, what does he do that probably should think. So. You are going to go inside you and you. So then I move it back at the homepage. I was able to do that, right. I called texts price. You're going to record tags price. And you're gonna be tics price. But bold. Both still aren't floating this thing here. Oh, that's not. It takes process, takes p, remove class, text. Price. We go and somehow created a classical texts P, because it's not used anywhere. I'm able to delete it. And here we go. Alright, people would get in there and media, sorry, a margin left or right. And again, I loved flux, so I kind of worked around it. There's lots of compromise. It goes in rows. I'm going to increase this. This guy here is gonna be my generic button. So I didn't want to add the margin auto to the generic button because I'm going to use it so many times. Okay. So it's going to record. What am I do is I know that I'm going to forget to put caps even though the design kinda says it. So I'm gonna say button is actually just going to force everything to be kept so I don't have to worry about it. You that's not going to go up there. I could I could have just put, I could put this in there as well. But I've realized that the designer has. And I could make this takes price and get it to, well, I could get it to inline-block, but it's just going to cause lots of problems because some of these loans are really long and it's not going to be long before it pushes it off the edge, especially when I get down to these ones. Okay, so, yeah. Alright. That whole block doesn't have a name. It's called div block two. This is going to be my div wasn't showing, actually just renaming it. Okay. Normally I like to see the other ones that have named it gives me an idea, but because I'm renaming it, they don't appear. I'm going to say you I do live product browse, list item. I didn't rename it at all. There's something weird. All right. What can I change it? I don't know. Div. If I remove the class, It's going to break it. If I add another one, I think all I did was create that one, make it flex. And I added some get into wrong there, but we're back. Alright, it's kinda looking like it. I need, I need though, white background. This rep is going to have a background of white. And I'm going to add a combo class of shadow. Okay. Now we're getting there. Alright. I'm happy, you're happy. I'm happy we're getting there. I feel like we didn't stuff. Can you see how like it took us so much quicker to do this page than it did the first one. There's not as much on it, but we are reusing classes. That's what's really cool. I feel like a strong, powerful web designer. When I am just going box-shadow, padding left there I've already made now consistent. How do you feel it? Maybe just me. You feel it. All right. Let's look at the last page. What are we up to here, up to this one. Let's do this one. Alright, so we're gonna work on the template page because this is going to be, lots of them are going to look like this. So we're going to go And we're gonna go over two L. There it is. I'll products template. Okay, we're going to use our nav and we're going to throw in a edit bookmark. I had so many bookmarks. Monday, we're going to go, Let's put it in a container. Let's add this container, margin top Md. Let's have a look at my design. There is a big bit of padding in this one. This one is going to be a white background. Can't really reuse that white one we had from the last one because I was quite specific about it. So let's create a section in here. Let's go to section I should call just the global class called beet color bg white. So I can use it over and over, but we're almost at the end. So I'm gonna just going to color the section, product with white coat, this section here as well, It's going to be heading all mid. Nice. Let's add owl. We don't actually have to add a list item now we just add anything because we're in the template and we get to go throw in an image, image June. Okay, let's connect it to the note that it's connected to the main image. Now you got to make sure that the product is coming through like when you're designing, okay? You gotta be mindful that the images might not fit across. So you might end up having to adjust your design just because the image is not big enough. This one is, and it's gonna be a height of, height, height, height of three to three. I've totally forgotten to the mobile version M&A. I felt too easy of the last page, we'll do both of them together at the end because we're already started. Okay. I'm not going to do the heightened width in here, okay, I'm going to add up to a class Y. In that sitting there, you can't do like percentages. You can edit the pixels. So I want to add a class called image product PRO cut product. Okay? And we're gonna say you are a height of you. Excellent width of 100%, fit in there and fill, cover and middle or top and you have to go through a few of them and hold down the option No. Hit all the keys and see if you can toggle through the different pages. As the tabs. Which one is it, dan. Alright. Is Shift Option on a PC, I'm sure it's a shift and alt, left and right arrows. Can you see I'm just talking through my images through a you could just click in here. I've only got three. But it's a good way to kind of go through and just check like images, do they all look better mid, which they probably do know one's not as great, but rather than going in here and saying, Okay, I want it to be fit overflow to be the top or the bottom. So let's do that one and just use my arrows now. The top or the bottom. I'm not sure. I think the top. Alright, so we've got that. I'm going to get this over the top. Now. I could have set that as the background, and that is a way of doing it like we did it on the homepage. I want to be an actual image because I would like it to be having alt-text k. So at the moment, I don't think we have. What you can do is you can set up an alt text field in your products. I don't have that. Okay, You could we added this custom fields of summary. I'd now go back and add another custom field for alt texts and have the client, or they might already have some descriptive that we can use, okay, and I put a limit count on it, a character count. The moment though, I'm going to pretend I've done that and keep going. So I want to put I want to put this inside of it. Let's put it underneath first. Hitting. Okay, and this can be a hitting. It's going to be hitting one and I know nothing like it, but I need this to be you don't have you don't skip to the hitting three on a page you need at least a heading. One tells the browser like this is the most important thing on this page. So I'm going to have to just style hitting one quite extensively for this page. This is going to be my hitting one for the product page. Okay. And it's going to be, you don't add font. It's going to be that one. Okay. It's gonna be a size of where we go. What do you hate? Men? I do that all the time. Nothing 48 about. My brain does. Mixes those up. You divide it by six. Dean rim. And it's going to be one is great. It's going to have to be white, which we can't see. And what I'm gonna do is put that, you could put it inside a div and style it. I'm going to do what I did for that heating without region. I'm going to make the actual class do a couple of things. I would like it to not be blockers. Block has all the way to the edge, which is great for that other thing. I actually just put the background and fist. So when we're talking about because by default it's going to do that if you switch it to overflow, no, Chrome I want come on brain layout to inline-block. Kinda just gets to the edge here. Then I can go grab some padding of their lot there. Make sure I connect it up so it's grabbing it from the name of the product and kind of look at it. It's not very even anyway, so I don't trust the Zener diode is doing. Okay, let's go. You need to make it made them uncolored and I will make it black, but transparency is any 2%. So in here I'm going to type in alpha is 82. Okay, and now I need to move it up. So I'm going to make the section relative. It's probably gonna be fine looking at this. I still might want to wrap it up in a div. I'm just going to hope for the best and say You going to be okay. So you go position. Absolute. Interesting, huh? It pushed off to the edge because it can't go anywhere. It's because this thing is holding the space open. But if I make this whole thing relative and then grab this or was it going to work? That is good. That's why it kinda bunches up. It's just because it can't fit out there and just kind of squish up as small as it can. That looks okay, but option shift left and right, or shift Alt, It's a check that's right. And PC, you might have to start holding keys down. They all fit locally. Okay, This one here is part of the Add to Cart. Going to go in there. Wanted to be inside the white box so you go get inside the product. Excellent. Qu, What do we do? I don't want the Buy Now button. I'll have to probably just talk to the client about that. Like, do we want the Buy Now button? Is that appropriate? Maybe do some user tasting probably and have both. See if there's a kind of a use case for them. This guy's gonna be not brand. He's going to be button. Caps. Button meant to be bold. I think buttons meant to be bold. Can't select it the way you, oh, it's completely different. Font. Z, nothing. Okay. I have my buttons actually semi bold and it's from when I was missing around with fonts. Earlier on, when I was designing bad, I have to go to Design and say, what's wrong. So I'm going to go and just leave it as is Coca-Cola. What else I wanna do? I want to style the form a little bit, so I want to push that in and that out. I can't do have to wrap them up in a div or add a class to this thing. Might because I'm probably going to do it again for something else. So I'm going to say you just have R field's class of field size is going to be medium. And it gets medium, I'm going to give it, Is this going to work a minimum or maximum? Maximum width? Here we go off how much? 300 pixels. Note it. Alright, I don't want these on the label fields. I'll need it for this one, but not this one. You see it here. It says Select Size and I can say choose, but I can't change the word size that comes from the product database. So you need to go in and change the way it's brought in in the CSV because it really, it's pulling from that. Alright, so what else? We need to play with? Some spacing, we need to we need to do Add to cart and the cart, there's buttons a lot bigger on this page. It's taller and wider. So I'm going to say You going to be button but you're gonna be button large. Okay? And you are going to have more all everything. You that way. I should go and check, but I'm not going to. You need your own class. You are going to be text quantity. Okay? And you are going to be the right color. You failed the contrast ratio. They're all gonna be that column AAA. And I need a few other things, so I've got that. What I also need to note the Add to Cart. So above that if I hit Command or Control E above there, should squeeze. In the textbook, that is going to be the full description, which is not that long. Alright? Okay, is that, let's suppose this n naught and I'm looking for if it's inflex flexbox because then I can add rows and I can play around with the spacing, the likelihood of them all being the same. You can see it's much wider and this one is the same as this. It is what, what am I using? Why am I using such a smaller one? My painting medium is actually only 24 h and I wanted to padding all to be large. Let's remove that one. Heading. Large. There we go. Now I can go into here and say Section product you with this one vertical. I can add rows of 3d2. And that is totally messed up because you are relative to that one. That hit refresh just to see if the absolute goes back, whether it's updated the actual code. Yep. Still bargain. So I'm going to go hitting one. You have got spacing or position. Where are you positioned? We go we go. I don't know why that moved around. I think because I was messing around with Flex. Yeah. Maybe flux is gonna give me problems. So have a look. Is I can't undo because I refreshed it. Okay. So I'm actually going to go It's not flexed this box because it might cause problems. And I was going to add my padding in. Let's have a little look. So same problem. It's because it is from the top. And the left. Okay. So that's that part at the top there. Oh, his parents went from relative to block ads y. So it's looking for body because I was messing around with it being flexed and it may not be built p-block again, I don't want it to be I wanted to be blocked, but I want it to be still with a relative. Okay. So that this guy knows where he is and that's why you moved up? We did it. Okay. Has numbers changed because we changed who is relative to who should be relative to the section product. That because I was messing around with stuff, he defaulted to the body. So Eric, he's doing what he's told. I just tell him to do weird stuff. That's the one thing with code. It's never broken. It's you, it's doing exactly what you've told it to do or it's being told to do, it's going to figure out what that is. That's why it was wrong. Shortcut 123, go, you have to change the sizes, but alright, let's what else we got in terms of control products? Because I've already got a class applied to it, you are going to get bottom margin of 32 because a kinda not enough, but you also in the wrong spot. Above that. Can it go inside the card? King go so there's the ED carbon can't go in there. Okay. Can I go in there? It takes block. Can go in. Kind of go there. Can it go? Can't you go there? We knew that. It's totally can you guys notice me? So that's down there. You're going to have padding top and bottom. This one's got a class on it. So I can kinda just sneakily use him as well. I should be eating like Python, padding top, padding bottom. I've got these classes already in there. Okay, This one here, do I have a margin bottom already? I do. Both of them are right. Quantity can be they can attend. There you go. Do we have a margin top on this one? Margin top? We do. Alright. I'm liking it. You don't need the margin at the bottom anymore. Okay. Now, yeah, I'm going to go grab a cup of tea. You wait there and we'll get on to doing the mobile versions way longer than an hour then j12 342-34-1234. Okay. So two needs work. Probably just the size of the font. It's got a class. I'm going to use my down arrow. This is my longest of them all when you're actually in the size was trying to use this kinda like after my shortcut which is Shift Option left and right or shift Alt, I'm looking for the longest record of God as this one here. So I'm getting a smalls for this. The rest of it. A-ok. this one here. Again, I'm going to probably just leave it breaking onto two because the font is gonna be too small. So I'm just going to say, I'm hoping I can mess with the position of it. Hey, where's my position? I'm not missing with these other positions. And width wise, why is it all the way out there? 100%, I'm just going to men in all it's got a minimum width, doesn't it? Size-wise, doesn't inline-block. Why? I have a little look, It's good. X-ray mode just going to do I'm not sure what it's being kept open. It should snap in there because this takes us on the other line. There's something giving it a minimum, minimum width. It's not though. You're not. What you can do is kinda just use your up arrow to see the word click inside of it. Use your up arrow to see is that the next car and having a look now than there. Thanks, guys. I'm not sure. Come back to you. Yeah. Because I can't think of what went wrong. That's one yeah. Yeah. This one's probably going to have to do some stuff. What I'm going to do in this one, what did the designer do? Look? Just use the small bit of text. Okay, so let's start with small bit of text and you font size down diagram. Does that really stayed out there, Hannah? That problem-solved. It's not really solving it though is the longest one still readable? What am I do for this one is actually coming this way. Is that going to stay there? It is. Can I add some margin that side? I feel like this is cheating. Cheating. Will it work though, is the key? No. Yes, This doesn't seem like a good solution. In the font here is gonna be smaller. I'm going to call two lines, okay? Probably there. And I'm going to have to mess with Let's get this down to the 16 and To correspond with that, I added that oh, that is positioning. I want the heading on it. So size-wise padding. Let's get it down to here, a k, here, k, the positioning needs to come up a little bit, just clicking in there and using my arrow keys, 1234. And also this size probably is a bit weird for here. So the height of it and this one is that you are going to be height-wise of that now, which is missing with my position. I can fix that though. Holding shift goes up and tins. All right. Last thing I'm gonna do is I'm going to create a padding small for this one. So click down here, throw in a div. Div is going to be called padding. And this one's going to be, we've got a medium, I'll make a smaller one here. Small and it's going to be hold Shift and hold shift and do 16 all around. Excellent. Gone. On this one. It's not as an icon to add classes and take them off depending on your break points, you got to redo the song. I have to say it's gonna be weighed and the container here has got this margin top section has got padding large, which is this phi just add padding, padding small onto it. It overrides, it totally does. But on here, I've also got padding small. You'll find, you'll find, you'll find. There you go. So that will look Section hero, section products got padding large, heading small applied to it. But it doesn't actually take effect until here. I assumed it would go all the way up and all the way down because the class is applied. But it's not because I applied it here. These ones, I've got padding, lunch, you go on, it's something. Alright, let's get this one to match. Actually, you might just use that kind of styling now. Alright, that is, that, let's have a look at the, let's come out of this one now let's look at the other page we didn't do for these. So starting at the top two, okay, it's not working. Okay, It's a two is going to be actually, let's just go down to find the grid. Up. There it is there I'm looking for I was kinda clicking the middle and these mop arrow until I see that grid icon. There it is. I'm going to say you are just one-by-one done. 123 or she's getting tight. How am I going to combat that? Did I happen to make that DID going to be vertical and it will be centered. Is this. It is as well. That's flicks. That was a stroke of luck right there. And this one here, I'm going to apply that we've learned that we can do padding. Let's see if this works. Painting small all the way around it. It did not apply. Why not undo? Do padding large in case it's something wrong with it. It is something's wrong with padding small. What is wrong with padding small? Let's go and find out. So I'm just gonna go an additive class or randomly in some way. I'm going to add PD stall. It doesn't actually do anything so small is going to be 16. Which will why that's yeah. Having if it's not working. And I'm happy with that one. And I'll mobile actually, let's see if it applied up here as well. You collection list wrapper. We can disable classes, encode. How do you do it in here and Webflow. What we're to do is just go up here to the top one. Heading large, I'm going to set to zero, shall set it to zero all the way around some overriding that class. So you're gonna be zero. And then you here for that one. Back on here, spending largest going to be 32 on this one. And then it should follow along to this one as well. I haven't done this one yet. Okay. So you you you got padding large. We haven't disabled it for these other ones. We just overrode it for these higher ones and then turned it back on for Danio. And this one here, it looks okay, but the actual section is going to have PDE small. There we go. Let's make sure I'm Rick, these other ones still PD large, large, and small. Let's go check something. Alright, hitting two on this one doesn't have a class. I want to center it writes into the text. Can I do it to the whole block? Can I go? Oh, but will it do it to this one as well? So have a look. Because that looks fine. The hidden looks a bit weird here. I say everything inside this div is going to be aligned center. Does it reflect this one? This one, nice. It's only applying from the head downwards. Okay. Do I want to or probably we want to mess around with that to match the small down to 16. One, click off 1234, there needs to be some more spacing, but I've had enough. You've got enough? I've had enough. All right. That's going to be smaller. It's going to need a class. After all. Let's edit here. Let's call this one heading, one on the product page. Note this is the browse page. It's going to call it hitting one. And I'm going to see you here. This is always the last thing. This is gonna be the last thing. So font size down. You can't break on to two lines. And you can be on two lines, but you can be centered and you're going to be 1.1 line height. All right, ladies and gentlemen, let's publish this thing. There's anything wrong with it. We're going to ignore it. You would think oh, please, oh, please. Oh please. No navigation. Please hold. Alright, It's got t. Let's do the navigation. Let's get into the nav. This one here is going to go inside the symbol because I want them all. I don't want you to go to an external URL to the page cold. You are going to go to the browse page. So you're gonna go to a page called product browse. Open in this tab. Thank you very much. The cotton knows where he's going. Publish again. This is not going to, we're going to publish a few times. All right. Let's go check it. We're on the right page where refresh, get rid of one of them. Browse who we don't have the LinkedIn will do that, anything else? So we're on the big version rather homepage, homepage is broken. Excellent. Gets to the small side. It's working better. So homepages broken. Why the homepage broken? Looks okay. And he had an MI Rowan look at this one. Let's go to homepage. Oh, we did something wrong. K, the class that we're using. Let's look at the grid. Not put it in a grid. I did. So he's in a grid. A grid. How did he become just that way? It should be three. I don't know. If I edit this one called collection list. Because collection list as being the same name is being used here as well as on another page. All the other pages. Product browse. Yeah. So this one is using the same one. So can we remove the class I think we can write because we, yes, let's call this one collection list on the Browse page. And we're going to say u and now one by auto. Done. So we'll leave that one on the homepage alone. You're working. Let's publish again. I actually just preview it in here before we go too far and publishing. So we're gonna go bursty working, let's go into one of these guys. And it's working so much on the page. I realize otherwise we'd be here for 1 million years. I think that thing is the only or the bit 0. I think that's not bad, not bad. I'm going to have to go to test that on my mobile as well. Let's fix that and I'll show you a way of testing on your mobile, on your desktop, you should just send it to your phone, but you can't see that. So let's fix that. So your so there's this option you've got here for current Current page that we're on has a style of blue. It's kinda like a default one that comes from old-school HTML. So I'm going to say nav button current is actually going to be color of white as well. Preview you. That doesn't go blue. It doesn't go blue. Go blue. Like we might be there. Let's preview that thing on mobile and then we'll call it a day. And it is a day. Started this thing in the morning and it's the afternoon and I stop for lunch in there. Can you tell when my mood probably changed at some stage when I get angry and afterwards when I've had lots of food. Alright, so let's publish it. Update this one and what you can do on Chrome, Middle East, I'm not sure on other browsers, you can right-click and say inspect. And I've done the bottom here, you can say, show me on this icon here. Yours might be somewhere else on the page. I think it's on there. Maybe the right by default, you can say, show me on a pixel five, you can see my viewport height is not quite right on that one. We might just put 100% and so it fills that completely, or maybe even smaller so that you can know that you can scroll. Sometimes there can be useful as well that you're only got like 80 per cent. But done, you're done. I'm done. High-five, make it to the end. You win an award. We both win awards. We both got here. I hope you learned something. I felt like it was an important part of the end of the course to tie it all together and see how the different parts connect. And hopefully also you saw that there's the right way of doing things. And then there's the, it's just working and it's fine and artists that are on different browsers, and it will do a lot of push back to the designer. So there's a lot of things that especially with the name length, is important to see. Especially if the designer, I know now when I'm designing it, that I should be looking for longer titles. So it's great when you are designing and developing the site. Yeah, that is it. Thanks for coming along on the ride along. I hope you enjoyed it and I'll see you in another video real soon. Bye. 116. Class Project 08 - Ecommerce: Hey, it's homework time, not homework. It's fun, practical application of your knowledge. What I'll do is I'll get you to do the same I did in the long video previous to this build-out an e-commerce store, you only have to do one patient. I have to do all three. It's up to you if you've got time dual three, but the minimum is just one of the pages. Pick the homepage, the product browse page, or the product listing price. What do I even mean? Let's have a look at the actual site. I remember there is 12 and then the actual product page, just do one of them. I want you to get used to adding the cut and whatever page you do have the full or is it a ticket on it? Okay. So grab that and put it on the Browse page if that's what you're gonna do, or the homepage or two or three pages, it'll take a little while, about an hour, according to Dan. So yeah, it's a reasonably big job. And it's not again, style points, okay, It's not about how beautiful it is, how great it is, what the UI's like. It's about living the functionality and practicing workflow. That's the kind of place where at least one of the pages, all three, if you're up for it, use your own product or company. Okay. So just switched out like just don't do Scott T you can just put it in a bit of texts cooling at your own name. If you did do the Figma or XD course, is a great time to go back to that design and pull stuff from that. If you haven't done it, don't worry, just come up with a brand name. Pick some colors, pick a product, grab some images from Unsplash, or maybe you've got some of your own stuff. Okay. I have three products. You don't have to bring them in with a CSV, just load them in. K, I want you to have the cart button and the Add to Cart button. It's kinda the big practice here is to work out how to get that thing to do what you want and just practice getting the Add to Cart kinda working in there. So you need at least one variable, which is like I showed you there, the different weights you as might be different color, different size depending on what you're doing. So three products with at least one variant breakpoints. So making sure it works across all of these. I want you to customize the cart. Now I have to do much as once you'd be able to be able to kinda like the same way twice. I want you to be able to get into here and actually change the styling in it. Okay, so see if you can figure out how to get in there and do it. So pick at least one page, but three products in your product section of your e-commerce site. It can stay as the free site, get it to work on all breakpoints at a cart and the cart button and see if you can customize that cotton mean you as well. So take a screenshot of your page and all the different break points, okay, my app load or you may end up uploading quite a lot of them. If you do all three pages and all kind of fall break points, you can skip mobile landscape. You can tell I don't like that break point was it wasn't there. But I'm sure there's lots of people who scroll websites vertically, horizontally. Let's take a screenshot of the cart as well and upload that. And I'd love to see it, especially if you do send it out on social media. If you do something like your own project, if you end up just doing Scott T, Okay, Trying to your own one because it'd be exciting and you get to use it for your portfolio. Alright, that is your class project. Enjoy, enjoy the process, enjoy getting stuck. Because when eventually you figure it out, all that is good learner. All right, that's it. I'll see you in the next video. 117. What Next After Your Webflow Essentials Course: You made it. I knew you do it. Not everyone does. So well done. You will high-fiber we did it. Done is not easy to get here. And I just wanted to say, Good Anya, because not everyone, everyone else is like watching TV and you're here doing Webflow all the way through. So well done and congratulations. And what we'll do now is just talking about what to do after this, like my suggestions. You might want to Nick's look at some other courses. Let me explain those. Could you tell us losing my train of thought there? Let's talk about the different courses that you could do after this. Because when flow gets us to a point, I've spoken about a couple of times throughout the course, like there is if you haven't already, Figma or XD is kinda like a good place to be before Webflow doing the design there. So I've got courses for both of those. Go check out my Figma or XD Essentials. Also. Another really handy thing to know when you are using Webflow is code. We kinda got into bits of it and we kinda learning about classes and floats and all sorts of other stuff. There are some fundamental HTML and CSS that it'd be super handy to know. Even if you don't want to code it. It just helps with workflow so much. So she got, I've got something called the Web Design Essentials course. Uses VS Code as the, as the thing. So it's, it's quite cody. It is only code, but I have a look at the intro and a few other things is I feel like I've broken it down relatively well in there. So go check that out. Also, Malcolm, not the developer, bring your laptop, has got a really cool course on tailwind and avalanche, which is kind of CSS. If you aren't gonna go down especially a bit more of the code route can make your own stuff and tailwinds are really good CSS framework and same as Avalanche is great for JavaScript, so check those out as well. Other courses I got lobes, Photoshop. There's an essentials and advanced for Photoshop Illustrator InDesign after fixed Premiere Pro InDesign, I say that. So those are some courses that you might carry on with. Also, if you enjoyed the course, make sure you tell your friends, family and colleagues. And also if you have the ability and facility, I'd love a backlink to the workflow course, Dan's amazing Webflow course. Click here to find something like that. Those things are super valuable to me and my business more than most people know. If you can, that would be great. Also a big thank you to the bring your laptop team. I'm just the good-looking face here at the front. And a lot of work happens behind the scenes with my editors, Jason Hummels and Taylor Coleman. Thank you very much. And also a big thank you to Stephen Butler and his team of teaching assistants that help us with all the Q&A Thanks team. Also, at this point, sometimes people who are new, if you're already a web designer, you're a web designer, okay? Or developer or an engineer. And you're just learning workflow as an extra tool. Some of you though, will be a little bit more apprehensive. Little bit of impostor syndrome like MIT web designer. Now it totally or I give you permission to write web designer next to your name. You are using Webflow and amazing popular tool to build interactive and accessible websites. So get out there, be proud, and call yourself a web designer. I give you permission for everybody though. Well done. We made it to the n's. Congratulations again. Go off. B3. I don't know. I don't know how to in these courses. Yeah, I'm going to wave and we're going to fade to black. You ready? You wave to feel like we've gotten to know each other. We'll see, I'll see you in another course. Alright. Bye. B anymore or credit the end of these videos.