Webflow For Beginners: A Webflow Tutorial (2021) | Sam Harrison | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Webflow For Beginners: A Webflow Tutorial (2021)

teacher avatar Sam Harrison, Webflow Enthusiast & Business Owner

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

35 Lessons (4h 43m)
    • 1. WELCOME TO MY WEBFLOW COURSE FOR BEGINNERS

      1:57
    • 2. BASIC INTRODUCTION TO HTML & CSS

      1:50
    • 3. THE INTERFACE: ELEMENTS

      10:03
    • 4. THE INTERFACE: STYLE PANEL

      11:02
    • 5. KEYBOARD SHORTCUTS

      4:36
    • 6. DISPLAY SETTINGS

      4:40
    • 7. DISPLAY SETTINGS: FLEX

      6:06
    • 8. DISPLAY SETTINGS: FLEX GAME

      5:04
    • 9. CSS GRID

      7:38
    • 10. FLEX VS GRID

      15:09
    • 11. POSITION

      9:47
    • 12. NAMING CLASSES

      13:12
    • 13. STRUCTURE

      10:24
    • 14. MOBILE RESPONSIVE

      11:12
    • 15. SYMBOLS

      4:15
    • 16. CMS ITEMS

      10:23
    • 17. FORMS

      4:01
    • 18. NAVS & FOOTERS

      20:34
    • 19. CLONEABLES

      7:52
    • 20. COPY & PASTE ELEMENTS

      2:31
    • 21. BASIC INTERACTIONS & ANIMATIONS

      9:49
    • 22. LANDING PAGE INTRODUCTION

      1:15
    • 23. CLASS PROJECT: SETTING UP THE PAGE

      3:44
    • 24. CLASS PROJECT: MAIN NAVIGATION

      12:45
    • 25. CLASS PROJECT: HERO SECTION

      9:43
    • 26. CLASS PROJECT: LOGO GRID

      7:35
    • 27. CLASS PROJECT: INTRO SECTION

      14:50
    • 28. CLASS PROJECT: PROCESS SECTION

      15:38
    • 29. CLASS PROJECT: CTA SECTION

      7:29
    • 30. CLASS PROJECT: FOOTER

      10:44
    • 31. CLASS PROJECT: MOBILE NAV

      5:53
    • 32. CLASS PROJECT: MOBILE RESPONSIVE

      14:23
    • 33. CLASS PROJECT: INTERACTIONS

      4:33
    • 34. WEBFLOW TO WORDPRESS

      1:57
    • 35. WOULD YOU LIKE MORE?

      0:36
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

893

Students

4

Projects

About This Class

WEBFLOW FOR BEGINNERS 2021

Hello! Welcome to my Webflow course for beginners 

My name is Sam Harrison and I run multiple web design and development businesses based in the UK. I personally use Webflow for almost all of my client projects and it is my favourite web development tool.

This course is aimed at anyone wanting to get started using Webflow and I go into how to use the user interface, how to structure your websites using div blocks, containers and sections as well as how to correctly use display settings.

Webflow has a slightly steeper learning curve than some other builders but by the end of this course you will have learned all the essentials that Webflow has to offer!

Meet Your Teacher

Teacher Profile Image

Sam Harrison

Webflow Enthusiast & Business Owner

Teacher

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. WELCOME TO MY WEBFLOW COURSE FOR BEGINNERS: Hi everyone, and welcome to my Skillshare course for Webflow beginners. I wrote my name's Sam Harrison and I run a digital agency based in the UK. And we predominantly use Webflow in order to create our client websites. And in this course, I wanted to give you all the basics on how to start using Webflow in order to create your own websites or websites for your clients. I've been creating websites for the past 10 to 15 years, up until relatively recently, I've been using WordPress. So maybe you were like me that you've been using WordPress for a period of time. Scene where play around anyone to give it a try. This course will help you make that transition from whenever you're currently using over to Webflow. So what is Webflow and why is it so good? Webflow at its heart is a visual coding tool which lets you essentially write code without actually having to know how to use HTML and CSS. It certainly helps if you have a basic understanding and this is something we'll touch on throughout the course. Or the beauty of Webflow is that in order to get started, you don't have to know how to code at all. So in this course we're going to cover all of the basics. First off, we're going to go through the interface. I'm going to show you how everything works so that you have a complete understanding of how to use all the different elements within Webflow. We'll also look at how to use the Webflow CMS, where we will create a basic blog section. We'll also look at all the different settings that were player comes with. We'll also look at how to create animations. And towards the end of the course, we then have our class project where I've designed a landing page specifically for this course, which will take you through a lot of the steps and techniques that we've used throughout the course. Okay, So I hope that all sounds interesting to you. Or my main aim for this course is to get you comfortable in using Webflow, which sometimes has a reputation for being harder to learn. And I want to get you to a point where you're comfortable enough to start creating either a website if you yourself, or website for your clients. Okay, so if you're ready, we'll get started. 2. BASIC INTRODUCTION TO HTML & CSS: Hi everyone, and welcome to the very first video of this webinar course. Again. So before we get into more details, I wanted to just go into a little bit about what HTML and CSS is and how that relates to web flow. Now if see the beauty of workflow is that we don't actually have to worry about writing code. But essentially what it does is create that code 4s. So just to illustrate what HTML and CSS is, we're going to look under the hood of the scotia homepage. So what we're going to do is just right-click and element and click inspect. And this is going to bring up two different panels. So what we have here is HTML, and what we have here is CSS or cascading style sheets. So in terms of the difference between the two, you want to think if HTML as the content of your web page and you want to think if CSS as the style of the web page. So for example, the content would be the text itself. And the containers in which the text citizen. And the style would be the font size, the font height, width, the colors that are on the website, that would be classes, the styling. Now again, obviously you don't have to worry too much about being able to write this. The B2B workflows that we never have to write any code necessarily. There are sort of rare occasions where you can have custom code in your website, website, but generally, you will not be writing this yourself. You'll be dragging containers or divs. And in fact mentioning devs. This here, you will actually spoke quite a lot when we get into the Web Flow interface in the next video. So this is HTML, CSS, and essentially web flow creates both of these 4s. Okay, so hopefully that makes sense. On this next video, we're going to be looking at the interface of weaponry. 3. THE INTERFACE: ELEMENTS: Ok, so if this video we're going to be carrying into the web flow interface. So what we'll do is we'll start from the left-hand side and work our way around. Okay, so what I've also done is loaded up a free template that comes with him workflow. So if you want to follow along, just load on a template says velocity and you can sort of follow as we go. Okay, so initially what we're going to look at is the first panel here, which is the Elements panel. So basically this contains all the different various things you can't be needing in order to create your website. The first section here we have different lamp. So we have Section contain a Grids. Columns are also probably include Disraeli within this as well. So just a guarantee what you'd use this for. So a section for example, here you can see it's labeled heterosexual, which is sort of the main part of this. And, and within this we have a container containing our various print text and buttons. So what they would've done there is dragged on a section, followed by a container, and then various different div blocks to house different elements. Really a div block can actually be any of these things. But weapon, we have included sort of pre-made sections to get you to think about how to structure a website. So January when we get into structuring later in the course, you will see that you have a section first followed by a container with a maximum width and some padding, and then various different blocks which can house different kinds of content. Okay, so as we move down, a lot of this is going to be fairly self-explanatory. So they have premade Wharton's premier Lean blog. She got headings, text blocks, text links. Obviously you've got a section here for importing images. You can host your own video on the site. You can embed video as well, sorry, video. And you can have animations on as well. And pretty much all of us, I would assume you would know what it is. And you've got some premade layouts and sections here as well. So the nav bar, for example, you might be using this quite a bit. So rather than having to style and create your own navbar every time, workflow has a pre-made Navbar component which is quite useful. And they do have also a sort of special pre-built layout panel. Now I can't say I've ever actually used this before myself. There is something on the web for o epsilon which is unclonable. So cloner balls basically is clonal items that other designers have made. And if you go into sort of use premade layouts, I would go on to the Web Flow website and have looked at those instead of using these. But we'll get into Clarion abou items later in the course. Okay, so I didn't think anything else means guaranteed. Rarely. Again, we're going to touch upon most of these things that again, as we go throughout the course. Okay, so onto the next one, we have something called symbols. So again, we're gonna go into a video into itself Bazin boos, but essentially as a negative view as symbol is a reusable element. So you want to apply the symbol status to something like a navbar. So rather than having to sort of create and style navbar for every single page ego onto, unless he had an About page. And you wanted to just keep this Napa you created. You can create it as a symbol or apply as a symbol. And then when you go on to that page, you will have it sort of pre-made hair saved. And if you clicked on it, it will then give you enough bar. If that makes sense. Berg, and we'll go into more now on future videos. The next panel is the navigator. Now you're also going to be spending a February Tom, this one as well. And the navigator essentially lets you sort of see what you have on your website currently. So she dropped down different sections. It will highlight what is where and you can actually drag around different sections as well by doing this. So as well as dragging items onto the page like this. You can also drag items onto the selected part of the navigators. So we wanted to post something within this container. Now it's highlighted. If we clicked onto a container, for example, which we can't do that because you gotta have taken tenants inside of itself. If we just put a div block in, it will then add the diblock within that container. So that's the navigator. And the next one is the Pages tab. Again, nothing particularly special about this. This is just a list of all the pages within your website. This is obviously just a list of pages within this template that we've loaded up. And if you want to add new page, you would do so here. And then from here you can call the page whatever you want to call it, as well as enter in all your different metadata as well. So page descriptions, page titles, and everything else that you need for SEO. So SEA or go into a little bit more later as well when it comes to getting the website live. Okay, so the next panel is the CMS. Now, again, we're gonna go into a special video about the CMS by CMS collection would come under something like a blog. So you'd want to have dynamic content on a blog and a CMS collection would let you do that. If you had, say, a portfolio website, you will probably ten or into a CMS collection for weigh all clients could upload new projects whenever they wanted to. And rather than the client having to sort of create and style a paste themselves or you haven't ended it yourselves. You can have sort of a premade template, which you can then upload the new details too. So that's just a brief overview of what CMS collections are. And again, we'll go into that in more detail later in the course. So for this course, we're not gonna go too much into the e-commerce side if this course is to the popular outdo, a more advanced one where we look at creating your site into a e-commerce store would just for now, but we're going to leave that where it is, but it is there. You can turn your website into a shop. And then we have on the next panel down assets. So again, fairly self-explanatory. What this is, this is where you drank in all your documents or your energies, or your SVGs or your icons to be used within the website and see you again. Not anything else to that really. And that's pretty much it for this panel over here. You then got backups as well. So obviously you can save your website's point if you wanted to. Okay, so what we'll do now I think is work around this topic. So what we'll do is have a look at this one hand, which is the preview. So again, fairly obvious what this does. This just actually preview the page as it is without any of the panels on the sides. And then we have our different devices. So this is what makes web flow you particularly grey if you've ever used Wordpress before, depending on what you're using to create your WordPress website, it can sometimes be a real pain and altering and designing website on different devices. So there are there are some papers outlet that let you do it, but workflow, I think is the best when it comes to this. So let's say, for example, we want to have various different elements on mobile and tablet view to be all different sizes. You can style it within these different sections here. So for example, when we get to move our view, the website has to be laid out different executed. The screen size is smaller. So let's say we wanted to keep the text on desktop view as 60 pixels. But on mobile, we wanted a smaller, It already is smaller. So we make it even smaller. That would make it 40. Whenever we go back to desktop view, it will remain as it is. So you can basically auteur each screen size to seat and you can style it to sue based on screen size that you have. Which is really, really, really useful. Okay, so again, we'll come back to mobile responsive as later as well in, in more detail. From here, obviously we have under medium or go much more into that. And then here we have export code. So one of the great things about Web Flow is that you are not stuck within its ecosystem. If you want to just create the website on Web Flow and then download the code and just upload it to your house thing and you can host it yourself just as a static HTML, CSS, JavaScript website. So you don't have to stick with flight if you don't want to. Now, when we briefly talked about CMS collections earlier, this is something I would lose functionality if you did that. So if you want to keep your blog working as it would deal with in web flow, a won't actually do that if you export the code away. So that's the only thing to bear in mind. So really you do want to stick with them. Apply if you can. If you want to create a website homophily and take it away, you candy, there is something else as well. And could you densely, which is something that's not created by web flight. They've made it specifically forward flow in the way that you can turn your web flow design into a WordPress website. And I think you can turn it into a Shopify website as well. So we'll go into a little bit on this later on. But that is quite useful if you have a client to just refuses to stop using WordPress. It's a shame, but sometimes it does happen and the CRM functionality that workflow doesn't completely do that were press can offer. So every now and again you will have a client or just a projects in general that you may need to use WordPress for. But if you still want to create and design the website within web flow, you can still do that and then export it using this plugin which will go into a bit later. Okay, so from there, we have published project. So web flow allows you to have a temporary. They may just say you can sort of see what it looks like on a browser, which is always worth doing. And then once you're ready, you can apply it to your Kristen domain of your choice and obviously publish it to that once you're ready to go. Okay, so that's it for the first few parts. Next up we're going to be getting into the styling panel. 4. THE INTERFACE: STYLE PANEL: Okay, so for this video, we're going to be going through the styling panel. So initially they were actually going to miss out the display settings just because in the next few videos, we're going to be dedicating at least the next two or three to display settings entirely. So it's hard to go over these quickly as are a bit more complex. So we're going to just hold off on display settings just for the moment. So just minimize that for now. So what we will start with though, is margin and padding. Now if you are using design software, I imagine you actually already know how this works. But just for those that might not occur into this just very briefly. So the main difference between margin and padding is the way in which they asked spacing above and below elements on the website. So just to kind of make this easier to see, I'm gonna give this a dark background, a k. So first of all, we're going to apply padding to this and we're going to apply evenly. So I'm going to do is hold down Option and then I'm going to drag down with annual c as equal amounts of padding above ambling. Do so within the container itself. Okay, so now republish it back how it was. And we'll do it with margin. If I hold down option again and drag or puts, you say it's adding space above and below, but it's doing so outside of the container. So that's really the main difference between margin and padding. Another popular use case of margin is, or you can have a negative value. So let's say you wanted to have this section here overlapping with the hair section. What you can do is give this a negative margin. And you will see overlap with the Harris section. Say there's plenty of sort of different designs within web design where you might want to use this. So if you wanted to achieve vine Web Flow, that whether you do it again, so we'll just pop up with back. It was okay, so now I'll move on to size. So again, a lot of this might seem quite familiar. You can have minimum width, maximum width, minimum height, maximum height. And you can sort of just apply different widths and heights, the various different elements within my play. A popular use case would be perhaps the hero image here. You can see at the moment is not taking up all of the screens. Let's say we wanted to have it taking up 100% of the viewport height. So what you do in this case, if my choice is selected, and then over here, you can type in on a 100 vh, which is viewport height, and click Enter. And now you can see it's taking up on a 100% of the people. And that were the same for tablets as well as mobile landscape and portrait. And obviously this section also works for containers. So let's say we wanted to set a maximum width this container, and we wanted a 700 juicy, we shrink down. Okay, so that is how you would use sizing. Okay, so we'll just briefly touch on overflow. So we'll go into more detail on this towards the end of the course when we get to sort of the testing phase before launching a website. And bot will just briefly touch on it now. So sometimes you want to find an error. Once you've created a website where the website will scroll up and down as it should. But sometimes it will veer off to the side. And this is usually because there's an element that's going outside of the viewport and away you can actually fix this is by pressing overflow hidden. So anything that is sticking out of the screen, we'll, again, it won't push the entire screen off to the side ceremony scroll up and down. Rather than very often designed. Just to give you a very quick example of how that would look. So if I apply some margin to that, so it goes off the edge. So it goes up and down and also scroll up to the edge. So this can occasionally happen and a way of fixing that will be depressed overflow hidden. Okay, anyway, so we'll again, we'll come back to that again a bit later on. Just accounts a bit more detail how you might want to use them. Okay, so we are going to just move on to typography actually. So we're going to miss out position just because this is quite complex. And again, like the Display Settings, we're going to have a video completely dedicated t position as well. Okay, so for typography, I imagine all of this makes perfect sense. You can choose, again, any of the funds that come pre-installed Web Flow. You can use Google fonts. You can upload your own fonts and you can also use a baby funds as well. And everything else you would expect to see on a topography panel is hey, so yeah, font-weight, font size, color, alignment. You can have at a spacing to again, none of this is gonna show you a foreseen as before. And okay, so text shadows again, I imagined, you know what this is, but if we go into it, we can apply a chalet to by default black. You can adjust the blur so it can make it well, it's x is glowing. I'll just change the color of that so you can see what kind of effect actors, if that's your thing. So that's texturing. And then we have borders. Let's say we wanted to have a box around the heading or make it a straight line. We'll make it a little bit thicker. Press five pixels, and we'll make it white. Box shadows works pretty much in the same way. So let's say you had a section, you wanted to give a shadow too. And if we apply that here, just so you can say, I'll make it red again. And you can adjust the amount of blur and the distance that it will go as well. So you can kind of see that it's kind of glowing on the edges. It's been too extreme. So that's how both text shadow and box shadow is work. 2d and 3D transforms. And we go into this. So again, some of this is fairly self-explanatory. So moving, unbelievably moves the section around. Scale would be making it bigger or smaller. Rotating obviously will rotate it. And then you have skew as well, which you can use for sort of 3D type effects. Again, I'll give you some better use cases of this later in the course, but this just gives you an idea of how this would work and mentioning overflow hidden. Now I've messed with this. You can actually see that this actually Coming off the edge of the screen slowly. So one thing we could do is try and discover where bounce is causing an essay. If I go on to this section now that we're doing this today, and I go into overflow hidden as a chance, they might solve that problem. So it could also be within the actual container itself as well. So we'll do that and navigate. You saw there they went from having a bit of a gap to no gap. So now we can still have this element off the edge of the screen. But I'm not able to scroll off to the sides. So that's basically a better use case of overflow hidden B. Ok, so I'm going to illustrate how to use transitions. And we're gonna do that by using a button. So what I'm going to do, think I'll drag a div into this section here. And then we're going to add the Boston. Okay, we're going to just give a little bit of spacing a k, right? So as it stands, when we hover over this button, nothing really happens. Or we want to try and do is have a similar effect to these ones appear when you hover over it and the background color changes slightly. So what we're going to do is we're gonna change the color of the button to read when we hover over. And we wanted to gradually do that as well. So you can see here, when you hover over button, it's kind of not immediately changing. It gradually changes to blue. Okay, so we're going to gradually changes to red. So we'll click on the button. And what we'll do is first of all apply the transition. And we want to have a background color change. So we'll click on background-color. And as you can see, there's tons of different options you can have here. There's tons of different use cases for this transition as well. But just for the purpose of this, I'll show you how to deal with the button, say, background color. And we'll have a duration of 300 milliseconds just for fun. And then we have various different types of easing as well. So if you don't know which one you want, you can actually select one and play and it gives you a clip of what it would actually do. Just for this, we're going to just stick with the general e is one. And then to alter this on hover, we need to alter the state. So up here, you click on this and then you have various different states. So what we have is non hover, pressed, focused and visited. Your gonna put only be using non and hover and what we want. So auteur is the harvest date. So if we click on that now, you'll see that the button is still blue and the background, and that's because the background is still place or when the day is change this to, let's have as fabrics are sort of already orange. And now we go back to the non-state able change back. If we preview this, you should see it will gradually change to fabric or that ready orange color. Okay, so that's just a simple way of using a transition, a K rise, so we're nearly there. So when it comes to filters and cursor, you don't often use these two overs. Often. Felt his first. Again, I don't think I've ever used this, but it is the same. Let's say you want to change the way that this background image looks. You could click on filters by default comes with a blur like my BCE, we present things, but you also have brightness, contrast, saturation, grayscale. I guess if you're going to use any one of them, grayscale might be one you would use, but generally you want to be altering the images before you upload it into work into web flight. So yeah, is there if you want it, but I must admit identical ever used the 1s. And then cursor, you might want a possible use case, a vessel if let's say you had a sort of a slider gallery that goes from left to right. You might want to have sort of the low grab icon. You might want to change it for that. But again, you can sort of click on an element and then you can apply what cases you want to be on hover events. Let's say we wanted the crosshair bone. We pretty that now when we go to the first button is stay agile, expect it to, and this one, it will be across their AK. So that pretty much does it for the starting panel. Again, I appreciate there's probably a few here that I've sort of skim through quite quickly. But as we go throughout the course, we'll come back to all of us as we carry on. Like I say, some of the things we've missed out we're now going to do in the next few videos. The next video is going to be about the various different display settings. 5. KEYBOARD SHORTCUTS: So just before we do guarantee the display options which will be next up, I wanted to just quickly talk about keyboard shortcuts. Now first course, I'm actually not going to be using them all that much just because it could be a little bit confusing. If I quickly do a keyboard Shoko, you're not going to see where something came from. So if just for your benefit or no, actually going to be using them as much as I would normally do. But I didn't want to really show you how to use them if you want it. So what we're going to do is locate where they are. So if you go over the question mark symbol here and then click on keyboard shortcuts, you can do that. And there is also a keyboard shortcut for keep osha quiz. So if you hold down Shift and question mark, it'll bring up a complete list of all the different things you can use as a shortcut. Now, the one thing we will be using throughout the course is sort of copy and paste. Now I'm on a Mac, so it says Command C, Command X, Command V. This would be if you're on a PC, there should be control. So whenever you see control, sorry, emergency command, just think of control instead. So there are a few of the things that I, I tend to use a lot when I'm not thinking this tutorial by OG show you how to use days. So if you want to bring up the elements panel, if you click on the letter a, it will bring up automatically. So you didn't have to go over and click on. Are you saving which time doing? Maybe a tiny bit. But once it, once you get going with Webflow and you kinda get used to the interface and you get used to using a quickly. This will sort of all at 0 and it will actually save you a little bit of time. Okay, so if we press a, again, a ocher over to the Layers panel, so there's no way of getting rid of that with that picking something else. While I tend to do is click a if I want something and I click twice, and now get rid of it. And maybe onto Zed. If you click that, that will bring up a panel Olympism, which will be the navigator. So again, that's quite useful for just quickly having their own if you want to communicate something. The last thing I'll say is getting all the assets panel, which would be the letter J. And if you do that, spring up all the assets that you have, typically drag onto your page. Okay. So there's just a handful of things that I thought might be useful to know. If you want to add padding and spacing, because this a little bit already. But if you want to add an equal amount of padding or spacing, if you hold down Option or Alt on a PC, it will then make sure it's equal both sides. If you do it just on one of them, it won't affect both of them. So if you hold down Option sorry. Yeah, option. And then drag that around and we'll make sure it's equal if you want to do it so that literally everything around the box is the same. You can hold down shift. And I will then do the same on absolutely every side. In this case, it's probably not a great use case for it, but I'm just illustrating how that would be done. Okay. So just a couple more thing that's worth mentioning. Obviously, you can copy and paste elements freely however you want to see. Another way of doing that is if you hold down option and then drag the item, it will also copy it for you as well. Okay, so that's just a brief overview of some keyboard shortcuts. But like I say, for this course, just to make it slightly easier for you to follow me, are not going to be using them over time. And how tend to go into here and just drag myself. Okay, So just one more thing. Elements panel. Obviously, when you click on it, you have to then search for the element that you want. There is one of the way you can do this. So what you can also do is click Command or Control and the letter a. And now I'll bring up the find anything panel. So from here, you can just type in element that you want. So let's say if you wanted to add a div, you could do that. And if you type in the letter D, The first thing that comes up would be the div blocks. If you just clicked Enter, it will then automatically put it onto the page. So if we try that, so if we make sure the section we want to add a div into is highlighted. Make sure your mask is out of the way. They can command a and end date and it will very quickly add in the dev blog. So is that much quicker? It's probably not, but it's just nice to have the option there if you want to just quickly find something this way is probably a personal preference. I mean, once you get faster with using Webflow, you'll probably find your belt to do is quite quick. So if I do that now and see if I make sure it's highlighted and say it's Command L and D and of other deaf block, if our study that the other way measured heart attack over here, k down the D-block. There's not much any atom. So a really as a personal preference, but they are there if you want to use them. 6. DISPLAY SETTINGS: Ok, so if this video, I'm going to take you through the various different display settings, with the exception of flexbox and grid. Again, to dedicate a video to both flexbox in grade just because they're a bit more complicated. So for now, we're going to focus on the first row which will be block, inline, block inline, and display none. Okay, so just to illustrate this, I'm going to throw on a div block into the Harris action. I'm going to give us the block a maximum width of 900 pixels. And then we're guaranteed center that. Okay, and then within that, we're going to throw in a heading as well as some texts. And just so we can see there's a bit more clearly, I'll make it white. A k psi. As you can see, by default, the display settings of both of these elements is set to block. So block basically means that the element takes up a complete line, always own. Rather than by default, the tags guy next to each other. This element has a complete line to itself with a maximum width of 900 pixels. Next case, because that's what the div container is seti. Obviously that would be different at a different width. So if I was to copy and paste the word heading over and over and over again. Eventually. If I do it again now, you'll see we'll start on a new line just because it's sent to a maximum of 900. But generally it is basically taking up a line of its own. But let's say you wanted to have this text here next to them. Away. You could do that is by changing its display setting. Say what you would do is click on heading and then set it to inline-block. And you did the same for the hex play also inline-block, and you'll see or jump to the same line. So now with inline block is only taking up the actual room of the elements itself. So because the elements stops at the end, there is kind of box within itself. And therefore, because this is not passed 900 pixels, they both fit onto the same line. So we'll just pop that back to how it was. Ok, so that's basically how block and inline-block works. In terms of this particular sensor pay, you probably keep it like this where you have a heading and text ballet. But there's plenty of design styles where you'd have maybe an icon next to heading. And that's kind of where you might use that setting. Okay, so moving on to inline, rather than just clicking on this, there's a better way of doing it. So inline, you want to think of mainly as a style with style. So let's say you wanted to have the word insight in the sentence, a different color. If you try doing that by just clicking the color picker and clicking blew, it wouldn't just only select the wet inside, they would do it the entire blog. So what you need to do is if you hover over again, you get a parallel comes up. And what you want to do is click on ramp with span. And as I do that, you will say is now automatically changed to inline. And what you can do from here now is the what we did before is if you wanted it to be blue, you can now select blue and it would do that. So you kind of creating a style within a style that already exists. And it's not just a case of cholera, you can make it much larger as well if you want to take. And that's how you can do with the inline setting. Again. So let's come back to how we were. Okay, and then lastly, we have display none. Okay, so in terms of why you would want to use this, you might want to say for certain screen sizes kind of get rid of an element within the display. So let's say for tablet view, we wanted to get rid of this section. Hey, you can click display none. And that would actually affect all of the different screen sizes going down. Because that's what happens whenever you, whenever you get rid of something that would be the same going all the way down books. Back here, it is still displayed, say display non basically gets rid of an element from a deblocking sits between warranties section sits between a OK. So hopefully that all makes sense. And then for the next video we are going to be looking at initially at the flexbox, followed by the grid. 7. DISPLAY SETTINGS: FLEX: Okay, so for this video, I'm going to be taking you through the flex display option or flexbox. And what I've also done is loaded up a blank template or a blank projects. If you want to go and do the same, you can sort of follow along with me. Because what we're going to do is create our own heroes section. I'm agrees flags to sort of order all the different items within that section. Okay, so first of all, we need to throw on a section and we'll give this a name of hair section. Again. And we're going to give this section a height of 100 vh ve pour height. And then we're going to add in a image for the background. So we'll go into the plus icon here and we'll go and choose image. Upload, wherever is the I have lying around. So what we're going to do when this loads on it, we're gonna set it to cover. We didn't, we didn't want to tile. And we'll also do is pop on an overlays. If you go back to the background section here, click on the plus icon and then click on Color. Avialae is gonna make your slide doc for risks. We're going to have the text on harris action as white. So come off this and what we'll do now is we'll throw on a container. And we'll also make the container 100% of the viewport height as well, just to illustrate this better, AK. So what we'll do now is add on a heading. And then we'll also add on some texts as well. Will give a slightly more exciting title. My Collins bone. Okay, and will also make it white. And we'll just make this a little bit bigger as well. Maybe we'll make it as 20 pixels and we'll make this white as well. Okay, so we have the makings of a harrowing section here. Now, it's pretty unusual to have your title and subtitle quite as high as this. If you can imagine there was enough hair as well. It'd be just below the nav, which we wouldn't want. So I wanted to try and do is position this in different places. So what we try and do first is get it to center and have it in the middle of the image as well. So how would we go about doing this? I guess what you could do is click on the different items here. Apply margin to maybe try padding to move it around. Although that would be an absolute nightmare when it comes to responsive. So obviously this is not the best way of doing it, and it's not the way we're going to do it. Now. What we're going to do is use the flex display option or flexbox. And this basically will allow us to move this around in various different positions within the Harris section. So whenever you apply this to your project, you don't actually click on the item itself, so we wouldn't click the title and click flex. You actually apply it to the container that it sits within, which is called the parent container. So the reason it's called the pairing containers and it houses the child items, you would think of these as children of the parent container. So just to demonstrate this one we're going to do is make sure the container is selected. And then we'll click on flex. And you'll see the moment that isn't writes books, it has opened up a completely new panel that wasn't there before. And this is what we're going to use in order to move the text around within the section. So it's actually by default gone to the direction of horizontal, which we don't want. We want it to be going down basically stacking on top of each other. So if you just click Vertical, it'll pull it back exactly how it was. But now, if we align it to the center and then justify it to the center, we have what we want. So that's basically how we're going to be using flex to move around different items within the parent container. And obviously, as you can probably imagine, you can move this around a heavy alike and it will align to whichever side you wanted to align to justify same sort of thing. Let's say you wanted this at the top for whatever reason, he just click justified to the top, it will do that. W, the middle tab at the bottom. You also have other settings here we can distribute evenly from start to end. And you also have the same kind of thing, but with space around its children. So again, it's always different options that you can use flexible, but this is kind of the most obvious use case. Now, let's say you wanted to have some buttons as well. It should be quite obvious thing today. So if we try that or at a button, and let's say you wanted to have two of these. Well, what we'll do is we'll just duplicate this button here. And the problem we have is because it set to vesicle, they're going to stack on top of each other, which is not actually what we want. So what we will do is add on a div, which will allow us to pop these bosons inside. And then when we do that, we can say they've gone back to normal. So the actual elements themselves by default come as inline-block. And because we put it inside of a div itself, the flex is no longer effecting this directly anymore. So that's because we've added a division a. Ok, so hopefully that makes some kind of sense about how to use Flex. Now obviously this can get much more complicated. You can use it for all different use cases. But this is what I think what you most want to be using flexible when you're getting use to web flow. On the next video, we're going to be having a look at a flexbox test where you can sort of go through all the different options that you have for flexbox. And we'll try and complete this together. 8. DISPLAY SETTINGS: FLEX GAME: Right, okay, so what we have here is a flexbox gain. So I'll pop a link to the website itself. This is something that we're PLO have setup just to train you how to use flexbox. We're not gonna do all of them, but I'll take you through at least the first ten is not so much a attest is search, put it because actually gives you hints on the left-hand side, bought it will do is just train you on how to use Flex and all the various different ways that you can use it. Ok, so as usual, we're going to select the parent container each time. Or at least for most of these examples, we're going to be doing that. And then we're going to just get this from the left-hand side to the right-hand side. Quite simply, we are going to use just the fire for this and the OB to the right. Going on to the second one, we can see that these are both on the center. So we need to get these justified through the center so it wouldn't be aligned in the center because they'll put it in the middle of the screen. So it would just be the justify option we need. For this one. We can see that the subspace evenly, but there's space around the element itself. So for this one, we're going to use the option on the end, which is the space around option, and now put it in place. This one, we need to just get it to the bottom of the screen so that will be aligned in this case. So this one, we need to just get it in the center and justified to the center as well. This one, again is in the middle of the string, so it will be a lining. But actually what we need to do in this case is have the space around option again and now centralized that. Okay, so, so far we've been using the direction which will be horizontal. So for this one, as you can see, we need to get them stacking vertically. So quite simply, do is click vertical. And then also for us, this one, again, it needs to be vertical. But you can see that what we need to try and do is get these space now a little bit more. So they are kind of incentive, but they have no real sort of gap the ends. So in this case, we're going to be using this option. And then we just need to align it to the end. A k, right? So this one is a little bit different. This one we're going to do is click the reverse option. So if we do that, that's going to reverse them as it would suggest. And rather than having one being here is gonna just again into that section there. The reason for that is that it is justified to the star, that's where it jumped over. So the next one, again, we're going to have to get it into a vertical position. But you can see that it is once again reverse. So if we did the same sort of thing, and then we just need to get it to the end and an assorted that forest. So you kinda get the idea with this. What do you maybe just a couple more that are a little bit different. Okay. Lsd number 13 actually. So this one, these would have been perfect circles, but because there's too many, they start into squish against the side of the container. So if I can actually add quite a few more, you will see that the shape is changing purely because they can't fit as they would want to do on one line. So a way around that, if you wanted to keep it completely even all you do is click wrap. And then these items will jump to the level below, and then it will keep the circle perfectly circular irrelevant squishing against the side of the container. Ak. So I think again, always now pretty similar. If you get stuck, obviously have looked at the hints on the left-hand side, we might just do one more actually, let's do this one. So what you can also do is override elements within the flex containers. If you want to click on an individual element, you're not really clicking flex that often on individual items. But you do get the chance to override in one instance or, or a few instances. Let's just say for example, this one. They, these are pretty much where they should be. But let's just say you want one item within this section to be something different. You have your own panel which is under here. So if you were to click that, you then get different options to align singular items takes, in this case, it wants to be on the bottom. Okay? So I hope that makes sense. If you get stuck in any way, just write a comment in the comment section below, and I'll do my best to help you. We all just do one more match. Okay, this is another example of when we haven't done before. Let's say you wanted all the circles to rather than stay the shape they are. In this case, we wanted to stretch the item itself over the whole width of the container. If you go into the sizing option here and you click growth possible, that's then going to stretch them out and to fill up the container itself again. So hopefully that was useful. Again, any questions, just write comments in the section below and I'll do my best to get back to you as soon as possible. And that is the flexbox game. 9. CSS GRID: Okay, so this brings us onto the final disruption, which is grids. So I'm gonna touch on what I think are the most obvious use cases of grids. There's all manner of different things you can do with grids, just an assembler weights the flexbox, we're just touching on why I think you are going to be predominantly using grids for and it is also worth mentioning now you can actually create very similar content and structure with any one of these settings you don't have to use worn for a particular use case. So if you want to say three columns, hey, this could be achieved with flexbox. It could be achieved by just using block and inline-block. He didn't have to use grids or any one of them. And there's no particular right or wrong for which one you should use. But I do find myself using grids predominantly for creating columns and rows and then organizing that content within it. So what we're going to do initially is just create like a three chord section with an image and some text within it. Okay, so what we'll do first of all is we'll just run a section and we'll make that 100% of the people height again. And then we'll throw in a container. And we will make just for now actually what we'll do is give a little bit of margin and a bit of padding as well. Okay, great. And what we can do, we can actually just ten this container into a greater frequent or otherwise, we can also just throw in a grid within it. So as soon as we did, that brings up these different options here. I can kind of hopefully see whether gang this, so you can actually add various different columns and different ways to seat. The way you do that is by clicking the plus icon. You can do hair as well if you want to. So we want a three column section, but we don't want to raise, won't just wondering if we did want multiple ways, you could just keep clicking plus and I will add them fully. But just for now what we're going to do is stick with and just one that we had. Okay. And I will get rid of one of the ways. Okay, great. So what we're going to do now is throw in a div container to house the different sections. Now, you could just throw elements in here, and I'll just show you what that would be like if we do that by adding a heading and we just throw in a textbook, you'll see it doesn't automatically contain it within the first section. If we keep adding elements in, you will say I'll keep populating all of the different rows and columns. So if I do that again, it will now actually add an arrow beneath which we don't want. So what we'll do is rather than that, is we're going to add a diblock. So do that first of all. So there's our div and now when we did the same sort of thing, it will not push it over to the next box aside, say if we do an image Festival. And then we'll also add in a heading followed by some text as well as just add an image into here. Again. And so what we'll do now is we'll just, rather than doing the same thing again, we're going to click on the d-block. And I'm a whole Command C, Command V, and then paste the along an area. We have three different sections and we have our image and text within it. And that's just a really quick way of quickly organizing different parts of your content. So let's say we wanted to have rather than three rays, we wanted just to, we can do that. So we owned the grid option here. We can just get rid of one of the columns and it will now push the content onto the next row down. So this is really useful because what grades don't do, it doesn't delete the content you have. So just because we got rid of one of the columns, the content still going to be there and it will just push it down onto another row. So that's again a quite an obvious use case of grids. So what we also have quite commonly is just an image one side for my texts, the other side, so just sort of two columns. There is an option within my employees, I have columns, but quite honestly, you're much better off using grids because the controls is much more control by using gradient basically. So what we'll do is we'll also Italy this div block. And what we'll do now is we will get rid of one of the columns that are going to do now is get this text into this power here. Now again, we will need to add a div in nested container. If I were to just add this n, is if I did it again, it will add it to the next one down, which we don't want so do is we'll throw in a div brought to that part there. So we'll add the div and then we can just drag that heading over. And then I think we'll do really want to use the navigator for this reading. So that's what we'll do, actually will go back to everywhere. So just dragging it into a little bit tough sometimes. So what we'll do is we'll drag this text GOS beneath the heading. And then we'll make sure both of them are with inside that div block doing it by dragging it can be a bit of a pain sometimes. So this is a much better way of doing it. And now you can see again, a very popular use case of having one column with an image one side, one column with an immediacy of aside. And obviously you could reverse this as well with anybody at all. Okay, so hopefully that makes sense. How are we going to do that? So what we're going to do now is also do a, another way of using grids, which is maybe if we wanted to create an image gallery. So we're going to use this container again. And we'll actually produced which is ten, the container into a grid itself. And this time we're going to deal with, we're not going to put any divs in. And what we can do now, if we just keep adding in an image and this image, and again, they came and something else I forgot to mention. So you can actually manually position the items within the grid if you want to, rather than it automatically filling up a space. If you click on the element, you want to be Manual and click on manual. I can now drag this around however I want. If I want it in that one, they can do. So that's quite useful if you want more control over that. If I now copy and paste the image. So we come off this for a moment. So I can't make it manual for that option. Actually say to take off my new copy and paste it. And then we can add as many as we want. And if you want to get these into various different rows and columns, recollect the grid again, rather than just having two images we want, say maybe four, we can then just click plus. And then it will populate it with four images across. And obviously if you wanted to add more immune zone, you could do. So. That's another example of perhaps how you could organize an image gallery is worth mentioning actually that web flow does have a premade gallery section, which is quite useful actually. But again, you don't have to use any of these. You can just create everything yourself or you want to. And all the different controls that you'd expect with alignment and distribution are all there. And hopefully this kinda gives you a basic understanding of how grades are going to be used. As we go later into the course. Towards the end, we're going to be creating a website together or at least the homepage. And you'll be seeing how I use containers and grids all throughout that process. So this has just been a basic overview. Maybe the main use cases of grids. 10. FLEX VS GRID: Okay, so now that we've looked at both flex and grid is probably not immediately clear when you should use either one of them. And like I mentioned on one of the other videos, that you can technically achieve the same things with either flex or grid. So just before we get into perhaps just giving you an example of that, I wanted to just look at a few famous websites to show you how I would think about them and what I might use in say, news cases. So for the HubSpot website, this wouldn't be flexible grid, this will just be a block settings is they told half the screen? This section here, this sort of feels like a grid to me purely because it's in two-dimensions longer in this way, one going this way. It will kind of make sense perhaps to use this as a grid. If we carry through to the APA website. This example here. So you have sort of a background image, in this case with texts in the center and align to the center. This would be an example of flex. So that kinda screams flex mean obviously you could use, you could have used flex for this and you could use grid for this, although that would be quite strange. But in terms of getting to know when you would use one or another, this is something you'll get better at it the more you start using Webflow is something I can sort of tell you what to do to some degree. But some of this is going to be you just figure this out for yourself as well. And you'll get a feel for when you want to use grid over flex. So in this section here, again, this could be flanks, but because it's sort of into blocks of squares, they would be tempting to do this as a grid perhaps. And just the control that you can have with a grid is something I favor more. I find myself using grid predominantly. So what I'm going to do is just create something that's really common within websites where we have a piece of text on one side and the image on the other. And we're going to play around with them. We're going to try and basically make the same thing. One using flex among using grid. Okay, so first of all, let's throw on a section and we'll start with grids. So we'll call it grid section. And we'll give it some height just so we can see what we're doing. And then what we will do is through on our grid, we only wanted to have one race if you get rid of one of the rows. And now defined for now, we are going to do actually just the center of this grid is actually use flexbox. So this is how I find myself using grid and flex a lot. You tend to actually use them together. A fair bit of what we're about to do now. So for the section for the grid, I'm actually going to make it a flexbox. And then we'll have as vesicle. And, and then we're going to align this to the center. Okay, so let's have a go at putting some text and images in. So just before we do that, actually I'm going to actually apply some padding to the section just for speed. I wouldn't normally do it this way, but just so you can sort of see what we're doing, how do you that, okay, So first of all, what we're going to do is throw in a div, which will do the other side as well. So I'll just copy and paste that over. In this side, we're going to have a heading. And we'll also have a paragraph two. And over here, That's where we'll pop our image. Okay, great. So this is obviously very, very common. There's probably every single website has ever existed. You have one column attacks, one column with images. And that's again irregular. In terms of getting this to how we want it to be. We can make sure it's centered and aligned however we want to make it grab at the top or the bottom wherever you want. So again, you still have all the controls with grid as well. So that is how we do four grid. But now as if we can create the exact same thing and we'll do that with flex instead. So we'll make a new section so we'll make sure the body is selected. And then we'll add a section and we'll call this flex section. And just again, we'll give it a little bit of height so we can see what we're doing. We'll just make it a little bit further away from this one here. Ak and what spacing that I give this, so I gave this section 50 pixels. So we'll do the same with this one, so lines as 50. Okay, then what we'll do is add in a div, a k. And then what we'll do is we'll call this flex container. And then within that container we are going to have two divs which will copy and paste twice. We actually want this flex container to be a Flexbox. Say what we also want to do is then just stretch these out and then they'll both cover 50 percent of that container. Okay, So what we'll do then is exactly the same thing we did here. If I just for speed, why we'll do I think is just copy that into here. And we are image can also go into there. Okay? So you can see here we have pretty much exactly the same thing. The alignment might just need altering little bit. So we want to do the same with this bit here just to make sure it's aligned the way. Then we also sent it. And you can see by default on the grid, There's actually some spacing already. So we're awfully to make it the same, would have to adjust that here. So if we wanted to do that, we could do that in a few different ways. We could sort of give us a margin on the SLP. I think it was 16 pixels. So we could do the same here. Now you'll see it's perfectly lined, pretty much exactly the same as it is with grid. So you can see that when I did that there was not much ILA is pretty much the same in terms of speed. There isn't much to it in terms of difference is kind of a personal preference. Although there are occasions where this may change. So it's not very common to just have one section here where you have one column and then one piece of text. What is quite common is that you have multiple sections of these. So what we're going to do is just to illustrate why I personally prefer grids over flags for this sort of thing. So what I'm going to do is I'm going to just repeat this grid a few times. In fact, just so we don't get confused. Which section is which I want to just call this title of grid. And this will be flexors. We're going to copy and paste this a little bit later as well. Okay, so heavy island, so let's copy and paste this three times. Okay, so what's quite common is that we have sort of three different rows. And usually it wouldn't be quite like this. So what will actually do is just create a little bit of padding or margin above and below. Just so we've got a bit of a gap between each of the items. And quite common is that we'll have sort of a piece of text followed by an image. And then now nor in the middle tends to be inverted. So the image would be over here and the tax would be over here. Now the way you would do that with grid is if you make sure either the div block or the block containing the image is selected. You then go over to the audit section and then click which way round you'd actually want this to be. So if you wanted to have the text over here, all we need to do is make sure we did block which houses the text is selected. And then we'll put that last. And you'll see is actually jumped straight over. So there we are. Now, as you can see, everything is still aligned the same way. There's still the same gap. Now obviously this doesn't look quite right. We actually need a bigger gap between these two elements, but you can see nothing has changed. We don't need to add any padding over then on one of them. So since these are all the same class in the language have not cheap, not actually named them. Should they? Just for now, because I'm being lazy, let's just move this and it will move all of them. And you can see as I do that the other ones meeting. And that's because they're actually the same class at the moment. So there we are. It's really simple to again structure these. And in terms of getting to flip over is very simple. So let's see if we can now do the same thing but using the flex option. So we're going to again repeat this contains three more times. And we're going to attempt to do the same thing as you would do here. Now is a little bit more involved, which is why they tend to use this option. So what we'll do first of all, is just give a little bit of padding so we can break these apart a little bit. And then we want to try and get this middle one here to flip. So how do we do that? Well, with flex, a really neat thing that you just press Flip, right? So this is the problem by using the flip direction option. If these are all the same class that all going to do it, which is why this has happened. So you have to kind of change this a little bit, how you do it. So I really simple way of doing this would be to give this container here a combo class. So what you could do is just call this inverted. And this will allow you to switch that over. Okay, so, and there we are. So the problem we have though is that we still need to get some padding for this to actually look correct. So how do we do this? So if we're on the diblock, the issue we're going to have, if we apply the same padding to here, we're going to have an issue again, because what it will do is this def block here is the same as this one. And if we put padding or margin, say on the outer side, is going to do it here as well. And just to prove that without affecting a combo class, you'll see it's actually moving. On the other one as well, which obviously we don't want. Say what it has to do with this diblock as well. You need a combo class, so be padding left. And then you'll be able to set the padding that you wanted to set. So you can sort of see it's possible and it's still fine, but it's just a little bit more involved. And you have to sort of add extra classes to get the exact same result. That on-grid seems much, much easier. So again, if a quick way that I don't know, then that's great. But generally this is how you will achieve this kind of look within flanks. So for me personally, I find myself using grid more and more and more. Okay, I'm gonna give you just one more example. So what we would do is just get rid of a few, is actually okay, rid of this one too. So keep one flex and more. Keep warm grid as well. So keep a top one in both of these, what would they now think is just switch things up a little bit. And we'll perhaps through this image into there and we'll get rid of that. We're not going to have three columns, which could either be, again, a card section or a lego section with a heading and a grid, sorry, heading and the paragraph. So that's what we're going to do now within the grid, we're going to copy and paste the div section or diblock, sorry, that contains all of this. I'm going to do that twice. And you can see at the moment, because we only have two columns on a row, is pushed the next one to lower down. So what we need to do is edit our grids to change this. And we would need to add a column on. So if we do that, you'll see now it's populated by the text that we have. Okay, so the spacing for this needs to be adjusted as too far apart. That looks pretty good. Let's try that. Okay, so you can see this is another very, very common use case. And again, this is super, super easy with grid. If we did the same sort of thing with Flexbox, you see again, is pretty easy and pretty much takes about as long in terms of Dana's actually. So what we'll do is just drag this image and we'll pop it on top of there. And then what we will do just for now, delete that. And then we'll just actually copy and paste this diblock twice. And there we are. So you can see that one there, there's not much in it that pretty much the same in terms of the speed of doing it. But again, personally, I'd probably use great just because I like, I like the fact I can adjust the spacing just by DNS and effects on all of them. For responsiveness tares also quite useful. So speaking of responsiveness, Let's do that now. So we get to mobile landscape. You can see now we have this problem. So both of them is weighty scrunched up. So what we need to do is try and get this. So it's all on one column for both of them. So what we will do is go to our grid spacing here, and we will delete two of the columns that we have an automatically. You can see that they've aligned on top of each other like that. So if you want to alter the spacing, you can do 3D, then two are good. If you want to make them further apart, we can do. And because it's a class, it would have done it on the bottom end as well. Okay, so that was super easy. Now let's do the same sort of thing with flags just to see how we would do this. So with the flexbox rather than it being horizontal, what we'll do is 0 to this so that the, the alignment would now be going vertical. So let's make sure we do that. Make sure the flex container is selected. We're currently on horizontal. Let's make them vertical. And there we are. There's now affected in there. So again, what we need to do then is just apply some padding to the top of the image or the box itself. We could do that. And obviously it with any effect on mobility, last name problem until a. Okay. So hopefully that illustrates sort of the good points and bad points of, of, well, mainly Flexbox actually. So I think personally grid is the easiest way to start organizing columns and rows. That's why I tend to find myself using the most. It just save your adding unnecessary combo classes, which would have to do with using Flexbox and things. Okay, so hopefully that sort of illustrates what can be achieved with both Flexbox and with grid. You can see most of the time is pretty much a similar sort of thing. In terms of speed. There's not much enable. I would argue that grid is perhaps slightly better for the two examples I just gave. Just because personally I like the control balance to sort of adjust the spacing here. And if you want them to, again, a line however you want to, you still get lots of alignment options with grid. And I think just reversing them out and having to add an extra combo classes, which you'd have to do on flex with sort of inverting styles, I think is quite useful on grid. 11. POSITION : Okay, say for this video, we're going to be looking at position. So this can get a little bit complex. So our carry through this assembly that I possibly can. And I'll try and give you sort of usable use cases for each of these. Okay, so the first thing to talk about is static positioning. So static basically want to think of as the default. So whatever you've placed, wherever you place the OB or react and be styled exactly as you've had it on the page. So it will just be the default. So exomars talk about it in a static. If we go on to have a relative next, what we're going to do apply relative to one of these images. So if we did that now, click on relative and you say is given as an extra panel that wasn't there before. And the position is relative to itself. So basically what we can do now is move this around within the section that I lived with them. But it still maintains its position where it was, although we've moved it relative to itself. Is that okay? That makes sense. So basically, this text isn't going to shoot up here because the diblock still thinks this image is where it was before. We've moved it, right it to itself out of the way and we can meet wherever we like. And the same is true if we did this with the rest of these as well. So why would you want to use this? So a good use case might be if you want to overlap images like we just did, then we apply, we apply relative to all these images. We can kinda make a collage type effects. So this would be sort of a use case that would make sense to use for this. So let's just do that. So make all of these relative, relevant static. And then we have the same panel for each of these here. So if we want to get this one, say, overlapping this one slightly, and we want it to overlap this one as well. We can do that. Ak, say, however, what if you wanted to have one of these images over the top of either one, there is a way you can do that. So let's say the moment we have this image here is sort of in the middle of it over two. If we wanted this one on top, what we need to do is outside the set index or Z index pending waveform. And if you wanted it to be at the front, you need to give it a higher value than what the other ones are currently set to. So crummy its own authoring, which is essentially 0. If we give this a value of say, one, you're going to save, I click Enter. It now brings it to the front. So basically the higher the number you set here, movies will be closer to the screen. So you count to think it is a little bit similar in design software where if you sort of right-clicking element and you say send back or bring forward. This is kind of the same sort of thing. So it's bringing it forward further on the axis, closer to the front of the screen. So if we then change our mind, we can then revert back to how it was. Or let's say you wanted this element here to be on top. Now, you need to get this a value of two. And that will bring that to the front. So hopefully get the idea. You can move these around with this new panel that we have. And in terms of how you could order them, you could set the index to a value that makes sense in order to get that to come to the front. Again. So hopefully that makes sense and this is something that you would maybe use insert and designs. So this actually is a usable use case. So just finale. Let's pop always back how it wants to survey become static once again. Just double-check all that. Okay, say back to static. Okay, so next up, let's have a look at absolute positioning. So if we do that to this image hair, so rather than static or relative or absolute, you'll say something strange has happened. So absolute basically means that this image no longer live where it did before. And you can see we have here a new panel as well, and we can still move it around however we want it. But you can see all my last time, the text that was there has now shot up because the div block, it doesn't live within this Delbruck anymore. It basically lives in his own place in a, Think of like a parallel dimension is still within the website, but it no longer lives where it used to live anymore. And this, of course, you can then set wherever you want to. You can manually position should you want to. Or you can also position it by using these appear. So its position is relative to the body elements. In this case, if I set it to the top left, it goes to the top left of the page. So think of absolute positioning basically as the elements we've applied it to. No longer lives where East to it lives in its own parallel dimension. And you can alter where it is manually. And you can set an absolute position based on one of these values here. So if you wanted it top right, we did that. You can see it's now gone to the top right. So that is not extremely useful and have a obey. So let's get that back where it was for now. And a useful thing he could is if you wanted to stick this to a section. So he probably wouldn't do this with an MEG may want to do this, Let's say if you had less, he created a pop-up window. And if you wanted to get rid of the little, if you had like a can trigger which was on the top right of the screen, which is like a low cross. You could have that and you could position to absolute. And you can position it to the top right of that section. So let's pretend this image is that trigger. And we wanted to get it over to the top right of this particular section. Over need to do is make sure this section was highlighted. So if we do that, so I mentioned the info section is highlighted and we'll set the section to relative. And then when we do that, we can position it within that section. I may. So if we do that, and then what we'll do is go back to the image wherever it is, wherever here. And we'll have it top left. And you can see now it's presented itself to the top left of this particular section. Now is because we applied relative to that section. You still with me. Okay? Hopefully that makes sense. You want it at the top right, you click this one here. And it will, may vary. If we wanted a bottom left, we could do that and it will stick to the bottom of the section. So this here is a new section. This is the bottom of the section, bottom right, and so on. Ak. So hopefully that makes sense in terms of position absolute. So let's just get these back how they were just for a moment to make life easier. Okay, great. So moving swiftly on, we'll go on to fixed. So fixed positioning basically means it will follow you around within the viewport itself. So let's have a look at something I created earlier. So this vest, the best way of describing how to use this would be perhaps for a sort of cookie bar or a chat widget which kind of follows you around the viewport. So if I set this back to the value, I made it too. So I think I made a grid. Okay, So I pre-made this cookie bar just to sort of show you how this would work. And what I've done is I've applied to this the position of fixed. So we have to stick in a moment. So this is position fixed. And basically now if we preview this is going to move around with the page and it will not move at all, always followers within the viewport. If you've made a cookie, notice this is how you would do it. You will make it so position to the bottom of the vapour in this case. And just to show you, you can see here it is position 2, the bottom. We could have a quantity mean that's pretty unusual for a cookie policy, but you could do that. And that just means it follows around the viewport wherever you position there. And again, something like a chat with you or a cookie policy. Notice would be a usable use case of that. Ak obviously, it could be any number of things, but that's just something that I think will be quite common use for it. Okay, so let's get rid of that for now. And we'll go into our last setting, which is position sticky. Okay, So it's not just nav bars or you can apply this to, you can apply it to anything you want. So let's say we wanted to try it for this section here. So if we put it back to static for a moment, you can say as we scroll, obviously because it's static, it's behaving higher expected to is behaving where you placed it and it stays there. But if we apply sticky to this now, you will see as we scroll, this teapot which contains the text, is going to screw with us all the way down just because we've applied it to that particular block. And it will stop at the bottom of that section. Okay, so hopefully you can sort of see all the different use cases you could use for that. The most common one, most definitely is the nav bar. But again, you can apply it to anything you like. Okay, so that's the basic overview of all the different positions that you can have. Again, I appreciate a can be a bit complicated to remember all these things day. But hopefully I've given you usable use cases for how you can use each of them. And what I would do is just later per page yourself, maybe a template, and just have a little play around with all the different elements and have a goal for yourself. 12. NAMING CLASSES: For this video, I'm going to be talking you through classes and styling in General. So you'll see me say far in the course throwing on sections, containers, grids and, and div blocks and we'll heavy. And from time to time you hopefully have seen me go over here and then add a class which is essentially a name to each of the elements. Now, sometimes I went to do not just for speed. Now that was, that would only be purely for speed for showing you a different part of the course. But generally, whenever you do anything, when flow, you always want to give it a class which is essentially a name. You want to name all the elements within your, within your page. Now, the reason you'd want to do that is that if we enter the navigator here, if you can imagine we had sections and devs and containers and images and texts. All this would be displayed here. And by default, if you start styling and element or a section or a container, web flay will automatically apply a name or a class to it for you, but there'll be quite generic names. So we had a div container in my colleague, D1, D2, D3, or B section, section one, section two, section three. And if you have lots and lots of these and the navigator, you'd have absolutely no idea what was what. And it would be very hard to actually navigate your way around your own website. So we want to do is whenever you make anything, always give it a name. So what we're going to do is just build out a basic Harris action again. And I'm going to go through my thought process on why I am calling certain things, certain things. So we can also do is you can apply a class to the body of the page as well. So let's say you wanted all the paragraphs within all of the pages on your website to be a certain text size and its hex, a certain font. You can actually do that and apply that class to the body. So that's what we're going to do. So we're going to go on to the topography and we're going to make it or keep it as Aereo for now. And we'll just make the font size a little bit larger of 17 pixels. And now this will apply as anything you put onto the body. So that's something quite useful to have right from the off. And you can do that with various different elements as well. Okay, so what would you, first of all, they want to nav and we'll use the default one that comes with workflow. And we'll give this a class and we'll call it main nav. Again. You can see if I click back onto it now, it's called that. And within the Navigator, you can also see it's called main nav, AK. So and within that, because it's a default item within Web Flow, It's also just give it a generic name of container for the nav container. Now actually I think we will actually apply a different class to that and we'll call it nav container. And will also make a maximum width of this of 1200 pixels. Because the Began to create our own container in a moment. And January I like to have a maximum width larger than the default container that comes with web flow. So that's TOEFL and you pixels. And we also want to give it a little bit of padding. So I tend to use a percentage and we use 3%. And then we'll just make sure it's the same on both sides. Okay? And then let's add in an image as well. So we're going to choose image and we'll use this one. It's an SVG, so we need to click the high DPI setting. And we'll just make it a little bit smaller. And then we'll give it a little bit of padding, bottom delay. So that's pretty good, right? So from here, we're now going to again, make sure you clicking back onto the body to add a new poll. We're going to add on a section. And we're going to call this harrowing section. You didn't have to adapt his in-between these here. But that's kind of a force of habit if you're used to doing hand coding, say, if we click enter it, that's not going to save that. And we're going to give this a height of 100 vh. Ak. Sentencing is good. And then we're going to create our own container. So rather than using the default one, we're going to create our own. So we'll throw on a div. Now if I didn't nothing to it, it would actually give it a title of a Zionist area. That's I've styled it somehow and I gave it, say some padding. You can see now is just coded diblock, which we actually don't want. Again, like I said, this will be confusing. So rather than calling it did block, we're going to rename this. So if you do forget, you can go back and then rename a class you can duplicate. You can also remove a class that you've applied to it. But we want to rename it and we're going to call it container 1200. And the reason being is that this could be sent, we might want to reuse throughout the whole webpage so it contain the Gemini is what you have all the way through. So to contain a 1200 and we're going to give this a maximum width of 1200 pixels and the name. And most again, to give this some padding as well. So 3%. And then we'll make sure it's the same on either side. A UK Royal. So I've actually forgotten to put a image on the Harris actions. Let's do that. Now. Let's go back to our navigator and we'll click on the hairy section here, make sure it's highlighted. And you can already see all of this makes perfect sense. So you can clearly see that the main nav is the main nav thens nav container, which contains the links than we have enough menu. Then we have the menu button Harris actually contain a 1200 and so on the hair of section, we're going to add an image again to choose what I did on make sure centeredness case. And we want to have it covering and we do not wanted to tell you. Okay. So there we are. And then within our container, drop this down. That's what we're going to now start throwing our texts. So what we'll do now is throw it a heading and we'll throw in some text. And we need to make sure we rename these as well. So just to illustrate, these items aren't quite aligned properly because something is missing. So let's try and figure out what that is. So on the container, we can say everything is correct as it should be put on the nav container, something appears to be missing. So what is going on here? Okay, so this is a really common mistake that I made quite a lot. When I, when I made this container, I missed out one vital thing. And this is something that's really important and I can't believe I just did it again. You want to make sure that you centered the Contain x if he don't, is going to appear off the screen. So I got confused for a moment there because is TOEFL injured is both padding of 3% on the side, just like it is for the napkin saner. But I didn't click this button here, which is to center. So if I do that now and we look, you will see has corrected it. So that's really important. So don't make the mistake I just made major, you always click Center. And I must admit that is now given actually if you are forgetful like me to actually, you can actually use the default container within web flight. And then because that's automatically centered, you can then just change the maximum width on it. So however you want to do that is with T0, I generally use my own, but again, you can see I made narrow their secretary. There's no human fragile using the default one that also in the width manual yourself. But what does it say? That ONE, Alex, Fine. And if we can see here that we have a container, so 400, heading one and textbook, we're going to rename these. So we're going to have, so this is an H1. So who this hero H1. You can set that to whatever you wanted to be. Probably not going to reuse that on this page. You generally want to have one H1 tag, few hair. But let's make it a little bit larger just to show you. And then you can see by default, because we applied a class to the topography on the body. So start the video on the body element we applied. It was still Ariel and we apply 17 pixels. You can see by default, the textbook is actually 17 pixels anyway. So what we will do is just call this hairy paragraph icon type AK. And there we are. So if we look back through now is you can see this is getting a bit more complicated moral stuff that we have here. But because we've given everything and name, everything makes sense. So we have the main nav. We then have Harris action with a 1200 width container, a hero title, and a hairy Paragraph section. So this is the fundamentals of naming over different sections. Okay, so I'll just give you another example of how you can sort of reuse as a class again. So I think we would do is we'll create a grid display this section here, and we use the container. So let's do that first. So we'll get rid of the image. And within the container that we have here already, throw in a div, which will then ten into a grid. Ak. So you wanted to throw in a div use, because if we just tend to container into a grid which we could have done, it would've also affected it on this one here, which is the container for the Harris section, which we wouldn't want it. So that's what we've put in a diff is antenna into a grid. Okay? So what we'll do is we'll throw in a div into this container. And we'll call this, what should we call it as, call it. Grid, container info. And then we'll throw in our elements. So we'll pop in an image and which is for speed, she's the same one. Then we'll also add in heading as well as some text. And we'll give this a name. So we'll call this info grid image. And we'll call this might this and H3. And we'll call this info grid heading. Oops. And we can stall that however you want to. And then if the paragraph we can pretty much keep it as it actually, just because we have the Default Paragraph, honestly, that's my problem is o. So what we could do is just apply it from the body. So that's all fine. And then what we will do is simply duplicate this. And then it will fill up the grid. And if we wanted to now o to any aspect of any of the items within here, we could then style that separately. So what we could do if we wanted to change all of the headings color, rather than clicking on each individual heading and changing the color because we've applied the info grid heading class to it. If we do that now, you can see that affects all of them. Okay, so that's another really good example of how you can reuse the class throughout all of your project. Okay, so there's just one more thing I want to talk about in terms of classes. And that is combo classes, say comma classes you want to think of as affecting a class with a modifier. So let's say we pretty much happy with how this is. Let's say you actually want to have all these headings with a certain height, which we can now change. We want to select, Say you wanted in 34 pixels, but with one of them ness and we wanted to have this one black for whatever reason. There are openings on linking that what we could do is add a combo class so we could keep it is invigorate heading. But then we could just call it dark. And we've created a modifier for that class. And then when we change this one, it will only change that one in particular, so that we'll be using a combo class. Okay, so that pretty much wraps up this video for the different styling. So just to recap, is really important to name literary everything and give it a name that you're going to recognize rather project. So a1, you see pretty much here what we have is a name for everything. We should have named that something actually, but it looks at it. So we could have called that info grid. So let's do that rather than the block, rename it, and we'll call it info grid. And then everything else take again, you can see makes sense. And it just lets you find all the different aspects of your website much more easy. If you ever share this project with someone else. They're going to thank keeps though delta, so see for themselves was Well, and also just generally for creating different classes that you can reuse throughout your project is very useful for that also. 13. STRUCTURE: Okay, So just following on from the last video on classes, I want to just talk a little bit more about structure and when to use various different sections elements within the lamb panel. So first of all, I want to just go into a bit more detail on sections contain this in deadlocks. Now, all of these things that I mentioned briefly in previous videos, all of these things are actually the same thing. So a section is effectively a div block that we've called section. Container is essentially a div block that we've called container. Now Webflow have these premade elements to get you thinking about how to structure a website. So you want to think of a section as the sort of the full width box that you then place the container within which you can then place more containers if you want. That. How's your different elements, whether it be text or images or anything else. So I'll just quickly show you the class project that we're going to be doing. And this is what you're going to be developing towards the end of the course. So this is a page from a modified page or one of my business website. It's called Swift pages. And this is where you're going to be making. Just use this as an example. So you want to think of everything within a website as boxes. Within boxes, the main box that we have is the body element, which is the overall box that contains literally everything. And that's the body of the page. And then you have lots of different sections that go down throughout the page. And then they sections you have most likely a container containing various different elements. So if I just sort of go through, I think the sections would be, say the first section you can t would be the hair section which we, this first part here, harris action is the first thing you see when you get to a web page. And it generally tells you what the website is, 0 or services you offer, or at least it should. And that's that section. We then have an info section here about a bit more information on how it works. We then have a step-by-step process. Now even though these three separate things, because it's a step one, step two, step three process, you'd think of this section has one rather than three separate sections. Then lastly, we have a call to action and we have a foot. So in this case this might be class, there's one section, but usually call to action is the same thing. So you could think of this is again a section age. Okay, So just before we start making that towards the end of the course, I'm gonna just take you through how I would structure it right from the start. And now we briefly mentioning this on the video before we're naming classes. I made the mistake with the padding on the container. So let's just do that again. So first of all, we're going to throw on a nav. And we're going to use the default Navbar that comes with with Webflow. And what we'll do initially is just pop in our logo, which is cheese, whatever you have lying around. C is this one here. What we'll do because this is a SVG who click on the high DPI setting here. We'll make it a touch smaller again and give it a bit of padding. Measures the same above and below. Okay, great. As I mentioned in the last video, the default container within Webflow is a shorter container, so the default width of the container is 940 pixels. Most modern websites are not contained quite as narrowly as that. So what we're going to do is we want to change the default container width. So this is going to be less the 1200 again. But this can be anything you want it to be. This is completely personal preference, or anything from sort of a 1000 to 3000 is, is quite common now. So let's just go in the middle and we'll go with 1200. And that will set a maximum width of 1200 pixels. But you can see now issue we have is that this is maybe going towards the side. If we go to tablet view, you can see is punished right to the edge and we don't actually want that. So what we need to do is apply a little bit of padding to the container itself. And I like to use a percentage value rather than a straight pixel value. The reason being is unless we the same and it will be uniform going down on different devices rather than a set pixel value. So as the 3%, just like in the last video, and we'll make sure it's the same on both sides. Okay? So we now have a container which is 1200 pixels with a little bit of padding. You can actually add padding to a section as well if you want to, but I just only added to the container itself. Okay, And then what we'll do is add on our section. And remember a section is completely full width with Gemini without any padding on the side. This is January because you are going to contain either a background image and it's going to basically contain all the different elements of the section of the website, but with no maximum width tool. So let's add in our image. So you go down to our background section. And we'll throw in the image we have lying around. Let's choose this one again, which is an SVG. Again. So by default it tiles, which is really weird. Sorry to get rid of that. So we do not want it to tile. We want it to be centered and we wanted to cover the entire background. But you can see because I haven't applied any kind of siding to the section, is taking up only a tiny part here. So what we need to do is give this a height. And in this case we wanted to take up the complete viewport height. So we'll type in 100 vh. You could type in pixels if you wanted to, but I am going to go for Vh in this case. And then we can see it's taking up the entire height of the screen. So that's the section. And the section is always full width and it shouldn't have any padding as make sure this is not there. Let's get rid of the class. I add a talionis yet now it's gone. So it should be 0. Okay, so from there though, we're going to add in our container. As mentioned in the last video, web flow does have their own container, but it's not 100, 40 pixels. So rather than using this one, we're going to use our own. What you could do. You could click container here and you could add in the 1200. And it will do that automatically. So you could do that. But then you'd have to make sure that you are going to rename it as whatever you want to call it. So we're going to rename it, contain a 1200. And because it's already centered, we don't actually need to click this. So in the last video, I made the error of not doing that when I created my own container. But just to show you the difference between the two, there is no difference if I've thrown a div block and make sure that's on the section. And you can see here, it's not going to show the magnitude is nothing in there. But if we just rename this as contain 1100, was the, it's still a container, but it is essentially a div blocks. Everything really is a div block that we're thinking of in a different way. So let's just get rid of that one for now. And we all use the first one that we did, which is 1200. And we need to get this the same padding as the container, the nav bar, so that anything is aligned to the same edges of length 1 tax going off in different directions. Sometimes for certain design maybe wouldn't want everything perfectly aligned. But generally, aligning is, is what you're going to be doing. So we're going to apply the same padding, which would be 3%. And we're going to make sure that is the same base. And now when we start adding something in, it'll be aligned to the same place. So rather than us trying text in the initiative again, another div block, which will be a hairy texts container. Okay? And then what we're going to do is throw in our heading. I'm going to throw in a paragraph as well. Again. So there we are. And you can see now they are perfectly aligned. So this is January we want to do. If this is not all in the same place, it looks a bit unprofessional and it needs to obviously b all to the same place. So that's how you want to think of structuring website in terms of sections and containers. Think of the section as a full width container element. That then the container, or how's the elements you want on a particular part of the page. Now, because we threw in the text within its own kind of div block or containers you want to call it that. We can still change the container to be flex if you want to, or we can make the hairy task contain reflex. So if you wanted to reuse this container all throughout the website, but you didn't want to apply the flex value to it. You would need to throw in a container, which we have done here with the text elements within. So now if we want not contain it to be flex, we can do. And we maybe wanted to give this some height as well. So maybe we'll say that's the 50 Fetsko high as a maximum. And the only reason we want to do that is if you wanted to move this around in any way. So you probably would need to do in this instance, we actually want the text, the left-hand side. But let's say you wanted it to be centered, you could do that now. So if we make the hero text container a flexbox, make sure it's set to vertical. We can now align this however we want to, just like we did in the other videos, giving over flexbox. Okay. So let's have that back where it was actually. That was if you wanted to apply some padding because however you wanted to do it is up to you. Okay, so hopefully that kind of makes sense. You want to think of a section as a full-width elements. Then you want to have various different containers or div blocks to house all the different elements within your page. 14. MOBILE RESPONSIVE: Ok, so if this video I'm going to take you through how to make your website mobile responsive. So I've quickly just thrown together just to demonstrate this. So we have a hairy section within texts, and we also have a grid section here with some images and some headings. Now you can see pretty much on the desktop view, which is what the base breakpoint is. You can see it looks pretty much okay. Everything's kind of position Dao It should be taxon is look okay. Again, that's all sort of personal preference rarely, but it looks fine on the desktop view. Okay, so what we'll do now is Gary down to our tablet. You can see it still looks pretty much okay. Nothing is T wrong gay, you can still actually move this around. And as you move it, you'll see on the right hand side, different devices pop-up annihilation ie, what devices are that width. So this gives you an idea of what you're working with. Now as it stands, the point in time with this video, you can't create custom breakpoints. This is something that I feel that web flow will introduce at some point. So you are going to have to decide to a degree within this breakpoint, which is from 76 eight to 901. What sort of sizing you want. So you can see it's pretty much fine. So the text is still legible because it's the biggest part of the white section here. The only issue there is that the image is kinda being cut-off slowly. So let's say you wanted to have this image a little bit further over. We could try altering that perhaps. So let's just do that just the shape. So we'll make sure the Harris action is selected, access where the image is based. And we'll go down here, click on the image itself. And then we can play around with the positioning. So you can enter it manually to if you want to. But we probably would do is just click over here to the right and it will bring it more into the center. Now, if maybe one, maybe way down, the text is now kind of a over the light bulb pair. But I think it's still pretty much JDK is still easy enough to read. There'll be a case of personal preference. There's no real sort of moving around we could do to fix that rarely cause they're kind of in the way we could try altering maybe a little bit more here. So if we try maybe 90. So you get the idea, so you can play around with this as ever. You want to get it exactly in position that you want it to be in. So that for me is pretty mosaic. I think we still get away with that. And if we scroll down, we can see that the grid Stoller was completely fine at this point in time. The text sizes are probably too large for these headings. Now I have applied a class do these headings. So if I change the size on this ill effect, all of them. So if I make it maybe let's try 30. Yeah, that looks better. Okay, so now what I've done that, now we've actually made changes on the tablet view. All those changes I made will cascade down to the other devices. So the change when cascade upwards, they always cascade downwards. So now if we go to our mobile landscape and who is scrolling in mobile landscape or can't psychopath does that. But anyway, if you do, this video is for you. So you can sort of see all these changes that we made of now also been made on this view as well. So I believe we made it 30, and you can see here is 30 pixels. So any changes you make will cascade downwards. And the same is true if we now make changes on this particular view as well. So if we change this to a smaller size, it will be the smallest size on mobile. It won't be the same as it wasn't desktop because over changes cascade downwards. Okay, so let's have a look at mobile landscape. And of course they're rejecting before some devices. If we go right to the edge here you can see on the right-hand side, it tells you what the voice is all that width. So it's not just the case of mobile landscape, but it's just code that. And so we may need to change the text size on the smallest setting. This is kind of up to you really what you want today. Now I would say that on the largest size, that looks pretty much aka still, but also for the grids, whilst the headings low-k, k in terms of sizing on the smallest setting here, is starting to get a little bit squished and they maybe are a little bit CBG as well. So let's change that. Let's make let's try 26. Yeah, that looks fine. But we may actually at this point decide to make it. So it's just one column across. So the way we would do this, if we wanted to do that, you could just keep it as it is. But let's say we didn't want to do that. If you double-click the grid. So always base within the grid. So if you remember back to our display settings, if we get rid of a column, it won't delete the content. It will just make sure it goes down to another row. So all the content we had is still here, but is now taking up one column. Say grids never get rid of any continent you have. They always just organize it. Okay, so that looks pretty good. Now, again, I think we need to alter this just because the text is now going a vase face a little bit. Say what I think we would need to do if we go to the smallest setting. Let's make the padding on this a little bit higher to the text will be a bit higher up. So what I think we will do, so we need to apply it to the container it sits within actually. So the padding cronyism in 43, let's reduce that. And that's bringing au pair a little bit AK, So that already looks a lot better, but the text is too big. So let's change that. Let's try 41st of all. That's not quite there. So let's try 36. And yeah, that looks about right. Now. The line-height isn't quite right there, so let's just change that to maybe 40. Okay. And that looks good. So another quick look. Yep, that looks fine to me. So you get the idea. Whatever you change on this setting here is going to apply it to the next one down. So we guarantee you finally the mobile portray view. You can see now that all the changes we made on mobile landscape, you have cascaded to this one as well. So this will mean that we'll have just one column for the grid as well, so that remains the same. Now again, we may want to change the text sizing slide for this one just because on the smallest sizes, again, about this point here, then there are may devices quite as narrow as this. Ok, so apparently an NES, his 256 pixels, but again, we don't necessarily need to worry about that so much. I think really sort of this point here. This is when it starts to matter. When you have phones as the occurrence. So about this point I would say matters. So we may want to just adjust the text for this. So let's just do that. And rather than 36, we could make it maybe 30. So if that makes a difference, maybe a little bit. So you big. Let's try 28. So you can see what's going on and I'm just trying to do to suit. And when we hit 26, that starts to look about rights. And that is still taking up the right amount of room. We could also make this a bit more detail in the paragraph signs a bit smaller. Again, is completely personal preference, totally OTA line how it needs to autonomy as well. Ak. So hopefully all of that makes sense. So that's predominantly how he be doing responsiveness. Now if we go back to our desktop view, you'll see nothing has changed. None of the changes we made or any of these have affected this. And this is why workflow is really, really great. Having this complete full control of altering image sizes, you can even hide elements in certain parts of the devices too. So if you wanted to one item to show up on desktop that wasn't on my bow. You can do that. So you can go and display non. Let us just illustrate that actually. So let's say for whatever reason, on, on mobile only, let's say we didn't want to have this text here just because it's kinda bunched up to image. We can click on this and on mobile we could click display non ell disappear and then everything open there, it will still be there. Again as not maybe the best use cases that you may still want some kind of text here. But you can see maybe that's how you could use it. You can basically hide elements on different views as well, a K. Now, very shortly in the course, we're going to be designing a homepage, poly that will actually look a little bit like this. And I'll go into 0V or the display settings as well. And how to get there is mobile responsive. Obviously for this video, we've only really gone into how to get the grid responsive, but I'll make sure we get into lots of different ways of making various different aspects and various different elements. Mobile responsive as well. So there's just one more thing to mention on this. You can actually add a larger breakpoint if you want to. So by default you have the base breakpoint, which is the desktop view. But let's say for very large screens, he wanted to make the text or anything else that we've just done a different size you can do. So you can add 128014401920. So basically, if we go on, if we hover over this, it says add this breakpoint to apply styles that will only affect 19-22 and above. So let's do that. Let's go on. Let's do 1440 actually. So Craig break point, you cannot remove the break point from the project once it's created. So that's worth bearing in mind. So create this. And now we can see that it looks pretty much aka actually at this point. But that's okay. Yeah, there's not much that, not much different, various less. Let's do another one. Let's do SD 1920. And you can see now it's not get a bit small. So if we wanted to make this a little bit bigger, again, the same things apply. You would just adjust this the suit. And it wouldn't actually affect going downwards once you've added higher breakpoints. So I don't want to make this T confusing, but basically think of the, this one here as your base breakpoint and that's why as the star on basically any style you, you applied to the base paper and we'll make it a cascade downwards. But it will also Cascade opens to if you've added a larger breakpoint. However, if you say just something on the top one here, let's say we make the texts that we make in 90 that look a bit weird way. If we go back to our base breakpoint, you'll see hasn't actually made it. 90 is remainder 50. So it will, it will cascade downwards from the base Breakpoint, but not from the high ones that URL. I hope I have remembered team which really that say basically just thank you, this one as your base breakpoint and unnecessary basing what affects everything going downwards and upwards. And if you want to adjust the sizing on the higher breakpoints, you gotta just manually from there. 15. SYMBOLS: This now brings us onto symbols. So in terms of how to think of symbols and Molly are, if you apply a symbol to a certain element within your website, your doing so with the intention of reusing it throughout different pages on your website. So a perfect example of this would be something like a call to action and nav bar or a footer. Basically, anything which is going to be on every page of your website that isn't going to be changing drastically every single time. Rather than having to start on every page and designing a photo every single time and every new page. What would do is basically save this element as a in a bank of saved items within the symbols tab. So on this template, they've already actually applied the navbar as a symbol. We know this because when we hover over it, it turns green and that's how, you know, it's a symbol. So if I was the trolley clicking on any of these items, it won't initially let me edit them, unlike every other elements on the page. So what you'd have to do is double-click and she added the number. So if we come up with that, and then what we'll actually do initially is just show you how to apply the symbol state two element. So what we'll do, we'll click our right-click on the section of the footer, which houses all the different elements and text. Right-click that and then go and create symbol. And we'll just call this footer. And that will now have saved that within our symbols tabs or any page you want to go now. Or if we say if we create a new page which will do just the SHA1, we'll just call this Test for now and create that. This starts with a blank page. So if we start, say, by adding on our footer, you say throws on the photo. In this case at the top of the page because there's nothing else on here. But again, this illustrates how you would use different symbols if we wanted to be the same for navigation, for on the navigation as well. And it's worked very minor. Whatever you change within assemble will affect the globally. So what I mean by that is whenever we change on here will affect the incidence of a on every single page of your website. So at the moment we have human contact, but let's say we wanted to add on another nav link and we wanted to make it say an about parts. Let's just call it About. Now. Obviously previously on the homepage, This wasn't there. But if we now go back to our homepage because we've edited the symbol, it will affect on the homepage as well, as well as every other page on your website. So hopefully that makes sense. And that's kind of where you're gonna be predominantly using symbols for. I find myself using it for navbars, coastal action, and Fortius. Now that's not to say you can't use it for any element on your website if you wanted to say just have this sort of container, hey, it doesn't have to be a section. The section, if we made that symbol, would literally copy all of this. First the reuse it. But let's say for whatever reason you didn't want to do that, you could apply the symbol to the container which contains everything hands every day caret symbol again. And we'll just call this what we do and go on crazy symbol. And then if we go back to that page, we did a test page. And then on the symbolist tab, you will see here what we do. And that's gonna throw on to start section that we created a symbol for. Okay, so there's one other thing that's worth mentioning, less than you've changed your mind and you don't want to have this particular section here as a symbol. Again, you may not want to have this kind of thing because whatever you change on here is going to affect every single version of it on every, on any different page. Say you change your mind, you want to get rid of that. All you do is right-click on the elements itself and then gone on link instance. And now any changes you make to this hair will not affect any other version of it on a different part of the website. So this is no longer a symbol. I hope that makes sense. And that's how you're going to be using symbols whilst creating various different parts of the website. 16. CMS ITEMS: A Chinese. So with this now brings us on to the CMS collections. Now in terms of what they, CMS's, there's all manner of things that you could use a CMS collection for. Now for this video, since one, a beginner video, we're going to actually be using this for something that's fairly common, which will be four broad place. But that's not to say you have to own easier for blocks. There is all manner of things that you can use this for. Now I've just clicked on the CMS collections tab. And you can see here, it gives you some sort of pre-made lands for various different reasons you could use it for. So blog post is one of them. You could have a listings website with different listening to say if you had like a and if you are a state agent or your realtor, you can have loss of different houses based on there you could use as a listing. And you have a team member section that could be as same as collection, but you can sort of update via this client's projects. Anything you can think of where you'd want to have sort of a base template which you can then apply it maybe an image and some text, and it keeps the same kind of format. That's kind of where do you see much collections for? And since this is a beginner video, we are going to be doing blog posts and we're going to pretty much be using the pre-made selection for us. So what we do, first of all, we're going to click on the collection templates. Again, you can actually do all of this yourself or you can have custom fails however you want to do this. And if this course is popular or I will probably do, is guarantee to a more in-depth look at CMS collections and maybe go into some more intricate use cases. But just for now, we're going to add a blog post section. And you can see by default, they have all the things you would want to have on this. So you've got the name, the slug, the sort of post summary, thumbnail image, main image, and what have you and what is really useful. You can actually upload dummy content too as well. So if we click create collection for now, what we can do is add in some dummy content. So it says, hey, you have 0 blog posts in your collection. Now, you could start doing this yourself. You wanted say, boy, you can do is add in Dummy items. And just for the purpose of this course, that is what we are going to do. So we're going to add in, I think what I've been ten items. And now Web Flow is gonna create basically sample content for blogs basically. So here we are. And what we're going to do is just click on one of them so you can see what has been added. Okay, so what we have, as you can see, all the things you'd expect. So we have the name, the slug, we have the failures in which you can put all of your content. We have a post summary as well, a main image for the blog. And we have the thumbnail as well. And again, there's all sorts of things you could do. We can add extra fields name if we wanted to budget for the purpose of this, we're going to keep it pretty much as it is, the same for the next few it here. So they all follow a similar sort of passing in terms what content around here. Okay, so now we have some dummy content on. I just click Save and we're gonna come out to this. And I'm going to start building our blog section. So even though they've populated the blog with dummy content, we still can alter how the blog section is going to look. So what we'll do is we'll throw on a section first of all, and we'll just give us a quick name just to get the habit of doing that. And then what we'll do is give it, we'll give it 100 vh again, just so it's full screen. And then within there, we're going to add in a while we use the default container for now. And then I think we'll do from here is throw in our CMS items. Say, what you need to do is go into the Elements panel and then go on the collection list and throw them into this container. And you can see we are faced with a new panel. Ammonia to do is draw the source of the content from our CMS collection. So I didn't essays as source here. That is source non. Click on this and then go to CMS collections. And what we want is blogposts. Okay, so we now have various different layers that we can have. We are going to have three columns and that's quite common for blocks. And then also we're going to go on show settings. So this is where we can sort of change a femur items and how the blogs get into a pair. So we can also display limits on the amount of items that we have. I don't think we're going to have all of these on the page. Sometimes if you have sort of a block section at the bottom of the page, you generally have sort of about three sharing that human click through to more than if you have a blog page, of course, you can have as many as you want, but just for now, I'm going to limit the amount of showing. So if we're going to limit items according says show 100. If we had a 100100 and we're going to do is limit that to three. Click enter. And then you can see we then have just three boxes and three sort of titles where the blog title is going to be. Okay, so again, there's lots more we could do with this. We could have different sorting orders. If you click on this, you can sort it by name, the date it was created on, updates it on, published on. We're going to click Publish are naturally because that's kinda the, the sort of thing you would generally use and will have newest, oldest. So this is going to show the most recent blog post that you've had on there. And then we'll click Save, ok. So you can see at the moment there's not really anything going on a. So what we need to do is start populating this section with some containers and ready for some content. So what we will do is we'll throw it at the block initially. And that's going to do that for every single box that we have. So on this first one we're going to do is throw in an image. I'm going to do is rather than choose the image we want to draw the image data from the blog post. So that's the whole point of this. We're going to draw in the source of the same as collection into our page. And you can see here it says get image from blog posts, which is what we want. So you click on that search failed and we want the thumbnail image. And you will see now if I click on this, it's going to draw the data from the same as collection onto the page. It's all okay. That makes sense. Again, so that's fine. And then also what we want to make sure that contain a selected. And we're going to draw in some texts as well. So we want a heading and we also want semi text. So rather, again, rather than writing the title of the block, we're going to actually draw the data from the same as collections. What we'll do is on the heading, Click on the Settings wheel here. And then we're going to show settings. Make sure that we can draw this. Okay, sorry my mistake. So I did wrong there. I didn't drag it into the div blocks and let's make sure I've done that. Ak. And we need to move this around, actually, slight error here. So we need to have a top AK. So just to explain what went wrong there, I pulled in some headings and I didn't put it within the deadlock in which the CMS Einstein was sitting and which is why I didn't get there on options. Say what we'll do now. Same thing again, click on the Settings wheel, and then we have this option here, which is getText from BOC pays. So we want to do that. And in this case we want to have the title of the blog or the name in this case. And if we click on that, it's going to draw that data from the same as collection. And obviously we can still style the text however we wanting say, let's say will keep on H4 for them. If we go to our panel here, we can still change how this looks. If you want to have a different font for some reason for the blog and don't use the domain, have laid it out and you can choose a different font if you want to. You can have a different size. So basically you still get all the styling options that you would normally get. And all you're doing is drawing the data from the CMS collection and read the same with the textbook here. Or you want to get now is the sort of the summary tags. So again, same sort of thing will click on the icon here, the settings icon, and then gone get texts from both price. And then we will search for the post summary. And there we are, drawn the data and is now displaying it within this section here. Again. So I hope that makes some kind of sense. This can get a lot more complex. But I think because this is the beginning cause we're going to sort of leave it half now in terms of how to be the same as collection. If we, again, on the next few courses, the idea I may well do something much more in depth, but this is predominantly what you're going to readily using SMS collection for. Nine times out of ten, they'll probably will be a blog post of some nature. Or maybe a portfolio is another good way you could do it. So let's say if you're a, if you're a web designer, you wanted to create your own website with wept like you could show your projects. You could have a certain fields that would be appropriate for your projects. So rather than say NIJ's Post summary, you could have project summary instead. So all these different fails can be changed. So let's say we just quickly look into that. Say if we go in to see him as collections again, going create new collection, we could then look at projects. Okay? So once again, it has some premade failures that you want to have a and again, mesa, this is probably what you'd want to have the We'd want to project name, slug, project details projects and Marie main project image Walesa. You wanted to have something particular hair. You could add a new field. And then you can select the kind of field that it won't not to be. So if you wanted to have, say, a video link on there, you can do that. If you just label IT video link and then save that failed. And then you, on the actual page itself, you would then dragging containers to put in the video failed, if that makes sense. So hopefully that will does make sense and that's a basic introduction to how you can use CMS items. 17. FORMS: Ok, so if this video, I'm going to be looking at the form section. So in terms of how I use forms, a little bit similar to how you quite often find yourself using the pre-made nav and the pre-made photo section which we haven't gone into yet, but we will go into, into the next video. The wavelength also has a premade contact form, which I must admit even though I don't use mesa this I do find myself using the subscribe form and the contact form. So let's look at the concept form. If we click on that, you will see it gives us a fatty box than the contact form. And if we wanted to make this yourself, you could just have a look at the anatomy that isn't how I made it essentially dried on a section. And then within that container, they have again some text here and they have a Form Block. And then within that form of made into a grid. And then we have within that grid lots of different div blocks which house the failed label and the text field. So if you wanted to make this yourself, you can just retrace the steps they don't make into a grid. That's a quick look at how that's been done. So you can see, so we've got a two column grid with three rows, obviously, because it's a great if you wanted to add more rows, you could do that or add more columns. You could do that as well. If you want to just change what these are. So if we want to, let's actually, let's what would they, first of all is add. And it's much sections on, so we'll make sure the div block is highlighted. And then we'll just copy that twice. So Command C, Command V twice. And we've now got to have the same here. And let's just try changing this failed label. So we'll make this, let's make it company name. And then maybe for this one we could have industry. Ok, so, and as you can see, they've got below asterisks next to the title here, which means it would need to be a required field. The way you enforce that required failed is not through the field label option, but from the text field option. So if you click on the text field here, click on the little icon, there was settings icon. It then gives you an option for placeholders tags. So if you wanted to just, just type that in, so you can say, whoops, I can't spell again. And you can see it's appearing here is place holder. You can also then have auto-focus and required as well and that's how you make it. So it was a required failed a k. So hopefully all of that makes sense. Now again, you could make yourself, if you have something very particular that you want to achieve a, you could just add in all the different form elements if you wanted to say all the formula and say here, we do have some extra ones are all within this form. Let's say we want to add a drop-down section. We could do that. And it's put one here onto the next way down. We then just need to pull on a failed name above it. But if we just quickly preview that, you can see how this would work if you click on it. It can she again, first choice, second choice. You can add all the different options that you would want there. So again, hopefully all of this kind of is fairly self-explanatory. A great thing about this being a grid all saying is that you can actually make the sections take over more space. So let's say if you wanted just one line for this, you could span over a whole line, which would then bump this one down to the next row. So this is why using a grid for the contact form is particularly useful. Ok, so hopefully that kind of clears up how you, these grids. And again, if you wanted to style all these, you could be a better way to do this rather than stalling each individual one is given the field label, a class which currently it doesn't have. So if you wanted to change the color of ammonia, we changed on all of them. Obviously at the moment it won't do that because now class applied to it. You can also give the text fields a background if you wanted to. So it's currently whites, but let's just say you wanted to as a light gray, You could do that as well. You can also give it a border. He's I wanted to so I can read. Okay. So that's basically how you use forms. 18. NAVS & FOOTERS: In this video, we're going to talk about how to style the default nav bar and the default footer that comes a standard within Webflow. So the default styling within Webflow, and we're going to actually change. And let's say you didn't actually want to use the default navs O4 to draw a couple of other options available to you. You could of course, just make your own. Or alternatively, you could use a clonal from the Webflow website. So we haven't toasted on this yet, but we'll go into a complete video on this later. But basically within Webflow with this section cuz showcase, where you can look at what other designers have created and some of these projects designers have allowed you to clone the creation. Which means if they created a particular nav bar or a particular footer, if you could come clean, you can then reuse that element throughout your own projects completely for free, binary. Just for now, we're going to focus on styling the default options within Webflow. Say first of all, we'll begin with the nav bar. So if we go to Elements panel here and go to nav bar, and then we are say rather than keep it as it is in terms of the default styling, we're going to change this up a little bit. So first of all, within a brand container again, to add an image for our little guy. And we're going to add just whenever we have an asset panel. So we will just use this one for now. And obviously going to resize that says a lot smaller. I like to add just a little bit of padding above and below or change the alignment to this in just a moment. So rather than keep it gray, we're going to change it to black. So if we do that, it's okay to have background section here and then go black and more create a swatch just for the hell of it. Okay, So already looks a bit different. So what we need to do now is just 0 to the nav links. So as it stands, still, dark color. So we need to restart our base. Now what I would do as a standard, they don't come with any class attached to them. So if I start to changing the color of one of them, it wouldn't affect all of them. So what we're going to do is just get rid of two of these. And then we're going to just call this nav link. And then what we'll do is style this however we want to, and then we can recreate that and copy it. So what we'll do is rather than have the text is dark who have as white or just an off-white, perhaps, create a swatch. And then what we'll do is just copy and paste this a few times. And then we can change this to whatever we wanted. So just before we do that, the sizing, this is not quite right. So let's try and get this aligns slightly better. Also, I want this to be slightly larger than it is as give a little bit of padding to the nav bar itself. So if we do that, just make it a little bit larger. And you can see that we need to perhaps just get, make sure that the container sets within is centered. Say, if we go into the nav menu, that's pretty much it. Okay, Actually, let's just give it a little bit of padding above and below as well. Just so it's nice and even. Okay, that looks a bit better, I think. So. Have a look at that. Yeah, there we are. And also what I'm going to do is make the change the text vessel. So what we'll do is we'll say this is about this one can be services, and this one can be contact. So obviously some of these uppercase and lowercase, since these row now class, we can now change whether these are all in full caps or whether they're just capitalised. So let's, let's change the size and let's change it so they're in full capital is just because, why not say rather than 14 pixels, Let's try 18. I'm also going to make them. I think we'll just have them capitalize actually for now. So that that looks fine to me. Okay, say Looking good. Say we now have a nav bar is slightly styled differently to how it was initially. However, when we hover over this, nothing is really happening and it's quite boring. So what we're going to do is add a transition effect to the nav links. So what we want to do is that on hover, what needs to change color slightly just so signifies that that being selected. So if we go into the states panel here on the top right and go on hover. We're going to change the color of this. So if we go down to our typography and what we need to do is get this to be we have it as a slightly off-white, so slightly darker. What a swatch just because why not? So now on Havi you can see it's already doing it. But as it stands is kind of immediate. So we want it to be transitioning into doing that. So we come off the harvest date back to non. We'll go on to the Transitions tab here. And we'll create a text color transition. Say where are we, say top-up free serif font color is going to change. And we'll have a 300 milliseconds. And now we do it. If I hover over, a gradually fades into that dark gray color. So that's just one way of doing that. So there we are, looking pretty good. What we're also quite commonly have is a butter. Okay, So what we quite commonly have is a button also within the number. So let's say you wanted to do that. Wisdom is no problem at all. What you can do is I think in this case, we'll add it to the nav menu. And we'll go to our booking section here and click button. And then here we are. And then what we can do is just get this aligned correctly. So it sits within this section here. So we'll just give it some padding above and below. Oh sorry. No, actually we need to do margin, say. And then we can give it a little bit of margin on the side to push those items away. So we'll do 25 pixels. Now obviously we can start with Putin to have, we want to say, let's just do that as well. So let's say this is free trial. Can make the text is same as this. So rather than 16 or 181418. And this one will have actually, which I used this to. All caps, this one, right? And then also I think will make this text dog and the button white. So let's do that. So I have dark text, which just uses watch that we have. And then the background rather than blue. Let's change this to white. And we're going to reverse that on hover. So when we hover over this, I want the background to the dog and the text to turn white. So let's do that now. And also, it looks a bit weird and the spacing isn't quite right at the moment, we make the text larger. Let's just make it slightly, make a salami wider, slightly taller. Okay. And just to be different, Let's add a border to it as well. So if you want the circular button, what you can do is go to the board is actually in here and just drag that right to the edge and it creates a circular button. If you want more of an arc on that, you can increase a little bit unwieldy. So that's a 50. See how that looks. Yeah, that looks good. However, it's actually, we'll make the text a bit bolder as well, so you don't want to have it quite as thin as a person. So let's have that as bold. Okay, yeah, fine. And then on hover, we want to make this too dark and the button text in a different color as well. So let's do that now. So if we go into our harvest date, rather than a white background, we're going to have a slightly darker background. So let's do that now. Let's have, let's have that maybe a darker gray. And then we'll also have the text as white. Okay, So you can see at the moment there's no transition applied is just immediate. So we need to just change how smooth that is. So what we will do is go to transition, but make sure you're not on the hover state. So you always want to apply transitions to the non-state. And then what we'll do is we'll add the background color option, and that will be 300 milliseconds. And we also want to add own for the text as well. Because there's stoke to the button now does it correctly, but it's hex is immediate still. So we also want to ask another transition and we'll have the text color options, a phone call. We have that 300 milliseconds as well, so it's consistent. And now we should say that the background and the text will change on other. Now we are. Okay, so that's just a brief overview of what you can achieve with, again, transitions and started in default nav, There's all manner of things you can do. What I think will also do well. So we're on the topic of base will also alter the mobile nav as well. So by default, because we've changed the styling, the hamburger icon is still dogs. What we need to do is change that so it's white. Now the way you change the color of this is actually by topography, not by background color. So if you get the typography section here, make sure the icon is selected, which is the default icon and cones with Webflow. If you then click on the color, we have it as one of our swatches. White. And now you should see that when we do this, it's going to stay white. Now obviously, when we click down, we have the background color is gray. So I think we will do is again, change all the colors to match. So we'll have all of this is black, and we'll have that as a black background as well. So in terms of how to alter this, if you make sure the menu button select, then go to the Options panel here and then click on Open many. You then have the menu opened. So now we can start styling always different elements here. So let's do that now. So first of all, we'll make the nav menu black, so it matches with the main nav. Rather than gray will make him black, so it looks the same and already looking a lot better. I mean, to make sure that this also is black as well. And again, so let's have a quick look at this. Let's just try that again. I thought I did not maybe I didn't. Make sure to say blank. Let's just do that again. Okay. They should do it this time. Yeah, there we go. Great. So now obviously in terms of the way this is positioned, you may not want to have this booting sharing on mobile nav, but we may want to, and we also may want to have this text in a different position. So I'm going to show you how to do that as well. Say what we're going to do is throw in a div container. And we're going to have all of these items here within the middle, so it matches this one here. So let's do that. And also mobile, we're going to have this as position sticky as well. So in fact, we'll do it for both of them. So if you want me to follow you around, what you can do is apply a positioning to it so the moment is static, but if you want to follow it around, we can apply either fixed or sticky. So what we're going to do, I think or do. Let's have a look. So forget it into position section here. It's currently is relative, so let's have it. In fact, what we'll do just so we can sort of see this better, is just add in a layout just so we can scroll down and say that's fine. And we'll just copy that a few times. So as you can see at the moment, if I scroll down, the NASW stays exactly where it is. But what I want, I want it to follow is as we scroll. So couple of ways we can do this. So if we click on the navbar, make sure it's selected. And rather than relative, what we can do is I could have it as fixed. And you have a fixed to the top. And now if we do that, it's going to follow is around all the way. And you could use position sticky as well. But for now I think we'll just stick with fixed. And the same would also be true now for mobile nav. So wherever we go, it's guarantee following. So what I do want is to have this coming down 100% of the screen rather than just the hair which the person profits on, like having a full strain nav. So let's do that as well. So I appreciate I'm jumping around a bit his head. Let's just do that again. So let's get the menu open in just a moment. We'll pop it into a div. So just before we do that, Let's get the nav menu selected. And we'll have this maximum height of a 100 vh. Sorry, not maximum height, at least to be just the height of a 100 vh. Just get rid of them again. And now you can see that when we click on this is gains come all the way down. No matter how much you scroll is going to stay in view. Okay, so that looks a lot better. However, I do want to change this a little bit. Idea actually wanted to get them centralized. You didn't have to do this, but there's just something I'd like today. So let's do that now. So the way we'll do this, again, go back to the menu, make sure the menu is open. And rather than trying to alter the nav menu by making this a flexbox or what have you. We're going to actually just throw in a div is actually quite difficult to style the nav menu. Better off throwing a div and popping them into that div container. So let's do that now. So we'll throw in a diblock and we'll call this mobile menu container. And then we will just throw all these items into this div. And you can see at the moment they're all horizontal, but that is going to change in just a moment. Ak and the mobile menu container, we're going to give it some height as well. So we'll give it, well, make it a 100 vh as well. And then what we will do is make it a flexbox and we'll have a vertical, and there we are. So now you can see that we have a centralized navigation, which again is fairly common. And in terms of this button here, we may need to pop this into a div. Actually. We may actually not after if we just do There we go. Okay. That's why it's all I did there, which is aligned to the center, would justify center as well. And in fact, I don't know if we wanted justify into the center. Let's just look at that again. Yeah, I didn't think you would do that. Actually will pop back how it was. So have it to the top. And then we'll I think who would do is just apply a little bit of padding on the top so it's not quite. So there is a hundreds ease my ICD hurricane, so that looks pretty good. I think what we'll also do on mobile make it maybe, sorry for tableview will make it slightly larger actually. So let's have it as 20 pixels. Okay, that looks pretty good. So now if we view this, you'll see what we've done. We've changed it so that it's all dark. Now we've changed the icon so it's white. And we click, it drops all the way down and all of these items are centered. So in terms of whether you want to have this button here or not, that's up to you. But let's just make sure that everything is centered actually. So if we do that again, we'll have a quick look just to make sure everything is correct. I think we will have the as it is, that all looks fine. In terms of the button. If you wanted to hide the button on the nav, you can do that as well. So if you wanted to just get rid of it, if you go and display none, it's going to disappear. Obviously on the main nav is still going to be there, but that would mean on the tablet. And for mobile view, it's all going to have disappeared. So that's completely up to you can sometimes something that people do. Okay, so I hope that was useful for your API. So see how this is usable. Again, you don't have to have a full screen now if you don't want to, it's just personally I quite like to have that option. And that pretty much covers it for styling the nav. Okay, So next up we're going to do a footer. So let's now do that. We'll go on to the navigator, make sure the body is selected. And then we're going to our layers panel. And then we'll go onto footer. So as you can see by default, it brings before the desired point. Again, you could make this yourself if you really wanted to. But essentially, this is a good starting point. The kind of isn't any sense the maker and every single time. Or again, you could use, again explainable item. But this, in this case, it's a pretty good way to start. So we're going to just draw this in a very similar way. What we're going to do is make sure the photo background is black. So let's do that now. Second wave here, make sure it's black. Now, unlike the nav, these are actually already have classes, which is quite useful. So we're going to o to one, which will then alter all the other photo headings TE, and we're going to make them the same as this. So this is 18 pixels, will make sure the heading is the same. So if we change that. And also oneness to be a different class or have as a white color. And then for the footer links are going to have these as the yeah, what happened is the dark gray. Dark gray. And you can see that mainly when we hover over them, they have like an underlined which we don't want. So if we click on the photo link and go to the Hover section here. So what we want to do is go to the style part here. So it's on the decoration currently has an underlying, just get rid of that so it's all gone. And then we'll, I think we'll do is also apply a hover effect to our text links as well. So on hover, we're going to have a perfectly white, I think. Again, this is just one example. So rather than dark gray and we're going to have a perfect white. And that's going to be the same now for all of them. So it means my show a transition is applied to. So make sure you're not on the hottest day, you back on the non-state grade and transitions. And we're going to have font color. And that will be 300 milliseconds again, just so it's consistent threat. And if we preview that, now if we hover over, it lights up. Okay, so hopefully getting an idea of how you would do this. Again, this is just a, a fraction of what could be achieved. We didn't have to have a just as a plain color. We could have a gradient and we can have a background image, lots of different things. We could have our Lego in here. Let's say you didn't want to do this. Let's say you wanted to alter the structure. Let us get rid of that part there. And then what I'm going to do is just highlight the d-block with this column here. And then copy the along and make sure nothing is in place of it. And then there we go. Now we have four columns which obviously you could change to whatever you want them to be. Okay, so that's spoiling the navbar and Einstein in the footer. In terms of getting this maybe responsive. The way this is created with a flex containers as a flexbox, we could have used a grid for this, but by default they have as flex. So obviously when it comes to maybe responsive when we get to this part here or would need to do is just change the way this is laid out. So currently it's set horizontal 0, it has to do with Autodesk like vertical and then area. And if you wanted to get this in the center, same kind of thing applies. You could, you could do that if you wanted to. Okay, so hopefully that will make sense. And that pretty much wraps up styling the default navbar and the default for the 19. CLONEABLES: Okay, so for this video, I wanted to take you through clean-up projects. Now, when I first discovered web play, I wasn't exactly sure what was possible with the tool itself. So whenever you adopt a new technology, you're always little bit trepidation first queue, you kind of get used to what you're used to say. I've been using WordPress for a long, long time, was never completely happy with WordPress, and it felt a bit clunky and a lot of respects. And web flow always really appealed to me in terms of how the builder word. Because what you're essentially doing is your visually coding a website without having to write code yourself. And the idea of that really a payload. And, but again, not knowing what's achievable within the platform, they actually have a showcase section which kind of shows you what all the designers have created with web flow. So you could just again scroll through reason, have looked through what's been done. Before I found the more intriguing was the fact that you can actually clone or essentially copy some of these projects that designers have allowed you to do that. So what we'll quickly do is quick, unclonable hair. So in terms of how you get to the section on your dashboard, you see a showcase option here. So click on save showcase and you'll get through to the screen here and from there, make sure clonal is selected. And then when flay wishing you all the different projects that you can actually use yourself. So all the designers that have created this, they put us on hair for you to clone either individual elements or entire projects if you say 1T, completely free of charge, which is super CBs for, say, let's just look at a few of these. So we'll just scroll a few pages down. And you can see there's all sorts of things here. This, you can clone interactions, complete templates. You can claim portfolio sections, animations is absolutely loads on here and it will take you forever to actually get to the end. But let's just go through a couple more and let's pick one. So we're gonna pick this one. And there's a reason why actually, but I'll click on this one initially. And then what we'll do is openness in a new tab, a cape, and then we'll just open the live site initially. Okay. So you can see that this is kind of a, a real estate website that someone was created. And they have sort of decimal place here if you'd sort of filter different houses or different properties, if that's what you're going to do. But you can see here, this is a really nicely designed what is essentially a template I suppose, which you can actually use for free. So let's say you wanted to just use this entire page. You could do that or you could clone it, and then you can use individual sections if you wanted to. So let's just show you how you would do that. So that's just come off this for a moment. What you do is on the main project setting, hey, you'd click Clone project. So lets click that. And then we'll just let it call it wherever it wants to call it and click on clone project making. And then once that's loaded up, we now have this saved to our dashboard. So this entire web, it's entire webpage that we had is now ours to edit how ever we want T, which is super, super CPS for. And obviously we can use this in what have we won't use it for a client. You could use it just for yourself. It doesn't matter. Anything that's on here, you can use completely for free. So this also includes pre-made, pre-made navigations. Again, so many components you could use on here that I CPS for. And the person or people that made that template called flow base have their own website, which we'll quickly look at. The reason being is they actually have lots of resources that you can use. Again, mostly completely for free. So these are well worth checking out. I'm not affiliated with FlyBase Atul, but these are just some guys I clearly have made lots of different sections within web flow. Again, completely free fee to use and you copy for your own projects. And they actually have, again, complete templates. They have just different companions and let's have a look at what they have. So going all cloner booze for now. And you'll see here they've sort of again rebuild popular websites just for fun. They have template kits. But we'll going first is maybe we choose a which is, which is an interface kit. And one that I've used in the passive can try and find it now is this one here, so rich interface. So if we click on this and then we'll preview project. And what they've done here is basically give you a load of different components to use on your website. So they've sort of pre-made Harris actions. They pre-made, pre-made buttons, navigations. The navigations are particularly useful. So as I mentioned on the northern footer page, you can actually copy all these elements and then reuse them on your website. And they're really, really good. So Robin, you haven't you create and style your rain every single time. You could just come on to flow basis website and then just copy and element and then directly use it in a new project. So that's the interface kit that they have. Again, you can sort of see where we have over different sections here. Supersede, peaceful look, a female and she scraped back for a moment. There's a handful of, I've actually used quite a lot. So let's go, let's go back to the browser section here and go navigations. And they've made quite a few different types and they have sort of mega menus for some of them as well. So this one's a really good one. If we click this one and I have a quick look. If we preview this project, get rid of that. And then when you hover over different sections, it brings Mega menu. Now, of course, you could create this USL with a manned flight. There's no reason why you couldn't. But my argument would be, why would you want to do if already exists? So you could just use this as sort of a, a building block for what you want it to be. And you could restyle this however you wanted to. And some might say this is cheating. But that's silly because the whole points of web play is it speeds up your workflow. The whole point is that this is a tool for you to create websites visually and therefore making a quick FeO For yesterday, say, you already have premade elements within web flow, such as the pre-made nav and premade footer. And I would definitely argue that what these guys here have created and what some of the different ones on the clinical section are nicer than what comes standard with web flow. So for me, I would certainly give this a look and have a little play around and see what there is. They do, I believe have a Premium Section C where you can pay for more advanced ones, which again is, is well worth. It will save you lots of time and you have some really nice-looking navigation. So we'll have a quick look at this one. So you can see here again, the similar sort of thing. Very nicely designed, a lot more fancy than what comes with the native navigation. And this could save you a lot of time in trying to do this yourself, particularly if you're a beginner. So if you're a beginner, I wanted to get 0s the web flight. You could even just by these or acclaimed neither ones. And then you could reverse engineer how they've actually created these anyways, if you wanted to use some kind of teaching tool, you actually could do. So hopefully, that makes sense. And how freaking sort of see how useful this would be if your projects. So again, I, I do use some of the flow-based of quite a lot. And it says, well-worth sort of scrolling through all the different cloner, both sections within the Web Flow, website. 20. COPY & PASTE ELEMENTS: Okay, so in the previous video, we looked at how to claim various different projects and templates from the cleanup of sanction within the Welfare website. We also looked at an external website called flow base, where they have lots of different components that you can sort of copy. And why I wanted to say there is you show you how you can copy and paste elements from one project to another. So you can do this with anything. So if you've created multiple projects within your dashboard, you can copy competitors that you've made yourself, or you can copy campaigns that you've got from a clonal sanction as well. So let us say with a new project, let's say we want to use elements within this project that we claimed, but not the entire page. Let's just say we wanted to use this content section here. What we can do is just make sure the section is highlighted and then Command C. And then if we go over to our blank project and click Command V and cut and paste in it, then pace in section only. So this will be Cp. So if you find a particular project within collectibles, that way you have either an element and you really like that they designed well, or just the section that you want to copy. Cps will induce copy it from the clinical section within your new project and then just have a into any party that you want. The one difference will also be though, is that within this project, they have a certain font loaded in already. In this case, it's damn sense. And damn sense doesn't come as standard within a blank project within web flow. So you can see is slightly different in terms of the boiling. So all you need to do to get it exactly the same is upload the same font as what was on the clinical section. But again, hopefully that makes sense. And is a CPS for things you can clone navigations or just reuse navigations in new projects. So let us say if we want to do another section here. So it also works for elements as well as if you want to just copy a button, you could do that. So if we click on this button hair, just play on Command C. Go to our new project on a div and click command va is now got the button saved. So hopefully that's useful. And again, I use this quite a bit for particularly navigations and photos as well. Just so you don't have to keep constantly re styling or redesigning a photo every time. If you want to just restyle it, you could do that by just having this as a jumping off point and changing the colors and the links as you see fit. 21. BASIC INTERACTIONS & ANIMATIONS : Okay, so now I want to talk about interactions and animations. Now, in terms of interactions, this could be a four-hour course unto itself. So obviously I'm going to only touch on the basics for this video. But first of all, I want to just show you what can be achieved by using Webflow interactions. So this website here has been created with Webflow and is chock full of different interactions and animations. So if we just scroll down, you'll start to see them kick in. So we have here sort of an image scrolling within text. We have this text kind of a pairing from behind the wolf. As we go down, you can see all the images are moving with the scroll. Again, this text is appearing from behind it. All manner of things going on here. Now, this is definitely overkill. You wouldn't want to do this for every project you have a dipole. It's just a good way of sharing what can be achieved with the interactions and animations panel. So again, same more of the same sort of thing. If we look at a few more, you can see this one here. As we move the mouse, the background is moving with the cursor. Same again here and same again for this one. So as we move the cursor, we have all the items moving with it. So again, this is really cool stuff, really, really nice thing to have. But just for this video, I'm going to revert back to the velocity template that we started with tours beginning of the course. And we're going to just give you some maybe more practical use cases where she getting used to these. So if we just have a quick look at this page, you'll see as we preview this text kind of appeared from here. I'm kind of faded in an up. And as we scroll down, you'll see these boxes here kind of cascaded along. So, so critical that again. So this kind of slides in These kind of a pair from left to right. So we're going to do is just reverse engineer what they've done and kind of create our own version of edges to show you how it works. So the interactions panel is over here on the top right. So you can actually see what is, what is an interaction by hovering over a section or a container or an element. And if you see this icon here, which is the little lightning bolt, you know, there's some kind of interaction or animation on it. And in this case we have a scroll into view interaction. So these ones here, they've animated the box themselves. And this again is Scalia interview. And both of the muscle of sliding or puts. This one is actually not order a quantity the same time. So there's actually been a delay applied to each one for it to handle fact. So just before we get into recreate in there, so I wanted to show you something else that you can do. So this is sort of a scrolling interaction. We can also have sort of a mouse click interaction. You can have a mouse hover. And just, just for the hell of it, Let's do a mouse hover one ourselves. So we'll select the heading here. And we'll go to element triggers. And we'll go on mouse hover. And then if we go on action, we could start a time that animation, or we can select some that we have here by default. So let's try doing pulse. And if we preview this, you see when I hover over the title, it has an effect on it. And this can be applied to sections, containers, any enemy within Webflow. So that's kind of a basic way of using interactions. What we have next, Ashley, I'll just go through a few more. So you have all these you can use. Again, some of these you may not want to use, but they're all very few. If you want to see you have sort of a rubber band and effective as we preview that. Rather than having to pretty every time you can just press preview over here, you can select what screen sizes have its effect on. If you didn't want this to be on a certain screen size, you could deselect it. You also apply it to the element has been selected or the class. So let's say you wanted to have that effect on every single heading within your website. If you apply it to the class every time you hovered over, it would do that for everything or office if you want to, just for the only if highlighted, you can just have it on the highlighted element k. So hopefully that makes sense. And now we're going to look at trying to recreate this effect that we have here, which is the kind of sliding and effect. So what we'll do is we'll kind of make our own version. So we'll kind of repurpose desk perhaps and get rid of that. And we'll go into the section here. So the container, and we'll frame on a grid. Okay, add a column and delete one of the rows. And then what we'll do is throw on a div. And we will add a heading and some texts and will pop on an image as well. Which is one from the library that I already have. A more perhaps just get that sits on top. And to do that better, we'll just use the navigator. So you can see sometimes by trying to drag this, It's a bit awkward. So really always want ease and advocated for doing that sort of thing. Again. So what we'll do is just select the div that this sets within command C for copy and paste it along. So we have three sections. Okay, so let's start and animations. If we click on the plus icon here, we want to do when scrolling interview. And on the actions panel here, we're going to select slide. And what we want to do is slide in from the bottom. So if we just compare it to this one here, you can see they have slide in from bottom. So you want to do the same sort of thing with this. By default is currently from left. Obviously you have all sorts of things you could choose what we want from the bottom. And we'll give it. Now we'll keep this as it is. And if we preview it, you can see that's pretty much the same sort of thing as this one over here. So do that again. Now we are, now, we want to do a slight delay of the other two. So you gotta kind of cascading effect. So if we come up, this will go on to the next image. Click on element sugar will have scoring interview. And we will select slide once again. And from bottom. And this time we want to give it a slight delay. Now the reason we haven't sort of copy and pasted the same waiver is that we need to have a delay attached to it, so let's make it so it's, we'll give it a 100 milliseconds with a delay. If we preview that, looks fine. Then the last one, same sort of thing again, scrolling interview and will have its sliding up from the bottom. And we'll give this one a 200 millisecond delay. Okay, so we should all be good. So if we go and preview this and we scroll down, you can see that one there. And this one you should see is following the same sort of things. If I preview that again, you say one after another, they cascade along. Okay, so that's the basic preview of how you would achieve the same sort of thing that they've done here. But let's also do a timed animation as well. So this time, we're going to apply this to this image here. Scroll, we're going to have it so it rotates when we scroll into view. So with that selected, we're going to go scroll into view again. And then we're going to start an animation. And we're going to have an offset of, let's make it about a 30 percent roughly. And then we will start in relation. Okay, so now we get to do a timed animation. So you can select when something starts, when it finishes its initial state. So going through all this now, so you click on the plus icon here. I think what we'll do is we'll have it rotate into view as we scroll down. So if we click Rotate, we're going to have, this will be our initial state. So what we want is this to eventually look like it is right now. So we need to alter the initial state so it isn't. So what we will do is just rotate this slightly. So from this, let's say, and we'll have it, so it goes back to the center. So we'll have it from here like that. And we'll set that here as the initial state. So that's how all stars along we scroll down. It will rotate back into views, every click that, that will then. And the rotate again. And for this one we have the duration of it for bookkeepers, no 0.5 seconds actually. Okay? And what we will do is make sure all this is set to 0. And that way it will rotate back into view. Again. That makes sense. So now if we preview this, when we scroll down, we have other sanctions there. That animation here. Now, when we scroll here, you can see that the image started from being on its side. When we scroll into view, it came back to the center. Okay, so hopefully that will make sense. Again, this is just a tip of the iceberg of what can be achieved with animations and interactions. And if you perhaps like to see more interactions, I may say that for a course or you're going to more advanced use cases. 22. LANDING PAGE INTRODUCTION: Okay, we are now about halfway through the course. I hope so far everything is made sense. I would imagine it doesn't initially, because obviously this is all brand new t. However, if you've used design software before or if you've used other web builders before, some of this may be at least slightly familiar. So now with all the different noise that we've just gained over the first half of the course. We're now going to start developing a landing page. So this landing page I've hopefully provided all the details fall in the description. And you need to just download this and then follow along with me. And we'll go through each different section of the website part by part until we have a complete landing page completed. So this landing page is essentially a page from one of my business websites which I don't use that much anymore Cuz Swift pages. So swift pages is a payment, the web design service, which I started some years ago. So I thought what I would do is use this as an example and we will develop this landing page together. Again. So let's start building this learning page. First of all, we're going to just set up the page so we're ready with typography. And then from there we're going to start with the nav bar, the Harris action and walkaway roadway through to the footer. And then any mobile responsiveness would be right at the end. 23. CLASS PROJECT: SETTING UP THE PAGE: Okay, So we're now going to start our class project. So hopefully everything we've gone through so far makes some degree of sense. Obviously, you may need a few watch trees to take everything in. It is complicated and obviously I don't expect you to be perfect straight away. What we're going to do is you're going to develop this landing page with me. And this page is basically a modified page of one of my business websites called Swift pages. This isn't a business that I'm sort of crony promoting all that much because I have a an agency. I was a freelance as well. So this is a website that I do have. And we're going to use this as an example. And you're going to develop this along with me. So hopefully all the things you've learned so far, hopefully can kind of see as we scroll through is maybe how you go about doing it. But don't worry if not, I'm going to do with you. Okay. So me tell you first of all is just prepare the rays, start developing this and we need to do a few things. So first of all, we're going to upload all the assets for this project. So Gary into Assets panel, I'm going to upload all the files. And we have the more here. I just select all of them and drag them all in. And another thing we need to also do is make sure that we have at typography setup as well. So at the moment, the funds we need on our stored within Webflow by default. So the font we need our Poppins and Roboto. So we now need to get these onto the website. So what we'll do, we'll go to the typography section first, and then we'll click on Add fonts. And then we can upload them from Google funds because that's where they're stored. Say What we'll do. Click on this, just type in the letter P, which will get you somewhere close. And I say if we can spot Poppins, let me know if you can say it there. Yea. And in terms of the weight, so Poppins again to be used for all of our headings. So we probably won't be using regular. So what we might use just to be safe, we'll have 500, 67. And just for fun, we'll have eight as well. And we'll click on Add font. Okay? And we also need Roboto as well, which is also a mutual fund. So if we just type all here, it'll get somewhere place. And there we go. And Roboto is going to be our sort of body tags for paragraphs. So we'll have regular and just in case we have 500 as well. And I will click on Add font. Nice fonts we will now find loaded onto our page. So if we go back to the designer, what we're going to do is set to the body element, a default in terms of topography. So because we are going to be using rebound, sorry for all of our paragraphs and sort of body texts are going to set that as a default font. And the way we'll do this is click on the Select the hair for the class, and we'll click on body all pages. So what this basically does, this applies a default styling to the body of every single page within your website. So what we're going to do is select the Roboto font. So we are, um, again, summate that 17 pixels. And in terms of OS, we will probably keep this as S for now. We can always change this later, but that's what we're going to do. A K. So now whenever we start writing, if we throw in a paragraph on the page, for example, it's now going to remember that the default is Roboto is going to be 17 pixels in size, a cane. So that's pretty much it for the startup section. Next up, we're going to start creating the navbar. 24. CLASS PROJECT: MAIN NAVIGATION: Okay, So we're now going to start creating the navbar. And we are going to actually use or restyle the default navbar back homes workflow because we may as well. Okay, so you can see what we have here. We have again Lego to the left. We have against the menu items and we have a button to the right. It says is fairly standard stuff. And most vest is kind of already present within our navbar. Aside from the bosons says no problem, we can just add a button in. And again, so let's get started. So first of all, we need to add in our Lego first of all. So let's do that. We'll pop in an image. And let's choose. Again. I will rename these things that make sense, send you the acids. So it just happens. I knew that one day is my leg a and we'll make sure it's high DPI and would leave us with just by looks a little bit smaller. And let's get a little bit of padding as well. Okay, That was pretty good. So you can see that the background is white. So that's the first thing we need today is make sure that the nav bar itself is completely white. It's almost white in there. So let's do that. We'll also do is create a swatch. So in order to do that, what you do is just click this plus icon here and it will create a name where the color is fully. So you click on Create. And then next time when we come back to our colors, rather than to drag over to white. Which is not a big deal, but it sounds a bit of time, but you've already got it here. Okay, so there we are. And what we're going to do next is actually get rid of two of these nav links. And the reason being is that these are not currently part of any kind of class. So far as to change the color on one of them, it wouldn't affect the other two. So we're going to get rid of two. We're going to apply a class to the home navigation option here. So Covey's nav links. And then we'll just Command C, command V a few times and we'll copy and paste them. They get. So what we need is how it works, website Pricing, our work and contact us. So let's do that. Again. How it works is first, then worry about the capitalisation would do that in just a moment. And then this was website pricing. And this was our work. And then we have contact. Okay, so we also need to make this the correct font. So the moment by default, we have this as areas still need today is make sure that we have this as Poppins. And so there we go. And we also need to make sure it's obviously boat here, so we need to make this bold. So rather than normal, we have it maybe, maybe semi bowl actually looks about right. And to make sure it's all capitalised like it is on this one here. We'll just set the setting for that. And so if we go to more type options, will go on capitalize. And then everything is capitalized. Okay, so we're looking pretty good. That's getting pretty close to where we are here. But we do have a boson as well. So I've used the same green on everything here. So let's copy this color. First of all, you can, and then what we'll do is we'll probably throw in a div actually within the navbar. So let's do that. First of all. Actually we'll do it within the container, the nav. So let's try that again. So div block, we'll make sure it's in line and we'll make sure we pull it to the end here. Now the reason we're going to do this is that we're going to create this button and we can probably reuse rather website. So you can see here It's the same styling of button all the way down is used a few times. So what we are going to need three though, is just give a little bit of extra spacing between the nav links and the button itself. If we apply the margin or padding to the button itself, that would be then the same for everything if we were to reuse it. So just to get around the issue, we're going to put it within a div. So what we're going to do is we're going to throw in a button into this div block. So let's do that first off. So we'll throw in a button. Now, obviously this doesn't look right at the moment, but we will get it looking right. So first of all, what do we have? So it says free consultation, so let's do that. And then after that we'll start changing the colors. I spell it right now, I think I did actually. Okay, fine. So we'll also make sure that the text for this is also going to be Poppins. And it's also, again to be semi bold as well. And we'll make sure it's also capitalised. Again, so we need to change the background color. So let's do that. So I've got the color saved. If I enter this here, you'll see we have this green. I will add it as a swatch as well. And you see every time you add a swatch, Webflow automatically gives it a name for you. So in this case we have Medium, see green. Nice. Okay, so create that. So we're getting closer, but you can see that the alignment isn't quite right here. So we're going to need to just pull this down a little bit. So let's do that. And what we will do, I think, is give it a little bit of margin, actually K2. And that looks about right. And obviously the mc squared. So we need to change that. So on the div itself and I sorry, an eye on the button itself, we're going to change the the corners. So if we go down to borders, you see here we have radius. Say just get rid of that window. If we now just drag that right at the end, is going to create a circular button, which looks pretty good. So in terms of spacing, we're not far off. There may be a little bit taller actually, and it's probably a bit more space to the sides. So let's just maybe increase the amount of padding we have on the inside. What we're going to do actually is crazy. So now we actually will just crazy symbol a bit more this way. And maybe just a touch more on top as well. And we're looking at, okay, that's not bad. But I think me is just o In module we have on top a K. That looks pretty good. Let's have a quick look at that. Again. We are in crisis, say, Oh, I think we need to do now is make sure that the Napa is actually slightly larger. So let's do that as well. At the moment, there's no sort of padding or margin, so let's have a little bit of padding. We'll make it a bit larger. And then we'll, I think we will do actually is we'll just change the alignment slightly of the nav, nav menu. So let's just bring that down touch actually. Okay, and then on the div block of the button, we're going to apply a little bit of margin on this side. So this is not on the button itself. This is actually on the div block. And actually look pretty good. Okay, So as Nevada x2, so a few things we haven't done is name section. Say this one by FIFO is now bow, which is fun. This one doesn't actually have any class, so we're going to apply a class. But before we do that, we're going to just change the alignment and padding slowly. So as I mentioned a few times throughout the course, the default container width for Webflow containers is non-linear and 40 pixels, which we're not going to be using. So for this one, we actually want it to be 1200. So we're going to enter that in terms of the maximum width. So that will be 1200 pixels, which is going to make it a little wider. And then we want to apply some padding either side, so we want it 3%. And then what we'll do is make sure it's 3% on both the left and the right. Okay, So looking pretty good. However, just when you hover over, nothing's actually happening at the moment. So that's kinda boy, are we going to actually apply a transition so that when we hover over, the text is going to go to the color green. So let's do that. So what we need today is click on one of the nav links because this is always have the same styling applied to it. So the row called nav links. Now when we do this to one of them, they all affect it for all of them. Okay. So and this view we're fine boat want to do is affect the on hover. So if we click on the states and then go on to hover, at the moment, the color for it is the same as it ever was. So it's currently just kind of going off blank column. Or we want to do is make it the sea green color. Again. Now you can see when I hover over them, they do change, but it's kind of immediate. There's no sort of gradual fading into, so Italy now is come off the hover state back onto the known. I will apply the transition. You could have done this either way round. You could apply the transition phase, it doesn't matter. So what we'll do is apply a transition and we'll have the duration of a as 300 will keep it as easing, which is fine. Again, there's all sorts of different options you could change, but we'll keep it as easing for now. And rather than the pasty, we're going to have the font color change, say on the topography here. If you click on font color, that will now apply the transition. So if we view this as we hover over, you can say that now gradually guarantee the grain on hover. I can't say what we'll also do is import our other color that we need. So when we hover over this button or gains a habit ten, I think actually we're going to have a slightly different color than what would normally they say when we do this? Yeah, whenever as a slightly off green color actually just so it matches on this section. So what we will do, again, same sort of thing. I'm gonna apply a transition to this button. And what we need to do is apply it to the harvest date. So on hover, if we go down here and what we're going to do is just make this slightly that will make it slightly lighter or slightly darker, I might say. Let's do that again. Now, we will make a slightly lighter 10 K and then come off the hover state and back to the non-animal pre-transition. Same kind of thing will also have 300, so it's consistent. And we'll have this as the background color, which is changing the background color of the button. So if we do that now and we preview it when we hover over a OK, I slightly lighter again, so hopefully that all makes sense. So this is pretty much the main styling of the navbar completed. There is just one of the thing I think would do, there is a slight box-shadow actually on this, so we'll apply that as well. So make sure the navbar is selected, not the container, the navbar. And then what we'll do is we'll come down to box shadows. And what we'll do is just have a slightly off-white box-shadow. So that looks about right to me. We won't bother adding a swatch because we're not going to use again, I'm Alex privilege, Aaron K. Right, Let's just preview this. And now we are, we have our navbar setup in terms of making it responsive. I think would do that when we get to the mobile responsive video. Again, it already is responsive, but what we're going to obviously want today is change the background colors a little bit. And we may want to actually hide this within the mobile nav again, so that pretty much wraps it up for the navigation. 25. CLASS PROJECT: HERO SECTION: Right, So let's start building out our hero section. So you can see here, this is going to be relatively straightforward. We have a background image within our section which will be 100% of the width with no padding. We're then going to have a container that will restrict the width or the maximum width of elements here. And we're also going to pop these within their own div container. We can apply some padding to the top and bottom. Now, because this is relatively straightforward, we actually don't need to worry about using anything like Flexbox. The reason being is that our texts on the top left-hand side of the page. So by default, by using just the general display option of block, that's going to already positioned it to the top left. Four is anyway. So if you didn't need to use Flexbox, there's no real reason to do that. So we're going to just use display block for most of this. Okay, so let's start building this out. So first of all, we need to pop in our section, and we will call this hair section. And this is going to be 100 vh. And we'll make sure there's no sneaky padding then we don't want aka. So first of all, let's throw on our hero image. So if we go down to our background section, click on imaging gradient. And then we'll go and choose Image. And then we'll choose our SVG, which is here. I want this to cover. We'll have it positioned in the center for now. We can change that later. And we did not want it the tile k science. So quick look at that. And that was pretty good. So halfway there already. So from here, we need to throw on our container. Now we do already have a container that has the 1200 pixels maximum width with the padding that we use. But I like to actually create a new container 2 then we use throughout the project. The reason I did that is sometimes you may want to alter the navbar slightly. So rather than doing that, I'm kind of mixing up all the different styling. I like to have a specific nav container and then another container throughout the rest of the project. So we're going to do that as well. So let's put on our div block. We're going to call this contains 1200. And then we're going to apply all the styling that we need to, which will be 1200 pixels. We need it to center. And we want some padding as well, which would be 3% on both sides. Just make sure they're the same base. Again. So that's our container sorted rows again to give it some height as well, I am going to give it 100% as well. Actually need to read access to these and again, to be in the top left. But just for the hell of it, Let's do that. Say 100 vh. And then within that container, we're going to throw in a diblock, which how's our text elements in button? So let's do that now. So throw in a div and we'll call this hairy text container. And then we can start throwing in our heading. And for this one actually read that to be H4. Actually, that's going to be our a sub heading for this section here. And after that we need to throw in an H1. Just make sure thing. Say I will have another heading and there'll be one. And then we also need to add in a paragraph by our button, which will just copy and paste here. Then copy and paste the div of this proteomics. We don't need to do that. We want just the button only say copy that. Make sure the hairy text container selected and paste that in as well. Okay, So we're getting, say now we need to just style our headings. And the paragraph here we will just call paragraph. We already have a default set to the body of the page so that every time we have a paragraph, it will automatically start at based on what we have, which actually for now I think we will keep. So we don't necessarily have to style this every time. I think we will leave it for the moment. Okay, so, but let's style our hateful. So we're going to have this as H for green. That's what we're going to call it. So H for green. And we need to make it our sea green color, which we have a saved Swatch for. So that's fine. And then we need to give it some spacing, I believe. So. That is facing slightly larger there and it's relatively small. So let's do that. The sizing of that isn't too bad. We also need to also make sure it's Poppins to moment is rebutting. We won't pop in. So if we do that, but that looks a little bit T boat to me. So let's have you actually have it as medium, I think. But let's just copy and paste. In fact, that looks even thinner than, say, let's maybe try. Maybe try normal actually. Okay, Um, we'll just copy and paste a heading there. And we will effect perhaps the letter spacing. So let's try maybe to as pretty bad actually, but it needs to be a little bit smaller. So the moment is 18 pixels. Let's try that 16 and that direction would be okay. Again, so here we have H1. So again, we are going to apply a style to this. You don't necessarily have to apply style to it because you could just apply style to all the H1 headings if you wanted it to be the same or for the project. I think just because we're doing this here, I want to get used to labeling classes. We're going to do it. So we'll do one and we'll call it dog. The reason I sometimes give it a color because this website is going to have various different sections here where it's not all, whitespace is going to be blue in part, I sometimes like to give headings a qualify as a, as a column next to it you see, you know, to use and if you want to give it a different H1 with a different color, you can do it that way, or you can use combo classes as well, whatever you want today. I can say let's copy and paste our H1. I hope you have put this in here. Sizing wise. This needs to be Poppins again. And it needs to be bold. I don't think it's extra bold actually. Is boat. Okay. So we'll keep we'll stick to that. Okay. That's pretty good. And sizing wise needs to be a little bit larger than that. I think. Let's try 45 and increase the height, 50. Okay, so that's fun. And then we need to just pop on text here. Okay, and there we are. So we're looking pretty good. So that's basically correct, other than the fact that we need to get this a little bit lower down. So the way we're going to do that, again, like I said, we don't need to use flex or anything like that could by default, all the elements will be at the top left hand of the screen anyway, that's just how it works. But we will just apply some padding to this. So let's just do that now. Apply padding here. And that's probably all we need actually. So if we look at that, there we go. That looks pretty much correct. There is actually one thing I wanted to just point out that may have happened. So when we copy and paste this text area, essentially copy the formatting of it. So what I mean by that is that we have a space break here. And we have breaks here is actually copied the same thing on here. But let's just suggest it hadn't done that for whatever reason, which may always be the case, it would have done this. And you can see because of that is now going right the way across the screen, which we are probably don't want. And the same would have been true if it hadn't been for this as well. So this is what it would actually potentially look like. How did not copy the formatting of this. So if a happens, obviously what we need to do is restrict the amount that this text and go across the screen. And there's a few ways you can do that. You can apply that to the individual texts elements themselves if you wanted to. Or you could also apply it to the entire container it sits within, which is what I think we're going to do. So what we're going to do is give this a maximum width, which obviously you can change on responsive however you want. So what we would do is give it a maximum width and we'll just maybe have a guess. Maybe it's only 700 pixels. And that's pretty much okay. Actually, that's probably sort of spacing we would want. Yeah, that's that's pretty lucky. However, I do think actually that this wants to be on its own line just because it's a common day. I think it just felt right to me. If it wants to, if you did want that, you could do this and then it will start a new line. If there wasn't room for it to do that, you would maybe have to potentially alter the spacing of the maximum width slightly. But again, you get the idea. So what happened there? When I restrict the maximum width of the container, the hero text container, not overall container. It means that this will not go past this point. So hopefully that makes sense and you may actually want to do that just in case that's what happened for you. I didn't copy the formatting when you copy and pasted it over. So I don't want to just leave you thinking, Oh, why is my tax-wise course the stream when his wasn't? That's purely because it copy the formatting from the design here. 26. CLASS PROJECT: LOGO GRID: Okay, So just before we get started into the next part of the website, I want to just make one correction from the previous video. So what I had done is on the container 1200, I had made it 100 viewport height. We actually don't want that because we're going to reuse this container again. And we may not necessarily want this as 100 vh. So what we'll do, just click on this here and then click back to auto. And then that's going to be fine to reuse again, again in terms of size and NES, the best way to do for this one is going to just by dragging the padding up and down. Obviously your screen maybe slightly different tomorrow, I'm using a MacBook Pro for this. So it's might be slightly different on your screen, but again, just sort of adjust that deceit. Okay, so what we're going to do now is start building out the next section. We're going to start off by you by creating the Logo grid. And it is a grid that we're going to use for this as well. Okay, so let's get started with that. So cool. They sort of, uh, we'll think of this as the info section. And we'll think of this as they step process section and probably give it names to sort of reflect that. Okay, so first of all, we need to make sure the body is selected. And then we'll throw in another section. And this one we will call, in first section. We'll call it intro section actually. Oops. I will let the spell one day. Okay, so there we are. And then what we're going to do is start building out this grid here. So just before we do that, we need to get our container back on. So now we've altered it from 108 is not going to be full height. Say within our interest section, we'll add a div block and we'll apply the class of container 1200. So if you just click on the select here, a while actually dropped down with all the classes that you have that your sort of using quite a bit. And we want to click on contain 1200. And then we're going to have all the padding and spacing that you would expect from it. Okay, So because nothing in it at the moment is kinda disappeared off screen. So what we need to do is add in our grid. What you can also do just to sort of see what you're doing is give yourself a little bit of height on section. So what we might do just so we can see what we're doing for now is maybe just give it some will give it a minimum height of 500 pixels. We may go back towards the end and get rid of that by just taking, we can sort of see with what area we're paying with. I sometimes do that just so we can sort of see where we are. Okay, so within the grid, we're going to need five different columns because there are five Legos owner. So let's just do that now. I had 123 and we need to get rid of one of our rows, so we'll do that as well. A cane. And there we are. So we are now ready to go with our images. Now, at the moment, this is right to the top of the next section of both. So we're going to give that a little bit of margin. Sorry, not margin. We're going to put padding on that. And we'll do it the same either side as well. So we do it by eye for now. So about 30 pixels with, again, that looks good to me. And I will start adding in different Legos. Actually, before we do that, we need to get the section a different color. So let's do that. So we're now going to add this blue that we're using throughout the project. So we'll just click on that and we'll copy it and we'll go to the section. So Interests section and on the background color and the color. And we'll, of course, we'll create a swatch for that as well. And we'll save it. And that's called midnight blue apparently. Okay, great. So here we are. And next up we will start putting in Allegheny selves and go to Assets panel. Now, you don't have to house these within a div block. What you can do is just start adding images on, and it will populate all the different spaces automatically. So let's do that. So here we go. So what was the first lego is a trust pilot where precedence stripe. So where are we? So choose pilot first, k, and then we have WordPress. And then I think it was striped next. And then it's go car doesn't type form. Okay. So if you notice that the panel was popping up without me actually go to the side. What I was doing, I was using one of the keyboard shortcuts, which is the letter J. By pressing J, it brings up the panel of people went into this, into the previous video, but that's what I was doing. If you're wondering how is doing that and you just forgotten how it's working. So actually I've messed up here, so that needs to be a different one. That's interesting. We'll fix that in a moment. So let's get back our trust Pilot one. We'll pop that there. And that's fun. Okay, so what we're also going to do is just a line. The say they're all centered than each other. They're all sort of different formats and different spacing above and below. So the best thing to do is just to send to this other or at least central. So we carry over to our alignment part here. We have it as, sorry, aligned. That will be fine. We'll still have it set to that one there. And that's pretty much sensitive. So we have a quick look at that now. There we are, That's pretty good. So the reason that all aligns is because we have a grid within our container which is 1200 pixels across. Now when it gets to mobile responsive, obviously not going to do is just yet. Because with these the grid, they're all actually going to stay exactly as they are. So when you get to this point here, we're going to probably want to delete one of the columns, which will push it down to a different row. But we'll come to that a little bit later on. Okay, So there's one other thing I wanted to do with this video, and this is this divided line here. So there's no sort of divider icon within Webflow. Does nato to divide a section, at least not in the moment. So what we could probably do is just on the bottom of this grid is give it a border. So let's do that. So if we go down here to borders or click on the bottom part here, and we'll have it as white as luck would have it. It's pretty much the width that we want. If we have a look at that now, there we are. We have a border or a divider. So it's actually probably a little bit further openness. One is here. At anything as a gigantic problem, we could always alter the amount of padding we have on the bottom. We should bring it up a little bit. That looks pretty good. Okay, so as it stands, we've made our Harris action, and we've made a start on the lego part. Now we're going to type in, not typing, okay, and to start developing this bit here. Okay, so the way we're going to do that is probably going to use a grid. And then we have to be a bit creative with how we're going to do this part here. Okay, so next up we're going to create this section. 27. CLASS PROJECT: INTRO SECTION: Okay, so let's start building out this next section here. So what I think we're going to do for this is we're going to have a T column grid. And then in terms of having this, so we have the number next to the text. We could do this a few different ways. We could actually have another grid inside of the container here if we wanted to. We could also just use flexbox. Well, I think I'm going to do and we're going to use a list item which we haven't covered yet. So that'll be a good reason to perhaps use that in there. Okay, so first of all, what we need to do is just on the navigator, make sure our container is selected. And then we will go to Elements panel and throw on a grid, we only need one row, so get rid of one. And that should do is for now, worry about spacing later on. And we'll just give this a bit of margin just so you can, I'm a bit of space to work with. Okay, great. So what we'll do first is throw on our div block and we'll call this our grid container. And I'll be left. And then same sort of thing again, thrown into a diblock. And amazingly, that'll be great container, right? Okay, so let's start by building out of this section here. So we have an h5, we have this which will be an H2. And then we have a paragraph and a button. So in terms of h tags or headings, I think I've mentioned this previously in another video, but just in case I didn't. If the headings go down from H1 or we say H6. And the thought process behind these is that the H1, which would be this one here, is the most important heading of websites here, H1 is almost always within your hero section. And then these kind of headings tend to be sort of anything from age four to H6. And in terms of SEO is thought to be that the one is most important issue. So a cascade down in terms of importance, but it's arguable how much of a ranking factor that actually has a certainly has some factor, say, it's worth sticking to these principles. But basically I would certainly have H1 and H2. And then after that, it is not end of the world if you don't keep the exact order. So what I mean by that is, let's say you had this h3 rather than H2. It wouldn't be the end of the world. Anyway. So let's start building this section out. And what we need to do first of all, is just copy and paste this section here for this element. And then we'll paste that in. And then we'll just copy the text from this. Okay? And then next up we are going to have a heading, and this will be an H2. And we will actually just give this a class of H2 just for now. And by default we'll leave it as dark born to do now is create a combo class for that. When we use it on a blue background, we can have it as white. So what we'll do now is click on it again and type in light. And then we'll change the font color to white. We'll also make sure it's Poppins as well, which it needs to be. In fact, we should have done that for the default one actually been in mind, that's fine. And then that's pretty much okay. So let's now just copy and paste this text on. Okay, So a bit of a weird formatting thing there. Okay, So in terms of sizing, again, we'll perhaps register or this ones we're done. So that's fine for now. Then we need to have two different paragraphs. So let's add those onto and then have paragraph which will actually duplicate. So we'll give a class to the default paragraph 2, which we'll just call. And in paragraph a k. And we'll keep that dark by default. But then we also want to have a light version. Say for this will make a combo class of light, which will then let us change the text to white. We then change the phone because the phone by default we applied to the body or pages tag will still be 17 pixels and Roboto, so that's fine. Okay, So we're just now enter in the texts from here. You could just copy all these texts into one paragraph, but it's sort of good practice to have two different paragraphs for each one. So let's make sure we do that. Okay, so that's one done. And then we will just duplicate that again and then copy the text from this one. Case. Great. So let's have a quick look. That fun, I guess I'd like to say we'll probably go back and just go over the spacing slowly. Let's just add a little bit of space down ages. So we've got a bit more room to work with. And we'll apply, maybe use some padding, a 100 pixels tasers Even. I Can, we might go back and sort of look at this again, so it's all done correctly. Okay, So that's pretty much there apart from ONE to have the button. So we'll just copy this one as well. So this Command C, or you can just right-click and copy it. And then we'll obviously pop this within the grid container itself. And there we go. There may be some occasions where you'd want to have this Boson within its own div container. If you go into alter the padding or with the spacing between the boatman and paragraph, you wouldn't want to affect it to the button itself because that is a class. So if you did that, it would do it to all the buttons, which is sometimes why you'd want to have it within its own container. But that looks pretty much okay spacing wise say for now, we're going to keep it as it is with needs out of the text though. So it's little Learn More. So let's just do that more. Okay, So that's pretty much it for the first part. Again. So now let's start building out this next part. So again, we could do this in various different ways. We within our container on the right, we could make a grid, we could just use Flexbox, but we haven't used the list item I mentioned. So that's what we're going to do. So we go into our elements panel. You see here within basic, you have a list section. And if I throw that in, you'll see by default we have sort of bullet points. So we actually don't want to do that. And you also have the option here of squares. You actually have a number section there, which you could argue, we could maybe try and get away with using that. But we're actually going to style our own. So we're actually not going to use any of these, but they are there. You also have letters and you also have remedy mood state. But just for now we're going to get rid of that starting completely and we don't want any bullets at all. You can also, because what we're going to do is create one and duplicate it will get rid of two of these list items and then we'll just duplicate once we're done. Okay, So I'll keep it as list item for now. And what we need to do is first of all, throw in a div container, which is going to house this number here. The number itself is not going to be an image, it will actually be a text element. So if we ever want to change its size and we can actually do that via the typography section. So we added for this div section 2 and then we're going to use flexbox to align it like it is on here. So I'll show you how to do that. So first of all, we'll throw in a container for the number section. So this will be our number container. And then we'll throw in a text block. I think the reason we're going to use a heading and then we could use a heading. But it's not really a heading and it's not really a paragraph. So this is probably a good use of textbook I think. And then what we would do is make sure it just has the number one in and will also make it a lot bigger. Let's say 17 will not be enough. Let's try 60. That's probably about right. And we also want the color to be, It's essentially the midnight blue color, a little bit lighter. So let's just do that by I. And then we'll initially make it midnight blue, and then we'll just drag this open touch. And that looks about right. I think. Yeah, that's fine for now. We won't make it a swatch because we're not actually going to use that again. But if you were, you could have made that swatch. And again, we also need to be Poppins as well, and it needs to be bold. Okay, so looking pretty good. So just on the navigator, make sure you have your list item selected for this next block we're going to go and then we'll add another div. And this will be our number, title and container. And in here we're going to have a heading as well as paragraph a, k. And these are going to be h3, I think. And again, we'll just maybe give that a class of H3 that we can then give a combo class 2 of light, just like the other ones. So we need to get that as white and then make sure it's pop-in. So this is the last time we'll have to do this object. We're setting it up. You've got to do for the first time around. And okay, so that's all fine. And then this one here, we can actually apply this class too. So if we just hover over here and he stopped typing the word PIE paragraph, if you can get again, it will come up with the existing combo classes of light, which is what we want. Okay, so that's fine. And then we'll just copy and paste at least this one. Then we are. And then we'll do the same for this one here. Copy that and then we'll paste it inside. Okay, So just to save time, I'm going to just duplicate this for now and then we can always enter the text and afterwards or just for time, I'll do it off camera. So what we need to try and do now is get these to align correctly. So at the moment, they're stacking on top of each other. So what we're going to do is make sure that the list item is selected. If you want to make sure that go to the navigator, click on list item. And then in display settings, we want it as Flexbox and you'll see it'll jump. Now it's not quite properly aligned yet, but it is at least next to each other. What we need to do is click on the container or the number container. So this is the number container. We are going to affect this T on alignment. We're going to click to the center. And there we have it. We might also do just to get the spacing correct on this is geospatial perhaps. I think on the div we have here is just give it a little bit of padding, think. Yeah, So let's do that. So if we do name margins, sorry, there we go. We're also going to have to apply a bit of spacing around the textblock itself actually as well. So in fact, the textbook, it shouldn't be called that we'll call it large numbers. Okay, now let's copy and paste this entire list item, because pretty much perfect. Now, we may need to just adjust the spacing between the title and the text, but that looks pretty good to me. So that's an algorithm of the start copying. So we'll copies again, make sure. Again, if you wanted to just make doubly sure, click on the navigator, make sure the list item is selected. And then we're going to copy and paste that two more times. Okay, and we're now pretty much getting there. So what we need to do now is just changed this, the number 2. And when we do this is going to actually throw this out of alignment slightly. So I'll show you what I mean. So there we go. And we want number 3 for this as well. So you can see it's kinda done the right thing, but this is ever so slightly not aligned properly. And that's because there's not enough spacing around this elements. So what we're going to do, since these are called large numbers, they have the large numbers tag attached to all of them. Rather than usually what we're going to do is just give the, given a bit of width on the actual text itself. So this is not on the div block. This is actually on the textblock of large numbers. So what we'll do, I'll just again, just to prove that if we'd be on the navigator, so not the container, not the number container, but the actual text element itself. We're going to give this a width of about 40 pixels. And if I do that or now aligned properly. So let's have a look quick look at that just to make WHO. And there we are. That's looking pretty good. So just to save time, I'll end our copy and paste the text correct. Off-camera. But obviously we're all you'd need to do is just the same sort of thing. Go back to the design, copy and paste the text that you want to go on. And then put it into the spaces that you have to do with the remaining part of this video is just get this so there's a bit more spacing. So because this is a grid, what we can do is just click on the grid. And I'm going to just sort of increase the gap. We did not want to do that will increase the gap. So that would affect the column width. This actually affects the gaba, they're gone. So let's do that again, and we'll just increase that a little bit. So we've got a bit of a gap. So we'll look at that. That's pretty much AK and let's have a look at the document again. That's actually a bit wider. So maybe just a touch more than K. So we'll look at that. Yeah, that looks pretty much okay to me. So I think we're pretty much there and there is just one more H5 had amnesia add-on. So what we will do is just copy this and we'll paste that within the navigator. So you can see now it's getting more complicated. We may need to go back at some point and just make sure all of these are correctly labeled. I think I've done it for most of them. So what we need now rather than the list item itself, we need the grid container, right? So click on that just for ease and paste that in. And rather than trying to drag it up this end here, I'd always use the navigator, so just drag here and make sure it's above the list item. And then it will go sort of within the grid container itself. Okay, So that pretty much covers it for that section. And MAC say I will just fill in the text off camera. And all you need to do is the same. Just again, copy and paste the text in. And then we can start the next section. 28. CLASS PROJECT: PROCESS SECTION: Okay, So this now brings us onto the step-by-step process section. So this will be relatively easy to do because we're going to sort of Cray one. And then we're going to duplicate that twice. And I'm going to just reverse the section data once we've done it. Now we could use Flex and we could use grid. Now because I'm all about the grid. We're going to use Grid. Okay, so let's get started. So first of all, what we need to do is make sure that we I think just so we can see this Passover and to minimize everything else we've done. So you can see so far we have a nav Harris action, an intro section as well. This bit was here. Now we need to add a step process section. So we'll call this call it process section just for speed. Okay, so what we're going to do this time, we're actually going to apply some padding to the section itself. So in terms of constricting the container, I apply a padding t the container itself for the text, for sort of constricting the texts. But in terms of padding above and below a section, I tend to add that onto the section itself. Now so far in the project, we've actually not done this yet. And the reason being for the interests section, we have the logo part here right to the top of the screen. Now if you imagine this wasn't here with one padding above, and we want padding below, which we do actually have from this section here, in this section there. And the reason that we've done it this way, or we haven't put padding on this section, is that because of this logo here. So what we have something that will unconventional where we have a margin creating space between this part here, which is a 100, and we have a 100 also of padding on the bottom. Because this doesn't have anything right at the top of this section. We're actually going to apply a 100 pixels of padding on the top and the bottom so it keeps it all even. Okay, so let's do that. First of all, this will make more sense as we go. K. There we go. Great. So only 3, first of all, is get our grid m. So actually no, sorry, that's not right. We need to put our container in. So first of all, let's do that. So Fahrenheit if block and we'll give it the class of container 1200 is what we need. And again, no automatically give us all the things that we need. And then we can pull algorithm. So let's do that now. Okay, so although we are using a grid, we're not actually going to have multiple rows and rushing into one section here, have that as a grid. I'm going to copy the entire grid Timo times. The reason being, if you try to make it with multiple elements or multiple cells, is going to be actually hard to maneuver all that around. Because by default it wants to add it to the next column along. And it just won't be as easy to control. So we're going to do is get rid of this row and just have one, sorry, yeah, t columns are one way to need to get rid of this one here. So let's do that now. Then what we'll do is throw in a div block, which will copy twice. And before we do anything else, we get into the habit of naming our grids. So we'll rename this and we'll call it process grid. And we'll call this grid contain a Left process. So this is quite a long time. Actually, I probably wouldn't give it this long normally, but just so you can see what I'm doing, That's wonderful. I do this. And same thing again. This would be what do we call a grid container, right? Okay, so we already had a grid container, right, for one of these appear. So this is grid container, right? Process and that's great. Container Left process, just so you know what section are what grade you're working with. Okay. So first of all, we need to have the image on the left, and then we have the text element a on the right. So first of all, let's add our image in. And it happens to be this one here, k minus 1. And that's automatically taking up 50% anyway. And then what we need is to get our H5N1. So again, this is being repeated all throughout the project. So there's an h5, this will be probably NH3 as well. And then the paragraph, and then we have some text blocks probably for the sections here, a k. So let's do that first. What we will do is just stay here and copy and paste that in and call this step one. And then we need an H3. So if we throw in a heading h3, apply the class of H3 that we already should have applied. And there we are. Okay, and then what do we have? Let's just copy and paste the text here. Okay? So we actually, we actually have a formatting thing going on here. So let's just do that. This is how it would have looked. So we need to obviously this doesn't look right and we need to out of this, but this is how it will actually be. So let's now just add in a paragraph. So again, this will already have a class applied to a normal paragraph. So if we tend to have an FTP, it will come up already. And we don't need to change anything on this because this is the default paragraph which is already dark. So all we need to do now is just paste the text. We. And next up we have our a tick section. Okay, so that's sort of the first part done. For this next part, we're actually going to have these contained within a div. And we may actually even use a list section again. Now, you didn't have to do is every time you have bullet points or heavy. But it's actually just good to do and get into the habit of doing now. And also under the hood in terms of the code at this creates, it lets the web crawlers know what kind of element it is. It'll actually come up as a, as an LI tag, which is a cover listing tag when you use these items as well, I think we're actually going to do. So let's do that now as well. So we add in our list section. Again, we don't want bullets, we don't want any kind of style attached to this. We're going to create our own same sort of thing as the section above. We'll just get rid of to these list items. We'll create one and then we'll duplicate that a number of times. Okay, so what we have is just the little tick here. And then we have a text block here which would be kind of acting as, as I title. Okay, so I think we'll do within this list item here, we're going to add in a div actually. And this will be our tick icon. And that will be as well as inline-block, I think. And then from our assets panel we'll add in the tick. And obviously that's way too big. All right. Looks about, right. That's more largely, again, saying there are more we can do is add in our textbook, which we can then store and how we want today. And we can make that inline-block as well. There's a few ways we could have done that. Actually, we could have made that section of Flexbox and had it sort of aligned vertically. But again, it's just as finding this way. Say, well, I think we will do is just create a little bit of space between these parts here. And we'll do that by applying maybe some margin to the edge of this. Just say it gives a little bit of extra room. Maybe 15 pixels, looks good. Yeah. Say again, and then add in at least one of the titles for speed. And this is going to be Poppins as well. So we need to give this a class as well. So rather than just textbook will rename it as tick headings. As that looks sort of semi bold actually. So first of all, make it Poppins. And we'll have it as much. I think it is bold. I think I prefer semi bold. Let's go semi bold. Let's go, let's go off the off-script little bit. Okay, so now that we've done that, we can actually just duplicate that a number of times how many we need. So that's 1234512345. There we go. And what we can do since this is a list item, if I know, sorry, what we would do before we copy and paste will actually give the list item a class. So we'll call this tick list. And then when we copy and paste, we can then apply padding to one of them, which will then do if all of them. So let's do that. So if we hold down option space at all evenly. Okay. So I'm not going to make you watch me for 10 minutes, copy and pasting all of this extra mess. Obviously, I'll do this off-screen for the next section just so it's all done. But all you'd need to do is they just inherit, which is copy all the texts that you need. Copy and paste it in. And obviously just paste the new titles in as you would say, just for now, just to save time, just pretend that I've actually done that. Okay, So what we'll do now is just have a quick look at this on the main page to see how we're looking. Okay, So not bad ass o, although the spacing isn't quite right at the moment. This is weighty bunch together. But the VT of grid is that we can very easily fix that. So if we select the grid, double-click. Now we can actually just move this apart to what looks right by eye. Let's try 80 pixels for now. A quick look at that. And that's pretty much bank on naturally. Okay, saying that looks pretty good in terms of the alignment. I think everything is aligned to the top. So as it happens, I think this might be oh, it is. Yeah, everything is aligned to the top. By default, some of the titles come with margin on top. So if you thinking sometimes it is aligned to the top but it doesn't look quite right. That's because you actually have a bit of margin, margin on the top of some of the headings. If you wanna get rid of that, you can do. So. Obviously when you do it, you can see the top of the screen is also moving or pair as well. And nice because it's also applied to all of these. So if we affect it here, it will affect it, hey, well, because there's actually nothing above it, we're actually completely fine to do that. So let's do that and we'll get rid of the margin. Put that back to 0. And now we can see that it is absolutely actually not quite aligned. It should be. So the reason that it's not quite aligned is that we need to make sure this is aligned to the top, which it is. And actually I think it is aligned again, just by eye for a moment. It didn't look quite right. Okay, saint, that's all now properly aligned. And we're pretty much good to go with the next section. So basically we're going to do now is copy the grid two more times and then pop in early images onto section. So let's do that. So what we will do, again, rather than clicking on our grid and starting new rows, it's actually going to be much quicker if we actually just copy the entire grid itself twice. And then what we're going to do is start the spacing of all these different parts here. So because we want to keep this padding on the actual section itself at a 100 pixels. And we also want to as a 100 on the bottom as well. If I click on one of the grids, which are actually all the same class, is going to apply the padding on top and bottom, which will mean it won't be a hungry anymore. It'll be something like a 150, 50, 50 pixels with a marginal padding on here. So what we need to do is just tray one combo class for the middle grid. Just so it only applies to this one here, the SPAC properly, if that makes sense. So you see what I mean? So what we're doing today is going to put padding for this one as a combo class. And organ to do is within. Yeah, we'll give it a margin actually. So it pushes it away. And we'll give it a margin if maybe let's try 70 just for now, see how it looks. And I think that's okay. We can adjust that again if we need to. So the spacing looks pretty much okay there, but we need to get this to invert. So what we will do for that, does a combo class required for this, all you need to do is click on the, either the container for the image or the container for the text. And all we need to do is make sure in this case, we want this over here. Put this is first in terms of order, and it automatically flips over again. The beauty of grid is that everything is still aligned exactly as it should be. So that's super, super easy and makes it, whoops, definitely not. And really quick to just set something up, as we have done. Say why we'll do is just pop the new images in. So we have the sort of mobile knocking one next loop. So let's do that. I'm going to go in there. And the next one we have k. So we may need to play around with images a little bit just so they all correct. And what was the one? A k. So good. So I think that's actually a fraction to launch. Let's just make it a little bit smaller. So that's all good. And there we go if I want, I think I would like today actually. And I haven't designed it this way, but I think if this were actually a little better if they were aligned in the center. So again, off-script we go, I'm going to actually change this. I'm going to have them so that they're aligned in the center. Whoops, what happened there? That's more like it. There we go. That looks better. So it's a warm molecule that and yeah, that looks pretty good. That's pretty much bank on. So all we need to do now is again, just copying and pasting all the texts that you need to I'm not gonna make you watch me for 20 minutes just copying and pasting in tanks. Paste that all in together Odin. And then we only have pretty much two more sections left to go. So next up is going to be the call to action section. 29. CLASS PROJECT: CTA SECTION: Okay, So in this video, this brings us onto our call to action section. So this should be relatively straightforward to do. Now, even though this is kind of built into what looks like the footer, we're actually going to make this as a separate section on to itself just in case for any reason later down the line, we wanted to change this for any reason. It means we can do it without affecting the photo. So it's going to look like it is all one thing, but it will actually be two separate parts. And again, so let us give this a go. So what we need to do is pop on another section for our call to action. You can see from the last video, I have now entered in all of the correct text and headings. So what we'll do now, make sure the body is selected. And then we will add another section. And this will be a CTA section for call to action a. Okay? Um, what we will do once again is we will apply some padding to that. In fact, I'm actually wasting time doing this. Why should have done? And this would be a good thing. So show you, rather than having to even dragged that, all I'd have to do is click on it, click on a 100, and it gives you it automatically. Now I won't do it for both of them. So you need to do then is just very quickly hold down Shift, sorry, hold down Option or Alt if you're on a PC. And then it will do for you automatically. Okay, so we need this to be midnight blue color, say festival less effect the background with that color. So you go down to our backgrounds and we will just add, actually, no, sorry, I need to do is add the color first of all, of midnight blue. Get rid of that for the moment. As you can see, it's midnight blue. And we actually do also need to add in an image which is this sort of very faint background map. And we'll add that to the section itself. So let's add that on now, say Choose Image. And it's the background map. And we wanted to, to contain, in this case, we'll have it centered. We do not want it to tile AK, say that's now all in place. We can start adding in the next part. So rather than adding our standard 1200 pixel container, we're actually going to make our own mom for this purely because there's actually no real reason to have 1200 pixels because he's not going to span anywhere near that length of this green. So we're actually going to create our own little special container for the text section here. So what we're going to do is on our section, we're going to add a div block. And we will just call this CTA texts container. And we're actually going to apply the similar sort of things to this in terms of padding. So we're going to have this as 3% in terms of the padding on the outer sides. So make sure it's the same for both. And then what we'll also do is restrict the width of it as well. So it'll be a maximum width of, let's try 700 pixels just for the moment. And we will center as well. So it's very important. Okay, so from there, what we're going to do is throw in a heading or throwing a paragraph. And the button we can just still vest from appear. Again, that's an example of maybe you wanted to use as a symbol might have been quicker. And we'll paste that in. And then we go. And what we need to do is affect this with its own class, I think. So. We'll have it as an H4 and we'll call it CTA heading. And we'll make it a bit thicker, so it will be 32 pixels. And let's have that as Poppins. And it will also be white as well as the, that the paragraph can be the same default paragraphs that we have with the light combo class. You can see it's already applied there. And then what we're going to do is on the CTA texts container and we're going to make that a flexbox to get it to center. So let's do that now. And we'll have it is vertical. And we may need to do is just pop this Boesen into its own div. Actually, actually, no, we won't need to use all do. I align it to the center and automatically is going to do that for us. Okay, So we're pretty much there with this already, or just need to affect this slightly. So we'll just make sure this is aligned way. I'm pretty much there. So let's just copy and paste the text on. So let's get started. So good. And then same with this one here. A cane and that's pretty much bang on. So we just need to have choose your package. So just for speed on all, just type that in. Right? Okay, So I think that's pretty much all we actually need to do for this section. Let's have a quick look in terms of the spacing and we're going to just sort of keep the I think that's pretty much about right. Well, when we get the footer on as well, that's going to look around about the same size if we need to affect the sizing a little bit later down the line, we could, if we wanted to change the padding from where the button is, we could do as well. One thing we have done wrong, you can see here we've actually done something to affect the paragraphs. So what we've done when we centered that paragraph, we affected all of them. So that is a mistake. So what we need to do is give this one actually its own qualified. So what we'll do is we'll pop that back how it was. And what we need to do is give this a class of CTA and then I will let us do that without affecting any other ones that we have a pair. So again, this is a family to watch out for. And even though I use Webflow all the time, these sort of steady level mistakes, they still are going to happen. They're going to be very frustrating. And your point is trying to figure out what's wrong. But again, the more you get used to it, the more you get used to using Webflow. Like I knew pretty much immediately what had gone wrong there. Just because I've done this so many times, speaker is one of those things to watch out for. Again, you need to remember that you have to affect things. If you affect anything that's already part of a class, it will affect it elsewhere on the page. Okay, so that is pretty module fine. I think the spacings maybe a little bit height actually. And although the spacing of the button hair is actually about the same what I think we made. Now, what do you got towards the end naturally? So just for now, that's pretty much fine as is. And I think just for the moment we'll leave spacing as it is. And if we want to add padding, we candy cane. So that's pretty much spot on in terms of the reference. If we wanted to adjust any of the spacing, I think we'll do that towards the end. I do fill out that perhaps, maybe these are a little bit close together in terms of the button. But I think what we'll do is towards the end when we get through to my bio responsiveness, we'll kinda do that. All is One thing. Again. So this brings us onto the last part, which is our footer. 30. CLASS PROJECT: FOOTER: Okay, so let's bring it onto the last part of the page, which will be the footer. So just like we did for the navigation, we're actually going to use a premade elements within Webflow for this. The reason being is that the pre-made photo that website has pretty closely resembles what we have going on here. So there's no point in remaking this right from scratch. The whole point of Webflow is to make your life quicker and easier. So that's what we're going to do. So let's go to our page, back to navigate. So make sure the body is selected. Going to add element and it'll be on the layout section. And then just click on footer. Okay, so here we are. So obviously we need to do a few things. First of all, the container that's crony containing all of these elements. Or the, is the Webflow default width container, which actually we don't want. So just like on the nav, we have to change that. So what we can do though, when this case we can actually just apply the class of container 1200. And it's going to automatically give us everything we need. So we don't need to change anything about that. And it will work perfectly fine because we actually have a flex container within that container. So it's not going to affect anything we do in here to the default container. So first of all, what we're going to do is change the background color to midnight, please. Our background section. Let's pop the right color on the row. And the handy thing with the pre-made footer is that they actually have all these different text elements within a class already. And all of them make perfect sense. There's no real reason to rename the something different at a particular reason to decide. So what we did today is start changing the colors of this. Obviously input the correct links. And we also need to get rid of this bit here, what we want is a another text column. So what we'll do just by using the navigator I think actually is perhaps just highlight. Now let's just delete it actually even just for ease. And say delete photo layer Link. And I see when I deleted it is got rid of it and it's replaced it and spread out evenly. So all we need to do now is make sure that we're actually selecting a div container with the text links in. And we will copy and paste that. And you'll see it will automatically spread it out, which is what we wanted to be. And it will automatically have all the padding associated with our default container. If I put my case on the edge, you see it's perfectly aligned to the edge of the rest of the screen as well. Okay, so we're pretty much that be fair. So all we need to do now is just change the color of this text and change the actual font. So on the heading, we want this to be not where we want it to be. Poppins who have it as bold as fine, also as the white-collar. So from here the text links rows, I want to be rushed in to make there is a slightly off white or light gray color, I think. So let's do that. They can stay is really telling us fine. And we'll make the washer. We have data so slightly off-white color. Let's add that. Let's call it silver. Okay, So what we will do now is just start adding some text then. So this, again, I might not do all of this just to save time, but I'll just do a few, at least the top line. Just to show you. I can highlight this AKs and what we also want today if it weren't actually why I previously did just before day in this video, I've accidentally given as a class already. So what we could do is make sure that it's capitalized if we wanted to say now, all of these headings are going to be capitalised, which is what we want. So let's add in the infrared Poland and industries, and then follow as well. Okay. And there we are. So at the moment you can see if I preview this as we hover over, we get like an underline, which actually we don't want. So let's get rid of that. So it underlines when we hover over it. So let's go on to our hover state on a footer link. And we're going to get rid of that option. So that'll be located under the style section here. And I'll be on the decorations at the moment is commonly on underlying. Just click the little cross icon and that will get rid of the underlined on hover. And I think just for fun, what we will do with these texts links is we will on hover, made them go through different color. Say I think will make it go, we'll make it go green. Why not? Let's do that. So we're still on hover at the moment. And we'll have it so that the text color is green on hover. But when we hover over it, it's quite abrasive is quite quick. We now need to apply transition to that. So if we come off this, you always apply transitions to the non-state that's very important to remember. So go down to the transitions, will have a as the font color, which will change. And we'll have the duration of 300s just so it matches the navigation. And now if we preview this, you can see that when we hover over it, it gradually changes to green. A cane. So again, just to speed, I'm not going to fill in all of these text links, or you'd have to do is just again copy and paste all of these in. I will just perhaps just the one just to show you. And then obviously we need to actually add the link on as well. So I'll just quickly maybe just the one column. And then I'll just show you how to add the link in there. Okay? And obviously we've currently got too many hare, so we will need to just delete one of them before we stop. I'm here. Okay, and then this one here, we'll just delete that and then delete the less noise in for that one as well. Ok. And there we go. And if you wanted to make sure that all of these were capitalize, you could do that against they're all part of the same class. If we go down to the typography section, you could make sure that every single one of them is capitalised. Okay, So that's pretty much it for that. What we do need to do is just try and actually add the link on. So this is true for the nav as well. So if you click on the Settings icon here, you then have an over different options for even link to. So you can have it as a external URL. If you wanted to make it open in a new tab, you can add it to a page, which is probably the most likely thing again today. So in this case, so this one, it would be home. So if we created more pages here, you get a full list of pages that you could link to. You can also link it to a page section that you wanted to jump to a certain part of the page, you could do that. You can have it automatically e-mail GAVI, coal. So again, if you had sort of a nav was here, if you had like an old telephone icon or a telephone icon on the photo, if you apply it, a telephone number. If you want a phone, you could then automatically bring up the cold part of your phone. And we also have again two file attachment as well. A cane say that pretty much covers it for the main part of the nav. Again, off camera, I'll just finish up adding copy and pasting these links in. So that's all you need to do is you do the same sort of thing, copy and paste all Bayesian. What we need to do now though is just the last little part where we have the sort of 40 bar. And I just made this part of the fossil for now. So what we have is a line going across and we have text on the left-hand side. This is actually going to be pretty simple. So what we're going to do is this is already a textblock, and we'll just call this copyright text. And what we will do rather than it being centered, we're going to the left. And we're going to have this as, I think we'll have this as silver as well. And then what we need to do is get this loin on. So we're actually going to do is just apply the loin onto the textbook itself. So if we do that, we're gonna give it a border. So it'll be just on the top and it will be the normal line. Will keep it as one pixel in width or size. And we'll have that as silver and perhaps just drop the opacity a little bit as well. Now obviously the moment is a little bit too close to the text itself. So we need to do is just play a little bit of padding to that. And there we are. That should look okay. So let's be that. And we're looking pretty good. So think there's a bit more spacing here on the design. So if we wanted to do that, we could. Let's just, let's just do that. Why not? And will perhaps your supply a bit more margin to this? To get a bit more room and preview this. And then we go, We're looking pretty much spot on. So that's pretty much it for the building part of this. In fact, I've actually just realized that these are actually popping. So let's just very quickly changed that. And then we can start looking at mobile responsive again because this is all the same class, it's going to affect it with all of them. Say this needs to be Poppins, where are we now? And that actually affected that. It asked, yeah, that's all fine. And I think you need to be a bit bolder actually, so not normal. We have it. We have them semi bold, I think. And the same will be true for the copyright texts that needs to be Poppins as well. And we'll have as other semi bold as well, a chain. So there we are. We have pretty much finished building all the different parts of this page of the website. Hopefully all of this has paid sense and hopefully you have something at the end of it which looks comparable to this. And obviously this may take if you gaze, but hopefully you've managed to follow along with it. So now in the next video, we're going to start looking at making all of us responsible Mary bile. Because as you can see at the moment, if I scroll through this, everything isn't looking perhaps as it should. So we need to make sure all of this looks good on mobile. And we'll actually start by changing the way it looks on the mobile navigation. So that's what we'll do on the next video. 31. CLASS PROJECT: MOBILE NAV: Okay, So just before we get started making the rest of the page map our responsive, I wanted to just make some final tweaks to the mobile navigation. So as it stands, if we have a look at this, you can see that it's kind of got a gray background, like a gray background button for the the trigger as well. So this is just a leftover of the default nav. So when we first out is starting at our desktop version, that was great as well. And obviously the mobile version is also gray, so we install changing that so it's perfectly white. I'm also against me when this drops down, rather than dropping down just a hair. I wanted to drop down the entire way, so it'll be 100 vh again. I'm also going to put these nav links into a div and we're going to centralize it. So it's kind of a bit like where this button is now. Now obviously you don't have to do this. It's just in the I personally like to do. So let's give valid. So first of all, we need to try and get our menu out. So make sure the Menu button is selected just to make sure you've got it here. And then you can click Open menu from the Settings tab here. And then it will bring up menu. So first of all, click on the Nav Menu, and then we will just change that from gray, which probably is currently bank to white. Okay, so that's half of it done. And we also need to change this Menu button also, rather than it being currently gray, like it is an amendment. We want that to be white and we'll also change the Hamburg also to be dog when we do that. So let's give that again now. So let's just open the menu again. And you can see it's currently gray, so let's just make sure it's white. And strangely, it is already one is let's just make sure it is now, okay, that's better. And then also click on the icon tomb. So at the moment this is now white. We actually want this to be dogs. So rather than background color for the icon. So the Menu button will be background, but the actual icon will be a typography color, which kind of weird. So make sure you remember that. So this is how you affect the hamburger. So rather than so rather than why would you currently is it's actually not coming up his wife for some reason, but it is what we want is black. We can have is the dark blue, whatever he wants today. Let's just do that. And now if we preview this, you can say that is staying the same color. Okay, but like I said at the moment is store any coming out to maybe a third of the way I wanted to come down all the way. So let's do that. So again, make sure the Menu button is selected and open the menu and make sure the nav menu is selected. And what we're going to do is give it some point, say heights currently set to auto, which means only going as far as these elements take up. We want instead of that to be 100 vh. And there we go. It comes all the way down. And what I also want to do is pop these into their own div. I'm going to centralize them with the flexbox. So again, making sure the Nav Menu section or container is selected. We're then going to pop in a div block and we'll call this mobile nav container. Okay? And then we simply just pull these into that container. So initially the gains or be horizontal obviously we'll change that in just a moment. Okay, So we'll, we'll also perhaps need to do is make sure that we have some height for the mobile nav container as well. So currently there has nothing. So we'll give it all at the same height, say 100 vh. Now let us now turn into a flexbox, which we can then put as vertical. Ok, So at the moment you can see this person's kind of elongated across the side. If it does that for you today. Yeah, I need to put it into a div. Just click on center and it will align. And that will do that in terms of justifying. We actually want this at the top and we don't want it quite in the middle, but we will just apply it perhaps a little bit of padding just so it's not quite at the top and not quite in the middle. A pretty good on tablet. I actually think there's text might be very small. So for this view, I'm going to make it a bit larger and it'll actually look fine on smaller ones as well. So probably keep it the same would have we end up doing. So. Let's have a look rather than Yeah, I think rather than where it currently is, who would just change it? So rather than 14, maybe we'll try 20. And that might be a bit excessive, actually strongly 18. Yeah, that looks pretty good. And if we want to change the spacing, we candy, maybe just a touch every 25. Okay, so now let's have a look at this. So if we click it, it goes all the way down Islamic and it's in the center. Now the reason I didn't actually alter this in terms of the nav menu itself. The reason I put these within a div, you can't really easily alter the nav menu that comes a standard. So you are much better off putting these into a div and then styling however you want. Okay, So hopefully that looks good TA, and I think if we go down the different V's a day that needs change anything actually, maybe for this one, we could maybe make the text a touch smaller perhaps. Although actually that looks fine. So I don't think we will bother say that there's a pretty good on all of them. Okay, so that's it for the Mobile Nav Menu. Next up, we need to try and make sure all the rest of the elements on the page or aligning correctly on mobile. 32. CLASS PROJECT: MOBILE RESPONSIVE: Again, so we can ask them making our website and mobile responsive. So let's start with our tablet view and let's have a quick scroll through just to see how everything looks. So you can kind of see that it's starting to get a little bit scrunched up at this point. So I think what we'll need to do is accept the fact that it may need to be changed onto one columns as well. I think again today I think the hero section is fine. The text size. I think you could argue maybe it could be a little bit smaller. Maybe we'll try 40 instead. That looks a k. This point, we're now going to start going into a different line. Say, maybe we should restrict the width of that as well. If we're going to do that. The maximum width currently is set to 700. Let's try 509. Definitely not six. Yeah, six is fine. I can live with that. So we have a quick look at that. Yeah, that looks a lot better. Again. So that's all we'll do for the hair section for now. It's fine. In terms of the background image as luck would have, it is sort of automatically positioned so that the text has a lot of whitespace behind Asia's what we want. If we wanted to change the background image, we could, if we go over here to our background settings here, we could change the positioning of it to get more of the guy in view. When we do that, we kind of have the texts over the light bulb section here and it's not quite as clear. So whilst it would be nice to have that image in there, there's no real way we can do that without it being over some parts of the image that we don't want. So I think what we'll do is we'll just leave it as it was, just because that's easy to read and I still think this image looks good. So moving down from there, the lego section, I still think it looks fine for now. We're going to have an interesting time with that later on because we only have five logos in an ideal world, we should have made the six so that when we make this under two rows would have three of each. So we may have to look at this. Sometimes what people do is get rid of that entirely on mobile and just have it there. Or they have like a slider so you can slide between all of them. So we'll effects on that later. But for now I think would do is make this. So it's all on one column. So if we highlight the grid, what we're going to do is just delete a column and it will make a guarantee, make it vertical. And then what I think would be just for this section is give this a quite a bit more padding. So we'll have a 100 pixels here. And let's have a look at this. And yeah, I think that looks better having a bit more spacing between those two items. In terms of the spacing, it starts to look a bit strange with this title going so far across. And also the text here is quite, quite far across here. It looks a bit odd. So I think I'm going to do is actually just restrict this slide and give a maximum width perhaps to this entire grid. So rather than individual parts, we're going to restrict the entire grade in terms of its width. So the combo class needed for this, this is only going to affect tablet view downwards. So let's try. First of all, let's try seven hundreds. That looks and immediately, that looks a lot better. If we scroll through that. It's just restricting the text that a little bit. And yeah, I'm pretty happy with that. I think maybe. Maybe there's title could do with being restricted on it's a100. So let's do that. So we will create a combo class for this. And what we'll do. In fact, now we don't need to create a combo class. It will only affect it on mobile view. So let's do that. Let's do a, a maximum width of 600. Let's try 500. Okay, That looks better. And just to prove that when you go into this line, it doesn't have that maximum width. So there's no need to create a combo class for that is only going to affect it when you're on this view. So that looks fine. Now obviously, because this is an H2 is going to do it for every H2 on mobile. So if you didn't want that, you would have had to make a combo class, but because that's going to be fine in this case, That's why I've done that. So that is worth bearing in mind though. That means on mobile or tablet view, I should say, is going to have that restriction there. So if you don't want that, you would have to have made a combo class. Okay, so that now all looks completely fine. Going down here we have the same kind of thing, or we're going to need to do is to get this onto one column. So cascades downwards and that's going to be super simple. Same sort of thing again, because with these the grid, if you use highlight the grid, all you need to do is get rid of a column and it will automatically drop that down like this. Okay, so again, that looks pretty good. Although we do have an issue here, because we now have two images next to each other is what we actually want is to have this image on top of this text. So again, super simple because of these, the grid, if you highlight either the grid container which contains the image or the container which contains the text. You can then change the order in which they are placed. So all you'd have to do is click on the first or last depending on which one you've selected. Because we selected this one, we want this one to be first or on top. So what we'll do now is quite simply make sure the grid container selected not the image itself. And then click on first and you see it's now jump to the top, which has much better. So it's super, super simple. All I do is just create a little bit of spacing between the text and the image. And because this is a class a or have done that for each of them. So there we go with that. That looks fine. I think all say for this one, we're going to just apply a maximum width on the H3. Again, you may have to create a combo class if you didn't want this to be the case for every h3 on throughout your website on tablet books, since this is fine for a use case, we're going to do that. So we'll do a maximum width of what was the one we did for pair. So that was 500 less D the same. And see how that looks. Yeah, that's fine. Okay, So that's pretty much our tablet view sorted. I think at this stage we don't need to worry about changing the fossa. Everything still looks fine in this sort of order. So next up then we have mobile landscape. So let's go to the top. And at this stage, and the text for the hero is, is kind of acceptable. And actually, I mean, maybe it should be a fraction smaller. So let's do that. Let's try. Let's try 30. And yeah, that looks okay. Well, just the height a little bit in terms of the text height. And now I reckon that looks pretty much okay. So that's fine. And we could make this a fraction smaller to think we will. So rather than 20, Let's try maybe 17. But now we've got a widow when we do that. So widow is when one word at the end and has aligned to itself, which we don't want that. And these were just the line height as well. So I think we'll do then is make it slightly larger because of that reason. And let's have a quick look at that. Yeah, that's okay. I mean, as we go into the different sizes again, into the first-line anyway, so yeah, I can live with that. Ak say that looks fine. Again, background position to the images. Okay. The logo section is borderline here. It's almost acceptable but almost not go into the smallest size. I think since we're still largely okay. I think I'm tempted to actually keep it as it is for now. Then maybe on mobile we will have to change it. But you can see everything else though is perfectly fine. Everything looks as it should do. Because we've already done that for V tableview says nothing really to change here. And that's all good. So off-camera it looks as though I've already changed this by accident. So let's pop this back how it was. So before I change that, it would've looked like this. So on your screen it should look like this. So you can see that it's kind of crunching up together, which obviously we don't want. So what we need today is make sure the foot or flex container is selected. And all we have to do is click on vertical scans. So as l 4s, and now we have a, again going down vertical, which is what we want. If you wanted to make this a centralized we could, I'm actually going to leave this as it is finance. I think it looks fine where this, but again, you could make this centered if you wanted to. Okay, so we're very, very nearly there. So, uh, we have to do now is go to a mobile view and then make any alterations that we need. So I do think actually the text size, again, there's so many devices with different widths here. You're not going to get it perfect for every single one. So I would say getting this onto two lines is probably not realistic for every device. So I think we're kind of accept what this is and keep it as it is. Maybe it, maybe we'll try a fraction smaller. If we did say 25, and it looks at a fraction better, Let's just change the height of that. So then for some devices it will be on two lines and for some it will be on three. Yeah, I think that's fine. And we'll certainly make this a little bit smaller now as well. Let's do that. Okay, so that looks okay, I think. Okay, so moving on from there. So again, we have this image is kind of fine. I think where it is, there's no point bringing this further and so that's me. Throw it down for me now. Okay? So the grids section here is an interesting one. So obviously this is way too small. So we have to decide what we're going to do. Are we going to just get rid of some columns? So it starts going on two different lines. The only issue we have here, of course, is that we have a gap. So then the thing is filling this part here. Now that's not ideal, I don't think, but I think just for this video, that's going to be fine. Another thing you could do is just get rid of one of the logos. So it takes up just two columns. So just to show you what that would be if he wants to do that, we could just click Hide the element. And then if we delete another column, you'll see now it takes up just, just T column and t raise. In a perfect world would have six ligase, which would mean we could have three of each. But obviously for the moment we don't. So we could just get rid of one to sacrifice one for now. Or if maybe we're doing this again and we could have made a slider for this. So we could have slid through, which, you know, the chances are if people were going on this page on a mobile, they probably wouldn't take the time to slide through it anyway, but that's just one way of perhaps having all of them on one line. But just for now I think we're going to keep it like this for the moment. And as we go down, I think we may want to use that just the text size of ves, maybe just slightly. So rather than 28 and 24. And yeah, I think that looks a little bit better like that. Effect will also change. So if that's an H2 and that's 24, this will need to be smaller than x. Let's try 20 for that. And yet, I think that looks better. Same for Vance. They both h3, they are. So that should also be 20 as well. Let's change that. That's much better. Okay? So we're actually looking pretty much okay for the rest of it there I think. And the text links, sorry, the, the, the tick headings maybe that they could be a fraction smaller, maybe, maybe just a tiny bit smaller as maybe we'll try 16 for that. Yeah. Okay. That looks better. And then obviously the footer is as it was, So that's pretty much everything done. So you can see because we've used grids in a really clever way, we've not needed to do all that much for every single one. It didn't take us that long to get the entire page completely responsive. So again, hopefully that all made sense. And again, a lot of this is personal preference. Yeah, So to play around with this to what you see fit, There's an argument of making this image a bit smaller because this one is smaller compared to the other two. This is in part due to the fact the aspect ratio of S is slightly different, but you know, Let's actually just make this one slightly larger. Just so it's a bit more in keeping. So we might not go the full width like this one is, but at least a little bit bigger. And we'll see how that looks going down. So yeah, that actually is better. My VO2. Yeah. Okay. I actually prefer that. Okay. So we're pretty much there with this landing page built. There's just one more thing I wanted to day before we sort of finish this. And I actually want to change the height of the background image on desktop may say, obviously this is not my power responsive, but this is just one thing I noticed is I've actually switched to a PC. So the rest of the videos, I've been on a MacBook, but you can see on PC with a larger screen that there's quite a lot of whitespace here, and maybe we don't actually need quite the full size. So what I think we're going to do is rather than have a height of 100 vh, I'm going to make it 75. And this is going to bring the logos interview. So if we look at this now on Preview, you can see that we have this in view and it just looks a little bit less empty having this des, I don't think we actually needed to have that completely full high. So again, whether you want to do that I know is completely up to you, but it's just something I thought actually, I'm going to I'm going to override my own design hair a little bit. And actually I prefer having the leg is on a show right away from the star to the screen. Again. So other than that, we're pretty much there. We're going to make one more video on NES landing page section. And we're going to apply some transitions. 33. CLASS PROJECT: INTERACTIONS: Okay, So if this final video, we're going to be adding some interactions to the page. Now in terms of what we're going to do, I think for now we're going to be what we suddenly this tasteful and add it to literally everything that we have. Just so you can sort of see how we would use interactions. And obviously, when you do this yourself, feel free to use any kind of interaction you want by saying, well, I'm going to do, I'm going to add some sliding in these various different div sections here. So let's start with the, the hair ripple here. So we can't have all of this slide in from the bottom all the same time. If you walked away with the interactions panel and click on element sugar, we're going to have this in scrolling interview. And then we're going to have it as slide. And then we're going to have from the bottom. And the brain enough sex is on the first thing you see when you look at the page. And we will have a slight delay there. I think we'll have the 100 millisecond delay. And if we preview this now, you see it. We kind of use a pair from the bottom, slide up. A case that was pretty good. We're going to do a similar thing with the next two boxes here. And so it's similar to the previous video we did on interactions. We're going to have this column here, sort of slightly, shortly followed by this one. So we need a slightly longer delay for this column here. So first of all, means make sure the grid container left is slightly. So that means all of the different items are going to be part of this interaction, the interaction panel again. And we'll have a scroll into VA. And we'll have it as slide from the bottom. And we're going to have an offset this time of 30 percent. So the reason we're doing this is that when you scroll down the page a while, hate as soon as you get to this point where you're able to scroll in slightly before we start. So that's the whole point of having an offset. And we're going to have a delay of 100 milliseconds. And then for the one on the right, make sure that the Greek container right is now selected. Same kind of thing. We're going to go scrolling interview, are going to have it as a slide. And I will have it from the bottom again. And this will be again same as last time, 50%. But we want this time instead of a 100 millisecond delay, we want, sorry, we went to 100 milliseconds. And this time, this means this will come up first, shortly followed by this one. So if we just preview the page now and then scroll down, we have the first one that comes up, and then these two come one after another. So just to show you that more clearly, our previous like this and a guy, so that's one appeared fresh, only followed by this one. Okay. So we're pretty much there. I think we will leave, leave the call-to-action. The photo library will affect these parts here. So these are all the same class. What we're going to do is apply the animation to this process, great here. But because this is the same class, we're going to get it to apply it to all of them. So this will say it was a little bit of time. So if you go over here again, click on the element trigger will have a scrolling interview. And then we'll have a slide once again, an OB from the bottom. We'll have an offset of 30 percent as usual. And we'll have again, a 100 millisecond delay. And down here on the trigger settings, you can say that we're currently selected here for the element, which means this is animation will only happen on this particular element we have selected. However, if we click on class, you can see now it should suggesting the process grid, which is what all the other ones the code. So now if we do that, is going to apply this animation to all of them. So that should now be all fine. So if we print the whole page, you should now see all of our interactions cake in, say there's, there's three there. Then this one followed by the second one. And the third one is the same thing as well. Okay, So now I've just chosen slide for the purpose of this video. If you want to apply something different, feel free to. It's just a way of getting used to using interactions. However, the sliding in is something that's quite common and it doesn't pay on quite a few different websites. I came pretty much finishes the entire course. There'll be just one more video where we've got tea. And hopefully this all makes sense. And hopefully you have interactions that looks something like this. 34. WEBFLOW TO WORDPRESS: I did mentioned at the start of the course, there is something you can use to convert or Webflow website into a WordPress website. And this is something that's kind of a game changer. So like I mentioned every now and again, you have a certain functionality that Webflow Hong quite achieve as of yet. But let's say in order to do this, you wanted to transfer it to a WordPress website, but wanted to still use Webflow to develop the site. You can do this, okay, so the website you want to have a look at is cooled you densely. And basically what this does is turn your Webflow website into a WordPress theme. So if you go on to the Udacity website, you will find lots of documentation on how to go through this process is relatively straightforward. All you have to do is make sure that you are tagging aspects of your website. Websites have the correct tags so that WordPress can understand it. And pretty much without any coding, you can turn your website website into a WordPress website. No idea. Use this a fair amount myself just because every now and again, again, there'll be some functionality you need which were free, can't do. Or sometimes you just have a client that just call, get out of using Web Press. So this plug-in or code snippet is very useful for this. Let's say you just don't want to be bothered by trying to set this up yourself. They actually do have a service where you pay them. I think it's something like $300. They'll actually create this into a WordPress theme for you anyway, although it's not that difficult. So I would honestly try getting Zika yourself festival is relatively inexpensive. I think the business model they have is like a SAS type thing. So you pay monthly for the service. So if you want to just have one or two websites, you could pay for moving cancel so you're not tied in forever. So this is certainly worth looking at if you want to explore using Webflow as a development tool and then converting it over to WordPress. 35. WOULD YOU LIKE MORE?: Sorry if you've reached this video, it means you're the end of the course. So first of all, well, don't forget in this fall and maybe a case that you will need to watch these videos a few times for everything to thinking. Hopefully I covered all the basics for you. I appreciate it with some things we may be skipped over because there were slightly more advanced. If this course is successful and if you enjoyed it, let me know and I'll make a another course that goes into more in depth analysis on how to use the CMS and how to use more complex interactions. Okay, so I hope it's been useful for you. Thank you for taking the course. I hope you enjoyed it and I'll see you next time.