Webflow Basics | Greg Rog | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (5h 45m)
    • 1. Introduction

      3:31
    • 2. Course Assignment & Source Files

      2:03
    • 3. Designer View

      12:17
    • 4. Settings

      7:39
    • 5. Fonts

      10:39
    • 6. CSS Styles

      10:06
    • 7. Breakpoints

      5:26
    • 8. Layout Basics

      9:18
    • 9. Hero Section

      13:17
    • 10. Hero Styles

      9:13
    • 11. Simple Components

      7:23
    • 12. Button States

      6:04
    • 13. Menu

      9:56
    • 14. Submenu

      13:18
    • 15. Hover State

      11:18
    • 16. Fixed Submenu

      7:31
    • 17. Mobile Menu

      7:14
    • 18. Finished Menu

      11:36
    • 19. Features Section

      15:53
    • 20. Delivery Section

      10:30
    • 21. Standards Section

      8:56
    • 22. Tabs Section

      6:36
    • 23. Responsive Tabs

      6:58
    • 24. Logo Grid

      12:26
    • 25. FAQ Structure

      8:50
    • 26. Animation Basics

      8:40
    • 27. Animation Timing

      6:02
    • 28. Animation Effects

      6:28
    • 29. Animation Easing

      9:26
    • 30. Recent Articles Section

      12:43
    • 31. Contact Form Section

      12:04
    • 32. Font Awesome

      8:55
    • 33. Footer part 1

      12:55
    • 34. Footer part 2

      7:58
    • 35. Custom Animations part 1

      8:10
    • 36. Custom Animations part 2

      7:47
    • 37. Form in Zapier

      5:11
    • 38. Website Publishing

      10:03
    • 39. Thank you

      0:49
17 students are watching this class
  • --
  • 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.

150

Students

--

Projects

About This Class

Webflow is one of the best visual website editors right now. It is a real revolution when it comes to designing and implementing both static and dynamic websites and even ready-made e-commerce systems. With the use of no-code, publishing pages is faster and easier than ever. This Skillshare course introduces you to the world of web design without coding with Webflow, addressing the most important element - layout. In short, you will learn all the techniques that allow you to create static websites in Webflow, from a blank page. This is a great introduction for those of you who have not dealt with Webflow yet, want to establish your foundations, or create your first website!

Things you'll learn in the course:

  • A practical website implementation
  • Create a static one-page site
  • Learn layout tools in Webflow
  • Publish your website on a subdomain
  • Structure and Layout explained
  • From XD to Webflow

Who is this course for

Webflow is a brilliant tool for all willing to start their adventure with creating websites - simple visual interface, extensive possibilities, hosting, SSL, custom domains - all in a few clicks. Therefore, this course is a good starting point for beginners who want to build a website. However, without a solid foundation of HTML and CSS it's pretty difficult to work with Webflow. That is why I strongly recommend that you do at least the basic HTML and CSS course before Webflow courses. Webflow's greatest potential is for those of you who already understand web technology and are able to create websites. In the hands of such people, Webflow is a tool that incredibly speeds up work and delivering new projects to clients. Webflow is also a great tool for UI/UX designers and web developers who can work and deliver projects in a completely new way!

Modern Visual Editor

If you've heard about WYSiWYG - Webflow has practically nothing to do with them. The code generated by Webflow is clean, aesthetic HTML, CSS, JavaScript, and its quality is only determined by how well you know the tool and web technologies. Weblflow allows you to create pages in record time, thanks to the fact that you do not have to write code. Most tasks can be done in visual editor while our website is still based on semantic code and modern standards!

Webflow's Abilities

They are practically endless. Apart from the fact that you can create static pages, you also have the option of preparing dynamic websites based on CMS and even complete E-commerce systems, building them from ready-made components. Webflow, however, differs from "page builders" - we usually start from a blank page, and thus we can implement completely custom layout. Then, with the help of Webflow - publish the finished website, add domain name, hosting and... violla! Your website is live without difficult configuration. In addition your client can edit page directly in the browser with the help of the built-in CMS Editor!

What you'll learn?

In this course, we'll focus on Layout - the basis of effective work in Webflow. This means that we will discuss the semantic elements of the page (HTML) as well as its styling (CSS). You will learn how to use popular CSS Layout constructs such as Grid or Flexbox in Webflow. I will show you how to implement a complete page layout from a blank page, which we previously designed in the Adobe XD course. If you want to learn how I designed the website itself - I refer you to this course. You can rewrite it in advance or in parallel with the Webflow course in front of you.

What's next?

Once you've mastered the basics of Webflow, you'll be able to successfully create static web sites in record time. You will learn everything on construction and styling. So you will be able to go on a further journey with Webflow with the next courses that I'm recording for Skillshare and add dynamic data to your website (in the Advanced course we will expand our site with a blog), as well as the entire E-commerce system (which we will create in a separate course). All three courses complement each other and so that you can get to know even the most advanced features of Webflow!

Meet Your Teacher

Teacher Profile Image

Greg Rog

Always learning

Teacher

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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.

phone

Transcripts

1. Introduction: Welcome to web flow. If you don't know it yet. When flow is a web application, a browser based tool that lets you create and launch websites in no time without coding. If you've ever came across so-called wysiwyg editors and associate them with buggy and junk code. Flow is a completely different league of visual editors. It generates clean and to readable code that can be either hosted with one click or downloaded and tailored to your needs. The great advantage of Web Flow is flexibility. You can work directly on HTML and CSS elements. This way, you can control your layout with pixel precision when flow is another lever for UI and UX designers who now have the power to turn their sketch or FISMA projects into full-fledged websites. This huge advantage of web flow also determines as slightly steeper learning curve than the other editors like weeks or Squarespace. Why? Because you need to know some basics of HTML and CSS to work efficiently in web flow. It goes without saying that if you want to tackle more advanced web design, HTML and CSS is essential. Fortunately, I've created this course to help you better understand all the things we have flow, right from the basics. Web Flow is one of the pioneers of modern no code movement and a revolutionary tool for web design and development. And since front-end is kind of visual creating webpages this way is much more efficient than coding. Combining it with other no code tools such as zap year or integral Mats will also allow you to create projects without a server, but with business logic. This is the direction in which modern web design is heading. Websites created with web flow can be exported and Dan self-hosting. You can also use the web foes hosting plan, allowing you to modify the website on the fly and publish changes with one click. Your clients can also modify them directly in the browser. In addition, when flow has a number of advanced features, including a CMS database structure for dynamic websites and even entire e-commerce system with products and payments. And you will find all of this in upcoming courses. In this course, you will create a complete website in web flow. We will start from a blank canvas and dense structure and style all the elements. In the meantime, you'll learn all the necessary tools for working with HTML and CSS and Web Flow. I'll show you a number of readymade components that will speed up your workflow, will work with CSS. We work with grid and flexbox and create even more advanced animations. And also make our website responsive across number of screens. For a designer like you, web flow will take your layouts to the whole new level. You can now deliver complete projects to your clients. This is by far the easiest way to enter the world of web development, starting with visual editor. On the other hand, web developers can also discover a huge potential in web flow to automate and speed up their work. It's also a great solution for marketing teams that create custom landing pages, as well as for smaller businesses, side projects and maybe future MVPs for startups. This course is the foundation of layout in Web Flow, and we'll let you start a fantastic journey with websites without coding out to see you in the first lessons. 2. Course Assignment & Source Files: Hey, it's great to see you in this first lesson. I'm super excited that you've decided to take MySQL shared cars. And I promise I'll try to give you very practical approach to web flow. And this is also why it's so important that you work along with me in Web Flow and recreate the project that I've created for you in this course. So this is the website we'll be working on throughout the course. And I really encourage you to follow along because this is the best way for you to explore and learn all the features and all the types of Web Flow. I think it's really worth to trust me on this because I've created this website, especially for the course, that beginners like you can learn Web Flow and look Web flows layout from start on a practical example, not by just exploring the greets or flexbox on their own, but just creating a website like this, which is super cool and smooth. It has some interactions, it has great animations. It has different states, as well as custom menu that will create and all the things that will teach you everything about web flows layout. So my idea for the course assignment, and I think the best way to learn as a beginner in Web Flow is just to recreate the website that we have here. I'm also including some sample assets that you can start with. And this is especially xsd file with all the assets and the graphic assets that you can use. But if you want to use some other assets and create a bit different website, but using the same techniques, just please feel free to do it and then submitted as a course project. I'll be really happy to see it and I really can't wait. What you'll do with it. Learning by doing is really the best way to have fun with the process and learn web flow along the way. And this was my core idea for this course. I wanted to create a practical example that you can follow along and just have fun. And I had a lot of fun creating this course and creating this layout. And I hope that you will too. So let me just invite you to the next lessons of the course. I hope to see you there. 3. Designer View: Hi guys and welcome to web flow. We are here on Web Flow.com and we are in the browser. And this is pretty important because workflow is browser-based. It means it doesn't have any native apps that you will download for Mac or PC, you just work straight in the browser. So it's pretty wise to select the browser that will work fast and won't crash web flow all the time. And I've tested them all. I think one of the best browsers to work with, our Chrome for both PC and Mac and Safari if you're using a Mac. So I'll be working chrome throughout the course. And I believe this is a really nice choice. So you should go to Chrome right now and register to web flow on web.com. And once you do it, and from there you can go straight to your dashboard. You can just click on View dashboard. And here it is the single source of truth for all your web flows project, you can create a new project here and they will all list in there. And you can have existing projects that you manage from there and you access them to edit or delete, or you can organize them in little folders. You can click on this icon and create another folder like I did for my previous projects. So it's called stash. You can simply started some projects in the folders also. And if you want to collaborate with others in the web flow, you can do it. And here is my account, but I can also create a team. And I can use Web Flow to create websites with other people that will comment and manage my website and access the designer view so that they can change all the things across the website. Also, there is another feature of web flow for your clients. It's called the editor. And then we'll be able to change where simple CMS, all the things that you have on the website. So this is not the team, this is the editor, I'll be talking about Editor and the next chapters, but here you can basically manage everything and this is pretty extensive. I want to touch those functions and show you the options, but I don't want to go in detail on things that wouldn't be really useful for now. But what I want to show you is showcase and designers that you have here and you can look up for some great resources and projects made in web flow. Also, some learning resources and templates that you can use. Some of them you can clone straight to web flow. You also have forums and you have support. And this is really nice. They have great support or glass or you can simply write the web flow and they will respond well, you also have some notifications and your account settings in the top right. And you can use them to manage your plan and billing and accounts and things like this. But also what I recommend keeping ion is the updates. So when flow is constantly improving their software and there are many updates coming and you know, this might be just a useful thing for your next project. So make sure that you don't miss the updates. And what we're gonna do right now is just create a new project. I'm going to start from scratch and I'm going to show you how to create a complete version of a website in web flow. When you select a new project, you can select from some starting templates and you also have. Some other templates from the Web host library. They do have a marketplace where you can find all the website. If you go to the resources tab on top, you are able to preview all of the templates and maybe buy a template if you want a better quality one. And those both templates purchased templates will also show up in here. So I'm going to start with the blank side preset and just give it a name of juice. This will be the name of our project. And I'm going to create a project. I've selected blank because I don't want anything to disturb us from the learning web flow from scratch. So now we are in the designer's view, this is how it's called. And if you take a look at this left top and I can workflows icon, there's a dashboard is project settings for this project and also the editor. So editor is something else. Editor is not the designer's view that we're in right now. Editor is meant for clients to manage their websites. This is the so-called CMS Web Flow, CMS that will enable them to make some adjustments to the website live in the browser. So we're not going to be working in editor, will be working in designer. So what I like to do now is to just give you a brief overview of the designers window and all the panels that you will find here. We're going to work them in detail and use all the function in practice. And I think it's much better to learn this way, but, but just let's get acquainted with the designer's view. So on top you have this dashboard and project settings. Those are pretty important and you'll be adjusting the settings once in a while. Then there is a panel with buttons and the first one will let you add the elements. And there are many pre-defined elements like HTML headings and paragraphs and columns and categories that you can use. And those will basically form the structure of your website. Then you have layouts and those are readymade components from websites. So there is more than one element in them, like buttons and sections. You can use them straight away. And finally, symbols. So you can, for example, create a button and use it as a symbol so that it will be reusable across all your website. And it will change with the master symbol definition. Along all the instances that it appears on, it's pretty similar to components in the design tools like XD or FISMA or sketch. But I'm going to talk about symbols a bit later. Then you have Navigator and navigator as the panel will, you'll find all the structure of your document. And this is something like the Layers panel in the design tools so I can Photoshop or XD. And I really hope that you know, HTML or CSS basics because there you will have all the HTML elements and all the structures that you can modify and basically workflows just creating the structure for you. Next up we have Pages section and here you have all the pages for your websites like homepage and about us page and contact page. And you also have some pages from Web Flow automatically generated, but you can add your own pages as you go along, and you can also organize them in folders. Here we have static pages and utility pages. And there you have password protected page and 404 that were automatically generated. But you can also have more pages here and also you have this e-commerce pages and CMS collection pages. So basically CMS collection, which is the next icon, is a database inside of web flow. So you can not only create static websites and web flow, but you can create entire blocks or other websites with dynamic content. It means that you can create some fields in a database. You can create your own database and you can add the items and they can appear on your website, for example, as a next blog post. This is a bit more advanced topic and we'll be talking about this in the next courses. And the same applies to e-commerce module which is there. So you can basically turn any website that you create in web flow into a fully functional, Automated e-commerce system that let you sell to your clients, connect stripe account or Paypal account to collect payments, create an inventory of products and categories. And this is really, really powerful. I'm not gonna talk about it in this course because I've created a separate course on e-commerce only and we're going to create a nice website there. Next we have assets. So every website needed an asset like an image or an SVG logo or something like this. And it will all go into this assets panel. You can drop and drag images here or you can just upload the assets. Finally, we have settings. Those are settings for this search results and those are pretty different ones that you have for your entire page that I've shown you. And you can adjust some search results if you are using in page search, as well as create some backups. So backups are precooled. There are automatically made by web flow every few minutes. You can also create saved backup if you press Command Shift S, And by the way, if I say command and you are using PC, just press Control instead. So if you press Command Shift as you can, save your own backup at any stage of creation of your website and you can give it a description and a name. And this way you can always go back to the safe backup that you have. If you don't and you mess around, you can also recreate a backup from web, those library of backups. And as I said, it's going to back up your website every few minutes. Okay, now let's take a look at the top bar of web flow. Here you have the information about the page that we're working on. We can click and change this page. And also we have this little icon that will let you toggle the preview mode. And this is how your website looks in the browser. You don't have to publish your website each time to see the result in the browser. You can just toggle the preview and you can see how it basically looks for the user. And also this preview mode has a little icon to the left that will let you go into this super minimal mode. And that will hide everything. And you can see your website just like your user sees it and preview all the interactions and stuff like this. Here you have breakpoints, pretty important stuff. You can design your tablet view and mobile view, but you can also go up and you can create another breakpoint for some higher resolutions. We're going to be talking about breakpoints a lot throughout the course and we'll be creating responsive versions of our website. We're going to start from this base breakpoint with an asterix. And it means that all the changes that you make in the desktop breakpoint will inherit to the other breakpoints. Now we have undo and redo, and we also have information about the changes are saved to this backup, automatic backup of web flow. Then you have an option to export the code when you're finished with your website, you can basically export HTML, CSS and JS, and zip it and download it to your desktop. It has one disadvantage. I'm going to tell it, I thought about it in a second. And there you have sharing her project. You can either invite a collaborator or just shared a read-only version of your project. And here you can publish so you can make it available for the public. You can do it on the web, those domain, sub-domain, or you can use a hosting plan and just put it on your custom domain that you'll buy. And this is basically great and has one huge advantage. So you can basically stay in the web environment and in the designer. When you export the code and you download the zip file and then you put it on your hosting, then there's no way back to web flow. You cannot upload your existing code into web flow. So using their hosting is the only way that you can make sure that you can edit and user UFO CMS and you can edit the website. Then you have the right hand pane and some tops in there. And those are basically contextual for what you select on the canvas. If you select the body element, you'll have all the options regarding this body element in there. So the first is Styles, and you have all the CSS styling in there, such as colors and paddings, margins, basically all the important CSS properties are there. Then you have settings, not much going on for body settings right now, but you have some components or readymade things. Dot com with web flow, you have different options to adjust here. Also style manager, it will let you control all the classes and styles applied to them in CSS. And the last atop is interactions here. Finally, you can create some cool animations within web flow, both on elements and regarding the whole page, will work with animations and it's really easy and pretty cool to create them in web flow. And here we are bottom left. There you have a view options you can hide or show some outlines and we're gonna talk about it later. And the last thing that you'll see as the bottom bar, and here you have the structure of HTML. So basically you see all the nodes here, all the HTML nested children dot you can navigate through using this bottom panel. So yeah, that's it for the overview of designer. Now let's go to project settings, and we're going to talk about those settings in next lesson. 4. Settings: Hi guys and welcome to the next lesson. So we're exactly where we ended up in the last lesson. And I'd like to discuss some settings for our projects. So I'm not gonna go into detail of things that we don't really need right now. But I want to give you an overview of the settings and the first step is general. So in this section, the important thing is the domain, and this is the domain under which we are going to publish our website right now is some sub-domain on web flows, IO, website and we can change it, we can change to whatever we want unless it's already taken by someone else. So that's basically a temporary address from Web Flow. And later on we can plug-in our own domain. But for now it's enough. We're going to stick with this sub-domain and then we're going to upload some icons. We need two icons to show up, both in the tops of the browser and for example, as an icon for saved and bookmarked website. And this is the web clip. We have two sizes, party, Dubai 32 and 256K P256 pixels. I've already created those icons, so I just upload them. And then you have the time zone and just set it to the proper time where you are located, as important, especially for CMS. Then you have website passwords so you can turn it on so that no one can see your website on web foes domain, and then you have workflows branding. You can basically turn off the branding. This is a little badge that will display in the bottom right, and it's off by default. But if you like Web Flow Anti wanted to give it some credits, you can obviously turn on the batch, then you have another tab, which is pretty important. You have hosting. And it means that you can host your website created with the designer. Web flow directly on web servers. And those are pretty good. You basically pay for, for the plan that you select. There are many plans like basic and CMS and business depending on your needs. For the static sites you're going to use basic plan for the ones that use dynamic data and CMS functionality that we'll discuss in the latter course, you're going to select CMS. And also you have business plan which will eventually scale with your website. So you have a lot more traffic coming through a website with this business plan. Also, you can host your website of web flow so you don't really have to use the bands. You can simply export HTML and CSS and hosted by yourself on your server. And that might be cheaper, but there's one huge disadvantage with this solution. When you download something from web flow, you cannot upload it back. So if you make any changes to the website outside of web flow, you cannot import the HTML and CSS. You can, You can only export the code and then hosted by yourself. So yeah, it depends on your needs. We're going to talk about those hosting plans a bit later. There's also e-commerce site plans and we're not gonna make e-commerce website right now. So I'm not going to explain them in detail, but basically, if you create an e-commerce website inside web flow. You're going to host it under some a bit more expensive plans which are under e-commerce and they start from 29, you have a blast 74. Basically, it boils down to how much in transactions you process per year. And also if you go for plus and advanced, you have 0% transaction fee from web flow. So to sum up, you have this website plants which come with Web Flow. One great advantage is that you can publish directly from designer. But also what you can do is you can download the HTML and CSS and buy your own hosting and host those files there. Then you have the editor, which is available only for a web hosting plans where you can add collaborators such as your client, who'll be able to change anything on your website, just in the browser, then you have billing. And what's pretty interesting here is client billing. Apart from your invoices, you can invoice your client directly via web flow and you can even set the amount that you're gonna collect each month. Then you have search engine optimization, which is pretty important. You can disable indexing of this sub-domain. So basically it's going to be invisible for Google Boat. And yeah, I, by default, it's turned off. So the website won't be indexed by Google and it's good because it's still in progress. And once I'm going to add the hosting panel, so my own domain, I'm going to turn it on. Then you have all the things connected to SEO. I'm going to talk about this in the next course. You can generate automatically the robots file the sitemap, or you can even customize or other custom sitemap for Google, those are all pretty important options, but we'll focus on them later when we publish our site. Then you have Google Search Console that you can automatically link to your website. And it's also very useful. It will give you all the information about the benchmarks and the indexing state of your website. One of the next courses I'm going to show you how to do it. It's super easy. It's just CCS copying and pasting some codes from Google. So, yeah, but it's really worth noting that Web Flow is able to do it like to verify our website, like out of the box and all the options are there. So it's really SEO friendly. You don't have to worry about the search engine optimization. You just gonna follow along some tips about Mehta and titles and descriptions that you can find in this article. But also, I'm going to explain it in more detail in one of the next two lessons. Okay, let's proceed to the next stop. Those are forms. You can have multiple forms on your website and if you have workflows hosting, they will work out of the box. So they will send emails and conformations to you. You can have contact forms or for example, a sign-up forms for a newsletter. And then you have a section for forms notifications. You can you can decide from who this form is going to be sent, from, what address, what's going to appear in the subject line, reply to address, and also an email template that you can set for a notification of a new received form submission. And you can count the submissions. Also, you can turn on recapture for some, but they're optimization for boats and so your forms won't be spammed. And what do you basically need is obtained the key from Google services. And I think it's all that you have to know about it for now. So let's switch to the next step. Actually, I'm going to skip fonts because we're going to talk about installing our own funds for the website in the next lesson. But for backups, just remember that web flow automatically saves your changes in designer. But if you want to make a snapshot of what you create, I'm gonna show it later in designer. You just press Command Shift plus S and you give it a name. In the integration stab, you have all the codes that you can implement like Google Analytics, Google Optimize, or Google Maps. We're going to do it later. It's pretty easy. And also custom code you can add to all of your websites. So you have header and footer code that you can add. You can inject some meta tags, you can add some scripts or custom CSS. What's important for now is that this custom code will work across all the pages of your website. And if you want to create a code for a specific website, you're gonna do it in designer. I'm going to show you how later. Now let's go to fonts and I'm going to explain them in the next lesson. 5. Fonts: Hi guys and welcome to the next lesson. We are end the font stuff. And from here we can add whatever font we need from Google phones, Adobe phones, or even our custom font that we're going to create bar by ourself. But right now let's go to the designer and let's see what kind of funds workflow offers out of the box that lets click on the canvas to select the body. And then in the right-hand side we can select the font. So the list is unfortunately pretty short. So in order to add fonts that click on the top position, we are now back in this font stub. And basically how it works is we can add three types of fonts. We cannot Google fonts, and that's pretty extensive library of over 1000 forms that you can explore on Google Fonts website. And you can select them straight away from here. And also you can add. The second option is adding Adobe phones. If you have Adobe Creative Cloud account or you have Adobe fonts account, you can generate on the settings, in the settings of Adobe fonts, you can generate the API token, the account page. You can just paste it in here and then use the fonts that you have in your collections in Adobe fonts. And finally, the third option is adding your custom found. This means that you're going to create this font or downloaded on the websites such as font square l.com. And then you're going to upload your own font files. But this is a bit risky because most of the font licenses, they don't really allow you to create and use those funds for website purposes on websites. So this might be tricky. I recommend you to read the fonts license before you download it or converted via font Squirrel. But you can always do so and then you have the right license. You can upload the WO IFF file for example. But for now for our project we're going to use Google phones and I'm gonna install the family, and this is dm sounds and also also the display we're going to use that start from DM sounds. We're going to select this first font to import. And now we have to like some variants that we want to include on our website. So we have regular Italy IQ, and then we have different bold styles. I'm going to select them all, but it's pretty important to just have in mind those fonts that you use in the project. Because otherwise if you select them all, basically they can overload our website a bit and it might load a bit slower than if you need some specific, for example, that in extended fonts for some specific languages, you can select it. I'm going to just add the m science. And later on I can just read it. And if I decide on whatever standards I need a glass of this, I've already imported. I can delete it and I can add it once more. For now, let's select the other font, which is the series display. And I'm going to select both regular ends, italic, and at this font to our project. That's all we have to do in order to use some custom phones. And now I can switch back to Designer. Now let's change the font for our entire website by changing it in the body tag and to make sure that the body tag is selected, let's go to navigator and now let's make sure that this is the body tag is selected in blue. Now let's go to the style tab to the right hand side and select from typography, select the font. And now we can change the font for our project, for the entire body of our page. And to the M Sans Serif display that appear right here. Now in this course, I assume that you already have some basic knowledge, at least basic knowledge from HTML and CSS. So I'm going to show you how it works and how it transits into web flow. So what you can notice here is font is in orange color. And it means that distance for this particular element, for the body element are inherited from, and it says body all pages. So this is kind of a special CSS class that's applied to all of the bodies of our websites. And it's predefined. That's why this is in pink all pages. And that's why the font is highlighted in orange. If you want to create an override this style, you can obviously do so. But in order to do it, you will have to create another class, another CSS class that will override this orange font setting. And let me remind you that we have different pages on our website. So we have home, we have password, and we can obviously add and create new pages. But the CSS styles and the classes are in one file and they apply to all of your pages. It means that if you create another CSS class and you can do so by just creating this weirdly named glass over here. And if you create this class, it's gonna like all of the pages are going to have this class. And you can access this class and apply the styles that are connected to this glass to any of the objects. So you have some special classes as well as this body oh, pages, which is the class that styles all of the bodies. And also you have all of the H 1s and all of the lists and they will be in being. So in order to override this body oh, pages, you can create another, you can add and create another class. And you don't even have to do it on your own because web flow will generate a class automatically once you apply some changes to the styling, for example, if you select the body and you decide to change topography, let's take a look at the font right now, it turned to blue. And this basically means that, OK, I've created another class, and let's take a look at the selector. There is a new class added. It's name is bolded because it's inherited from the HTML element. And for this specific class, for the Body class, you can alter the typography. So if I change the typography to the M sounds, for example, I would then have to add this Body class to all of the pages. And then it will be DM sons. I can obviously selected and change the name and create another class with a weird name. And this means that every time I create a page, I would have to add this glass to the body element in order to my phone to be DM science. And I don't really want this. So what I can do, I can remove this class, click on this little R0 and remove this class. And I want to actually change the font for this body, all pages. And this is the specific selector for HTML tag. How to change this styling for body old pages, it's pretty easy if you go to the selector and you just click. You have HTML tag selector here. Also, what you have here is the existing classes. And I've created this weirdly named class that I just want to get rid off right now. It's pretty useless. And I've removed it from the body element, but it was previously created. So it's existing classes. So I can go to the third tab right now to the style manager. And I have clean up. I can click clean up and this will let me remove all of the CSS classes that are not being used on my website. Now, I can select both the old pages and now the font turned blue. It means that I'm editing this property, four entire HTML tags for all pages. I'm going to change it into our desired font. We're going to now change it to BAM sons, and we're going to adjust and tweak some settings for typography. So you have the font size that we're going to change to 18. And also I'm gonna change it to 700 bolt the variant of the font and the height, line-height. I'm gonna change it to 24. And the default color, I have it. I have the hex code that I can pace right now and press return. I'm going to use this color for all of the basic All Pages body fonts. Now if you go to add elements and you decide to add any of the elements such as paragraph. And I can just drag and drop it into our canvas. You'll see that the paragraph is by default styled with this DM sounds 700 bolt. And there is no selector, no special selector that I had had to use because it inherits the body all pages HTML tag selector. So this is pretty neat because now if I add some pages, I can go to the Create New Page or I can go to 404 password page. And the default font for the body tag will be always the one that I've said. And what I can do if I want to change it, I can put some classes on top of it and obviously adjust the settings. Okay, so now this will work for all of our pages. The font will be set accordingly. Now, what I can do is delete this paragraph and use this very same concept to change the body of our old pages. If I select the body, you'll see that in the background sections of CSS styles pane. The background is not in orange, so basically it has not been set in this HTML tag class. So what I need to do is I need to set it for this class if I instead select and just change it to whatever color, I wish. You see that I once more created the Body class and I don't really want this, I don't want this to be in blue because it would mean that I have to apply this body glass to whatever page I create. So for example, if I go to 404, in order to change the body color, I'd need to apply this Body class. I don't want this. Instead, what I want to do is to set this background property for all of my pages. So I'm going to remove this class once more and I'm gonna make sure that I select body all pages. So HTML tag for the old pages. And now let's set this CSS property to whatever color I want. It will now turn blue because this is for the proper class. But if I go to the body, for example, for the 404 page, you'll see that the boy, oh, I need to delete this class that I've said. Ok, and now it's in orange and it inherits the values from the body, all pages stack. So now you know the basic concept I can go to style manager and clean up the status. Once again, go back to our home page and we can proceed to the next lesson. 6. CSS Styles: Hi there and welcome to the next lesson. Now, it's going to be a little bit theoretical slash boring, but I hope that you will survive. And I really think that this topic is pretty important in web flow, especially for beginners. And it's relatively easy to mess things up with web flow in terms of classes and how they apply different CSS styling and properties to objects and if you mess things up, so if you manipulate the properties without any further understanding of classes and how web applies, glasses, how, how it treats them. It's easy to mess things up. And later on you will have hard times recovering and just cleaning up the mess that you've done. Alright, so we're not going to design our website just yet, but I'm going to show you on a few simple examples, how classes works and how you can apply a new classes and also combo classes, two elements. So let's start with adding simple element to our canvas. I'm going to add a paragraph. So just drag and drop a paragraph or click on a paragraph so that it can be added. Now, I've selected the body, and as you can see, body inherits some values for the font, weight, size, and color. And if we switch to paragraph, it also inherits values from preexisting classes. If I click inside the selector, you'll see that we have this all paragraphs class. This is an HTML tag that styles all of the paragraphs on our websites. And some of the CSS properties are already inherited from this all paragraphs. If you take a look at spacing, you have margin-bottom sets to ten pixels. And this is indeed inherited from all paragraphs. And you also have properties in white. It basically means that no class affects those properties. They haven't been changed. So you have orange color for values that are inherited in those values might be inherited from different classes. Here you have because the classes cascade, you can have multiple classes that just have influence on this particular element. And the values that are inherited are in orange, then you have white. And those wide values are just basically untouched. They haven't been changed by any of the classes. And you also have blue color. And the blue basically means that the value has changed, but it's not inherited. It's changed directly from the class that is applied to this very HTML objects selected in the navigator. So now I've changed padding to ten. And you can see that web flow out automatically created this paragraph class. It took the name from the paragraph that's navigator, but I can change it into my power, for example. And now some values are inherited, but somebody's our sets directly to this class. And padding top is the only CSS volume set to my para class right now. But what I can do is now I can edit some other values. And if I added values that are already in orange, so inherited, I will adjust them. And now my pyroclastic is adjusting both padding and margin. So those are two CSS properties that this class has influenced on. If I add another paragraph, you see that there is no my parser class, so we have still those inherited values of margin. And being set from o bar graph stack. And you can obviously change it for o paragraphs from here, but make sure that you click in this lecture and select all paragraphs. Now it's Hindu. But this is the class that can be overwritten by this new class that we've created. Because if I start typing and select my para, now, I've applied this glass to the newly created bar graph as well. And as you can see, the values for padding and margin has changed. So this class is more important than the HTML class that lies underneath. And now you can see that there is only one my Patroclus applied for this both paragraphs. And if you change any of those values, it will change for both paragraphs. So please remember that in web flow, if you have any class displayed in the selector, it means that the blue values are for this class only. And the orange values might be inherited from some other classes that might not even be visible in the selector. What you can do is you can also add some combo classes. It means that you can add multiple classes to one element if you start typing and create another class, one more, it's now a combo class and you can tweak and adjust the values. And now you are adjusting only this one more class. So I have margin top and padding top set exclusively for this one more class. And I have margin-bottom being inherited from my para, and also I have fond from, inherited from body old tax. And it also works backwards. If I remove those classes, you'll see that I am going back to the original state of this island were only margin bottom is determined by the old paragraphs class, and it has not been overwritten by any of the classes. By the way, if I go to style manager, all of those classes are here. And we have body old pages and all paragraphs. And it means that those have been adjusted on my page. And it doesn't mean it's all the pink classes that are being used by web flow. So if for example, I add any other elements that is pretty styled by web flow. For example, if I put here a list and then in Navigator select domain list element and go to styles. You can see that spacing is inherited from all unordered list. Although those all unordered lists, they don't appear right now in my style manager. Why? Because I have to select this tag and adjust something. So for example, if I change that budding cleft to 20 pixels, they will appear here because I made some adjustments. Now in style manager, you can see two types of classes. I have HTML tag classes in pink, and I cannot modify their names. And I can also see those classes that I've created, those are in blue. I can delete them or I can modify their names. I also can see the combo classes and their dependencies. Here is the one more class that, that is a combo class of my para. And what's pretty important for those combo classes is that they can work only with combination with their parents. So I have to first have my para class in order to apply one more combo class. For all the other classes that don't have this. Specific plus icon next to them. Those are not combo classes. It means that they can be used in any setup and they can be applied to any of the elements from the style Manager. You can also clean up classes that you don't use in your document. So web though, automatically detects the classes that are not being applied to any of the elements on your page. And it will allow you to remove them. You can click on remove. And if you don't really need those glasses, you can just clean up this time manager, as you can see with adjusted some of the HTML tag classes and you cannot remove those. Now, what do you have to do first? For example, if you have some class applied to a Form Block, I had to do it previously. I had to go to the selector and remove this cast from there because if it's applied to any of the elements, it won't be removed in style manager will disc cleanup function. Now please take a look at what happens if I select the only list element in my website and believed it. So in style manager, I no longer have this little icon indicating that I have some unordered list on my website. But also I cannot clean this up. So for the stack element classes, if you want to modify this class, you won't be able to clean it up, but this really doesn't matter. And also we have the indication of the elements that exist on your page. And if you don't have the icon, just know that there are no unordered lists. So this class doesn't really make any adjustments to your website. So now you know that most of the building blocks of your websites, such as paragraphs, they already have some predefined styles as an HTML tag. The same happens for links, but if you select the old links class, you can click on this little triangle next to the selector. And now you have something that's called the states. You can now select the state, for example, hover or breast or focused. And you can see that this is marked in green. And now we are in the hover state for this specific link that we've created, you can see that some values are inherited, but you can apply some other values and adjustments for this hover state alone. And so this is a CSS pseudo-class that you can adjust right now being in this hover state. And those are basically all of the colors that you'll see here and all of the important things that you need to remember for now. The most important thing you need to take into consideration is before you modify any of the CSS properties, before you tweak the padding, the margins or anything like this. Think about the selector. Think What's in the selector and make sure that you are modifying the correct class. Remember that if you modify a wide value web though, we'll create a new class. If you modify a blue value, it will change the existing class. But this class might be applied to some other elements and they will change accordingly. And finally, if you modify the property with the orange label, just think first whether you want to modify this element only, or you want to first select the All links or all paragraphs in the selector input and then modify and apply those changes to all of the elements of the paragraphs, for example. So that's it for now. See you in the next lesson. 7. Breakpoints: Hi guys and welcome to the next lesson. Now, in this lesson we're going to talk about the layout and it's already been made. So I've created the layout for our one-page side that we are now going to transform into a working website in Web Flow. And how I did that? Well, I designed it in Adobe XD. And if you want to check the whole process and you want to learn how to design a website like this. Go ahead and check the Adobe XD cores. This is a step-by-step process where I designed the landing page and also it's responsive versions. But for now, you don't necessarily needed. You have a file that's ready to open nth, extract the assets if you want. But if you don't have Adobe XD or you don't want to mess up with the project. It's okay because I've also exported the asset so that you can easily import them into web flow. So you will find everything in the Source file. So let's begin with the breakpoints. And what I mean by this is bit different approach than we have in design. So when you have readymade design, you're going to transform it into a web page and you're going to look at the breakpoints so that it works seamlessly on different devices. This is pretty important. You want your website to look good on tablet. You want your website to look really great on mobile because nowadays most of traffic for some websites already comes from mobile. So you want to make sure that you have all the different versions in the design file. So I already have it. I have the desktop version and also responsive versions. The operation is 1366. And if you take a look at this breakpoint is main breakpoint and it's super important in Web Flow, little asterisks, and we're going to start our design from here. Currently it's 1773 pixels wide, and this is just because my screen allows it to be 1773, but I can change it to 1366, just like in our layout. And I can click this handle to the right-hand side and I can change this resolution and you can see it moving. And also you have this little dots and they kind of give you an idea of what the device might be. So there is MacBook Pro and my book airs. But what's important is that handle will let you resize the layout only within the breakpoint that you've already selected. So if you want to go to mobile, you won't be able to scale from here. You'd have to click on a little icon of mobile device and then you go from here. So our layout is designed in 1366 pixels. It's 1366 pixels wide. And what I do is I tried to be as close to 1366 at the beginning of designing as possible. But you have to keep in mind a few things. For example, we're going to start with this desktop view, but we also have designed a tablet view, both portrait and landscape as well as we have the phone view. So we have the designs and we're going to start right there. The web flow. We have to start from this breakpoint, it has this little asterisks. And then everything from this desktop you will be inherited to the right-hand side, to all the breakpoints to derive. So for example, tablet and also mobile portrait and desktop. If you change something in tablet, then it will be inherited to Mobile, both mobile versions but not to this desktop version, the base version. So, so please keep in mind that you want to stay as long as possible in here. And please note that when I go back to this desktop default view, it expands to the full size again. So in order to keep it close to 1466, I'm going to add another breakpoint, and this is 1440. Now when I go back to desktop, I am at 1439. This is just one pixels smaller than the one that I've created. And this is pretty convenient right now because I have this 1439, which will be the base for me and it's pretty close to 1366. Please also keep in mind that if you change Canva settings manually. So for example, I've entered 800 pixels width, and this is within the reach of the tablet view. It will automatically switch to this tablet breakpoint and you can switch back and forth. But the HTML elements, the main elements that you want to be adding to your website to structure it, you'll be doing this in the desktop view, so this little asterix view. So in web though we always start from this desktop view, but I've added another breakpoint on top so that my desktop view is close to the 1366 signs that I have in the layout. So we can now start designing and in terms of some basic settings such as greets and spacing in this layout. Well, you can enable the layout guide, and I've created that 12-column Layout Guide in XD. And this is pretty similar to what you get in a web flow. You can go to the left-hand side and on the bottom you have different options for the grid view, you can show the greed Guide Overlay. And if you click once more, you can see the columns. And there are 12 columns as well. So you can somehow map the columns from web though, from z to web though. And I kind of well, so if I have like for example, free columns here and six columns here, you can match those free or six columns in wet flow, but also you can take the measurements directly and try to map them as close as possible. We'll be tackling with this issue in the next lesson. See you there. 8. Layout Basics: Hi guys, welcome to the next lesson. Now let's think of how we can basically take the layout from XD and put it into web though. And one of the most important things that we have to work on first is the width of the container, of the main container. Because later on it will let us create the pixel-perfect sizes for all the components from here. If you press command semicolon and XD, you can access the guides and the margins are not that important. Rather, I select the whole, the whole container. And I can see that the width of the container, the width of the website is 1242. And this is the most important thing. So in here, we're going to have a container that's also 1242 pixels wide. And then no matter how wide is my Converse, I'm gonna map exactly what I have in XD. Alright? So, yeah, right now we're going to start from some basic keyword shortcuts. That's pretty important and I've already told you one shortcut now, common semicolon in XD. And please remember, I'm using Mac, but if your own PC, if you're using Windows, it's super easy. When I press Command, you just have to press Control and that's it. So if I say common shift v, u basically press control shift v, And that's it. So what I'm going to teach you right now are some basic shortcuts in web flow. And if you played computer games, you're going to find them similar because everything is mapped to the left-hand side of the keyboard. And you have some pretty important shortcuts that you will use all the time. Now let's learn to most important shortcuts in web flow. Probably. This is a letter a on the keyboard. If you press a and if you press a couple of times, you will switch between the tabs in the ad panel. So a is for adding elements and then Z is for navigator. Navigator is where you put all the elements or the HTML elements or all the layers of your document. And adding things is just for adding those elements, right? So here I am. If I click on the canvas in the navigator, I have one element. This is body element, and I won't talk about what's body element because I assume that you already know HTML and you know the structure of the document. So I click on body element and it's now selected. It's in blue. Now I can press a key on the keyboard so that I'm going to add some elements. And there I have some elements. So for example, I have building blocks for the layout. Those are columns, containers, greets in section. And sometimes they won't have their exact counterpart in HTML, for example, container, there's no such thing in HTML. But if you click on this little question mark, you'll see that this is a div, but this is a beef that is centered in the canvas. And that's why it's a bit different from the div that you'll see in the next section. So what we want to do right now, we want to build the structure of our website. And in this structure, you have basically one, a huge container and many sections. And this is how I design and XD as well. And this is what I am going to map into web flow. This is how you build the structure of website. Basically, we will now to start building the structure so that we just drag elements onto the canvas. And now you can see that I've dragged this section in and it's inside the body tag, I can take another section, I can drag it into the canvas. And some elements can be placed within each other. Some, some cannot. So for example, you cannot put the section inside of the other section. And this is just proper HTML way. So you can put the section below the one that you have. So both of them are now in a body structure. If you don't know HTML that well, I do recommend you take some basic HTML courses, and this will surely make things in web flow a lot easier. So now if you want to take paragraph, you can put a paragraph inside the section. And you can see in the navigator the structure of our document and also paragraph is prefilled with some dummy lorem ipsum. You can just delete elements by pressing backspace or deletes, you can double-click on elements to put them in the elements that are already selected in Navigator. And also you have the special container thing that I've started to talk about. This is just a div, but this is a div that's centered your layout and that's the basic structure that I use for all my website websites. So I first put section, then I put container, then I put content inside. So for example, a paragraph. And now if you switch the different views, you can see that you have different paddings, For example, for mobile and tablet. And this is already, this is the magic of web flow that you already have those properties applied to a container. So this is how we're going to work section container than content inside. Pretty easy, right? And this is the structure that we're going to work for some sections that we're going to translate from z to web. Alright, now we're gonna go section by section. And then when we finish one section, we're gonna go into its mobile view and it's tablet view. And then we're going to adjust the property. So we going to adjust the size of the elements. We're going to adjust the position of the elements. We not going to do everything in first breakpoint that everything in the second one, we're going to gradually transform this layout into mobile version and Desktop and Tablet and so on and so forth. So the most important thing right now is to set the width of this container element. It has to be the width that we have an x0. And that's why we're going to use 1242, but not for with itself, but for maximum width. And why we are putting it in max-width field. That's simply because we are just mapping this size, that 1242 pixel width. But we are putting in as max-width just because we want this width to be fluid in the next breakpoint. So now it doesn't matter how big is the canvas, because it will always be, the content will always be inside of this 1232 container. But basically, this is the container class that was automatically created by web flow. But I want to rename it and let's say that this is content. This is how I structured things usually. So I have section than I have content and its maximum width, it's set to whatever I want. And then I have some paragraphs and images and stuff inside. And that's pretty cool because it means that I have the maximum width which won't break the other breakpoints because its maximum, it can be smaller than that. So in tablet view it's obviously smaller, but it's just adapting to the 100% size of the tablet. And then you have phone, landscape and portrait. And it also works well because its maximum, so it can be small, it can be less than that. Previous lesson I told you that if you change something in tablet break point, it will be inherited to the break points to the right hand side. And if you change something to the far right to the last breakpoint, it won't be inherited to any break points. So I change the property of padding right now and I press optional MAC and out on PC to change left and right simultaneously. It won't be inherited to the other breakpoints. But if I press Command Z to undo and change it in tablet view. So let's say I have 16 pixels here. It will be inherited to the right. So to all mobile views, but not to the left, okay? So it goes from desktop to the right and then from desktop to the left as well. We're going to talk about this later in course, but please keep in mind if you want to change some properties, some CSS properties, or override them, just remember to do it in the biggest breakpoint first, because you can obviously override those values. And now you have it for both mobile that I have this padding set to eight pixels and in tablet I'll have 16. And by the way, if I make some changes to the content class, it doesn't add another class, it doesn't add some extra classes. It's just within the content class that I make these changes, but for different breakpoints, for different screen sizes. And this is thanks to the media queries in web flow. So automatically for those different screen sizes, there are media queries being created. And there are those changes applied only to this screens, to the sizes that I'm currently in. So this is pretty smart, pretty convenient. So also if you want to address bigger screens, not the smaller resolutions, but bigger resolutions, and you want to change the max weight to some bigger width so that you don't have such a big margins, you can obviously do it. So in this bigger view, you can set 1282 or you can go to, let's say 1322. And then you have all the different sizes, all the different max-width for this main element for bigger screens as well. Still, you have the same class, the content class that will hold everything together. So this is how I work, this is how the structure works and this is pretty easy. You have sections than content, and then you put elements inside and then you work on breakpoints simultaneously. We are gonna do it in the next lessons. Thanks for the attention and I'll see you there. 9. Hero Section: Hey there, welcome to the next lesson. And yet it's, it's pretty exciting because we're going to start with the layout now. So let me clean up the paragraph. I'm going to delete it, but we're going to leave this section and content structure. And I'd like to have this title and this hero section. So title and the image. I'm not gonna do the buttons or the menu right now. But I want to show you this caption and then we're gonna do H1 and button and also the image to the right hand side. So let's start with HTML elements. I press a key on the keyboard, and if I press a couple of times, I can go to layouts. So here we have pre-built layouts and we could use hero because it's pretty much what we need. But I want to show you the elements one by one. So let's start slowly. I'm gonna go to elements and now we can probably use different methods to position those elements next to each other. So we could use columns. We could also use, for example, a grid so that we have text on the left and image to the right. And also we can use the standard def block or a container. And then inside we can have CSS flexbox property so that we can position elements to the right and left. And probably this is what I'm going to go with. I'm going to use a standard def block, and I'm always using d-block if this is just for styling. So if this has no context in terms of our website, just for styling. So I'm always using div blocks. If you select, if you drag the block inside the content, it will automatically fill the entire space. If you duplicate it, you can copy and paste just Command C, Command V. They will go like the 2D flux will go one below another. And this is standard HTML because obviously you know that those are block elements. And in the layout section to the right hand side, you can see that the display is set to block. And it means that it will fill up the whole space that it can cover. And also you can change it. You can have display block, you can have inline for inline elements. If I change it, I can position them one next to another, but also I can change it to flexbox or I can change it to greet. So what's the easiest way to position those elements next to each other? I mean, the best way for now I'm going to use flexbox. There are many other ways, but one of them is just selecting the parents so the content, and then I can change the display property for the content to flex, and this will automatically position flex children. So b blocks that are inside of this content element so that I have horizontal flags, books applied and now they are next to each other. I can change the line, I can change how they justify. But I don't necessarily have to do it because now I just need to put some elements inside of those diffs. So for the first div I'm going to have caption and then heading and then a bottom. So if I press a and I go to typography, I have heading, paragraph and text link, and the caption is none of them also, I'm just going to select the textbook. So for any simple text, you'll have those textbooks. Then I have the heading so I can just drag and drop it on wherever I wanted on the canvas. And then I had the button, let me put the button below the heading. And this is the HTML structure that you can see Navigator, you can, you can drag the bottom and you can change the structure. But it will always result in elements appearing before another or after another. You can see that you can easily make changes like so. Also, if you are a navigator, you can navigate with keyboard arrows. If you press the down arrow or, or if you press up arrow, you can go the structure up, structure down. You can reorganize elements. But remember, this is an HTML structure, so things go from top to bottom, and this is how the browser renders elements that you have here in order to select elements and also go up the structure in HTML, you can click on the name to the left-hand side and then you can say to the parent, for example, a section. Also we can just click on the canvas or you can use the breadcrumbs at the bottom if you don't have Navigator next year cursor, so you can select body from here and there you have it so different ways to select the same things. And it's pretty convenient because it lets you work really fast depending on where you are on the screen. Now lets select the second div block and in-built d-block, I'd like to place an image. So let's double-click on the image or just drag and drop it. And here are some settings, so I'm going to choose an image. And you can see that I've gone to the acid spawner. This is the pile where you have all your graphics, images, audio, videos, and stuff like this. You can reorganize the view. So we have greed or list will greet is really nice. I'm gonna stick with the grid. As you can see, there are already two icons that I've imported as fav icons for our websites, so I can select them. I can also go here and select some different files. Even law defines, for example, with animations, this is pre cooling workflow too. And I can upload new files by just clicking upload or better way is just dragging and dropping any image into a section, this app to asset manager section. So here I have my hero is SVG image and this is the exact size that I've exported it from XD. And now it's here. You can see that only property here is the max width. This is for all the images here, they have the mock suite of a 100%. This is pretty cool because they will scale in the smaller sizes. This is solid percent still. So there are, there are responsive to all the images that you insert into web flow are responsive by default. But yeah, we're going to change it anyway. We're going to change how it appears here, but this is pretty nice and we have our first image added to the d-block. Okay, now if you want to change some properties, keep in mind that I'm going to repeat myself because I've already told you that. But if you want to mess around with any of the CSS properties, so let's say we are charging margins. Please take a look at the selector. It's automatically created a div block class for it, and this is not necessarily what we want. Sometimes you can quickly mass up your project with all the classes that are automatically created by web flow. So please remember. That always change this property, CSS properties. After thinking for just a second, whether you want to create a new class or you want to use existing class, you can press Command Return and then set the name for this element for this class, for example, a hero image. And then set the margin. You can, by the way, click and just set the margin to be say 40. So once again, and for the last time, remember to select the element and then press command return, then give it a name, give the class name or select the class or combo class, and then change the CSS properties. By the way, there's a little Bach and web flow here we have d-block, but instead it should say hero image. Sometimes it happens. I don't know why. Probably they'll fix it. But if you give it a class, let's say hero, it should change in a navigator as well. I don't know why it doesn't change for this div blog, but yeah, just leave it for now. Sometimes it happens. Sometimes workflow has this strange bug. But alright, I already told you that it's pretty easy to make a mistake. And right now we have to correct my mistake because I've already made one. So if you select the content, So I've selected the content and I changed the property that CSS properties of the content. I told you that we're gonna use the same structure over and over for all the sections of our website. And that's why I don't want it to be displayed facts. I set it to be display flex. And now when I add another section, and then I add another container inside this section, and I changed the class or Command Return. And then I select with keyboard arrows content. I don't want it to be display flex by default, I want this to be display block, as I said it for the first time. So this is how easy it is to make a mistake. I just change it for the content and I needed a change it back right now. So I set the layout to the content class two b block. But this specific content, I want it to be flex. How to do it? Well, the easiest way is just creating a combo class. So I'm gonna create one class on top of the content, so content will stay the same. It will have always display block as I want it to be for all the sections of my website. But this specific one will have a display settings set to flexbox, right? So let's create a combo classless press Command Return and create a new class. And let's give it a name of a hero, for example, right? So now only content hero class will have this flexbox layout flex property set, and let's do it. Let's double-check if and other content has flexbox. No, it's display set to block because it doesn't have this combo class. Alright, now let's set the alignment of the items. And what we want to do is for the children of flexbox, we want to change the alignment from top to bottom. We want to center this vertically. So let's select this second item and that's it. And now four justify option. So we want to position those elements to the left and right. And we want to leave some kind of padding in between them and to the left hand, to the left and the right hand side. So we can do it with some special options for Justify, And those are spaced around and space between. You have two options here. You could experiment with them and see what's the difference. You have a bit bigger margins or you have no markings at all to the left-hand side and write but yet are pretty similar in this case. So we're going to just leave this space around Option. And please remember also that we have this marking set to 40 as well. We can delete it, we can set it to 0, but in this case, I'm just going to leave 40 pixels margin between text and image. And we're just going to tweak it later on when we have a text ready. So you might wonder why I particularly selected flexbox for those elements. And one of the reasons for flexbox is that when you go to the mobile views, you have some things and Facebook's is pretty cool in terms of just changing the position of elements. And for example, if you go to this bigger mobile view and change the direction from horizontal to vertical, it will set things up both for this bigger screen and the smaller phone screen. And you can also change the position of elements. You can put the image on top. And this is really cool. And with flexbox, You can do it with just one click of a button. Let's take a look at the tablet view here as well. In this view we don't have an image at all. So we probably going to just select the image and make it disappear. One of the smaller resolution, so the 768 or 5-6 eight resolution. And in order to do it, we always go to the biggest break point that we can. Then we select the image and we don't want to delete this image, right? What we want to do instead is select the d-block and set the display to none. And this was simply hide it in this tablet view, but also in mobile portrait and landscape because they are to the right. But this won't basically delete this deep look, we don't want to delete this element entirely because then it won't appear even in desktop view. But now we've just hidden this element from all the views to the right from the doublet. So that's just the way we're going to have it. And also what we need to do according to the layout is I need to center the text at the bottom and also the H1. And we need to center all the elements inside the first def block starting from this tablet view. So 768 resolution. And in order to do so, I'm just going to select the d-block where all the things are, like all the elements that I want Center. And I can do it like there are two ways to do it. So I can change the facts, child element, but also I can go to typography and I can just justify elements from here. Because this will work for buttons as well. This will work for images. Or I can basically change it to display flex. And inside this flexbox I can use justify and center it, but in this case it's easier to change the alignment, that topography, and also it created a class and other class beef block. I need to rename it. So let's click and let's just set the name for it so hero header. And yeah, navigator understands it. So it changed the name while this d-block is still the block. I don't know why. It just it just a little bag of web flow. But yeah, here we have it. We have the default breakpoint and all the other breakpoints. And we can now proceed to the next lesson. 10. Hero Styles: Hey, nice to see you in the next lesson. Now we're going to style some elements inside of web flows. Are we going to style our headings and captions and buttons so that it looks exactly the same as x D. So the way to think about styling is also connected to the values that we're going to use. So basically, we have some measurements that we need to take into account. And those are at least in XD made in pixels. And in this very basic course, we'll also gonna use pixels. But in my more advanced projects, sometimes I translate pixels into ramps or Mz, which are a bit more flexible for a website. But now I want to keep things simple. I don't want to add another layer of abstraction, so let's leave pixels I just copied and pasted the text. And by the way, in the heading, I have some heart returns, but we're going to talk about it later. It's fine for now. And now I'd like to focus on the text itself. I want to set the text family as well as the size and line-height. Those are the most important things. And usually you have something like a style guide or a design system that you use. But again, I want to make things simple here. So in Adobe XD, I'm gonna go to assets and I've created some sort of like simple staggered here and I have character styles already mapped. I can change the view here basically to greet view. So at the displays, the name of the font and also the size, and also the variance. So I have bold 12 points. Actually points will be the same as pixels because I've worked in 1X scale in Z. And now I need to do is select the textbook. I am going to command return and add a name for a class. So we're going to start with a class. And the name of the class is the same as the name of the character style that I have an x0. I just like to keep it that way. There are also many conventions for CSS class naming, but I'd like to keep it simple again for this course. So I just use camelCase and spaces in between the names. So this is just captioning big. Right? Now I change the size to 12 pixels and that line-height to 16 pixels. And that's basically how I have it here. So I have DM sounds 12 pixel bold, and the color of the text. And also the character styling has to be the same. For the header H1, H1. I'm gonna create a new class as well. Let's go on to return and add a class for this heading one. Ono for the heading one, I don't want to add another class. Remember that we have this pre-built classes for all the headings. So instead I'm going to just select all H1 headings. And now you have this predefined styles here you can change the typography so that all the H1 headings will be stabbed in the very specific manner. So let's change the size to, I guess 54 and line-height was 61. That's it. And this is going to apply to all of my headings now that change the font to the MS Serif display and also the font weight. We have to change it to normal. So this is now exactly the same as I have an x D. Also, let's go back to caption big because we need to change the capitalization of the fonts. Let's go to more type options in the progressively section and change option to capitalize. So I never put the all caps in the text field because I can always change it later. You can have this lowercase style. You can capitalize the first letter, all, you can just capitalize all the letters. So now we have the styling, but we still need to work on spacing between those elements. I need to put innovation closer to that heading. And for caption beak, I don't have any spacing applied. And for heading I do have actually this is four, this is inherited from all H1 headings, but it's always easier to change something that you already have. Instead of setting a new volumes, I'm gonna reset the margin top value. And for margin bottom, I'm actually going to leave margin-bottom to be ten pixels for all the H1 headings. In case I need some bigger margins for the buttons, I'm going to add it on top of a button, but let's leave it for now and let's focus on a button. So we have component, it's name is bottom big. And we need to remember some of the properties, the color value, we can obviously copy the hex value from here. We also have 12 pixel corner radius, and we have the text that's set to the Amazons, 18 pixels bold and actually the positioning of the text, it's in the center of a button and it's made with the padding. So if you press option and you hover over the element, you can see that we have 13 pixel padding from each side of the text. And we can apply the same padding to the element that we have in web flow. So it's pretty easy, right? So let's go back to web flow. First, we need to select the button and give it a class name. I'm gonna command's return and named the bottom beak the same as I had in assets in Z. Then I'm going to paste the color value. So let just pace right in like so. Then we have this border radius. You can set it to individual our borders, but also you can set it to all of them at once. So I'm going to do 12 pixel and let's go up to the spacing. I'll have piling here. And let's make it 13 from each of the sides. So I'm going to have 13 putting, By the way, I can do it for all the sides by pressing command and shift. And then I can apply the padding. I think that the properties for the font, so it's dm San 700 bolt and we have signs. 18 are the same as here, right? But I need to copy and paste the text. And also sometimes you can notice that The text looks a bit different in XD and web flow while you have the same properties. And then you have to select maybe a bit different way because it's the way the browser renders fonts, it's a bit different. You can tweak it with CSS properties, but what I need right here is just the text to look similarly bold. And I think that the 700th option for the weight of this text is really good for this particular option. So what we need to do is to change the positioning. We can press option and see that we have around 20 pixels margin between the bottom and H1. And we can do it both ways. So we can add the marking top property and set it to ten pixels to the bottom. Or we can go back to heading and adjust the spacing. And I already told you that it's better to tweak the properties that we already have. But in this case, for a button, we're still going to need some margins to the top and the bottom. So I'm going to use margin for this button and for more advanced projects. Here we have the simple basic corps, but for more, more advanced projects, sometimes you even create special classes for margarines and then you just apply a class instead of a market itself. But here, let's just apply all the, all the things or the CSS styling to the elements that we need. Also, I have this little shadow here and we have property 0686, and then we have 13% opacity of the black color here. So let's apply this border, this box shadow as well. This is in the effects panel. We have box shadow here. Let's click on the plus icon. We can add a shadow. And yeah, we have a type and we also have the angle. So we basically need the shadow outside, but the angle needs to be 180 because you have this angle, this dot on the top. It means it will add the shadow to the top. Instead, we need to add the shadow to the bottom. And this is where the little dot is on the bottom. So we just select the distance and we had six pixel distance and also six pixels blur of this shadow and color was black. But we need to change the opacity, the alpha of this color to 13, and we can just put it in the Alpha Books. Alright, so we press return, we accept the changes and now we also have this little shadow that's below the button. And all the properties that we had in Adobe XD are mapped directly to web flow. We've worked, we've been working on pixel values. I told you that we can eventually go with ramps or amps or some different values. Bod, This is basic course which is going to use values as they are in Adobe XD. So now we have it styled like that, the first part of our section, and we can proceed to the next lesson. I'll see you there. 11. Simple Components: In this lesson, let's talk about components. So in x D we have this assets panel, and here I've defined the bottom component. I can right-click and edit master components from here. So now I go to the definition of the component. This is the very master of the component. And depending on the software, it can have different properties such as states. In Adobe XD, you can define, hover state and disabled and outline. You can create many different states for the components. And once you have the master, you can reuse it in your layout. So is it possible in web flow? Well, yes and no. And by that I mean that web though is even more powerful because you can create components, but also you can just work on CSS classes that are reusable across your website. Well, if you right-click on any of the elements on your Canvas, you can create a component. Previously they call this symbols, but this is the same. So if you create component from here, you just give it a name. And that's the same name that I have in XD. I'd just like to keep it this way. And there you have it. So right now I'm inside the components, so I'm editing master component right now, editing master button. And whatever changes are I apply inside this master definition will be inherited to its instances if you exit this components definition. So let's say double-click outside of the bottom. And now if you selected, you can no longer modifying styles because those modifications are only available if you are inside a master component. You have some settings in here and you can create something that's called overrides and we're going to talk about it in a second. So let's go back to the editing mode of this component. Here you have something that's called the override fields. So basically you can change the styling in here and this will apply to all of the instances. But apart from styling, you also have to have the ability to change, for example, the URL and the tax on the bottom, so that it's different for different instances, so different buttons on your website and how do you do it? Well, you do it with override. So there are certain properties that you can make available to be overwritten by the instances of this components. So the copies of this battle, if you go to the settings, you'll see that you have text link type and URL. And for example, you want to make a unique URL for each of the buttons. You can do it with overrides. All of the components that you create in web flow are stored in one panel so they're easily accessible. You can go to Components panel and then you can reorganize their components. You can edit them from here, or just drag and drop onto your canvas. Now, I've created two instances of the same component. And by the way, take a look what happens if I go to the master definition, to the master component, and then I try to edit the text. So this is not really what we want. If I'd have to add it, I don't know colors. I want callers to be inherited to all of the buttons, but I don't want the instances to inherit the text. This is why we are going to use overrides and I'm going to show you how to override just in a second. But now let's delete this button. And let's, let's figure this out because sometimes you might just want to use a class. So I have this class button below. I have all the properties in here. I have colors, I have, you know, typography. So I can just copy and paste the button and go with it. But having them organizes components is maybe a bit more professional or sometimes, especially if you have bigger structures. And then on top you can create overrides so that you don't mess with the classes. And then you override only the things that you particularly need to override for this very components. So for example, if you have a button, Let's take a look at the settings. What we can do is we can make the text editable. We can make links editable type in the URL. And let's go with the text. I want to link this to the new override fields. So, so what do you need to do is create the new override field for your text layer. So I've just created this. I left the name as suggested, so it's text. And right now, I can change this text value within an override. So this will be accessible to all of the instances in the settings, in the setting Spain. Right now, what I have is the symbol instance and now text is available. So instead of, I'm going to hide this, instead of get the quote, as it originally says, I can just go with whatever text I wish. And, you know, this is pretty convenient. And you might as well argue that you can still use one class for the styling and then you can copy the bottom all over the place and just change the text. This might be easier for a button. But on the other hand, I think that having it organized in Components panel is really good and also just a button whenever you can create different components, much more complicated. Also, you can have nested components, so one component inside of another. I'm not gonna talk about this in this very course because we are in the basic course, but components can get really, really powerful. But sometimes you can just get away with a class. So right now we have this text as an override. We want to add some more over rights. And if you have instances of master components, where, wherever you have them, you can just double-click them and they will edit the master instance. So if you have the instance, you can double-click. You can also right-click and go straight to edit component from the menu and then you'll be in the same place. So you are editing very one master symbol from any of the instances, right? So what we need to do is also create an override for a link. And here is the link. Let's create a new field. We have to create the field first, and let's create new overwrite field that's just leave the name link. It's pretty self-explanatory, right? So now you can go to the settings like for example, from here, here we have the short settings. This is the same as the menu, right? And here you can select the type of the link, for example, email, or you can link to the page. They're not URL or whatever. So the component gives you this opportunity to, for example, change the structured right now, not only styling as if for the class, but you can change the structure. So we can go inside master and you can add some icon or some extra text or something like this. And this will be automatically inherited to all the component instances. You can also create some overrides. You can easily access it from the components menu. And this is how use components as very, very basic use of components. But we'll be creating more components as we go along. For example, for a menu and for footer, and for all the things that are reusable or on our website. Thanks to this, we'll be able to quickly iterate. For example, we can create component from this heavy ink and also caption and button and have it as one component that will be available across the project. And by the way as well, now has this nested components. You can easily do it. So you can easily create the component out of hero header. And inside you will have the bottom big component which will be nested. So two components nested in one another. Okay, for now it's a bit too difficult, so we'll just skip it and go to the definition of component in the next section. 12. Button States: Hi there, welcome to the next lesson. Now let's talk about states in web flow. Let's double-click on this button to go to the master component definition and click on a little arrow next to Styles, next to the class, we have hover state here. So let's select hover state and let's change, let's make the changes that we have in hover state right there. So this is only a slight change to the fill color. Let's copy this hex value of a color and paste it into the color in the hover state. So we are in button B covers pseudo-class. And now if we go to preview this little icon, we can preview how it works in the browser and it already works, right? We have different states, hears pressed, focus and visited. Basically we want to change some different, we want to create different states because in XD we basically have different versions of these buttons. So not stays exactly but disabled button and also an outline version of the buttons. So instead of creating them in web flow, they are not accessible right here. What we're gonna do is we're just going to create another component, but we want to base on this button. So that's why I'm going to just copy and paste it common sequence v. And you can see we have instances of the same master component, but if I right-click on the new button and unlink it from component from here, I just have a new fresh button that's not connected to component anymore, but it has predefined styling that we just need to change slightly. We basically need to change the fill color so that it's grayed out and disabled. So let's go to this class definition button big. But instead of messing around with that class, we're going to come and return at another class, this enabled and disabled class, which is going to change the background color, and that's basically it. So now it's pretty versatile because we have this button, big base class. And then on top of it, we've created this disabled version of our button with the added combo class, and we don't really need to have states. We have this hover state applied to Bhutan big, so it will work anyway. But right now we can always have the disabled button that we're going to add as a new components. So I've created another component right now. Let's override the fields. Again, I'm going to overwrite the text and links. And that's it. We have a new component that's basically a disabled button. And it's a separate one from the community that we had. Now let's create the first button. Let's copy and paste again, right-click and link from proponent. And right now what we have is another fresh button that we can work with. And it's so it already has this class that we have button beak, but on top of it we're gonna create another class. Let's call it outline. And let's go to this outline states, I think it has border size of two and also different color for the border and different color for the text. While the background colour will be nothing like transparent. So in the outline pseudo-class, let's delete the box shadow here in borders will select all the borders. So this option is okay, and then the width is two and color are colored in dark blue color that we're going to paste in here. And what we also need to do is disable the background color, right? So, well, the background color is set here. We cannot deleted, but what we can do is basically change the opacity to 0. And this is how you do it, just basically the scholar. And now we need to change the text color because it's white and it's not showing quite in there. But this is simply because it has been overwritten by Sam inherited selectors. You can view the selectors here and you can see the old links and also polio pages is inherited from here, but then all links overrides it again to the white color. And that's why we just basically need the same color, but it's not showing up, right? Yeah. So this is strange, but what do you have to do is you basically have to change this so that it's not orange anymore. So that this outline combo class overrides this very color. And so you change it to a bit different color and then to the same color and the press return, it should work because now it's the property set to the outline combo class itself. Sometimes it's policed and strange like this, but if you know, colors like orange and blue, what they do, it's pretty easy to understand. Now let's Command Shift a create another component. And this is all we have to do here. We can get rid of those two. Extroversion is because we already have them. We have button be outlined and disabled and just button beak and we can use them whenever we want straight from the Components panel. If you press shift the question mark, so sheaf and forward slash, you'll get to keyboard shortcuts. And I've already explained some of the shortcuts. You don't have to learn them, all right now, but they are pretty, pretty useful and not much of them, right? So right now please remember one important shortcut. It's common shifts b and it will go to the Preview mode. If you press Command Shift P, it will render your website as if it were rendered in the browser. So Safari or Chrome. And you can see the interactions and everything that's, you know, as if it is published website. You can click on this little icon, Oregon press Command Shift P. And by the way, you might have noticed that we have a bit different preview in designer and in the browser preview. And this is just the section element. It's empty, and that's the way the browser works. They don't render empty elements, but in the preview we have it so that we can put some elements in there or selected or deleted. But you can click on this height empty elements option, and then it disappeared. Obviously, it's there and you can select it, let's say from navigator in order to add some element inside the section, but it won't be visible for us. I think it's much better if we can see in the designer view, if we can see those hidden elements. So I'm going to enable it here. That would be all for this lesson. See you in the next one. 13. Menu: Hi there and welcome to the next lesson. Now we're going to create a menu and some basic styling for the menu. So what we could do is build the menu from scratch, like from sections and containers and things like this. But web flow has a really helpful feature. And this segment called components in elements menu allows us to create a navbar that we can now put on to this empty section. And as you can see, the navbar is just a ready-made menu at the, contains some basic styling, but we can change it later on. It just display set to block. And also inside we have a container that's basically centering the elements in the menu. We also going to change it a bit later. And inside this container, what we have is brand, this is a link and inside we can put just the text or an image. We also have a nav menu with some items. If we expand it here, our nav links with some centered tags and menu buttons. Well, this Menu button is not visible here, but if we go to tablet and phone view, you'll see that the menu appears. And if we go to settings for the whole navbar, you can change this menu icon to appear, for example, only from portrait, phone or tablet, like we have right now. So let's see how it works. Let's go to tablet in Preview mode. Now let's click on the burger icon. And there we have a nice animation of the menu. It's also responsive, works well on different resolutions. So great. Now let's customize the menu. I'm going to select the brand and I want to insert an image in there. So let's go to assets. I'm going to just drag and drop two of the images, two logos I have, and I'm going to use the first one, this dark blue one, you can double-click or you can just drag and drop or whatever you need it. So now it's inside this brand link. And it's good because when I click on brand, I just want to go to the homepage. So I have to have this link. Now, the nav links, they can just points to whatever page or link that we want. Those are links and inside they have text. And we're going to use three oldest links, but also we need some drop-down menu. And luckily, web though, has another component that will help us. In the Components section of add menu, we can just drag and drop this drop down and it will work in the menu. Now, it has a simple structure of a text block. We have also an icon and a button. So we changed the services. Now let's copy and paste the text that we have. So Waitrose and block and get the quote we also going to paste in here and we have a phone number to the right hand side. So what I'm gonna do is just copy and paste the same nav link to get another one. I'm just going to paste it here and put the phone number in there. Now that's Command C, copy from XD and let's paste it here. And the first thing I'd like to do with this tiling here as changed the topography options for those nav links. So I'm going to just select the novel link and see what happens, like where is the topography from. So the color is inherited from the old pages. And also I have some properties inherited from all links so I can change that. But, you know, it's always better to create another class maybe for services as well. So I'm going to just create a universal class for the nav links. And I'm going to just give it a name command's return navigation links. Let's create this new class and let's change some properties. So for the color, I'm just going to change it to the other one and that I've copied from x D. And now this class can be applied to any of the links that I have. If I want to change some more typography options, I can easily do it in this class. So now it's pretty universally if I want to change any styling for any navigation item, I can do it straight from this class. And for the services, I have textblock and also an icon. So instead of setting up the class for elements individually, I'm going to select drop-down toggle and just change it to navigation links. And it works. I have the blue color. Now for the number, there's a little icon and also a background and the shadow. So let's create another element, like HTML element that will contain this navigation links. So I'm going to just use a div block. That's simply because it's for styling, it doesn't have to mean anything. So I always use this book in this case. And let's put the novel link in here in this D-block, I'm going to need an image. That's why I'm basically adding another thing in the structure because it's gonna group image and text together. And then I can position it within this D-block, which by the way, should be one of the menu items. So the easiest way would be to change the layout to inline-block. And now it's one of the items on the menu. And I can now double-click on the image and choose another image. I'm going to upload phone icon that you have in your source files. You can do it like this with an image, you can do it with background CSS property as well. This is just one way to go. Now let's select this d-block and let's change the background color to white. Also, I need to have the border-radius. You can type 50% in here. Or you can just type big value like 100 pixels in order to have rounded corners. And also I want to check the height of the element. I want to have it fixed to 44 pixels. So let's go to size. And from here we're going to set high to 44. And yeah, now we have the structure. So all we need to do right now as to have correct positioning of the elements. Let's go to the container and let's see how this is set up. So basically this container is the same that we have here. So content, well, it, it positions elements in the center, and also it has the correct widths or max weight. It's set to 1242. So what we can do is we can use this content for the menu as well. Now if we have it here, if we change the width, it will automatically be applied to menu and all of the sections. But that won't really be enough for the structure because I need to position those elements so that they are displayed like flexbox. And then I went to justify the items and align them vertically in the middle. So instead of just using this content and some combo classes, for example, I think that the easiest way would be to create another element. And just, I'm going to leave the content as it is because it will keep the And this maximum width so that when it changes, it changes everywhere. But I'm going to create a new styling element. I'm going to just set up a new div that will hold the position of the elements. So let's use the DFF block right here. I'm going to put just below the content inside the content, and I'm going to put brand inside and also nav menu insight like this. So sometimes it's difficult to drag and drop those items, but yeah, you'll figure it out. Okay, so now we have it in another structure. So this debug that we need to style as a flexbox, I'm going to give it a name of menu and I can change the layout to flexbox. Right now I can easily set the alignment and I can also justify the Elements. So I can use this, justify a space between option so that we have logo to the left-hand side and all the content goes to the right-hand side of the menu, condensed with the links. Okay, so let's now take a look at this nav menu. We need to position elements inside enough menu itself. And it is a flex child, but it can also be set to have display to flex. Then we can just easily align this vertically to the center. And also for this block itself, it's also a flex child, but again, we can set display to flex to this d-block. It would be nice to change the naming of this class as well. But then we can also set the alignment to be center. And if you take a look at the image and create another class for it, I'm going to give it the name of phone icon. Again, just create a margin, let's say 16 pixels from the left and does not link. It doesn't have any class, but it has some padding. Well, the padding is from, from nothing's from holdings, our guess. So I'm gonna create a new class. I'm gonna overwrite the settings. And you can press shift to change all of the settings. So I'm going to press shift and change them to 0. And I'm going to press option out and just change it to the left and right padding. I'm going to set it to ten pixels from the left and let's say 16 from the right-hand side. And now it looks pretty good. It's really the same as I have an Adobe XD, also, small shadow to the bottom. It's going to be 3030 and the color will be black. But I'm going to set the opacity alpha for the shadow to ten. Maybe you're gonna tweak it a little bit later. But now for the whole navbar, let's change the background color. But first I'm going to create the class command returned, and I'm gonna create a navbar class. And for the color that said the transparency non, for now, maybe we'll change it a bit later, but I think that the menu is almost ready. Maybe the shadow is a bit off, but more importantly, the whole menu should be, should have some kind of margin from the top, and it's 46 pixels from the top of the web page, we need to change it slightly. So let's apply the margin to our navbar or the whole sectional. Probably the navbar would be better. So let's apply 46 pixel margin to the navbar, and here we have it. So we've created this structure and some basic styling for the menu. We're going to continue working on the menu in the next lesson. 14. Submenu: Welcome to the next lesson. We're going to create the services, some menu. But first let's take a look at Navigator. We can expand or collapse all the items here. We can also dock the navigator to the left-hand side, so it stays open all the time, but I don't find it really useful. Instead, I'm just going to undock it. And if you want to have a bit bigger window, if you have a lot of nested things in Navigator, you can simply expand it. So let's do it like so. And now I'd like to explore this services dropdown. That destructure of drop-down is fairly straightforward. We have this little R0, we have this text and ponder this menu here we have a default and another state. And we want to create something like this. So we have four buttons here, different icons, different texts, and this is a completely custom menu, right? So we'll have to rebuild this component, the drop-down component that we have from web flow, if you go to it's Settings and click on Open menu, you'll see all the drop-down links that appear here. And if you go to Command Shift P, browser preview and you click on services, yeah, you can see those links appearing under the menu. So we're going to rebuild it somehow. We have here the structure, the simple structure with icon and text block. So this is just the title. So we have a little arrow here, and it's the same as we have in our design, so we probably going to leave it like this. But in our design, the R0 is to the left hand side of services. And it shouldn't be. If you take a look at the structure, HTML structure, you have this textbook underneath. So theoretically it should be to the right hand side. But if you go to styles, you see that the position of this icon is just set to absolute. And I hope that you understand from HTML what's relative, absolute and fixed and sticky. We're going to talk about it later. If you change it to static, it will just be on top, just like it should be an HTML structure. But I'm going to basically undo it and I'm going to leave it as is what I could do with absolute. I can position it not to the right but to the left-hand side. So this is the same as we have an x d, but you know what, I'm going to leave it to the right and I think it looks really good. So right now, let's leave the structure as it is. Let's leave this positioning absolute for 40 icon and let's focus on the links instead. So we need to rebuild the drop-down list. And I have some margarines and padding and styles added to the links. I'm just gonna delete them all and I'm not going to restyle them. I'm just going to rebuild them from scratch. I need to go to open once again. And let's create an image here. Let's create a heading. And also I'm going to need a simple text. So I'm going to select textblock. If that's not a classic paragraph, I'm just gonna use textbooks. So for captions and things in the menu like this, and for this free items, I need to put them in one container so that I can position them correctly. But more importantly, that they can be one bottom in my menu. So I could use a div dog, but I have something better. This is a link blog. And in link blog this is the same as the d-block, but everything that goes there. Will be automatically linked to whatever the link is set up on this main elements. So let's put this link block and I'm going to put all the elements inside. And I'm going to set the correct order. And now let's take a look at the styling of link blogs because I have some more weird text decoration. And this text decoration is inherited from all links. So maybe let me select this all links, HTML tags and just set it for once. I'm going to fix the Declaration. So I said nom and also I'm going to set the default color. I have to retype the same color and I'm gonna set the link color to dark blue as well. Alright, now let's command return. Create another class for a link blog. I'm going to give it a name of sub-menu block. And this is one blog that I'm going to repeat four times, right? So I'm going to change the setting for this dog first. That's maybe check the width of this element. It's 246 and I think it's safe to set it as a width of the elements so that it's fixed. It has 246 pixels. Let's quickly set display two facts so that we can align elements vertically in the middle. And then maybe just have this heading appearing on top of the textblock. The easiest way would be to add another structure element. I can add the technical d-block that outputs elements into. And if I put this heading, those are block elements, heading and textbook. So if I set the order correctly, they will display like that. Okay, and that's fine. That's all we need to do. Now let's focus on the image. So I'm going to double-click on the image and choose another image that we import some images to a web flow that I have in the source files, I'm going to just drag and drop them into the canvas. Those are SVG images, so the best for the web. Now let's select the first one and let's change the heading. We have software here. I'm going to come and see copy that. And also with option click, I can check the margin, it's 24, so let's paste it here. I'm also going to change the caption. And now I need to set this margin. I can set it to the image or the d-block. So let's maybe set it to the DFF block. It's going to automatically create a class, the name, the block two. We were going to change this name later. It's pretty important so that we have meaningful names for the classes. But now let's go to the settings for a sec and let's change the settings for this header. I need this to be header for. And basically I want to style all Header force or O H 4s so that they are the same as the ones in the menu. So let me quickly select the proper class in HTML class and set this to be dM Serif display and then size 24 and line-height is 33. So this will be for all h force and for this textbook, well, this text description is not anywhere in my character styles. So let's just remember those settings for typography. Gonna copy the color of the text and just come up with some class if it's not used anywhere else. And then the some money, I'm just going to give it a name. Somebody texts. And now paste the color and also size is 12 and the line-height is 16. Now what I need to do is reset the margins maybe for all h force because it's inherited from this HTML tag. I'm going to reset them. So let's say 0 for bottom and 0 for the top margin as well. And yeah, we can leave it like this. Now let's find this background. So the background is set for either some money block or maybe the whole drop-down list that see, yeah, we have it set for the dropdown list. So I need to just make it fully transparent and does better, at least how it appears in my XD file. Now, what we need to do is duplicate this thing four times, and we also need to put it in some kind of layout. So for example, flexbox or GridLayout. And GridLayout would actually be the best solution for this kind of situation. But if we select drop-down list, we cannot actually select the grid layout. It's not supported for dropdowns. But, you know, it's okay, it's fine. We can always add another element inside dropdown, the position this element so that it's a great. So let's add a d-block. And let's put some many block inside this d-block. Right now, on this D-block, we can apply agreed setting and we can have a nice greed for four elements. And by the way, web flow by default created agreed with two columns and two rows. So this is all we need. We don't need to create new columns or rows. Now let's take a look at the GOP at 16 by default, and we can change it. We can even change it visually in web flow if we click in between the elements. And now we can change it, but let's measure it first and XD. So press option out and this is 40 pixel gap. I'm going to click on the lock icon so that it is automatically applied to both columns and rows. And I put 40 in there so that we have equal spacing between the elements. We also have a direction which we can change in the mobile breakpoints as well. We have different columns and their sizes. By default, they are equal so they each column take one fraction, so is the same as the other column. If we want to change it, we can change to 1.5 and then it will be 1.5 the size of the previous column. And all the settings are there. So if you know HTML grids, you'll be, you'll be really happy with how web flow handles this. You can click on the column and you can set the minimum or maximum width. Or you can add columns and rows. And you can do all the sophisticated things that greed requires you to do. You can even add something that's called grid areas and you can define an area before you put content in there so it aligns perfectly. But this is a bit too advanced for our basic course. I don't want to spend half an hour on the greed alone right now I want to proceed with the website so that you have this practical knowledge. But you can check out Web flows university and they have really great resources on ins and outs about the greed. And you can definitely learn from there. Now, right now, I'm going to just change the name of our class. Deadlock-free is not a meaningful name, so let's give it a name of sub many container. And what I want to do right now is just duplicated some many blocks so that they fit right in the grid and we can just copy and paste and it works like a charm. But I'm gonna delete them because. Before I paste, copy and paste anything in workflow, I first wonder if I might use a component for that because if I copy and paste and then I want to change a little thing, then I have this class. But if I want to change the content, I have to change in each place. So instead, I'm going to just create a new symbol. I'm going to command shift a and create a new symbol with an aim as many block. And then this component, I basically want to be able to overwrite everything. So first I'm going to select sub-menu block and then the link block setting, I'm going to create new override for the link. Inside the link I have an image. Let's make this image and override as well. And inside of a div blog, I have heading and sub-menu text. I need this headings to be available for. Overrides may be, Let's have Heading text here as a label. And Oops, I need to go back and let's double-click on the icon of the component, somebody text. And let's create the new field for overwrites here as well. So everything inside this component, basically including the link, I can now override. So all I need to do is copy this and paste three times. It will automatically fit in my grid. And also I have all the fields in this somebody block settings. I can override right now. So if you take a look at the right-hand side for each instance properties, you have somebody block settings. And now you can easily replace the image. You can select the image like so. You can copy the text from XD and just paste it to the right-hand column. You don't have to, you know, clicky click select the text. So this is really useful and also it's useful because if you want in future, change the elements. So maybe add another image or add one more caption or add some text inside. You can do it for one master element and then it will be inherited to all of the components. So, yeah, I'm going to change the icon here. Let's replace it one more. And there we have block chain and one more caption and we are ready to go almost because we also need to select our dropdown list. And let's take a look at the background here. We need to change it to white. I am just going to check the margins here and set the padding for this element so it's 23 or 24. And also one more thing, I need to check the border-radius and shadows have 08. Let's apply this box shadow to the whole drop-down list. I'm going to have an angle of 180, then properties 820, and let's leave black color, but we're going to change the alpha 218 or 16, I guess. A whoops, I closed it. So let's go back to somebody container options, open menu. This is the only way you can get to this dropdown list and now you can restyle it. So let's set the border-radius to eight pixels, and that's it. So let's preview and Command Shift P and click on services. And thus it, our menus working. So let's wrap this up and let's proceed to the next lesson. 15. Hover State: Hi there and welcome to the next lesson. Now in this lesson I'm going to show you something a bit more complicated because we're going to add our custom code to well-focused website. But first, let's go to Adobe XD. And the structure for components that I have in XD is that I have each master components on one separate art board. So I have this components on the board. And there I have all the master components so that I can easily access them and edit those components as appropriate. And those components are then mapped and copied and pasted as incidences that I can copy to other art boards in the Web Flow, I'd like to do something similar. I basically want to have all the components in one place because it's easier to manage those components and change them so that I'm gonna create a new page. I'm going to give it a name style guide. And this is going to be a simple style guide. I'm gonna copy and paste all of the components that they have in web flow to this page. And later on, maybe it will become something more advanced like design system. But for now it will be super simple. So let's go to Components and let's use ours. How many block component here? I'm gonna put it on this page. And right now, my task is adding to this very component. It's hover states. So let me go to the styles. When I select somebody block, I can check this dies and how it looks. When I hover in the design tool, I've designed this state and it has white fonts and dark background. So when someone hovers over this link, I need to change the styling accordingly. And the first thing that I need to tackle as this padding. So basically we have this partnering between the background and also the inside of the components. So text and icons around 14 pixels. And let me put it in the center. But where I need to do is I need to account for it earlier before I create a hover state. So I need to select the somebody block and we've shift, I'm going to apply 14 pixels padding from each side. And now when I create this hover state and change the background color, I won't have this shifting between the hover state and normal one. But one thing that I have to take into account is I have to go back to Home and take a look at the menu. So let's go to the dropdown and settings and open the menu. Now I can see that my gaps has doubled almost because right now I have this padding and also I have the gap Ford agreed. So let's select drop-down list and I need to go inside this drop-down is to select the sub-menu container. I need to edit this greed. You can do it styles and then you can click on Edit greed. And here we have this gap. It's 40 pixels from each side, but I need to contract it. So I had 14 or 16 and it's each side. So I need to subtract 32 pixels. And this is pretty cool, right? Because you can just basically type in some mathematical equations, operations in workflows, input fields, and you can do things like adding and subtracting. You can also multiply and you can divide. And it's as easy as done. So here we have it. And also we now have this padding that's a little bit to beak through the outer edges of the My new, so I need to go here. And also for this padding here it's 24. I need to subtract some values. I can do it like minus 16 and it will work. But unfortunately it will work only for this top padding, so I need to change it accordingly like so. Or I can just change it with shift pressed and this will apply to all of the elements. But yeah, this is really cool. You can, in every input field, you can make some calculations and you can use simple math in the web flow. Now I go back to the component and I've selected the hover state for sub money block, and I want to change the background color. So when someone hovers over this element, I want to have this dark color. Let me paste the hex value. And also I want to change the text color to white. But here is the problem. In the hover state, I cannot change the text color to white. Why is that? Well, this is because the class at the CSS class is not specific enough. Obviously, I could do a specific class like if I select the heading itself and select the hover state, then if I change the color to white and this overstate, it would work. But the way I expect this, so I want to hover over one element, the big one, and then I want to change the color of the other element. And this is impossible in this case because heading itself, so this specific CSS class for heading has this color set to be dark blue. And I could reset it right? So one way is to reset it to the old link scholar. And in this case, it will work because now it's not inherited. So my class could be more specific. The 1.The I apply two sub many block. It would be more specific than the HTML tag for all links. And let me see the hover state. Let me change the color and this would work. But we cannot expect this to work like this for all of the elements because now I can't just set the text color for the heading specifically. So, so this is not the way to go, basically, we can try to reset it for some money text as well. And so it defaults to all links and do the same for that one. But we are just lucky that it works. So we cannot leave it this way. We have to somehow fix it, especially that in the previous lesson, I think we've missed that the text should be gray. So I'm gonna copy this hex value for the text and we need to change it here. So it cannot longer inherit from all links that can be overwritten by so many blog. It has to be specifically set for some many texts. So this color has to be there. And there's just no way we can override. We can make this class for some many block for the whole book more specific than this, right? Because it's straight in some many texts. So in web flow, we cannot make this class, I don't know, more important or something like this hover is just a pseudo-class. It's not the thing that it will be more specific than the great text. So what we have to do instead in order for this to work. So if we hover over the whole element, this text also changes color. To create something that's called custom code. We cannot say important in here or use any other way to make this class less specific than the one that we have on some many block. I'd have to write a little bit of code myself. I had to create my own class. That's more important in CSS. And what I want to accomplish once more is I want on this hover state, that text in the sub money blocked to turn from gray to white. And I need to write my custom CSS in order to do this, to create a class that's more specific for this particular some money block hover state. Alright, so we can add our custom code to every page of our website or to all of the pages. And in this case, we want to add it to all of our pages because menu will appear on simply all of the pages, right, so, so this code needs to work everywhere. And in order to create such a code, let's click on web flows icon in the top left and then select Project Settings. And then we have to go to Custom Code tab. Here we can add the code to a footer or to the header of our website. And I'm going to add the code to header because it's the code that will let me create new styles. I'm going to create a style tag and also close it and in-between, I need to create the specific CSS rule. Well, I need to first address a class and the class is sub many block. But is it really, is it really the same in the code? Well, let, let us check out. I'm going to preview this Command Shift P or click on this little icon, right click on the element and select inspect. Now, I'd like to show you the class for some ONE block, and let's see if it's the same. And this is this element. You can see the class here is lowercase and web flow is not using my spacebar. Instead, it's dash. So all the space, spaces are changed into dashes here. So we have some many blog and if I select the hover state here, you will indeed see that, well, yeah, background-color is set to dark blue and also the color of the text for this particular class on hover is set to be wide. But it's not working for this text. Why? Well, it's simply because this is more specific. The class that we have here, some many texts and the color that's applied to it is just more specific, is more important in CSS. Then the one that we applied to the class that's basically a container. So what we need to do is select the sun many block first. And I don't want to use importance, so I'm gonna select the hover state and then I want to make this more specific simply by adding another class_name. So I press Space and I add another class which is some many texts. And this way, the CSS class will be more specific than just some money tax because we have two classes instead of one. I hope you already know that. And for the color of the text, I simply put a white in here. Now I save the changes and my custom code will be applied. But one important thing is that it's not being applied to the designer view. So in the designer view you'd still, even if, if you have this preview on, you still have this gray color. What you have to do is go to the right hand side and click on the publish and publish our website under this web flows sub-domain. And then after publishing this code that you add as custom code is being executed on this ready-made publish side. So I can click on this little icon to preview how it looks. And now if I hover over, the text is now wide, so it indicates that our code works. And again, it won't work. And the designer, nor in the preview here, you have to publish your site first and density if the code is working. So it's a little bit of more advanced technique that you will not that commonly used in the basic projects, but sometimes you will and you know, it's worth to know that you can add your code to the entire website like we did. You can add the code to individual pages. And also you can add the code as a component. You can add a specific HTML m-bit component that you can use to embed some codes. So there are different ways, but the one I showed you is really good for this particular case because it will let us restyle the component that appears on every page of our website. So yeah, I hope you enjoyed it, even if you don't really understand it and you don't know CSS that well, just don't worry, remember that the auction is here and see you in the next lesson. 16. Fixed Submenu: Hi there. In this lesson we're going to continue working with the menu. And what I'd like to show you is how it looks and responsive versions of our website. So let's use the tablet here we have this menu that we can click on and then it expands. Well, we need to work on styling, but the basic mechanics are here. So this is the main advantage of using the pre-built components. So the Navbar component from Web Flow, you'll have it working and different on different devices as well as different resolutions. And you will just need to tweak it a little bit so that it matches your styling. Otherwise, you could obviously design those elements yourself. You can create animations as well in different states, but this would be a bit difficult. So, you know, sometimes it's so much easier to just use a readymade component, but then you have to agree that maybe not everything will be possible and maybe tweaking it to auto-layout to the extent that we have, it will be a bit difficult, or maybe it will take lot of time comparing to creating this from scratch. But in our case, I think it will be fairly easy to create this different styling for the component. The first thing I'd like to do is to set this menu to be displayed on top of my website while scrolling. So I basically need to fix it. I need to pin it to the top of the website. And it's not going to be super straight because I need to fix the margarines and POD beings. If you take a look at this structure, I have section and inside I have this navbar. And there is no margin on polygon section, but there is marking on the navbar itself. And because this is the margin, the rest of the website will be visible what I'll scroll, so I need to change it slightly. Let's reset the margin on the navbar. So I'm gonna click, I can Option click to reset it or I can just put 0 in here. And let's go ahead to add the padding to the section as the padding is the part of the section, so it's inside of this container. So now it's going to work fine. And what I also need to change the background of this section. I'm on the body element right now, but it doesn't matter. What I like to show you is that you can have this color saved as swatches. You can click to create a swatch like this and also give it a name, for example, a light blue and just go ahead and create it. And we can do the same with our dark blue color, which by the way, web fo gave a pretty cool name, midnight blue. And now we're going to save those colors. So later on we can go to swatches. We can add the scholars to the backgrounds, for example, for our section. So I've added light-blue. And by the way, this colour is now linked. If I change it in future, it will change throughout all the instances. All right, so now let's set the position of this element so that it stays fixed on top of our website. We're going to use fixed for that, but let's quickly recap what we have here in this position drop-down. I basically, I hope that you know it from CSS already, but what we have is relative and absolute. We're going to use those properties to position elements within each other. And we can easily set the offset in percentage or in. Cells, while we use relative and absolute, The difference is in relative positioning. We're going to leave this dock, this element in the document flow and absolute positioning will simply cut it out from the document flow. What it means, well, if you position is something absolute, the other elements of the website won't really know that it exists. So all the measurements and all the space that it supposed to take on the website. The other elements will simply occupy. And for the relative positioning, the difference is that this element basically stays in the flow of the document, so it still occupies the width that it's supposed to and other elements understand it. But then you can offset its position by just setting, for example, ten pixels from the top and it will shift ten pixels down. We're gonna work with this properties and the following classes. But right now let's focus on fixed positioning. And this is pretty similar to the absolute positioning in terms of when you apply fixed position to the elements section. In this case, it will automatically be just removed from the regular flow of the document. It means that the other elements will no longer know that this element was here. It's just like you take the scissors and cut it out from, from the website. So everything goes up because they no longer understand that this section should occupy some space. Bound the section will be fixed so that when I scroll the website it will stay in place. This will be relatively positioned to the body element. And in case you don't have any parents with absolute or relative positioning, this is the default for HTML document. It will default to the body. And now I have to set the positioning so I can position this element to a bottom, top, and I can also position to top. And if I use one of the predefined settings, for example, this one, this will set the left, top and right properties to 0%. So this section will simply spread across entire website horizontally. And also it will be pinned to the top of the body element thanks to top 0%. Now what I need to do is go to the second section and account for the space that I removed. Like, I need to add like say, 120 pixel margin to the second section because it no longer knows that the menu is here. And now when I scroll, you can see that I have many pinned to the top, that's common Shift P go to the preview. So it works as expected and by the way, stays on top all the time. And the second section is, is simply scrolling under the manual. And this is not through some magical properties such as that indexes or somewhere like this. This is just because we have such structure in HTML. So basically, if you take a look at this layer structure of HTML, section two is simply below section, so below our menu nav bar, and this is the reason why it will go below it. Now let's switch to the tablet view and I don't want a hamburger menu appear here, just Yes, I want this only for the mobile versions of my website. So what do you need to do is go to Navbar settings. And then here you have menu icon for you can switch so that it displays only for phone landscape and the below, not for the tablet. And it's quite crowded here, but if we take a look at the design, there is no phone number. So we need to change some CSS properties. And let's select first this whole div block. And the block is not the most intuitive name for the phone as Let's rename it to foam. And let's change the display settings to non. We don't want to delete it because it will delete it from the HTML structure and won't be visible on desktop. But if we set the display to none in tablet, it simply won't be visible here. Let's also check the margin is 24 pixel margin, and let's set it for the entire section in the mobile views. Now let's check whether the drop-down menu works well, also on tablet, and let's go to settings and open the menu. And yeah, I think it's pretty much okay. Also, please note that this is the smallest tablet, tablet resolution, so we can go up and there's nowhere is that something will be clipped or impossible to click on. And on the mobile views will have the hamburger menu, so everything is fine and we can proceed to the next lesson. See you there. 17. Mobile Menu: Hi there, welcome to the next lesson. And now let's take a look at our menu in mobile view. So we are in x D and we have default state and also open states. So we need to make it full screen. We need to change the position of the hamburger icon. And I think we'll be able to make it all the hotel menu and now it looks pretty different. I think it's safe to say that within this component we will be able to make all the adjustments. Sometimes you just have to think in advance whether those adjustments wouldn't be too much complicated. Sometimes it's just better to create the component yourself from scratch, but I think in this case, it will be pretty easy. So let's start with this default state and with our menu button would need to change its position colors. And also we need to replace the icon. And we're going to start as usual from mobile landscape. Why? Because the changes will be automatically inherited to mobile Portrait While it doesn't work the other way around. So started landscape. And then if you have to change something in portrait, change in portrait. Alright, so what are the changes that we need to do? So let's go to style panel and first it's copy the color that we have here. We have shadow as well. And let's check this shadows. Color opacity is 35%. So let's transfer those values to web flow. I'm going to have first set the background color and change it to R, midnight blue from swatches. Now let's have a big value for radius so that it's rounded. We can put a value like 200, or we can just say 50%, and it would also work. Now let's change the icon color to white and we're going to replace the icon in a second. But first, I'm going to create a box shadow. The angle is correct, but let's change the Blair value. We're going to leave the distance to one as well. We're going to set the blur to aid and also changed the alpha of the black color to 35%. And that should work. Now let's remove an exchange the icon. I'm going to press a on the keyboard and set another image in there. Let's select an image that I've already exported from x D and you can find it in source files. It's hamburger SVG, and we're gonna delete the old icon and also check the beings for this particular icon so that we have better looking button. So you can do it with selecting any shape here and pressing option out to measure the distances. We have 1416 pixel padding. And in order to apply it, we will just have this Menu button selected. And then you can press Option or Alt in Web Flow to adjust both left and right and top and the bottom padding accordingly. Now let's change the position of this element. So we need this to be fixed. And so let's change the position of menu button to fixed. Same as we did with the menu, but now we're going to position it to the bottom right. And if I click on the, on the right border, I now have percentages. If I press up arrow or down arrow, I can change the values incrementally. If I press and hold Shift and then oppress the arrows, I can change it with ten pixel, 10% increments in this case. But what I want to do is in this case, if I, if I just set 10, 10% You see that it's not aligning perfectly because simply our phone is much higher than wider. So we're gonna just use pixel values instead of percentages. And I'm gonna type, let's say 60 then PX. And it will automatically switch to the pixel values. And you can do it in any input in web flow where you have, what do you have measurements you can do 60 here as well. By the way, you can click on the percentage and then you can change it to a ramps, amps or whatever you want. So yeah, maybe let's stay with 40 pixels from the right and from the top. And this looks pretty cool. Now what I'd like to do is I don't know if there's still something wrong with this. But and I think that we have to tweak the budding or maybe just change the positioning slightly so that we use maybe margarines instead of padding for this element. So let's, yeah, let's reset the partying. And now that's changed the width and height of this element so that it matches 48 pixels that we have InDesign. Now we're going to use it in width and height so that we have fixed width and height of this button. And for the image, we're gonna just use margin to offset its position. I'm going to use 1614 pixels. And now I think it's a bit more bulletproof. Maybe you're gonna change it to 13 just to optically position it in the center. Take a look in the preview. It looks pretty good so we can switch the menu itself. So let's select the nav bar and go to its settings. Now we can open many from here, and we need to make it full screen. There are some options here, menu type, we can change it for this component, we have drop-down overwrite and over, over left available. And this is pretty cool. We are going to use overlapped and also select this option menu feels page height. So it will be automatically scale to 100% vertical height. But we also have a little margin here that comes from this section. We'll need to change it. So let's go back and close the money for now. Let's start with positioning this logo in the center of the screen because this is how it's supposed to be from x D file, we have menu that's basically a flexbox. We can adjust the justify options so that it's centers, the content should be fine. And also what we can do is for the section we need to get rid of this padding. I can Option click it or just set it to 0. And now let's reapply this padding or margin to the individual elements. So for example, a brand elements, I'm going to set the margin here to be the exact value of what I have in XD. Let's select an option hover. We have 24 pixels here, and this should work. So now if I go to the navbar and open the menu in the settings, you'll see that it's pinned to the top and the bottom. That's how it's supposed to be with no markings. And let's select the nav menu itself and go to Styles. Set the width to 100% as well so that it covers the entire space horizontally. And this is almost now I can't really see the bottom. And this is because of the Z index property that we have to fix. So here it is in position section and we're going to set the number here. The default number is 0. So for the nav menu, it's 0, but for the menu button we can set it to whatever higher number, for example, ten. And then it will be higher in the stacking order. It means that it should appear on top. When we have the menu open. This button should appear on top because this number is simply bigger than the default 0 that we have on the menu. So that way we can set the order of elements regardless of the position that they have in Navigator. So in navigators, something might be inside or maybe below the element, but then if you set z index, it will automatically appear on top. Okay, so that's it for this lesson. Let's hear in the next one. 18. Finished Menu: Hi guys, welcome to the next lesson. I have some good news because this is the last lesson with the menu. Hopefully we'll finish it right now. I'm going to open the menu and Navbar settings. And now let's go to individual navigation links. So those navigation links, we need to restyle them for the mobile views. So we are in mobile breakpoints. If I select navigation links, I can easily go to Styles and even this class, you know, it's the same in all the breakpoints. But I'm going to change it here. And it's going to change only for mobile landscape and mobile portraits. So I'm gonna change the color to midnight blue to our nav menu as well in this particular breakpoint. And now it looks a little bit better regarding our project. Let's take a look at margarines and padding. So we have around 46 pixels padding to the left. Let's apply it. And by the way, just for now, let's apply it to the top as well so that we can position it but a bit better. In a second, I need to add this logo, logo with white background as well. And I think that I have this image already loaded. So what I'm gonna do is add another section. I mean, this will be the dog. It's just a technical element that will position and contain this logo. So let's add the image inside, and now let's choose the image that we've already loaded. Now let's move it to the right-hand side. And as we have the div that is occupying the entire space horizontally, it's enough to select this d-block and set the topography option to align to the right-hand side. It will work both for text and images. So we are good to go. Now let's change the name of this class to something more intuitive. Say, for example, menu, logo, alt, this alternative version of this logo. But we've added it in the mobile breakpoint. And what we did is actually with added something in HTML to the mobile view. So it will be visible in all the other breakpoints because we are not changing the styling, we simply added something else. So in this desktop breakpoint, we are going to hide it. So it's going to be hidden throughout our entire breakpoint family. And now we can go back to mobile landscape and show this element here. So I'm going to change display to block instead of these play hidden. And now it will appear only in this mobile landscape and mobile portrait breakpoints. And we're just going to set some margin here. It's around 46 pixels as well. So let me select menu logo outwards more or less go to styles and set the margin bottom to 46. Now let's take a look at the main button that opens and closes our menu, and let's select it. We have a different color here. And why is that? Well, this is because there is another state for this element. So now we are an open state and colors automatically changed. So what we need to do is select this element. We need to change the color, the background color to white, like this, and we need to fix this icon. So basically we need X icon right now. And let's revision what we've done here. We've created an Menu button and inside we've added an image. So this is only one way to work with images in CSS, and the other way is setting them as background for the element. In this particular case, I think that It will be far by there if we get rid of this image and set it as a background for the menu button. Because then in different breakpoints, thanks to CSS, we'll be able to switch this hamburger icon to the X icon. So let's go to the background setting and let's click on plus we're going to add an image background that's chosen image. And now we're going to select, I need to import and upload one of the FISA have for this lesson. It's x SVG, and now we have it set as a background for this entire menu button. What we need to do is change the width of this element so that we can make it smaller. It was actually 20 pixels in the design. So let's have 20 pixels width here, height we're going to leave to auto, and this will automatically keep it in proportion. Now the position will be in the center, but we need to change the tiling so that it doesn't repeat all over the place. So I selected this last option to not to repeat this image. And now for the open state of the menu will have the x as a background image. We need to get rid of the hamburger here. Let's select it in Navigator and delete. Whenever you select and delete from navigator, It will be gone from HTML forever because this HTML structure. Now let's go to the closed state of the menu and select menu button once more so that I can set another background image, and this time it will be hamburger. So in this state and thanks to CSS, it will automatically, I'll change it. I'm going to set the position to centre and no tiling and the width of this element, I think it should be the same as the previous one. So 20 pixels and the shape of the button doesn't look right, but it's just a little glitch of web host preview because we have, we didn't hide set the 48, no partying, no margins. So if you go to the real preview Command Shift P, you'll see that the shape is perfect. So now we've learned something really important. We can set the image via CSS so that it changes in different states and different break points and you don't have to use image itself. Now, let's take a look at the services menu because it looks quite impossible to fix, right? Especially for beginners. It's like, oh my god, how do I, how do I change the position of the elements? How do I restyle it? I think it's pretty complicated, but again, let's take a look at the open state of this element. If we select the dropdown and open this menu, don't be overwhelmed. Just look at the elements and how they are structured in HTML. You'll see that we have this dropdown list and all the elements are inside this greed cold sack many container. So inside of drop-down list, we have the somebody container for the dropdown itself. Let's change the color. We can set the opacity to 0, or we can just move it slightly like four or 5%. So we have this light blue color under the menu. And now let's select this somebody containers. So this is actually agreed. We can click on this little icon. And we have now greed of two columns and two rows. But we can go to grid settings and we can easily delete one of the columns. Thanks to this, will have all the elements positioned on top of each other. So this is how it looks right now, thanks to just one clique. In web though, we need to make it appear to be a 100% of the width of this element's width. So we need the sum any block to be a 100%. But the problem is it is a symbol. So if we go inside the symbol is a web flow smart enough to change this symbols properties, CSS properties based on the breakpoint itself and not change it, you know, across the entire website. Let's see. I'm going to set the width to 100%. And now lets go out this symbol. We need to close the symbol and then re-open the menu to see if these changes takes effect only for this mobile view. Now let's take a look at this desktop view. Looks good. And then the mobile view, it looks that we have 100%. So yes, in terms of symbols where flow also as smart enough to figure out which breakpoint this symbol is in and adjust this tiling accordingly. So let's go back to drop-down list and open it. We need to change the colors for the software header. And obviously if we go back to the symbols definition and select this heading, we can change it here. And again, because this is change of this tiling, it will only affect breakpoints that we are in and the breakpoints to the right-hand side. So only mobile landscape and mobile portraits. So now I've changed this heading. And this is the only change I think we need to do to the colors. If we open services, it looks pretty good right now. And maybe we have a little bit too big font right there. So let's change this headings so that they are pretty similar to what we have in the main menu for the summary block. Now I can go to this size man, you just make sure that you have the heading selected in the navigator. And you don't really have to see them on you. And it's impossible in weapons for now because I was in the symbols definition. But even though I can change the settings, and here is how it looks now in desktop, I think that's a bit of a buck for a preview That's restarts the preview. Now it looks good and we've made something really remarkable. We've changed a lot of settings here. So this is pretty complicated component that we've managed to create with only a few classes and few changes. And the desktop view and tablet here we have this drop-down menu with overlays and hovers. And in the smallest breakpoints we have the same HTML structure, which is pretty important, but then we have completely different styling. And the smallest screen still need some adjustments. We need to change things a bit, but I think that paddings or margarines, we'll fix that. So let's go ahead and select the navbar once more and open it for the smallest screen size. It's open the menu. And now let's select this nav menu. And with option, I'm going to change the padding settings so that it changes both for left and right hand side. I'm going to set it to eight pixels. Let's preview the drop-down list. Now I'm going to click on drop-down list, opens up money. And yeah, it's pretty much looks good now, I think it will fit in the smaller screen. Let's take a look. It's pretty much perfect. So let's also reposition the logo. It should be in the center in this view, and I'm gonna tweak margarines a bit as well. So let's open a menu ones more. Select this menu logo out. And there is the setting, alignment settings. We're going to change it for this break point only. Also I'm going to change the spacing. I need this margin bottom to be less than 46. So I just click and move my mouse up to set the spacing correctly. As this is the last breakpoint, It will be set in media queries only for this breakpoint. Now let's cycle through the other breakpoints at CDA menu. And it's pretty remarkable that we've managed to create these different versions of menu for each of the breakpoints. And I know it was kind of complicated. It's really tough, especially for beginners. We spent like almost an hour tweaking the menu. But please bear in mind that I've managed to, to explain and to show you to introduce some of the web, those most important features with talking about greed, we've talked about positioning Z indexes. I told you how you can swap an image so you can have CSS images. We tackled the break points as well as media queries and all of that. We've managed to do on this readymade components. We also spoke about drop-down component and the Navbar component. So that was really a lot of ground to cover. Still, if our to explain all the things separately, it took me a lot longer and we wouldn't have this crucial practice. So if you don't understand some of the aspects and still I think that you need to redo it yourself to fully understand and to fully implement those features. Don't worry, just take your time, rewind and rethought those lessons. And please try to redo this menu, but don't blindly follow my steps because I've tried to also implement as many Pepto functions as I can in this project. So this is highly possible that this menu can be made simpler and you can make it even faster. So I hope you experiment and from now on it will be a lot easier. I see you in the next lessons. 19. Features Section: In this lesson, we're going to create features here and we're going to have four features in cards. Before we do that, let's quickly clean up the naming for the sections. I'm going to rename this to header. And also I'm going to have this Section two, not the most intuitive name. So let's have hero here. And in this section we, as usual, we have this content. And for this third section that I've created, we already have content inside. So we can have this as features. So inside will have content. And let's make the cards inside. I'm going to press a and select the link blog because I want the entire card to link to some of the pages on my website. And now let's take a look at this card. So we have a width and height, and it said two to 88 by 140. So we can set it exactly to this size. But the problem would be in smaller resolutions if we tried to rescale our website, it will just break. So instead, what I always try to accomplish is see the smallest possible size that we can fit those elements into. And this seemed to be around 220. So instead of the precise wheat and hide, what I'm going to base instead is minimum width and minimum height. So we can set the minimum width of 221 and minimum height for this element. We can also set its not as important because obviously, when someone changes the viewport of the browser, it's usually the width that's changing, but we can set the minimum height to be 100 pixels as well. So here we have the base component. Now let's create a structure for this component and some basic styling. I'm gonna change the background color to white and also border-radius. I guess it's maybe eight or 12. Let's double-check it. Yep. It should be 12 and also have this shadow, 1535, and the transparency of the black color is 6%. So let's quickly add this. We have 12 pixels here, and also the box shadow that we have on the y axis. So we need to have it set to one AD the distance was 15 and Blair was 35. So fairly big shadow, but then we have opacity of this color only to 6%. Looks pretty cool. Now let's select it once more and let's check what we have inside. We have an icon and also we have two pieces of text, one small caption and one kind of a title, but I don't think that's a paragraph or a specific header. So we can simply use textbooks in here. I'm gonna select 12 textbooks. And also we need to add an image. So again, we can add a div block and then we can put an image as a CSS background of this d-block. And this makes it so much more versatile in terms of how it displays the content. Or we can have the media image in, in our canvas. So it really depends on what you want to do. In this case, I'm going to just use the blog because I want this to be controlled a bit more in terms of CSS and how the icons display. I think it will also make this components a bit more bulletproof in terms of layout. Because imagine if you have an image and then the image has different resolutions, or all of the cars will be displayed differently. I want them to be exactly the same. For the commission and the header, I'm going to add another d-block to hold those elements together. So this is another technical diff blog that will hold both texts together. They just, it will just be easier to position them that way. And in the d-block with an image, let's create a background image that I'm going to add right now let's choose the one and we need to upload from the specific source files for this lessons, I have four files. I can select them altogether and click open or just drag and drop them on the canvas. Now, I have this settings for positioning the image. I need to turn off tiles and also create the width of this element to be. Yeah, and let's take a look at the width because this is quite interesting. We have the height of 60 and probably I want the height to determine this image because there are different widths of the images and the same height. So let's focus on height instead of wheat and set it to be exactly 60 pixels. While the width, I'm gonna just leave to order. And thanks to the positioning to decenter, everything will look fine. No, let's replace this image. We need computer icon here, and let's focus on the positioning. So we have this link block with two divs inside. So I can set the display of this element to be flexbox. And also let's rename it the future block and realign the elements. So I'm going to position them center vertically and also justify so that both these are two separate edges to the left and right-hand side, we have justified content. And for the textbook itself, let's take a look at the property. So we have this one caption with green cover and then peak sodium sounds bold. And I'm going to change the settings. So it will create, automatically, create another class for it. I'm going to rename it to caption. And then I have different captions. The difference between the captions is only color. So I'm going to create a combo class that will address the color in a second. For now, for this caption, let's also make the mortar type options capitalize so that we have capital letters and also change the line height to 14. But for the color itself, I'm going to create a combo class. And now you could create a combo Catholic, green or red or blue, but I don't think it's the best practice because eventually those color colors may change. So if you give it the name green and then make it blue instead of green, it, it won't be really intuitive. Instead of setting the name of the scholar, I'm just gonna use some neutral names such as brand one brands to, or for some specific colors. I sometimes use accept or warning or error for the different state colors. I'm going to address this issue a bit more in the advanced course. And we're going to create a style guide. But yeah, just remember that you're creating a universal class. It's so much better and we're going to name it the brand one for this specific color and may be changed later, but this will be only the color property. So we're going to only change the color property for this combo class and make it green. So let's copy and paste the green color. And you can also add it to swatches. I'm not gonna do it right now, but here we have it. Now let's copy and paste the text. We have software here. And for the second block of texts will also going to copy and paste. And if you take a look at how the text is structured in the design tool, it will be automatically inherited in web flow. So we have a hard return here before services, and it's not really good. I need to get rid of this hard return. Otherwise. I'll have some trouble with his heart return because it automatically creates the brake line in HTML. And this can really make it unpredictable on different screen sizes and browser resolutions. So it's always best to just avoid those brake lines, heartbreak lines whatsoever. And so that in different break points you have full control on the text. By the way, this problem exists also for our header, the main header that we have here, there is a Hearts return here. And I'm going to fix it in this lesson, but just a bit later. For now, just get rid of this heart return and you are good to go. All right, so now we have two blocks here. And for the one with the text, I'm gonna set the margins for now. I'm just gonna set it with shift and create margins from each side is going to be 30 pixels for the image itself. So this is another deep look. I'm going to just quickly rename this to feature text. And now let's move to the image like this def block and create a margin right, 30 pixels, and also rename the class to feature image. So here we have a complete structure for one of our cards. Now let's take a look at the global structure and add some more cards. If I select content, you can see that we have this existing combo class hero. Well, I'm just going to set it for a second because I know it's said to be displayed facts. And thanks to this, you'll see that we can just basically have this feature block copied and pasted over and everything will align pretty nicely. But flexbox isn't the best solution here because I think that greed will be much more versatile. So instead of flexbox, I'm going to add another container. This will be technical container. I'm going to simply add another div on top of the structure that we already have. And now it's inside of the feature block. So let's move it outside in the content, and let's move the feature block. In this debug, I'm going to set the display to greet for this element. And what we need is for columns and only one row, I can click class to add columns and delete one row like this. Each of the columns are now one fraction, so it means they are the same. They have the same size in proportion to each other. And I can easily set the margins between those elements if I want, I can change the fraction size, but I'm going to eat them equal, so one fraction each. And now I could also double-click on the fraction and then set the minimum or maximum width for this element. I can set to a 121 pixels here, but it's not really necessary because I've already said it in the size of my elements, so I can just go back to default, but so just you know that the option is here as well. Now let's select the feature block, Command C and Command V, paste it three times. And you can see that it's so much better than flexbox because I don't have the margins to the left and right hand side, but I can have margarines in between the elements and I can easily adjust them. Greed is also far better in terms of displaying those elements in mobile breakpoints. Because I can always, you know, change the margins and I can always change the positioning and the number of columns that I have four. This particular grid in mobile and tablet break points. I'm gonna do that in just a second. So for now we have the correct structure of the elements. Let's rename this to be featured greed, and let's move to tablet. So in tablet view, what we want to do is get rid of two columns because we want to have two-by-two. So let's add another row like this. And here we have the readymade structure. And also the structure is fully responsive because our components are responsive. So within this breakpoint, we can easily switch resolutions and everything works fine. Now in this landscape, mobile landscape, what we're gonna do is also change the grid elements. But let's take a look at this hard return that I've told you about. So after four in header, we have hard return, we have to get rid of it because otherwise you'll run into such trouble that we have. And let's make sure that we don't have any hard returns in there. And yet now we can get back to the grid. So the greed on mobile views should be just one column. So I'm going to do this in the smallest screen only. I'm going to delete one column and I'm going to add another two rows, so we have four rows and one column. So the structure of elements now looks pretty good in all of the responsive breakpoints, apart from the images that stopped working. But this is a bug or a feature of HTML. Basically what I did is I set the height and width for the image itself. But the container, the featured image container, doesn't have any resolution, so it doesn't have any width or height. And this is the reason why it's simply it's not displayed in the browser. So if you select this feature blog and you set the width, and I'm going to do minimum width and minimum height so that it's still responsive. The images should work in a browser. Let's preview that By Command Shift P. And now you can see that the images are here. Everything is good. Looking, really nice of the breakpoints. Now let's replace the images in each card. And I have this image set to be the background of feature image class. What I want to do instead is similar that we did two colors of the caption. I want to click on this and reset the image. And then I want to add a combo class with a specific image applied. So for example, for computer, I'm going to add a combo class and add an image that's select this image. And I'm going to do it for all of the elements here. So that if you take a look at the base structure of this element is the featured image class which has all the sizing and also positioning. And then on top of that, I'm going to add combo classes for each image separately. And this will make it super easy to create and replace images while still having the structure intact with as little classes as possible. I'm going to copy and paste the text right now. And by the way, I'm going to have marketing here and remove this class brand one I'm gonna create brand to color. And this will be my blue color. For all of the elements. I'm gonna do the same operation right now. So I need to create this combo classes as well as I need to create combo classes for images. So if you want to just fast-forward, you definitely can. And we're going to just make it one by one and create this common classes. For the colours itself. It's sometimes really useful not to create them as combo classes first, but just create a color classes first. So for example, if I create the main class and give it a name of brand one, but only give it to them. Color, setting. It will then be applied to all of the elements, not necessarily only captions. If you add it as a class, it can be applied only to caption. So first you need to create caption. And this brand one is the specific combo class for caption only. But if you reverse engineer it and instead of a caption, create brand 1 first, then you can create a caption. And on top of the caption you can add another class, not a combo class, which will be bra Antoine brand tube R13. And this is a bit more advanced. Oop, but I hope that you get how it works right now. I'm gonna explain this in detail in advanced course of Web Flow. And the first part of this course we'll be creating a style guide which can then evolve into a design system for your website. And this is how I work. Basically, I think it's a bit too much of a hassle for beginners. And also I want you to have really quick results in web flow. And as your projects get more and more complicated, you will come to the conclusion yourself, that you need some kind of extra layer of abstraction on top of everything with some ready-made classes, some kind of a framework for weapons that will allow you to work more efficiently with websites that has a 100 pages or maybe multiple websites that you will create for your clients, for the basic course that we have and for this super simple one page layout that we create, I don't think it would be useful. To the contrary, it will confuse you a little bit. So let's work on the basics of Web Flow and especially styling and positioning elements. And in the next course you'll get to know more advanced features. But right now, what I did is I replaced all of the icons. I've changed the width and height and then positioning and also turn off tiling. And now we have these components as well as I created the captions. So I think that's our features section is almost ready. 20. Delivery Section: Welcome to the next lesson. In the previous one, I have removed the heart return from our title. And now it looks pretty much different than all of the breakpoints because it was HTML noted the styling change. So if I check the width of this element and set it to be maximum width of 530 pixels. Everything will go back in place. So let's leave it like this and remember about this hard returns because they can cause you a lot of trouble. Now what we need to do is adjust some margarines. We have around 40 pixel margin in here. So let's select features and set the margin top to be around 40. And now it looks pretty good. But if I change the resolution, you see that everything is aligned like there is no padding between the edge of the browser. And I want to account for this in the content. So I select the content because content is everywhere in all of my sections. And I'm gonna set the padding to be around 20 pixels from each side. So I have 20 pixel left and right padding. And 20 plus 20 is 40. And it means that if I change the max width for the whole content instead of 1242, I'm going to have 1282. And this accounts for this 40 pixel padding. And now it looks the same. But in lower resolutions, you'll see that I have this nice 20 pixel padding right there. And I think it looks so much better. Now let's take a look at different breakpoints. So first we'll have this tablet breakpoint and let's confirm and the project how it looks. It should be in the center. And here we have a bit more of a margin from the top and also to the section with features. What we need to account for is also the menu that's actually non-existing because it will be cut out from the document though. That's why I'm going to set the margin to be 160 pixels. And I'm gonna do the same for the bottom of the hero section, I'm going to just add a margin of 100 pixels. So that is in line with the design. Now let's go to a mobile breakpoint, the first one here. And I think the margins are to be cred now, so let's re-adjust them and set the top margin to 120 pixels. And the bottom margin, we're gonna just contract this margin to be 60 pixels, as in the design. And there we have also change the font. So the font in the mobile view is a bit smaller. So let's select the All H1 headings. We don't have any special class here, but we can work with this tag element class. And this is a nice case because if we change this to 35, it will be changed only for this breakpoint as well. So if you've have HTML classes, those pink classes, they will also be adjusted in the mobile breakpoints so that we have this special media queries for them. And you don't really have to create extra classes to, for example, change it in mobile view only. So I guess that's it for the main sections of our website. Now we can check the preview Command Shift P and then scale from the smallest screen size to the biggest resolution. And everything works really great. We have created those elements so that they are bulletproof and they are scalable inside of the layout. So. We did a really good job in making those responsive. And one great takeaway is that you make this responsive breakpoints as you go along with components. So when I create another section and I finish, the desktop view of this section are usually take a look at different screen sizes and adjust them accordingly. This is the best way to go in web flow. And now I've just copied this entire structure, changed the sections named to delivery, delete the fisher grid, and here we have it once more. The section and content inside. We're gonna create a header, will have this caption. Then we have header and then paragraph in the background, we have some funny shapes. Now let's recreate this. I'm going to add first textbook, it's going to be caption, then heading and then paragraph. And I think that would be nice to wrap everything in a def block or a link blog depending on what function you want to accomplish, we don't want it to be a link. So I'm adding a simple d-block as a technical element. And I'm taking everything and putting it inside of this div block in the correct order so that it renders properly. And now let's take a look at the size of this element is 530, around 530. And I'm gonna put it in max-width as usual. I want it to be mock Sweet, not the width itself because it can be narrower, but it cannot be bigger than this. And 40 alignment of the text. I'm going to put it in the center. Now let's go back to the content and I need to apply another combo class to the content delivery because I want content to be flexbox. This way I can easily justify the content inside to do horizontally center and put this header in the center. Let's make sure that we are incorrect design breakpoint in desktop and let's check the margins here. That's one AD margin top for the entire section. So let's make one ATP. So Morgan here and I need to restyle the content as well. Let's first copy the text as usual Command C, Command Z pasted for the heading. We deliver on time. We're going to copy and paste. And for the paragraph, we're gonna copy and paste it as well. Now let's create the styles. This is caption, but it's pretty much different than, than the one we had an features. So let's take a look at the properties. We have 12 pixel size and 2016 pixels line-height. And yeah, that's pretty much a bit different than the one that we had, but we are also going to have capitalized option turned on. And let's rename this class dot was captions. So we're going to have corruption header here. Also lets the div book itself. I'm going to have the name of header section. And actually I'm gonna make this section reusable. So I'm going to press Command Shift a to create a new component. I'm going to give it a name header section. Now it's a green component and we can reuse it on our website. There, there is a lot of places where we are going to fit it in, but basically it's going to have a bit different structure. First, let's go inside and let's create overrides for all the fields here. So we're going to have an override for caption. We're going to have an override for heading. We're going to have an override for paragraph itself. We're gonna give it a name of a say description may be. And all of those fields can be overwritten for the component. But one of them, especially paragraph, won't be visible in all of them of the header sections that I'm going to copy. So if we have a duplicate here, let's have a look at the symbol. What we can do is simply delete the text from description. And now it appears in Web Flow that something's here and adding some partying or margarines. But in reality, when you preview this browser, it will simply disappear because this container has no content, so it's not rendered. It has no height and width because it doesn't have any content and caption and heading. We can always set different texts in the property panel itself so we can easily copy and paste this headers all over the place and it's reusable. So now you see that as we proceed with the layout, it's so much easier to create next elements. Now, for the image that we have here, I've just exported the entire image from Adobe XD as an SVG. And now let's imported into web through. I'm going to upload this image and you can find it in the source files. And we need to apply this image, SBA CSS background for the entire delivers action. So let's select delivery. Now let's go to the styling and we need to go to background and image gradient we have here. We can choose the image and apply some settings. This is the most flexible solution so that we can have tiling set to none, we have position set to center. And the most important setting that we're going to focus on is the size of the elements. So previously, we've set the width and height of the elements, but right now we want to use different CSS properties and those are cover or contain. And those are pretty cool options. I hope that you already know them from CSS. And are you going to use them a lot? Basically cover and contain works kind of similar because they will feel entire space that's available in the container. However, if you set it to cover, your image can be cropped. So you can see that it's cropped from top and bottom, and if you set it to contain, it will never be cropped. However, in this case, the size of the image will be determined by the height of the elements. So it will try to fit the entire image. And the height will be the thing that determines how big the image is. In other case, if the screen is very narrow, in this case, if you have contained, the width of the element will determine the size of the image. Having contained is pretty cool. But what I can do right now is change the size of this element by setting the padding instead of a margin. So if I start with the top padding and add 50, you can see that the image is now much bigger because the container occupies much more space. So I'm going to add padding to top and bottom. And I'm going to contract 50 pixels that I've added from margin top. And now it looks pretty good, thanks to this background size contain that I've said. Now I have either the height of the element or the width of this element. In smaller screen sizes, it's determining the size of the image, the background image, so it's fully responsive and it works pretty great in the mobile view. Either think I need that much of a margin or padding. And also I'm not convinced that this image at all. So for a start, I am going to select delivery and I'm gonna contract the margin. I'm going to just leave maybe 20 pixel margin here. But I also want to get rid of the image. And let's go to background image. And instead of deleting it, you don't want to delete it because it will remove it from the HTMLs and from all the breakpoints, you want to hide it here. And this will be applied only to mobile breakpoints. So I don't have it in mobile, but I have this element visible in desktop as well as tablet. That's it for now. See you in the next lesson. 21. Standards Section: Welcome to the next lesson and you'll see that it will be far easier to create next section while we have something that's ready-made. For example, this hero section is pretty similar to what we want to create right now. So I'm just gonna copy and paste it once again. Let's go to hero and remove this class. Now, this is pretty important. We need to remove the first-class and create a new one. Instead of renaming the same class, that would be a disaster. So let's create a new class that's called standards. And for the hero header, I'm going to delete this class. Let's remove it and create another one as well. This is hero standards. Alright, so the base structure is here, but we also need to create some other elements and replace the image. So let's start with replacing the image. Double-click on the image, click on replace, and we need the image from our source files. So let's upload it and select the SVG file. And here it goes. Now for the structure, so we have caption, we have header and also a bottom. But in the design file we can see that there is a paragraph as well as some extra elements on the bottom. So let's create another paragraph. I'm going to put it here. Now let's change the settings for this hero standards. We need to restyle it. We have white background and also 600 pixels width. So we're gonna put it in max-width 600. Now let's change the background color to white, as well as the border-radius to 12. And also I'm going to set the padding. I've checked it in the design. I'm going to press shift and hold, and I'm going to have 44 pixels padding each side. And then let's copy and paste the texts for the caption and header and also for the paragraph here. And I think that the last property for Hero standards is the shadow. We have this shadow of 1835, 6% opacity. Let's add it as a box shadow here is yes, as properties, we need this to be on x-axis, distance is 15, then we have 35 pixels blur, and color is set to black with 6% opacity. Alright, now let's take a look at the buttons. So we have a symbol here. And unfortunately for overrides right now, we cannot overwrite color in where faux, maybe you can enter the recent version, but I'm going to right-click and unlink it from the component. So now the button is completely separate structure in HTML. But either way, it's completely different, but it has the same class bottled beak. So if I change the colors on button big, it will automatically change in component as well. So instead, I want to add a combo class, and you can think of creating different versions of bottles, for example, with different colors and have different variants. So if I treat this button beak as a base class, again, I can have, for example, buttons style 1234 and change the colors inside of this combo class. So here I'm gonna change the background color as well as a color of the text to our midnight blue. And this way, I keep the same button beak class as a base, but I can add different styles for different buttons on my website. So yeah, that's pretty clever. We can leave this structure as it is and as it gets more complicated, you're going to see that this combo classes will. Rescue you many times because for example, if you change the state to hover, Now we can easily change it because the structure is different so it will no longer applied to the button hover class, but only button beak, button's title one hover so we can make a bit lighter background, and this won't ruin our previous component. Now at the bottom of this element we have three starts. Let's add the structure for the first one. We can either use Link book or D block. In this case, we're gonna use the block. It's not going to be the link. And inside we'll need to have textbook. It's going to be simple caption and also a heading. So let's start with the heading and then we have the textblock. And it's going to be the same caption as we have here. So I'm going to use the very same class caption. I'm going to come on to return and start typing and then return and apply the same class. And for the heading, we don't need to apply any class because it's just heading one, our default styling for the div book itself, we're going to position things in the center, so center align the text and also make this space a little bit smaller in between the text. So we kind of need some negative margins for the caption. And because we want to add some extra Morgan, I'd like to create a combo class and this will be only for this standards. So I'm using caption standards here. If I want to make it more generic, I could use some other name, but I'm going to be applied only to standards. So I'm just using this combo class and changing the margin so it's negative six like this. I'm, let me copy the text and paste it here. And also let's copy the captions tags. By the way, let's take a look at the size of this element. It's 106 pixels, so let's change it so that the max width of the element is one hundred, one hundred six. We need to more of such elements positioned next to each other. And I'm going to create a structure first. So let me add another technical container that will contain all three. This will be a simple d-block, and let's put it on top and put the book free inside. And now let's change the name. That's going to be stat standards. And for all of them, I'm going to have pleura. So this is studied singular and here I'm going to have pleura starts standards. So yeah, that's one of the naming conventions that I use. So individualist stats, we can copy and paste that we have 34 stats standards we can set display to flex or greed depending on what you need. I think that flex is pretty quick to adjust right now. And yeah, there we have it. Maybe some margarines and some extra margarines around 40. Let's check this pacing around the bottom. It seems to be quite correct, but for this stat standards, I need to set the margin top of value to be, let's say 30 pixels. Let's apply that and let's check how this looks in different resolutions because right here is pretty much okay. Web Flow automatically says the width of the images to 100% so that these Cato seamlessly and are responsive. And in the tablet and mobile versions, we don't have this image whatsoever because we've simply copied the hero section and from the hero section we have this image disappear. So this pretty much the same. And I want to keep this that way. If I need to show this image, I can easily do so and change some classes, but I'm going to leave it for now. And by the way, we have this content hero combo class here. That's just because we copied this entire section from the top hero section. So we have this combo class, but it doesn't really harm us. Basically the margins that we have here in spacing are inherited for this hero class. So it doesn't really matter that they are inherited from Hero itself, right? So in content hero, we can easily delete those values for top and bottom because they are still inherited from hero. And that would really reset the margins for our hero standards. And I want to do it because I usually set the margins for the section itself, not for the content. So now I can go to Standard section. And for this section I can set the margin to be, let's say 80. And I can also set it to margin bottom 80. And you'll see that having structured like this, let me collapse all the elements. Having structure with sections and margins applied to sections will let you easily change the whitespace on your website by just, you know, navigating for sections and changing the values in different respective years. So for me it's much easier that I don't have an extra margarines set inside of those sections. I can go to mobile landscape or portrait. And for the individual sections, I can apply margarines differently and they will be stored as media queries. So for example, here for delivery, let's change the margin slightly in the smallest version. And also I'm going to change the bottom margin on top like this. By the way, I can see this image didn't disappear. I think that in the previous lesson I tried to hide it, but I don't know, maybe it hasn't been saved. So let me quickly select the image. And from this breakpoint, I'm going to just hide delivery image background. And now it works really well because it starts from tablet up and I think that we have another Stan, another section ready. So that's it in this lesson. Thanks for watching and I'll see you in the next video. 22. Tabs Section: Hey there, welcome to the next lesson and to our next challenge. So this is pretty cool. What we're gonna do is have this tabbed menu. And if we click on education, government, business, and individuals, it should display different content to the right-hand side. So let's try to created in web flow. And this would be pretty cool because we can use component, readymade components. Again, I'm gonna copy and paste one of my sections, for example, delivery so that I have the right structure, the content. I'm gonna delete the delivery class from the content, and I'm gonna delete, remove this class, the lever class from the section so that I can have a new name, for example, Target. And for this specific section, I'm going to be able to apply some margarines. Now let's go to the content and we're going to use component. So what we have here is Snyder components and also tabs component. In this case, we're going to use tabs component because it will let us create similar structure to what we have in design. Now let's quickly switch to target and add some margarines, two top and bottom so that we have some breathing space and less explored the tabs component. So inside we have tabs, menu and content, and all of those elements are positioned to relative. And for the top menu and tabs content, we needed to be next to each other, not below each other. So four tabs menu, what I'm gonna do, pay to facts and then change the direction to vertigo at an easy change. And we also need to set the taps itself and change its display to flex so that we can set the justify option and set it to be centered. So now we have tabs to the left and content to the right. So this is exactly what we expected to be from our design. Now, if you click on the content, you'll see that each individual element is set to have its content, its tab-pane. And also we have doublings as a menu buttons. Inside we have textbooks and if we delete, delete the doubling automatically, the content that's related to this doubling is deleted from our structure structure as well. One of the most important thing for now is to set the class names for the doublings. And I'm gonna give it a name, tap target. But this link has a special state of current and I've applied it to the current one. So I need to apply the same class, tap target to the one that's not in current state, okay? And the current state is actually the tablets already selected. So in our case, it should be the one that has this pink color. But we're gonna start from the base class, so from the top target class, and I'd like to change the size to 30, and then the line height will be 41. We're gonna change the background to be transparent for this class. And also DM Serif display is going to be defined. So we have the base. The base is also used in tap target, but also we have one combo class which is current, and this is currently selected tab, it's not the hover state for this element. If you take a closer look at step targets, you can obviously add some hover state two, this one, and you can edit these tiles. But then you have this third style, style that is applied when the tap is active. Okay, so for the overstate, I'm gonna change the color and background color, sorry. But the color for typography, and this is on hover state for our base class. But in this current state. We also need to change it to the very same code that we have on hover. So I'm gonna change the color, but we also need one extra element, and this element is a little dot to the left hand side. And we can just create it in a couple of ways. In web flow, we can create an animation, but we haven't yet talked about animations. I'm gonna do it in one of the future videos. So instead of creating an animation here, I'm gonna go to the preview, inspected and create a little bit of custom code. So let me select this class. It has a current class that's basically the one that is active when someone clicks on this particular element. So having that class will let me go to Project Settings and to custom code once more. And I need to create a quick fix so that I have one more element in front of this class. And if I use pseudo-class before, I can add an extra element before this particular HTML element. And what you do is basically use this content. And inside I want to paste this little dot. I just copied it from ascii signs. And then I also need to make some offset. So let me have this margin rides to be set to, let's say five pixels for now, I'm going to save changes. Now we can go back to the designer just for a second because I need one more thing. Because right now the dot will appear on top of a selected tab. And I want this to be to the left hand side. So I need to change the display property for this element and I'm gonna set it to display flex. Thanks to this, this will be always set to the left and right hand side. I'm gonna do this for my base class as well. So I have displayed a VAX here on my base class. And obviously you won't be able to see it in designer or in the preview. You'd have to first publish your website and then you'll be able to see the changes in the custom code. So now I have this little dot and it almost works. But I need to do is account for the change in the width of the elements. So I need to, for example, add some margin to the left-hand side as well. I don't know the exact value of this margin. I've added negative five pixels, but I need to republish it to just make some changes and preview this within the inspector view of the browser. So if I inspect right now, I have this before pseudo-class which I can select. And now with my keyboard arrows, I can tweak this margin left. So that is almost perfect, I think minus 15 pixels. So upsetting it by 15 pixels to the left would do the trick. So let's save it. And we have just a little bit of custom code. Let's republish this website and it works like I told you, it can be done with animations and we're going to learn about animations and one of the next videos. So if you want to do it with animations, bear with me and I'll explain it later. That's it for now. Thanks a lot and see you in the next lesson. 23. Responsive Tabs: In a previous lesson, we've been creating buttons right now let's focus on tops content. So we have tab-pane and the content will go inside this pain. We have a background image and paragraph. Let's start with a deep GGAC is going to be this background. So let's copy this color slide being, or an animal salmon color and put it in the background. We need border-radius of 12 pixels. And let's copy the text and create a paragraph inside of this element. I'm going to add a paragraph here and just replace the text to the one I have. We need to set the sizing correct, so we have 500 pixels width of these element. I'm going to select the blog. Let's go to the width and I'm going to set max-width to 500s. As usual, add some padding in the project it was 30 pixels, so that's the 30 here. And for the text properties we have the ampersands 24 regular R That's apply all the settings. I'm going to change the size and the line height, as well as the color. Set it too wide for the entire d-block. And also we need to change this, okay, we need to change this for that div booklets change their font-weight from 700 bolt on the blog to 500s, medium or 400 normal, like so, let's rename the name of the class afforded. Two tab. This is one individual tab. And in the tab pane, I also need to create some kind of padding. So we can have something similar to our layout. I'm gonna apply, apply around 160 padding to the top pane to the left-hand side. We're going to change it later for the different tabs. But for now, let's add an image inside, inside the pain, and let's choose the image with a table for now. This is the easiest way. Otherwise in CSS we have to create another container. And while we add an image like this, we can easily set the negative margin so that we have this little offset and we can put it something that's pretty similar to what we have in the layout. So this is the first top that we've created. Now we need to create another tab and it looks like this. It has a bit different feel and also its position differently. What we're gonna do is copy and paste this structure and then change some properties and classes. But first, let's take a look at tabs. I'm going to select top taps content. And for this particular element, I want to set the width to be 650 pixels. And this is just to keep everything in sync. So if I add another content for the panels and I said The often offset differently or the images will be a bit. Why there? It will always be in the same, the same width. Ok, so let's copy and paste the content here. I've pasted tab and the image. And for this top, I'm going to add a pseudo-class that will be like top seconds, for example. So that we can change and apply some different CSS styling. So we can change margarines and make an offset like this. And also for the image, we need to change the image itself. So I'm gonna change the name of this class to tap image and add a combo glass top image second as well. And for this image, let's replace it. I'm going to use a cardboard and I'm going to make this margin to be. A 150, around a 150. And let's make it a bit more. This is just like similar to what we have in the layout. It doesn't have to necessarily be the same, but you get the idea. So the last thing that we need to change the background color, so let's do it. And there we have it for the tabs where you can also add some margin or for the entire section probably, but let's add it for tabs for now and let's preview if it works. Alright, it works pretty good. And what we'll be doing right now as just copying and pasting the tab menu. If you at copy and paste it two times, you see that it also copies the content. So we have tabs and we also have the content copied. We can now copy and pasted the names. And obviously for the rest of the elements for business and individuals would have to create and design the other content view, but it doesn't really matter for now. Let's take a look if it works. Obviously we don't have this little dot, but this will be only visible in the published project. Now let's take a look at the responsive versions and we start from tablet as usual, let's select type image and select display to none. And we have to do it in all of our taps. So just remember that we have to hide the images in all of the tabs. Right now we need to kind of sort this fixed width issue that we have because we've set some fixed width for multiple elements. Right now we want this to be 100% width of the entire space that it can occupy. So let's first select tab content. And instead of fixed width, we're gonna set it to 100% from tablet to smaller screens. And also for the top, we're going to do a similar thing because we have a fixed width of 500. We're gonna set it to 100. And now we just need to fix the paddings because we have different padding applied and also some margarines probably. So we can for a tab-pane, one set paddings, right? And for the second one, we need to reset the margin and now it should be all fine. So yeah, that was a bit of a cleanup, but we've created this so that it's really bulletproof and it's really back to the default 100% scaling instead of some fixed width, that would cause some trouble in different views. Now, in the phone view, what I'd like to do is change how taps display and because we have facts, we can just switch it to vertical and that's really what we need to do. And for the tabs menu, we can set the alignment to be center. This is textbooks as well, so it works out of the box. Then we have this margin that we can change for tabs. So let's reset it to around 18, for example, for a top margin. But I'd like to add some additional margin for the tabs menu at the bottom. And I think that for the mobile views is pretty much it. Guess if we switch between the tabs so that I can preview how it looks. It's pretty good and tableview is going to be around as well. But let's double-check it. In mobile works well, in tablet. Here we have tablet. Let's switch between different sections. Works really good. And in desktop view pretty good as well. Also with images. When we publish the website, it will also display this little dots next to the active tab. So I guess we have this section ready and we can proceed to the next one. 24. Logo Grid: Hi there and welcome to the next lesson. Let's create this, our clients section right now. And first we're going to need title. So let's copy and paste delivery. And all we need to do in order to get rid of this graphic elements in the background is to delete the delivery class. So let's remove this glass. And here we have our header section, which basically is a component. So what we can do is overrides that delete descriptions because we don't have this texts in the design. And now let's copy and paste the text. We have this heading and also our clients. It doesn't matter how I capitalize it because it's automatically created with all caps. And now let's copy another section, for example, features. Let me move it to the bottom, and I'm going to use this structure in order to create another section. Alright, so let's go to the content. Later on you're going to change the features class and margarines, but now let's focus on the grid itself. So let me have another d-block. And inside of this div block, I'm going to have all the items for the D block to be centered. I'm going to give it a mock suite of 500. And there is a nice option in web flow that will let you center any container that has a fixed width or maximum width set. And if you go to spacing, you have this little icon that will allow you to center element horizontally. So that's what we're gonna do and now we can add some elements inside it. So just for demonstration purposes, what i'm gonna do is set some margarines and being so that this element is in the center of our screen. And right now, I'd like to showcase two options which you can basic use in welfare to create some kind of Masonry grid like this. I'm going to set the styling first for our image and images. I need to upload them from my source files. I have all the logos that will now be imported into our library. We can use the first logo and let's restart this element. So we're gonna work on image itself, but we're going to come on to return added a class. It's going to be Logo. So now let's set some properties from the design file. So we have a white background and also some border-radius. I think it was 12. Let's double-check. Yep. 12 and also some border box shadows. That's 06. And then we have 6% capacity. So let me quickly at this properties and this will be the blueprint for all the other logos that I'm going to use. Let's change the alpha 2, 6%, or 3%, I guess. And we're going to duplicate this image, and we're going to try to have it in different settings for the rows and columns. Obviously we can use green for that, but I'd like to show you one more option that I most commonly use for the text and not for images, but it also works for images. Let me first duplicated and show you on the text because it's the most obvious example. I'm going to add a paragraph here. Now let's go to styles. And in typography section of styles, you have more type options so it has to be expanded. And one of the first option is that we have as columns. So all you can do is you can set the cones for the text. And if you change the value here, for example, if you want to have two columns, it will automatically split your paragraph into three or two columns or whatever value you enter. So this is pretty cool, but not a lot of people know that it also works for images. So if you have images in the d-block free, you can select this entire, entire container and you can say that you want as say, two columns. So the images will automatically be aligned into columns. And we also have some settings that you can adjust that for example, a GAAP or style a width. So this is pretty cool. We have it set for both DFF blocks, but I can undo this action. So I just wanted you to know this method because sometimes you'll use it. It's also pretty great in terms of responsive versions of your website because for the desktop view, for example, you can have three columns for the text, but you then decide that for a tablet you want to address this space differently. For example, create two columns. You can obviously do so. Let's create tablet version, and this is CSS styles, so they will be overwritten for this particular breakpoint only with media queries. Now in tablet you have two columns and industries you have three. Okay, let's undo this operations. And I won't be using this particular method in this case because I wanted to show you some more advanced greet options. So for the debug that we have, let's make it plural. And I'm gonna say logos here. And let's turn this into a grep. Now the most important setting that we'll be using for this grid is the alignment options. So you have this alignment objects right there and we can make the elements inside of the grids. So degreed children, we can make them appear from the top to bottom and from left to right. So if you adjust the content according BUC that the container that we've created for a logo is automatically stretched. And if I copy and paste elements, they will automatically fill in the Great, and I didn't even have to create some kind of containers for them. It will work out of the box. So I have seven Legos, so I need to copy and paste three more. And now let's take a look at Greek settings. So let's click on this little icon and I got to have some columns and rows. In terms of rows, I need only two and I need some more columns. So let me have four columns for now and I'm going to leave to row. Okay, that's fine for a start, but we still need to work on that and we need to adjust for some spacing. I'm going to click on the little lock icon to set it a gap to be equal for columns and the rows. I'm going to sell it for 30, at least in our desktop view, which we're going to adjust later. And here we have this max width and we need this width to be closer to 1200. I guess we have 1242 for the width of this elements. So let's set the max width to be 1200. And probably the most difficult thing is that those logos are different in size. So we have some of them that are equal in wheat, but have different height and so on and so forth. And basically grid will allow us to make adjustments like this. We have fractions. So for a start, we have elements that are equal because each of the columns, they take equal space. They take one fraction. We can easily resize the fraction and 0.25. increments so that we have, for example, one-to-five for the first one or 1.5, and then the other are equal. And it will automatically get the measurements right so that we have a correct proportions. And one other great feature of grid is if you accept the changes, you can now click on the element and you can resize it to whatever number of rows and columns you want, and it will automatically adjust its size. So what we're gonna do is basically we are going to add some more rows. Maybe we're going to add some more columns. And then we click and drag on those elements so that the layout is more and more similar to what we have in the exec file. So you can change the fraction size. You can also accept the changes by pressing Escape or Dan and then change how it appears layout. So click on the element and then make it wider. And this is how you will end up with a ready-made Masonry grid that's basically here for the desktop view. So another great thing about the grid is that it's CSS. So basically in all the other breakpoints, you can readjust the items. You can make them smaller or bigger. You can add or subtract the rows and columns. And it's all CSS based, not HTML. So you have it really nicely aligned in all of the breakpoints. And it also requires not that much of a work to just, you know, change the cheesy completely so that for example, all the logos are, are in one row or one column. So now I'm adding some more rows and maybe some more columns in order to account for the design that I have and some slight changes, I'm going to just have this logo to appear for free columns. And also the one that I had, the one fraction here, I'm gonna change it to 0.75. This one will be smaller as well. So you get the point. And now we are pretty close to what we have in Adobe XD. So one last thing that we have to do is simply exchange those logos and it's as simple as double-clicking on the image than pig on the replace image. And we're replacing all the logos. We have them all in the library. So it's super easy and I'm just going to make a few adjustments here. He will have instead of Mozi cow will have circle. And here I need to replace this logo to be yeah, I guess light AI. And the last one we have here is false. Alright, so we have everything in place. And now let's address this tablet and mobile views. So again, I told you already that this is CSS so you can make any changes to position and also you can change the number of columns, as well as rose is not HTML. So this will be applied to all the mobile breakpoints from this one to the right hand side. First thing that you can adjust is a gap. You can do it separately for columns. I'm gonna set it to eight. And you can also do it for rows. You can add some extra rows, you can lead some columns, you can. Obviously in this view, also changed the behavior of elements. So you can select any of the elements if you can. If you want to resize it, you can do so. For example, change the size of this logo, and now we can get rid of the last row. We don't really need it, and it looks pretty okay. Mobile views are a bit too crowded. So we have the smaller and bigger view. We need to adjust the number of columns for sure. And you can go as low as one column for example. And you can have all the logos in one column, many rows. And you can also have two columns probably resize some logos so that they fit. But if you take a look at how much greed gives you freedom in terms of resizing and this elements and also positioning them correctly. Also in Greek, you have this areas that I'm not going to cover right now because it's a bit more advanced topic. But if you want to go even further with all the adjustments, you can definitely do so in you can add some areas within one grid cell and then position elements accordingly. So I'm going to set the tablet rose gap to eight pixels as well. And now it looks pretty okay in tablet and mobile landscape. And in mobile portraits, I'm gonna get rid of extra rows, extra columns, sorry, and I'm going to also add the rows later. Now let's have this logo position so that it covers the entire space and circle I'm going to put in on top and fossa, I'm gonna make it simply bigger like this. So there you have it and it was pretty easy to set up and also gives you a lot of flexibility. May be, it's not like exactly the same as we've had in the design, but I guess now it looks pretty okay. Everything is aligned properly. And maybe this view, this version of tablet view, might need a little bit tweaking so it can get back there, but all the other views are really ok. In this tablet version, I'm going to take this light AI logo and just make it bigger. Your clients will be happy. Now, let's get rid of an extra row here. And the mobile landscape, I'm going to add two more rows so that the grid is complete. And mobile portrait, I'm also going to add one more row. And we're pretty much finished right now. And close to what we had in the design file, you can always tweak things around. But the most important thing is that you now know how to create Masonry grid using the CSS grid itself. And you also know how to tweak the text columns. See you in the next lessons. 25. FAQ Structure: Hi there, welcome to the next lesson and let's create FAQ section below our referrals. For now I'm going to get rid of the margin at the bottom. Also, I'm going to remove this features class. I'm going to add another class. Let's have a meaningful name here, for example, logo section. And for, for this section that with header we're going to have Logo header. This way in Navigator, we can easily see and scan the structure of our document. So that's pretty meaningful. Alright, now we've recentered the margin, and right now we're going to add a little bit of margin. Remember that you can press and hold shift to add margin from each side, but you can also undo and press option and hold to add margin to top and bottom border. That's what I'm gonna do. And right now we just need to duplicate both of this section. So first level header, and we're going to have a header for our FAQ. Let's put it down and structure. Remove this logo hovercraft class. And yeah, let's give it a name, let's give it a class, for example, FAQ. And let's double-check into design and how it looks well, we have questions and answers, so we have to copy this first and paste into our override for the heading and caption we're gonna just use. That's fine. So yeah, actually logo FAQ is maybe not the best name of the class, but let's leave it. Let's proceed with the next section. I'm going to delete the content with logos. And for this logo sections, let's remove class and add the class that's more meaningful for FAQ, for example, FAQ section. And now let's create this FAQ I them. So let's go to content a. Then let's create a div blog. This is going to be like a technical container for everything that's inside this FAQ item. And let's copy the text here we have the display 30 regular. That's a by this properties. And I'm also going to give it a name. So that's going to be FAQ. Aren't them? At the exchange, the background, the background color is white and also we have this 12 pixel radius as usual, let's create the question itself. It's going to be a heading, so I'm going to double-click on the heading, but now I'm going to change the type of this heading two header free. And let's read style all of the h3 heading. So I'm going to use this class and let's reset the margins. You can either like boot volume, for example 0, or you can press a reset, or you can Option click on the value. Whatever you do, there are gonna be reset it. And now we have the M Serif display, also the size and the line height we're gonna set S in the project is going to be 3041, I guess. Yep, there it is. And let's go to some other settings. So what we have is a 30 pixel padding, top and bottom. And we're also going to add some padding to the left hand side to all of the items that will go inside this FAQ item. So let me press and hold, shift and apply padding to this FAQ item. And now it looks pretty good. What we need to account for as this little arrow. I have this RO, I guess in the menu next to services, there is an icon that I can reuse. So let me just copy this element command C and we're gonna paste it here in the FAQ item. What we need to do is remove this class, I don't need it, and I need to reposition the elements so. What I basically need to do is let's set the position to study for this R0 and for the FAQ item, we're gonna set the display to flex so that we can easily position those elements as heading will take as much space as possible. And arrow has static positioning. It will work just fine. And what we're going to have here is let's right-click and edit master component is we have another state for this element and this is the answer state. So for this answer state, we need to design. We basically have some text underneath, so there is structured out. We have to rebuild for this and we need to reveal the structure with some kind of nice animation probably. And so we're gonna do that in the next lesson. But in this one, let's focus on the structure because we need to set this structure right in order to create some, some cool animations later. Now that structure is FAQ items plural, and then we have FAQ item inside we have heading and icon. But what we're going to need here, as in other structural and, and this is going to be a d block and inside we're going to have question. So let's give it a name of the class. I'm going to press Command, Return to go straight to the selector. And let's have an FAQ item answer. Inside we're going to have a paragraph. And for this paragraph that's paste the text that we've copied. So I'm using this FAQ item answer because this will be a bit more complex structured and just a paragraph, I'm going to add another div block. And this is going to hold together all the questions elements. So we have as IQ item question and I'm gonna put here the heading as well as an icon. And the other def would just hold this paragraph. So the structure is maybe a bit more complex right now, but it's so much easier to work with because we now just set display flex for the question. And we said we'd do 100%. And for the FAQ item, we're just going to use, we have legs books here already. But what we're going to use is basically for children, we're going to switch this to wrap instead of don't wrap. And this will automatically push this FAQ item answer below our FAQ item question. Right now we have to work on the bindings and margins. So let me check what kind of space we have here. It's 16 pixels. We can either add it to FAQ item answer and I'm going to add it as a top margin, 16 pixels. You can add it to FAQ item question as a bottom margin, it doesn't really matter. Now we have the basic structure for the question that's in the open state. What we basically going to do is we need to put those questions, we need to duplicate those questions, and we need to put them into columns. And you can accomplish this in the web flow in many different ways. If I copy and paste FAQ item, they will be below each other. What I want to do is to have them next to each other. And you can do, for example, flexbox or you can create agreed. And I've already told you how to do it. So right now, I'd like to introduce another way that you can create columns in Web Flow. And this is by using layout element columns. So we have this container greet section and columns that we're going to use right now, I'm going to double-click so that the columns are added directly to the content. And here you have the settings, so you can have many columns. You can customize the number of columns and also you can customize how they appear next to each other and how much space each column take. So this is pretty complex, but at the end I think it's fairly simpler than having greet here and we don't really need greet. So in the columns itself you have the structure of column one, and this is where you should put FAQ item four, FAQ items. I don't really need this anymore, so let's get rid of it. We can probably just delete this class, removed the class, and also we need to remove this element altogether. So Let's select it. We can press backspace or delete in Navigator to get rid of this HTML element. Now if I Command C, Command V, copy and paste this items, they go into column the one I can obviously move them to call him too. But right now, let's, let's use this column one and let's see in the tablet view how it, how it's supposed to look, what kind of marketing we have here. Let's set the bottom margin for FAQ item. It's actually best to set the bottom margin here and there we have a nice spacing for column two. I'm gonna copy and paste for FAQ items as well. And here is how it looks is pretty great. And also you can adjust those columns and this is pretty cool because if you go to this column settings, just make sure that you selected columns. And what you can do is basically set the desktop add above number of columns. So I've set free and you can see that it's inherited into tablet. We can go back to two, or let's undo it and change the number of columns. Also, customize how they appear next to each other. And in tablet and phone views. We also have the ability to change this little icon. And this will simply change from two columns to only one column. And you can, you can see that this is the default for phone. So in phone version, both in the bigger one and smaller, we have only one column, so we don't really need to. I'll change it and it just works out of the box. So there you have it. Many different options to set up columns. You can do it this way. You can use flexbox or greed, or you can, even if you have text and images, you can organize them in columns with CSS property that's assigned to typography options. That's it. See you in the next lesson. 26. Animation Basics: Hi there, welcome to the next lesson. Here we have our FAQ structure and what we can create right now is an animation that will show the answer when someone clicks on the heading. And this can be accomplished in many different ways. If you've ever tried to animate in CSS and write CSS code for animations. You know that this is really complex and it takes a lot of time and iterations. Luckily, Web Flow has as covered and we can create great animations within the web flow interface. We can create simple animations with the style panel and transition effects. But what we're gonna do instead is go to the last panel that we haven't touched yet. This is interactions pane and we can press age or just click on the solo founder. And here we have interactions. We're gonna work on triggers for R. So we need to think of what will trigger our animation. And there are two types of triggers. The first is elementary or the second one is page triggers afforded page trigger. Basically there's no user interaction. It triggers when the page is being loaded or any other page event. And usually it's independent of user does. It's really, it really heavily relies on the page. And then we have elements, triggers, and those are usually connected with some kind of user interaction on our page. So they occur when someone clicks on the button or maybe hovers over something on our webpage. And then we can play back some kind of animation that we create in advance. So in this particular case for FAQ items, we're gonna do element triggers and we're going to add a trigger that a fire when someone clicks on the heading and then it will reveal the answer. Alright, so we have a different triggers Here. We have mouse-click, you have mouse hover, mouseover, and we're going to talk about them a bit later. Now let's go to the design and let's edit master component once again so that we can see those states. So default state is will the question and the arrow is pointing down and then we have the answer, the R0 should be pointing up. And there is some change to the styling as well, apart from showing this answer itself. Okay, now let's head back to Web Flow and paste the first question. And what we'd like to do is select the entire FAQ item, go to animations, and we're going to put this trigger to the entire FAQ item. Why? Because we want users to be able to interact within everything that's inside this container and click, whenever he clicks basically will play back this animation. Now let me explain two different ways in which you can prepare for the animation itself. So before you click on this element trigger here is important that you know that how you structure the elements and what's on the stage, on the canvas itself. It's pretty important. Basically, you can start from the starting position of the element, elements and animation, or you can start with the ending position of the elements. And this is how we set it up right now. And this is basically the way I prefer to work. So what we could do is for a start here, we can select FAQ item answer, and we can simply hide this answer and then create an animation so insides we can set the display block due to FAQ item answer. And now we can add the trigger. In this case, I think it's much more intuitive to work this way. So I've hidden this FAQ item answer. I just make sure it's there in the HTML structure. And this is the initial state, right? So now I can add the element trigger. The other way around would be leading this FAQ item answer visible. And then in the animation itself, we can set it its initial state. But in this case, we're going to leave it as a starting point here. I'm gonna click Add Element trigger. And here we have different triggers that we can use. For example, mouse move over or scroll into view or while scrolling in view. They are pretty intuitive, although you just have to check them out and see how they work. We're going to explore some of the options in later videos. But right now, what we really need is one of the mouse events for clicking or hovering. Obviously afford this element. We need to select mouse-click. And this will also work on mobile devices with touch screens because the tapping event is the same as clique. So there we have it on first clique, we can determine an action. On second clique, we can also determine an action and then we also have some additional triggers settings. Let's focus on, on the first week because this is really what is of our interest. Now let's select an action and we can create an animation that's one of the predefined animations of appearing and disappearing. And for example, shrinking and flipping. If we select fade and go to the preview, you'll see that it fades away when we click on this element. For example, if we use this emphasis instead of appearing and disappearing, will have some kind of emphasis when we click on the Elements of, for example, Pope or poles in this case. And if I click, I can see that the animation is here. So those are predefined animations that we can select from and we can preview them. And now I'm clicking on this little icon on pressing Command Shift P. But also I can set the properties of the animations right here. For example, set the delay to be 11000 milliseconds is 1 second and click on the preview. And there you have the preview in the designer view. And then also some of the predefined animations. They have their own properties like direction or for a spin or fly. We can select whether it's going to five from left or right or top or bottom. So there are some things that we can tweak in this predefined animations. But to be honest, not much. Okay, so instead of using predefined animations, where we can do is we can create our own animation, our own custom animation, and we're going to start an animation here. Now, there is a list of animation that we can select from. If we create one animation, we can reuse it in later setup. But right now, I'm going to create a new animation. You timed animation because I don't have any animation in my project. Let's play out the animation. Give it a name that might be FAQ, question open. And there we have the action. So we can have multiple actions for one animation's happening after one another or simultaneously. And those action can be applied to different HTML elements. So this is pretty cool because you don't necessarily work only on FAQ item in this animation, but you can target to whatever you have here in navigator and you can say that, okay, with this clique on FAQ item, I don't know, maybe the other section will go away or something like this. So you can target different elements here. And if you target, for example, item, answer, and here is the list of properties that you can animate within this selected elements. So we can have opacity and filter. But also you have hide, show that I am going to select right now because this is the option that will let me switch the visibility of the FAQ item answer. So switch from display none to display block. And there you have hide show properties. So this is basically the display property, as you can see, an Eigen set it back to block. This way, I'm going to show the FAQ item answer. And that's just going to work. So let's click on element and there we have it. Now, we need to work on styling and also some, maybe timing and animating different properties so that it looks better. But the basic structure is here. You have the action that starts on 0.0.0 seconds. And this is FAQ item animating with property hide show. Right now I want to animate the icon. So I've selected the item icon and I select rotate animation. And I'd like to rotate this icon on Z-axis. So let's have minus 180 so that the icon goes up. Now it points up in this state and you can click play to preview the entire animation. Now as you can see, icon to rotation happens after the first, the initial animation would I need to animate also is background color. I'm going to set it to midnight blue. And also I'm going to animate forests FAQ item the next property, texts color, I'm going to set it to be white. So those are all four properties that I'm going to animate across the entire animation. And now if you preview and click, the animation looks like this. So now it works. All the properties are being animated, but the timing of the animation is not what we expect. So in the next lesson, we're going to work on that aspect of animations. We're gonna work on timing. See you in the next video. 27. Animation Timing: Hi guys, welcome to the next lesson. Now, let's talk about the timing of the animation. So we have the animation in place, but the damage is not quite correct. And if you take a look at the animation panel itself, you have different options that we applied to this element. So we basically animate free elements and we have four different action sets for those three elements. And they all happen in sequence. So they start at 0 seconds. Then we have this FAQ item answer animation. It shows. Then we have Icon, FAQ I damn, and FAQ item. All of the animations are separate and they are happening sequentially in the order that we have in the actions panel. So every half of a second, which is default for web flow, we have another animation coming, so the icon and the FAQ item. But what we can do in timing, we can first set the duration of this animation default is 2.5th. And the only reason why this happens to start on 00 is that the height show doesn't last anything at all because it just 01 animation. So then we have this relation, background-color and text color and all of those animations, they last for 2.5th. So now let's try to have two animations. Start in exactly the same time. I'm going to click and drag FAQ item animation of this text color and put it on background-color. Now, all of the animations that we have here, they happen to start an equal half of the second time point of time of our animation. For each of the selected animations, you can also change the duration of this animation from default 0.5 to, let's say 0.2 or 0.3 of a second. And instead of clicking and dragging animation onto one another, you can use this Start option. So now it starts with previous action, the animation that I have selected. But what I can do, and previously what I had is after previous action and now they are separate. And I can join them once again. Let's join all. This animation is basically we have three animations that happened with in time because the first one is just 01, so we don't need to merge them. But we have this icon, FAQ item and FAQ item, background color and text color. Now they start exactly in the same time, 0 seconds. And they last for different time though, because I've changed the duration of some of them at least one to 0.2 of a second. The other ones last point, the five over seconds. And the end of our animation is 0.5 of a second. So I think that's pretty straightforward. As you can see. I can play back the animation and see what's going on in here. I can also change the individual duration so that my animation is a bit faster. It appears in 0.2 or 0.3 of a second. And you can manipulate the duration to make even better effect. Now you can see that the entire animation lasts for only 0.2 of a second. Maybe it's a bit too fast. Usually point BF3 is really. Good amount of time to animate something that's this small and show something or maybe to change the state of some elements. So 0.3 of a second is my reference point. Sometimes it's a bit faster, sometimes it's a bit slower. And another way you can improve an animation like this is to setting the delay to some elements. May be, for example, we'd like this text color to be delayed a bit to not happen that quickly. I mean, if we delay it with 1 second, it will first animate, rotate the icon. Dan, the deck scholar would, will change, and then the background color will change, and the animation looks like this. You can also click on this little box here to add some new items to the animation. And you can obviously tweak the delay itself so that you have different values. For now for this animation, I'm going to just leave everything as is. It's gonna last 0.2 seconds. I'm going to apply some easing to this. But easing I'm gonna talk about in the next lesson because it's quite a bigger topic right now I'm going to set done and let's see how it looks. 0.2 of a second pretty quick, but it looks OK. And it shows my content. The other action I need here is I need to hide this content when someone clicks the second time on the same item, you can see that I have this little founder for the first week here, but I also need to have the second clique addressed and I need to create an animation as well. This will be custom. I wanted to kind of reverse this animation that I have. There is no such option in web flow just for now. So I need to create another animation where I will just reverse the order of the elements appearing. And let's give it a name of FAQ question close. And let's redo this animation. But I'm going to start with a vacuole item answer and simply hided, set display to block. Then let's select the icon in navigator, lets make sure you select correct elements. This is the most important thing when you're animating. Now I'm gonna put it not 280 but 0, back to 0 because I was at 180 in the previous animation. So now I'm going to rotate it back to 0 degrees. And then let's have this FAQ and FAQ item properties, background-color and texts colour animated back to background color to white, and also the text color. We're going to animate it back to midnight blue and same as in the previous one. We need to connect all the animations together. Let's drag and drop them onto one another. And there we have an animation that starts at 0. Let's change the duration to 0.2 of a second for all the animation that we have here. And now we're finishing with both states of our animation. We can preview it. We can select Dan in order to disclose the animation and now preview as in the browser, if we click once it opens, if we'll click second time on the same element, it will close. Now, all we need to do is refine the easing of the animation so that it looks better. And I'm going to talk about it in the next lesson. 28. Animation Effects: Welcome to the next lesson. We're going to continue with our animation. But before we talk about easing, I'd like you to know how exactly animation is applied in web flow to different HTML elements. So we have this little thunder here. And if you take a look at FAQ item, there's a little fun there next to this element as well. And that indicates that there is an interaction set to this element. So we have on first weak interaction and on secondly interaction, The question is opening and then a question is closing. However, we have a few elements like thank you item is duplicated throughout the place. So we have n column one, we have a few questions and in column two we also have two questions. Right below we have trigger settings. And this is the place where he can decide whether you want your animation to be displayed in each breakpoint. And this is by default, or you might just limit it to some tablet and desktop by disabling form and ported and phone landscape. But more importantly, you can set this animation to be played on the, on this element. Or you can have this animation to be applied to every element in HTML that has a particular class. And this class happens to be FAQ item. So if we switch to class, we should have the same animation applied to all the FAQ items that we have in here. So take a look at this little Founder, and indeed, if we click on any of these items, it will work and they work independently. And it's pretty cool and Web Flow is really smart with dysfunction. So instead of having one animation on one element, we've applied it to a class, but that's not all of it. What you can also do is take a look at the animation itself. So for example, our FAQ question, open animation. And here you have different icons, the blue ones with a brush and the green ones with a tundra. And this is really important that you know what this icon means. Because sometimes you'd want to tweak it so that your animation behaves a bit differently. Well, it all boils down to this effect option which is now set to interaction trigger because FAQ item is selected in the animation Spain. So this is actually an interaction triggered, this triggers and interaction and Web Flow is smart enough to animate only things that are connected to this interaction trigger. Well, it can affect entire class. And if I leave it affecting all the elements having this FAQ item class, you see that if I click on any of them, every element with this FAQ item class will animate. So this is not the way we want to work. We need to change it to interaction trigger. This is quite easy because we have this FAQ item, which basically is the trigger of our interaction. It has a little thunder and we want to animate everything inside, but sometimes a bit more complicated, especially when your HTML structure is a bit more complex. Or for example, if you have multiple copies and how does web flow no, that this interaction trigger should affect only FAQ item that I click on. Well, this is thanks to this effect. But on the other hand, there are other elements that are copied within this FAQ item. For example, paragraph and FAQ item, answer and had being an icon. All of those classes, all of those elements are duplicated within other FAQ items. So how does weapon no, that it needs to animate only this particular FAQ and item answer when I click on FAQ item because FAQ item answer. It's not our interaction trigger. It doesn't have this little founder as this FAQ item has. And nor does this FAQ item question has as a trigger. So how does it work inside? Well, if you take a look at the structure of the animation, you will see that FAQ item answer is indeed affected. We have this class affected. We cannot set interaction tree or it's not an induction trigger. But why this class FAQ item answer and doesn't animate in all of the instances. Well, that's simply because we have this option set to only children with this class. So the animation will affect only this FAQ item answers, which are children of FAQ item. And this is how it works. If I select all elements with this class, then if I click on one FAQ I them, all of the FAQ item answers will animate and this is not the way it's supposed to be handled. So as you can see, Web Flow is pretty smart in detecting these children and setting the right options straight away. You can also set, for example, siblings and within this class or parents within discuss. So if, for example, you have different structures, HDMI structure, and you want to animate the parents of the element instead of children, you can do so. And it basically covers all of the use cases. So depending on the structure of your HTML and the animation itself, Web Flow will help you to set this effect Field correctly. And if you select the, the other element, the icon, so we have this class here and it affects all the icons, icon too, but only those glasses which are the children of the interaction triggers. So FAQ item. So again, it works. I don't have to tweak it, but there are some times when you have a bit messy structure of HTML, or you have something completely costume, or you maybe have some advanced animation and you might want to tweak this options, but now you know them all well, actually there's one more option that you might take into consideration when you manipulate this effect property. And this is the option that will allow you to animate only one element no matter what is the interaction trigger. So if, for example, you'd like to animate this icon in the first FAQ element. When you click on all the other FAQ items, you can choose this option selected element. And then no matter what FAQ item, I'll click the very first R0 will only animate. So this is users here, but sometimes this selected element is pretty useful and you might use it for triggering interactions. The elements that are outside of the interaction triggers outside of the scope of the class. So on rare occasions you might use it. Now you know all the options, although Web Flow will probably in 99% of the cases, apply them correctly and you don't need to tweak it. In the next lesson, we're going to talk about timing and easing in animations. See you there. 29. Animation Easing: Hey there, welcome to the next lesson and let's talk more about animation timing. But before we do, I'd like you to get to know this little switch set as a initial state. This is pretty useful and I've already told you that we can animate, we can approach animation in two ways. So the first way being what we've done here. So first, hiding this FAQ item answer and then starting like this as a starting point for our animation. And then in the animation we're going to reveal this FAQ item answer. We can also go the other way around and we can leave all the elements visible on our stage so that we kind of have, in the Designer View, we kind of have the ending state of the animation. But then in the animation itself, we determined we predetermine this initial animation state. So what if we tried to rebuild this with this new structure in mind? I'm going to select the paragraph and let's add a selector to this paragraph. I'm going to give it a class FAQ paragraph and set the opacity to 0. This way, I can also create an animation that will fluently changed the opacity from 0 to a 100. And this is not like 01 transition. So this is exactly what we want. We want these, this bar graph to appear on the stage and I don't want it to like jump 01, but we need some fluent transition. So the class is now set for the first FAQ item paragraph, but for the other ones, I'd have to set the same class or just delete them for now. And I'm going to copy and paste the FAQ item later on with all the properties in place. So let's now focus on the first one, right? And if I select the FAQ item and go to interactions, Let me go to this first interaction and first animation that we have. Okay, so this is now kind of rough because we have ethic you item answer, just hiding and showing at the beginning. And you cannot really tell in the animation because initially with hidden this element. But what do we want to do right now is we want to slowly reveal the paragraph. But also FAQ item itself has some kind of height right now. So we need to create an initial state in our animation that will determine the initial height of this element. So at the very beginning of the animation, I'm adding this size transformation and transformation for FAQ item. I'm going to put the height of 110 pixels. This is how I have it in design. And right now, I'm just starting from this 110 pixels and I will go up to maybe, I don't know, 250, I don't I'm just gonna double jacket in the design in a second. But what's important is that this is the initial state of the animation. Then I have to switch this to the initial state because we are kind of like starting animation from this point. And now you can see that there is a little arrow. There is no point in time because this is just the setup. Okay. We're just setting up how it's supposed to be in the beginning, how it's supposed to behave in the beginning. It's not animating it just the initial state. And from this state on. We're going to have animation going downwards, so we have 0 seconds and we can add some more, some more animation. So I'm going to animate the size bag of this element of FAQ item. But you know, instead of setting the exact pixel height, what I'd like to do instead is I need to take into account that the paragraph might have like two lines or three lines of text. So I'm going to set auto. So it automatically determines the size of the element based on the size of its content. So in this case, whatever the paragraph will be longer or shorter, I'll have the nice animation. Okay, so here we have our animation. We can preview it, and as you can see, everything is good right now we need to change the timing a little bit. So probably I need to change the duration of this 2.3 of a second, for example. So we have this animation and I'm going to animate probably all things altogether. So let's take this icon and I need this animation to start right away. And for the change of text color and background color, probably you. Let's take a look. How do we want it to start? I think that everything should start at the same time, but it doesn't say that they have to be the same length. So I'm going to change the FAQ item size attenuation to be 0.4 of a second and the rest of it would be 0.2 of a second. Now, I'd like to create another animation for the paragraphs, and I can add it from here. And I want to animate the paragraphs opacity, but whoops, look at this. I've added the animation, the wrong element. I wanted to show you how you can basically change the target of this animation. It's super easy. You can right-click on the element and select Change targets. So if you by mistake, select some other elements. Don't worry, you can do what? You can just click on FAQ paragraph right now and you can see that now I'm manipulating the opacity of a paragraph not FAQ item. So what do we want to do is we want to set the opacity back to a 100 so that this bar graph shows up. And I just set the duration of this animation to be 0.3 of a second. And it happens right after the element expanse. And this is pretty cool. What I'd like to do, what I can do right now is maybe I want to change the duration of this first animation to be longer time to show you how we can apply some easing to it. So I'm gonna set it to three seconds just to show you how this animation goes from top to bottom. And now it goes in a linear manner. So basically all the pixels are shifting in the same amount within the same period of time. What do you want to do is apply some kind of easing because it will help our animation to gain some weight. It will help it to look a bit more natural and easy is the way to go. And for 99% of the time you'll go with predefined preset. But sometimes you might just go wild with the Custom Preset that you build for the predefined preset, let's now select bounce effect so that I can show you how it behaves. So we have 3 second animation. But then at the end it will just like bounce back and forth. And for some other example, you can select an LT quad and it's going slowly at the beginning and then gaining some weight. And those are the presets for most of the time you're going to use. Instead of linear, you just going to use, for example, 0s in which is slower at the beginning and then it goes a bit faster, is out, which is faster at the beginning, and then it eases out at the end. And then you have 0s in algebra. Basically goes lower at the beginning, then speed up and slow down at the end. And this is something that you're going to use probably most of the time is in, out, looks pretty good, not in free second duration, but if you change it back to 0.4 or 0.3 of a second, you will see the difference. There is a big difference visually in terms of this linear animation and ease in, out. And in some rare occasions you want to set the easing to custom and click on this little icon to change. And the Ising properties, you have some predefined curves here and to the right hand side you have progress and time of your animation. So right now we have this linear animation. It means that all of the animation progress is happening in small amounts of time, and those are the same. So it's A-linear. So we have a bit of progress, a bit of time, a bit of progress. It's the same amount of time, but if we tweak it a little bit, if we change this curve, for example, like this, you'll see that the progress now the animation is happening a bit faster. Like here we have 30% of the animation in 10% of the time. And we can also slow it down at the end, for example. And if we play this back, you can see that kind of animation that we have. We're gonna stick with preset for most of the time. So let's ease in, out. It looks pretty good. And now what we have to do is to create the reverse animation. So we've created this first animation with the initial state and set some easy things changed a little bit. So now let's click on Done and let's select the second clique animation because we need to adjust it so that we have this animation going backwards. So at the beginning I have this paragraphs selected. Let's select opacity and bring it back down to 0. And also we need to animate the entire FAQ item size back to 110. So let's create another animation that select FAQ item first. Then lads, select Size and let's bring it hide back to 110, the initial position. We need to reorganize the other animation a little bit so we change the timing. Let's start the animation of the icon, FAQ item and FAQ item text and background color at the same time and change the timing of this first animation, 2.2 of a second, as well as the timing of the animation for FAQ item 2.3 of a second. And there we have it. Probably it's all that we need and we can play back this animation back and forth. Let me just copy and paste FAQ items real quick so that we have three in the first three in the second column. Now Command Shift P or preview. I know that I'm going pretty fast, but this is just what we've done. And I'm just repeating myself. So now if you click, you can see that the innovation is going one direction and the other way as well. So here we have it. Everything about animation in web flow, including easing and initial states. Thank you for your attention and see you in the next video. 30. Recent Articles Section: Hi there, welcome to the next lesson. I'm super excited that you're here because we are slowly going down the structure of our website. We're slowly finishing right now, I am going to create this recent article section, and this will be kind of a recap, but yeah, let's do it. So I have this logo FAQ and yet the name is wrong. Logo FAQ should be Header FAQ. I forgot to change it recently, so let's have a header FAQ now I can copy the header and also I'm going to copy this FAQ section, so I have the proper structure. I'm going to remove those classes and renamed them. And I've noticed just after I had finished recording this that I'm not removing the classes I showed. Just changing the name. What you should do is remove the class first, then change the name. It doesn't really matter for now. So let's sorry for this mistake and let's go ahead and create this section's content. So what I'd like to show you is this layout section. If you go to add, so you press a twice, you end up in layout. Maybe you have a bit more layouts in here because web flow is constantly adding those layouts is pretty fresh. And you have, for example, a call to action. You have this fuller Contact Form and things that you can reuse from readymade components. Now this card section looks like something that we need. So probably I'm gonna use this cart section, but I cannot put it straight into the other sections. So let's put it somewhere where I can. Like for example here, I simply cannot put section inside the other section. So right now it's just investigate the structure. And what we really need is this car's greed container. So I'm gonna copy this Guards Grid container only and paste it into our content and get rid of the entire cut section that I don't really need. So i have agreed right now, let's check it's responsive versions. And it looks pretty cool in all of the resolutions. So this is one of the advantages of using this readymade components from Web Flow that really just work out of the box. Let's now change the name of the entire container so that it's more meaningful to ask its block cards plural. And for each of the books that we have inside will just rename them later on and add a class card. Now, this card class, let's quickly restyle it. I'm going to add a background color and also some kind of shadow that we need to copy properties from the design phi. Here we have this little shadow with 6% opacity and 12, 12% pixel border radius. So let's apply those settings. We need the distance of the shadow to be 1645 bar and also change the opacity of the black colour to 6%. Okay, now, I also need some border-radius, that's 12. And let's see what we have here. So the structure is we have header, we have small caption, and we also have something like a tag. And we have an image here inside. So this is pretty similar structure to what we have here, but we need to tweak it a little bit. I'm going to add some other element that the block that will be for this header. And let me put this heading three inside the debug. Sometimes it, it's pretty tricky to do it. And also a paragraph. So I have this section with Header and also author, but also to this section I want to add another textbook and this will be the caption. Okay, so I'm gonna put it on top. And all the elements are now inside one technical container. This technical debug that I'm gonna rename to card text. And right now the structure is pretty good. I can add some padding inside of this card text elements. I have potting only applied to the text element, and I have a separate container here for the image. So yeah, this is pretty cool. Now, let's restyle the texts. So we need to change protects properties. We have here 30 regular DM serif at the MSRA display, and here we have the absence. It's copy this grey color for the author of our article. And also let's try to learn by heart those properties. And now let's change the name for this particular element. This will be compression author, and this is not some kind of predefined freestyle texts. So I'm just going to add the text properties as they go along. I'm going to paste this gray color. And let's copy and paste the text that's goes here. Alright, now for the title, and this is our header three, and I'm gonna leave the default styling. And also we have this little tag with design and some text properties here. Well, we also have this caption here. It has similar properties, its caption, and then you have colors applied on top of it. So the structure of applying color as a combo class is pretty good, I think for tax as well. And we can use this caption class also to restyle the tags. It's pretty much the same in here. And then we have to change the property so that we have this little background as well. So instead of display block, we don't want it to a, to the whole width of the element. We need to change it to, for example, inline block. But we need a combo class four days. We don't want to apply these settings to recaption because it will change all the captions on our webpage. So we want to have this another class book category and then we can change it to a different layout. It's going to be inline-block. And thanks to this, it's going to just occupy a little bit of space, the exact width of the elements that are inside. So in this class, we're going to define the background and paddings for this element, we have 84 pixel padding that we need to apply to this element. So let's go ahead and do it. I'm going to change the partying too. I'm gonna press and hold option so that I changed this top value and bottom value and sometimes it's just easier to type it. I'm just going to click and type 84 pixel values here. Now I also need to change the background, color and creed, some border radius. You can set it to high-value or again to 50% and it will work. And then what you can do is add another class for the color. So this is going to be similar concept that what we have in the captions. I'm going to select category one and only change the color that we have. Again, I'm not using the names of the colors in the class name because the color might change. And then it's not intuitive. So instead, I have this free combo classes. One determining the texts, second determining the background, and the third, determining the color. And this is pretty good because now I can reuse it everywhere on my website and I can change things independently. Now let's create a little bit of space in here we need some breathing room for the heading. So I'm going to select the heading. I don't want to modify all the headings on my website. So I'm not going to use this tag class. I'm going to just create a new class for blog posts. Title is pretty specific for this use case only. So let's have another class and I'm going to apply margin top eight pixels and margin bottom four pixels. Now, it's as it is in the design file in x D, So we can proceed and change the image. And the image is HTML element inside the div container. So it's not the CSS background. And in this specific case, it's so much better to use it as an image. It will also work better for our SEO for a blog. So let's select this card image and choose another image. What I'm gonna do is upload a three files that I have created for this particular lesson. And I've just exported the design that I have in Adobe XD. Let's create, let's use one of the scenes that I have here. Now let's take a look at the image properties because it's quite interesting. Hardware workflow team did this component. So we have the position set to absolute and we haven't stretched throughout the whole container. And then the width of the element and the height of the element is 100%. So this way the image is fully responsive inside this container. The container itself though, has the width property set to 100%, but also it has the padding set to 100%. And this is an old trick in HTML. Now, only thanks to modifying the padding, you can modify the size of the element and automatically this image scales inside of this container. So we only need to change the padding to, let's say 54 in our case, to match what we have in the design and everything is fully responsive. Pretty cool. Ha, so let's go to the background. Let's set the background here to be grayish color. And I think now we have the template for our card, so let's delete the other cards, copy and paste it twice. We need to do now is double-click on the images and to replace them, it's as easy as pointing to the other images that I've imported from our asset files. And it looks like my component is almost ready. We're going to tackle the responsive versions in just a second because we still need to create some better tablet and phone views. But if you take a look at the structure and styling elements, I still need to add some border radius here at the top of the images. And I always go back to the asterix breakpoint. This is super important if you're adding properties that you want to have effect across all the breakpoints to go back to a desktop. Then I'm gonna set this radius independently for only a top left and top right corner. And now it's inherited across all the other breakpoints. So we have this tablet view and also phoned you and you can make some adjustments. For example, in this phone mobile view, I need to change the size of the image. And lets me, let me go back to the car image mosque and now change the padding. So it's as easy as changing this little padding right now. And I think that in the phone view we have pretty good cards right now. And second mobile view is also fine. You know, you can always tweak it so it's pixel perfect with the layout, but I don't think it would add much value to these lessons. So instead I'm going to show you how to create a cool hover effect using transitions because you could obviously create hover state here. And with the bottom properties of CSS style panel, you could even add transition and scale. But I want you to do it in your free time. And now I want you to take a look at the mouse hover effect that I can apply in the interactions panel. Because thanks to this, I can have super custom hover effects that I wanted to show you how to do it. So let's create on a custom new animation. I'm going to start an animation and create a new timed animation that I'm going to name card hover. And now let's add a property animation of scale. I'm going to animate the scale of the card, and I want to change the x and y simultaneously. The lock is here, so I'm gonna change both values at once. Maybe they changed it to 0.95 when someone hovers over this element. And let's make the duration of this animation 0.2 of a second. And also, I wanted to have this animation for hover out and create another one. I'm going to add another animation. Let's have an aim of card hover out. And also, I create this reverse animation where I'm gonna go back to one within 0.2 of a second. Now what I'd like to do is change the trigger settings for this particular animation. I don't want it to happen to only one card element. I want to happen to all of the cards. So I'm going to switch to class and class_name is card. Now in the preview, you can see that all of the cards are animating when I'm hovering. It's pretty cool, but it's pretty too much of a linear effect. So let me go back to this animation and change the easing. Do some easing effect for example, in East out. And I'm gonna do it for the, for the reverse animation to, I'm going to use in, in, out. And yet then you have a little bit better effect, like a more dynamic effect for this cards. One last thing that I like to show you is how to change the cursor. If you click on the Styles panel and go all the way down, you can change the cursor to be, for example, pointer for this entire card. Probably later on it would be better just to change the beef book to a link block, so it links to blog. But I wanted to show you this cursor option as well. So that's it for now. I see you in the next one. 31. Contact Form Section: Hi there, welcome to the next lesson. And this one I like to create a contact form where flow is pretty amazing because it will let us create our custom forms and then send those forums. So it's super cool. But first things first, we need to duplicate the structure of our website. So structure for the headers as well as some sample structure of the elements that will go in the content. And again, you need to remove the class first, remove the glass believed the class, it's my mistake. Again, just renaming the class instead of removing it and then creating the new one with the new name. Silly me, sorry about that, but I just realized after recording this lesson's, So what do you need to do now is change the text. We've already done that. So fast forward, we copy and paste the texts. I wouldn't this lesson to be complete as well. So I'm showing you everything, but you can slow down if you want to see exact details. What's the most important is we could use the layouts here, so we have ready-made contact form. We can use this subscribe form and this would be what we need here. But I don't want to use this readymade components right now because I want to show you how you can create this component, this component, this web form from scratch. So instead of using layouts, I'm going to use form section. And here you have different things that will let you create and compose your own form. Now in web though, you have to first use the Form Block and Dan, inside of this form block you can use any other elements such as input and text area. But form block is the most important part and you have to start with the Form Block. So I double-click to put it straight into the content. And as you can see the form look here has some settings and some sample fields that we're gonna tweak. Let's click on Show All Settings, and this will go straight to the Settings tab. So this is the same as this little pop-up window. Or there are some more options in there. So we have already two input fields that are in this form block. We can obviously believe them or we can tweak them as we like. The base structure is we have field label name than we have name field and email address and email address field and a submit button. You always have to have Submit button in order to submit the form. And also some details that are not visible right now and those are responsible for success and error messages. And we can tweak the messages, we can preview them and everything is available in the settings. If you switch from the state normal state two, for example, an error state, you see that you have a message, something went wrong. Why submitting the form? And you can obviously change of the appearance because it's just a div book with textbook inside so you can change it. And in the success state, you have this form disappearing. And instead of the form, you can see just the info that submission has been received. Again, you can change it. Everything is in Web Flow is editable so you can change those success and error states. And you can also add some more elements to your form. So for example, you can use a recap. Child can use file upload and text areas and checkboxes. Radio buttons and some of the options are grayed out. For example, file upload. And this is simply because you'd need to upgrade your website plan so that you have hosting with web flow where you can store those files sent by your users. But again, you can easily add those elements. For example, if you add, if you want to add select, it's as easy as double-clicking or just dragging and dropping onto the forum. And each field has some settings. For example, this one, you can add and remove choices. You can edit the choices for the select element. It's pretty styled. If you take a look at how it lets you choose from the options, you can do. So then if you go back to the settings, you can set up advanced things such as required field. And then if that field is required, web flow will automatically, while ascending, check if this is filled and it won't let you send it unless it's filled. And you have also allow multiple. In this case, when you have choices, it will slightly change the components so that you can select more than one option. You also have a bit more advanced components. For example, recaptcha. If your form is being spammed by some boats, you can enable recapture for it. You have the submit button. This is indeed something that you have to have in each of the forms and the Submit button and its properties will let you send the form. And the default method is GET, there is no action, there is no redirect URL, but you can set all of these things. We're going to set it a bit later so that it sends the data somewhere and then the data can be processed. But by default, web flow will send the data and display it in your admin panel. So you have all the data from the forums by default. But then if you want to tweak it and we'll do it so that we can receive the data with zap here, I'm going to show you how you can do exactly that. So here we have this fields. We don't really need name. So I'm going to delete the text field as well as the label. We just need an e-mail address. So the structure for our form is a bit different than what we have right now. We need to add another element. This is a structural element and this will be simple paragraph. I'm going to paste the text here and change the position in the stacking order so it appears on top. And then we need to restyle the forum slightly. Let's check out the size of this form. It's around 400 beak sauce. I'm going to select this form element. Actually we could style the entire form block. So let's select Form Block and maybe first change the layout to flexbox. And so I can't justify the elements. And I can put them in the center vertically and horizontally. And now let's get back to the form element. And I'm going to set the mock Sweet and Max high forties element for 400 pixels and 350 pixels. So it looks a bit better right now, let's set the background color and I need to use this light blue color that I haven't presets. Again, border-radius as usual. Then we have background, box shadow. Let's add the distance and blur and let's change the alpha to six or 6% And this is the main structure without paddings. Let me double-check this alphabet. It's 6%. And we need also to restyle the fields and the submit button. So let me check the border of the field and the size of this border. You can just click on the field and the restyle it because you have all the properties here in the style panel for the input, we don't really need the label because the texts type your email is inside this text field. And if you go to the settings, you'll see that you have something like placeholder. I need to use this place holder. And if you say type your email and you'll see that it appears in there. So we don't really need this field label. And oh, by the way, that the type of this field is email and that's correct. You can have different types of the fields so that automatically validates them. So if the structure is incorrect, again, it won't let anyone send the form. I'm deleting the old label. I don't use it anymore. And let's go back to the styling. And maybe that's a class first email input and change the properties accordingly. So what we need to do is set some border radius and also some borders with the width of three pixels and the color that I've copied from from UCSD. Let's round those borders. We need eight bits. So now let's change the size of this element. So we have around 300 pixels and 75 pixels height. So I'm going to put a max width of 300 pixels. And you can set height to 75 pixels. Or you can use mocks high, but I think that height is better in this case, let's take a look at some paddings and add a 40 pixel padding. And I'm going to press shift and hold to around 40 pixel paddings from each side of the form. And this looks a bit better. Now let's try to position everything in the center. And if you use the text align property and center the text, it will work for the button and for the paragraph, but not for an input field. So in order to center the input field would need to use probably some other properties. And I think that if we center everything with flexbox, For example, for quote form, I can add a flexbox here. And now I can use a line, can use direction, vertical and align it to the center and horizontally. Now, everything is centered, including the input field. Now for the battle to restyle the buttons. So let me create another platform. It is bottom quote form, submit. Now Let's change the color of this button to be transparent so it doesn't really matter what color I choose because I want to bring the opacity down to the alpha, down to 0 of the color. And now we need to change the text properties. We need this midnight blue for our text color. There are some other elements that I'll add in a second. If you double click on the submit button, you can copy and paste this button text. So it's asked for pricing. You also have waiting texts, please wait. So if someone clicks on the button and the form is being sent, he'll see this text. Please wait. You can change it, you can adjust it. I also need this little R0 and also we have some Rafic element to the left. And this graphic element is simple circle that you can position as the book for example. So you can add another element, a div blog that will have this as a background and will need to position it to the left of our button. So let's change the color. I am going to copy and paste the green color that I have, an XD and border radius. You can put 50% again or some bigger value here so that you have perfect circle. Now for the positioning and sizing of this element, let's consult with the design. We have around 50 pixels, width and height. So let's apply this to wheat and hide. Those would be direct numbers. And we need this div blog to be positioned in a way that it's basically behind the bottom and position to the left. We also have this little arrow. And for the arrow, we could use an icon. We can export it as so we can mark this arrow for export, and we can export it from x D. But on the other hand, this is pretty simple shape. So probably we can find an ascii R0 like this and simply paste it into texts. But you already know how to position and export images. Or while I haven't showed you yet how to use ascii signs. And sometimes it's pretty useful. You can find those unicode arrows or ascii arrows, and you can copy whatever R0 fits you or some other icon. And if you copy this text and your font is capable of displaying this Unicode elements, you can easily simply pasted inside of any of the text. So let's select the arrow that we like. We going to copy this arrow Command C. And then if you double-click on the bottom and then paste it, there it is. If I apply those changes, it will be visible in the web flow. So this is one way, this is one way in which you can accomplish that. There's also another way that I like you to know, so I'm going to undo that. And I'm going to use Font Awesome, which is an icon font, which contains a lot of great icons that you can use in web flow. But in order to do so, you first have to use Font. Awesome. And I'm going to show you in the next lesson how to digest that. See you there. 32. Font Awesome: Welcome to the next lesson. Here we are on Font Awesome page. And if you're not familiar with Font Awesome or icon fonts in general, will basically those are phones that instead of signs, they just contain icons. So you can easily install this font and use icons inside of your text fields. There are different icons and they're different over 7 thousand icons that we have on Font Awesome. And in order to install this font on your website, you're gonna go to Download. And we will upload this font to our web flow page. And in order to do so, let's first download the zip file, unzip it. And inside web flow we need to go to project settings. So let's click on the logo in top-left and let's go to Project Settings, Fonts tab. And here we have custom fonts. We need to click on upload. And this zip file contains a lot of different files. But what we basically need here is a PDF or w, o f, f format. I'm just gonna go with PDF, but there are different weights of this phone, so we'll select regular brands and also solid. So 400 regular and browns and 900. So it, and this will automatically install this custom font to our project. So I need to click on upload phoned three times, and there we have it. This one is now embedded in our project and we can use it. We can search for Fe 400 FA brands in the typographic menu. So now we can, for example, add another text block inside this textbook will put an icon. And in order to search for an icon, let's go to Icon, font, the Font Awesome website, once again, two icons, and now we can start typing in the search box. Let's search for an arrow. And the arrow that's pointing to the right, we have this arrow right? Looks pretty good. Let's click on this arrow. And what we can do right here is we can either select, select the entire HTML, but we don't really need HTML right now. What we need, and there are different versions of this arrow as well. What we basically need is we just need to copy this Unicode glyphs. So if you click on this Unicode, we believe it will automatically put in your clipboard the arrow that you can now paste into any textbook paragraph. And here we have it doesn't look like an arrow. And this is simply because we need to change the font for this textbook. Let's go to typography settings and instead of the m science, we have to use this FMEA. So Font Awesome. In this case, I'm going to use Font Awesome solid. And there it is, our R0. Now let's take a look at how it's presented in the layout. So we have this ask for pricing button. To the right hand side we have the arrow and below we have this low circle. Let's check out the font properties here. We have 18, the enzymes bolt. Let's make sure we have it here as well. And yet the topography is set correctly, knowledge center it and also. Let's have this text decoration to be underlined. Now, I need some positioning context for all three elements. So I'm going to press a and then add another d-block. This will be another technical container in which I'm going to put all of the elements of the button elements. So this quote, form submit button as well as my textbook. And let's rename this class. So we have ROI icon and also the Bloch Free, which happens to be this shape. Let's put it here. I need to change the name of this submit button. Let's have this quotes. Have meat for example. And now let's try to position elements inside with flexbox. Thanks to this, we can align them Center and justify elements as well. So this now looks a lot better. And for the submit button itself, I think that we might just adjust its marketing so that we have this negative margin. And thanks to this, the shape will go under the text and also the stacking order in HTML is pretty important so that we don't need to set up some Z indexes or anything like this. And now let's restyle the RO position is okay font, I think we need a bit smaller, R0. So in order to change the icon of the size, you have icon fonts. You simply change the font size. Okay, so I think we are ready with the button. Let's take a look at the inputs. So we have some different margins in spacing that we need to apply to this element. Let's like email input and I'm going to change margarines default is ten, and I'm going to change it to 24 top and bottom. Right now we have a good spacing here and also the colors of the input are not quite correct because the appearance here is 30% opacity. I need to apply this opacity, but I'm gonna do it in hover state because right now if you take a look and preview, there's no hover state, no change in the behavior when I click on the button. So I'm going to create hover state. But while I'm in this state, default state, I'm going to just change the opacity to 31st. And then in the hover state, let me switch to this state. Now. I'm gonna move opacity to a 100. Ok, it looks pretty good. Let's test it out. I'm going to hover over this element and it highlights, kind of highlights. I think it's pretty cool. So we're going to leave it like so. And now let's add the one last elements to our form. It's going to be this background. I'll select the entire form block and let's go to backgrounds and add another image background in CSS. We need to and select an image and let's quickly import it from our source files. And now let's reposition it to the center. I'm going to turn tiling off. Let's switch the size property to contain or cover. I think contained would be fine. And by the way, I haven't talk about this add to x feature and this is completely useless for SVG files as they are vector and they scale seamlessly for different devices. But if you have bitmap files, for example, JPEGs, PNGs, and you want them to look really good on high DPI screens, what you wanna do is export them in 2x size. So for example, if you want them to be 300 pixels in layout, you'd export them in 600 pixels. And Daniel turn this at two x function on. And web flow will automatically cut their size in half, but this will ultimately make them look really good on high DPI Displays. For SVG files, you don't really need to do it. And for the size of this element, which is going to have to tweak the padding of entire form block. And this is simply because we've said this property as property of science to contain. So the bigger you have this form block, the bigger the image would be so that it fits right in this container and formed a Form Block. We also have the success and error states that we need to work on because now some things are broken. But if you take a look at form block now, it's displaced to flex. So it's not that we change it to vertical. And now it looks pretty good. And if we switch to success message is just saying thank you, your submission has been received and you can also restyle it, the container and the text. And basically you can put whatever you want inside this success message container so that it's displayed when the form is successfully sent. Obviously, you can do it yourself. It's easiest tweaking some CSS properties. More importantly, in this lesson, I'd like to address different resolutions. So in the tablet view, it's still okay. Let's take a look at the phone view. And we have this mobile landscape, which is bit wider. But I think that it's still okay. And the smaller screen size, we have, our form which is scaling also pretty nice responsively. And maybe we'd like to fix some spacing a little bit because we have this media query that changes the size of the tidal when you go to smaller screen. And now there's this huge gap between the title and form itself. So let's select header form content, and it has this combo class delivery. So in this lever combo class, we can easily reset the margarines, and also I can reset the padding to 0. Now, it looks a lot better. So we have the structure and styling for our form. We don't yet have sending emails sending this form, but this will be handled automatically by web flow. And in one of the lateral lessons, I'll show you how to set up this form so that our submissions are handled with zap here and our own custom automation. So see you in the next lesson. 33. Footer part 1: Hey there, nice to see. In this next lesson, we are close to the end because right now I'd like to show you how to create the footer. So as usual, we're going to repeat some steps right now because you already know a lot from web flow. But let's go to layouts and here is some component that we might use for our footer. As usual, I want to first copy and paste one of the sections that I have. And again, I'm doing it wrong. I should be removing this class first and adding another class. But right now I have the structure in which I have content and I've deleted this form block. So inside of the content, I'm gonna put some elements from the footer section. Now, let me just put this section somewhere outside of the footer section because again, you cannot put section inside of this section. So right now what I want to do is see how this behaves, how it looks, and get some elements and copy them inside of content elements. So I'm going to have this footer flex container. I can copy or simply drag it below so that it is now in my content. And let's delete this footer section that I don't really need. So the content is basically the structure for my entire page. I have this POD beings and I also have this mock Sweet set to the content, not individual sections, so that I can easily remove the classes for the sections and rename them. But content is what I really use. Then I have this footer affects container and as the name says, it's a flexbox. So probably it will also work really well on different devices. And indeed, workflow engineers made a good job for this component as well. So in mobile tablet and desktop, everything looks good. And if we want to add some sections and it will also be nicer district distributed. So here we have basically four sections. So I can just copy command C and command V, paste one of the blocks. As you can see, it looks pretty good. And I also have this fuller image. And the image I have is fruit juice logo, which will put next to the copyright node. So let me just select footer logo link and put it below is for a second. All right, so here we have texts and I'm gonna copy and paste those texts in a second. Right now, just let's start with what's Druze and see the structure. Okay, I now I realize that I rename the class instead of deleting it. So once again, you should remove glass first. You should now give it a proper name. For example, footer section. We it was not that important because only my main section, I I didn't add any properties, but this pretty different because I want to set the background to the entire section. Why? Because I want this background to be from left to right. That's why I cannot set it for this content container as usual. So I've changed some properties and now let's take a look at the structure of the links. So links are actually a list, so you have leased and then inside there are least items. I hope that you know lists from HTML already, but how to use them in web flow? Well, it's super easy. Here you have basic elements and you have leased. So this will give you a list container. And then for each item you have this little list item. This is how it's constructed. So you have least on top and then you have list items. If you take a look at the selector, you can select HTML or unordered list tag. And this will restyle older list on your website. And for the list item, you have HTML tag, all list items. So this is pretty easy to understand as those are usually just HTML tags that you need. The restyle here you have footer link, that is, that is the property set to all the photo links. And it has this color sets to be darker gray. We don't really want this dark gray color. So the question is whether we want to restyle older these items or we want to restart it just footer links. So for majority of cases you'd want to first restyle the entire list. And then on top of that creates tides for footer links. But in this case, we are in a completely different background as we have on the other places on websites. So I want to just restyle those links directly, not the lists. And I'm going to go back to these and restart them later. And that being said, I'm gonna copy and paste some texts from XD to web flow. And for this particular structure, I don't really need a least, so I'm going to delete the list from the first section. I'm going to simply add a paragraph and inside of this bar graph, I'm going to copy and paste what I've copied from XD. And this is the first div log that I need to restyle now in terms of paddings in sizes. So let me take a look at the size of this element is around 220 pixels. So I want to change the properties accordingly. And let me first create a class that will be footer section one. Well, those footer section that will be pretty different from the rest of the sign. So I can have a separate classes for them. I'm going to set a wheat to 320 pixels. And then I'm going to restyle the paragraph. So let's have the name for it, footer paragraph. And let's check the font properties. It's basically 50% opacity set to the white color of the fields. So I'm going to leave this light blue color or change it too wide. But basically I need to change font just slightly from properties to 500 medium 16 pixel size. And most importantly, set the opacity to the entire paragraph to be 50%, to be precise with what we have in Adobe XD. Now let's take a look at the header. It has some properties. Obviously, we need to change the font. The sounds 18, bold and white color. Resize it slightly. And let's change the line height by the way, in line-height, as well as all the other fields, you can use. Not only pixels or percentages, but you can also use ramps or amps. So for the line height, sometimes you can just set it to be, for example, 1.5 RAM, and this will obviously work. Now let's change the opacity for all the links altogether as we have it in here. And also we need to check the hover state of the links. If you take a look at the overstate, we might be willing to change the opacity and also turn off the text decoration so that when you hover over a link, it will just lighten up. Okay, let's go back to the default state and also let's take a look at the text that we can copy and paste from here. I'm gonna copy and paste the links. Plus the last section which is subscribed to newsletters section. In this section I'm going to need a paragraph, so I just simply put a paragraph here. Let's copy and paste the text. We don't really need a least, so text links can easily delete them. I am going to get rid of the least altogether. This section will be a bit more complicated, so let's rename it first. I'm going to give it a name of Footer section four. And inside I have this H2 and also paragraph. But here I have little input field and subscribe button so that someone can subscribe to my newsletter. And so I need to use this form block first and then some inputs. You cannot use input, just an input without a Form Block. So please remember that you always have to have this form look first and then you can add form elements to it. Well, we don't really need all the fields. I'm going to delete the name label as well as name input field. But for email address, I need to delete it. Also the label. We have this little subscribe button over here, and we have just an input. We have enter your email and a little icon. So let's restyle this button I need to paste or just type in the text subscribing there. I don't want to change all of their submit buttons on my website, so I'll create another selector, footer form submit. And let's first bring down the opacity of the colour to 0%. And also, I'm going to change some text properties. That would be 16 pixels, I guess, with text decoration and bit different line-height. Now it looks pretty much okay. Now let's consult with the design once more and let's restyle this input field. It has a wide border, but opacity is set to 20%. So what you can do with the background, you can also click in here to set the background to be transparent. You don't have to lower the opacity down. For border radius. We are going to set it to eight and we're going to have light, this white border with two pixel width. And I'm going to rename this class to footer form TextField. I'd like to create in the settings, I like to create a placeholder. And with enter your email text, I'm just going to paste it in there. And also we need to change its capacity to 20. So we're gonna initiate it with 20% opacity, but when someone hovers over it, I'm gonna change it to 100. So it will lighten up like this. Okay, now we need this little icon and 40 icon. We obviously can use Font Awesome, but we can also export this icon and set it as a background to our input. Sometimes it's really useful, so I want to show you how to do it. Let's just import this icon and you can turn off tiling, set the position to be center left. And now we have. The sizing options, obviously we're going to use this custom size. We don't want it to be cover or contained. We're going to switch to costume. And for the width of this icon and height, if we set it to auto, it will automatically be the size of an exported icon. So what we need to do right now is to set paddings and margarines. Why don't we set the padding for entire form text field to be you at say 45. And we still need to move this icon a little bit. So if we go back to the background and let's take a look at this last property here. We can move it up arrow on the keyboard to be Tip 2%. But also we can use absolute values such as eight pixels. And I think that this is the effect that we wanted to accomplish. And just to be pixel perfect, I'm gonna change this bubbling slightly, bring it down to 40 pixels. And sometimes you just have to test stuff out in the preview. Let's go to command Shift P preview. And everything seems to be arrived, but when you start typing in the field, it seems that the text is gray and you cannot really see the texts. So we need to change it, we need to fix it. Let's get back to designer. And for the first glance, it looks pretty much okay because it's light blue, but this is this little bug from web flow. You have to reset the color sometimes when it's inherited, it doesn't give you the right color and right now if I reset it, everything looks pretty good. Now, all that's left is to change the position of the elements in this footer section four and we need to add another structural element because we have this header and paragraph that we need to group together. So let's press a and select Simple d-block and put header and paragraph in this debug. Well, sometimes in Navigator, it's pretty difficult to move things around. So you can always copy and paste and then delete the old instance. It's, sometimes it's so much faster. Now let's select this footer section four and change the display to flex. I'm going to leave horizontal. I am going to leave it to horizontal. But then now we have this D-block which is a flex Child, and the form itself is of Lecture two. Let me check the size of this element and set it as max width. I'm going to put 250 here. And let's rename the d-block. It's going to be just a footer section texts. And one last thing I'd like to do is probably to have this subscribe button to be positioned to the right hand side of that text input field. I'm going to select this. And you remember that for buttons and images and texts, I can easily use typography settings. I'm setting the alignment to be right. And for my base structure of a footer without copyright note, what's left to do is probably just to set the padding right? And I need to set this padding to around 105 for the entire footer section. Let's use 105 and we are almost ready to go. I mean, we have this four footer sections, and in the next lesson I'm going to create this copyright note. 34. Footer part 2: Alright, let's now finish our footer. Oh, what's left to do is this copyright section and some responsive versions. So what we have here is footer section inside we have flex container, which happens to be everything on top. And then we have this footer logo link as well as textblock. We need to put it in a different, in a separate technical container. As usual, we're going to use a d-block. So let's have this deep blog and let's position it in the right place in Navigator stack. Then let's put textbook inside this div book as well as footer local link. I need to paste correct text here in copyrights and exchange the logo inside the link. I'm just going to click or double-click on, on the footer image and choose the right image. It should be in our library of assets. There it is, okay, so now we need to apply styling for copyrights. I can see that this is 20%, 30 percent capacity. That's actually the same as we have in this paragraph. So instead of creating a new class, let's try to reuse something. We have fuller paragraph that we could apply as a class here. And the font settings are correct. Right now, I need to set this dashed line on top of entire d-block. I'm going to first set the display to flex and direction we're going to leave horizontal for now. But what I want to do is position the alignment of the items. I'm going to put them all in the center. And for the logo, what I like to do is just set up some margin to push to the right this copyright texts that we have. And now for the d-block itself, let's rename it. Let's have footer copyright. And in here let's first set the padding to be 20 pixels. And also I need to set the top border of this container to be dashed line. Let me select the line and here we have the border size is two, then we have six and dash and eight gap. Well, this is not really doable in the web flow level, doesn't have as many features as Adobe XD. You can obviously tweak it with custom code. But in here, I think that what we have is enough. We're going to set the border, the border to be dashed. And we can set the width of this border to be two pixels and also change the color. We're going to have white color, but we change the alpha two opacity to 20 or 30%. And this is kind of similar of what we have in the design. But if you want more sophisticated dashed line, you'd have to use custom code and just UCSF pilot. Okay, now I'd like to add social media icons to the right-hand side of our footer. So first, I need to group those elements altogether. We have one section, but I really need another d-block because this will be the flex child probably that's how I'm going to position this to the left and those social media icons to the right. So I have one div block with both login copyright note, and now I'm going to create another div block, and this is a container for my social media icons. So this way I can easily go to Footer copyright section. It's already a flexbox, but now I want to set justify option to space between. And thanks to this, I'm going to have this flex children to be. One is to the left hand side and the other to the right-hand side. Now, for the fullier paragraph, well, I'm, I need to change some styling. I can change it to inline-block, but please bear in mind that this footer paragraph is also here and there. And for this particular case, it doesn't really change anything. But always keep in mind that if you change one class and its reuse somewhere else in the layout, it might, it might break, so we need to control it. Now I've copied and pasted logo because the structure is correct for social media icons as well will have link block and inside we'll have an image for each social media. I'm gonna get rid of this class and create a new one because I need to apply some new CSS properties, that would be food or social media. And now I can select and basically copy and paste this four times, three times because I have for social media icons. And let's double-click and replace images of already imported those images. You can find them in source files. And first it'll be Facebook. Second one, let's replace it with YouTube logo. Dan will have Instagram, and the last icon goes for Twitter. And now we have to just manage some spacing as well as opacity, the link settings for these elements. I'll set the URL to social media later on. And I will just link straight from there. But in the styling, I need to apply a little bit of margin. If I use margin right, it wouldn't be in-line with this dashed line on top. So instead I'm going to use margin left. And let's use ten pixel margin. I think that's fine. And I have white icons. This is for a purpose because I want these icons to be white while hovering. But their initial state would be with a bit lower upon opacity. So let's have discussed elected and lower the opacity down to 20%. But in the hover state, have opacity set to a 100. Right now. Oh, what's that? And let's go back to this default state is to set this footer to have bottom padding, not Marvin, I need padding because I want this background to also be visible, the blue background. So let me set the padding to, let's say 20. And we have a, some kind of breathing room under social media icons as well as copyright note. Now it looks pretty much okay. Well, it's okay for the base resolution, but if we tried to scale it in different resolutions in tablet, it doesn't really look good in mobile. I think it's pretty okay. But let's go to tablet you first and try to fix it. What we can do here is to change the stacking order and change the position of this footer section for its already a flex child and flags books, by the way. So we can turn to be vertical flexbox. And now it just occupies less space. And for this particular footer section one, we can change the max width of this elements so that it's just smaller and say 220. And now it looks all right for the tablet, it's the smallest size for the tablet. So in the bigger views, it's already okay, and now for the mobile landscape, Let's take a look at it's pretty crowded. So in this case, I might change the stacking order or for footer section four in this particular resolution, I might just hide it. I don't think it's the most important thing in mobile view, so I'm going to hide it, set display to none. But in the smallest screen, you'll see that the stacking order is changed and the items are displayed vertically. So now if I change the display to block, you see that everything is fine. I just have this beer longer scroll and if you don't mind, you can keep it that way. Okay, so I think that we have this foods are mostly done. The spacing is not really correct. Still, I need to change some piping and adjust them in, especially in mobile views. I can also add some breathing space to the left and right-hand side. I think it's much better right now. And for the smallest screen, changes from landscape are applied automatically and everything seems to look really, really good. Of course, you can spend much more time on tweaking this and making it perfect like you have in the design. But I don't think it's really useful for now. I guess that you have all the knowledge that's connected with layout and with styling. And I'd like to show you some more advanced features of web flow in the next videos. See you there. 35. Custom Animations part 1: In this lesson and in the following one, I'd like to add some finishing touches to our website. We have the HTML structure and CSS styling ready, but there are some things that can be done to improve our website's usability and overall experience. The first thing, I'll focus on the menu, so I like to create a little bit of a drop shadow effect below the menu and I scroll so that it's easily distinguishable from my website. And also I can see that there's a problem here of z indexes. And for some sections, the menu is just hidden behind the sections. It should be always in front of my website. So let's select the header and let's go to position. If you add position thanks to the element, it means that probably this element will be visible across the entire page while scrolling. So it's highly probable that some other element will cover it from time to time. So it's really useful for fixed elements to Z index. And I usually give pretty high volume, for example, a hundreds. And this makes sure that all the other elements that has no Z index value set plus the elements that has lower as the index value will never come in the way of our menu, and the menu will be always on top of them. So now that I have this 100, the index I can easily scroll throughout the website and all of the sections that I have are below the menu itself. Another nice match for nav bar would be adding just a little bit of shadow, but when someone scrolls the page, so I have header selected, let's go to interactions. And now let's create page trigger interaction. So the page trigger interactions will fire well, for example, pages loaded or pages scrolling or page is scroll to some position. And this is exactly what we're looking for. So when the page is scrolled up and debate is scroll down, we can react with some animation probably. So when scrolled down, we want to start an animation and there isn't offset property that we can now set up. If we don't want a user to CD animation, unless he scrolls, let's say 510 or 20% of our page, we can determine it with this offset property. So after 10% visible height of the website is scrolled, then the animation will happen, and that's exactly what we want to do. Now let's create another animation and I'm going to give it the name of Heather shadow. And let's add an action. So here we have the properties that we can animate in terms of the header problem is there is no box shadow that we could animate. Well, we have two pocket somehow and one of the possible solutions is creating another element in the HTML structure that will be the same size as the header, but it will contain the shadow. And then we'll manage, will animate the opacity of this element. And that's exactly what I'm trying to do here. So I'll created another d-block and I want the position as well as the properties of this deep dog to be the same as the header. So let's switch to fall, for example, and change Bottom to auto. And this way it will be spread from left to right and to the pinned to the top. But then we'll have to add some box shadow. And also we want to determine, Let me add just a little bit of box shadow for now so that I can see this shadow because otherwise the debug is invisible and I couldn't see its height right now when I apply some height, you'll see that the shadow is visible. So now I can find a place on my page where I can clearly see the height of the header. And then I'm going to just determine, I'm going to change the height of the D block so that it matches the header exactly. So I can click in this field and then with keyboard arrows, I can change the values. I can press and hold shift to change the values in ten pixels increments as well. And now I'm pretty close, but let me just change this shadow so that it looks a bit better. So I'm going to just adjusted this dance and the blur. Obviously, I will decrease the opacity of bug core. So let me do it just now. Maybe we could add some extra padding below this phone number. Just leave it for now. And what we want to do is decrease the opacity of this entire header shadow debug. And now if we go back to interactions and our page trigger interaction, we can go back to the animation and for the header shadow, what we actually want to do is add the opacity animation. So we've started with 0 opacity, and right now we want to go to a 100% opacity. If we scroll right now, let's take a look. We are above 10% scroll position. But if we go below this 10% scroll position, somewhere here, you'll see that shadow appears immediately. Problem is that it doesn't disappear when I go back to original buck to the top of the website. So I'm going to create an animation that will simply be executed when I'm scrolling up. So I get this offset to ten as well. And also creates a reverse animation for this. So let me give it the name of the header, shadow clothes. Now we have Heather shadow selected and I can easily animate opacity back to 0%. So this animation will be executed when someone scrolls back to 10% or less of our page. And in the preview you can see the effect happening. It's pretty cool and we can also maybe add just a little bit of padding so that regarding this background of our navigation bar, Jews logo and the menu could be in the very center of this background, but let's keep it for now. I think it's very easy. So what I'll do instead is just fix this shadow a little bit ion to decrease the capacity. I think it was too dark. Now, it's pretty much perfect. So let's leave the menu as it is and the Navbar is finished. But it would be great to create some hover effects on those cards that we have with AI, software services and marketing automation may be, Let's have an effect that's similar to the one that we've made with blog and how we can accomplish that. While it's super easy, now that we have all the HTML and CSS in place, let's select feature block, and let's create the element trigger for the animation that would be moused over and in the hover state will create the animation. I didn't think that any of those effects would suffice. I guess that those are a little bit too extreme effects. So I always end up creating my own animation that I can control from start to the end. And this will be the hover animation for each of those cards. So let me rename it to feature block hover. Now let's add the action of scaling, and I need to rescale it just slightly 4.2 of a second. So I changed the duration. And I have this little lock icon sets so that if I change x and y position, they will change simultaneously. I changed them to 0.95. and now let's have this animation hover out. So reverse animation happening with scale as well. And I'm gonna do one here for x and y scale and also duration 4.2 of a second. This trigger settings we need to apply to entire class because we want all feature blocks to be animated automatically when I hover over them. And there you have the effect. It's pretty nice. I think adding this finishing touches, touches to your website is really, really important. As you can see. It took us, I don't know, 30 seconds or one minute to create an animation like this. And it is always better for the user experience and overall experience on your website to have such a little tasty features that user will surely appreciate. That's it for this lesson, I'll show you how to create more animations in the next one. 36. Custom Animations part 2: Hi there and welcome to the next lesson. In this one, I like to show you even more examples of pretty cool animations. And this time we're going to animate the entrance of our websites are when user enters the sides and the page loads or he's crossed through the side, we're gonna show some of the elements. And this is not really great for all of the pages, but for product pages, for landing pages, we can accomplish that fairly easy in web flow. So let me select this feature, greet and create a new interaction. I am going to select page trigger and now we have this page load trigger. What I want to do is when page finishes loading or when page starts loading, we can create an animation. Let's create our custom animation for page start loading, and let's give it a name opening sequence. And this opening sequence will sequentially show all the elements that are on our homepage. And this is going to require this element to half capacity lower to 0%. The problem is though, I won't be able to see those elements in the designer, and that's not really what I expected. So let me go back to 100 and let me go back to this page load animation, this opening sequence. And instead of declaring the opacity up front, I'm going to just select the elements like hero header. And I'm going to decrease the capacity here as a starting point of this animation. So I'm, I'll just set this initial state as opacity 0. Thanks to this, I can see and edit them in designer, but in initial state of the animation, the elements would be hidden. The same thing I apply to this picture. And now let's have it as initial state as well. It's as easy as dragging and dropping this D-block to our initial state of the animation. And now the animation haven't even started. Right now, I'm creating this opacity 0 for future rate as well as initial, initial state. And let's start our animation. So we'll start with Hero header, click on plus, and then opacity and bring it up to a 100. I also want to delay this animation just a little bit. So let me have this delayed to 0.2 of a second. So I make sure that user is ready to see the animation 0.2 of a second and it's going to last for 0.5 over a second. The next step of this animation will be dv book. So the book basically contains our picture. And now I'm animating this for 2.5th. And then last step of the animation, turning opacity to a 100 on feature greed, and that's basically it. So in the designer view, now I have all the things and I can edit them, I can see them in the preview. I'll have the initial state of the animation and sequentially I am going to show all the elements. So this is one way in which you can think of this opening sequences, opening animations. The other way is to have elements arrive in your website while users cross your website. Let's try to accomplish this on standard section. If you'd like to use page trigger, you have page scrolled and when page is scrolling, that's not really the way we want to handle that because then we'd need to set the offset while in element triggers, what we have here is scroll into view. And also while scrolling in view. Scroll into view determines that the animation will take place when someone's close to the very top of this elements. So while the browser meets the first pixel of this element, then the animation will happen. And while scrolling in view as an animation that will happen sequentially. So for example, if users crossed 50% of the screen, the animation will come to 50% progress. This is pretty useful if you have, for example, e-commerce website and you have 3D rotation for the product or something like this. But in our case, we're going to select when scroll into view. So now we can create our custom animation. As usual, we like to create a new animation and give it a name of standards animation. And again, we'd like to animate the opacity of this element. I'd like this element to show up when the page is being scroll. So I need to set the initial states to opacity 0. And Dan said the animation state to opacity 100 with the duration, let's say 2.5th. And this should work. So let me scroll to the top. Now that's pretty the website. And let's scroll to the position of standard section. The problem is I have no delay. So the moment I reach the first pixel of this section, it automatically animates. So I'd like to add some kind of delay, for example, half of a second. And this is one way to do it. So now if I scroll, there is a slight offset and the element appears. So it depends how fast users grows, how long it has to wait until it arrives. But usually it's a good way to just delay the, this kind of animation by 0.2 of a second or 0.3 over seconds. But there's also other way we can use this offset. And in this particular case, if we set offset to say 50% for this scroll into view, will have to arrive at half of the height of this element with our scroll bar in the browser. So let's say here for this element to arrive. So, so even if we are on the top 10%, 20-30 percent of the element, it doesn't arrive. The canvas is empty, but then if we hit 50% pixel, it will automatically triggered the animation. So this is one way to do it. Usually I said 20% offset for all these kind of animations, or just 0.2 of a second offset. Here you can, for example, create move on, move transition as well. And let's say we want to move it with the x i, y axis. So let's move it up slightly, and then we'll move it back to 0. So it should arrive 30 pixels from the top to our 0. And this is how it actually works right now let me redo it. And it kind of scrolls from top to bottom. But if we reverse this animation, so for example, make this, let's go to move and lets initiate this, not with third minus Verdi, but we're 30. Then it will start from the bottom and go 30 pixels up and appear on the page. So this looks even better. As you can see, there are many ways in which you can make your website even more appealing quizzes, animations. You can change targets here and copy this animation so that they appear on different sections, but also with our structure of the page where we have contents everywhere. So each section has this content block. You can apply this to content class. You can apply the same animation to content class. And then each block of our website will sequentially appear when users scrolls it with, let's say 20% offset or points to of a second offset. So when user scrolls, he'll have this pretty nice effect of showing up the following elements. Right now, I'll apply some finishing touches to our website. I'll check the responsive versions and I'll meet you in the next lesson. See you there. 37. Form in Zapier: In this lesson, I'd like to show you how to create your very first automation and we'll do it thanks to zap here. So if you don't have account, please register free account with happier and then create a ZAP. So you click on maker's up. And what we want to accomplish here is we want to link our web form and receive data from this form and put them into Google sheets or our mailing list. That's why I'm choosing Pueblo as an app. And now what I'd like to do, I need to receive form submission. So let's select form submissions and continue. Now we need to connect our WEBO account. If you already connected this account, you can easily continue and then select the website. And that's the site name. You have to select the site name of this website that we've created and where the form is. And there you have also the form name. So you can have multiple forms on your website. And if you publisher side, this is pretty crucial. You have to first publisher site in order this automation to work. So you have to publish even on this web, those have domain. And then it's the easiest way is just to fill in the form and simply send the form from web though, because then you have this one submission that can be now processed by Zagier. And by the way, if you take a look at the form properties in settings, you have form name. So for the entire form block, you have form name and the email form, so you can change it to whatever you like. And then this name will be accessible here as a form name. You can have multiple forms then and then Zappa will listen to this forms and let you do whatever you want with the submissions. It's pretty important that you have entered your first submission on the publisher's website because right now you can test, trigger. And if you have filled the submission, you'll have some sample data here. If data is correct, I press Continue and this is all I need to do in terms of the trigger now the action. So what should happen when someone feels our form? You can do whatever you want. For example, assign someone app for your matching newsletter. But what I'm gonna do is create a simple Google Sheets documents and I'll give it a name workflow submissions. Then select Google Sheet integration and I'll create a spreadsheet row each time someone signs up. Let's continue. Now you need to connect your account and one important thing in the first row of your document of your sheet, you need to give like the name, for example, email or email address or something that would be meaningful. Because then Zappa will look for this first row and also for the name of our worksheets. So I've renamed it to form. Now let's go back to his happier, it's continue. And here you have a connection with Google Drive and the spreadsheet workflow submission, then you have worksheets selected and the name is exactly what I've renamed it to. And then you have this email. And if you don't have this first column, so if you don't have this particular name here, it wasn't appear so you couldn't add those emails to this column. So you need to name this column first in the first row, and then it will appear just right there. Okay, so now we want some data from our form. And if you click in this field, you'll see that we have formed submission in the web flow. And from this sample that I've sent, from my form, we have the data available. And if we select data, email, every time someone fills up RM form, it will be different email that will be passed to this as the spreadsheet, as a new row, we can test it and continue. And once we test it and go to Workflow submissions, you'll see that here we have another row created with the email address that I've entered at the end. Please remember to turn on your zap and rename it to something more meaningful. For example, Web Flow, juice submissions, and now it's own. So all the form data will go straight to zap here and it will be processed. So let me test it out with some random email address, and here it is, automatically. It went to my Google Sheets. Know, obviously Google Sheets are not the best for email address capturing and sending emails. But in, up here you can add another action and you can, for example, sign up those emails for your gut response, mailing list or Mail Chimp or mailer lights. Or you can send e-mails directly from male gun or just add those people to CRM such as Hotspot. So this will let you create and connect multiple tools without using any code. And thanks to this, you can receive those forums and process them. Another place in which you'll find your submissions is at web, those settings page for your website. If you go to form stop. Then at the bottom of this Forums tab, you'll have all the submissions from all your forms. And this is by the way, also how web flow limits its hosting plans. So you have to have this hosting plan for form to work. And then if you want to have received more and more submissions, you'd have to go with higher plan. That's it for now. See you in the next lesson. 38. Website Publishing: Welcome to the last lesson of this course. Throughout the material I hope that you had fun at. You managed to create your own website similar to the one that we've created in web flow. Now you know all the things about HTML elements and structure, as well as a layout and CSS properties in web flow. Obviously, there is a lot of more advanced techniques to cover in web though, such as CMS, e-commerce, and editor. And I'll do it in more advanced courses right now, if you go to style manager, you can clean up your styles and remove unused classes. Also, you can take a look at the class structure and rename the classes, may be tidy them up a little bit. This is usually what I do after I finish website. Also, I usually use style guides and more advanced class naming, but I wanted to keep it really, really simple for this course and that's why classes are just a little bit messy. But I think that's OK. If you're just starting up in web though, later on, you're going to have this workflow in which you can create your own naming conventions and style guides. But for now it's fine now for the responsive versions with made a lot of different tweaks in responsive breakpoints for tablet and for mobile. But if you want to go higher up the scale, you could obviously add some more responsive breakpoints for bigger screens. This is not as important as creating smaller screen variants simply because if you go to bigger screen right now with this website, it will stay centered and then you'll just have margins to the left and right hand side. But again, in web flow you can address this and for example, make a full HD breakpoint. Right now, my designer previous scaled to 83.3%, so everything is kind of smaller, but this is just a preview. I can not go up the scale to 100% because simply my display is not capable of being everything in this resolution. And then also the interface of WEBO. And that's why the preview is scale, but the website itself, it's not scaled obviously. So in here, for example, we can, we can make things. Why there we have this content container and we have this mock Sweet set to content container so we can make it bigger for each of the elements. Here we have content hero combo class. But if we want to make it for all of the contents of the sections, let's go to content class directly. And that's added this max-width property to let say 1582. And then all of the containers which are not centered, we'll be spread across this certain size. Now, let me undo. I'm gonna finish with only one bigger breakpoint that we've created at the beginning. Also, please remember that you can turn your website into a full fledged e-commerce website, or you can add a CMS in order to create some dynamic data that later on your client, for example, or you or your colleague can edit straight in the editor. So in the browser, those are things that I'm gonna show you in more advanced classes. For now, let's take a look at this published section so you can publish your website on Web Flow sub-domain, or you can add your own custom domain. I'm going to show you how to do it exactly in the advanced course right now there's really no need to add custom domain to this page. But if you really want to launch your website, there is a hosting plan that you can go for with workflow and then you can pay for basic plan or CMS or business plans. There are different options and they give you different possibilities with Web Flow. In our case, this 12 box basic plan will be more than enough because we have studied 100's static pages, we are using only one. We have 25 thousand monthly visits and also 500 form submissions were not using NS EMS features or e-commerce features for our website that will force us to upgrade to a higher pricing tier. So this is one solution you can stay with web flow. You can buy domain, for example, on GoDaddy, and you can connect it to your website. You can publish. And one huge advantage here is that you stay in web ecosystem. It means that the website that you host is still available for you in the designer's view. And you can quickly make some changes and simply publish this website with one click of a button. Web though also gives you this another domain, the subdomain on web flow I0. And thanks to this, you can have multiple versions of your website. For example, you can publish your drafts on this workflow sub-domain than your client Matt accepted and then you can select that you want to publish directly to his domain. The other case, the other way around, export the code and you can do it by clicking on this little icon. And here you have HTML, CSS, JavaScript, and all the assets that can be created and packed as a zip file. And you can download this archive and then this archive can be used on any web server. So for example, you can buy a cheap server and via FTP or maybe use GitHub pages or netlist phi, you can just upload and deploy this website. As I told you, one thing that you lose is the ability to edit this in web flow because there's a way to download and export entire codebase from web though, but unfortunately there is no way to import anything to web flow. So if you download the files and then let's say you want to modify those files locally with Visual Studio code or Sublime Text and absolute them again and again. And then you decide, oh, it would be nice to work with this fires in designer. Unfortunately, there's no way you can upload such modified files to web though. So think twice, Not even before you export the code because you can export a code and then you can modify in designer that export once more. And if you work in this manner, so for example, you have website sitting on your server, but then you make changes to the website directly in designer. And then you, every time you export the code and just replace this version, it would work. However, it's really painful because then you What's the point of having separate server and separate files if you still have to deploy them and you can't really make changes outside of web though. So sometimes for me it's much easier to pay 12 bucks a month and have this website hosted by web flow. On top of this, I'm just gonna give you one tip that I discuss in detail in the advanced course. If you are charging your client for your website, web flow has a special feature that will allow you to build your client and you can build a client for a hosting, but you don't necessarily have to charge, let's say 12 bucks. You can charge 50. Then as some part of this also goes to you as a person who maintains this website and help to develop it. So as you can see, there are some things to consider, but at the end, it's your decision whether you will stay with your website, with web though, and it's hosting or just downloaded and hosted yourself. One more advantage for web hosting is if you have a lot of traffic or you might expect that you have a lot of people coming at one time to your website. For example, if you have a booking system for tickets, Dan, workflow servers are really safe because they can handle a lot of traffic and they have CDNs and older or the mechanism that will help you with this traffic. And the cheap servers usually don't. And that's it for the code export. You obviously cannot modify code from designers code export. But if you go to Settings and to custom code, I hope that you remember that we've put some custom styling in here. And sometimes you'll use this head Code section to add some JavaScript or some custom plug-ins that are available via integrations. You can add code to head and to the footer, so before closing of the body tag. So there are two places where you can inject your own code. This is not super-helpful in the designer because you won't really see those changes in the designer about again, it you talking integrations or scripts. You can easily add this in custom code section. And you also have this form section, as I told you, to receive form notifications from web though. So when someone enters his email in your form, this submission is now being sent to whatever address you provide with some subject line and we tried to address this is not the email that will be sent out to people subscribing, but to your admins or to you. And also you have this form submission data. As I told you, there are all of the submissions stored for the free plan. You have 50 form submissions they can receive. And if you want more than you upgrade for some higher plan, you can obviously download those former submissions as well. And there are a lot of other settings regarding SEO or there's an editor that will let your client edit your website real-time in the browser. But all of those are much more advanced. And if you want to know more about web though and how you can use it's powerful features such as CMS or even create your own e-commerce websites entirely with web flow, with products that you can define and you can later on edit with stripe payments. Please check out my other courses. This is where it gets really exciting. So I hope that you check advanced courses as well as you can check out my framework at system flow, which I use every day to create web flow pages. And for now that's it. Hope you had fun creating this practical project and learning all about what web flow, layout, HTML and CSS, all along, thanks for watching and see you in the next courses. 39. Thank you: And that's it for this course. Thank you so much for your attention and for choosing to spend the last few hours with Web Flow and me. I hope you feel more confident in Web Flow and I hope that you've managed to recreate my projects. If not, please do it your free time. I recommend doing this project as a part of your homework. And this is kind of the beginning of the possibilities of Web Flow apart from the layout that we discussed in this course. Well, flow gives you plenty of opportunities to create dynamic websites using their CMS and even more advanced complete e-commerce solutions with card products and payments. In order to teach you those techniques, I created separate courses which I really encourage you to check out. In the meantime. That's all for now. Thank you again and see you in the next courses.